/* ------------------------------------------------------------------
   VEDETTE — ink on aged paper, on a dark desk.

   The house style as published for Exploring Officer (WEBSITE_BRIEF §4)
   and carried unchanged into the Vedette design canvas. There is no grey
   in the system and adding one makes it a different product. The paper
   never inverts: dark mode changes the desk, not the sheet.

   The period is carried by the prints, their captions and three
   typographic conventions — not by new colours and not by new faces.
   ------------------------------------------------------------------ */

:root{
  --paper:#F2E8D5; --ink:#3A2E21; --rule:#CBB894; --foxing:#8B6B45;
  --scarlet:#A6362C; --gold:#8F6F24; --fr:#1F2A55; --ru:#25331B; --desk:#241a12;
  --desk-ink:#D9CBB0; --desk-dim:#9A8A6E; --desk-line:rgba(217,203,176,.28);
  --display:"Playfair Display","Didot","Bodoni MT","Georgia",serif;
  --body:"EB Garamond","Garamond","Times New Roman",serif;
  color-scheme: light;
}

html{background:var(--desk);}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.55;
  padding-inline:16px;padding-block:0 96px;-webkit-font-smoothing:antialiased;}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--scarlet);outline-offset:3px;}

.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:20;}
.skip:focus{left:8px;top:8px;}

/* ---------- the desk: the only chrome, and it stays off the paper ---------- */
.sitenav{max-width:1040px;margin:0 auto;padding:16px 0 20px;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;}
.sitenav .brand{font-family:var(--display);letter-spacing:.22em;text-transform:uppercase;font-size:13px;
  color:var(--desk-ink);margin-right:auto;text-decoration:none;}
.sitenav a{color:var(--desk-dim);text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:12px;}
.sitenav a:hover{color:var(--desk-ink);}
.sitenav a[aria-current="page"]{color:var(--desk-ink);}
.sitenav .brand[aria-current="page"]{color:var(--desk-ink);}

/* ---------- the paper ---------- */
main{display:block;}
.sheet{max-width:1040px;margin:0 auto;background:var(--paper);color:var(--ink);padding:56px 64px 64px;position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4),inset 0 0 140px rgba(139,107,69,.16);}
@media (max-width:700px){.sheet{padding:36px 22px 44px;}}

/* type on paper */
.eyebrow{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;color:var(--foxing);margin:0 0 10px;}
.wordmark{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(32px,5vw,58px);line-height:1.05;margin:0;text-wrap:balance;}
.wordmark.heavy{font-weight:900;letter-spacing:.02em;font-size:clamp(40px,6.4vw,76px);}
.wordmark.italic{font-style:italic;font-weight:400;text-transform:none;letter-spacing:.02em;font-size:clamp(40px,6.2vw,72px);}
h2.head,p.head{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.18;margin:0;text-wrap:balance;}
p.head{margin-top:18px;max-width:30ch;}
h2{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.6vw,30px);line-height:1.2;margin:0 0 14px;text-wrap:balance;}
.measure{max-width:66ch;}
p{margin:0 0 1em;}
.def{font-style:italic;margin:14px 0 0;}
.lede{font-size:21px;margin:30px 0 0;}
.statement{font-size:20px;margin:0;}
.foot .one{font-style:italic;}
.small{font-size:15px;}
hr.rule{border:0;border-top:1px solid var(--rule);margin:32px 0;}
hr.rule.short{width:96px;margin:22px 0 0;}
hr.rule.double{border-top:3px double var(--ink);margin:0;}
hr.rule.double.spaced{margin-top:44px;}
.center{text-align:center;}
.center hr.rule.short{margin-inline:auto;}
.center p.head{margin-inline:auto;}
section{margin-top:44px;}
section.flush{margin-top:0;}
section.tight{margin-top:30px;}
strong{font-weight:500;}
.trailing{margin-top:22px;}
.trailing-tight{margin-top:10px;}
p.flush{margin:0;}

/* buttons and the one form */
.btn{display:inline-block;font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:13px;
  padding:13px 22px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;background:transparent;line-height:1;cursor:pointer;}
.btn.cta{background:var(--scarlet);border-color:var(--scarlet);color:var(--paper);}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn.cta:hover{background:#8f2d25;border-color:#8f2d25;}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:8px;}
.mast .cta-row{margin-top:26px;}
/* the badge above the home wordmark: a seal on the paper, not a banner */
.mast .mark{width:152px;height:auto;margin:0 auto 20px;}
@media (max-width:700px){.mast .mark{width:116px;margin-bottom:16px;}}
.cta-row .or{font-style:italic;}
form.notify{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;max-width:560px;margin-top:10px;}
form.notify label{flex:1 1 100%;font-size:15px;text-transform:uppercase;letter-spacing:.16em;color:var(--foxing);font-weight:500;}
form.notify input{flex:1 1 240px;min-width:0;font:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink);}
form.notify input::placeholder{color:var(--foxing);opacity:.8;}
form.notify .btn{flex:0 0 auto;}
.notify-msg{flex:1 1 100%;margin:2px 0 0;font-size:15px;font-style:italic;color:var(--foxing);}

/* plates: prints laid on the paper */
figure.plate{margin:0;}
figure.plate img{mix-blend-mode:multiply;}
figure.plate figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:60ch;}
.cap-label{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--foxing);font-weight:500;margin-bottom:3px;}
.plates{display:grid;gap:36px 40px;margin-top:10px;}
.plates.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.plates.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.plates.two.portrait-last{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
@media (max-width:760px){.plates.two,.plates.three,.plates.two.portrait-last{grid-template-columns:minmax(0,1fr);}}
figure.plate.cameo{max-width:300px;}
.spaced{margin-top:28px;}

/* screenshots of the app's own output: a document, not a print — so no multiply blend,
   full colour, and a plain card shadow to say it is a page rather than a plate */
figure.sample{margin:0 0 30px 0;}
figure.sample img{width:100%;display:block;border:1px solid var(--rule);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.35);border-radius:2px;}
figure.sample figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:70ch;}

/* home — the doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:36px;}
@media (max-width:820px){.doors{grid-template-columns:minmax(0,1fr);}}
/* the three doors are one row: the tiles align on their rule, and the status lines
   align at the foot however many lines the name and the description take */
a.door{text-decoration:none;display:flex;flex-direction:column;height:100%;}
a.door .tile{margin:0 0 16px;height:250px;border-bottom:1px solid var(--rule);padding-bottom:16px;}
a.door .tile img{width:100%;height:100%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply;}
a.door .eyebrow{letter-spacing:.14em;font-size:12px;}
a.door h3{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.15;margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em;}
a.door h3.heavy{font-weight:900;letter-spacing:.01em;font-size:30px;}
a.door h3.italic{font-style:italic;text-transform:none;letter-spacing:.01em;font-size:30px;}
a.door p{margin:0 0 10px;font-size:17.5px;}
a.door .status{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--foxing);font-weight:500;margin-top:auto;padding-top:6px;}
a.door .status.live{color:var(--scarlet);}
a.door:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;}
.method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:12px;}
@media (max-width:820px){.method{grid-template-columns:minmax(0,1fr);}}
.method h4{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;}
.method p{margin:0;font-size:17.5px;}
footer.foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);}
footer.foot p{margin:0 0 8px;}

/* EO — the four choices, as an illustration, and the staff map the app draws */
.gen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;}
@media (max-width:820px){.gen{grid-template-columns:repeat(2,minmax(0,1fr));}.gen .btn{grid-column:1/-1;justify-self:start;}}
.gen .fld{display:block;}
.gen .lab{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--foxing);font-weight:500;}
.gen .ctl{margin-top:6px;border:1px solid var(--rule);padding:10px 12px;font-size:17px;display:flex;justify-content:space-between;gap:8px;color:var(--ink);}
.gen .ctl span{color:var(--foxing);}
figure.map{margin:28px 0 0;}
figure.map svg{width:100%;height:auto;display:block;border:1px solid var(--rule);}
figure.map figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:66ch;}
.cameo-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start;}
@media (max-width:760px){.cameo-row{grid-template-columns:minmax(0,1fr);}}

/* FPW — the illustrated weekly */
.dateline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:8px 0;
  text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:500;}
.news-mast .wordmark{text-align:center;margin:18px 0 6px;}
figure.plate.news figcaption{text-transform:uppercase;letter-spacing:.09em;font-size:12px;text-align:center;max-width:none;margin-top:12px;}
.hero-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr);gap:44px;align-items:start;}
@media (max-width:820px){.hero-split{grid-template-columns:minmax(0,1fr);}}
blockquote.epigraph{margin:0 0 26px;padding:0;}
blockquote.epigraph p{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.4vw,27px);line-height:1.3;margin:0 0 8px;text-wrap:balance;}
blockquote.epigraph cite{font-style:normal;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--foxing);font-weight:500;}
.news-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px;margin-top:8px;}
@media (min-width:761px){.news-strip figure:nth-child(even){border-left:1px solid var(--ink);padding-left:40px;}}
@media (max-width:760px){.news-strip{grid-template-columns:minmax(0,1fr);}}
.masthead-strip{margin:0 0 30px;}
.masthead-strip img{max-height:200px;width:auto;margin-inline:auto;}
dl.gives{margin:10px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
dl.gives.spaced{margin-top:34px;}
dl.gives div{max-width:66ch;}
dl.gives dt{text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;color:var(--foxing);font-weight:500;}
dl.gives dd{margin:2px 0 0;}
.status-block{margin-top:52px;}
.status-block p{margin-top:22px;}

/* WSS — the copperplate print */
.keybox{border:1.5px solid var(--ink);border-radius:0 0 28px 28px;padding:26px 30px 28px;margin-top:36px;}
.keybox .key{font-style:italic;font-size:17.5px;line-height:1.5;column-width:22ch;column-gap:36px;margin:0 0 18px;}

/* ---------- print: the desk goes, the paper stays ---------- */
@media print{
  body{background:#fff;padding:0;}
  .sitenav,.skip,form.notify,.btn{display:none;}
  .sheet{max-width:none;box-shadow:none;padding:0;background:#fff;}
  figure.plate img{mix-blend-mode:normal;}
  a[href]{text-decoration:none;}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}}
html{scroll-behavior:smooth;}

/* the live excerpt: the app's own output, framed rather than pictured */
figure.live{ margin:28px 0 0; }
figure.live iframe{ width:100%; height:560px; border:1px solid var(--rule); display:block;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.35); background:var(--paper); }
figure.live figcaption{ font-size:14.5px; line-height:1.45; margin-top:10px; max-width:70ch; }
@media (max-width:760px){ figure.live iframe{ height:760px; } }