:root{
    /* a gallery, not a storefront: bone paper, warm ink, reclaimed wood accents */
    --paper:#F4F0E8; --paper2:#FBF9F4; --panel:#EEE8DC;
    --ink:#211B14; --ink2:#3A3226; --muted:#726755; --faint:#9C917E;
    --rule:#DCD3C3; --rule2:#CFC6B4;
    --walnut:#5A3D28; --copper:#A9662F; --copper-d:#874E1F; --sage:#5F6E3E; --gold:#B58A4E;
    --display:'Cormorant Garamond', Georgia, serif;
    --body:'Archivo', system-ui, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;background:var(--paper)}
  body{background:transparent;color:var(--ink);font-family:var(--body);font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}
  /* calm wood grain wash, drawn from Charlie's business card: a whisper behind the paper, tiled so it stays fast and never fights the work */
  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.13' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.44 0 0 0 -1 0.4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");background-repeat:repeat}
  h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.05}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1180px;margin:0 auto;padding:0 34px}
  .narrow{max-width:820px}
  /* small tracked museum label */
  .kicker{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--copper-d)}
  .kicker.dim{color:var(--faint)}
  .rule{height:1px;background:var(--rule);border:0}
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:14px 26px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .3s,color .3s,background .3s}
  .btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
  /* primary buttons: carved from walnut, a real grain under the ink */
  .btn-ink{color:var(--paper2);background-color:#4a3120;
    background-image:linear-gradient(112deg,rgba(255,247,235,.10),rgba(0,0,0,.20)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.13' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.28 0 0 0 0 0.17 0 0 0 0 0.09 0 0 0 -1.1 0.92'/%3E%3C/filter%3E%3Crect width='220' height='60' filter='url(%23w)'/%3E%3C/svg%3E");
    background-size:cover,240px 100%;background-blend-mode:soft-light,normal;
    box-shadow:inset 0 1px 0 rgba(255,240,220,.12),inset 0 -2px 7px rgba(0,0,0,.3)}
  .btn-ink:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(45,32,20,.36),inset 0 1px 0 rgba(255,240,220,.16)}
  .btn-ink:hover svg{transform:translateX(3px)}
  .btn-line{border-color:var(--ink);color:var(--ink)}
  .btn-line:hover{background:var(--ink);color:var(--paper2);transform:translateY(-2px)}
  .btn-line:hover svg{transform:translateX(3px)}
  @media (prefers-reduced-motion:reduce){.btn,.btn svg{transition:none}}

  /* logo mark */
  .mark{flex:none;color:inherit}
  .mark svg{display:block;width:100%;height:100%}
  .lmark{border-radius:50%;overflow:hidden;background:#FBF8F1;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
  .lmark img{width:88%;height:88%;max-width:none;object-fit:contain}

  /* nav */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.35s;border-bottom:1px solid transparent}
  nav.solid{background:rgba(244,240,232,.9);backdrop-filter:blur(10px);border-bottom-color:var(--rule)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;padding:20px 34px;max-width:1300px;margin:0 auto}
  .brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
  .brand .mark{width:50px;height:50px}
  .brand .bt{display:flex;flex-direction:column;line-height:1}
  .brand .bt b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.01em}
  .brand .bt small{font-family:var(--body);font-weight:400;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);transition:.2s}
  .nav-links a:hover{color:var(--copper-d)}
  .nav-links .vis{border:1px solid var(--ink);padding:10px 18px;border-radius:2px}
  .nav-links .vis:hover{background:var(--ink);color:var(--paper2)}
  .burger{display:none;font-size:23px;color:var(--ink);background:none;border:0;cursor:pointer}

  /* hero: editorial split, an object on paper */
  .hero{padding:150px 0 80px}
  .hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
  .hero-copy .kicker{display:block;margin-bottom:22px}
  .hero-copy h1{font-size:clamp(52px,8vw,104px);font-weight:500;letter-spacing:.005em;line-height:.96}
  .hero-copy h1 em{font-style:italic;color:var(--copper-d)}
  .hero-copy .lede{font-size:clamp(17px,2.4vw,20px);color:var(--muted);max-width:440px;margin:26px 0 34px;font-weight:300}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-figure{position:relative}
  .hero-figure .plate{position:relative;background:var(--paper2);border:1px solid var(--rule);padding:14px;box-shadow:0 40px 80px -30px rgba(45,32,20,.45)}
  .hero-figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .hero-figure .plaque{position:absolute;left:-18px;bottom:34px;background:var(--ink);color:var(--paper2);padding:14px 18px;max-width:230px}
  .hero-figure .plaque b{font-family:var(--display);font-style:italic;font-weight:500;font-size:22px;display:block;line-height:1.1}
  .hero-figure .plaque span{font-family:var(--body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-top:5px}

  /* statement */
  .statement{padding:96px 0;background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .statement .seal{width:230px;height:230px;margin:0 auto 34px;border-radius:50%;overflow:hidden;background:#FBF8F1;border:1px solid var(--rule);box-shadow:0 26px 54px -22px rgba(45,32,20,.5);display:flex;align-items:center;justify-content:center}
  .statement .seal img{width:90%;height:90%;object-fit:contain}
  .statement .credo{font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(26px,3.9vw,42px);line-height:1.28;text-align:center;color:var(--ink)}
  .statement .sig{margin-top:30px;text-align:center;font-family:var(--display);font-size:26px;color:var(--walnut)}
  .statement .sig small{display:block;font-family:var(--body);font-style:normal;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--copper-d);margin-top:8px}

  /* works */
  .works{padding:104px 0}
  .works-head{text-align:center;max-width:640px;margin:0 auto 26px}
  .works-head h2{font-size:clamp(38px,5.4vw,60px);margin:14px 0}
  .works-head p{color:var(--muted);font-size:16px}
  .coll-label{text-align:center;margin:92px 0 48px}
  .coll-label .rn{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--copper-d)}
  .coll-label h3{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,50px);letter-spacing:.01em;color:var(--ink);margin:8px 0 14px;text-transform:none}
  .orn{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--copper)}
  .orn .l{width:78px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
  .orn .l.r{background:linear-gradient(90deg,var(--gold),transparent)}
  .orn svg{width:30px;height:23px;flex:none}
  .orn.mini{margin:16px 0 0}
  .orn.mini .l{width:52px}
  .orn.mini svg{width:24px;height:18px}

  .work{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin:56px 0}
  .work.flip .wfig{order:2}
  .wfig{position:relative;background:var(--paper2);border:1px solid var(--rule);padding:12px;box-shadow:0 30px 64px -34px rgba(45,32,20,.5)}
  .wfig img{width:100%;object-fit:cover}
  .wfig.port img{aspect-ratio:3/4}
  .wfig.land img{aspect-ratio:4/3}
  .placard .no{font-family:var(--display);font-style:italic;font-size:22px;color:var(--faint)}
  .placard h4{font-size:clamp(30px,3.6vw,44px);margin:6px 0 16px;line-height:1.02}
  .placard .spec{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:2}
  .placard .desc{color:var(--ink2);font-size:15.5px;margin:18px 0 22px;max-width:440px;font-weight:300}
  .placard .oak{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-d);border-bottom:1px solid var(--gold);padding-bottom:4px;transition:.25s}
  .placard .oak svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
  .placard .oak:hover{color:var(--ink)}
  .placard .oak:hover svg{transform:translateX(3px)}
  .placard .tag{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);border:1px solid var(--rule);border-radius:2px;padding:4px 10px;margin-bottom:16px}

  /* wide detail band */
  .detail{margin:72px auto;max-width:600px}
  .detail .dfig{background:var(--paper2);border:1px solid var(--rule);padding:14px;box-shadow:0 34px 70px -36px rgba(45,32,20,.5)}
  .detail .dfig img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .detail .dcap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .detail .dcap em{font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:0;font-size:20px;color:var(--ink)}

  /* pair (two smaller works) */
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:56px 0}
  .pcard .pfig{background:var(--paper2);border:1px solid var(--rule);padding:12px;box-shadow:0 26px 56px -32px rgba(45,32,20,.5)}
  .pcard .pfig img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .pcard .no{font-family:var(--display);font-style:italic;font-size:19px;color:var(--faint);margin-top:18px}
  .pcard h4{font-size:28px;margin:4px 0 10px}
  .pcard .spec{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.9}
  .pcard .oak{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-d);border-bottom:1px solid var(--gold);padding-bottom:4px}
  .pcard .oak svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* blooms row (metal flowers, 3 up) */
  .blooms{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:56px 0}
  .bloom .bfig{background:var(--paper2);border:1px solid var(--rule);padding:10px;box-shadow:0 22px 48px -30px rgba(45,32,20,.5);transition:transform .3s,box-shadow .3s}
  .bloom:hover .bfig{transform:translateY(-5px);box-shadow:0 32px 60px -30px rgba(45,32,20,.55)}
  .bloom .bfig img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .bloom h4{font-size:24px;margin:16px 0 6px}
  .bloom .spec{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

  /* coming soon (bonsai, no photo yet) */
  .soon{border:1px dashed var(--rule2);border-radius:3px;background:var(--paper2);padding:44px 34px;text-align:center;margin:40px 0 0}
  .soon h4{font-size:30px;margin-bottom:8px}
  .soon p{color:var(--muted);font-size:15px;max-width:460px;margin:0 auto 18px}

  /* maker */
  .maker{padding:104px 0;background:var(--ink);color:var(--paper2)}
  .maker-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
  .maker-fig{position:relative;background:#171209;border:1px solid #372a1b;padding:14px}
  .maker-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .maker-fig figcaption{margin-top:12px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .maker-copy .kicker{color:var(--gold);display:block;margin-bottom:18px}
  .maker-copy h2{font-size:clamp(36px,4.6vw,54px);color:var(--paper2);margin-bottom:20px}
  .maker-copy p{color:rgba(244,240,232,.82);font-size:16px;margin-bottom:16px;font-weight:300}
  .maker-copy p b{color:var(--paper2);font-weight:500}
  .maker-meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px;padding-top:26px;border-top:1px solid #372a1b}
  .maker-meta .m .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
  .maker-meta .m .v{font-family:var(--display);font-size:22px;color:var(--paper2)}

  /* acquire */
  .acquire{padding:104px 0;text-align:center}
  .acquire .mk{width:66px;height:66px;margin:0 auto 24px}
  .acquire h2{font-size:clamp(38px,5.4vw,62px);margin-bottom:16px}
  .acquire p{color:var(--muted);font-size:17px;max-width:520px;margin:0 auto 20px}
  .acquire .oneof{font-family:var(--display);font-style:italic;font-size:23px;color:var(--walnut);margin-bottom:30px}
  .acquire-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
  .acquire .reach{display:inline-flex;gap:26px;flex-wrap:wrap;justify-content:center;font-size:13px;letter-spacing:.04em;color:var(--ink2)}
  .acquire .reach a{border-bottom:1px solid var(--gold);padding-bottom:2px}
  .acquire .reach a:hover{color:var(--copper-d)}

  /* footer */
  footer{background:var(--panel);border-top:1px solid var(--rule);padding:64px 0 32px}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:40px}
  .foot-brand .mark{width:60px;height:60px;color:var(--walnut);margin-bottom:14px}
  .foot-brand h4{font-size:26px;margin-bottom:4px}
  .foot-brand small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper-d);margin-bottom:14px}
  .foot-brand p{color:var(--muted);font-size:14px;max-width:320px;font-weight:300}
  .foot-col .h{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper-d);margin-bottom:14px}
  .foot-col a,.foot-col p{display:block;font-size:14px;color:var(--ink2);line-height:2;font-weight:300}
  .foot-col a:hover{color:var(--copper-d)}
  .foot-bot{border-top:1px solid var(--rule);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11.5px;letter-spacing:.06em;color:var(--faint)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* click any piece to see the full photo */
  figure img{cursor:zoom-in}
  .lb{position:fixed;inset:0;z-index:300;background:rgba(20,14,10,.93);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;opacity:0;transition:opacity .2s ease}
  .lb.on{display:flex;opacity:1}
  .lb img{max-width:95vw;max-height:90vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.6);border-radius:2px;background:#FBF8F1}
  .lb .lbx{position:absolute;top:16px;right:20px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .2s}
  .lb .lbx:hover{background:rgba(255,255,255,.26)}
  .lb .lbcap{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:rgba(244,240,232,.82);font-size:12px;letter-spacing:.06em;padding:0 24px}
  .lb .lbhint{position:absolute;top:22px;left:24px;color:rgba(244,240,232,.5);font-size:11px;letter-spacing:.18em;text-transform:uppercase}

  @media(max-width:900px){
    .wrap{padding:0 22px}
    .burger{display:block;z-index:2}
    .nav-in{padding:15px 22px}
    .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .25s}
    nav.open .nav-links{max-height:340px;opacity:1}
    nav.open{background:rgba(244,240,232,.98);border-bottom-color:var(--rule)}
    .nav-links a{padding:16px 24px;border-top:1px solid var(--rule)}
    .nav-links .vis{border:0;border-top:1px solid var(--rule);border-radius:0;color:var(--copper-d)}
    .hero{padding:120px 0 56px}
    .hero-in{grid-template-columns:1fr;gap:44px}
    .hero-figure{max-width:400px;margin:0 auto;width:100%}
    .hero-figure .plaque{left:8px}
    .statement{padding:66px 0}
    .works{padding:70px 0}
    .work{grid-template-columns:1fr;gap:26px;margin:40px 0}
    .work.flip .wfig{order:0}
    .pair{grid-template-columns:1fr;gap:34px}
    .blooms{grid-template-columns:1fr;gap:22px;max-width:380px;margin-left:auto;margin-right:auto}
    .maker{padding:70px 0}
    .maker-in{grid-template-columns:1fr;gap:36px}
    .maker-fig{max-width:440px}
    .acquire{padding:72px 0}
    .foot-grid{grid-template-columns:1fr;gap:28px}
    .shopgrid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  }

  /* ON-SITE SHOP */
  .shop{padding:104px 0;background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .shop-head{text-align:center;max-width:640px;margin:0 auto 46px}
  .shop-head h2{font-size:clamp(38px,5.4vw,60px);margin:14px 0}
  .shop-head p{color:var(--muted);font-size:16px;margin-top:16px}
  .shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  @media(min-width:901px) and (max-width:1120px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
  /* 🐞 The phone rule for .shopgrid is also written up in the max-width:900px
     block near the top of this file, but it lands BEFORE the three column rule
     above, so source order killed it and every shop grid stayed three across on
     a phone. That pushed the page 573px wide inside a 390px screen. Restated
     here, after the base rule, so it actually wins. Two across at tablet width,
     one down the middle on a phone. Do not move this above .shopgrid. */
  @media(max-width:760px){.shopgrid{grid-template-columns:repeat(2,1fr);gap:18px}}
  @media(max-width:520px){.shopgrid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}
  .scard{display:flex;flex-direction:column;background:var(--paper2);border:1px solid var(--rule);box-shadow:0 22px 48px -30px rgba(45,32,20,.5);transition:transform .3s,box-shadow .3s}
  .scard:hover{transform:translateY(-4px);box-shadow:0 32px 60px -30px rgba(45,32,20,.55)}
  .sfig{padding:10px}
  .sfig img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .sbody{padding:4px 18px 20px;display:flex;flex-direction:column;flex:1}
  .stag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
  .scard h4{font-size:23px;margin:0 0 6px;line-height:1.06}
  .sspec{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .sfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .sprice{font-family:var(--display);font-size:26px;color:var(--ink)}
  .addbtn{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:11px 18px;border-radius:2px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;transition:.25s;white-space:nowrap}
  .addbtn:hover{color:var(--paper2);border-color:#4a3120;background-color:#4a3120;background-image:linear-gradient(112deg,rgba(255,247,235,.10),rgba(0,0,0,.2)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.13' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.28 0 0 0 0 0.17 0 0 0 0 0.09 0 0 0 -1.1 0.92'/%3E%3C/filter%3E%3Crect width='220' height='60' filter='url(%23w)'/%3E%3C/svg%3E");background-size:cover,240px 100%;background-blend-mode:soft-light,normal}
  .addbtn.in{border-color:var(--sage);color:var(--sage)}
  .addbtn.in:hover{background:var(--sage);color:var(--paper2)}

  /* cart button in nav */
  .cartbtn{position:relative;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--ink);padding:10px 18px;border-radius:2px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:9px}
  .cartbtn:hover{background:var(--ink);color:var(--paper2)}
  .cartn{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--copper);color:#fff;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0}
  .cartn.hide{display:none}

  /* cart drawer */
  .cart-scrim{position:fixed;inset:0;background:rgba(20,14,10,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s}
  .cart-scrim.on{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(424px,93vw);background:var(--paper);border-left:1px solid var(--rule2);z-index:210;transform:translateX(101%);transition:transform .32s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:-24px 0 70px -30px rgba(45,32,20,.55)}
  .drawer.on{transform:none}
  .dhead{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--rule)}
  .dhead h3{font-size:24px}
  .dclose{background:none;border:0;font-size:27px;line-height:1;color:var(--muted);cursor:pointer}
  .ditems{flex:1;overflow-y:auto;padding:4px 24px}
  .dline{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
  .dline>img{width:60px;height:74px;object-fit:cover;border:1px solid var(--rule);flex:none}
  .dline .di{flex:1;min-width:0}
  .dline h5{font-family:var(--display);font-size:18px;font-weight:500;margin-bottom:3px;line-height:1.1}
  .dline .dp{font-size:13px;color:var(--muted)}
  .qtyrow{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
  .qtyc{display:flex;align-items:center;gap:13px;border:1px solid var(--rule2);border-radius:2px;padding:3px 11px}
  .qtyc button{background:none;border:0;font-size:16px;line-height:1;color:var(--ink);cursor:pointer;padding:0}
  .qtyc span{min-width:14px;text-align:center;font-size:14px}
  .drm{background:none;border:0;color:var(--faint);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:underline;padding:0}
  .dlprice{font-family:var(--display);font-size:18px;color:var(--ink);flex:none;text-align:right}
  .dsave{display:block;font-family:var(--body);font-size:11px;line-height:1.3;letter-spacing:.02em;color:var(--muted);margin-top:3px;max-width:96px;margin-left:auto}
  .dempty{text-align:center;color:var(--muted);padding:76px 20px;font-size:15px;line-height:1.7}
  .dfoot:empty{display:none}
  .dfoot{padding:22px 24px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
  .drow{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:10px}
  .drow.tot{color:var(--ink);margin:4px 0 18px}
  .drow.tot span:last-child{font-family:var(--display);font-size:26px}
  .cobtn{width:100%;justify-content:center}
  .dnote{text-align:center;font-size:11.5px;color:var(--faint);margin-top:13px;line-height:1.6}


  /* ============ COLLECTIONS: windows into each gallery (home) ============ */
  .collections{padding:104px 0}
  .colgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
  @media(max-width:900px){.colgrid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
  .window{position:relative;display:block;background:var(--paper2);border:1px solid var(--rule);padding:12px;box-shadow:0 22px 48px -30px rgba(45,32,20,.5);transition:transform .3s,box-shadow .3s;color:var(--ink)}
  .window:hover{transform:translateY(-6px);box-shadow:0 36px 66px -30px rgba(45,32,20,.55)}
  .window .wframe{position:relative;overflow:hidden;aspect-ratio:4/5}
  .window .wframe img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .window:hover .wframe img{transform:scale(1.06)}
  .window .wveil{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,12,8,.72),rgba(18,12,8,.05) 58%)}
  .window .wlabel{position:absolute;left:0;right:0;bottom:0;padding:22px 20px}
  .window .wlabel .rn{font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
  .window .wlabel h3{font-family:var(--display);font-weight:500;font-size:30px;color:var(--paper2);margin:5px 0 3px;text-transform:none}
  .window .wlabel .wmeta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,232,.82)}
  .window .wenter{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--paper2)}
  .window .wenter svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
  .window:hover .wenter svg{transform:translateX(4px)}
  .window .wsoon{position:absolute;top:20px;right:20px;background:rgba(244,240,232,.92);color:var(--copper-d);font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:2px}

  /* ============ COLLECTION PAGE ============ */
  .cphero{padding:150px 0 10px}
  .cphero .back{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
  .cphero .back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
  .cphero .back:hover{color:var(--copper-d)}
  .cphero .rn{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--copper-d);display:block;margin-bottom:14px}
  .cphero h1{font-size:clamp(44px,7vw,86px);font-weight:500;line-height:.98;letter-spacing:.005em}
  .cphero .lede{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:580px;margin-top:22px;font-weight:300}
  .cbanner{margin-top:44px}
  .cbanner .frame{background:var(--paper2);border:1px solid var(--rule);padding:13px;box-shadow:0 34px 70px -36px rgba(45,32,20,.5)}
  .cbanner .frame img{width:100%;aspect-ratio:21/9;object-fit:cover}

  /* the two windows per collection: a 3D example + a customizer example */
  .cwins{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:64px 0 24px}
  @media(max-width:760px){.cwins{grid-template-columns:1fr}}
  .cwin{position:relative;background:var(--ink);color:var(--paper2);border:1px solid #372a1b;padding:32px;overflow:hidden;display:flex;flex-direction:column;min-height:230px}
  .cwin .ck{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
  .cwin h3{font-size:29px;color:var(--paper2);margin-bottom:11px;text-transform:none}
  .cwin p{color:rgba(244,240,232,.82);font-size:14.5px;font-weight:300;max-width:46ch;margin-bottom:22px}
  .cwin .cwa{margin-top:auto}
  .cwin.soft{background:var(--paper2);color:var(--ink);border-color:var(--rule)}
  .cwin.soft .ck{color:var(--copper-d)}.cwin.soft h3{color:var(--ink)}.cwin.soft p{color:var(--muted)}
  .soonpill{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:7px 15px}

  /* The same hands: the closing room of the gallery, quieter than the art above it */
  .hands{padding:8px 0 20px;border-top:1px solid var(--rule);margin-top:64px}
  .hands .works-head{padding-top:56px}
  .hands .works-head p{max-width:62ch;margin:18px auto 0;color:var(--muted);font-size:15.5px;line-height:1.8}
  .hgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px}
  .hgrid .hshot{margin:0}
  /* the build reads left to right, then closes full width on the finished truck */
  .hgrid .hshot:nth-child(-n+4){grid-column:span 3}
  .hgrid .hshot:nth-child(5){grid-column:span 6}
  .hshot img{width:100%;height:250px;object-fit:cover;display:block;cursor:zoom-in;filter:saturate(.94)}
  .hgrid .hshot:nth-child(5) img{height:420px;object-position:center 60%}
  .hshot figcaption{font-size:12px;letter-spacing:.05em;color:var(--muted);padding-top:9px}
  .hnote{text-align:center;color:var(--muted);font-size:15px;margin-top:34px}
  .hnote a{color:var(--copper-d);border-bottom:1px solid var(--rule)}
  @media(max-width:760px){
    .hgrid{grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
    .hgrid .hshot:nth-child(n){grid-column:span 1}
    .hgrid .hshot:nth-child(5){grid-column:span 2}
    .hshot img{height:150px}
    .hgrid .hshot:nth-child(5) img{height:230px}
  }
  .cempty{text-align:center;color:var(--muted);padding:20px;font-size:15px}

  /* ============ THE GALLERY (shows & past work) ============ */
  .galwrap{padding:44px 0 20px}
  .galgrid{columns:3 320px;column-gap:26px;margin-top:8px}
  @media(max-width:640px){.galgrid{columns:1}}
  .galcard{break-inside:avoid;margin:0 0 26px;background:var(--paper2);border:1px solid var(--rule);padding:12px;box-shadow:0 22px 48px -30px rgba(45,32,20,.5);transition:transform .3s,box-shadow .3s}
  .galcard:hover{transform:translateY(-4px);box-shadow:0 32px 60px -30px rgba(45,32,20,.55)}
  .galcard img{width:100%;display:block}
  .galcard figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding:0 2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .galcard figcaption em{font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:0;font-size:19px;color:var(--ink)}

  /* ============ per-piece photo folder (lightbox nav) ============ */
  .scard .sdesc{font-size:13.5px;color:var(--ink2);font-weight:300;line-height:1.55;margin:2px 0 16px}
  .sfig{position:relative}
  .sfig .more{position:absolute;right:16px;bottom:6px;background:rgba(20,14,10,.72);color:var(--paper2);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:2px;display:inline-flex;align-items:center;gap:6px;pointer-events:none}
  .sfig .more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
  .lb .lbnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .2s}
  .lb.multi .lbnav{display:flex}
  .lb .lbnav:hover{background:rgba(255,255,255,.28)}
  .lb .lbprev{left:20px}.lb .lbnext{right:20px}
  .lb .lbcount{position:absolute;top:24px;left:50%;transform:translateX(-50%);color:rgba(244,240,232,.8);font-size:12px;letter-spacing:.14em;display:none}
  .lb.multi .lbcount{display:block}
  @media(max-width:640px){.lb .lbnav{width:44px;height:44px;font-size:22px}.lb .lbprev{left:8px}.lb .lbnext{right:8px}}

  /* gallery signature pieces (click a thumbnail to open its photo folder) */
  .galcard{position:relative}
  .galcard .pcount{position:absolute;right:20px;top:20px;background:rgba(20,14,10,.74);color:var(--paper2);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:2px;pointer-events:none;display:inline-flex;align-items:center;gap:6px}
  .galcard .pstatus{color:var(--copper-d)}
  .galcard .pmat{padding:8px 2px 2px;font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.5}

  .maker-copy .sig{margin-top:22px;font-family:var(--display);font-size:24px;color:var(--walnut);opacity:.9}