@import url("../styles.css");

@font-face { font-family: "Airstrip Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Airstrip Display"; src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; }

:root { --ink:#f5f7fa; --muted:#a8b0ba; --faint:#68717c; --ground:#060708; --panel:#101216; --line:rgba(255,255,255,.12); --runway:#e8edf3; --signal:#91a8bd; }
* { box-sizing:border-box; }
html { background:var(--ground); }
body.airstrip-library { margin:0; padding-top:var(--header-height); background:var(--ground); color:var(--ink); font:15px/1.65 var(--font-sans), ui-monospace, SFMono-Regular, Menlo, monospace; }
body.airstrip-library::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse 85% 55% at 75% -10%, rgba(152,174,194,.14), transparent 58%), linear-gradient(90deg, transparent 49.92%, rgba(255,255,255,.06) 50%, transparent 50.08%); background-size:auto, 96px 100%; mask-image:linear-gradient(to bottom, #000 0, transparent 76%); }
a { color:inherit; text-decoration:none; }
.page { position:relative; z-index:1; overflow:hidden; }
.library-nav { display:none; }
.library-mark { display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.06em; }
.library-mark img { width:30px; height:30px; border-radius:8px; }
.library-mark strong { color:white; font-size:14px; }
.nav-return { color:var(--muted); font-size:12px; transition:color .2s ease; }
.nav-return:hover { color:white; }
.library-shell { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.library-hero { min-height:clamp(510px,72vh,680px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:clamp(32px,8vw,120px); align-items:center; padding:76px 0 80px; }
.section-tag { display:block; color:var(--signal); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
h1,h2,h3,p { margin-top:0; }
.library-hero h1, .template-hero h1 { max-width:820px; font-family:var(--font-serif); font-weight:600; letter-spacing:-.025em; text-wrap:balance; }
.library-hero h1 { font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; margin-bottom:25px; }
.lead { max-width:640px; color:var(--muted); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(1.04rem,1.5vw,1.2rem); line-height:1.7; text-wrap:pretty; }
.runway-card { align-self:center; position:relative; min-height:285px; border-top:1px solid rgba(255,255,255,.4); border-bottom:1px solid var(--line); background:linear-gradient(90deg,transparent 0 48%,rgba(255,255,255,.16) 48% 52%,transparent 52%); display:flex; flex-direction:column; justify-content:center; gap:12px; padding:28px 0; }
.runway-card::before,.runway-card::after { content:""; height:8px; width:100%; background:repeating-linear-gradient(90deg,rgba(255,255,255,.92) 0 26px,transparent 26px 48px); opacity:.7; }
.runway-card::after { opacity:.22; }
.runway-label { background:var(--ground); border:1px solid var(--line); align-self:center; padding:14px 18px; text-align:center; font-size:12px; letter-spacing:.06em; }
.runway-label b { display:block; color:white; font-size:28px; line-height:1.1; letter-spacing:-.04em; }
.template-index { border-top:1px solid var(--line); padding:30px 0 96px; }
.index-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.index-heading h2 { font:600 clamp(2rem,3vw,3rem)/1 var(--font-serif); letter-spacing:-.02em; margin:0; }
.index-heading p { color:var(--faint); font-size:12px; margin:0; }
.template-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.template-list li { border-bottom:1px solid var(--line); }
.template-list a { display:grid; grid-template-columns:66px minmax(0,1.4fr) minmax(160px,.65fr) 42px; gap:22px; align-items:center; padding:25px 8px; transition:background .2s ease, padding .2s ease; }
.template-list a:hover { padding-left:18px; background:rgba(255,255,255,.035); }
.template-number { color:var(--faint); font-size:12px; }
.template-list h3 { font:600 clamp(1.1rem,2vw,1.35rem)/1.2 var(--font-serif); margin:0 0 5px; letter-spacing:-.015em; }
.template-list p { color:var(--muted); margin:0; font:13px/1.5 system-ui,sans-serif; }
.template-meta { color:var(--signal); font-size:11px; text-align:right; }
.arrow { text-align:right; color:var(--ink); font:30px/1 Georgia,serif; }
.library-footer { display:none; }

/* Shared Extiri chrome is injected by templates-site-chrome.js. */
.airstrip-library .navbar { font-family:var(--font-serif); }
.airstrip-library .navbar .nav-link.active { color:#fff; }
.airstrip-library .footer { font-family:var(--font-serif); }
.airstrip-library .footer p { font-family:var(--font-serif); }

.template-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.48fr); gap:clamp(28px,4vw,64px); align-items:start; padding:clamp(42px,5vw,72px) 0 clamp(42px,5vw,64px); border-bottom:1px solid var(--line); }
.template-hero-copy { min-width:0; }
.breadcrumbs { display:none; }
.template-hero .section-tag { display:none; }
.breadcrumbs a:hover { color:white; }
.template-hero h1 { font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; margin:0 0 22px; }
.template-summary { max-width:680px; color:var(--muted); font:clamp(1rem,1.5vw,1.18rem)/1.7 system-ui,sans-serif; }
.template-file-action { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:26px; }
.template-file-action a { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:var(--radius-full); font:600 var(--text-sm)/1 var(--font-serif); }
.template-download { background:var(--color-airstrip); color:#050505; }
.template-download::before { content:"↓"; margin-right:8px; font-size:1rem; }
.template-download:hover { background:#fff; }
.airstrip-download { border:1px solid rgba(255,255,255,.25); color:var(--text-primary); }
.airstrip-download::before { content:""; margin-right:8px; font-size:1rem; }
.airstrip-download:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.template-facts { display:none; }
.template-facts span { padding:12px 18px 12px 0; margin-right:18px; color:var(--signal); font-size:11px; }
.template-layout { display:block; padding:clamp(42px,6vw,70px) 0; }
.steps-title, .steps-intro { display:none; }
.runbook-steps { list-style:none; margin:0; padding:0; counter-reset:step; border-top:1px solid var(--line); }
.runbook-steps li { counter-increment:step; display:grid; grid-template-columns:46px 24px 1fr; gap:14px; align-items:start; padding:22px 0; border-bottom:1px solid var(--line); transition:background-color var(--transition-fast); }
.runbook-steps li:hover { background:rgba(255,255,255,.035); }
.runbook-steps li::before { content:counter(step, decimal-leading-zero); color:var(--signal); font-size:12px; padding-top:4px; }
.runbook-steps strong { display:block; color:white; font:600 16px/1.35 system-ui,sans-serif; }
.runbook-steps span { display:block; color:var(--muted); margin-top:5px; font:13px/1.55 system-ui,sans-serif; }
.step-control { display:block; width:20px; height:20px; margin-top:2px; cursor:pointer; }
.step-control input { position:absolute; opacity:0; width:1px; height:1px; }
.step-control span { display:block; width:20px; height:20px; margin:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; transition:background-color var(--transition-fast), border-color var(--transition-fast); }
.step-control input:focus-visible + span { outline:2px solid #fff; outline-offset:3px; }
.step-control input:checked + span { background:var(--color-airstrip); border-color:var(--color-airstrip); }
.step-control input:checked + span::after { content:"✓"; display:block; color:#050505; font:700 13px/18px system-ui,sans-serif; text-align:center; }
.runbook-steps li.is-complete strong { color:var(--text-secondary); text-decoration:line-through; text-decoration-thickness:1px; }
.runbook-steps li.is-complete > div span { color:var(--text-tertiary); }
.aside-card { display:block; padding:22px; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:var(--radius-lg); }
.aside-app { display:flex; align-items:center; gap:10px; margin-bottom:22px; color:#fff; font:600 13px/1 var(--font-serif); }
.aside-app img { width:34px; height:34px; border-radius:9px; }
.aside-label { color:var(--signal)!important; font:600 10px/1.4 var(--font-sans)!important; letter-spacing:.12em; text-transform:uppercase; margin-bottom:13px!important; }
.aside-card h2 { font:600 1.55rem/1.15 var(--font-serif); margin-bottom:12px; }
.aside-card p { color:var(--muted); font:13px/1.6 system-ui,sans-serif; }
.aside-card code { color:#fff; font:12px var(--font-sans); }
.aside-card ul { list-style:none; padding:0; margin:20px 0; display:grid; gap:13px; }
.aside-card li { color:var(--text-secondary); font:13px/1.5 system-ui,sans-serif; padding-left:17px; position:relative; }
.aside-card li::before { content:"•"; color:var(--signal); position:absolute; left:0; }
.aside-link { display:inline-flex; align-items:center; gap:9px; color:#fff; font:600 13px/1 var(--font-serif); }
.aside-link span { font-size:18px; transition:transform var(--transition-fast); }
.aside-link:hover span { transform:translateX(3px); }
.airstrip-showcase { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); gap:clamp(32px,6vw,88px); align-items:center; padding:clamp(60px,8vw,110px) 0; border-top:1px solid var(--line); }
.airstrip-showcase-copy > span { display:block; color:var(--signal); font:600 10px/1.4 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; margin-bottom:15px; }
.airstrip-showcase h2 { font:600 clamp(2rem,3.5vw,3.4rem)/1.08 var(--font-serif); letter-spacing:-.025em; margin-bottom:15px; }
.airstrip-showcase p { color:var(--text-secondary); font:16px/1.65 system-ui,sans-serif; }
.airstrip-bento { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.airstrip-bento img { display:block; width:100%; border-radius:var(--radius-md); border:1px solid var(--line); background:#0e0e11; }
.bento-focus,.bento-widgets { aspect-ratio:1.7 / 1; height:100%; object-fit:cover; }
.bento-reminder { grid-column:1 / -1; aspect-ratio:4.53 / 1; object-fit:cover; }
.bento-procedure { grid-column:1 / -1; aspect-ratio:1.59 / 1; object-fit:contain; }
.download-link { display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:10px 15px; background:var(--runway); color:#08090a; border-radius:999px; font:600 12px system-ui,sans-serif; transition:background .2s ease; }
.download-link:hover { background:white; }
.template-cta { display:none; }
.template-cta h2 { font:600 clamp(2.4rem,5vw,4.2rem)/1.05 var(--font-serif); letter-spacing:-.025em; margin:0 auto 18px; max-width:690px; text-wrap:balance; }
.template-cta p { color:var(--muted); font:16px/1.6 system-ui,sans-serif; max-width:520px; margin:0 auto 24px; }
@media (max-width:820px) { .template-hero,.airstrip-showcase{grid-template-columns:1fr}.aside-card{max-width:560px}.runbook-steps li{grid-template-columns:38px 24px 1fr;gap:12px} }
@media (max-width:720px) { .library-nav{height:64px}.library-hero{grid-template-columns:1fr;padding:58px 0}.runway-card{min-height:180px}.template-list a{grid-template-columns:36px 1fr 25px;gap:12px;padding:20px 2px}.template-list p{display:none}.template-meta{display:none}.template-hero h1{font-size:clamp(2.8rem,13vw,4.5rem)}.library-footer{flex-direction:column}.template-file-action{align-items:flex-start;flex-direction:column} }
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;transition:none!important;} }