/* Burl & Bowl — the evening workshop
   Ground: deep walnut under lamplight. Paper: shaving-cream tags, like the card
   tied to every finished piece. Metal: brass ferrule, patina steel.
   Type: Sorts Mill Goudy (Arts & Crafts era) + Alegreya Sans.
   Motion: the lathe — rings turn, bevels catch light, shavings curl.           */
:root{
  --ground:#1C120C;          /* deep walnut, the shop after dark   */
  --panel:#241710;           /* walnut panel                        */
  --oiled:#3A2517;           /* raised, oiled surface               */
  --heart:#8A5A33;           /* heartwood mid brown                 */
  --maple:#E8D7B8;           /* pale maple — text on walnut         */
  --maple-dim:#B49B76;       /* worn maple — secondary on walnut    */
  --shaving:#F2E7CF;         /* paper tag panels                    */
  --shaving-2:#E9DBBD;       /* tag edge                            */
  --ink:#2A1A10;             /* ink on paper                        */
  --ink-soft:#6A5138;        /* secondary ink on paper              */
  --brass:#C89B52;           /* brass ferrule                       */
  --brass-hi:#E7C27C;        /* brass catching lamplight            */
  --patina:#7FA08C;          /* patina steel on walnut              */
  --patina-ink:#3E5C4B;      /* patina on paper                     */
  --char:#0E0704;            /* charred shadow                      */
  --line-dark:#3A2A1D;       /* seam on walnut                      */
  --line-paper:#D5C4A1;      /* seam on paper                       */
  --maxw:1120px;
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.2' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.38 0 0 0 0 0.22 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.12' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--maple);background:var(--ground);
  font:400 17px/1.68 "Alegreya Sans",Seravek,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain-dark);background-size:600px 600px;opacity:.5}
img{max-width:100%;display:block}
a{color:var(--patina)}
::selection{background:var(--brass);color:var(--char)}
h1,h2,h3{font-family:"Sorts Mill Goudy","Hoefler Text",Georgia,serif;font-weight:400;
  line-height:1.12;text-wrap:balance;margin:0 0 .35em;letter-spacing:.005em}
h1{font-size:clamp(38px,6.2vw,66px)}
h2{font-size:clamp(30px,4vw,44px)}
h3{font-size:24px}
h1 em,h2 em{font-style:italic;color:var(--brass-hi)}
p{margin:.4em 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.on-paper{color:var(--ink)}
.on-paper a{color:var(--patina-ink)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(24,14,8,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-dark)}
.nav{display:flex;align-items:center;gap:26px;padding:15px 0}
.nav .logo img{height:36px;width:auto;
  filter:brightness(1.75) sepia(.25) saturate(.85)}
.nav nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav nav a{color:var(--maple-dim);text-decoration:none;font-weight:500;font-size:15.5px;
  letter-spacing:.02em;padding:6px 13px;position:relative}
.nav nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:1.5px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.nav nav a:hover{color:var(--maple)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav nav a.on{color:var(--maple)}
.nav nav a.on::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:min(86vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--char)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero .veil{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 70% at 68% 38%, rgba(14,7,4,0) 0%, rgba(14,7,4,.42) 78%),
    linear-gradient(to top, rgba(14,7,4,.94) 0%, rgba(14,7,4,.42) 46%, rgba(14,7,4,.10) 100%)}
.hero .inner{padding:70px 0 64px;width:100%}
.hero h1{color:var(--shaving);max-width:15ch;text-shadow:0 2px 24px rgba(14,7,4,.55)}
.hero p.lede{max-width:54ch;font-size:19px;color:var(--maple);text-shadow:0 1px 14px rgba(14,7,4,.6)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-rise{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.85,.25,1) forwards}
.hero-rise.d1{animation-delay:.08s}.hero-rise.d2{animation-delay:.22s}.hero-rise.d3{animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}
/* maker's mark roundel, slowly turning like stock on the lathe */
.mark{position:absolute;right:36px;bottom:34px;width:118px;height:118px;opacity:.9}
.mark svg{width:100%;height:100%;animation:turn 46s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

/* ---------- sections ---------- */
section.block{padding:84px 0}
section.block.tight{padding:56px 0}
.lead-note{max-width:58ch;font-size:18px;color:var(--maple-dim)}

/* live-edge seam between walnut and paper */
.liveedge{display:block;width:100%;height:34px;margin:0;color:var(--shaving)}
.liveedge.flip{transform:scaleY(-1)}
.paper{background:var(--shaving);position:relative}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain-paper);background-size:260px 260px;opacity:.5}
.paper > *{position:relative}

/* ---------- buttons: tools, not pills ----------
   Primary = brass-ferruled handle: bevel catches light, a shaving curls off.
   Secondary = a plane pass: fresh maple sweeps across under the blade.        */
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;
  font:600 15.5px/1 "Alegreya Sans",sans-serif;letter-spacing:.045em;
  padding:15px 28px;position:relative;border:0;border-radius:3px;
  transition:transform .16s cubic-bezier(.25,.9,.3,1), box-shadow .2s}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:2.5px solid var(--brass-hi);outline-offset:3px}

.btn-carve{background:linear-gradient(180deg,#9A6538 0%, #7C4E2A 55%, #6B3F20 100%);
  color:#F7EBD3;overflow:hidden;
  box-shadow:inset 3px 0 0 var(--brass), inset 0 1px 0 rgba(247,235,211,.35),
    inset 0 -2px 0 rgba(14,7,4,.35), 0 3px 10px rgba(14,7,4,.5)}
.btn-carve::before{content:"";position:absolute;top:0;bottom:0;width:46%;left:-60%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent, rgba(247,235,211,.34), transparent)}
.btn-carve:hover::before{animation:bevel .62s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes bevel{to{left:120%}}
.btn-carve::after{content:"";position:absolute;top:-13px;right:9px;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21c8-1 15-6 16-13 .6-3.8-2.6-5.5-5-3.5-2.1 1.8-1.4 5 .8 5.6 3.1.9 6-1.6 6.2-5' fill='none' stroke='%23E8D7B8' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:rotate(-40deg) scale(.4);transform-origin:bottom left;
  transition:opacity .28s .18s, transform .5s .18s cubic-bezier(.23,1,.32,1)}
.btn-carve:hover::after{opacity:1;transform:rotate(8deg) scale(1)}
.btn-carve:hover{box-shadow:inset 3px 0 0 var(--brass-hi), inset 0 1px 0 rgba(247,235,211,.5),
  inset 0 -2px 0 rgba(14,7,4,.35), 0 5px 16px rgba(14,7,4,.6)}
.btn-carve:active{box-shadow:inset 3px 0 0 var(--brass), inset 0 2px 6px rgba(14,7,4,.55)}

.btn-plane{background:transparent;color:var(--maple);overflow:hidden;
  border:1.5px solid rgba(232,215,184,.55)}
.btn-plane .lbl{position:relative;z-index:1;transition:color .28s .06s}
.btn-plane::before{content:"";position:absolute;inset:0;transform:translateX(-101%);
  background:
    repeating-linear-gradient(115deg, rgba(138,90,51,.16) 0 3px, transparent 3px 11px),
    var(--maple);
  transition:transform .42s cubic-bezier(.3,.8,.2,1)}
.btn-plane:hover::before{transform:none}
.btn-plane:hover .lbl{color:var(--ink)}
.btn-plane.dark{border-color:rgba(42,26,16,.55);color:var(--ink)}
.btn-plane.dark::before{background:
    repeating-linear-gradient(115deg, rgba(138,90,51,.2) 0 3px, transparent 3px 11px),
    var(--oiled)}
.btn-plane.dark:hover .lbl{color:var(--shaving)}
.btn.sm{padding:10px 18px;font-size:13.5px}

/* ---------- product cards: end-grain, each ring pattern seeded by SKU ------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:26px}
.pcard{cursor:pointer;background:var(--panel);border:1px solid var(--line-dark);border-radius:4px;
  overflow:hidden;box-shadow:0 4px 18px rgba(14,7,4,.45);
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s}
.pcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 16px 38px rgba(14,7,4,.65)}
.pcard:focus-visible{outline:2.5px solid var(--brass-hi);outline-offset:3px}
.pimg{aspect-ratio:1/0.92;position:relative;overflow:hidden;background:var(--oiled);
  display:flex;align-items:center;justify-content:center}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pimg img{transform:scale(1.045)}
.pimg svg.rings{width:88%;height:88%;transition:transform 1.4s cubic-bezier(.25,.6,.2,1)}
.pcard:hover .pimg svg.rings{transform:rotate(14deg)}
.tag{position:absolute;top:14px;left:-6px;background:var(--shaving);color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 14px 5px 18px;border-radius:0 3px 3px 0;
  box-shadow:2px 3px 8px rgba(14,7,4,.4)}
.tag::before{content:"";position:absolute;left:0;top:100%;border:6px solid transparent;
  border-top-color:#B49B76;border-left-width:0}
.tag.sold{background:#7B4434;color:var(--shaving)}
.tag.sold::before{border-top-color:#4A2418}
.tag.coming{background:var(--brass);color:var(--char)}
.tag.coming::before{border-top-color:#7E5C24}
.pcard .pad{padding:18px 20px 20px;border-top:1px solid var(--line-dark)}
.pcard .nm{font-family:"Sorts Mill Goudy",Georgia,serif;font-size:21px;color:var(--shaving)}
.pcard .meta{color:var(--maple-dim);font-size:14px;margin-top:2px}
.pcard .price{font-family:"Sorts Mill Goudy",Georgia,serif;font-size:20px;margin-top:10px;color:var(--brass-hi)}

/* ---------- filter chips as brand stamps ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 34px}
.chips button{border:1.5px solid rgba(232,215,184,.4);background:transparent;color:var(--maple-dim);
  border-radius:3px;padding:9px 20px;font:600 14px "Alegreya Sans",sans-serif;letter-spacing:.05em;
  cursor:pointer;transition:all .2s}
.chips button:hover{border-color:var(--brass);color:var(--maple)}
.chips button.on{background:var(--char);border-color:var(--char);color:var(--brass-hi);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.chips button:focus-visible{outline:2.5px solid var(--brass-hi);outline-offset:2px}

/* ---------- the making (process) ---------- */
.making{display:grid;gap:0;max-width:840px}
.mk{display:grid;grid-template-columns:88px 1fr;gap:26px;align-items:start;padding:26px 0;
  border-top:1px solid var(--line-dark)}
.mk:first-child{border-top:0}
.mk .ic{width:72px;height:72px;color:var(--heart)}
.mk .ic svg{width:100%;height:100%}
.mk h3{color:var(--ink);margin-bottom:.15em}
.mk p{color:var(--ink-soft);margin:0;max-width:58ch}
.mk:nth-child(even){grid-template-columns:1fr 88px}
.mk:nth-child(even) .ic{order:2;justify-self:end}
.mk:nth-child(even) div{text-align:right}
.mk:nth-child(even) p{margin-left:auto}

/* ---------- dialogs ---------- */
dialog{border:0;border-radius:6px;padding:0;max-width:580px;width:calc(100vw - 32px);
  background:var(--shaving);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.7);
  max-height:90dvh;overflow:auto}
dialog::backdrop{background:rgba(10,5,2,.72)}
dialog .pimg{aspect-ratio:16/10;background:var(--oiled)}
dialog .body{padding:24px 28px 30px}
dialog .body a{color:var(--patina-ink)}
dialog h3{font-size:28px;color:var(--ink)}
dialog .meta{color:var(--ink-soft);font-size:15px}
dialog .body a.btn-carve,.on-paper a.btn-carve{color:#F7EBD3}

/* ---------- brand page ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:16px}
.sw{border-radius:4px;overflow:hidden;border:1px solid var(--line-paper);background:#FBF4E3}
.sw .chipc{height:88px}
.sw .pad{padding:11px 15px;font-size:13.5px;color:var(--ink-soft)}
.sw b{display:block;font-size:15px;color:var(--ink)}
.type-spec{background:#FBF4E3;border:1px solid var(--line-paper);border-radius:4px;
  padding:20px 22px;margin:18px 0}
.bcard{background:#FBF4E3;border:1px solid var(--line-paper);border-radius:4px;overflow:hidden}
.bcard .pad{padding:18px 20px}

/* ---------- forms ---------- */
label.f{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin:18px 0 6px}
input,textarea,select{width:100%;background:#FBF5E6;border:1.5px solid var(--line-paper);
  border-radius:4px;padding:13px 15px;font:400 16.5px "Alegreya Sans",sans-serif;color:var(--ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--brass);outline-offset:1px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-dark);background:var(--char);margin-top:0}
footer.site .inner{display:flex;gap:26px;flex-wrap:wrap;align-items:center;padding:34px 0;
  font-size:14.5px;color:var(--maple-dim)}
footer.site img{height:26px;filter:brightness(1.75) sepia(.25) saturate(.85);opacity:.85}
footer.site .spacer{flex:1}
footer.site a{color:var(--maple-dim)}
footer.site a:hover{color:var(--maple)}

.empty{padding:64px 20px;text-align:center;color:var(--maple-dim);font-size:18px}
.empty b{color:var(--shaving);font-family:"Sorts Mill Goudy",Georgia,serif;font-size:22px}
.paper .empty{color:var(--ink-soft)}
.paper .empty b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:8px;padding:12px 0 10px}
  .nav nav{margin-left:0;width:100%;justify-content:space-between;gap:2px}
  .nav nav a{font-size:14px;padding:6px 8px}
  .nav .logo img{height:28px}
  section.block{padding:60px 0}
  .mark{width:86px;height:86px;right:20px;bottom:20px}
  .mk,.mk:nth-child(even){grid-template-columns:56px 1fr}
  .mk:nth-child(even) .ic{order:0;justify-self:start}
  .mk:nth-child(even) div{text-align:left}
  .mk:nth-child(even) p{margin-left:0}
  .mk .ic{width:48px;height:48px}
}