/* FrankenKraft. Near-black, Scarlet Oxide signal, alpine blue, bone ivory. One dark look by design.
   Scarlet Oxide #C63D29 is approved (Round 2). On the dark background it is 3.8:1, so it is used for
   large text, rules, marks and fills, never for small body copy. Buttons carry white text (5.1:1). */
:root{
  --bg:#0b0c0e; --bg-raised:#141619; --bg-deep:#060708; --fg:#ede6d8; --fg-muted:#a8a296; --hairline:#272a2f;
  --kraft:#c63d29; --kraft-btn:#c63d29; --kraft-hot:#d64a35; --on-kraft:#ffffff;
  --alpine:#3e85bd; --alpine-2:#477fae; --link:#5a9fd6; --spark:#e8b54a;
  --f-display:"Hubot Sans","Arial Narrow",system-ui,sans-serif;
  --f-sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-serif:Newsreader,Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-sans);font-size:18px;line-height:30px;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--alpine);outline-offset:3px}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px),4vw);padding-right:max(16px,env(safe-area-inset-right,0px),4vw)}
.disp{font-family:var(--f-display);font-variation-settings:'wdth' 75;text-wrap:balance}
.serif{font-family:var(--f-serif);font-style:italic}
.lbl{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0}
.kicker{color:var(--fg);display:block;position:relative;padding-left:36px}
.kicker::before{content:"";position:absolute;left:0;top:7px;width:24px;height:2px;background:var(--kraft)}
.prose a,.art-meta a,.page-head a:not(.btn){color:var(--fg);text-decoration:none;border-bottom:1px solid var(--kraft)}
.prose a:hover,.art-meta a:hover,.page-head a:not(.btn):hover{color:var(--kraft)}
.muted{color:var(--fg-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 32px;border:0;border-radius:2px;cursor:pointer;text-decoration:none;font-family:var(--f-sans);font-size:14px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:background 200ms var(--ease)}
.btn span{display:inline-block;transition:transform 200ms var(--ease)}
.btn:hover span{transform:translateX(2px)}
.btn-primary{background:var(--kraft-btn);color:var(--on-kraft)}
.btn-primary:hover{background:var(--kraft-hot)}
.btn-ghost{border:1px solid var(--hairline);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--fg-muted)}
.f{color:var(--fg)} .k{color:var(--kraft)}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:820px}
.sec-head h2{margin:0;font-weight:800;font-size:clamp(44px,5.6vw,84px);line-height:.92}
.sec-head .sub{margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.3;color:var(--fg)}
.sec-head p.intro{margin:0;font-size:19px;line-height:30px;color:var(--fg-muted);max-width:640px}
.more{display:inline-flex;gap:10px;align-items:center;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--kraft);padding-bottom:4px;align-self:flex-start;font-size:16px;line-height:24px}
.more:hover{color:var(--kraft)}
.pv{display:inline-block;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--spark);border:1px dashed rgba(232,181,74,.5);padding:4px 8px}

/* wordmark: FrankenKraft with a slightly taller F and K (working variant A, see brand-tests.html) */
.wm{font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;line-height:1;white-space:nowrap;letter-spacing:-.01em}
.wm .cap{display:inline-block;font-size:1.16em;line-height:.8;vertical-align:-.02em}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.nav{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid transparent;transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.nav.solid,.nav.always{background:var(--bg);border-color:var(--hairline)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:18px}
.nav-mark{text-decoration:none;font-size:23px}
.nav-links{display:flex;align-items:center;gap:8px 28px}
.nav-links a.lbl{color:var(--fg);text-decoration:none;white-space:nowrap}
.nav-links a.lbl:hover,.nav-links a.lbl[aria-current]{color:var(--kraft)}
.nav-links .btn{min-height:44px;padding:0 20px;font-size:13px}
@media (max-width:1040px){.nav-links{gap:8px 20px}}
@media (max-width:900px){.nav-links a.lbl{display:none}}
@media (max-width:420px){.nav-mark{font-size:20px}.nav-links .btn{padding:0 14px;letter-spacing:.08em;font-size:12px}}

/* footer */
footer{border-top:1px solid var(--hairline)}
footer .wrap{padding-block:48px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 40px}
footer .meta{font-size:14px;line-height:22px;color:var(--fg-muted)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer nav a{color:var(--fg-muted);text-decoration:none;font-size:14px;line-height:22px}
footer nav a:hover{color:var(--fg)}

.preview-note{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--bg-raised);border:1px solid var(--hairline);color:var(--fg-muted);font-size:12px;line-height:16px;padding:8px 12px;max-width:280px}
.preview-note a,.preview-note button{all:unset;cursor:pointer;color:var(--link);margin-left:8px}
@media (max-width:700px){.preview-note{position:static;display:block;max-width:none;margin:0;border:0;border-top:1px solid var(--hairline);padding:16px max(16px,4vw) calc(16px + env(safe-area-inset-bottom,0px))}}

/* page heads for inner pages */
.page-head{padding-top:calc(var(--nav-h,80px) + clamp(56px,8vw,120px));padding-bottom:clamp(40px,5vw,72px);display:flex;flex-direction:column;gap:18px}
.page-head h1{margin:0;font-weight:800;font-size:clamp(56px,8vw,120px);line-height:.88}
.page-head .sub{margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1.3}
.page-head p.intro{margin:0;font-size:19px;line-height:30px;color:var(--fg-muted);max-width:680px}

/* note cards, shared by home + index */
.note-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--fg)}
.note-card .art{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--hairline);background:var(--bg-raised)}
.note-card .art img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);transition:transform 700ms var(--ease)}
.note-card:hover .art img{transform:scale(calc(var(--z,1) * 1.04))}
.note-card h3{margin:0;font-weight:700;font-size:clamp(24px,2.2vw,30px);line-height:1.05;transition:color 200ms var(--ease)}
.note-card:hover h3{color:var(--kraft)}
.note-card .date{color:var(--fg-muted)}
@media (prefers-reduced-motion:reduce){.note-card .art img{transition:none}}

/* Field Notes cards: the live title is the focal point; the art sits subdued behind it */
.fn-card{position:relative;display:flex;min-height:300px;overflow:hidden;border:1px solid var(--hairline);background:var(--bg-deep);text-decoration:none;color:var(--fg);transition:border-color 250ms var(--ease)}
.fn-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;filter:grayscale(.35) contrast(1.05);transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);transition:opacity 400ms var(--ease)}
.fn-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kraft);z-index:3;transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease)}
.fn-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,7,8,.15) 0%,rgba(6,7,8,.55) 45%,rgba(6,7,8,.94) 100%)}
.fn-card:hover img,.fn-card:focus-visible img{opacity:.48}
.fn-card:hover::before,.fn-card:focus-visible::before{transform:scaleX(1)}
.fn-card:hover{border-color:#3a3d43}
.fn-in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:clamp(22px,2.4vw,32px);width:100%}
.fn-card h3{margin:0;font-weight:700;font-size:clamp(23px,1.9vw,29px);line-height:1.06;color:var(--fg)}
.fn-topic{display:inline-flex;align-items:center;gap:10px;color:var(--fg)}
.fn-topic::before{content:"";width:18px;height:2px;background:var(--kraft)}
.fn-date{color:var(--fg-muted)}
.fn-card.fn-lg{min-height:clamp(420px,40vw,560px)}
.fn-card.fn-lg h3{font-size:clamp(34px,3.4vw,52px);line-height:.98;max-width:720px}
.fn-card.fn-lg img{opacity:.42;transform:scale(calc(var(--z,1) * 1.4))}
@media (prefers-reduced-motion:reduce){.fn-card img,.fn-card::before{transition:none}}