:root{
  --hessian:   #3a2a1c;
  --sack:      #6b4a2f;
  --card:      #bb8b56;
  --thread:    #e8d9b5;
  --felt-teal:  #2e8b84;
  --felt-slate: #3c5a7a;
  --felt-moss:  #5c7a46;
  --brass:     #e0a32e;
  --seam: 2.5px;
  --lift:
    inset 0 1px 0 rgba(255,236,200,.15),
    0 10px 0 -4px rgba(0,0,0,.42),
    0 20px 26px -12px rgba(0,0,0,.72),
    0 38px 54px -26px rgba(0,0,0,.6);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  --warp:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.6'/%3E%3C/svg%3E");
  --weft:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.6'/%3E%3C/svg%3E");
  --slub:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.3' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23f)' opacity='.42'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.45' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
  --fleck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.4' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.3'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  padding:clamp(1rem,5vw,4rem) 16px clamp(3rem,8vw,6rem);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.65;
  color:var(--thread);
  background-color:var(--hessian);
  background-image:
    radial-gradient(85% 65% at 28% 6%,
      rgba(255,198,112,.22), rgba(255,198,112,0) 72%),
    linear-gradient(104deg,
      rgba(0,0,0,0) 34%, rgba(255,226,180,.05) 46%,
      rgba(0,0,0,.09) 55%, rgba(0,0,0,0) 68%),
    radial-gradient(140% 115% at 50% 42%,
      rgba(0,0,0,0) 28%, rgba(0,0,0,.66) 100%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.26)        0 2px,
      rgba(255,236,200,.055) 2px 4px,
      rgba(0,0,0,.13)        4px 7px,
      rgba(255,236,200,.025) 7px 8px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22)        0 2px,
      rgba(255,236,200,.05)  2px 4px,
      rgba(0,0,0,.11)        4px 7px,
      rgba(255,236,200,.02)  7px 8px),
    var(--slub),
    var(--warp),
    var(--weft),
    var(--mottle);
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    auto, auto,
    360px 360px, 240px 240px, 240px 240px, 600px 600px;
  background-blend-mode:
    normal, normal, normal,
    normal, normal,
    soft-light, overlay, overlay, soft-light;
  background-attachment:fixed;
}
main{max-width:46rem;margin:0 auto}
.patch{
  position:relative;
  display:inline-block;
  --patch-r:14px;
  --seam-inset:10px;
  padding:clamp(1.5rem,5vw,2.6rem) clamp(1.6rem,4vw,2.8rem);
  background-color:#20112f;
  background-image:
    radial-gradient(95% 75% at 30% 16%, rgba(180,140,215,.16), rgba(180,140,215,0) 56%),
    radial-gradient(120% 120% at 60% 108%, rgba(0,0,0,.5), rgba(0,0,0,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='460' height='460' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,200px 200px,460px 460px;
  background-blend-mode:screen,multiply,soft-light,soft-light;
  border-radius:var(--patch-r);
  box-shadow:var(--lift), inset 0 2px 1px rgba(190,160,220,.2), inset 0 -6px 13px rgba(10,4,20,.6);
  transform:rotate(-.9deg);
}
.patch .seam{
  position:absolute;
  top:var(--seam-inset);
  left:var(--seam-inset);
  width:calc(100% - var(--seam-inset) * 2);
  height:calc(100% - var(--seam-inset) * 2);
  pointer-events:none;
  overflow:visible;
}
.seam rect{
  fill:none;stroke-linecap:round;
  rx:calc(var(--patch-r) - var(--seam-inset));
}
.seam .s-shadow{stroke:#090414;stroke-width:4.6;stroke-dasharray:9 7;opacity:.6;transform:translateY(1.5px)}
.seam .s-thread{stroke:#0c0618;stroke-width:3.3;stroke-dasharray:9 7}
.seam .s-light {stroke:#43335e;stroke-width:1;stroke-dasharray:9 7;opacity:.32;transform:translateY(-.9px)}
.seam .s-dip   {stroke:#040109;stroke-width:3.4;stroke-dasharray:2 5 2 7;opacity:.6}
.seam .sew-reveal{stroke-dashoffset:0}
h1{
  margin:0;
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 140;
  font-weight:800;
  font-size:var(--h1,clamp(2.6rem,12vw,5rem));
  line-height:.95;
  letter-spacing:-.02em;
  color:#1a0f29;
  text-shadow:
    0 1.5px 0 rgba(168,138,205,.3),
    0 2px 3px rgba(185,155,220,.16),
    0 -1px 1px rgba(0,0,0,.7),
    0 -2px 3px rgba(0,0,0,.4);
}
.patch--sub{--h1:clamp(1.8rem,6vw,2.9rem)}
.panels{
  display:grid;
  gap:clamp(1rem,3vw,1.6rem);
  margin:clamp(2.2rem,6vw,3.2rem) 0 0;
  padding:0;
  list-style:none;
}
.panel{
  position:relative;
  padding:1.4rem 1.5rem 1.5rem;
  color:#fdf6e6;
  background-image:var(--noise);
  background-blend-mode:soft-light;
  border:var(--seam) dashed rgba(255,255,255,.5);
  border-radius:10px;
  box-shadow:var(--lift);
}
.panel:nth-of-type(1){background-color:var(--felt-teal); transform:rotate(.5deg)}
.panel:nth-of-type(2){background-color:var(--felt-slate);transform:rotate(-.6deg)}
.panel:nth-of-type(3){background-color:var(--felt-moss); transform:rotate(.35deg)}
.panel h2{
  margin:0 0 .4rem;
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 48;
  font-weight:700;
  font-size:1.45rem;
  line-height:1.15;
}
.panel p{margin:.35rem 0;font-size:.97rem}
.panel p:last-child{margin-bottom:0}
.panel a:not(.tab){color:#fff6e2;text-decoration-thickness:2px;text-underline-offset:3px}
.panel a:not(.tab):focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;
  padding:.12rem .4rem;
  background:rgba(0,0,0,.26);
  border-radius:3px;
}
.tab{
  display:inline-block;
  margin-top:.85rem;
  padding:.5rem 1rem;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  color:#3a2a1c;
  background:#f0e2c0;
  border-radius:7px;
  outline:2px dashed rgba(58,42,28,.55);
  outline-offset:-5px;
  box-shadow:0 4px 0 -1px rgba(0,0,0,.3), 0 9px 14px -8px rgba(0,0,0,.7);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.tab:hover,.tab:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 7px 0 -1px rgba(0,0,0,.3), 0 14px 18px -9px rgba(0,0,0,.75);
}
.tab:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.tab + .tab{margin-left:.6rem}
.strip{
  margin:clamp(2.2rem,6vw,3.2rem) 0 0;
  padding:1.2rem 1.4rem 1.3rem;
  color:#2a1b0e;
  background-color:var(--card);
  background-image:
    radial-gradient(88% 78% at 32% 18%,
      rgba(255,243,214,.2), rgba(255,243,214,0) 72%),
    var(--fiber),
    var(--fleck),
    var(--mottle);
  background-size:100% 100%,200px 200px,300px 300px,600px 600px;
  background-blend-mode:normal,overlay,soft-light,soft-light;
  border-radius:8px;
  box-shadow:var(--lift);
  transform:rotate(.4deg);
}
.strip h2{
  margin:0 0 .5rem;
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 60;
  font-weight:700;font-size:1.3rem;line-height:1.15;color:#1f1409;
}
.strip p{margin:.25rem 0;font-size:.97rem}
.strip a{color:#5d2a16;text-decoration-thickness:2px;text-underline-offset:3px}
.strip a:focus-visible{outline:3px solid #5d2a16;outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
  .seam .sew-reveal{
    stroke-dashoffset:100;
    animation:sew 1.6s cubic-bezier(.45,.05,.25,1) .3s forwards;
  }
  @keyframes sew{to{stroke-dashoffset:0}}
}
@media (max-width:40rem){
  .patch,.panel,.strip{transform:none}
  .panel{padding:1.2rem 1.2rem 1.3rem}
  .ch{align-items:flex-start}
}

/* ============================================================
   COMMS-BAR-V1 — compact contact symbols that expand on click.
   Scoped under .comms so it never collides with the globals above.
   ============================================================ */
.comms{--c-mtx:#211d1a;--c-fed:#49394f;--c-bsky:#2178d4;--c-mail:#c2882a;--c-gh:#343b45;
  margin:clamp(2.2rem,6vw,3.2rem) 0 0;}
.comms .commbar{display:flex;gap:14px;flex-wrap:wrap}
.comms .chip{position:relative;width:60px;height:60px;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--c);background-image:var(--noise);background-blend-mode:soft-light;
  border:var(--seam) dashed rgba(255,255,255,.4);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,236,200,.15),0 7px 0 -3px rgba(0,0,0,.4),0 14px 20px -9px rgba(0,0,0,.7);
  transition:transform .15s cubic-bezier(.34,1.5,.64,1),box-shadow .15s ease;}
.comms .chip svg{width:30px;height:30px;display:block}
.comms .glyph{width:30px;height:30px;display:block;fill:none;stroke:#f3ead2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.comms .chip:hover,.comms .chip:focus-visible{transform:translateY(-4px);outline:none}
.comms .chip:focus-visible,.comms .chip[aria-expanded="true"]{box-shadow:inset 0 1px 0 rgba(255,236,200,.15),0 7px 0 -3px rgba(0,0,0,.4),0 14px 20px -9px rgba(0,0,0,.7),0 0 0 3px var(--brass)}
.comms .chip[aria-expanded="true"]{transform:translateY(-2px)}
.comms .chip::after{content:attr(data-name);position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-size:.72rem;white-space:nowrap;color:var(--thread);opacity:0;transition:opacity .15s ease;pointer-events:none;
  background:rgba(0,0,0,.45);padding:2px 8px;border-radius:5px;z-index:3}
.comms .chip:hover::after{opacity:1}
.comms .c-mtx{--c:var(--c-mtx)} .comms .c-fed{--c:var(--c-fed)} .comms .c-bsky{--c:var(--c-bsky)} .comms .c-mail{--c:var(--c-mail)} .comms .c-gh{--c:var(--c-gh)}
.comms .mtx{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:1.5rem;line-height:1;
  background:linear-gradient(95deg,#ff6b6b 0%,#ffa94d 18%,#ffe66d 34%,#8ce99a 52%,#63c7e0 70%,#748ffc 86%,#c08bf5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.comms .ic-bsky,.comms .ic-gh{fill:#fff;stroke:none}
.comms .detail{overflow:hidden;max-height:0;opacity:0;transition:max-height .28s ease,opacity .22s ease,margin .28s ease}
.comms .detail.open{max-height:340px;opacity:1;margin-top:16px}
.comms .detail-inner{padding:1.1rem 1.3rem;color:#fdf6e6;border-radius:12px;
  background-color:var(--c);background-image:var(--noise);background-blend-mode:soft-light;
  border:var(--seam) dashed rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,236,200,.15),0 7px 0 -3px rgba(0,0,0,.4),0 14px 20px -9px rgba(0,0,0,.7)}
.comms .detail-inner h3{margin:0 0 .3rem;font-family:Fraunces,Georgia,serif;font-size:1.2rem}
.comms .detail-inner p{margin:.3rem 0;font-size:.95rem}
.comms .detail-inner code{background:rgba(0,0,0,.3)}
.comms .detail-inner a.lnk{color:#fff6e2;text-decoration-thickness:2px;text-underline-offset:3px}
.comms .detail-inner .tab{outline:none;color:#2a1b0e;background:#f0e2c0;margin-top:.6rem;
  box-shadow:0 4px 0 -1px rgba(0,0,0,.3),0 8px 12px -6px rgba(0,0,0,.6)}

/* ============================================================
   MC-STONE-V1 — sandstone Minecraft plaque, scoped under .mcstone
   ============================================================ */
.mcstone{position:relative;max-width:25rem;margin:clamp(2.2rem,6vw,3.2rem) auto 0;
  --stone:#c6ac7c; --eng:#6a5330; --hi:rgba(255,246,222,.8); --sh:rgba(60,38,14,.66);}
/* coming-soon state: toggle by adding/removing "soon" on the .mcstone section */
.mcstone .soon-banner{display:none}
.mcstone.soon .slab{filter:grayscale(.92) brightness(.72)}
.mcstone.soon .btn{pointer-events:none;opacity:.8}
.mcstone.soon .soon-banner{display:block;position:absolute;left:50%;top:44%;z-index:5;
  transform:translate(-50%,-50%) rotate(-4deg);
  padding:.5rem 1.5rem;background:rgba(26,16,9,.86);
  border:2px solid rgba(232,214,176,.55);border-radius:3px;
  box-shadow:0 10px 24px rgba(0,0,0,.6);
  font-family:Cinzel,Georgia,serif;font-weight:700;font-size:1.15rem;letter-spacing:.16em;
  text-transform:uppercase;color:#ecdfc2;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.75);}
.mcstone .slab{position:relative;width:100%;padding:1.3rem 1.3rem 1.5rem;text-align:center;
  background-color:var(--stone);
  background-image:
    radial-gradient(120% 90% at 32% 12%, rgba(255,252,242,.3), rgba(255,252,242,0) 55%),
    radial-gradient(120% 120% at 70% 100%, rgba(30,24,16,.4), rgba(30,24,16,0) 55%),
    var(--noise), var(--mottle);
  background-size:100% 100%,100% 100%,220px 220px,520px 520px;
  background-blend-mode:screen,multiply,soft-light,soft-light;
  border-radius:7px;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.4), inset 2px 0 1px rgba(255,255,255,.16),
    inset 0 -4px 3px rgba(30,24,16,.5), inset -3px 0 3px rgba(30,24,16,.32),
    0 16px 0 -5px rgba(0,0,0,.4), 0 30px 44px -16px rgba(0,0,0,.72);}
.mcstone .slab::before{content:"";position:absolute;inset:13px;border-radius:3px;pointer-events:none;
  box-shadow:inset 2px 2px 1.5px rgba(30,24,16,.55), inset -2px -2px 1.5px rgba(255,255,255,.4);}
.mcstone .hero{width:128px;height:128px;image-rendering:pixelated;display:block;margin:0 auto .5rem;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));}
.mcstone .motto{font-family:Cinzel,"Trajan Pro",Georgia,serif;margin:.2rem auto;max-width:21rem;
  font-weight:600;font-size:.88rem;letter-spacing:.03em;line-height:1.5;color:var(--eng);
  text-shadow:0 1px 0 var(--hi),0 2px 2px var(--hi),0 -1px 1px var(--sh),0 -2px 3px var(--sh);}
.mcstone .plate{margin:1rem auto 0;padding:.75rem .85rem .85rem;max-width:21rem;border-radius:5px;
  background:rgba(0,0,0,.14);box-shadow:inset 0 2px 5px rgba(20,14,8,.4), inset 0 -1px 0 rgba(255,255,255,.14);}
.mcstone .row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.4rem 0;flex-wrap:wrap}
.mcstone .row .tag{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.8rem;letter-spacing:.06em;
  color:var(--eng);min-width:4.4rem;text-align:right;text-shadow:0 1px 0 var(--hi),0 -1px 1px var(--sh);}
.mcstone .row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:#2c2419;
  background:rgba(255,255,255,.22);padding:.12rem .45rem;border-radius:4px;box-shadow:inset 0 1px 2px rgba(20,14,8,.25)}
.mcstone .btn{cursor:pointer;border:1px solid rgba(20,14,8,.5);font-family:Cinzel,Georgia,serif;font-weight:600;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#e9ddc4;padding:.32rem .66rem;border-radius:3px;
  background:#39322a;box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  text-shadow:0 -1px 1px rgba(0,0,0,.6)}
.mcstone .btn:hover{background:#433a30}
.mcstone .btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.55)}
.mcstone .btn.copied{color:#9fe08a}