/* ============================================================================
   AMILLATI & CO - shared shell for the sub-pages
   ============================================================================
   GENERATED, NOT HAND-WRITTEN. The palette tokens and the whole navigation block below are
   extracted verbatim from index.html so the nav can never drift between the homepage and the
   sub-pages. If you change the nav on the homepage, regenerate this file rather than editing it.

   The homepage deliberately keeps its CSS inline: it is one long art-directed document and
   splitting it would make it harder to reason about, not easier. The sub-pages share this
   because they are all the same small shell.
   ============================================================================ */

  /* ============ PALETTE B, light. Unchanged from v2. ============ */
  :root{
    --serif:"EB Garamond",Georgia,"Times New Roman",serif;
    --ground:#F1EADC; --ground-2:#E7DFCD; --ground-3:#DED3BC; --ink:#141210;
    --gold:#B98A2E; --gold-deep:#9A701F; --moss:#3E4636; --line:#CBBE9E;
    /* Brand gold measured 2.60 / 2.35 / 2.10 against the three grounds — it fails AA and
       even the large-text 3.0 exemption, and it carries EVERY eyebrow, kicker, numeral and
       label on the page at 10px. --gold-text is a darkened gold for small type only
       (6.29 / 5.68 / 5.07, passes AA on all three). --gold keeps the brand where size makes
       it legible: rules, dots, the display italic. --muted and --faint lifted likewise. */
    --gold-text:#6E4F12;
    --muted:rgba(20,18,16,0.66); --faint:rgba(20,18,16,0.52);
    --hair:rgba(20,18,16,0.13); --shell:rgba(20,18,16,0.035);
    /* Easing discipline, from a survey of the library: display-scale motion gets expo-out,
       body-scale motion gets plain ease. Using one curve everywhere is the amateur tell. */
    --ease:cubic-bezier(0.32,0.72,0,1);        /* expo family. Hero and section scale. */
    --ease-body:cubic-bezier(0.25,0.1,0.25,1); /* plain ease. Rows, links, small reveals. */
    --figure-base:saturate(0.52) contrast(1.02) brightness(0.98);
    --figure-lit:saturate(1.24) contrast(1.10) brightness(1.06);
    /* spotlight position + radius, written by rAF. No canvas, no toDataURL. */
    --sx:50%; --sy:42%; --sr:38%;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#1E1B17; --ground-2:#191612; --ground-3:#141110; --ink:#F1EADC;
      --gold:#D8AC53; --gold-deep:#E0BC74; --moss:#8a967c; --line:#3a352a;
      --gold-text:#D8AC53; --muted:rgba(241,234,220,0.62); --faint:rgba(241,234,220,0.44);
      --hair:rgba(241,234,220,0.14); --shell:rgba(241,234,220,0.045);
      --figure-base:saturate(0.34) contrast(1.16) brightness(0.46);
      --figure-lit:saturate(1.05) contrast(1.14) brightness(0.94);
    }
  }
  :root[data-theme="dark"]{
    --ground:#1E1B17; --ground-2:#191612; --ground-3:#141110; --ink:#F1EADC;
    --gold:#D8AC53; --gold-deep:#E0BC74; --moss:#8a967c; --line:#3a352a;
    --gold-text:#D8AC53; --muted:rgba(241,234,220,0.62); --faint:rgba(241,234,220,0.44);
    --hair:rgba(241,234,220,0.14); --shell:rgba(241,234,220,0.045);
    --figure-base:saturate(0.34) contrast(1.16) brightness(0.46);
    --figure-lit:saturate(1.05) contrast(1.14) brightness(0.94);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  /* NOTE: v2/v3 carried `overflow-x:hidden` here. It is removed in v4 for two reasons:
     it silently BREAKS every `position:sticky` descendant (which killed the pinned hero),
     and it masks real overflow bugs by making `scrollWidth > innerWidth` permanently false.
     Overflow is measured instead — 0 offending elements at 1440/980/768/375/320. */
  html,body{margin:0;max-width:100%;overflow-x:clip;background:var(--ground);color:var(--ink);
    font-family:var(--serif);line-height:1.6;
    transition:background .5s var(--ease),color .5s var(--ease);}
  body{padding-top:var(--nav-h);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ::selection{background:var(--gold);color:var(--ground);}

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{margin:0;max-width:100%;overflow-x:clip;background:var(--ground);color:var(--ink);
    font-family:var(--serif);line-height:1.6;}
  body{padding-top:var(--nav-h);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  :focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:3px;}

  /* ============ SITE NAVIGATION ============
     Rob's request, 3 Sep 2026: the five activities as buttons at the top, in a size that reads on
     a large screen, collapsing to a hamburger on a phone. This supersedes the earlier "no site nav"
     instruction, which is why v1 to v4 have none.

     The five labels are the nav decided in S02 (14 Jul) and every one is a word already on the
     page: the footer carries the same four and About is the fifth bento cell. No new copy.

     BEHAVIOUR: hides on scroll down, returns on scroll up. A 68px bar has no business sitting on
     a long page permanently, and this way it is never more than one flick away. Under reduced
     motion it simply never hides.

     TYPE: desktop links are clamp(14.5px,1.05vw,17px). The bar this replaces ran at 10px. */
  :root{ --nav-h:68px; }
  @media (max-width:900px){ :root{ --nav-h:60px; } }

  .nav{position:fixed;top:0;left:0;right:0;z-index:300;height:var(--nav-h);
    background:var(--ground);border-bottom:1px solid var(--hair);
    transform:translate3d(0,0,0);
    transition:transform .38s var(--ease),border-color .38s var(--ease);}
  @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
    .nav{background:color-mix(in srgb, var(--ground) 86%, transparent);
      backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);}
  }
  .nav.is-hidden{transform:translate3d(0,-100%,0);}
  .nav.at-top{border-bottom-color:transparent;}
  .nav-in{max-width:1180px;margin:0 auto;height:100%;padding:0 clamp(22px,5vw,64px);
    display:flex;align-items:center;gap:clamp(16px,3vw,48px);}

  .nav-mark{font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:0.17em;
    text-transform:uppercase;color:var(--ink);white-space:nowrap;flex:none;}
  .nav-mark span{color:var(--gold-text);}

  .nav-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);margin-left:auto;}
  .nav-links a{position:relative;font-size:clamp(14.5px,1.05vw,17px);letter-spacing:0.05em;
    color:var(--muted);padding:7px 0;white-space:nowrap;transition:color .25s var(--ease);}
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
    background:var(--gold);transition:right .32s var(--ease);}
  .nav-links a:hover::after,.nav-links a:focus-visible::after{right:0;}

  .nav-end{display:flex;align-items:center;gap:8px;flex:none;}
  .nav-theme{border:0;background:transparent;font:inherit;font-family:var(--serif);font-size:17px;
    line-height:1;color:var(--gold-text);cursor:pointer;padding:7px;border-radius:6px;}
  .nav-burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
    padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
  .nav-burger span{display:block;width:23px;height:1.5px;background:var(--ink);
    transition:transform .3s var(--ease),opacity .2s var(--ease);}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .nav-drawer{position:fixed;inset:var(--nav-h) 0 0 0;z-index:290;background:var(--ground);
    display:flex;flex-direction:column;justify-content:center;
    padding:0 clamp(22px,8vw,64px) 10vh;
    opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
    /* visibility is deliberately NOT interpolated. If it transitions, the drawer stays
       visibility:hidden for the whole 320ms on open and the first link cannot take focus - a
       keyboard user opens the menu and lands nowhere. Instead: flip to visible instantly on open,
       and delay the flip to hidden until the fade-out has finished on close. */
    transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s;}
  .nav-drawer.is-open{opacity:1;visibility:visible;transform:none;
    transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear 0s;}
  .nav-drawer a{display:flex;align-items:baseline;gap:16px;
    padding:clamp(13px,2.2vh,20px) 0;border-bottom:1px solid var(--hair);
    font-size:clamp(23px,6.2vw,34px);font-weight:400;line-height:1.15;color:var(--ink);}
  .nav-drawer a:last-of-type{border-bottom:0;}
  .nav-drawer a .n{font-size:.4em;letter-spacing:.24em;color:var(--gold-text);flex:none;}
  body.nav-open{overflow:hidden;}

  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-burger{display:flex;}
  }
  @media (prefers-reduced-motion: reduce){
    .nav{transition:none;}
    .nav.is-hidden{transform:none;}   /* never hide the nav from a reduced-motion reader */
    .nav-drawer{transition:none;}
    .nav-burger span{transition:none;}
  }
  /* ---- sub-page shell ---- */
  .pg{max-width:1180px;margin:0 auto;padding:clamp(64px,11vw,140px) clamp(22px,5vw,64px) 0;}
  .pg .eyebrow{margin:0 0 20px;font-size:11px;font-weight:700;letter-spacing:0.3em;
    text-transform:uppercase;color:var(--gold-text);}
  .pg h1{margin:0 0 26px;font-size:clamp(38px,6.4vw,84px);font-weight:400;line-height:0.99;
    letter-spacing:-0.006em;}
  .pg h1 em{font-style:italic;color:var(--gold-text);}
  .pg .lede{max-width:44ch;margin:0 0 40px;font-size:clamp(18px,1.5vw,21px);line-height:1.6;
    color:var(--muted);}
  .pg-held{max-width:60ch;margin:0 0 clamp(56px,8vw,96px);padding:clamp(26px,3.4vw,40px);
    border:1px dashed var(--gold);border-radius:2px;background:rgba(185,138,46,0.05);}
  .pg-held .chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
    font-size:9.5px;font-weight:700;letter-spacing:0.26em;text-transform:uppercase;color:var(--gold-text);}
  .pg-held .chip i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:block;}
  .pg-held p{margin:0 0 12px;font-size:17px;line-height:1.65;color:var(--ink);}
  .pg-held p:last-child{margin-bottom:0;color:var(--muted);}
  .pg-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(56px,8vw,90px);
    font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-text);
    border-bottom:1px solid var(--hair);padding-bottom:5px;}
  .pg-back:hover{border-color:var(--gold);}
  .pg-foot{border-top:1px solid var(--hair);padding:30px clamp(22px,5vw,64px) 46px;text-align:center;}
  .pg-foot p{margin:0;font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);}