:root{
  /* Light ground. Token names predate the switch: --ink is still the page
     background and --linen still the main text colour, now dark on light. */
  --ink:#f3eeea;      /* from the hero photo's lit linen (#dccfc4), same hue, lifted */
  --ink-2:#ede6e1;
  --panel:#ebe4dd;
  --panel-2:#e5dcd4;
  --linen:#2e1d16;
  --linen-dim:#5e4a3d;
  --brass:#84622f;
  --brass-bright:#6f4e22;
  --oxblood:#7e2f24;
  --oxblood-bright:#953b2d;
  --rose:#c98a86;
  --line:#d3c3b5;
  --placeholder-fill:#d9cbbf;
  /* Tone B: the hero photo's wicker (#8d5f3c, hue 26deg) lifted to a warm tan,
     used on alternate homepage sections (.tone-b). 10.1:1 for --linen,
     5.2:1 --linen-dim, 4.7:1 --brass-bright, 5.7:1 --oxblood. */
  --tone-b:#dfc9b9;
  --ink-deep:#241512;     /* near-black brown, kept to anchor the footer */
  --font-display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--linen);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
[hidden]{display:none!important;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--linen);
  text-wrap:balance;
  margin:0;
}
p{margin:0;}
a{color:inherit;}
button{font:inherit; color:inherit;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-bright);
}

:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:3px; }

/* Dark zones: photo slots under a scrim, the oxblood card, primary buttons
   and the footer keep the light-on-dark values. */
.pillar, .occasion-photo, .occasion.bespoke, .btn-primary, footer{
  --linen:#f4ede0;
  --linen-dim:#e2d4bf;
  --brass:#d4ae74;
  --brass-bright:#e6c590;
  --line:#7d5e4b;
}

/* ---------- header / navigation ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(243,238,234,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding-block:18px;
}
.wordmark{
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:.01em;
  color:var(--linen);
  display:flex; align-items:baseline; gap:8px;
  text-decoration:none;
  order:1;
}
.wordmark em{font-style:italic; color:var(--brass-bright);}

.navlinks{
  display:flex; gap:32px; list-style:none; margin:0; padding:0;
  font-size:14px; letter-spacing:.02em;
  order:2;
}
.navlinks a{text-decoration:none; color:var(--linen-dim); transition:color .15s;}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--brass-bright);}
.navlinks a[aria-current="page"]{color:var(--brass-bright);}
.navlinks[hidden]{display:none!important;}

/* Real toggle button for small screens. Hidden by default (no-JS state): the
   full nav list above is simply always visible/stacked instead - see the
   max-width:860px rules below. JS adds the .js class to <html> as soon as it
   runs and only then does this button appear, replacing the always-open list
   with a proper accessible disclosure control. */
.nav-toggle{
  display:none;
  order:2;
  align-items:center;
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  letter-spacing:.02em;
  padding:10px 16px;
  border-radius:2px;
  border:1px solid var(--brass);
  color:var(--brass-bright);
  background:transparent;
  cursor:pointer;
}
.nav-toggle:hover{background:rgba(132,98,47,.1);}
.js .nav-toggle{display:inline-flex;}

#nav-whatsapp{order:3;}

@media (min-width:861px){
  .js .nav-toggle{display:none;}
  .js .navlinks{display:flex!important;}
}
/* With JS (class set in <head>), keep the mobile list collapsed from first
   paint until site.js has synced it, so the header never renders tall and
   then jumps (layout shift). Without JS the list stays visible as before. */
@media (max-width:860px){
  .js:not(.nav-ready) .navlinks{display:none;}
}

@media (max-width:860px){
  .navlinks{
    order:4;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    padding-top:10px;
  }
  .navlinks li{border-top:1px solid var(--line);}
  .navlinks li a{display:block; padding:14px 2px;}
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  letter-spacing:.02em;
  padding:12px 22px;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{ background:var(--oxblood); color:var(--linen); }
.btn-primary:hover{ background:var(--oxblood-bright); }
.btn-ghost{ border-color:var(--brass); color:var(--brass-bright); background:transparent; }
.btn-ghost:hover{ background:rgba(132,98,47,.1); }
.btn svg{flex:none;}

/* ======================================================================
   TEMPORARY IMAGE PLACEHOLDERS
   A reversible stand-in treatment while photography gets its own pass.
   Applied by adding .img-placeholder to an image slot alongside its normal
   class(es), plus an .img-placeholder-label chip naming the slot.

   Real photos are in for the three pillars and the three featured occasions
   (Oct 2026: inline background-image on each element). Still placeholders:
   bespoke.html's two process images and the homepage Instagram image (which
   shows the wordmark as a stand-in).

   TO SWAP IN A REAL PHOTO: remove "img-placeholder" from the element,
   delete its label <span>, and add the photo (inline background-image, or
   turn a role="img" <div> back into an <img src alt width height>).
   Delete this block once no page references .img-placeholder.
   ====================================================================== */
.img-placeholder{
  position:relative;
  background:var(--placeholder-fill);
}
.img-placeholder-label{
  position:absolute; z-index:2;
  top:12px; left:12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f3eeea;
  background:rgba(46,29,22,.62);
  padding:5px 9px;
  border-radius:2px;
  pointer-events:none;
  white-space:nowrap;
}
.process-img-main.img-placeholder{ aspect-ratio:272/340; }
.process-img-sub.img-placeholder{ aspect-ratio:208/260; }

/* ---------- intro band (homepage, directly under the banner) ----------
   Replaces the old full-height second hero: same h1, lede and two CTAs,
   set compactly on the page ground. */
.intro{ padding:72px 0 76px; text-align:center; border-bottom:1px solid var(--line); }
.intro h1{
  font-size:clamp(34px, 4.8vw, 58px);
  line-height:1.08;
  margin:16px auto 0;
}
.intro h1 i{ color:var(--brass-bright); font-style:italic; }
.intro .lede{ font-size:18px; color:var(--linen-dim); max-width:52ch; margin:20px auto 0; }
.intro-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.spec-line{
  margin-top:36px;
  display:flex; justify-content:center; gap:8px 28px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; color:var(--linen-dim);
}
.spec-line b{color:inherit; font-weight:600;}

/* ---------- hampers banner (homepage, above the hero) ----------
   Full-width hamper photo at its own 2688x1520 ratio, with the title
   centred in white. A soft centre scrim keeps the white type legible over
   the bottle and flowers. */
.hampers-banner{
  position:relative; overflow:hidden;
  aspect-ratio:2688/1520;
  padding:0;
  background:var(--ink-deep);
  border-bottom:1px solid var(--line);
  container-type:inline-size;
}
.hampers-banner-photo{
  position:absolute; inset:0;
  background:url('hampers-banner.jpg') center / cover no-repeat;
}
@media (max-width:800px){ .hampers-banner-photo{ background-image:url('hampers-banner-1200.jpg'); } }
.hampers-banner-photo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 45% at 50% 50%, rgba(43,28,20,.42), rgba(43,28,20,.12) 70%, rgba(43,28,20,0) 100%);
}
.hampers-banner-type{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  text-shadow:0 2px 24px rgba(43,28,20,.45);
}
.hampers-banner-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(56px, 17cqw, 260px);
  line-height:.95;
  letter-spacing:-.01em;
}
.hampers-banner-sub{
  margin-top:clamp(8px, 1.4cqw, 22px);
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(16px, 2.6cqw, 40px);
}

/* ---------- page header (non-home pages) ---------- */
.page-head{
  padding-top:72px;
}
.page-head .eyebrow{display:block; margin-bottom:14px;}
.page-head h1{font-size:clamp(32px,4.4vw,48px);}
.page-head p{color:var(--linen-dim); margin-top:18px; font-size:16.5px; max-width:56ch;}

/* ---------- section shells ---------- */
section{padding:96px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h1, .section-head h2,
.network-copy h1, .network-copy h2,
.corp-grid h1, .corp-grid h2{font-size:clamp(30px,3.4vw,42px); margin-top:14px;}
.section-head p{color:var(--linen-dim); margin-top:16px; font-size:16.5px; max-width:56ch;}

/* ---------- pillars section, opened by the brand quote (homepage) ---------- */
.pillars-section{ padding:88px 0 96px; }
.brand-statement-inner{ max-width:640px; margin-bottom:64px; }
.brand-statement-inner blockquote{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.4;
  color:var(--linen);
}
.brand-statement-inner .signoff{
  margin-top:18px; font-family:var(--font-body); font-style:normal;
  font-size:14px; color:var(--brass-bright); letter-spacing:.03em;
}

/* ---------- Tone B sections (homepage: globe, Instagram) ----------
   The tone change marks the section edge, so neighbours drop their rules.
   Hairlines inside need a deeper value to stay visible on the tan. */
.tone-b{ background:var(--tone-b); --line:#c8ab95; }
.tone-b + section{ border-top:none; }

/* ---------- cream section variant ---------- */
.section-light{ background:#fbf7f1; }
.section-light, .section-light h1, .section-light h2, .section-light h3{ color:var(--linen); }
.section-light .eyebrow{ color:var(--oxblood); }
.section-light .section-head p{ color:#5b4a3f; }
.section-light p{ color:#5b4a3f; }

/* ---------- three pillars (hampers / gifts / flowers) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:8px; }
@media (max-width:760px){ .pillars{grid-template-columns:1fr;} }
.pillar{
  position:relative; aspect-ratio:196/260; border-radius:2px; overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
}
/* Photos are real <img>s (for alt text) laid under the scrim and copy. */
.pillar-img, .occasion-img{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
}
.pillar::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,29,22,0) 42%, rgba(46,29,22,.82) 100%);
}
.pillar-copy{ position:relative; z-index:1; padding:24px 22px; }
.pillars .pillar-copy h3{ font-size:21px; color:var(--linen); }
.pillars .pillar-copy p{ color:var(--linen-dim); font-size:14px; line-height:1.6; margin-top:8px; }

/* Understated routing links beneath the pillars (homepage only) — stay
   subordinate to the photography, no buttons or cards. */
.pillars-links{
  margin-top:28px;
  display:flex; flex-wrap:wrap; gap:8px 32px;
  font-size:14.5px;
}
.pillars-links a{
  color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px;
}
.pillars-links a:hover, .pillars-links a:focus-visible{ color:var(--linen); }

/* ---------- collection: featured photography ---------- */
.collection-featured{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:900px){ .collection-featured{grid-template-columns:1fr;} }
.occasion{ background:var(--panel); border-radius:2px; padding:30px 26px; display:flex; flex-direction:column; gap:10px; min-height:220px; }
.occasion.bespoke{ background:var(--oxblood); }
.occasion h3{ font-size:20px; font-weight:500; }
.occasion p{ color:var(--linen-dim); font-size:14.5px; line-height:1.55; }
.occasion.bespoke p{ color:rgba(244,237,224,.86); }
.occasion.bespoke a{
  margin-top:auto; font-family:var(--font-body); font-weight:600; font-size:13.5px;
  text-decoration:underline; text-underline-offset:3px; color:var(--linen);
}
.occasion.occasion-photo{
  position:relative; padding:0; justify-content:flex-end; background-color:var(--panel);
  overflow:hidden; isolation:isolate;
  min-height:440px; text-decoration:none; cursor:pointer;
}
.occasion.occasion-photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,29,22,0) 42%, rgba(46,29,22,.82) 100%);
}
.occasion-copy{ position:relative; z-index:1; padding:26px 24px; }
.occasion-photo .occasion-copy h3{ color:var(--linen); font-size:22px; }
.occasion-photo .occasion-copy p{ color:var(--linen-dim); }

/* Shorter featured-occasion panels on the homepage only (occasions.html keeps
   the full-height .occasion-photo min-height defined above). Three of these
   stacked on mobile at the full 440px height read as a long catalogue. */
.collection-featured-compact .occasion-photo{ min-height:320px; }
@media (max-width:640px){
  .collection-featured-compact .occasion-photo{ min-height:260px; }
}

/* Small "explore the full page" links used on the shortened homepage
   sections (Occasions, Global Delivery). */
.section-link-out{ margin-top:32px; font-size:14.5px; }
.section-link-out a{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px; }
.section-link-out a:hover, .section-link-out a:focus-visible{ color:var(--linen); }

/* ---------- collection: remaining occasions, typographic ---------- */
.collection-list{ list-style:none; margin:44px 0 0; padding:0; max-width:780px; }
.collection-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 28px;
  padding:20px 0; border-top:1px solid var(--line);
}
.collection-list li:last-child{ border-bottom:1px solid var(--line); }
.collection-list h3{ font-size:18px; font-weight:500; flex:0 0 auto; min-width:200px; }
.collection-list p{ color:var(--linen-dim); font-size:14.5px; line-height:1.55; margin:0; flex:1 1 280px; }
.collection-list li a{ display:contents; color:inherit; text-decoration:none; cursor:pointer; }
.collection-list li a:hover h3{ color:var(--brass-bright); }

.collection-bespoke{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:40px; }
@media (max-width:760px){ .collection-bespoke{grid-template-columns:1fr;} }

/* ---------- process ---------- */
.process-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
@media (max-width:820px){ .process-layout{grid-template-columns:1fr; gap:40px;} }
.process-photos{ position:relative; }
.process-img-main{ width:100%; display:block; border-radius:2px; }
.process-img-sub{
  width:44%; display:block; position:absolute; right:-22px; bottom:-34px;
  border-radius:2px; border:3px solid var(--ink);
}
@media (max-width:820px){ .process-img-sub{ position:relative; right:auto; bottom:auto; width:56%; margin-top:16px; border-width:3px; } }
.process-steps{ display:flex; flex-direction:column; }
.process-steps .step{ padding:24px 0; border-top:1px solid var(--line); }
.process-steps .step:first-child{ border-top:none; padding-top:0; }
.process-steps .step .no{font-family:var(--font-mono); color:var(--brass); font-size:13px;}
.process-steps .step h3{font-size:18px; margin-top:10px; font-weight:500; color:var(--linen);}
.process-steps .step p{color:var(--linen-dim); font-size:14.5px; margin-top:10px;}

/* ---------- corporate ---------- */
.corporate{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.corp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .corp-grid{grid-template-columns:1fr;} }
.corp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.corp-list li{ padding:18px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.corp-list li:last-child{border-bottom:1px solid var(--line);}
.corp-list .lbl{font-size:15.5px; color:var(--linen);}
.corp-list .val{font-family:var(--font-mono); font-size:12.5px; color:var(--linen-dim); white-space:nowrap;}
.corp-link-out{margin-top:28px; font-size:14.5px; color:var(--linen-dim);}
.corp-link-out a{color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px;}

/* ---------- delivery ---------- */
/* .network-copy sits inside the standard .wrap (1180px) on global-delivery.html;
   this constrains just the introductory text to a comfortable reading width
   while the outer container and the city directory below share the same
   standard .wrap. (Prompt 3, §8B — previously a .network-layout class capped
   the whole .wrap at 640px; that class has been removed from the markup.) */
.network-copy{ max-width:640px; }
.network-copy p.lead{ font-size:17px; color:var(--linen); max-width:52ch; }
.network-copy p.lead + p{ margin-top:16px; }
.network-copy .sub{ color:var(--linen-dim); font-size:15.5px; max-width:54ch; }

.network-more{ margin-top:72px; padding-top:56px; border-top:1px solid var(--line); }
.network-more p{ margin-top:18px; color:var(--linen-dim); font-size:16.5px; line-height:1.75; max-width:60ch; }
.network-more h2 + p{ margin-top:22px; }
.network-more a{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px; }
.network-more a:hover, .network-more a:focus-visible{ color:var(--linen); }

.network-list{
  margin-top:28px; max-width:800px;
  font-family:var(--font-display); font-size:18px; line-height:2; color:var(--linen-dim);
}
.network-list .city-region{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass-bright); margin-right:10px;
}
.network-list .city-divider{ display:inline-block; margin:0 22px; color:var(--brass); }

/* ---------- global delivery teaser (homepage only) ---------- */
.delivery-teaser{ padding:80px 0; }
.delivery-teaser-inner{ max-width:640px; }
.delivery-teaser-inner h2{ font-size:clamp(28px,3vw,38px); margin-top:14px; }
.delivery-teaser-inner p{ color:var(--linen-dim); margin-top:16px; font-size:16.5px; max-width:56ch; }
.delivery-teaser-inner .section-link-out{ margin-top:24px; }

/* Globe beside the teaser copy (assets/globe.js). */
.delivery-teaser-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .delivery-teaser-grid{ grid-template-columns:1fr; gap:40px; } }
.globe-wrap{ text-align:center; }
.globe{
  position:relative; width:100%; max-width:480px; aspect-ratio:1/1; margin:0 auto;
  cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.globe.is-dragging{ cursor:grabbing; }
.globe-canvas{ width:100%; height:100%; display:block; opacity:0; transition:opacity .8s ease; }
.globe.is-ready .globe-canvas{ opacity:1; }
.globe-markers{ position:absolute; inset:0; pointer-events:none; }
.globe-marker{
  position:absolute; left:0; top:0;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  pointer-events:auto; cursor:pointer;
}
.globe-marker > span{
  position:absolute; left:50%; bottom:calc(100% - 2px);
  transform:translate(-50%, 4px);
  white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:#f3eeea; background:#2e1d16;
  padding:4px 8px; border-radius:2px;
  opacity:0; transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.globe-marker:hover > span, .globe-marker.is-active > span{ opacity:1; transform:translate(-50%, 0); }
.globe-hint{ margin-top:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--linen-dim); }
.globe-cities{
  list-style:none; margin:18px auto 0; padding:0; max-width:480px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--linen-dim);
}

/* ---------- final cta ---------- */
.final{
  text-align:center;
  background: radial-gradient(ellipse 700px 380px at 50% 0%, rgba(132,98,47,.1), transparent 65%), var(--ink-2);
  border-top:1px solid var(--line); padding:110px 0 100px;
}
.final h2{ font-size:clamp(32px,4.4vw,52px); max-width:18ch; margin:16px auto 0; }
.final p{ color:var(--linen-dim); margin:18px auto 0; max-width:48ch; font-size:16.5px; }
.final .btn{ margin-top:38px; }
.final .btn-primary{ padding:16px 34px; font-size:15px; }

/* ---------- instagram (homepage, after the final CTA) ---------- */
.insta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:820px){ .insta-grid{ grid-template-columns:1fr; gap:36px; } }
.insta-copy h2{ font-size:clamp(30px,3.4vw,42px); margin-top:14px; }
.insta-copy p{ color:var(--linen-dim); margin-top:16px; font-size:16.5px; max-width:44ch; }
.insta-copy .btn{ margin-top:28px; }
.insta-photo{ aspect-ratio:1/1; border-radius:2px; }
/* Stand-in until a real Instagram image or logo file exists: the header
   wordmark, set large on a Tone A panel. */
.insta-photo.img-placeholder{
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.insta-wordmark{
  font-family:var(--font-display);
  font-size:clamp(34px, 5vw, 60px);
  letter-spacing:.01em;
  color:var(--linen);
}
.insta-wordmark em{ font-style:italic; color:var(--brass-bright); }

/* ---------- about ---------- */
.about{ border-top:1px solid var(--line); }
.about-inner{ max-width:880px; }
.about h2{ font-size:clamp(30px,4vw,50px); line-height:1.12; margin-top:14px; font-weight:400; }
.about p{ margin-top:22px; color:var(--linen-dim); font-size:17px; line-height:1.75; max-width:72ch; }
.about h2 + p{ margin-top:32px; }
.about a{ color:var(--linen); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.about a:hover, .about a:focus-visible{ text-decoration-color:var(--brass); }

/* ---------- journal teaser (placeholder posts, no CMS yet) ---------- */
.journal{ border-top:1px solid var(--line); }
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .journal-grid{ grid-template-columns:1fr; gap:40px; } }
.journal-img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:2px; margin-bottom:18px;
}
.journal-card{ position:relative; }
.journal-card h3{ font-size:20px; line-height:1.3; margin-top:10px; }
/* The title link covers the whole card. */
.journal-card h3 a{ text-decoration:none; }
.journal-card h3 a::after{ content:""; position:absolute; inset:0; }
.journal-card:hover h3 a, .journal-card h3 a:focus-visible{
  text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:4px;
}

/* ---------- closing copy (homepage, after the Journal) ---------- */
.closing{ padding:0 0 88px; }
.closing p{
  max-width:72ch; padding-top:40px; border-top:1px solid var(--line);
  color:var(--linen-dim); font-size:15px; line-height:1.75;
}
.closing a{ color:var(--linen); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.closing a:hover, .closing a:focus-visible{ text-decoration-color:var(--brass); }

/* ---------- journal post pages ---------- */
.post{ padding:72px 0 96px; }
.post-inner{ max-width:720px; margin:0 auto; }
.post-head .eyebrow{ display:block; }
.post-head h1{ font-size:clamp(32px,4.4vw,48px); line-height:1.12; margin-top:14px; }
.post-meta{ margin-top:18px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--linen-dim); }
.post-img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  object-position:center 60%;
  border-radius:2px; margin:40px 0 0;
}
.post-body p{ margin-top:22px; font-size:17px; line-height:1.8; color:var(--linen); }
.post-body > :first-child{ margin-top:40px; }
.post-body ul{ margin:22px 0 0; padding-left:1.2em; }
.post-body li{ margin-top:12px; font-size:17px; line-height:1.75; color:var(--linen); padding-left:.3em; }
.post-body li::marker{ color:var(--brass); }
.post-body a{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover, .post-body a:focus-visible{ color:var(--linen); }
.post-back{ margin-top:48px; font-size:14.5px; }
.post-back a{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px; }
.journal-card p{ color:var(--linen-dim); font-size:14.5px; line-height:1.6; margin-top:10px; }

/* ---------- footer ---------- */
footer{ padding:40px 0; border-top:1px solid var(--line); background:var(--ink-deep); }
.foot-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-grid .wordmark{font-size:17px; order:0;} /* header's order:1 would drop it below wrapped links */
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; list-style:none; padding:0; margin:0; font-size:13px; color:var(--linen-dim); }
.foot-links a[aria-current="page"]{color:var(--brass-bright);}
.foot-fine{ font-size:12.5px; color:var(--linen-dim); margin-top:18px; max-width:70ch; }
@media (max-width:480px){
  .foot-links{ gap:10px 18px; }
}

.icon{ width:22px; height:22px; }

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