/* =========================================================================
   Adey — poster layer. Loaded LAST, after premium.css / coffee.css / chrome.css.
   Additive only: the commissioned artwork system, the harag divider, the
   rebuilt hero, and the entry points that were unreachable.
   Component styles stay in premium.css and are never redefined here.
   ========================================================================= */

/* ---------- 1. the artwork system ------------------------------------------
   Every commissioned image is a background on a .art element, never an <img>.
   A missing file then shows a quiet paper panel with its own filename on it
   instead of a broken-image icon — legible while we build, invisible the
   moment the PNG lands.
   -------------------------------------------------------------------------- */
.art{
  position:relative;
  background:no-repeat center/contain;
  background-color:transparent;
}
.art:not([data-loaded])::before{
  content:"";position:absolute;inset:0;
  background:#efe7d9;
  border:1px dashed #cfc0ac;
  border-radius:var(--r-sm);
}
.art:not([data-loaded])::after{
  content:attr(data-art);
  position:absolute;inset:auto 0 50% 0;
  text-align:center;
  font:9px var(--mono);letter-spacing:.08em;
  color:#a8967f;
}
.art--cover{background-size:cover}

/* ---------- 2. the harag divider — the site's signature device -------------
   A band of Geez manuscript interlace between sections. One recognisable
   thing repeating across 21 pages is what makes a set feel like a set.
   -------------------------------------------------------------------------- */
.harag{
  height:26px;
  background:url("art/adey-harag-rule.webp") repeat-x center/auto 26px;
  opacity:.85;
  margin:0;
}
.harag--tight{height:18px;background-size:auto 18px}
.sec--ink .harag,.path .harag,.coffee-card .harag{opacity:.7}

/* ---------- 3. the hero -----------------------------------------------------
   Was: centred headline over 315px of decorative hairline squiggle.
   Now: flush-left copy, commissioned poster cropped off the right edge.
   The crop is what makes it read as a real object rather than a framed picture.
   -------------------------------------------------------------------------- */
.hero{padding:0;overflow:hidden}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,44ch) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);
  align-items:center;
  width:min(calc(var(--max) + ((100vw - var(--max)) / 2)),100%);
  margin-left:max(24px,calc((100vw - var(--max)) / 2));
  padding:clamp(48px,6vw,86px) 0 clamp(40px,5vw,72px);
}
.hero-copy{text-align:left;max-width:none;margin:0}
.hero h1{
  font:400 clamp(46px,6.2vw,86px)/1.02 var(--display);
  letter-spacing:-.022em;margin:0;
}
/* the second line was italic + clay — the commonest generated-page tell.
   One voice instead; the poster carries the colour. */
.hero h1 em{font-style:normal;font-weight:400;color:inherit}
.hero .lead{
  font-size:16.5px;line-height:1.6;color:var(--muted);
  max-width:42ch;margin:20px 0 26px;
}
.hero .actions{justify-content:flex-start}
.hero-art{
  align-self:stretch;min-height:clamp(420px,52vw,640px);
  background-image:url("art/adey-hero-lot.webp");
  background-size:cover;background-position:center left;
  border-radius:var(--r-lg) 0 0 var(--r-lg);margin:-1px 0;
}

/* ---------- 4. the trade desk, shown open in the hero -----------------------
   The support widget is the CRM integration point and it was dressed as the
   bottom-right bubble every SaaS site has, which people are trained to skip.
   Here it gets one proper introduction before it retreats to the corner.
   -------------------------------------------------------------------------- */
.hero-desk{
  margin-top:26px;max-width:none;
  background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:16px 18px;
  box-shadow:0 18px 40px #3d241310;
}
.hero-desk-hd{
  display:flex;align-items:center;gap:9px;
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--rule);
}
.hero-desk-hd i{
  width:7px;height:7px;border-radius:50%;background:var(--leaf);flex:none;
  box-shadow:0 0 0 3px #59635222;
}
.hero-desk-hd b{font-size:12px;font-weight:600}
.hero-desk-hd span{margin-left:auto;font:9px var(--mono);color:var(--muted)}
.hero-msg{display:grid;gap:4px;margin-bottom:10px}
.hero-msg p{margin:0;font-size:12.5px;line-height:1.5}
.hero-msg small{font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.hero-msg--them p{
  background:#f2ece1;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 2px;
  padding:9px 11px;
}
.hero-msg--us{justify-items:end;text-align:right}
.hero-msg--us p{
  background:var(--ink);color:#fff;
  border-radius:var(--r-sm) var(--r-sm) 2px var(--r-sm);
  padding:9px 11px;
}
.hero-desk-ft{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:13px;padding-top:11px;border-top:1px solid var(--rule);
}
.hero-desk-ft small{font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.hero-desk-ft button{
  border:1px solid var(--rule);background:var(--cream);color:var(--ink);
  border-radius:var(--r-sm);padding:7px 12px;font-size:11px;font-weight:600;
  cursor:pointer;
}
.hero-desk-ft button:hover{border-color:var(--clay);color:var(--clay)}

/* ---------- 5. the facts strip ----------------------------------------------
   Was four adjective promises. Now four plain statements about what the
   system does, each one a link into the thing it names.
   -------------------------------------------------------------------------- */
.facts>a{
  display:block;padding:25px 24px;border-right:1px solid var(--rule);
  text-decoration:none;transition:background .2s var(--ease);
}
.facts>a:first-child{padding-left:max(24px,calc((100vw - var(--max)) / 2))}
.facts>a:last-child{border-right:0}
.facts>a:hover{background:#f4ecdf}
.facts>a small{
  display:block;font:9px var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);
}
.facts>a b{display:block;margin-top:8px;font:400 17px/1.25 var(--display)}

/* ---------- 6. entry points that were unreachable ---------------------------
   workspace.html had 2 inbound links, both from an email mockup; login.html
   had none from the home page. Both are what the demo is actually selling.
   -------------------------------------------------------------------------- */
.navright .btn.entry{
  background:transparent;color:var(--ink);border-color:#bfb1a2;
}
.navright .btn.entry:hover{border-color:var(--ink)}

/* the sign-in page: a way in without a credential, and the operating line */
.login-open{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  display:grid;gap:7px;
}
.login-open a{font-size:12px;font-weight:600;color:var(--clay)}
.login-open small{font-size:11px;color:var(--muted);line-height:1.5}
.operated{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);
  font:9px var(--mono);letter-spacing:.07em;color:var(--muted);
}

/* ---------- 7. responsive ---------------------------------------------------- */
@media(max-width:900px){
  .hero-in{
    grid-template-columns:1fr;
    width:min(calc(100% - 48px),var(--max));
    margin:auto;padding:44px 0 36px;
  }
  .hero-copy{max-width:none}
  .hero-art{
    min-height:clamp(260px,62vw,420px);
    border-radius:var(--r-lg);
    order:-1;
  }
  .hero-desk{max-width:none}
  .facts>a:first-child{padding-left:24px}
}
@media(max-width:600px){
  .hero-in{width:min(100% - 28px,var(--max));padding:30px 0 26px}
  .hero h1{font-size:42px}
  .facts>a{padding:18px 14px!important}
  .harag{height:18px;background-size:auto 18px}
}

/* ---------- 8. motion — one moment, not scattered effects -------------------- */
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .7s var(--ease) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.18s}
  .hero-copy>*:nth-child(5){animation-delay:.26s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ---------- 9. the harag applied systematically -----------------------------
   Two appearances per page, always in the same two places, so it reads as the
   site's device rather than decoration sprinkled about.
   -------------------------------------------------------------------------- */
.cta{position:relative;padding-top:calc(90px + 26px)}
.cta::before,.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:26px;
  background:url("art/adey-harag-rule.webp") repeat-x center/auto 26px;
  opacity:.8;
}
.footer{position:relative;padding-top:calc(68px + 26px)}
@media(max-width:600px){
  .cta::before,.footer::before{height:18px;background-size:auto 18px}
  .cta{padding-top:calc(82px + 18px)}
  .footer{padding-top:calc(60px + 18px)}
}

/* ---------- 10. page posters ------------------------------------------------
   Tier 1 and tier 2 pages each carry one commissioned image of their own.
   Tier 3 (workspace, docs, brief, offer, the lot pages, the email preview)
   deliberately carry none: they are working surfaces, and keeping them clean
   is what makes the poster pages land.
   -------------------------------------------------------------------------- */
.page-poster{
  height:clamp(230px,30vw,380px);
  margin:34px 0 0;
  border-radius:var(--r-lg);
  background-size:cover;background-position:center;
}
.page-poster--wide{height:clamp(150px,18vw,230px)}
.stage-poster{
  height:clamp(200px,24vw,300px);
  margin:22px 0 0;
  border-radius:var(--r-md);
  background-size:cover;background-position:center;
}

/* ---------- 11. the paper ground --------------------------------------------
   REMOVED. adey-texture-jute.png came back as a full-colour viaduct poster,
   not a 6% grain, and tiling it behind every page was a mistake. The flat
   --paper colour is the ground. Re-add only if prompt 3 is regenerated and
   the result is actually a faint grain.
   -------------------------------------------------------------------------- */

/* ---------- 12. the four physical stages, as a sequence --------------------- */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stages figure{margin:0}
.stages .stage-poster{margin:0 0 14px;height:clamp(150px,15vw,200px)}
.stages figcaption b{display:block;font:400 19px/1.2 var(--display);margin-bottom:5px}
.stages figcaption small{font-size:11.5px;line-height:1.55;color:var(--muted);display:block}
@media(max-width:900px){.stages{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.stages{grid-template-columns:1fr;gap:26px}}

/* ---------- 13. the five growing regions ------------------------------------ */
.regions{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.regions figure{margin:0}
.region-plate{height:clamp(120px,11vw,160px);border-radius:var(--r-md);background-size:cover;background-position:center;margin-bottom:12px}
.regions figcaption b{display:block;font:400 20px/1.15 var(--display);margin-bottom:4px}
.regions figcaption small{display:block;font-size:11px;line-height:1.5;color:var(--muted)}
.regions .region-note{margin-top:5px;color:var(--ink);opacity:.72}
.category-mark.art:not([data-loaded])::after{display:none}
@media(max-width:900px){.regions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.regions{grid-template-columns:1fr 1fr;gap:18px}}

/* ---------- 14. products: three categories, not two -------------------------
   packaged.html was absent from the home page entirely. -------------------- */
.other-grid{grid-template-rows:repeat(3,1fr)}
.other-grid .category{padding:26px 28px}
.other-grid .category h3{font-size:25px;margin-bottom:7px}
.other-grid .category p{font-size:11.5px;max-width:300px}
.other-grid .category a{bottom:22px;left:28px}
.other-grid .category-mark{width:86px;height:74px;right:20px;bottom:14px}
@media(max-width:900px){.other-grid{grid-template-rows:auto}}

/* ---------- 15. one page hero for every interior page -----------------------
   Was: a portrait poster squashed into a wide band (a thin middle slice of a
   4:5 image), and placed before the headline on some pages, after it on
   others. Now: copy left, poster right, same order everywhere.
   -------------------------------------------------------------------------- */
.page-hero{padding:0;overflow:hidden;border-bottom:1px solid var(--rule)}
.page-hero-in{
  display:grid;grid-template-columns:minmax(0,46ch) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(40px,4.5vw,68px) 0;
}
.page-hero-copy>:first-child{margin-top:0}
.page-hero-copy .lead{margin-bottom:0}
.page-hero-art{
  align-self:stretch;min-height:clamp(300px,34vw,460px);
  background-size:cover;background-position:center;
  border-radius:var(--r-lg);
}
.page-hero .eyebrow{margin-bottom:14px}
.dark-head .page-hero-art,.page-hero--ink{border-radius:var(--r-lg)}
@media(max-width:900px){
  .page-hero-in{grid-template-columns:1fr;padding:34px 0}
  .page-hero-art{min-height:clamp(220px,52vw,340px);order:-1}
}

.cat-mark.art{width:96px;height:82px}
.cat-mark.art:not([data-loaded])::after{display:none}

/* ===========================================================================
   16. NAVIGATION — two levels, one primary action
   Was: five unparallel items, three competing CTAs, seven coffee sub-pages
   reachable from nowhere, and no indication of where you are.
   =========================================================================== */
.header{height:auto;padding:0}
.header .nav{height:68px}
.navlinks{gap:4px}

.navgroup{position:relative}
.navtop{
  border:0;background:none;color:var(--ink);cursor:pointer;
  font-size:13px;padding:9px 13px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:7px;
}
.navtop::after{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  opacity:.5;transition:transform .2s var(--ease);
}
.navtop:hover{background:#efe7d9}
.navtop.on{font-weight:600}
.navtop.on::before{
  content:"";position:absolute;left:13px;right:13px;bottom:-24px;height:2px;background:var(--clay);
}
.navgroup[data-open] .navtop{background:#efe7d9}
.navgroup[data-open] .navtop::after{transform:rotate(-135deg) translate(-2px,-2px)}

.navmenu{
  position:absolute;top:calc(100% + 10px);left:0;z-index:60;
  min-width:250px;padding:7px;display:none;
  background:var(--cream);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:0 26px 60px #321d1822;
}
.navgroup[data-open] .navmenu{display:block}
.navmenu a{
  display:block;padding:10px 12px;border-radius:var(--r-sm);
  font-size:13px;text-decoration:none;color:var(--ink);
}
.navmenu a:hover{background:#efe7d9}
.navmenu a[aria-current="page"]{color:var(--clay);font-weight:600}

.navlink-quiet{
  font-size:12.5px;text-decoration:none;color:var(--muted);
  padding:8px 10px;border-radius:var(--r-sm);white-space:nowrap;
}
.navlink-quiet:hover{color:var(--ink);background:#efe7d9}

/* the contextual second row — only on pages inside a section */
.subbar{border-top:1px solid var(--rule);background:#faf5ed}
.subbar .wrap{display:flex;align-items:center;gap:18px;height:44px;overflow-x:auto;scrollbar-width:none}
.subbar .wrap::-webkit-scrollbar{display:none}
.subbar-here{
  font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--clay);white-space:nowrap;flex:none;
}
.subnav{display:flex;gap:2px;flex:none}
.subnav a{
  font-size:12.5px;text-decoration:none;color:var(--muted);
  padding:7px 11px;border-radius:var(--r-sm);white-space:nowrap;
}
.subnav a:hover{color:var(--ink);background:#f1e9dc}
.subnav a[aria-current="page"]{color:var(--ink);font-weight:600;background:#efe4d4}

/* condense on scroll so two rows do not eat the viewport */
.header.shrunk .nav{height:56px}
.header.shrunk .subbar .wrap{height:38px}
.header{transition:none}
.header .nav,.header .subbar .wrap{transition:height .2s var(--ease)}

@media(max-width:980px){
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 30px 50px #321d181a;
  }
  .navlinks.open{display:flex}
  .navgroup{position:static}
  .navtop{width:100%;justify-content:space-between;padding:13px 2px;border-radius:0;border-bottom:1px solid var(--rule)}
  .navtop:hover{background:none}
  .navmenu{
    position:static;display:none;min-width:0;border:0;box-shadow:none;
    background:transparent;padding:4px 0 10px 14px;
  }
  .navgroup[data-open] .navmenu{display:block}
  .navtop.on::before{display:none}
  .navlink-quiet{display:none}
  .menu{display:block}
}
@media(max-width:600px){
  .subbar .wrap{gap:10px}
  .navright .btn{font-size:11px;padding:0 13px}
}

/* ---------- 17. the doorway between the two halves of the business ---------- */
.doorway{padding-top:0}
.door{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(24px,3vw,44px);align-items:center;
  background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(28px,3vw,46px);overflow:hidden;
}
.door h2{font:400 clamp(30px,3.4vw,44px)/1.03 var(--display);letter-spacing:-.015em;margin:0 0 14px}
.door p{color:var(--muted);max-width:52ch;margin:0 0 22px}
.door-art{align-self:stretch;min-height:clamp(180px,20vw,260px);background-size:cover;background-position:center;border-radius:var(--r-md)}
@media(max-width:900px){.door{grid-template-columns:1fr}.door-art{min-height:200px;order:-1}}

/* ===========================================================================
   18. DIAGRAMS AND DOCUMENTS
   Replaces the hairline squiggles. Posters carry place and feeling; these
   carry information. An abstract curve with a dot labelled MATCH did neither.
   =========================================================================== */
.figure-block{
  background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:26px 28px 20px;margin-top:22px;
}
.figure-head{margin-bottom:20px}
.figure-head b{display:block;font:400 21px/1.2 var(--display);margin-bottom:4px}
.figure-head small{font-size:11.5px;color:var(--muted)}
.cal,.corr{width:100%;height:auto;display:block;overflow:visible}
.cal-m{font:9px var(--mono);fill:var(--muted);text-anchor:middle;letter-spacing:.06em}
.cal-r{font:12px var(--text);fill:var(--ink)}
.cal-k{font:10px var(--text);fill:var(--muted)}
.cal-today{font:9px var(--mono);fill:var(--ink);letter-spacing:.08em}
.corr-w{font:9px var(--mono);fill:var(--clay);letter-spacing:.07em}
.corr-n{font:13px var(--text);fill:var(--ink);font-weight:600}
.corr-s{font:11px var(--text);fill:var(--muted)}
.corr-f{font:11.5px var(--text);fill:var(--muted)}

/* a document is paper: square corners, tabular figures, no card chrome */
.minidoc{
  margin-top:24px;background:#fffdf7;border:1px solid var(--rule);
  border-radius:var(--r-doc);padding:16px 18px;
  box-shadow:0 14px 30px #35221910;
}
.minidoc-hd{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:10px;margin-bottom:6px;border-bottom:1.5px solid var(--ink);
}
.minidoc-hd b{font:400 15px var(--display)}
.minidoc-hd span{font:9px var(--mono);color:var(--muted);letter-spacing:.06em}
.minidoc-r{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid #ece2d4;font-size:11.5px}
.minidoc-r span{color:var(--muted)}
.minidoc-r b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.minidoc-t{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;margin-top:4px;border-top:1.5px solid var(--ink)}
.minidoc-t span{font:9px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.minidoc-t b{font:400 19px var(--display);font-variant-numeric:tabular-nums}
.minidoc-f{margin-top:10px;font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}

.checklist{margin-top:26px}
.checklist>b{display:block;font:9px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}
.ck{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.ck i{width:9px;height:9px;border-radius:50%;background:var(--ochre);margin-top:5px}
.ck b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.ck small{font-size:11.5px;color:var(--muted);line-height:1.5}
@media(max-width:600px){
  .figure-block{padding:20px 18px 16px}
  .cal-r{font-size:10px}
  .corr-n{font-size:11px}.corr-s{display:none}
}

/* ---------- 19. the way in: one conversation, not a form in a box ----------- */
.deskdlg{width:min(560px,calc(100% - 28px));border-radius:var(--r-lg);background:var(--cream);padding:0;overflow:hidden}
.deskwrap{padding:0}
.desk-hd{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--rule);background:var(--white)}
.desk-hd i{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none;box-shadow:0 0 0 4px #59635222}
.desk-hd b{display:block;font-size:13px;font-weight:600}
.desk-hd small{font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.desk-hd .close{margin-left:auto}
.desk-thread{padding:20px 24px 4px}
.dmsg p{margin:0;font-size:13px;line-height:1.55;background:#f2ece1;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 2px;padding:11px 13px}
.dmsg small{display:block;margin-top:5px;font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.desk-compose{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 24px 4px;margin:0}
.desk-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 24px 22px}
.desk-foot small{font-size:10.5px;color:var(--muted);max-width:30ch}
@media(max-width:600px){.desk-compose{grid-template-columns:1fr}.desk-compose .field.wide{grid-column:auto}}

/* ---------- 20. rhythm and the last of the old chrome ----------------------- */
.section{padding:86px 0}
.cta{padding-bottom:86px}
.why{display:block;margin-top:7px;font-size:11px;line-height:1.45;color:var(--muted)}
/* the eyebrow sat above every single section - eight per page. Keep it where it
   carries a real coordinate, quiet it everywhere else. */
.eyebrow{font-size:9px;letter-spacing:.11em;opacity:.9}
.title-row{margin-bottom:42px}
@media(max-width:600px){.section{padding:62px 0}.cta{padding-bottom:62px}}

/* the large card spans two rows; without a closing line its lower third was empty */
.card.large{display:flex;flex-direction:column;min-height:0}
.card.large .checklist{margin-bottom:20px}
.card-foot{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--ink);opacity:.75;
}
.facts>a:last-child{padding-right:max(24px,calc((100vw - var(--max)) / 2))}

/* the interior pages wrapped their head in .title-row (a .76fr/1.24fr grid).
   Inside the hero column that squeezed the headline to four words a line. */
.page-hero-copy .title-row{grid-template-columns:1fr;gap:14px;margin-bottom:0}
.page-hero-copy .title-row .copy{max-width:50ch;margin:0}
.page-hero-copy .lead{max-width:50ch}
.page-hero h1{
  font:400 clamp(34px,3.7vw,54px)/1.03 var(--display);
  letter-spacing:-.018em;margin:0;
}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero-in{grid-template-columns:minmax(0,52ch) minmax(0,1fr)}

/* cards were stretching to fill their grid row, leaving empty lower thirds
   wherever the content was shorter than the column beside it */
.cap-grid{align-items:start}
.card{min-height:0}
.card.large{min-height:0}
.other-grid{grid-template-rows:auto}
.other-grid .category{min-height:172px}

/* ---------- 21. fixes found by looking at the rendered pages ---------------- */

/* The mark is 31px but had no flex:none, so in the narrow footer column it
   collapsed to zero width and its absolutely-positioned petals landed on top
   of the wordmark. */
.brand-mark{flex:none}
.brand span{min-width:0}
.footer .brand small{color:#9b8d85}

/* The dropdown sat 10px below its button, so crossing that gap left .navgroup,
   fired mouseleave, and the menu shut before you could reach a child item.
   An invisible bridge inside the menu keeps the pointer within the group. */
.navmenu::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:transparent;
}
.navgroup{padding-bottom:2px}

/* ---------- 22. coffee hero: one image, the lot card on top of it ----------- */
.page-hero-art{position:relative}
.coffee .page-hero-art,.page-hero-art .lot-float{z-index:1}
.lot-float{
  position:absolute;left:20px;bottom:20px;right:auto;max-width:270px;
  background:#fffdf7f2;backdrop-filter:blur(6px);
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:15px 17px;box-shadow:0 20px 44px #2c1a1426;
}
.lot-float small{display:block;font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-bottom:6px}
.lot-float strong{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:400 22px var(--display)}
.lot-float strong b{font:400 30px var(--display);color:var(--clay);font-variant-numeric:tabular-nums}
.lot-float p{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.hero-facts.band{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#faf5ed;
}
.hero-facts.band>div{padding:22px 24px;border-right:1px solid var(--rule)}
.hero-facts.band>div:first-child{padding-left:max(24px,calc((100vw - var(--max)) / 2))}
.hero-facts.band>div:last-child{border-right:0;padding-right:max(24px,calc((100vw - var(--max)) / 2))}
.hero-facts.band small{display:block;font:9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.hero-facts.band b{display:block;margin-top:7px;font:400 17px var(--display)}
.page-hero-copy .hero-grid{display:block}
.page-hero-copy .hero-actions{display:flex;gap:10px;margin-top:26px}
@media(max-width:900px){
  .hero-facts.band{grid-template-columns:1fr 1fr}
  .hero-facts.band>div:first-child,.hero-facts.band>div:last-child{padding-left:24px;padding-right:24px}
  .lot-float{left:14px;bottom:14px;max-width:230px;padding:12px 14px}
}

/* ---------- 23. hero art was being cropped to a wide, short box ------------- */
.page-hero-art{
  aspect-ratio:4/3;min-height:320px;max-height:520px;
  background-position:center 38%;
}
@media(max-width:900px){.page-hero-art{aspect-ratio:3/2;min-height:0;max-height:340px}}

/* ---------- 24. one reality band per category page --------------------------
   Each category's hardest constraint, made visible, full width, with room to
   breathe: food & agri = when, materials = how long, packaged = what it needs.
   -------------------------------------------------------------------------- */
.band-cal{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-cal .title-row{margin-bottom:34px}
.cal2,.lead{width:100%;height:auto;display:block;overflow:visible}
.c2-m,.c2-m-on{font:11px var(--text);fill:var(--muted);text-anchor:middle}
.c2-m-on{fill:var(--ink);font-weight:600}
.c2-now{font:9px var(--mono);fill:var(--clay);letter-spacing:.14em;text-anchor:middle}
.c2-n{font:15px var(--text);fill:var(--ink);font-weight:600}
.c2-w{font:11px var(--text);fill:var(--muted)}
.c2-s{font:12px var(--text);fill:var(--muted)}
.c2-s-on{fill:var(--leaf);font-weight:600}
.c2-k{font:11px var(--text);fill:var(--muted)}
.ld-w{font:10px var(--mono);fill:var(--muted);text-anchor:middle;letter-spacing:.05em}
.ld-n{font:15px var(--text);fill:var(--ink);font-weight:600}
.ld-s,.ld-d{font:11px var(--text);fill:var(--muted)}
.ld-m{font:13px var(--text);fill:var(--ink);font-weight:600}
.ld-r{font:11px var(--mono);fill:var(--clay);letter-spacing:.04em}
.ld-k{font:10px var(--mono);fill:var(--muted);letter-spacing:.07em;text-transform:uppercase}

.reqlist{border-top:1px solid var(--rule)}
.req-row{
  display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.req-row b{display:block;font:400 21px/1.2 var(--display);margin-bottom:6px}
.req-row p{margin:0;font-size:13px;line-height:1.6;color:var(--muted);max-width:62ch}
.req-row span{
  justify-self:end;text-align:right;font:9px var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--clay);padding-top:6px;
}
@media(max-width:760px){
  .req-row{grid-template-columns:1fr;gap:8px}
  .req-row span{justify-self:start;text-align:left}
  .cal2,.lead{min-width:660px}
  .band-cal .wrap{overflow-x:auto}
}

/* ---------- 27. the footer lockup ------------------------------------------
   `.footer a{display:block}` (premium.css) outranked `.brand{display:flex}`
   by one type selector, so the footer's brand anchor stopped being a flex
   row: the 31px mark span went back to inline, width ignored, and its two
   absolutely positioned petals landed on top of the "Adey" wordmark. Restore
   the row, and pin the mark so no flex context can shrink it to nothing.
   -------------------------------------------------------------------------- */
.footer .brand{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.brand-mark{flex:none}

/* ---------- 25. one request pattern on every category page ------------------
   Was four different wrappers (request-wrap / center-form / form-wide /
   request-card) with different headings and column counts. Same shape now;
   only the words change.
   -------------------------------------------------------------------------- */
.req-sec{background:var(--paper)}
.request-wrap{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,48px);align-items:start;
}
.request-facts h2{font:400 clamp(30px,3.2vw,46px)/1.03 var(--display);letter-spacing:-.016em;margin:0 0 20px}
.good-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.good-list li{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid var(--rule)}
.good-list b{font-size:13px;font-weight:600}
.good-list span{font-size:12px;line-height:1.55;color:var(--muted)}
.req-note{margin-top:18px;font-size:12px;line-height:1.6;color:var(--muted);max-width:44ch}
.form-card{
  background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:clamp(22px,2.4vw,34px);
}
.form-card h3{font:400 28px/1.05 var(--display);margin:0 0 4px;letter-spacing:-.012em}
.form-card>p{margin:0;font-size:11.5px;color:var(--muted)}
.form-card .form{margin-top:20px}
@media(max-width:900px){.request-wrap{grid-template-columns:1fr}}

/* ---------- 26. two regressions from section 23 ----------------------------- */

/* align-self:stretch (set in 15) makes the row decide the height, which fights
   aspect-ratio and left the poster as a short wide band with dead space under
   the hero. The aspect now decides, and the copy centres against it. */
.page-hero-art{align-self:center}
.page-hero-in{align-items:center}

/* removing the calendar from the "Season and availability" card left it a tall
   empty box, because these grids stretch their children to the row height.
   Every card grid on the category pages sizes to its content now. */
.coord-grid,.ex-grid,.card-grid,.other-grid,.cap-grid{align-items:start}
.coord-grid>*,.ex-grid>*,.card-grid>*{min-height:0}

/* ---------- 28. the demonstration stamp on a preview sheet ------------------
   `.ds-mark` is 74px wide, pinned 30px from the right edge, and it landed on
   top of the one figure a buyer opens the invoice to read — USD 80,942.00.
   Keep the stamp, give the total and the missing-field line room beside it,
   and drop it under the sheet on a phone.
   -------------------------------------------------------------------------- */
.doc-sheet{padding-bottom:70px}
.ds-total,.ds-missing{padding-right:116px}
@media(max-width:600px){
  .doc-sheet{padding:22px 18px 26px}
  .ds-total,.ds-missing{padding-right:0}
  .ds-mark{position:static;margin:20px auto 0;transform:rotate(-6deg)}
}

/* ---------- 29. image-led product showcase ---------------------------------
   This is a presentation section, so the artwork is part of the hierarchy.
   The coffee feature gets a real image field and each sourced category gets a
   useful visual panel instead of a tiny decorative mark. */
.collections .collection-grid{
  grid-template-columns:minmax(0,1.24fr) minmax(360px,.9fr);
  gap:18px;
}
.collections .coffee-card{
  min-height:560px;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.92fr);
  background:var(--ink);overflow:hidden;
}
.coffee-card-copy{
  min-width:0;padding:38px 32px 30px;display:flex;
  flex-direction:column;justify-content:space-between;position:relative;z-index:1;
}
.coffee-card-copy h3{font-size:clamp(38px,4vw,52px);max-width:9ch}
.coffee-card-copy p{max-width:31ch}
.coffee-card-copy .btn{align-self:flex-start}
.coffee-card-art{
  min-height:100%;background-color:var(--leaf);
  border-left:1px solid #ffffff22;background-position:center;
}
.collections .coffee-score{right:24px;bottom:20px;font-size:62px;z-index:2}
.collections .other-grid{
  display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:18px;
}
.collections .category{
  display:grid;grid-template-columns:minmax(0,1fr) 145px;
  min-height:0;padding:0;overflow:hidden;
}
.category-copy{
  min-width:0;padding:24px 18px 22px 26px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.category-copy p{max-width:31ch}
.category-copy a{position:static;margin-top:auto}
.collections .category-mark{
  position:relative;right:auto;bottom:auto;width:auto;height:auto;min-height:100%;
  border-left:1px solid var(--rule);border-radius:0;
  background-color:#eee6da;background-size:contain;background-position:center;
}
.collections .category-mark.art:not([data-loaded])::before{border:0;border-radius:0}
@media(max-width:900px){
  .collections .collection-grid{grid-template-columns:1fr}
  .collections .coffee-card{min-height:500px}
}
@media(max-width:600px){
  .collections .coffee-card{grid-template-columns:1fr;min-height:0}
  .coffee-card-copy{min-height:335px;padding:30px 24px 26px}
  .coffee-card-art{min-height:280px;border-left:0;border-top:1px solid #ffffff22}
  .collections .coffee-score{right:20px;bottom:255px;font-size:54px}
  .collections .category{grid-template-columns:minmax(0,1fr) 112px}
  .category-copy{padding:21px 15px 20px 21px}
}