/* ============================================================
   CYMOTHOE · home.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
/* ====================== NAV (shared) ====================== */
.brand{flex:0 0 auto}
/* generic type helpers (shared) */
.label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-text)}
h2.section-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:1.7rem;margin-bottom:.3rem}
.section-rule{margin:3rem 0 1.5rem}
p{color:var(--ink-dim)}
p strong{color:var(--ink);font-weight:600}
/* ====================== HOME-SPECIFIC ====================== */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;padding:3.5rem 0 1rem;min-height:72vh}
.hero__emblem{width:104px;height:104px;display:block;margin-bottom:1.3rem;filter:drop-shadow(0 6px 14px rgba(31,44,51,.28))}
.hero h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(3.5rem,11vw,7.5rem);line-height:.84;letter-spacing:.01em;color:var(--navy);margin-bottom:.4rem}
.hero h1 .fade{color:transparent;-webkit-text-stroke:1.2px var(--cyan)}
.hero__lede{font-size:1.18rem;line-height:1.7;max-width:46ch;margin:1.5rem 0 2rem;color:var(--ink-dim)}
.hero__lede b{color:var(--ink)}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.btn{font-size:.95rem;padding:.7rem 1.4rem;transition:.16s}
.btn--ghost:hover{border-color:var(--navy);background:rgba(18,59,82,.06)}
/* hero blueprint drawing */
.hero__plate{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.hero__plate svg{width:100%;height:auto;max-height:560px;overflow:visible}
.bp-stroke{fill:none;stroke:var(--navy);stroke-width:1;vector-effect:non-scaling-stroke}
.bp-faint{fill:none;stroke:var(--ink-dim);stroke-width:.6;opacity:.55;vector-effect:non-scaling-stroke}
.bp-accent{fill:none;stroke:var(--brass);stroke-width:1.1;vector-effect:non-scaling-stroke}
.bp-dim{stroke:var(--cyan);stroke-width:.7;opacity:.8}
.bp-dim-txt{fill:var(--cyan);font-family:var(--font-mono);font-size:9px;letter-spacing:.05em}
.bp-anno{fill:var(--ink-faint);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase}
.plate-spin{transform-origin:center;animation:heave 9s ease-in-out infinite}
@keyframes heave{0%,100%{transform:rotate(-1.1deg) translateY(0)}50%{transform:rotate(1.1deg) translateY(-6px)}}
/* about: story + myth sidebar */
.about-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.75rem;align-items:start}
.about-prose{max-width:70ch}
.about-prose h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:.01em;color:var(--navy);margin:2rem 0 .8rem}
.about-prose h3:first-child{margin-top:0}
.about-prose p{margin-bottom:1rem;color:var(--ink)}
.about-prose strong{color:var(--navy)}
.chart-readout{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2))}
.cr-head{padding:.9rem 1.1rem;border-bottom:1px solid var(--bp-line)}
.cr-head .eyebrow{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-text)}
.cr-head h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;font-weight:600;margin-top:.15rem;color:var(--navy)}
.cr-body{padding:1rem 1.1rem}
.cr-body p{color:var(--ink-dim);font-size:.86rem;margin-bottom:.8rem;line-height:1.6}
.cr-body p:last-child{margin-bottom:0}
.cr-body i{color:var(--ink)}
.callout{margin-top:1.5rem;max-width:70ch;border:1px solid var(--bp-line);border-left:2px solid var(--danger);border-radius:var(--r);background:rgba(196,69,58,.07);padding:.8rem 1rem}
.callout .label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--danger);display:block;margin-bottom:.45rem}
.callout p{color:var(--ink-dim);margin:0 0 .55rem;font-size:.78rem;line-height:1.55}
.callout p:last-child{margin-bottom:0}
.callout a{text-decoration:underline;color:var(--cyan-text)}
/* ====================== RESPONSIVE ====================== */
@media(max-width:880px){
.hero{grid-template-columns:1fr;gap:1rem;min-height:auto;padding-top:2rem}
.hero__plate{order:-1;max-width:420px;margin:0 auto}
.about-layout{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.plate-spin{animation:none}
}
/* ====================== START HERE (sheet grid) ====================== */
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.sheet-card{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.25rem 1.3rem;border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel-2),var(--bp-deep-2));color:var(--ink);transition:.15s}
a.sheet-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 8px 20px rgba(18,59,82,.1)}
.sheet-card__icon{width:40px;height:40px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.3rem}
a.sheet-card:hover .sheet-card__icon{stroke:var(--cyan-text)}
.sheet-card__num{position:absolute;top:1rem;right:1.1rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-faint)}
.sheet-card h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;font-weight:600;color:var(--navy);line-height:1.15}
a.sheet-card h3::after{content:' →';color:var(--cyan-text)}
.sheet-card p{font-size:.88rem;line-height:1.5;color:var(--ink-dim);margin:0}
.start__sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-text);font-weight:500;margin:2rem 0 .9rem}
.sheet-grid--small .sheet-card{background:var(--bp-deep)}
.sheet-grid--small .sheet-card__icon{width:32px;height:32px}
@media(prefers-reduced-motion:reduce){a.sheet-card:hover{transform:none}}
/* cards that list a tab's pages instead of linking to one page */
.sheet-grid--tabs{grid-template-columns:2fr 1fr 1fr}
@media(max-width:880px){
.sheet-grid--tabs{grid-template-columns:1fr 1fr}
.sheet-card--wide{grid-column:span 2}
}
.sheet-grid--tabs{gap:.75rem}
.sheet-grid--tabs .sheet-card{display:grid;grid-template-columns:auto 1fr;align-content:start;align-items:center;gap:.4rem .55rem;padding:.75rem .9rem .8rem}
.sheet-grid--tabs .sheet-card>:not(.sheet-card__icon,h3){grid-column:1/-1}
.sheet-grid--tabs .sheet-card__icon{width:24px;height:24px;margin:0}
.sheet-grid--tabs .sheet-card h3{font-size:1rem}
.card-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.5rem .9rem}
.card-group__label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;margin:0 0 .25rem}
.card-links{list-style:none;margin:0;padding:0}
.card-links a{display:block;padding:.14rem 0;font-size:.86rem;line-height:1.3}
.card-links a:hover{text-decoration:underline}
@media(pointer:coarse){.card-links a{padding:.3rem 0}}
.sheet-card .card-note{font-size:.78rem;line-height:1.45}
@media(max-width:600px){
.sheet-grid--tabs{grid-template-columns:1fr}
.sheet-card--wide{grid-column:auto}
}
.start,.about{scroll-margin-top:100px}