/* family-system.css — Scalar Family premium layer, loaded last.
   Mirrors scalar-system.css decisions in the clay/paper palette:
   type · ornament cut · ink primary button · 11px label floor · notices · reveals · motion · tablet tier · print */

/* 1. tokens + type */
:root{--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--sans:'Instrument Sans',system-ui,-apple-system,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--ink-deep:#26221E;--content-max:1160px}
body{font-family:var(--sans);font-size:clamp(16px,.95vw,18px);text-rendering:optimizeLegibility}
body::before,#gate::before{display:none}
::selection{background:var(--paper-darker);color:var(--ink)}
h1,h2,h3,.gate-card h1,.pkg h3,.cap-info h3{font-family:var(--serif);font-weight:400;letter-spacing:-.008em;text-wrap:balance}
h1{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.02;letter-spacing:-.012em}
h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08}
h3{font-size:1.5rem;line-height:1.2}
h4{font-family:var(--sans);font-weight:500;letter-spacing:-.005em}
.serif{font-weight:400;letter-spacing:-.005em}
h1 .serif,h2 .serif{font-size:1em}
.gate-card h1{font-size:2rem}
p{text-wrap:pretty}
.lede,.hero .lede{font-weight:400}
.pkg .pkg-price .amt,.offer .of-amt{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.offer .of-amt .cur{font-weight:400}
.wordmark .wm-fam,.gate-form button,.btn,.btn-ghost,.rail-cta,.topbar .tb-cta,.msheet-cta,.mcta,.rail-nav .nav-link .name,.ms-name{font-family:var(--sans)}
/* functional labels: 11px floor */
.eyebrow,.sec-num,.kicker,.pillar .p-num,.step .s-num,.pkg .pkg-tag,.pkg .pkg-price .unit,.offer .of-unit,.offer .of-list h4,.cap-info dt,form.cap-form label,footer,.gate-eyebrow,.gate-note,.rail-nav .nav-link .num,.msheet-sec-label,.mbar-toggle,.fig .fig-cap,.topbar .tb-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em}
.rail-logo .rail-partner{font-size:10px;letter-spacing:.18em}
.hero-cobrand .hcb-txt{font-size:10px;letter-spacing:.14em}
.ms-num{font-size:11px}
footer .foot-disc{font-family:var(--sans);font-size:12px;line-height:1.7;letter-spacing:.01em;max-width:60ch}
.cap-fine,.price-note,.offer .of-fine{font-size:.84rem}

/* 2. ornament cut */
.edge-label{display:none!important}
.fig .fig-frame::after{display:none}
.fig .fig-frame img{transition:none}
.fig:hover .fig-frame img{transform:none}
.hero-note .dot{border-radius:0;width:14px;height:2px;flex-basis:14px}
.mbar-progress{display:none!important}
.msheet{box-shadow:none}
.mcta{box-shadow:0 6px 20px rgba(53,48,42,.14)}
img[src$=".jpg"]{filter:saturate(.86) contrast(1.03)}

/* 3. one primary (ink), one secondary (ghost); clay only as the arrow */
.btn,.rail-cta,.msheet-cta,.mcta,.topbar .tb-cta{background:var(--ink)!important;color:var(--paper)!important;border:none!important;transition:background 160ms,color 160ms}
.btn:hover,.rail-cta:hover,.msheet-cta:hover,.mcta:hover,.topbar .tb-cta:hover{background:var(--ink-deep)!important;color:var(--paper)!important}
.btn{padding:14px 22px;font-size:14px;font-weight:500}
.btn .arrow{transition:transform 180ms cubic-bezier(.22,.61,.36,1)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-ghost,.btn.btn-ghost{background:transparent!important;color:var(--ink)!important;border:1px solid var(--hairline-strong)!important;padding:13px 21px}
.btn-ghost:hover,.btn.btn-ghost:hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.rail-cta span,.msheet-cta span[aria-hidden],.foot-cta span{color:var(--clay)}
.mcta-arrow,.mcta-arrow::after{background:var(--clay);border-color:var(--clay)}
.mcta-arrow::after{background:transparent}
/* on the navy offer panel the primary flips to paper */
.offer .of-cta .btn{background:var(--paper)!important;color:var(--ink)!important}
.offer .of-cta .btn:hover{background:var(--paper-dark)!important;color:var(--ink)!important}
.offer .of-badge{background:transparent;padding:0 0 8px;border-bottom:1px solid rgba(236,230,217,.35);font-size:11px;letter-spacing:.18em;color:var(--paper)}
.gate-form button{background:var(--ink)!important;color:var(--paper)!important;padding:14px 24px;font-size:14px}
.gate-form button:hover{background:var(--ink-deep)!important}
.gate-form button span{color:var(--clay)}
footer .foot-cta{color:var(--ink)}
footer .foot-cta:hover{color:var(--clay)}

/* 4. fields + notice */
form.cap-form label{color:var(--muted);text-transform:uppercase;margin-top:22px;margin-bottom:6px}
form.cap-form input,form.cap-form select,form.cap-form textarea,.gate-form input{font-family:var(--sans);transition:border-color 160ms,box-shadow 160ms}
form.cap-form input:focus,form.cap-form select:focus,form.cap-form textarea:focus,.gate-form input:focus{border-bottom-color:var(--clay);box-shadow:0 1px 0 0 var(--clay)}
.cap-status{background:transparent;border:1px solid var(--hairline-strong);border-left-width:1px;padding:16px 18px;font-size:.88rem;line-height:1.6;color:var(--ink)}
.cap-status::before{content:'Notice';display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.cap-info dl>div{grid-template-columns:96px 1fr}
.cap-info dt{padding-top:3px}

/* 5. reveals: one quiet move, no stagger */
.reveal-up{transform:translateY(8px);transition:opacity 450ms cubic-bezier(.22,.61,.36,1),transform 450ms cubic-bezier(.22,.61,.36,1)}
.reveal-up[style*="--i"].is-visible{transition-delay:0ms}

/* 6. motion: spine lays down, section rules draw in, hero copy arrives */
@keyframes sf-spine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sf-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sf-fade{from{opacity:0}to{opacity:1}}
main::before{transform-origin:top;animation:sf-spine 1400ms linear both}
.sec-num{border-top-color:transparent;position:relative;white-space:nowrap}
.sec-num::after{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform 640ms cubic-bezier(.22,.61,.36,1)}
.sec-num.is-on::after{transform:scaleX(1)}
.hero .kicker,.hero .hero-cobrand{animation:sf-rise 560ms cubic-bezier(.22,.61,.36,1) both}
.hero h1{max-width:18ch;animation:sf-rise 640ms cubic-bezier(.22,.61,.36,1) 80ms both}
.hero h1 .serif{animation:sf-fade 560ms ease-out 360ms both}
.hero .lede{animation:sf-rise 640ms cubic-bezier(.22,.61,.36,1) 220ms both}
.hero .cta-row,.hero .hero-note{animation:sf-rise 640ms cubic-bezier(.22,.61,.36,1) 340ms both}
.hero .hero-fig{animation:sf-fade 760ms ease-out 380ms both}
.hero .hero-fig.reveal-up{opacity:1;transform:none}

/* 6b. section marker column wide enough for "01 / 05" at 11px; spine follows */
@media (min-width:961px){.sec-grid,.hero .sec-grid{grid-template-columns:76px minmax(0,1fr)}main::before{left:calc(max(0px,(100% - var(--content-max)) / 2) + var(--gutter) + 76px)}}

/* 7. rail */
.rail-nav .nav-link:hover,.rail-nav .nav-link.active{background:transparent}
.rail-nav .nav-link.active{border-left-color:var(--clay)}
.rail-logo .rail-partner{margin-bottom:12px}

/* 8. focus */
a:focus-visible,.rail-nav .nav-link:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:1px}
.btn:focus-visible,.btn-ghost:focus-visible,.mbar-toggle:focus-visible,.gate-form button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--clay)}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* 9. responsive: tablet 2-col tier, phone */
@media (max-width:1150px){.hero-fig{max-width:none}.hero-grid{gap:36px}}
@media (max-width:960px){
.sec-num::after{display:none}
main::before{display:none}
.sec-grid,.hero .sec-grid{grid-template-columns:1fr!important;column-gap:0;row-gap:18px}
.sec-num{border-top:none;padding-top:0;display:inline-flex;align-items:center;gap:10px;width:max-content}
.sec-num::before{content:'';display:inline-block;width:28px;height:2px;background:var(--clay)}
.pillars,.steps{grid-template-columns:repeat(3,1fr)}
.pillar,.step{padding:26px 22px 28px}
.step{border-right:1px solid var(--hairline);border-bottom:none}
.step:last-child{border-right:none}
.head-spread .fig,.head-spread--flip .fig{max-width:420px}
.hero-fig{max-width:520px}
.capture{grid-template-columns:1fr}
.cap-info{padding:34px 30px 30px}
.cap-info .ci-photo{margin:-34px -30px 24px}
form.cap-form{padding:34px 30px 30px}
}
@media (max-width:760px){.pillars,.steps{grid-template-columns:1fr}.pillar,.step{border-right:none;border-bottom:1px solid var(--hairline)}.pillar:last-child,.step:last-child{border-bottom:none}.pillars .pillar:last-child{border-bottom:1px solid var(--hairline)}}
@media (max-width:640px){
.hero h1{font-size:clamp(2.2rem,8.5vw,3rem);max-width:none}
h2{font-size:1.7rem;line-height:1.1}
.hero .lede{font-size:1.05rem;margin-top:22px}
.hero-fig{max-width:none;margin-top:24px}
.head-spread .fig,.head-spread--flip .fig{max-width:none}
.pkg,.offer .of-price,.offer .of-list{padding:26px 20px 28px}
.offer .of-amt{font-size:2.8rem}
.cap-info,form.cap-form{padding:26px 20px 26px}
.cap-info .ci-photo{margin:-26px -20px 22px}
.cap-info dl>div{grid-template-columns:1fr;row-gap:4px}
.pillar,.step{padding:22px 20px 26px}
footer{padding-left:var(--gutter);padding-right:var(--gutter)}
.gate-card h1{font-size:1.7rem}
}
@media (max-width:380px){.hero h1{font-size:clamp(1.9rem,9.5vw,2.4rem)}h2{font-size:1.5rem}}

/* 10. reduced motion + print */
@media (prefers-reduced-motion:reduce){
main::before,.hero .kicker,.hero .hero-cobrand,.hero h1,.hero h1 .serif,.hero .lede,.hero .cta-row,.hero .hero-note,.hero .hero-fig{animation:none!important}
.sec-num::after{transform:scaleX(1)!important;transition:none}
.reveal-up{opacity:1!important;transform:none!important;transition:none!important}
*{transition:none!important;animation:none!important}
}
@media print{
.rail,.mbar,.msheet,.msheet-scrim,.mcta,.edge-label,.rail-foot,#gate{display:none!important}
.page{margin-left:0!important}
main::before{display:none}
body{background:#fff;color:#000;font-size:11pt;padding-top:0!important;overflow:visible!important}
section{padding:28px 0;break-inside:avoid-page;border-bottom:1px solid #ccc}
.cap-info,.offer .of-price{background:#fff!important;color:#000!important;border:1px solid #ccc}
.cap-info *,.offer .of-price *{color:#000!important}
.reveal-up{opacity:1!important;transform:none!important}
a{color:#000}
}