:root{
  /* Sky palette. #2196F3 is too light to carry white text at body size
     (about 3:1), so it is used for accents, hovers and focus only, and
     #0D47A1 does the work on buttons, links and anything white sits on. */
  --sky-50:#E3F2FD;
  --sky-200:#90CAF9;
  --sky-500:#2196F3;
  --navy:#0D47A1;
  --navy-deep:#093471;

  --cream:#F5FAFF;      /* page background */
  --paper:#FFFFFF;      /* cards and bands */
  --ink:#122740;
  --muted:#5A7186;
  --teal:var(--navy);       /* primary action */
  --teal-dark:var(--navy-deep);
  --chestnut:var(--navy);  /* small caps text, needs contrast */
  --rule:#CFE4F7;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,5.2vw,3.5rem)}
/* Each sentence holds its own line and never breaks mid-phrase. Below 400px the
   viewport wins and it wraps, which is preferable to shrinking the headline. */
h1 span{display:block;text-wrap:balance;white-space:nowrap}
@media(max-width:400px){h1 span{white-space:normal}}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.12rem}
p{margin:0 0 1.1em}
a{color:var(--teal-dark)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:660px}
.kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--chestnut);font-weight:700;margin:0 0 14px}

/* header */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
/* The header is sticky, so an in-page link lands with the heading hidden behind
   it. Stuck height is the shrunk logo (64px, 52px on mobile) plus padding, so
   push anchor targets clear of that. */
/* Driven by --head-h, measured from the real sticky header in index.html.
   A fixed number broke on mobile once the nav wrapped onto its own row and
   the header grew taller than the offset. */
#shop,#buy,#hello,#story{scroll-margin-top:var(--head-h, 96px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;transition:padding .2s ease}
.site-head.is-stuck .wrap{padding:8px 22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
/* Big at the top of the page, then it shrinks once you scroll so the sticky
   header doesn't eat the screen while reading. */
.brand img{height:124px;width:auto;transition:height .2s ease}
.site-head.is-stuck .brand img{height:64px}
.brand span{color:var(--navy);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;line-height:1.35;max-width:11.5em}
@media(max-width:560px){
  .brand span{display:none}
  .brand img{height:84px}
  .site-head.is-stuck .brand img{height:52px}
}
.nav-buy{background:var(--teal);color:#fff;text-decoration:none;padding:10px 18px;border-radius:999px;font-size:.92rem;font-weight:600;white-space:nowrap}
.nav-buy:hover{background:var(--teal-dark)}

/* hero */
.hero{padding:clamp(34px,6vw,72px) 0 clamp(28px,4vw,56px)}
.hero-grid{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){.hero-grid{grid-template-columns:1.02fr .98fr}}
.eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--chestnut);font-weight:700;margin:0 0 18px}
.hero p.lede{font-size:1.12rem;color:var(--muted);max-width:34em}
.price-line{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:26px 0 24px;padding-top:22px;border-top:2px solid var(--sky-200);font-size:.96rem;color:var(--muted)}
.price-line strong{color:var(--ink);font-size:1.45rem;font-family:Georgia,serif}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;padding:15px 30px;border-radius:999px;border:1.5px solid var(--teal);background:var(--teal);color:#fff;transition:.15s}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-ghost{background:transparent;color:var(--teal-dark)}
.btn-ghost:hover{background:rgba(33,150,243,.10)}

.photo{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:10px;box-shadow:0 14px 34px -22px rgba(18,39,64,.45)}
.photo img{border-radius:2px}
.cap{font-size:.8rem;color:var(--muted);margin:9px 2px 1px;line-height:1.45}

section{padding:clamp(44px,6vw,84px) 0}
.band{background:var(--sky-50);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* buy */
.buy{display:grid;gap:clamp(26px,4vw,48px);grid-template-columns:1fr;align-items:start}
@media(min-width:880px){.buy{grid-template-columns:1fr 1fr}}
.buy-card{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:clamp(24px,3.4vw,38px)}
.buy-card h2{margin-bottom:.2em}
.buy-price{font-family:Georgia,serif;font-size:2.3rem;margin:0 0 .4em}
.spec{list-style:none;margin:0 0 26px;padding:0}
.spec li{padding:11px 0 11px 26px;border-bottom:1px solid var(--rule);position:relative;font-size:.97rem}
.spec li:last-child{border-bottom:0}
.spec li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--sky-500);opacity:.85}
.note{font-size:.87rem;color:var(--muted);margin:16px 0 0}

/* galleries */
.grid-3{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.tile .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sky-50)}
.tile .ph img{width:100%;height:100%;object-fit:cover}
.tile .tx{padding:18px 20px 22px}
.tile h3{margin-bottom:.3em}
.tile p{font-size:.94rem;color:var(--muted);margin:0}

.hello-h{font-size:clamp(2rem,4.4vw,2.9rem)}
.hello-lede{font-size:1.12rem;font-weight:600;color:var(--ink);max-width:22em}
.photo-placeholder{
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#EAF4FE,#EAF4FE 12px,#DCEBFB 12px,#DCEBFB 24px);
  color:var(--muted);font-size:.85rem;text-align:center;padding:20px;border-radius:2px;line-height:1.6;
}
.split{display:grid;gap:clamp(26px,4vw,50px);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr}}

.cols{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}}
.col p{font-size:.96rem;color:var(--muted);margin:0}
.col h3{margin-bottom:.35em}

details{border-bottom:1px solid var(--rule);padding:18px 0}
details summary{cursor:pointer;font-weight:600;font-size:1.03rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--sky-500);font-size:1.4rem;line-height:1;flex:none}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--muted);font-size:.96rem}

.signup{background:var(--navy);color:#fff;border-radius:6px;padding:clamp(28px,4vw,46px);text-align:center}
.signup h2{color:#fff}
.signup p{color:rgba(255,255,255,.85);max-width:36em;margin:0 auto 0}
.signup form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.signup input{flex:1 1 260px;max-width:340px;padding:14px 18px;border:0;border-radius:999px;font-size:1rem;font-family:inherit}
.signup button{padding:14px 28px;border:0;border-radius:999px;background:#fff;color:var(--navy);font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer}
.signup button:hover{background:var(--sky-50)}
.signup small{display:block;margin-top:16px;color:rgba(255,255,255,.7)}

/* ---------- lightbox gallery ---------- */
.zoomable{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(9,29,58,.94);
  opacity:0;transition:opacity .2s ease;
}
.lb.is-open{display:flex}
.lb.is-visible{opacity:1}
.lb-fig{
  margin:0;max-width:min(1200px,94vw);max-height:92vh;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lb-fig img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:3px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  transform:scale(.985);transition:transform .2s ease;
}
.lb.is-visible .lb-fig img{transform:none}
.lb-cap{color:#DCEBFB;font-size:.92rem;text-align:center;max-width:52ch;line-height:1.5}
.lb-count{color:#8FB3DC;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-prev{left:max(14px,3vw)}
.lb-next{right:max(14px,3vw)}
.lb-close{
  position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;
  font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.lb-close:hover{background:rgba(255,255,255,.28)}
@media(max-width:620px){
  .lb-btn{width:44px;height:44px;top:auto;bottom:18px;transform:none}
  .lb-prev{left:22px}.lb-next{right:22px}
  .lb-fig img{max-height:66vh}
}

/* ---------- email capture popup ---------- */
.pop-overlay{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(9,52,113,.62);
  opacity:0;transition:opacity .25s ease;
}
.pop-overlay.is-open{display:flex}
.pop-overlay.is-visible{opacity:1}
.pop{
  position:relative;width:100%;max-width:880px;max-height:92vh;overflow:auto;
  background:var(--paper);border-radius:8px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  display:grid;grid-template-columns:1fr;
  transform:translateY(14px) scale(.985);transition:transform .25s ease;
}
.pop-overlay.is-visible .pop{transform:none}
/* minmax(0,1fr): a 1fr track's min-content floor is the image's intrinsic width,
   so the picture column overflowed to 563px of an 867px card and bled under the
   form. Visitors then saw the left three-quarters of a centred photo, which reads
   as the frame sitting off to the left. Clamping the track to zero lets the image
   sit in exactly half the card and object-position keeps the frame centred. */
@media(min-width:760px){.pop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pop-img{display:none;background:var(--sky-50);min-width:0;overflow:hidden;border-radius:8px 0 0 8px}
@media(min-width:760px){.pop-img{display:block}}
.pop-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:0}
.pop-body{padding:clamp(30px,4vw,46px) clamp(24px,3.4vw,42px);text-align:center}
.pop-body .kicker{margin-bottom:12px}
.pop-body h2{font-size:clamp(1.6rem,3.2vw,2.1rem);margin-bottom:.45em}
.pop-body p{font-size:.98rem;color:var(--muted);margin:0 auto 22px;max-width:30em}
.pop-body form{display:flex;flex-direction:column;gap:10px}
.pop-body input{
  width:100%;padding:14px 18px;border:1.5px solid var(--rule);border-radius:8px;
  font-size:1rem;font-family:inherit;background:#fff;color:var(--ink);
}
.pop-body input:focus{outline:2px solid var(--sky-500);outline-offset:1px;border-color:var(--sky-500)}
.pop-body button[type=submit]{
  margin-top:4px;padding:15px 24px;border:0;border-radius:8px;
  background:var(--navy);color:#fff;font:600 1.02rem inherit;font-family:inherit;cursor:pointer;
}
.pop-body button[type=submit]:hover{background:var(--navy-deep)}
.pop-decline{
  display:block;margin:16px auto 0;background:none;border:0;padding:4px;
  color:var(--muted);font:inherit;font-size:.92rem;text-decoration:underline;cursor:pointer;
}
.pop-decline:hover{color:var(--ink)}
.pop-close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,253,248,.9);color:var(--ink);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.pop-close:hover{background:#fff}
.pop-small{display:block;margin-top:14px;font-size:.82rem;color:var(--muted)}
.pop-thanks{display:none}
.pop.is-done .pop-form-wrap{display:none}
.pop.is-done .pop-thanks{display:block}

footer{background:var(--navy-deep);color:#C3D9F2;padding:46px 0 34px;font-size:.93rem}
footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
footer a:hover{border-bottom-color:#fff}
.foot-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:700px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-grid h3{color:#fff;font-size:1rem;margin-bottom:.6em}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:8px}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);color:#8FB3DC;font-size:.85rem}

/* Story page. The portrait is a 3:4 crop, which at half-width pushed the opening
   paragraphs below the fold and left the left column mostly empty. Capping its
   height and cropping from the top keeps her face in frame while letting the
   text set the height of the row. */
.story-hero{padding-top:clamp(26px,3.4vw,44px);padding-bottom:clamp(30px,4vw,54px)}
/* Portrait halved (16 Aug): at half-width the 3:4 photo set the row height and the
   headline column sat above a tall block of empty space. The photo is now a fixed
   modest size and the grid gives the text the room, so the two sides balance and
   the article starts sooner. */
.story-hero .photo{max-width:390px;justify-self:end}
.story-hero .photo img{max-height:none;width:100%;height:auto;object-fit:cover;object-position:50% 50%}
.story-hero .lede{margin-bottom:1.4em}
@media(min-width:880px){.story-hero .split{grid-template-columns:1fr 390px;align-items:center}}
@media(max-width:879px){.story-hero .photo{max-width:338px;justify-self:center}}

/* Pull quotes on the story page. Her best lines are lifted out of the prose so the
   piece reads as a feature rather than a transcript, and so a skim-reader still
   meets her voice. */
.pull{margin:1.9em 0;padding:0 0 0 22px;border-left:3px solid var(--sky-200)}
.pull p{margin:0;font-family:Georgia,"Iowan Old Style",serif;font-size:clamp(1.24rem,2.4vw,1.6rem);
  line-height:1.35;color:var(--navy);font-style:italic}

/* On the story page the pull quote lives under the portrait rather than inside the
   prose, so the article reads as continuous text and the quote reads as her voice
   next to her face. */
.pull-aside{margin:18px 4px 4px;padding-left:16px}
.pull-aside p{font-size:clamp(1.05rem,1.8vw,1.25rem)}

/* Story page byline, sits under the standfirst in the hero. */
.byline{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 0}

/* The homepage h1 pins each span to one line (white-space:nowrap) because it is two
   short sentences. A feature headline is a full sentence and must wrap, or it forces
   the text column to its own width and pushes the portrait out of the grid, which is
   what happened on 16 Aug. */
.story-hero h1 span{white-space:normal !important;display:inline}
.story-hero h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}

/* ---- legal pages (terms) ---- */
.legal-page h1{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.3em}
.legal-page .updated{font-size:.85rem;color:var(--muted);margin:0 0 34px}
.legal-page h2{font-size:1.12rem;margin:34px 0 .5em}
.legal-page p{margin:0 0 14px}
.legal-page .back{margin-top:40px}

.ship-table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:.95rem}
.ship-table th,.ship-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
.ship-table th{font-weight:600;color:var(--ink);background:var(--sky-50)}

.trading-details{font-style:normal;line-height:1.75;margin:0 0 14px;padding:16px 18px;
  background:var(--sky-50);border-radius:6px;font-size:.95rem}

/* ---- cookie consent ---- */
#utc-consent{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--paper);
  border-top:1px solid var(--rule);box-shadow:0 -8px 30px -12px rgba(18,39,64,.28)}
#utc-consent .cc-inner{max-width:760px;margin:0 auto;padding:22px 22px 24px}
#utc-consent h2{font-size:1.05rem;margin:0 0 8px}
#utc-consent p{font-size:.93rem;line-height:1.6;color:var(--muted);margin:0 0 16px}
#utc-consent .cc-actions{display:flex;gap:12px;flex-wrap:wrap}
/* Accept and Decline are deliberately identical: consent is not freely given if
   refusing is made harder than agreeing. */
#utc-consent .cc-btn{font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  padding:11px 26px;border-radius:999px;border:1px solid var(--navy);
  background:var(--paper);color:var(--navy);min-width:132px}
#utc-consent .cc-btn:hover{background:var(--sky-50)}
#utc-consent .cc-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media(max-width:520px){#utc-consent .cc-btn{flex:1 1 auto}}
.shop-declined{background:var(--sky-50);border:1px solid var(--rule);border-radius:6px;
  padding:30px 26px;text-align:center}
.shop-declined p{margin:0 0 16px}
.shop-declined .small{font-size:.85rem;margin:0}

/* article author bubble */
.byline.author{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0;
  font-size:.92rem;color:var(--ink);margin-top:18px}
.byline.author img{width:92px;height:92px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);flex:0 0 auto}
.byline.author small{color:var(--muted);font-size:.8rem;letter-spacing:.02em}

/* The history page hero was pushing the first heading a full screen down: a
   1200x1600 portrait in a 390px column is tall, and the section padding sat on
   top of it. Shorter photo, tighter padding, so the article starts near the fold. */
.history-hero{padding-top:clamp(18px,2.2vw,30px);padding-bottom:clamp(20px,2.6vw,34px)}
.history-hero .photo{max-width:340px;justify-self:end}
.history-hero .photo img{aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;width:100%;height:auto}
@media(min-width:880px){.history-hero .split{grid-template-columns:1fr 340px;align-items:center}}
@media(max-width:879px){.history-hero .photo{max-width:300px;justify-self:center}}
.history-hero + .band{padding-top:clamp(28px,3.4vw,46px)}

/* header nav: the content pages were only reachable from the footer */
.site-nav{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;margin-right:clamp(14px,2vw,28px)}
.site-nav a{text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:600;
  padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap}
.site-nav a:hover{color:var(--navy);border-bottom-color:var(--sky-200)}
.site-nav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--navy)}
@media(max-width:700px){
  .site-nav{gap:16px;margin-right:14px;font-size:.9rem}
  .site-nav a{font-size:.88rem}
}
@media(max-width:460px){
  .site-nav{width:100%;order:3;margin:8px 0 2px;justify-content:center;
    border-top:1px solid var(--rule);padding-top:8px}
  .site-head .wrap{flex-wrap:wrap}
}

/* articles index */
.article-grid{grid-template-columns:1fr}
@media(min-width:760px){.article-grid{grid-template-columns:repeat(2,1fr)}}
.article-card{text-decoration:none;color:inherit;transition:.15s;display:flex;flex-direction:column}
.article-card:hover{border-color:var(--sky-200);box-shadow:0 14px 34px -22px rgba(18,39,64,.45)}
.article-card h3{margin-bottom:.4em;line-height:1.25}
.article-card .tx{display:flex;flex-direction:column;flex:1}
.article-card .more{margin-top:auto;padding-top:14px;color:var(--navy);font-weight:600;font-size:.92rem}
.article-card:hover .more{text-decoration:underline}