/* =========================================================================
   OAKRIDGE JOINERY · site-2026.css  (shared layer: tokens, base, chrome, forms, image utilities)
   Pages link this file plus home-2026.css (home) or page-specific layers later.
   -------------------------------------------------------------------------
   DIRECTION: "the shop drawing". Joiners work from measured drawings and cut lists, so the
   site reads like one: precise hairlines with end ticks, a numbered cut list for services,
   generous paper, and one dark walnut band. Brand palette from the source README:
   cream (paper), ink, walnut, oak, olive. ONE action colour: olive (--brand).
   Display: Fraunces (variable opsz/wght, self-hosted). UI/body: Hanken Grotesk (self-hosted).
   Variable names never use the generic highlight-colour name; brand names only.

   CONTRAST (WCAG 2.x, computed)
     --ink #1f1a16 on --paper #f5f1ea 16.0:1 · --ink-soft #463d36 9.6:1 · --muted #5b5047 7.0:1 (6.1 on --paper-2)
     --brand #3e4c36: white on brand 9.6:1 · --brand-hover #2c3726 12.6:1 · brand text on paper 8.6:1
     walnut band --walnut #2a221c: --on-dark #f3ece1 14.3:1 · --on-dark-dim #cbbfae 9.6:1 · --oak-lit #d9b98c 9.4:1
     --oak #a6845a is used ONLY for hairlines/ticks/decoration (never body text)
   READABILITY: body 17px, nothing under 14px, taps >= 44px, 4px spacing scale, tabular figures.
   NO MOTION: no animations, transitions, smooth scroll, hover transforms. Hover = instant colour swap.
   ========================================================================= */

@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia"),local("Gelasio");size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Arimo"),local("Liberation Sans");size-adjust:99%;ascent-override:96%;descent-override:26%;line-gap-override:0%}

:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;--s10:64px;--s11:80px;--s12:96px;--s13:128px;
  --wrap:1240px;--gutter:clamp(20px,4vw,48px);--hdr:72px;
  --paper:#f5f1ea;--paper-2:#ece5d9;--surface:#fbf9f5;--white:#fff;
  --ink:#1f1a16;--ink-soft:#463d36;--muted:#5b5047;
  --line:rgba(31,26,22,.14);--line-strong:rgba(31,26,22,.32);
  --walnut:#2a221c;--walnut-2:#352b24;--walnut-line:rgba(243,236,225,.16);
  --on-dark:#f3ece1;--on-dark-dim:#cbbfae;--oak:#a6845a;--oak-lit:#d9b98c;
  --brand:#3e4c36;--brand-hover:#2c3726;--brand-tint:#e3e7da;
  --danger:#8a2f22;--ok:#2f5a2a;
  --f-display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --f-body:"Hanken Grotesk","Hanken Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:2px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
*,*::before,*::after{animation:none!important;transition:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:400;font-optical-sizing:auto;text-wrap:balance;color:var(--ink)}
h2{font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.025em;font-variation-settings:"opsz" 40}
h3{font-size:clamp(21px,1.9vw,25px);line-height:1.2;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.band-dark :focus-visible,.ftr :focus-visible{outline-color:var(--oak-lit)}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:var(--s4);top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-weight:600}
.skip:focus{top:var(--s3)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Dimension-line label: the signature detail. A hairline with end ticks, label sits on it. */
.dim{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s6);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.dim::before{content:"";flex:0 0 28px;height:11px;border-left:1px solid var(--oak);border-right:1px solid var(--oak);background:linear-gradient(var(--oak),var(--oak)) center/100% 1px no-repeat}
.dim .no{color:var(--muted);font-weight:500;letter-spacing:.06em}
.band-dark .dim{color:var(--oak-lit)}
.band-dark .dim .no{color:var(--on-dark-dim)}

/* Buttons: white text on the olive fill only. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s6);border:1px solid transparent;border-radius:var(--r);font:600 16px/1.2 var(--f-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-hover)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band-dark .btn-line,.ftr .btn-line{color:var(--on-dark);border-color:rgba(243,236,225,.4)}
.band-dark .btn-line:hover,.ftr .btn-line:hover{background:var(--on-dark);color:var(--walnut)}
.tlink{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--oak)}
.tlink:hover{color:var(--brand);text-decoration-color:currentColor}
.tlink svg{width:16px;height:16px;flex:none}

/* Image utilities. Fades are CSS masks, never baked into files. */
.img-frame{position:relative;background:var(--paper-2);overflow:hidden}
.img-frame picture{display:block;height:100%}
.img-frame img{width:100%;height:100%;object-fit:cover}
[hidden]{display:none!important}
.img-fade{--fl:0%;--fr:0%;--fb:0%;--ft:0%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%),linear-gradient(0deg,transparent 0,#000 var(--fb),#000 calc(100% - var(--ft)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%),linear-gradient(0deg,transparent 0,#000 var(--fb),#000 calc(100% - var(--ft)),transparent 100%);
  mask-composite:intersect}

/* ---------------- Header + mega menu ---------------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:var(--s6);min-height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:none;color:var(--ink);flex:none}
.brand svg{width:32px;height:32px;flex:none}
.brand-name{display:block;font:500 23px/1 var(--f-display);letter-spacing:-.02em}
.brand-sub{display:block;margin-top:3px;font-size:14px;line-height:1;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav{margin-left:auto}
.nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin:0;padding:0;list-style:none}
.nav-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s3);border:0;background:none;font:500 16px/1 var(--f-body);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.nav-a:hover,.nav-a[aria-expanded="true"]{color:var(--brand)}
.nav-a .chev{width:12px;height:12px;flex:none}
.nav-a[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-cta{display:none}
.hdr-cta{flex:none}
.menu-btn{display:none}
.mega{display:none}

/* Mega panel (JS-enhanced, desktop >= 1100px) */
.js .mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line-strong);box-shadow:0 24px 48px -32px rgba(31,26,22,.35);max-height:calc(100dvh - var(--hdr));overflow-y:auto;overscroll-behavior:contain}
.js .mega.is-open{display:block}
.mega-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr) minmax(0,1.1fr);gap:var(--s9);padding-block:var(--s9) var(--s10)}
.mega-intro .dim{margin-bottom:var(--s4)}
.mega-intro p{font-size:16px;color:var(--muted);max-width:30ch}
.mega-intro .tlink{margin-top:var(--s4)}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s6);margin:0;padding:0;list-style:none;align-content:start}
.mega-links a{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);align-items:center;min-height:80px;padding:var(--s2);margin:0 calc(-1*var(--s2));text-decoration:none;color:var(--ink)}
.mega-links a:hover{background:var(--paper)}
.mega-links a:hover .ml-t{color:var(--brand)}
.mega-links img{width:64px;height:64px;object-fit:cover}
.ml-t{display:block;font:500 19px/1.2 var(--f-display);letter-spacing:-.01em}
.ml-d{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--muted)}
.mega-feature{display:grid;grid-template-rows:auto 1fr;background:var(--walnut);color:var(--on-dark);text-decoration:none}
.mega-feature img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mega-feature span{display:block;padding:var(--s5) var(--s6) var(--s6)}
.mega-feature .mf-k{padding:0;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oak-lit)}
.mega-feature .mf-t{padding:0;margin-top:var(--s2);font:400 24px/1.15 var(--f-display);color:var(--on-dark)}
.mega-feature .mf-d{padding:0;margin-top:var(--s2);font-size:15px;color:var(--on-dark-dim)}
.mega-feature:hover .mf-t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* Drawer: below 1100px with JS */
@media (max-width:1099.98px){
  .js .menu-btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:0 var(--s3);margin-left:auto;border:1px solid var(--line-strong);border-radius:var(--r);background:transparent;color:var(--ink);font:600 16px/1 var(--f-body);cursor:pointer}
  .js .menu-btn:hover{background:var(--ink);color:var(--paper)}
  .menu-lines{position:relative;width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
  .menu-lines::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
  .menu-btn[aria-expanded="true"] .menu-lines{border-color:transparent}
  .menu-btn[aria-expanded="true"] .menu-lines::after{top:3px;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-lines::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor;transform:rotate(-45deg)}
  .js .hdr-cta{display:none}
  .js .nav{display:none;position:fixed;left:0;right:0;top:var(--hdr-h,var(--hdr));bottom:0;margin:0;background:var(--surface);border-top:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;padding:var(--s4) var(--gutter) var(--s10)}
  .js .nav.is-open{display:block}
  .js .nav-list{display:block}
  .js .nav-list>li{border-bottom:1px solid var(--line)}
  .js .nav-a{width:100%;justify-content:space-between;min-height:56px;padding:0;font:400 24px/1.1 var(--f-display);letter-spacing:-.01em}
  .js .nav-a .chev{width:16px;height:16px}
  .js .mega{position:static;border:0;box-shadow:none;background:transparent;max-height:none;overflow:visible}
  .js .mega .wrap{width:100%}
  .mega-in{grid-template-columns:1fr;gap:var(--s5);padding:0 0 var(--s5)}
  .mega-intro{display:none}
  .mega-links{grid-template-columns:1fr}
  .mega-links a{grid-template-columns:48px 1fr;min-height:64px}
  .mega-links img{width:48px;height:48px}
  .mega-feature{grid-template-columns:96px 1fr;grid-template-rows:auto}
  .mega-feature img{height:100%;aspect-ratio:auto}
  .mega-feature span{padding:var(--s3) var(--s4)}
  .mega-feature .mf-t{font-size:20px;margin-top:2px}
  .mega-feature .mf-d{display:none}
  .js .nav-cta{display:flex;width:100%;margin-top:var(--s6)}
  body.nav-locked{overflow:hidden}
}
/* No JS: everything stays reachable as a plain row of links */
@media (max-width:1099.98px){
  html:not(.js) .hdr{position:static}
  html:not(.js) .hdr-in{flex-wrap:wrap;padding-block:var(--s3);gap:var(--s2) var(--s4)}
  html:not(.js) .nav{order:3;flex:1 0 100%;margin-left:0}
  html:not(.js) .nav-a{padding-inline:var(--s2) var(--s3)}
}
@media (max-width:420px){.hdr-in{gap:var(--s3)} .brand-name{font-size:21px} .brand svg{width:28px;height:28px}}

/* ---------------- Footer ---------------- */
.ftr{background:var(--walnut);color:var(--on-dark-dim);font-size:15px;line-height:1.6}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);gap:var(--s9);padding-block:var(--s11) var(--s9)}
.ftr .brand{color:var(--on-dark)}
.ftr .brand-sub{color:var(--on-dark-dim)}
.ftr-invite{margin-top:var(--s5);max-width:40ch}
.ftr-cta{margin-top:var(--s6)}
.ftr h2{font:600 14px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--oak-lit);margin-bottom:var(--s3)}
.ftr-links{margin:0;padding:0;list-style:none}
.ftr-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none}
.ftr-links a:hover{color:var(--oak-lit);text-decoration:underline;text-underline-offset:4px}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2) var(--s6);padding-block:var(--s4);border-top:1px solid var(--walnut-line);font-size:14px}
.ftr-bot a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-underline-offset:4px}
.ftr-bot a:hover{color:var(--oak-lit)}
@media (max-width:899.98px){.ftr-top{grid-template-columns:1fr 1fr;gap:var(--s8)} .ftr-brand{grid-column:1/-1}}
@media (max-width:479.98px){.ftr-top{grid-template-columns:1fr;padding-top:var(--s10)}}

/* ---------------- Forms kit (core) ---------------- */
.fld{display:grid;gap:var(--s2);align-content:start}
.fld label,.fs legend{font-weight:600;font-size:16px;color:var(--ink)}
.fld .opt{font-weight:400;color:var(--muted)}
.req{color:var(--danger)}
.help{font-size:14px;color:var(--muted)}
.inp,.sel,.txa{width:100%;min-height:48px;padding:var(--s3) var(--s4);border:1px solid #a89c8e;border-radius:var(--r);background:var(--white);color:var(--ink);font:400 16px/1.4 var(--f-body)}
.txa{min-height:132px;resize:vertical}
.inp:hover,.sel:hover,.txa:hover{border-color:var(--ink)}
.inp:focus-visible,.sel:focus-visible,.txa:focus-visible{outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.inp:user-invalid,.sel:user-invalid,.txa:user-invalid{border-color:var(--danger);box-shadow:inset 3px 0 0 var(--danger)}
.sel{appearance:none;padding-right:var(--s10);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f1a16' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center}
@supports (appearance:base-select){
  .sel,.sel::picker(select){appearance:base-select}
  .sel{background-image:none;display:flex;align-items:center;block-size:48px}
  .sel::picker-icon{content:"";width:12px;height:8px;margin-left:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f1a16' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center}
  .sel::picker(select){border:1px solid var(--line-strong);border-radius:var(--r);background:var(--white);padding:var(--s1);box-shadow:0 16px 32px -20px rgba(31,26,22,.4)}
  .sel option{min-height:44px;padding:var(--s2) var(--s3);font-size:16px}
  .sel option:hover,.sel option:focus-visible{background:var(--paper)}
  .sel option:checked{font-weight:600}
  .sel option::checkmark{content:"";}
}
.fs{margin:0;padding:0;border:0;min-width:0;display:grid;gap:var(--s5)}
.fs legend{padding:0;margin-bottom:var(--s4);font:600 14px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}

/* ---------------- Simple text page (credits) ---------------- */
.pg-simple{padding-block:clamp(56px,8vw,112px)}
.pg-simple h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.035em}
.pg-lede{margin-top:var(--s6);max-width:40em;color:var(--ink-soft)}
.pg-table{margin-top:var(--s8);overflow-x:auto;border-top:1px solid var(--ink)}
.pg-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.pg-table th,.pg-table td{text-align:left;vertical-align:top;padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line)}
.pg-table th{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-table a{display:inline-block;min-width:44px;padding-block:12px;margin-block:-12px;color:var(--brand);text-underline-offset:3px;overflow-wrap:anywhere}
a,button,summary,select,input,textarea{-webkit-tap-highlight-color:transparent}
html:not(.js) .nav-a .chev{display:none}
/* Current page in the header and footer */
.nav-a[aria-current="page"],.nav-a.is-current{color:var(--brand);box-shadow:inset 0 -2px 0 var(--brand)}
@media (max-width:1099.98px){.js .nav-a[aria-current="page"],.js .nav-a.is-current{box-shadow:none}}
.ftr-links a[aria-current="page"]{color:var(--oak-lit)}