/* Formada Studio — one stylesheet, no framework. Light first; dark via data-theme or prefers-color-scheme. */
:root{
  --bg:#f5f2ec; --bg2:#ece7de; --card:#e9e4da; --ink:#17181b; --ink2:#3a3a3d; --mute:#716c63; --line:#d8d2c6; --accent:#a6593f; --focus:#1f5f8b;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --max:1240px; --pad:clamp(18px,4vw,56px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#151412;--bg2:#1c1a17;--card:#211f1b;--ink:#ece7de;--ink2:#cfc9be;--mute:#9a948a;--line:#2f2c27;--accent:#d08a6d;--focus:#8ec3e6;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#151412;--bg2:#1c1a17;--card:#211f1b;--ink:#ece7de;--ink2:#cfc9be;--mute:#9a948a;--line:#2f2c27;--accent:#d08a6d;--focus:#8ec3e6;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);letter-spacing:-.005em;font-feature-settings:"ss01","cv11"}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0;font-variation-settings:"opsz" 96,"SOFT" 30}
h1{font-size:clamp(40px,6.4vw,84px)}
h2{font-size:clamp(28px,3.6vw,46px)}
h3{font-size:clamp(20px,2.2vw,26px)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mute{color:var(--mute)}
.small{font-size:13.5px}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* house bar — Formada · Workshop | Studio */
.house{background:var(--ink);color:var(--bg);font:500 11.5px/1 var(--mono);letter-spacing:.06em}
.house .wrap{display:flex;align-items:center;justify-content:space-between;height:32px}
.house a{opacity:.72}
.house a:hover{opacity:1;text-decoration:none}
.house .sep{opacity:.4;margin:0 10px}
.house .cur{opacity:1;border-bottom:1px solid currentColor;padding-bottom:2px}
.house .stg{font-size:10px;opacity:.6;letter-spacing:.14em}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font:500 15px/1 var(--mono);letter-spacing:.02em;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:none}
.brand b{font-weight:500}
.brand span{font-weight:400;opacity:.75}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:28px;font-size:14px}
.nav a{padding:6px 0;color:var(--ink2)}
.nav a[aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
.nav a:hover{text-decoration:none;color:var(--ink)}
.hdr .right{display:flex;align-items:center;gap:18px;font-size:14px}
.bag{display:inline-flex;align-items:center;gap:8px;padding:6px 0;color:var(--ink2)}
.bag .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border:1px solid var(--line);border-radius:999px;font:500 11px/1 var(--mono)}
.bag .n:empty{display:none}
.burger{display:none;background:none;border:0;padding:8px;margin:-8px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}
@media (max-width:820px){
  .nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px var(--pad) 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav a[aria-current]{border-bottom:1px solid var(--line)}
  .burger{display:block}
}

/* hero */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,56px)}
.hero h1{max-width:12ch}
.hero .lede{max-width:52ch;font-size:clamp(17px,1.6vw,20px);color:var(--ink2);margin:26px 0 0}
.hero .cta{margin-top:34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.figure{margin:0}
.figure img{width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--bg2)}
.figure figcaption{display:flex;justify-content:space-between;gap:16px;padding:10px 0 0;font:400 12px/1.5 var(--mono);color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:2px;cursor:pointer;font-size:14.5px;letter-spacing:.01em;transition:opacity .15s}
.btn:hover{text-decoration:none;opacity:.86}
.btn.ghost{background:transparent;color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{font-size:14.5px;border-bottom:1px solid var(--line);padding-bottom:2px}
.link:hover{text-decoration:none;border-color:var(--ink)}

/* sections */
.sec{padding:clamp(48px,7vw,104px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(24px,3vw,44px)}
.sec-head p{max-width:48ch;color:var(--mute);margin:10px 0 0}
.grid{display:grid;gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px);grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:26px 14px}}
.card{display:block;color:inherit}
.card:hover{text-decoration:none}
.card .ph{position:relative;background:var(--bg2);aspect-ratio:4/5;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.025)}
.card .ph .tag{position:absolute;left:10px;bottom:10px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--ink2);padding:6px 8px;border-radius:2px}
.card .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:14px}
.card .meta h3{font-size:19px}
.card .meta .price{font:400 14px/1 var(--mono);color:var(--ink2);white-space:nowrap}
.card .sub{margin:4px 0 0;color:var(--mute);font-size:13.5px}
.card.wide .ph{aspect-ratio:16/10}

/* statement band */
.band{background:var(--bg2)}
.band .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:center;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.band h2{font-size:clamp(26px,3.2vw,42px)}
.band p{color:var(--ink2);font-size:17px}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:8px}
.steps div{border-top:1px solid var(--line);padding-top:14px}
.steps b{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.steps p{font-size:14.5px;margin:0;color:var(--ink2)}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(24px,4.5vw,72px);padding-top:clamp(20px,3vw,44px)}
@media (max-width:900px){.pdp{grid-template-columns:1fr}}
.gal{display:grid;gap:14px}
.gal figure{margin:0;position:relative;background:var(--bg2)}
.gal img{width:100%;aspect-ratio:8/9;object-fit:cover}
.gal .stamp{position:absolute;left:12px;top:12px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--ink2);padding:6px 8px;border-radius:2px}
.gal .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gal .row img{aspect-ratio:1}
.buy{position:sticky;top:90px;align-self:start}
@media (max-width:900px){.buy{position:static}}
.buy .crumbs{font-size:13px;color:var(--mute);margin-bottom:22px}
.buy h1{font-size:clamp(36px,4.6vw,58px)}
.buy .tag{font-size:17px;color:var(--ink2);margin:10px 0 0}
.buy .price{font:400 22px/1 var(--mono);margin:22px 0 6px;display:flex;align-items:baseline;gap:12px}
.buy .price small{font-size:12px;color:var(--mute);letter-spacing:.04em}
.buy .lead{font-size:13.5px;color:var(--mute)}
.story{margin:26px 0 0;font-size:16.5px;color:var(--ink2)}

/* configurator */
.cfg{margin-top:30px;border-top:1px solid var(--line)}
.cfg fieldset{border:0;margin:0;padding:18px 0;border-bottom:1px solid var(--line)}
.cfg legend{padding:0;width:100%;display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:12px}
.cfg legend .val{color:var(--mute);font:400 12.5px/1.4 var(--mono)}
.sw{display:flex;flex-wrap:wrap;gap:10px}
.sw label{position:relative;cursor:pointer}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw .chip{display:block;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);box-shadow:inset 0 0 0 3px var(--bg);transition:box-shadow .12s}
.sw .chip.tr{background-image:linear-gradient(135deg,transparent 46%,rgba(255,255,255,.55) 50%,transparent 54%)}
.sw input:checked + .chip{box-shadow:inset 0 0 0 3px var(--bg),0 0 0 1.5px var(--ink)}
.sw input:focus-visible + .chip{outline:2px solid var(--focus);outline-offset:3px}
.sw .dot{position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.pill{display:flex;flex-wrap:wrap;gap:8px}
.pill label{position:relative}
.pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pill .p{display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;cursor:pointer;background:transparent}
.pill input:checked + .p{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.pill input:focus-visible + .p{outline:2px solid var(--focus);outline-offset:3px}
.eng{display:grid;gap:10px}
.eng .tog{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.eng .tog input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.eng input[type=text]{width:100%;padding:11px 12px;border:1px solid var(--line);background:transparent;border-radius:2px;font:400 15px/1.3 var(--mono);color:var(--ink);letter-spacing:.04em}
.eng .cnt{font:400 11.5px/1 var(--mono);color:var(--mute);text-align:right}
.cfg .note{font-size:12.5px;color:var(--mute);margin:8px 0 0}
.preview{display:flex;align-items:center;gap:14px;padding:14px 0 0;font-size:13px;color:var(--mute)}
.preview .big{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);flex:none}
.preview .ring{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:6px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.actions{display:grid;gap:10px;padding:20px 0 6px}
.actions .btn{width:100%;padding:16px}
.actions .fine{font-size:12.5px;color:var(--mute);text-align:center;margin:0}
.added{font-size:13.5px;color:var(--ink2);text-align:center;min-height:1.4em}

/* spec + sections */
.spec{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;font-size:14.5px}
.spec dt{color:var(--mute)}
.spec dd{margin:0;color:var(--ink2)}
@media (max-width:480px){.spec{grid-template-columns:1fr;gap:2px}.spec dd{margin-bottom:10px}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.two h2{margin-bottom:18px}
.dn{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.38;color:var(--ink2);font-variation-settings:"opsz" 24,"SOFT" 50}
.dn + .sig{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:18px}
.prose{max-width:66ch;font-size:16.5px;color:var(--ink2)}
.prose h2{margin:0 0 18px}
.prose h3{margin:32px 0 10px}
.prose ul{padding-left:1.1em}
.prose li{margin:6px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px}
.prose td,.prose th{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:500;color:var(--mute)}

/* reserve page */
.lines{display:grid;gap:14px}
.line{display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.line img{width:88px;aspect-ratio:1;object-fit:cover;background:var(--bg2)}
.line h3{font-size:19px}
.line .opts{font:400 12.5px/1.7 var(--mono);color:var(--mute);margin:4px 0 0}
.line .rm{background:none;border:0;padding:4px;color:var(--mute);cursor:pointer;font-size:13px;text-decoration:underline}
.line .p{font:400 15px/1 var(--mono);white-space:nowrap}
.form{display:grid;gap:14px;max-width:520px}
.form label{display:grid;gap:6px;font-size:13.5px;color:var(--mute)}
.form input,.form textarea{padding:12px;border:1px solid var(--line);background:transparent;border-radius:2px;font:inherit;color:var(--ink)}
.form textarea{min-height:88px;resize:vertical}
.total{display:flex;justify-content:space-between;font:400 16px/1 var(--mono);padding:18px 0}
.empty{padding:40px 0;color:var(--mute)}
.ok{border:1px solid var(--line);padding:20px;font-size:15px}

/* footer */
.ftr{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,96px);padding:clamp(32px,4vw,56px) 0 40px;font-size:13.5px;color:var(--mute)}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:820px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ftr .cols{grid-template-columns:1fr}}
.ftr h4{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{color:var(--ink2)}
.ftr .brand{margin-bottom:14px}
.ftr .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font:400 11.5px/1.6 var(--mono)}
.theme{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font:400 11.5px/1 var(--mono);cursor:pointer;color:var(--ink2)}
.theme:hover{border-color:var(--ink)}

/* misc */
.notice{border:1px solid var(--line);padding:14px 16px;font-size:13.5px;color:var(--ink2);display:flex;gap:12px;align-items:start;margin:0 0 22px}
.notice i{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:1px solid var(--line);border-radius:2px;color:var(--mute);white-space:nowrap;margin-top:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------------------ motion
   2026-09-17 (John: "doing animation and all the fancy stuff to make it high end").
   The reference sites — Apparatus, Roll & Hill, &Tradition — are restrained: few
   moves, slow, and they settle rather than arrive. So: one reveal per element,
   long easing, no bounce, no library. Everything below is inside a
   prefers-reduced-motion guard, and nothing animates layout (only transform and
   opacity) so there is no CLS and no main-thread jank.                        */
@media (prefers-reduced-motion:no-preference){
  /* reveal on scroll — JS adds .seen once, then the element is left alone */
  .rv{opacity:0;transform:translate3d(0,18px,0);
      transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
      transition-delay:calc(var(--i,0)*90ms);will-change:opacity,transform}
  .rv.seen{opacity:1;transform:none}
  /* an image reveals by settling out of a slow zoom, the way a photo print does */
  .rv-img{clip-path:inset(0 0 0 0)}
  .rv-img img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .rv-img.seen img{transform:scale(1)}
  /* the hero holds a beat: image first, then the words */
  .hero .rv{transition-delay:calc(160ms + var(--i,0)*110ms)}
  /* page-to-page fade. Old browsers ignore both rules and simply hard-cut. */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fs-out .18s ease both}
  ::view-transition-new(root){animation:fs-in .34s ease both}
  @keyframes fs-out{to{opacity:0}}
  @keyframes fs-in{from{opacity:0}}
  /* the lit hero glows very slightly, as a lamp warming up would */
  .figure.lit img{animation:fs-warm 9s ease-in-out infinite alternate}
  @keyframes fs-warm{from{filter:brightness(1)}to{filter:brightness(1.045)}}
}
/* no-JS and reduced-motion must both still show everything */
.no-js .rv,html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.rv-img img{transform:none}}

/* sticky buy bar — phones only, appears once the real price has scrolled away */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:14px;align-items:center;
        padding:12px var(--pad);background:color-mix(in srgb,var(--bg) 94%,transparent);
        backdrop-filter:blur(10px);border-top:1px solid var(--line);
        transform:translate3d(0,110%,0);transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.buybar.up{transform:none}
.buybar .bb-name{font-size:14px;line-height:1.25;flex:1;min-width:0}
.buybar .bb-name b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .bb-name span{font:400 12.5px/1 var(--mono);color:var(--mute)}
.buybar .btn{padding:12px 18px;white-space:nowrap}
@media (max-width:760px){.buybar{display:flex}}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* lit / unlit switch on the lead image (2026-09-17). Sits on the photo, bottom-left,
   because that is where the eye already is after the image settles. */
.lead-fig{position:relative}
.litsw{position:absolute;left:12px;bottom:12px;display:inline-flex;gap:2px;padding:3px;border-radius:2px;
       background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);
       border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.litsw button{appearance:none;border:0;background:none;cursor:pointer;padding:7px 13px;border-radius:2px;
              font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
              transition:background .18s,color .18s}
.litsw button.on{background:var(--ink);color:var(--bg)}
.litsw button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.litsw button{transition:none}}

/* Both states of the lead image must occupy exactly the same box, or the page jumps
   when you press Unlit (the two photographs are not the same aspect ratio). */
.lead-fig{aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.lead-fig img{width:100%;height:100%;object-fit:cover;display:block}