/* ==========================================================================
   Y4M sites, shared stylesheet (violin.yoga, musicians.yoga)
   Tokens, type and form controls are lifted from samuelwexler.com
   (Website Build/site/assets/css/style.css), so the three sites read as one
   person's work. Edit here; tools/build.py copies it into each site.
   ========================================================================== */

/* ---------- fonts, self hosted (same files and ranges as samuelwexler.com) ---------- */

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Karla';font-style:italic;font-weight:300 500;font-display:swap;
  src:url('../fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens (samuelwexler.com values, incl. its 14 Oct daylight text) ---------- */

:root{
  --canvas:#0A0D0B;
  --canvas-2:#0F1411;
  --panel:#151C17;
  --green-deep:#1A2A20;
  --accent:#C9A227;
  --accent-hover:#E2BA3C;
  --accent-muted:rgba(201,162,39,.20);
  --rust:#A9502C;
  --text-primary:#EFEAE0;
  --text-secondary:#AFBAA8;
  --rule:rgba(239,234,224,.12);
  --rule-strong:rgba(239,234,224,.24);
  --rule-ui:rgba(239,234,224,.42);

  --max:1180px;
  --gutter:clamp(16px,5vw,44px);
  --sec-pad:clamp(64px,9vw,128px);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,8,6,.95),0 3px 12px rgba(5,8,6,.78),0 10px 44px rgba(5,8,6,.8);
  /* Broad soft diagonal bands (samuelwexler.com): the textures below only show
     inside them, so they appear in passages rather than everywhere at once. */
  --ribbon:repeating-linear-gradient(104deg,
    transparent 0 70px,
    rgba(0,0,0,.55) 190px,
    #000 250px 330px,
    rgba(0,0,0,.5) 400px,
    transparent 520px 660px);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13.4M9.8 1.2 13.8 5l-4 3.8' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;background:var(--canvas)}
body{
  overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(201,162,39,.28);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--panel);padding:14px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* the fixed backdrop, at whisper level, as on samuelwexler.com */
.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 12% 8%,rgba(26,42,32,.55),transparent 62%),
    radial-gradient(ellipse 80% 55% at 92% 46%,rgba(17,25,38,.6),transparent 62%),
    radial-gradient(ellipse 70% 50% at 88% 82%,rgba(26,42,32,.4),transparent 60%),
    var(--canvas);
}
/* a slow gold glow drifting across the backdrop (74s), as on samuelwexler.com */
.env::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(201,162,39,.055),transparent 55%);
  animation:envdrift 74s var(--ease) -18s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-6%,3%,0) scale(1)}
  to{transform:translate3d(6%,-4%,0) scale(1.14)}
}
@media (prefers-reduced-motion:reduce){.env::after{animation:none}}

/* ---------- the quiet layer (samuelwexler.com's, at its strength) ----------
   The weave: a fine carbon-fibre twill (his gigging violin is carbon fibre),
   only on surfaces that already read as panels. The strand: quieter vertical
   hairlines, on backdrops only, never on a panel with the twill. Both show
   inside the ribbon bands, which drift as you scroll (--sheen, set by
   shared/js/site.js), so they catch the light like a woven surface you tilt.
   The grain gives the flat canvas its tooth, behind the content.
   Values match the website (Samuel, Oct 25: the same strength is fine; one step
   subtler read as static). Browsers round these alphas to whole 1/255 steps,
   so there is no "a tiny bit subtler" between the website's values and the
   next step down. Like the website, the twill sits on full-width bands, where
   the drifting ribbons read as light moving across a woven surface. */

.band{
  background:linear-gradient(180deg,rgba(26,42,32,.42),rgba(26,42,32,0)),var(--canvas-2);
  border-block:1px solid var(--rule);
}
.weave{position:relative}
.weave::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(198,210,214,.016) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(198,210,214,.010) 0 1px,transparent 1px 5px);
  background-size:10px 10px;
  /* Two mask layers: the drifting light bands, and a soft fade at the top and
     bottom of the panel so the texture never starts or stops on a hard line.
     The band tile is 2728px tall, not the website's 760px: the 104deg stripes
     only line up again every 660 / sin(14deg) = 2728px down the page, so a
     760px tile left a hard seam where a band was cut off mid-stripe. */
  -webkit-mask-image:var(--ribbon),linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 160px),transparent);
  mask-image:var(--ribbon),linear-gradient(to bottom,transparent,#000 160px,#000 calc(100% - 160px),transparent);
  -webkit-mask-size:100% 2728px,100% 100%;mask-size:100% 2728px,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-position:0 calc(var(--sheen,0px) * .6),0 0;mask-position:0 calc(var(--sheen,0px) * .6),0 0;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.weave > *{position:relative;z-index:1}

.strand{position:relative}
.strand::after{
  content:"";position:absolute;inset:7% 0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(93deg,rgba(198,210,214,.026) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(87deg,rgba(198,210,214,.015) 0 1px,transparent 1px 14px);
  -webkit-mask-image:var(--ribbon),linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:var(--ribbon),linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-size:100% 2728px,100% 100%;mask-size:100% 2728px,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-position:0 var(--sheen,0px),0 0;mask-position:0 var(--sheen,0px),0 0;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.strand > *{position:relative;z-index:1}

.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- layout and type ---------- */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
main > section{position:relative;padding-block:var(--sec-pad)}
p + p{margin-top:1.1em}
.measure{max-width:62ch}
.lede{font-size:clamp(18px,1.4vw,21px);color:var(--text-secondary);max-width:58ch}

h1,h2,h3{
  font-family:var(--display);font-weight:300;line-height:1.08;letter-spacing:-.015em;
  font-optical-sizing:auto;font-variation-settings:'SOFT' 24,'WONK' 1;text-wrap:balance;
}
h1{font-size:clamp(38px,6vw,76px);line-height:1.02}
h2{font-size:clamp(30px,4.2vw,52px);line-height:1.06}
h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15}
strong,b{font-weight:600}
em{font-style:italic}

.label{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,2.4vw,32px);
}
.label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--accent-muted),transparent)}

/* ---------- buttons and fields (samuelwexler.com .btn, .kit-form, .leave) ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;border:1px solid var(--rule-ui);color:var(--text-primary);
  transition:border-color .34s var(--ease),background-color .34s var(--ease),color .34s var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
/* The primary button: antique gold (Samuel, Oct 27: flat gold "reads more like yellow").
   A deep gold gradient, a pale gilded rim and a dark outer ring; on hover it brightens and a
   soft highlight sweeps across, like the sheen on the textures. Option B of the four in
   docs/notes/log/2026-10-27.md. */
.btn.primary{
  position:relative;overflow:hidden;
  border:1px solid rgba(236,210,140,.55);color:#14100A;font-weight:600;
  background:linear-gradient(180deg,#CFAE55 0%,#B8952F 50%,#8E7020 100%);
  box-shadow:0 0 0 1px rgba(10,13,11,.9),inset 0 1px 0 rgba(255,240,200,.35);
}
.btn.primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,246,214,.30) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s var(--ease-out);
}
.btn.primary:hover{background:linear-gradient(180deg,#DCBC64 0%,#C4A137 50%,#9A7A24 100%);border-color:rgba(242,222,160,.75);color:#14100A}
.btn.primary:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){.btn.primary::after{display:none}}
.btn.quiet{border-color:transparent;color:var(--text-secondary);padding-inline:10px}
.btn.quiet:hover{color:var(--text-primary)}
.btn[disabled]{opacity:.55;cursor:wait}

.field{
  width:100%;min-width:0;background:var(--canvas);border:1px solid var(--rule-ui);border-radius:0;
  color:var(--text-primary);font-family:var(--body);font-size:16px;font-weight:400;padding:14px 15px;
}
.field::placeholder{color:var(--text-secondary);opacity:.85}
.field:focus-visible{border-color:var(--accent);outline-offset:0}
@media (pointer:coarse){.btn,.field{min-height:50px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.fail{font-size:14.5px;color:#D98A63}

/* ---------- review marks: whose words are these? (review builds only) ---------- */

.review .w-his,.review .w-adapted,.review .w-draft,.review .w-ok{text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;text-decoration-skip-ink:none}
.review .w-his{text-decoration-color:rgba(201,162,39,.75);text-decoration-style:solid}
.review .w-adapted{text-decoration-color:rgba(201,162,39,.75);text-decoration-style:dotted;text-decoration-thickness:2px}
.review .w-draft{text-decoration-color:rgba(217,138,99,.8);text-decoration-style:dashed}
.review .w-ok{text-decoration-color:rgba(175,186,168,.55);text-decoration-style:solid;text-decoration-thickness:1px}
.review .w-draft::before{
  content:"draft";font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#D98A63;border:1px solid rgba(217,138,99,.55);padding:1px 5px;margin-inline-end:7px;
  vertical-align:.25em;background:var(--canvas);
}
.review.marks-off .w-his,.review.marks-off .w-adapted,.review.marks-off .w-draft,.review.marks-off .w-ok{text-decoration:none}
.review.marks-off .w-draft::before{content:none}
.review-key{
  position:fixed;left:12px;bottom:12px;z-index:90;display:flex;gap:12px;align-items:center;
  background:rgba(15,20,17,.94);border:1px solid var(--rule-strong);padding:8px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
}
.review-key i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-inline-end:6px}
.review-key .k-his i{background:rgba(201,162,39,.8)}
.review-key .k-adapted i{background:repeating-linear-gradient(90deg,rgba(201,162,39,.9) 0 2px,transparent 2px 4px)}
.review-key .k-draft i{background:repeating-linear-gradient(90deg,rgba(217,138,99,.9) 0 4px,transparent 4px 7px)}
.review-key .k-ok i{height:1px;background:rgba(175,186,168,.7)}
.review-key button{font:inherit;letter-spacing:inherit;color:var(--accent);text-transform:uppercase}
@media (max-width:520px){.review-key{left:8px;right:8px;bottom:8px;justify-content:space-between;gap:8px}}