/* grit.css: design-system layer on top of the live CSS (mockup 2026-10-21 v2).
   Tokens + gritty accents borrowed from the header's distressed logo. */
:root{
  --g-accent:#9cdeeb;--g-accent-hi:#c7f3fa;--g-red:rgba(255,70,90,.38);--g-line:rgba(168,220,229,.18);--g-line-hi:rgba(168,220,229,.38);
  --g-panel:linear-gradient(135deg,rgba(21,38,43,.6),#05090a);--g-notch:10px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:112px;
  --t-label:11px;--t-body:16px;--t-lead:20px;--t-h3:clamp(26px,2.4vw,34px);--t-h2:clamp(40px,4.4vw,60px);
  --grain:url("/assets/images/bg-band-texture.webp");
}
/* 1. Section labels: chromatic glitch split, like the logo */
.micro-label,.x-eyebrow{position:relative;text-shadow:-1px 0 var(--g-red),1px 0 rgba(156,222,235,.45)}
.editorial-section-head .micro-label::before,.x-head .x-eyebrow::before{content:"";display:inline-block;width:28px;height:2px;margin-right:12px;vertical-align:middle;background:linear-gradient(90deg,var(--g-accent) 60%,transparent 60% 70%,var(--g-accent) 70% 82%,transparent 82%)}
/* 2. Headings: subtle distressed underline */
.editorial-section-head h2,.x-head h2{position:relative;padding-bottom:18px}
.editorial-section-head h2::after,.x-head h2::after{content:"";position:absolute;left:0;bottom:0;width:120px;height:3px;background:var(--g-accent);
  -webkit-mask:url("/assets/images/torn-edge-2.png") center/120px 3px;mask:url("/assets/images/torn-edge-2.png") center/120px 3px;opacity:.85}
/* 3. Buttons: notched corners + scanline sheen (same palette/labels as live) */
.btn,.nav-cta,.x-btn{clip-path:polygon(var(--g-notch) 0,100% 0,100% calc(100% - var(--g-notch)),calc(100% - var(--g-notch)) 100%,0 100%,0 var(--g-notch));position:relative;overflow:hidden}
.btn-primary::after,.x-btn::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px);pointer-events:none}
.btn-primary:hover{box-shadow:-2px 0 0 var(--g-red),2px 0 0 #c7f3fa}
/* 4. Cards: grain overlay, notched corner, glitch edge on hover */
.collection-card__art,.path-card,.desk-project,.x-card,.journal-pair>a,.x-unused{position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.path-card::before,.desk-project::before,.x-card::before,.x-unused-b::before,.journal-pair>a::before{content:"";position:absolute;inset:0;background:var(--grain) center/600px;mix-blend-mode:screen;opacity:.06;pointer-events:none}
.path-card:hover,.x-card:hover,.journal-pair>a:hover{box-shadow:inset 3px 0 0 var(--g-accent),inset -1px 0 0 var(--g-red)}
/* 5. Dividers: torn edge between every major section */
.x-tear{display:block;height:28px;background:#0b1114;-webkit-mask:url("/assets/images/torn-edge-1.png") center/100% 100%;mask:url("/assets/images/torn-edge-1.png") center/100% 100%;opacity:.9}
/* hide floating Reader Passport launcher (moved to footer) */
.passport-button{display:none!important}
/* 6. Writing desk: centered ornate rings */
.writing-desk .desk-heading{display:block;text-align:center;max-width:640px;margin:0 auto 50px}
.writing-desk .desk-intro{max-width:none;margin:18px auto 0}
.writing-desk .desk-projects{max-width:760px;margin-inline:auto;justify-items:center;text-align:center}
.writing-desk .desk-project{width:100%}
.writing-desk .desk-footer{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:8px}
/* 7. Shared components */
.x-section{padding-block:var(--s7)}.x-section--alt{background:#070b0d}
.x-head{margin-bottom:var(--s5)}.x-head h2{font:400 var(--t-h2)/1.05 var(--display,"Cormorant Garamond",serif);color:#edf1ed;margin:14px 0 0}.x-head h2 em{color:var(--g-accent-hi)}
.x-head p{color:#aab8bc;max-width:560px;margin-top:20px}
.x-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(4,minmax(0,1fr))}
.x-card{background:var(--g-panel);border:1px solid var(--g-line);display:flex;flex-direction:column}
.x-card__art{aspect-ratio:3/4;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 40%,rgba(156,222,235,.14),transparent 60%),#05090a;border-bottom:1px solid var(--g-line);position:relative}
.x-card__art img{max-height:100%;width:auto;box-shadow:0 20px 40px -18px #000}
.x-card__status{position:absolute;top:14px;left:14px;font:600 10px/1 var(--ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#c3e8eb;border:1px solid var(--g-line-hi);padding:6px 10px;background:#000a}
.x-card__body{padding:var(--s3);display:flex;flex-direction:column;gap:12px;flex:1}
.x-card__body h3{font:400 var(--t-h3)/1.1 var(--display,serif);color:#edf1ed;margin:0}
.x-card__body p{font-size:14px;line-height:1.7;color:#a8b8bd;margin:0}
.x-card__body .quiet-link{margin-top:auto}
.x-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;font-size:14px;margin:24px 0}.x-meta dt{color:#8fa4ab}
@media(max-width:1000px){.x-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-unused{grid-template-columns:1fr;padding:var(--s5) var(--s3)}}
@media(max-width:560px){.x-grid{grid-template-columns:1fr}.x-form .row{grid-template-columns:1fr}.x-section{padding-block:var(--s6)}.writing-desk .desk-projects{grid-template-columns:1fr}}
.writing-desk .desk-projects{max-width:1120px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.writing-desk .desk-projects{grid-template-columns:1fr;max-width:420px}}
.writing-desk>.wrap{grid-template-columns:1fr!important;justify-items:center;gap:40px}
.writing-desk .desk-projects{border-inline:0;padding-inline:0;width:100%}
.writing-desk .desk-heading,.writing-desk .desk-footer{width:100%}
/* Title plate for books whose cover isn't public yet */
.x-plate{width:72%;aspect-ratio:2/3;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:20px;border:1px solid var(--g-line-hi);background:radial-gradient(circle at 50% 30%,rgba(156,222,235,.16),transparent 60%),linear-gradient(160deg,#10222a,#020405);box-shadow:0 20px 40px -18px #000}
.x-plate img{width:46px;height:auto;opacity:.85;box-shadow:none}
.x-plate b{font:400 28px/1.05 var(--display,"Cormorant Garamond",serif);color:#edf1ed}
.x-plate small{font:600 9px/1.4 var(--ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#8fa4ab}
/* Kit signup */
.x-signup{position:relative;background:linear-gradient(135deg,#0e1d23,#04080a);border:1px solid var(--g-line-hi);padding:var(--s6) var(--s5);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s5);align-items:center;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.x-signup::before{content:"";position:absolute;inset:0;background:var(--grain) center/600px;mix-blend-mode:screen;opacity:.06;pointer-events:none}
.x-signup h2{font:400 var(--t-h2)/1.05 var(--display,"Cormorant Garamond",serif);color:#edf1ed;margin:14px 0}.x-signup h2 em{color:var(--g-accent-hi)}
.x-signup p{color:#aab8bc;margin:0}
.x-form{display:grid;gap:12px;position:relative}
.x-form label{font:600 10px/1 var(--ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#8fa4ab}
.x-form .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x-input{min-height:52px;padding:0 16px;background:#000;border:1px solid var(--g-line-hi);color:#edf1ed;font:inherit;font-size:16px;width:100%;border-radius:2px}
.x-input:focus{outline:2px solid var(--g-accent);outline-offset:1px}
.x-form .btn{justify-content:center;width:100%}
.x-fine{font-size:12px;color:#8fa4ab}
.x-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.footer .x-form{margin:18px 0;max-width:380px}.footer .x-form .row{grid-template-columns:1fr auto}.footer .x-form .btn{width:auto;min-height:52px}
@media(max-width:1000px){.x-signup{grid-template-columns:1fr;padding:var(--s5) var(--s3)}}
@media(max-width:560px){.x-form .row,.footer .x-form .row{grid-template-columns:1fr}.footer .x-form .btn{width:100%}}