/* ============================================================
   HORN — BROKEN HERALDRY  ·  shared system
   Two colours: INK + BONE. One typeface: Helvetica.
   One CTA: the free teardown. One inversion. Graphics are
   dropped into labelled .slot placeholders later.
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --bone:#F2EFE9;
  --hair-ink:color-mix(in srgb,var(--ink) 22%,transparent);
  --hair-bone:color-mix(in srgb,var(--bone) 26%,transparent);
  /* reference value only: the cobalt that lives INSIDE the owner-supplied
     herald / sampler PNGs. Never applied to the UI — no blue text, rules,
     borders or fills anywhere. Kept so new art can match the tone. */
  --herald-blue:#1c2ad6;

  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",system-ui,sans-serif;
  --serif:Georgia,"Times New Roman","Liberation Serif",serif; /* field-notes margin asides, used sparingly */
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace; /* field-notes ledger numbering + footnote apparatus only */
  /* heraldic — the accent font. Used sparingly and consistently: exactly one
     headline per page (manifesto line on Home, the page-hero h1 on inner
     pages, the field-note and manuscript titles, the 404 headline). Real
     blackletter where the machine has one (Office ships "Old English Text
     MT"); drops to Georgia otherwise.
     To lock it: add assets/fonts/heraldic.woff2 and uncomment the @font-face below. */
  --heraldic:"HORN Blackletter","UnifrakturMaguntia","Old English Text MT","Blackletter686 BT",Georgia,"Times New Roman",serif;

  --fs-wordmark:clamp(4.4rem,19vw,16rem);
  --fs-display:clamp(2.4rem,6.2vw,5.2rem);
  --fs-h1:clamp(1.95rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.35rem,2.7vw,2.1rem);
  --fs-lead:clamp(1.18rem,2.1vw,1.6rem);
  --fs-body:clamp(1rem,1.05vw,1.12rem);
  --fs-label:0.76rem;

  --pad-x:clamp(1.15rem,5vw,6.5rem);
  --sec-y:clamp(3.8rem,8.5vw,8rem);
  --maxw:1400px;

  /* motion — shared timing so every transition on the site speaks one language */
  --ease:cubic-bezier(.2,.7,.2,1);      /* decisive, slight overshoot-free ease-out */
  --ease-io:cubic-bezier(.16,1,.3,1);   /* longer settle for entrance reveals */
  --dur-1:.16s;                          /* micro-interaction: hover, press */
  --dur-2:.34s;                          /* state change: menu, underline, lift */
  --dur-3:.7s;                           /* entrance reveal */
}

/* optional locked blackletter for the manifesto line — drop the file in to use it
@font-face{
  font-family:"HORN Blackletter";
  src:url("assets/fonts/heraldic.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
*/

/* reset / base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bone);color:var(--ink);
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  overflow-wrap:break-word}
svg{display:block;max-width:100%}
img{max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--bone)}
:where(a,button,input,textarea):focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* type utilities */
.label{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.meta{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.34}
.body{font-size:var(--fs-body);max-width:62ch}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.sec-index{display:block;margin-bottom:1.5rem}

/* header */
.site-head{position:sticky;top:0;z-index:150;background:var(--bone);border-bottom:1.5px solid var(--ink)}
.site-head .row{display:flex;align-items:center;justify-content:space-between;padding-block:1rem;gap:1rem}
.brand{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;position:relative;z-index:2}
nav.main{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}
nav.main a.nav{font-weight:500;font-size:1rem;position:relative;padding-block:.15rem}
/* animated underline — one gesture, keyboard + pointer */
nav.main a.nav::after,.site-foot .col a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease)}
nav.main a.nav:hover::after,nav.main a.nav:focus-visible::after,
.site-foot .col a:hover::after,.site-foot .col a:focus-visible::after{transform:scaleX(1)}
nav.main a.nav[aria-current="page"]{font-weight:700}
nav.main a.nav[aria-current="page"]::after{transform:scaleX(1)}
nav.main a[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* mobile menu toggle — hidden on desktop */
.nav-toggle{display:none;position:relative;z-index:2;width:44px;height:44px;
  margin-right:-.6rem;background:transparent;border:0;cursor:pointer;color:var(--ink)}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:11px;right:11px;
  height:1.5px;background:currentColor;transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) linear}
.nav-toggle::before{top:16px}
.nav-toggle span{top:22px}
.nav-toggle::after{top:28px}
.menu-open .nav-toggle::before{transform:translateY(6px) rotate(45deg)}
.menu-open .nav-toggle span{opacity:0}
.menu-open .nav-toggle::after{transform:translateY(-6px) rotate(-45deg)}

/* CTA — the only styled button */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font-weight:600;letter-spacing:.02em;font-size:1rem;line-height:1;padding:.85em 1.15em;
  background:var(--ink);color:var(--bone);border:1.5px solid var(--ink);white-space:nowrap;cursor:pointer;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{font-size:.9rem;padding:.7em 1em}
.btn--lg{font-size:clamp(1rem,1.5vw,1.25rem);padding:1em 1.4em}
.on-ink .btn{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.on-ink .btn:hover{background:transparent;color:var(--bone)}
/* text link — a growing underline, with a faint always-on rule for affordance */
.textlink{font-weight:600;position:relative;padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:100% 1.5px;
  transition:background-size var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease)}
.textlink::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:currentColor;opacity:.28}
.textlink:hover,.textlink:focus-visible{background-size:100% 3px}
.textlink:hover::before{opacity:0}

/* slot — labelled placeholder where a graphic goes later */
.slot{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed var(--ink);color:var(--ink);min-height:220px;padding:2rem;
  font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.slot--sm{min-height:150px}.slot--lg{min-height:340px}
.on-ink .slot{border-color:var(--bone);color:var(--bone)}

/* herald + sampler artwork (owner-supplied). The one third colour lives INSIDE
   the PNGs only — never on the UI. The plate sits on bone; on ink sections a
   single bone hairline lets its edge read. */
.art-plate picture,.fn-stage picture{display:contents}
.art{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.art-plate{background:var(--bone);padding:clamp(1.1rem,3.5vw,2.25rem);
  display:flex;justify-content:center;align-items:center;
  margin-top:clamp(1.6rem,4vw,2.6rem)}
.on-ink .art-plate{box-shadow:0 0 0 1px var(--hair-bone)}
.art--herald{max-width:440px}
.art--sampler{max-width:820px}
.hero .art--herald{max-width:360px}
.closing .art-plate{margin-top:0;margin-bottom:clamp(2rem,4.5vw,3.2rem)}

/* hero visual — owner-supplied, kept full colour on purpose. This is the one
   deliberate departure from ink+bone: no blend mode, no filter, colour stays
   true to the source. Everything else on the site stays two-colour. */
.hero-art{display:block;width:100%;height:auto;max-width:920px}

/* section base + inversion */
section{padding-block:var(--sec-y);position:relative}
.on-ink{background:var(--ink);color:var(--bone)}
.on-ink .label,.on-ink h1,.on-ink h2,.on-ink h3{color:var(--bone)}

/* hero */
.hero{padding-top:clamp(2rem,4vw,4rem)}
.hero .top{display:flex;justify-content:space-between;gap:1rem;margin-bottom:clamp(1rem,3vw,2.2rem)}
.wordmark{font-size:var(--fs-wordmark);font-weight:800;letter-spacing:-.045em;line-height:.82;text-transform:uppercase}
.hero-lower{margin-top:clamp(1.5rem,3vw,2.5rem)}
.hero-tag{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;line-height:1}
.hero .lead{margin-top:1rem;max-width:48ch}
.hero-cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.6rem}
.hero .slot{margin-top:clamp(2rem,4vw,3rem)}

/* page hero (inner pages) */
.page-hero{padding-top:clamp(2.5rem,6vw,5rem)}
.page-hero h1{font-family:var(--heraldic);font-weight:400;letter-spacing:0;
  font-size:var(--fs-display);line-height:1.06;max-width:16ch}
.page-hero h1 .brand-mark{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
.page-hero .sub{margin-top:1.4rem;font-size:var(--fs-lead);font-weight:300;max-width:36ch;line-height:1.32}

/* manifesto — the heraldic accent, Home's version; blackletter where available, Georgia otherwise */
.manifesto{border-top:1.5px solid var(--ink)}
.manifesto .line{font-family:var(--heraldic);font-style:normal;font-weight:400;
  font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.14;letter-spacing:0;max-width:20ch}
.manifesto .body{margin-top:2rem}
.manifesto .keeps{margin-top:1.6rem;font-size:var(--fs-lead);font-weight:300}
.manifesto .keeps b{font-weight:700}

/* three beats / steps grid */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.beat{border-top:3px solid currentColor;padding-top:1.1rem}
.beat .n{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.beat h3{font-size:var(--fs-h2);margin:.4rem 0 .7rem}
.beat p{max-width:32ch}
.section-h{font-size:var(--fs-h1);max-width:18ch;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.more{margin-top:clamp(2.2rem,5vw,3.4rem)}

/* hook */
.hook{border-top:1.5px solid var(--ink)}
.hook .lead{max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem)}

/* offer ladder (home) */
.ladder{max-width:940px}
.rung{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  padding-block:clamp(1rem,2vw,1.5rem);border-bottom:1.5px solid var(--hair-bone)}
.rung:first-child{border-top:1.5px solid var(--hair-bone)}
.rung .name{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em}
.rung .price{font-size:var(--fs-lead);font-weight:300}
.offer .note{margin-top:2rem;max-width:60ch;opacity:.85}

/* who it's for */
.who h2.big{font-size:var(--fs-display);line-height:.98;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.who .intro{max-width:60ch;margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.conds{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--hair-bone);border:1.5px solid var(--hair-bone)}
.cond{background:var(--ink);padding:clamp(1.4rem,3vw,2.2rem)}
.cond .n{font-weight:700;font-size:var(--fs-label);letter-spacing:.2em}
.cond h3{font-size:var(--fs-h2);margin-top:.6rem;max-width:18ch}
.who .repel{margin-top:2rem;font-size:var(--fs-lead);font-weight:300;max-width:44ch}

/* practice */
.practice{border-top:1.5px solid var(--hair-bone)}
.practice .lead{max-width:62ch}

/* proof reserved */
.proof .slot{opacity:.85}

/* closing band */
.closing{border-top:1.5px solid var(--hair-bone)}
.closing .strike{font-size:var(--fs-display);font-weight:800;line-height:1.0;letter-spacing:-.02em;max-width:22ch}
.closing .cta{margin-top:clamp(2rem,4vw,3rem);display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.closing .nsh{font-size:var(--fs-lead);font-weight:300}

/* products (offer page) */
.products{border-top:1.5px solid var(--hair-bone)}
.product{display:grid;grid-template-columns:1fr 2fr;gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.8rem,4vw,2.8rem);border-bottom:1.5px solid var(--hair-bone)}
.product .head .name{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em}
.product .head .price{font-size:var(--fs-lead);font-weight:300;margin-top:.3rem}
.product dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;max-width:60ch}
.product dt{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7}
.product dd{font-size:var(--fs-body)}

/* method steps (numbered list) */
.method-steps{border-top:1.5px solid var(--hair-bone)}
.mstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.6rem,3.5vw,2.4rem);border-bottom:1.5px solid var(--hair-bone)}
.mstep .n{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;opacity:.6}
.mstep h3{font-size:var(--fs-h2);margin-bottom:.5rem}
.mstep p{max-width:56ch}

/* about blocks */
.about-block{border-top:1.5px solid var(--hair-bone)}
.about-block h2{font-size:var(--fs-h1);max-width:16ch;margin-bottom:1.2rem}
.about-block .body{max-width:60ch}
.about-block .body + .body{margin-top:1.1rem}
.about-block .lead{max-width:56ch}

/* teardown form */
.form-wrap{border-top:1.5px solid var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
form.teardown{max-width:640px;margin-top:.5rem}
.field{margin-bottom:1.6rem}
.field label{display:block;font-weight:700;font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.55rem}
.field input{width:100%;font-family:inherit;font-size:1.1rem;padding:.85rem 0;background:transparent;
  border:none;border-bottom:1.5px solid var(--ink);color:var(--ink)}
.field input::placeholder{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.field .err{display:none;margin-top:.4rem;font-size:.85rem;font-weight:600}
.field.invalid .err{display:block}.field.invalid input{border-bottom-width:2.5px}
.submit{margin-top:2rem}
.sent{display:none;border:1.5px solid var(--ink);padding:clamp(1.4rem,3vw,2.2rem);margin-top:.5rem;max-width:640px}
.sent.show{display:block}.sent h3{font-size:var(--fs-h2);margin-bottom:.6rem}
.honest .big{font-size:var(--fs-h1);max-width:14ch}
.honest p{margin-top:1.3rem;font-size:var(--fs-lead);font-weight:300;max-width:44ch}
.honest .keep{margin-top:1.1rem;font-weight:800;font-size:var(--fs-h2);letter-spacing:-.02em}
.reassure{border-top:1.5px solid var(--hair-ink)}
.reassure ul{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2rem;font-weight:300;font-size:var(--fs-lead)}

/* footer */
.site-foot{background:var(--ink);color:var(--bone);padding-block:clamp(2.5rem,5vw,4rem)}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
.site-foot .brand{font-size:1.5rem}
.site-foot .tag{font-size:var(--fs-lead);font-weight:300;margin-top:.4rem}
.site-foot .cols{display:flex;gap:clamp(2rem,5vw,5rem);flex-wrap:wrap}
.site-foot .col a{display:inline-block;margin-bottom:.35rem;font-size:.95rem;position:relative;padding-block:.3rem}
.site-foot .col .label{margin-bottom:.9rem;opacity:.7}
.site-foot .col a[aria-disabled="true"]{opacity:.4;pointer-events:none}
.site-foot .legal{width:100%;margin-top:1.5rem;padding-top:1.5rem;border-top:1.5px solid var(--hair-bone);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;opacity:.7}

/* ============================================================
   MOTION  ·  one language, used with restraint
   - the wordmark / page-h1 clip-reveal on load  (.reveal)
   - a staggered rise for the hero's own content on load
   - a single scroll-reveal gesture (rise + fade) for section
     headings and one level of grouped blocks  ([data-reveal])
   All transform + opacity only. Triggers once. Fully disabled
   under prefers-reduced-motion.
   ============================================================ */
.reveal{clip-path:inset(0 100% 0 0)}
body.loaded .reveal{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease)}

/* Progressive enhancement: nothing is hidden by CSS default. main.js "arms"
   only the elements that are BELOW the fold at load (adds .reveal-armed), then
   reveals them on scroll (.is-in). No-JS, above-the-fold, no IntersectionObserver
   and reduced-motion all skip arming — content just shows. A pure-CSS backstop
   still un-hides anything armed after 3s, so a JS error can never strand it. */
@keyframes reveal-backstop{to{opacity:1;transform:none}}

.reveal-armed{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-3) var(--ease-io),transform var(--dur-3) var(--ease-io);
  animation:reveal-backstop .01s linear 4s forwards}
.reveal-armed.is-in,
[data-reveal-stagger].is-in > .reveal-armed{opacity:1;transform:none}
[data-reveal-stagger].is-in > .reveal-armed:nth-child(2){transition-delay:.07s}
[data-reveal-stagger].is-in > .reveal-armed:nth-child(3){transition-delay:.14s}
[data-reveal-stagger].is-in > .reveal-armed:nth-child(4){transition-delay:.21s}
[data-reveal-stagger].is-in > .reveal-armed:nth-child(5){transition-delay:.28s}
[data-reveal-stagger].is-in > .reveal-armed:nth-child(6){transition-delay:.35s}

/* hero content — a staggered rise on load (always above the fold) */
.js .hero-lower > *,.js .hero .art-plate{opacity:0;transform:translateY(14px);
  animation:reveal-backstop .01s linear 2.4s forwards}
.js body.loaded .hero-lower > *{opacity:1;transform:none;
  transition:opacity var(--dur-3) var(--ease-io),transform var(--dur-3) var(--ease-io)}
.js body.loaded .hero-lower > :nth-child(1){transition-delay:.34s}
.js body.loaded .hero-lower > :nth-child(2){transition-delay:.42s}
.js body.loaded .hero-lower > :nth-child(3){transition-delay:.5s}
.js .hero .art-plate{transform:translateY(20px)}
.js body.loaded .hero .art-plate{opacity:1;transform:none;
  transition:opacity var(--dur-3) var(--ease-io) .6s,transform var(--dur-3) var(--ease-io) .6s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{clip-path:none}
  .reveal-armed,.js .hero-lower > *,.js .hero .art-plate{opacity:1;transform:none;animation:none}
}

/* content-row micro-interactions — subtle, editorial, pointer only */
@media (hover:hover){
  .rung,.mstep .n,.product .head .name,.beat .n{transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
  .rung:hover .name{transform:translateX(10px)}
  .rung:hover{border-color:currentColor}
  .mstep:hover .n{opacity:1;transform:translateX(4px)}
  .product:hover .head .name{transform:translateX(6px)}
  .cond{transition:background var(--dur-2) var(--ease)}
  .cond:hover .n{opacity:1}
}

/* header layout with the new head-end cluster */
.row{gap:clamp(1rem,2.4vw,2rem)}
nav.main{margin-left:auto}
.head-end{display:flex;align-items:center;gap:.9rem}

/* responsive — mobile has its own emphasis */
@media (max-width:860px){
  .beats,.steps{grid-template-columns:1fr;gap:0}
  .beat{border-top:none;border-bottom:1.5px solid currentColor;padding-block:1.4rem}
  .beat:first-child{border-top:3px solid currentColor}
  .conds{grid-template-columns:1fr}
  .product{grid-template-columns:1fr;gap:1rem}
  .mstep{grid-template-columns:1fr;gap:.4rem}
}
@media (max-width:640px){
  .hero .top .meta.r{display:none}
  .rung{flex-direction:column;gap:.2rem}

  /* mobile navigation: toggle + drop panel. Teardown CTA stays in the bar. */
  .nav-toggle{display:block}
  nav.main{margin-left:0;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);color:var(--bone);
    padding:.5rem var(--pad-x) 1.4rem;
    border-bottom:1.5px solid var(--ink);
    clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;pointer-events:none;
    transition:clip-path var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  .menu-open nav.main{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;pointer-events:auto;
    transition:clip-path var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease),visibility 0s}
  nav.main a.nav{font-size:1.5rem;font-weight:600;padding-block:1rem;
    border-bottom:1px solid var(--hair-bone);
    opacity:0;transform:translateY(8px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
  nav.main a.nav::after{background:var(--bone)}
  .menu-open nav.main a.nav{opacity:1;transform:none}
  .menu-open nav.main a.nav:nth-child(1){transition-delay:.06s}
  .menu-open nav.main a.nav:nth-child(2){transition-delay:.11s}
  .menu-open nav.main a.nav:nth-child(3){transition-delay:.16s}
  .menu-open nav.main a.nav:nth-child(4){transition-delay:.21s}
  .menu-open{overflow:hidden}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  nav.main{transition:none}
  nav.main a.nav{opacity:1;transform:none}
}

/* ============================================================
   FIELD NOTES  ·  the editorial log (notes.html)
   Discipline: clean Helvetica editorial + ONE intervention —
   the ghosted herald in a field of negative space. Mono only
   for the ledger's own numbering and the footnote apparatus.
   No ornament, no drop cap, no blue on the UI.
   ============================================================ */
.fn{padding-block:clamp(2.5rem,6vw,5rem) 0}
.fn-stage{position:relative;overflow:hidden}

/* the one intervention: the herald, ghosted and bled off one edge */
.fn-herald{position:absolute;top:clamp(6rem,16vw,13rem);right:-4%;z-index:0;
  width:min(54vw,620px);opacity:.16;filter:grayscale(1);mix-blend-mode:multiply;
  pointer-events:none}
.fn-masthead,.fn-body,.fn-foot{position:relative;z-index:1}

/* masthead — Helvetica only; carried by scale, spacing, alignment */
.fn-kicker{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.fn-title{font-family:var(--heraldic);font-weight:400;letter-spacing:0;
  font-size:clamp(2.1rem,7vw,5rem);line-height:1.06;margin:.9rem 0 0;max-width:15ch}
.fn-standfirst{font-size:var(--fs-lead);font-weight:300;line-height:1.4;
  max-width:50ch;margin-top:1.5rem}
.fn-byline{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  opacity:.5;margin-top:1.6rem}

/* body: clean ledger + quiet margin asides */
.fn-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,22vw,280px);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2.8rem,6vw,4.8rem)}
.fn-list{list-style:none}
.fn-list li{display:grid;grid-template-columns:3.2ch 1fr;gap:1.1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--hair-ink)}
.fn-list li:first-child{border-top:1.5px solid var(--ink)}
.fn-i{font-family:var(--mono);font-size:.8rem;opacity:.4;font-variant-numeric:tabular-nums}
.fn-e{font-size:var(--fs-body);line-height:1.45;max-width:58ch}
.fn-list li.is-flag{background:var(--ink);color:var(--bone);border-color:transparent}
.fn-list li.is-flag .fn-i{opacity:.55;color:var(--bone)}
.fn-list li.is-blank .fn-e{opacity:.28}

.fn-margin{font-size:.95rem}
.fn-margin h2{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.45;margin-bottom:1.3rem}
.fn-note{font-family:var(--serif);font-style:italic;line-height:1.5;
  padding-left:1rem;border-left:1.5px solid var(--hair-ink);margin-bottom:1.7rem}
.fn-note b{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-bottom:.4rem}

/* footnotes — apparatus, quiet */
.fn-foot{margin-top:clamp(3rem,7vw,5.5rem)}
.fn-rule{border:none;border-top:1.5px solid var(--ink);margin-bottom:1.8rem}
.fn-foot h2{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.45;margin-bottom:1.2rem}
.fn-footnotes{font-family:var(--mono);font-size:.78rem;line-height:1.7;
  padding-left:2.6ch;max-width:74ch}
.fn-footnotes li{margin-bottom:.8rem}
.fn-footnotes li::marker{color:color-mix(in srgb,var(--ink) 38%,transparent)}
.fn-footnotes i{font-style:italic}

@media (max-width:860px){
  .fn-body{grid-template-columns:1fr;gap:2.4rem}
  .fn-herald{position:static;display:block;width:62%;max-width:250px;opacity:.12;
    margin:clamp(1.8rem,6vw,3rem) auto clamp(.4rem,2vw,1rem)}
  .fn-margin{border-top:1.5px solid var(--hair-ink);padding-top:1.8rem}
}
@media (max-width:640px){
  .fn-list li{grid-template-columns:2.6ch 1fr;gap:.8rem}
}

/* ============================================================
   MANUSCRIPT MODE  ·  manuscript.html
   assets/manuscript-frame.png is a FINISHED, IMMUTABLE HORN
   asset. It is shown whole, never distorted, never recoloured.
   Helvetica content is set into its inner field. Nothing is
   added to the artwork. Blue stays out of this page entirely.
   Measured inner field: ~20% L/R, ~13% top, ~20% bottom.
   ============================================================ */
.ms-lead{padding-block:clamp(3rem,7vw,5.5rem) 0}
.ms-lead .lead{max-width:38ch;margin-top:1rem}
.ms-sep{border:0;border-top:1.5px solid var(--ink);margin-top:clamp(2.4rem,6vw,4rem)}

.page{--fw:clamp(620px,66vw,880px);--in-x:24%;--in-t:17%;--in-b:22%;
  position:relative;width:var(--fw);max-width:100%;
  margin:clamp(2.4rem,6vw,5rem) auto clamp(3rem,8vw,7rem)}
.page__frame{display:block;width:100%}
.page__frame img{display:block;width:100%;height:auto}
.ms-band{display:none}

/* content set into the inner field (absolute over the artwork) */
.ms-plate,.ms-textbox{position:absolute;left:var(--in-x);right:var(--in-x)}
.ms-plate{top:var(--in-t)}
.ms-textbox{top:calc(var(--in-t) + 19%);bottom:var(--in-b);
  display:flex;flex-direction:column;overflow:hidden}

.ms-head{display:flex;justify-content:space-between;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:color-mix(in srgb,var(--ink) 52%,transparent)}
.ms-title{font-family:var(--heraldic);font-weight:400;letter-spacing:0;text-transform:none;
  font-size:clamp(1.9rem,4.5vw,3.3rem);line-height:1.1;margin-top:.7rem;max-width:12ch}
.ms-intro{font-size:clamp(1.02rem,1.5vw,1.28rem);font-weight:300;line-height:1.36;
  margin-bottom:1.15rem}
.ms-textbox p{font-size:clamp(.9rem,1vw,1rem);line-height:1.5;margin-bottom:.85rem;max-width:52ch}
.ms-colophon{margin-top:clamp(1.8rem,4.5vw,3rem);margin-bottom:0;padding-top:1rem;
  border-top:1px solid var(--hair-ink);
  font-size:.68rem;letter-spacing:.05em;line-height:1.7;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 58%,transparent)}
.ms-colophon a{text-decoration:underline;text-underline-offset:2px}
.ms-folio{position:absolute;left:0;right:0;bottom:calc(var(--in-b) - 4%);
  text-align:center;font-size:.8rem;letter-spacing:.32em;
  color:color-mix(in srgb,var(--ink) 44%,transparent)}

/* entrance — a plain fade, no transform. Still for reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .page__frame{opacity:0;animation:ms-fade .55s ease .05s forwards}
  .ms-plate{opacity:0;animation:ms-fade .45s ease .4s forwards}
  .ms-textbox{opacity:0;animation:ms-fade .45s ease .55s forwards}
  .ms-folio{opacity:0;animation:ms-fade .45s ease .7s forwards}
}
@keyframes ms-fade{to{opacity:1}}

/* tablet — same composition, scaled down (all offsets are %) */
@media (max-width:900px){ .page{--fw:min(92vw,660px)} }

/* mobile — recompose: crop the frame to a top + bottom band (crest kept
   whole in the bottom band, undistorted via object-fit) and let the reading
   text flow between them as a normal HORN column. */
@media (max-width:600px){
  .page{--fw:100%;margin:clamp(1.6rem,5vw,2.4rem) auto clamp(2rem,7vw,3rem)}
  .page__frame{display:none}
  .ms-band{display:block;width:100%;object-fit:cover}
  .ms-band--top{height:clamp(58px,17vw,92px);object-position:top center}
  .ms-band--bot{height:clamp(92px,27vw,144px);object-position:bottom center}
  .ms-plate{position:static;padding:clamp(2rem,8vw,3rem) var(--pad-x) 0}
  .ms-title{font-size:clamp(1.7rem,7.5vw,2.3rem);max-width:none}
  .ms-textbox{position:static;overflow:visible;max-width:62ch;margin-inline:auto;
    padding:clamp(1.5rem,6vw,2.2rem) var(--pad-x) 0}
  .ms-textbox p{max-width:none}
  .ms-colophon{margin-top:1.6rem}
  .ms-folio{position:static;padding:1.4rem 0 clamp(1.8rem,7vw,2.6rem)}
}

/* ============================================================
   FRAME PLATE  ·  the ornamental frames as a family
   Each frame asset is a finished, immutable HORN artefact shown
   whole (never distorted) with Helvetica content set into its
   inner field. Per instance, set --pw (plate width) and
   --px/--pt/--pb (inner-field insets measured from that asset).
   Used selectively — NOT on every page, NOT as a card.
   ============================================================ */
.plate{position:relative;width:var(--pw,clamp(640px,64vw,960px));max-width:100%;margin-inline:auto}
.plate__frame{display:block;width:100%}
.plate__frame img{display:block;width:100%;height:auto}
.plate__band{display:none}
.plate__field{position:absolute;left:var(--px);right:var(--px);top:var(--pt);bottom:var(--pb);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .plate__frame{opacity:0;animation:ms-fade .55s ease .05s forwards}
  .plate__field{opacity:0;animation:ms-fade .45s ease .45s forwards}
}
@media (max-width:600px){
  .plate{--pw:100%}
  .plate__frame{display:none}
  .plate__band{display:block;width:100%;object-fit:cover}
  .plate__band--top{height:clamp(52px,15vw,88px);object-position:top center}
  .plate__band--bot{height:clamp(84px,25vw,136px);object-position:bottom center}
  .plate__field{position:static;overflow:visible;justify-content:flex-start;
    padding:clamp(1.6rem,7vw,2.4rem) var(--pad-x)}
}

/* OFFER — the proclamation. Frame B (landscape, birds, crest) holds the
   ladder like a formal price-bill, in a large field of empty paper.
   The full detail stays below, unframed and clean. */
.proclaim{padding-block:clamp(3.5rem,11vw,9rem)}
.proclaim .plate{--pw:clamp(640px,72vw,1180px);--px:20%;--pt:23%;--pb:29%}
.plate__field{text-align:center;align-items:center}
.pl-kicker{font-size:var(--fs-label);letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:color-mix(in srgb,var(--ink) 52%,transparent)}
.pl-lead{font-size:clamp(1.35rem,2.6vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  margin-top:clamp(.7rem,1.6vw,1.3rem)}
.pl-foot{margin-top:clamp(.9rem,2vw,1.6rem);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 52%,transparent)}
.products--detail{border-top:1.5px solid var(--hair-ink)}
.products--detail .sec-label{display:block;font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;opacity:.55;margin-bottom:clamp(1.8rem,4vw,3rem)}
@media (max-width:600px){
  .proclaim{padding-block:clamp(2.5rem,9vw,4rem)}
}

/* ============================================================
   404  ·  not found, still HORN
   Reuses the wordmark scale + the clip-reveal. One way home.
   ============================================================ */
.nf{min-height:62vh;padding-top:clamp(3rem,8vw,7rem);
  display:flex;flex-direction:column;justify-content:center}
.nf .code{font-size:var(--fs-wordmark);font-weight:800;letter-spacing:-.045em;
  line-height:.82;text-transform:uppercase}
.nf h1{font-family:var(--heraldic);font-weight:400;letter-spacing:0;
  font-size:var(--fs-display);line-height:1.06;max-width:15ch;
  margin-top:clamp(1rem,3vw,2.2rem)}
.nf .lead{margin-top:1.4rem;max-width:40ch}
.nf .cta{margin-top:clamp(2rem,4.5vw,3.4rem);display:flex;align-items:center;
  gap:clamp(1.4rem,3vw,2.4rem);flex-wrap:wrap}

/* ---- teardown form: honeypot + send states (Netlify Forms) ---- */
.teardown .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.teardown .form-err{margin-top:1rem;font-size:var(--fs-body);color:var(--ink)}
.teardown .form-err::before{content:"— ";}
.teardown .btn[disabled]{opacity:.55;cursor:progress}