/* abc1234.info — "Thước chữ": drafting studio. Vellum sheets, graphite ink, translucent amber lettering template,
   section-callout bubbles, ISO title blocks, crash demo on a green self-healing cutting mat. */
:root{
 --vellum:#E9ECE5;--vellum-2:#DFE3DA;--sheet:#FAFAF5;--ink:#1B1F23;--lead:#525A61;--hair:rgba(27,31,35,.14);--hair-2:rgba(27,31,35,.28);
 --amber:#F08A24;--amber-t:rgba(240,138,36,.58);--amber-w:#FBE3C6;--red:#B8341B;--blue:#2E5A9E;--nonphoto:#9BB9DF;
 --mat:#1F3D35;--mat-d:#152C26;--mat-line:rgba(232,227,196,.2);--mat-y:#E4C552;
 --fd:"Saira Stencil One","Encode Sans",system-ui,sans-serif;--fh:"Encode Sans",system-ui,sans-serif;--fb:"Encode Sans",system-ui,sans-serif;--fm:"Victor Mono",ui-monospace,monospace;
 /* game-runtime tokens */
 --primary:var(--amber);--primary-contrast:var(--ink);--accent:var(--mat-y);--surface:var(--sheet);--surface-2:var(--vellum);--text:var(--ink);--heading:var(--ink);--muted:var(--lead);--border:var(--hair-2);--font-head:var(--fd);--font-body:var(--fb);
 --gut:16px;--max:1240px;
 color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--vellum);color:var(--ink);font:400 17px/1.7 var(--fb);font-stretch:100%;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:768px){:root{--gut:28px}}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--sheet);padding:12px 18px;font:700 16px/1 var(--fb);text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--fh);font-stretch:118%;color:var(--ink);text-wrap:balance}
h1{font-weight:760;font-size:clamp(30px,6.6vw,56px);line-height:1.04;letter-spacing:-.018em;margin:0 0 18px}
h3{font-weight:700;font-size:19px;line-height:1.3;margin:28px 0 8px;font-stretch:108%}
p{margin:0 0 1em}
strong{font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 22px;border:2px solid var(--ink);font:700 16px/1.15 var(--fh);font-stretch:112%;letter-spacing:.005em;text-decoration:none;color:var(--ink);background:transparent;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn:hover{color:var(--ink);transform:translateY(-1px)}
.btn-amber{background:var(--amber)}
.btn-amber:hover{background:#F6A04A}
.btn-line{background:var(--sheet)}
.btn-line:hover{background:var(--amber-w)}
.btn-ink{background:var(--ink);color:var(--sheet)}
.btn-ink:hover{background:#2C3238;color:var(--sheet)}

/* ---------- title-block header ---------- */
.tb{position:relative;z-index:30;background:var(--sheet);border-bottom:2px solid var(--ink)}
.tb-row{display:flex;align-items:stretch;min-height:64px}
.tb-brand{flex:1 1 auto;display:flex;align-items:center;padding:8px 14px 8px 0;border-right:1.5px solid var(--ink);min-width:0}
.brand{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1}
.brand .wm{font:400 30px/1 var(--fd);letter-spacing:.02em}
.brand-tag{font:500 12.5px/1.2 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:4px}
.brand:hover{color:var(--ink)}
.menu-btn{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:64px;min-width:64px;padding:0 14px;margin:0;border:0;background:var(--sheet);color:var(--ink);font:600 15px/1 var(--fm);cursor:pointer}
.menu-btn:hover{background:var(--amber-w)}
.mb-ic{display:grid;gap:5px;width:22px}
.mb-ic i{display:block;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.mb-ic i:nth-child(2){width:14px}
.tb.is-open .mb-ic i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tb.is-open .mb-ic i:nth-child(2){opacity:0}
.tb.is-open .mb-ic i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tb-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sheet);border-bottom:2px solid var(--ink);box-shadow:0 18px 30px -18px rgba(27,31,35,.45)}
.tb.is-open .tb-nav{display:block}
.tb-nav ol{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:var(--max)}
.tb-nav li{border-top:1px solid var(--hair)}
.tb-nav a{display:grid;grid-template-columns:48px 1fr;align-items:center;min-height:54px;text-decoration:none;color:var(--ink);font:650 17px/1.25 var(--fh);font-stretch:110%}
.tb-nav .z{font:600 13px/1 var(--fm);color:var(--red)}
.tb-nav a[aria-current]{background:linear-gradient(90deg,var(--amber-w),transparent 70%)}
.tb-nav a[aria-current] .nl{box-shadow:inset 0 -3px 0 var(--amber)}
.tb-nav a:hover{color:var(--red)}
.tb-cta{display:none}
.tb-lang{display:flex;align-items:center;padding:0 10px;border-right:1.5px solid var(--ink)}
.lang{display:flex;gap:4px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:600 14px/1 var(--fm);text-decoration:none;border:1px solid var(--hair-2)}
.lang a[aria-current]{background:var(--ink);color:var(--sheet)}
@media (min-width:600px){
 .tb-cta{display:flex;align-items:center;padding:0 16px;border-right:1.5px solid var(--ink);order:3;text-decoration:none;font:700 15px/1.2 var(--fh);font-stretch:112%;background:var(--amber);color:var(--ink)}
 .tb-cta:hover{background:#F6A04A;color:var(--ink)}
 .tb-row{padding-right:0}
 .menu-btn{order:4}
}
@media (min-width:980px){
 .menu-btn{display:none}
 .tb-brand{flex:0 0 auto;padding-right:22px}
 .tb-nav{display:block;position:static;flex:1 1 auto;border:0;box-shadow:none;background:none;min-width:0}
 .tb-nav ol{display:flex;height:100%;padding:0;max-width:none}
 .tb-nav li{flex:1 1 0;border:0;border-right:1px solid var(--hair-2);min-width:0}
 .tb-nav a{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:10px 12px;font-size:14.5px;line-height:1.15;font-stretch:104%}
 .tb-nav a[aria-current]{background:var(--amber-w);box-shadow:inset 0 -4px 0 var(--amber)}
 .tb-nav a[aria-current] .nl{box-shadow:none}
 .tb-nav .z{font-size:12px}
 .tb-cta{border-right:0;border-left:1.5px solid var(--ink);margin-right:calc(-1 * var(--gut));padding:0 var(--gut) 0 20px}
}
@media (min-width:980px) and (max-width:1199px){.tb-cta{display:none}}

/* ---------- lettering template (stencil strip) ---------- */
.stencil{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;max-width:100%;padding:12px 44px 18px 20px;border-radius:12px;
 background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 38%),var(--amber-t);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,56,0,.35),0 14px 22px -16px rgba(110,50,0,.7);transform:rotate(-2.2deg);transform-origin:left bottom;margin:4px 0 22px}
.st-row{display:flex;gap:.08em;font:400 clamp(40px,11.5vw,66px)/1 var(--fd);color:var(--vellum);letter-spacing:0}
.st-row span{text-shadow:0 -1.5px 0 rgba(96,42,0,.45),0 1px 0 rgba(255,255,255,.55)}
.st-holes{position:absolute;right:14px;top:50%;display:flex;flex-direction:column;gap:9px;transform:translateY(-68%)}
.st-holes i+i{display:none!important}
.st-holes i{display:block;width:15px;height:15px;border-radius:50%;background:var(--vellum);box-shadow:inset 0 2px 1px rgba(96,42,0,.5),0 0 0 3px rgba(255,255,255,.25)}
.st-ticks{display:block;align-self:stretch;height:9px;margin-top:6px;
 background:repeating-linear-gradient(90deg,rgba(80,36,0,.6) 0 1px,transparent 1px 7px) 0 100%/100% 5px no-repeat,
  repeating-linear-gradient(90deg,rgba(80,36,0,.75) 0 1px,transparent 1px 35px) 0 100%/100% 9px no-repeat}
.stencil-sm{transform:rotate(-1.5deg);margin:0 0 16px;padding:8px 32px 12px 14px}
.stencil-sm .st-holes{right:10px;gap:6px}
.stencil-sm .st-row{font-size:clamp(30px,8vw,40px);color:var(--sheet)}
.stencil-sm .st-holes i{width:9px;height:9px;background:var(--sheet)}

/* ---------- home hero: drawing sheet ---------- */
.hero{padding:18px 0 36px;background:
 linear-gradient(var(--hair) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/24px 24px,var(--vellum)}
.hero-sheet{position:relative;background:var(--sheet);border:1px solid var(--ink);box-shadow:inset 0 0 0 6px var(--sheet),inset 0 0 0 8px var(--ink);padding:42px 16px 22px;max-width:calc(var(--max) - 2 * var(--gut));width:calc(100% - 20px)}
.hero-sheet .zr{left:8px;right:8px;top:8px}
.zr{position:absolute;left:10px;right:10px;top:10px;height:24px;display:flex;border-bottom:1px solid var(--ink)}
.zr span{flex:1;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--fm);color:var(--lead);border-left:1px solid var(--hair-2)}
.zr span:first-child{border-left:0}
.hero-grid{display:grid;gap:0;padding-top:12px}
.hero-copy{min-width:0}
@media (max-width:1023px){.hero-copy{display:contents}.hero-grid>.mat,.hero-grid .mat{order:4;margin:6px 0 26px}.hero-copy .lead{order:5}.hero-copy .acts{order:6}.hero-copy .chips{order:7}.hero-copy .stencil{justify-self:start}}
.badge{display:inline-block;margin:0 0 14px;font:500 14px/1.4 var(--fm);color:var(--red);letter-spacing:.02em}
.lead{font-size:18.5px;line-height:1.65;color:#2E343A;max-width:60ch}
.lead p:last-child{margin-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 20px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 22px}
.chips li{position:relative;padding:0 10px 6px;font:500 16px/1.3 var(--fm);color:var(--ink)}
.chips li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-inline:1px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 1px no-repeat}
.steps{list-style:none;margin:30px 0 0;padding:22px 0 0;display:grid;gap:16px;border-top:1.5px dashed var(--ink)}
.steps li{display:flex;align-items:center;gap:14px;font-size:16.5px;line-height:1.45}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}.hero-sheet{padding:50px 36px 30px;width:calc(100% - 2 * var(--gut))}.hero-sheet .zr{left:10px;right:10px;top:10px}}
@media (min-width:1024px){
 .hero{padding:28px 0 48px}
 .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);gap:44px;align-items:start}
 .hero-copy{padding-top:10px}
}

/* ---------- callout bubble ---------- */
.co{flex:none;display:inline-grid;grid-template-rows:1fr 1fr;width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;background:var(--sheet);overflow:hidden;font:600 13px/1 var(--fm);text-align:center;letter-spacing:0}
.co b{display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-weight:700;border-bottom:1.5px solid var(--ink);color:var(--ink)}
.co i{display:flex;align-items:flex-start;justify-content:center;padding-top:3px;font-style:normal;color:var(--red)}

/* ---------- cutting mat (game) ---------- */
.mat{position:relative;container-type:inline-size;min-width:0;background:
 linear-gradient(var(--mat-line) 1px,transparent 1px) 0 0/50px 50px,linear-gradient(90deg,var(--mat-line) 1px,transparent 1px) 0 0/50px 50px,
 linear-gradient(rgba(232,227,196,.07) 1px,transparent 1px) 0 0/10px 10px,linear-gradient(90deg,rgba(232,227,196,.07) 1px,transparent 1px) 0 0/10px 10px,var(--mat);
 color:#F3F1E4;border-radius:14px;box-shadow:0 0 0 1px var(--mat-d),0 22px 40px -26px rgba(10,30,24,.8);overflow:hidden;scroll-margin-top:12px}
.mat::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 70px,rgba(228,197,82,.08) 70px 71px);pointer-events:none}
.mat .fcurve{position:absolute;right:-26px;top:34px;width:170px;height:auto;opacity:.32;pointer-events:none;transform:rotate(-8deg)}
.mat .fcurve path{fill:var(--amber-t);stroke:rgba(255,220,170,.5);stroke-width:1;fill-rule:evenodd}
.mat-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px 16px;
 background:repeating-linear-gradient(90deg,rgba(243,241,228,.55) 0 1px,transparent 1px 10px) 14px 100%/calc(100% - 28px) 6px no-repeat,repeating-linear-gradient(90deg,rgba(243,241,228,.8) 0 1px,transparent 1px 50px) 14px 100%/calc(100% - 28px) 11px no-repeat;border-bottom:1px solid var(--mat-line)}
.mh-t{font:600 14px/1.2 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mat-y)}
.mh-b{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;border:1.5px solid var(--mat-y);border-radius:14px;font:700 13px/1 var(--fm);color:var(--mat-y)}
.mat-body{position:relative;z-index:1}

/* ---------- inner page head ---------- */
.phead{padding:16px 0 0;background:
 linear-gradient(var(--hair) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/24px 24px,var(--vellum)}
.phead-sheet{position:relative;background:var(--sheet);border:1px solid var(--ink);border-bottom:0;padding:14px 18px 28px;max-width:calc(var(--max) - 2 * var(--gut));width:calc(100% - 20px);overflow:hidden}
.crumbs ol{list-style:none;margin:0 0 22px;padding:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 0;border-bottom:1px solid var(--hair-2);font:500 15px/1.4 var(--fm)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 10px;color:var(--red)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--lead)}
.crumbs [aria-current]{color:var(--ink)}
.phead-grid{display:grid;gap:20px;align-items:center}
.phead .sq{display:none}
.sq-b{fill:var(--amber-t);stroke:rgba(120,56,0,.55);stroke-width:1.2;fill-rule:evenodd}
.sq-t{stroke:rgba(70,30,0,.7);stroke-width:1;fill:none}
.sq-h{fill:var(--sheet);stroke:rgba(120,56,0,.55)}
.sq-c{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 7}
@media (min-width:900px){
 .phead-sheet{padding:22px 40px 44px}
 .phead-grid{grid-template-columns:minmax(0,1fr) 250px;gap:40px}
 .phead .sq{display:block;width:250px;height:auto;transform:rotate(-7deg);filter:drop-shadow(0 12px 12px rgba(110,50,0,.25))}
}
@media (prefers-reduced-motion:no-preference){
 .phead .sq-c{animation:dash 14s linear infinite}
 @keyframes dash{to{stroke-dashoffset:-160}}
}
.nf-code{font:400 clamp(70px,20vw,140px)/1 var(--fd);color:var(--amber);margin:10px 0}

/* ---------- body + article ---------- */
.body-grid{display:flex;flex-direction:column;gap:28px;padding-top:28px;padding-bottom:56px;background:var(--sheet);max-width:calc(var(--max) - 2 * var(--gut));width:calc(100% - 20px);border:1px solid var(--ink);border-top:0;padding-inline:18px}
.page-home .body-grid{border-top:1px solid var(--ink);margin-top:0}
.side{display:contents}
.toc{order:-1}
.doc{min-width:0}
.tag{order:2}
@media (min-width:900px){.body-grid{padding-inline:40px}}
@media (min-width:1100px){
 .body-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;padding-top:44px}
 .side{display:flex;flex-direction:column;gap:22px;position:sticky;top:16px;align-self:start}
 .body-grid.is-legal{grid-template-columns:minmax(0,1fr) 280px}
}
.doc{max-width:74ch}
.doc>.intro-rest,.doc>.sec-plain{margin-bottom:12px}
.sec{padding-top:34px;margin-top:10px}
.sec+.sec,.intro-rest+.sec{border-top:1px solid var(--hair-2)}
.doc>.sec:first-child{padding-top:4px;margin-top:0}
.doc h2,.set-t,.notes h2{display:flex;align-items:center;gap:16px;font-weight:740;font-size:clamp(23px,3.3vw,31px);line-height:1.15;letter-spacing:-.01em;margin:0 0 18px;scroll-margin-top:16px}
.doc h2 .h2t{min-width:0}
.doc ul,.doc ol{padding-left:1.35em;margin:0 0 1.2em}
.doc li{margin:0 0 .55em;padding-left:.2em}
.doc ul li::marker{content:"▪  ";color:var(--amber);font-size:.9em}
.doc ol li::marker{font:600 .9em var(--fm);color:var(--red)}
.doc a{font-weight:600}
.doc table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.4em;font-size:16px}
.doc th,.doc td{border:1px solid var(--hair-2);padding:9px 12px;text-align:left;vertical-align:top}
.doc th{font:600 14px/1.3 var(--fm);background:var(--vellum);letter-spacing:.02em}
.doc blockquote{margin:0 0 1.2em;padding:6px 0 6px 18px;border-left:3px solid var(--amber)}

/* FAQ = general notes */
.notes{padding-top:34px;margin-top:10px;border-top:1.5px solid var(--ink)}
.notes-list{border-top:1px solid var(--hair-2)}
.notes details{border-bottom:1px solid var(--hair-2)}
.notes summary{display:grid;grid-template-columns:42px minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:56px;padding:10px 0;cursor:pointer;list-style:none;font:650 17px/1.4 var(--fh);font-stretch:104%}
.notes summary::-webkit-details-marker{display:none}
.nn{font:600 14px/1 var(--fm);color:var(--red)}
.pm{position:relative;width:22px;height:22px;justify-self:end;border:1.5px solid var(--ink);border-radius:50%}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
details[open]>summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details[open]>summary .pm{background:var(--amber)}
.notes summary:hover .nq{color:var(--red)}
.na{padding:0 36px 14px 50px}
.na p:last-child{margin-bottom:0}

.cta-strip{margin-top:40px;padding:22px 22px;border:2px solid var(--ink);background:linear-gradient(115deg,rgba(255,255,255,.35),transparent 50%),var(--amber-t);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.cta-strip p{margin:0;flex:1 1 260px;font:600 18px/1.45 var(--fh);font-stretch:104%}

/* side: drawing index + hang tag */
.toc{border:1.5px solid var(--ink);background:var(--sheet)}
.toc summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:50px;padding:6px 14px;background:var(--ink);color:var(--sheet);cursor:pointer;list-style:none;font:600 14px/1.2 var(--fm);letter-spacing:.1em;text-transform:uppercase}
.toc summary::-webkit-details-marker{display:none}
.toc .pm{border-color:var(--sheet)}
.toc .pm::before,.toc .pm::after{background:var(--sheet)}
.toc details[open]>summary .pm,.toc[open]>summary .pm{background:transparent}
.toc ol{list-style:none;margin:0;padding:0}
.toc li+li{border-top:1px solid var(--hair)}
.toc a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;min-height:46px;padding:6px 12px 6px 0;text-decoration:none;font-size:15.5px;line-height:1.35;color:var(--ink)}
.toc .ti{align-self:stretch;display:flex;align-items:center;justify-content:center;font:600 12.5px/1 var(--fm);color:var(--red);border-right:1px solid var(--hair);margin-right:12px}
.toc a[aria-current]{background:var(--amber-w)}
.toc a[aria-current] .ti{background:var(--amber);color:var(--ink)}
.toc a:hover .tl{text-decoration:underline;text-decoration-color:var(--amber)}
@media (min-width:1100px){.toc summary{cursor:default}.toc .pm{display:none}}
.tag{position:relative;padding:26px 20px 20px 22px;border:1.5px solid var(--ink);background:var(--sheet);box-shadow:6px 6px 0 var(--vellum-2)}
.tag-hole{position:absolute;right:16px;top:16px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink);background:var(--vellum)}
.tag strong{display:block;font:740 21px/1.2 var(--fh);font-stretch:114%;margin-bottom:8px;padding-right:28px}
.tag p{font-size:16px;line-height:1.55;color:var(--lead)}

/* ---------- related: sheet set ---------- */
.set{padding:44px 0 52px;background:
 linear-gradient(var(--hair) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/24px 24px,var(--vellum)}
.set-t{margin-bottom:22px!important}
.set-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.sheet-card{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;min-height:190px;padding:20px 20px 64px;text-decoration:none;color:var(--ink);background:var(--sheet);border:1px solid var(--ink);box-shadow:inset 0 0 0 5px var(--sheet),inset 0 0 0 6px var(--hair-2);transition:transform .18s,box-shadow .18s}
.sheet-card strong{font:720 20px/1.2 var(--fh);font-stretch:114%}
.sc-d{font-size:16px;line-height:1.5;color:var(--lead)}
.sc-tb{position:absolute;right:0;bottom:0;display:grid;grid-template-columns:auto auto;border-top:1px solid var(--ink);border-left:1px solid var(--ink);font:600 12.5px/1 var(--fm)}
.sc-tb span,.sc-tb b{padding:9px 10px}
.sc-tb span{color:var(--lead);text-transform:uppercase;letter-spacing:.08em;border-right:1px solid var(--ink)}
.sc-tb b{background:var(--ink);color:var(--sheet);font-weight:600}
.sheet-card:hover{color:var(--ink);transform:translateY(-3px);box-shadow:inset 0 0 0 5px var(--sheet),inset 0 0 0 6px var(--amber),0 14px 24px -18px rgba(27,31,35,.6)}
.sheet-card:hover .sc-tb b{background:var(--amber);color:var(--ink)}

/* ---------- footer: title block ---------- */
.ft{padding:36px 0 40px;background:var(--vellum-2);border-top:2px solid var(--ink)}
.ft-block{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--sheet)}
.fb{padding:18px 18px;border-bottom:1px solid var(--ink);min-width:0}
.fb-brand{grid-column:1/-1}
.fb-col:nth-of-type(2){border-right:1px solid var(--ink)}
.fb-col h2,.ft h2{margin:0 0 6px;font:600 13px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.fb-col ul{list-style:none;margin:0;padding:0}
.fb-col a{display:flex;align-items:center;min-height:44px;font-size:16px;line-height:1.3;text-decoration:none}
.fb-col a:hover{text-decoration:underline;text-decoration-color:var(--amber)}
.ft-disc{margin:0;font-size:16px;line-height:1.6;color:var(--lead);max-width:62ch}
.fb-age{display:flex;align-items:center;border-right:1px solid var(--ink);border-bottom:0}
.age{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:2.5px solid var(--red);border-radius:50%;font:700 19px/1 var(--fm);color:var(--red)}
.fb-copy{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;border-bottom:0;font:500 15px/1.4 var(--fm)}
.ft-mini{grid-template-columns:auto 1fr}
@media (min-width:860px){
 .ft-block{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) 120px;grid-template-rows:auto auto}
 .fb-brand{grid-column:auto;border-right:1px solid var(--ink)}
 .fb-col:nth-of-type(3){border-right:1px solid var(--ink)}
 .fb-age{grid-column:4;grid-row:1/3;justify-content:center;border-right:0;border-left:0}
 .fb-copy{grid-column:1/4;border-top:0}
 .fb{padding:22px 24px}
 .ft-mini{grid-template-columns:auto 1fr}
 .ft-mini .fb-age{grid-column:auto;grid-row:auto;border-right:1px solid var(--ink)}
 .ft-mini .fb-copy{grid-column:auto}
}
@media (min-width:768px){.body-grid,.phead-sheet{width:calc(100% - 2 * var(--gut))}}