:root { --navy:#10263c; --night:#091827; --gold:#af8a4d; --ivory:#f6f0e2; --paper:#fffcf5; --ink:#172739; --muted:#58606a; --line:#d5c9b1; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:280px; color:var(--ink); background:var(--ivory); font:400 16px/1.65 "Manrope",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.38; background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(85,66,39,.035) 27px 28px),repeating-linear-gradient(0deg,transparent 0 26px,rgba(85,66,39,.035) 27px 28px); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
img { display:block; max-width:100%; }
.guide-header,.breadcrumb,main,.guide-footer { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.guide-header { min-height:90px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:3px double var(--line); }
.guide-brand { flex:0 0 78px; width:78px; height:78px; display:block; }
.guide-brand img { width:100%; height:100%; object-fit:contain; }
.guide-header nav { display:flex; gap:28px; }
.guide-header nav a { color:#394a55; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.guide-header nav a:hover,.guide-secondary:hover,.guide-footer a:hover { color:#8b6a35; }
.breadcrumb { display:flex; align-items:center; gap:10px; padding-block:30px 22px; color:var(--muted); font-size:12px; font-weight:700; }
.breadcrumb a { color:#375067; }
.breadcrumb a:hover { text-decoration:underline; }
.guide-hero { min-height:530px; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; background:var(--night); color:var(--paper); border:1px solid #213f55; box-shadow:0 30px 70px rgba(17,34,49,.16); }
.guide-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(34px,5.2vw,70px); background:linear-gradient(110deg,#10263c 0%,#10263c 82%,rgba(16,38,60,.7) 100%); }
.guide-kicker { color:#d5ae65; font-size:10px; font-weight:700; letter-spacing:.23em; text-transform:uppercase; }
.guide-hero h1 { max-width:630px; margin:14px 0 5px; font:500 clamp(44px,5vw,76px)/.99 "EB Garamond",Georgia,serif; letter-spacing:-.035em; }
.guide-hero h1 em { color:#e5ca91; font-weight:500; }
.guide-subtitle { margin:12px 0 8px !important; color:#e1bc76 !important; font-size:13px !important; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.guide-hero-copy > p:not(.guide-subtitle) { max-width:530px; margin:8px 0 0; color:#e0e6e6; line-height:1.8; }
.guide-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:28px; }
.guide-primary { display:inline-flex; justify-content:space-between; align-items:center; gap:32px; padding:15px 20px; color:#142339; background:#eac988; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; box-shadow:5px 5px 0 #785d33; transition:transform .2s,box-shadow .2s; }
.guide-primary:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 #785d33; }
.guide-primary span { font-size:19px; }
.guide-secondary { border-bottom:1px solid #e3d0a5; color:#f0e4ca; font-size:12px; font-weight:700; }
.guide-hero-copy small { margin-top:32px; color:#c4cdd3; font-size:11px; }
.guide-figure { position:relative; min-height:530px; overflow:hidden; background:#07101b; }
.guide-figure::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,26,42,.45),transparent 35%),linear-gradient(0deg,rgba(7,16,27,.68),transparent 40%); }
.guide-figure img { width:100%; height:100%; object-fit:cover; object-position:center; }
.guide-figure > span,.guide-figure > b { position:absolute; z-index:1; color:#e6d1a4; }
.guide-figure > span { top:25px; right:28px; font-size:10px; font-weight:800; letter-spacing:.18em; }
.guide-figure > b { right:28px; bottom:12px; font:500 100px/1 "EB Garamond",Georgia,serif; opacity:.7; }
.guide-dossier { display:flex; flex-direction:column; min-height:530px; padding:28px 31px; color:#e9dfca; background:radial-gradient(circle at 100% 0,#b3935130,transparent 48%),repeating-linear-gradient(90deg,transparent 0 38px,#c1a36d0b 39px 40px),#0e2436; border-left:1px solid #d0b47545; }
.guide-dossier-head { display:flex; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:3px double #a98b526e; color:#d5bd88; font-size:9px; font-weight:700; letter-spacing:.14em; }
.guide-dossier-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding-top:12px; }
.guide-dossier-number { color:#c7aa704a; font:500 91px/.88 "EB Garamond",Georgia,serif; letter-spacing:-.06em; }
.guide-dossier-body > strong { margin:0 0 15px; color:#f3ead5; font:500 31px/1.05 "EB Garamond",Georgia,serif; }
.guide-dossier-body ol { width:100%; padding:0; margin:0; list-style:none; }
.guide-dossier-body li { display:grid; grid-template-columns:28px 1fr; gap:10px; padding:10px 0; border-top:1px solid #a8b9c13d; color:#d4dfe2; font-size:12px; line-height:1.45; }
.guide-dossier-body li span { color:#d4b473; font:500 16px/1 "EB Garamond",Georgia,serif; }
.guide-dossier-body > a { margin-top:auto; padding-top:14px; color:#e2ca94; font-size:11px; font-weight:700; }
.guide-dossier-body > a:hover { text-decoration:underline; text-underline-offset:3px; }
.guide-hub-index .guide-dossier-body { gap:0; padding-top:54px; }
.guide-hub-index .guide-dossier-body > strong { margin-bottom:22px; font-size:35px; }
.guide-hub-index .guide-dossier-body > a { width:100%; margin:0; padding:12px 0; border-top:1px solid #a8b9c13d; color:#e9dfca; font:500 19px/1.2 "EB Garamond",Georgia,serif; text-decoration:none; }
.guide-hub-index .guide-dossier-body > a:hover { color:#eac988; transform:translateX(3px); }
.guide-hub-index .guide-dossier-body > a span { display:inline-block; width:32px; color:#d4b473; font-size:16px; }
.guide-hub-index .guide-dossier-body > small { margin-top:auto; padding-top:18px; color:#aec0c8; font-size:10px; }
.guide-content { display:grid; grid-template-columns:.7fr 1.3fr; gap:65px; margin:74px 0; padding-bottom:65px; border-bottom:1px solid var(--line); }
.guide-content h2,.guide-tip h2 { margin:10px 0 16px; color:var(--navy); font:500 clamp(36px,4vw,53px)/1.08 "EB Garamond",Georgia,serif; }
.guide-content p,.guide-tip p { max-width:510px; margin:0; color:#49525b; font-size:15px; line-height:1.8; }
.guide-content ol { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.guide-content li { display:flex; align-items:baseline; gap:22px; padding:20px 6px; border-bottom:1px solid var(--line); color:#27394c; font-size:15px; font-weight:600; }
.guide-content li span { min-width:23px; color:#9b773d; font:600 17px "EB Garamond",Georgia,serif; }
.guide-samples { margin:-16px 0 70px; }
.guide-samples h2 { margin:10px 0 8px; color:var(--navy); font:500 clamp(35px,4vw,50px)/1.08 "EB Garamond",Georgia,serif; }
.guide-samples > p { max-width:720px; margin:0 0 26px; color:#49525b; font-size:15px; }
.guide-samples-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.guide-samples-list article { padding:23px 24px; border:1px solid var(--line); border-top:3px solid var(--gold); background:var(--paper); }
.guide-samples-list h3 { margin:12px 0 16px; color:var(--navy); font:500 25px/1.2 "EB Garamond",Georgia,serif; }
.guide-samples-list p { margin:0 0 9px; color:#49525b; font-size:13px; line-height:1.65; }
.guide-samples-list p strong { color:#284438; }
.guide-tip { max-width:800px; margin-bottom:70px; padding:33px 40px; background:var(--paper); border-left:4px solid var(--gold); box-shadow:0 12px 32px rgba(49,50,45,.06); }
.guide-tip h2 { font-size:36px; }
.guide-tip p + p { margin-top:12px; }
.guide-next { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:80px; }
.guide-next a { display:flex; flex-direction:column; padding:23px 27px; border:1px solid var(--line); background:rgba(255,252,245,.55); transition:background .2s,transform .2s; }
.guide-next a:hover { background:var(--paper); transform:translateY(-3px); }
.guide-next a:last-child { align-items:flex-end; text-align:right; }
.guide-next span { color:#8c703e; font-size:10px; font-weight:800; letter-spacing:.18em; }
.guide-next strong { color:var(--navy); font:500 29px/1.2 "EB Garamond",Georgia,serif; }
.ad-placement[hidden] { display:none !important; }
.ad-placement:not([hidden]) { min-height:120px; margin:0 0 70px; padding:16px; border:1px solid var(--line); background:var(--paper); text-align:center; }
.ad-placement-label { display:block; margin-bottom:10px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.guide-footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:24px 0 35px; border-top:3px double var(--line); color:var(--muted); font-size:12px; }
.guide-footer p { max-width:720px; margin:0; }
.guide-footer a { flex-shrink:0; font-weight:800; }
.lesson-objectives { padding-left:18px; color:var(--muted); font-size:15px; line-height:1.8; }
.lesson-objectives li + li { margin-top:9px; }
.lesson-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(30px,6vw,80px); align-items:start; margin:0 0 80px; }
.lesson-nav { position:sticky; top:24px; display:grid; gap:3px; padding:22px 0; border-block:3px double var(--line); }
.lesson-nav > a { display:flex; gap:9px; padding:9px 0; color:#415362; font-size:12px; line-height:1.55; }
.lesson-nav > a > span { color:#9b763b; font-weight:800; }
.lesson-nav > a:hover { color:#806033; text-decoration:underline; text-underline-offset:4px; }
.lesson-body { min-width:0; max-width:800px; }
.lesson-block { padding:0 0 34px; margin:0 0 38px; border-bottom:1px solid var(--line); scroll-margin-top:24px; }
.lesson-block h2 { margin:10px 0 20px; color:var(--navy); font:500 clamp(30px,3.3vw,42px)/1.15 "EB Garamond",Georgia,serif; }
.lesson-block p,.lesson-block li { color:#414e57; font-size:15px; line-height:1.9; }
.lesson-block > p { max-width:75ch; }
.lesson-block > ul,.lesson-block > ol { padding-left:22px; }
.lesson-block li + li { margin-top:11px; }
.lesson-block p.lesson-citations,.lesson-review { font-size:12px; color:#5b6570; }
.lesson-citations a { display:inline-block; padding:3px; color:#715526; font-weight:700; }
.lesson-table-wrap { max-width:100%; overflow-x:auto; }
.lesson-table-wrap:focus-visible,.lesson-nav a:focus-visible,.lesson-body summary:focus-visible { outline:3px solid #ae884a; outline-offset:4px; }
.lesson-table-wrap table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.7; }
.lesson-table-wrap caption { text-align:left; margin-bottom:12px; color:var(--muted); font-size:12px; }
.lesson-table-wrap th,.lesson-table-wrap td { padding:16px 18px; border:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.lesson-table-wrap thead { background:var(--navy); color:var(--ivory,#f6f0e2); }
.lesson-table-wrap tbody th { width:32%; color:var(--navy); background:#eee7d9; }
.lesson-table-wrap tbody td { color:#414e57; background:var(--paper); }
.lesson-mistakes { border-left:3px solid #a08049; padding-left:24px; }
.lesson-body .guide-samples { margin:0 0 42px; scroll-margin-top:24px; }
.lesson-body .guide-samples-list { grid-template-columns:1fr; }
.lesson-body .guide-samples h2 { font-size:clamp(32px,4vw,44px); }
.lesson-body .guide-samples-list article { padding:clamp(22px,3vw,34px); }
.lesson-body .guide-samples-list h3 { font-size:21px; line-height:1.5; }
.lesson-options { padding-left:24px; color:#414e57; font-size:14px; line-height:1.8; }
.lesson-options li { padding-left:7px; margin-bottom:9px; }
.lesson-body details { border-top:1px solid var(--line); padding-top:16px; }
.lesson-body summary { color:#17384b; font-size:13px; font-weight:800; cursor:pointer; padding:5px 0; }
.lesson-body details[open] summary { margin-bottom:16px; }
.lesson-body details p { line-height:1.85; }
.lesson-retrieval .guide-primary { margin-top:18px; }
.lesson-sources ol { padding-left:22px; }
.lesson-sources a { color:#37556a; text-decoration:underline; text-decoration-color:#af8a4d; text-underline-offset:3px; overflow-wrap:anywhere; }
.lesson-sources li { font-size:13px; scroll-margin-top:24px; }
@media(max-width:900px) { .lesson-layout { grid-template-columns:1fr; gap:32px; } .lesson-nav { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; } .lesson-nav > .guide-kicker { grid-column:1/-1; } .lesson-body { max-width:none; } }
@media(max-width:560px) { .lesson-layout { margin-bottom:50px; } .lesson-nav { column-gap:16px; } .lesson-nav > a { font-size:11px; } .lesson-block p,.lesson-block li { font-size:14px; line-height:1.85; } .lesson-table-wrap th,.lesson-table-wrap td { padding:12px 10px; font-size:12px; } .lesson-body .guide-samples-list h3 { font-size:19px; } .lesson-mistakes { padding-left:18px; } }
@media (max-width:800px) {
  .guide-samples-list { grid-template-columns:1fr; }
  .guide-hero { min-height:0; }
  .guide-dossier { display:none; }
  .guide-hero { grid-template-columns:1fr; }
  .guide-hero-copy { padding:42px; }
  .guide-figure { min-height:260px; max-height:320px; }
  .guide-content { grid-template-columns:1fr; gap:24px; margin:50px 0; padding-bottom:44px; }
}
@media (max-width:560px) {
  .guide-header,.breadcrumb,main,.guide-footer { width:min(100% - 32px,1200px); }
  .guide-header { min-height:70px; }
  .guide-brand { flex-basis:58px; width:58px; height:58px; }
  .guide-header nav { gap:12px; }
  .guide-header nav a { font-size:10px; letter-spacing:0; }
  .guide-header nav a:nth-child(2) { display:none; }
  .breadcrumb { padding-block:22px 15px; font-size:11px; }
  .guide-hero-copy { padding:32px 25px; }
  .guide-hero h1 { font-size:48px; }
  .guide-hero-copy > p:not(.guide-subtitle) { font-size:14px; }
  .guide-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .guide-figure { min-height:230px; }
  .guide-content li { gap:14px; font-size:14px; }
  .guide-tip { padding:27px 25px; }
  .guide-next { gap:8px; }
  .guide-next a { padding:17px 14px; }
  .guide-next strong { font-size:22px; }
  .ad-placement:not([hidden]) { min-height:90px; margin-bottom:42px; }
  .guide-footer { align-items:flex-start; flex-direction:column; }
}