/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Handformed Hotrods (2026-10-05): the progress album.
   Display: Barlow Condensed, the lettering of a number panel, its true italic for the phrase that leans. Reading: Barlow.
   Motifs: photographic prints with a white border and a numbered stage stamp; the yellow primer off their Camaro for
   every mark; a row of overlapping rings, a TIG bead, as the divider. Ground: bare steel. Photographs are the only dark.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --gd:"Barlow Condensed","Barlow Condensed Fallback",Arial,sans-serif;
  --nav-h:100px;
}
body.hf{background:var(--paper);color:var(--body);font-family:var(--sans)}
body.hf main{overflow:clip}
.hf b,.hf strong{font-weight:600}
.hf .gd{font-family:var(--gd);font-weight:700;letter-spacing:0;line-height:.98;color:var(--ink);margin:0;padding-bottom:.1em;text-transform:uppercase}
.hf .gd em{font-style:italic;font-weight:600;color:var(--accent-2)}
.hf h2.gd{font-size:clamp(2.5rem,4.8vw,4.6rem)}
body.hf .eyebrow{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 14px}
.hf .lede{font-size:18px;line-height:1.7;color:var(--muted);max-width:56ch;margin:18px 0 0}
.hf .lede a{color:var(--ink);font-weight:600}
body.hf .stars{color:var(--accent-2);letter-spacing:.1em;font-size:16px}
.hf .sec{padding-block:clamp(84px,10vw,150px)}
.hf .sec-stone{background:var(--stone)}
.hf .sec-wash{background:color-mix(in srgb,var(--accent-lt) 26%,var(--paper))}
.hf .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:860px){.hf .two{grid-template-columns:1fr}}
.hf .grp-head{max-width:880px;margin-bottom:clamp(30px,4vw,54px)}

/* buttons: primer yellow, ink lettering, a pressed-plate corner */
.hf .btn.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:8px;border:2px solid var(--ink);
  background:var(--accent-lt);color:var(--ink);font-family:var(--gd);font-size:21px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  box-shadow:var(--lift-1);transition:transform var(--t-micro,.3s) var(--ease-out,ease),box-shadow var(--t-micro,.3s),background var(--t-micro,.3s),color var(--t-micro,.3s)}
.hf .btn.hbtn:hover{transform:translateY(-2px);background:var(--ink);color:var(--accent-lt);box-shadow:var(--lift-2)}
.hf .btn.hbtn:active{transform:translateY(0)}
.hf .tlink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--accent-lt);text-decoration-thickness:3px;text-underline-offset:7px;transition:text-decoration-color var(--t-micro,.3s),color var(--t-micro,.3s)}
.hf .tlink:hover{text-decoration-color:var(--accent-2);color:var(--accent-2)}
.hf .btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}

/* the print: every photograph off the hero sits in a white border, like the ones Ryan sends */
.hf .print{margin:0;background:var(--paper-2);padding:10px 10px 12px;border:1px solid var(--line);border-radius:4px;box-shadow:var(--lift-2)}
.hf .print img{width:100%;display:block;border-radius:2px;object-fit:cover}
.hf .print figcaption{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px;padding:0 2px}
.hf .print.tilt{transform:rotate(-1.4deg)}
.hf .print.tilt2{transform:rotate(1.2deg)}
@media(max-width:860px){.hf .print.tilt,.hf .print.tilt2{transform:none}}

/* the bead: a TIG weld, stacked rings */
.hf .bead{height:16px;width:min(100%,260px);margin:clamp(40px,6vw,72px) auto;
  background:radial-gradient(circle at 8px 8px,transparent 5px,color-mix(in srgb,var(--ink) 36%,transparent) 5.5px,color-mix(in srgb,var(--ink) 36%,transparent) 6.6px,transparent 7.2px) 0 0/9px 16px repeat-x}

/* ── the notice above the header ── */
.alertbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px;min-height:44px;padding:8px 16px;background:var(--accent-lt);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.35;text-align:center;text-decoration:none;transition:background var(--t-micro,.3s)}
.alertbar b{font-weight:600}
.alertbar .ab-go{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.alertbar:hover{background:color-mix(in srgb,var(--accent-lt) 82%,var(--ink))}

/* ── the header ── */
.nav.hf{background:rgba(238,238,234,.94);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line);z-index:90}
.nav.hf .nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;height:var(--nav-h)}
.nav.hf .brand{margin:0;min-height:44px;display:flex;align-items:center;text-decoration:none}
.nav.hf .brand .lg{height:60px;width:auto;display:block}
.nav.hf .nlinks{justify-self:center;display:flex;gap:30px}
.nav.hf .nlinks a{font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);padding:10px 0;text-decoration:none;position:relative;white-space:nowrap}
.nav.hf .nlinks a::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:3px;background:var(--accent-lt);transform:scaleX(0);transform-origin:left;transition:transform var(--t-micro,.3s) var(--ease-out,ease)}
.nav.hf .nlinks a:hover::after,.nav.hf .nlinks a[aria-current]::after{transform:scaleX(1)}
.nav.hf .ncta{display:flex;align-items:center;gap:16px}
.nav.hf .btn.hbtn{min-height:52px;padding:0 22px;font-size:20px}
.nav.hf .menubtn{border-color:rgba(23,24,26,.28);border-radius:8px}
@media(max-width:1179px){.nav.hf .nlinks{display:none}.nav.hf .menubtn{display:inline-flex}}
@media(max-width:760px){.nav.hf .menubtn{width:auto;padding:0 16px}.nav.hf .m-t{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible}}
@media(max-width:640px){:root{--nav-h:86px}.nav.hf .brand .lg{height:50px}.nav.hf .nav-in{gap:12px}}
@media(max-width:480px){.nav.hf .btn.hbtn{display:none}}
.hf .menu-page .mp-links a span{font-family:var(--gd);font-weight:700;text-transform:uppercase}

/* ── HOME: the fastback in bare metal, the words on it ── */
.hf .hx-flanked{--hx-a:var(--accent-lt)}
.hf .hx-flanked::before{display:none}
.hf .hx-flanked .hx-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,16,.5) 0%,rgba(14,15,16,.76) 16%,rgba(14,15,16,.76) 86%,rgba(14,15,16,.56) 100%)}
.hf .hx-flanked h1{font-family:var(--gd);font-weight:700;text-transform:uppercase;letter-spacing:0;--hx-fs:clamp(3.2rem,7.2vw,7.6rem);--hx-lh:.94;max-width:11ch;padding-bottom:.16em;text-shadow:0 2px 30px rgba(12,14,12,.45)}
.hf .hx-flanked h1 em{font-style:italic;font-weight:600;color:var(--accent-lt)}
.hf .hx-flanked .hx-k{font-family:var(--gd);font-weight:600;font-size:17px;letter-spacing:.22em;color:#FFFBF2;margin-bottom:22px}
.hf .hx-flanked .hx-lab{font-family:var(--gd);font-size:17px;font-weight:600;letter-spacing:.22em}
.hf .hx-flanked .hx-sub{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;max-width:44ch;margin-top:22px}
.hf .hx-flanked .hx-acts{margin-top:30px;gap:14px 28px}
.hf .hx-flanked .hx-btn{background:var(--accent-lt);color:var(--ink);border:2px solid var(--ink);font-family:var(--gd);font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;min-height:56px;border-radius:8px;box-shadow:var(--lift-2);
  transition:transform var(--t-micro,.3s) var(--ease-out,ease),background var(--t-micro,.3s),color var(--t-micro,.3s)}
.hf .hx-flanked .hx-btn:hover{transform:translateY(-2px);background:var(--paper-2);filter:none}
.hf .hx-flanked .hx-tel{color:#FFFBF2;font-family:var(--gd);font-weight:600;font-size:22px;letter-spacing:.04em;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--accent-lt);text-decoration-thickness:3px;text-underline-offset:6px}
.hf .hx-flanked .hx-tel:hover{color:var(--accent-lt)}
.hf .hx-flanked .hx-card{position:static;display:flex;align-items:baseline;gap:12px;width:min(100% - 44px,var(--wrap));margin:30px auto 0;padding:0;
  background:none;box-shadow:none;transform:none;border-radius:0;text-align:left}
.hf .hx-flanked .hx-card::before{content:"\2605\2605\2605\2605\2605";color:var(--accent-lt);font-size:16px;letter-spacing:.08em}
.hf .hx-flanked .hx-card b{font-family:var(--gd);font-weight:700;font-size:1.6rem;line-height:1;color:#FFFBF2}
.hf .hx-flanked .hx-card span{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,251,242,.84)}
@media(max-width:900px){.hf .hx-flanked{padding:70px 0 56px}.hf .hx-flanked .hx-lab{font-size:15px}}

/* ── THE SHOWROOM (2026-10-06, "make the hero image better and more luxury"): the satin-black fastback graded low-key
      and set on its own black (prep-images.py). Desktop: the car on the right, the type on the dark at left, one quiet
      proof line instead of a floating card. ── */
@media(min-width:701px){
  .hf .hx-flanked{place-items:center start;justify-items:stretch;align-content:center;text-align:left}
  .hf .hx-flanked .hx-ph img{object-position:72% 50%}
  .hf .hx-flanked .hx-ph::after{background:linear-gradient(90deg,rgba(5,6,10,.64) 0%,rgba(5,6,10,.42) 30%,rgba(5,6,10,0) 54%)}
  .hf .hx-flanked .hx-row{display:block}
  .hf .hx-flanked .hx-lab{display:none}
  .hf .hx-flanked .hx-k{display:none} /* the hero opens on the headline: label + headline + paragraph is the stack three other bands use (gate SAME OPENING) */
  .hf .hx-flanked h1{margin:0;max-width:9.5ch;text-align:left;text-shadow:none;--hx-fs:clamp(3.2rem,5.6vw,6.6rem)}
  .hf .hx-flanked .hx-sub{margin:24px 0 0;max-width:34ch;text-align:left}
  .hf .hx-flanked .hx-acts{justify-content:flex-start}
}
@media(max-width:700px){.hf .hx-flanked .hx-k{font-size:15px;letter-spacing:.1em;margin-bottom:16px}.hf .hx-flanked{min-height:calc(100svh - var(--nav-h) - 60px)}.hf .hx-flanked h1{--hx-fs-m:clamp(3.1rem,15vw,4.6rem)}.hf .hx-flanked .hx-row{gap:10px}.hf .hx-flanked .hx-lab:last-child{display:none}.hf .hx-flanked .hx-tel{display:none}}

/* ── the four lanes ── */
.hf .lanes-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 56px;align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.hf .lanes-head .lede{margin:0 0 8px}
.hf .lanes-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hf .lanes-list.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hf .lanes-list li{display:grid}
.hf .lanes-list a,.hf .lanes-list.three li{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:4px 12px;padding:10px 10px 22px;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--body);box-shadow:var(--lift-1)}
.hf .lanes-list a{transition:transform var(--t-micro,.3s) var(--ease-out,ease),box-shadow var(--t-micro,.3s)}
.hf .lanes-list a:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--lift-3)}
.hf .ll-ph{grid-column:1/-1;display:block;overflow:hidden;border-radius:2px;margin-bottom:14px}
.hf .ll-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .7s var(--ease-out,ease)}
.hf .lanes-list a:hover .ll-ph img{transform:scale(1.04)}
.hf .lanes-list i{grid-row:span 2;align-self:start;font-family:var(--gd);font-style:normal;font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--ink);background:var(--accent-lt);border-radius:100px;min-width:38px;height:38px;display:grid;place-items:center;margin-left:8px}
.hf .ll-n{font-family:var(--gd);font-weight:700;font-size:1.65rem;line-height:1.02;text-transform:uppercase;color:var(--ink);padding-right:8px}
.hf .ll-p{font-size:16px;line-height:1.5;color:var(--muted);padding-right:8px}
@media(max-width:1020px){.hf .lanes-list,.hf .lanes-list.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.hf .lanes-head{grid-template-columns:1fr}}
@media(max-width:560px){.hf .lanes-list,.hf .lanes-list.three{grid-template-columns:1fr}.hf .lanes-list a,.hf .lanes-list.three li{grid-template-columns:112px auto minmax(0,1fr);padding:10px;align-items:start}.hf .ll-ph{grid-column:1;grid-row:1/3;margin:0}.hf .ll-ph img{aspect-ratio:1}.hf .lanes-list i{margin-left:0}}

/* ── THE ALBUM: one job in the stages it happened. Radios drive it, so it works with scripts off. ── */
.hf .al-head{max-width:860px;margin-bottom:clamp(30px,4vw,54px)}
.hf .album{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.hf .al-r{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.hf .al-prints{display:grid}
.hf .al-bench{padding:14px 16px}
.hf .al-print{grid-area:1/1;margin:0;background:var(--paper-2);padding:12px 12px 16px;border:1px solid var(--line);border-radius:4px;box-shadow:var(--lift-2);
  position:relative;z-index:1;transition:transform .6s var(--ease-out,ease),box-shadow .4s var(--ease-out,ease)}
.hf .al-print:nth-child(1){transform:rotate(-2.4deg) translate(-12px,8px)}
.hf .al-print:nth-child(2){transform:rotate(1.8deg) translate(12px,-6px)}
.hf .al-print:nth-child(3){transform:rotate(-1.2deg) translate(14px,12px)}
.hf .al-print:nth-child(4){transform:rotate(2.6deg) translate(-10px,-10px)}
.hf .al-ph{overflow:hidden;border-radius:2px}
.hf .al-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hf .al-print figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin-top:14px;padding:0 4px}
.hf .al-n{font-family:var(--gd);font-weight:700;font-size:1.5rem;line-height:1;color:var(--ink);background:var(--accent-lt);border-radius:100px;width:52px;height:52px;display:grid;place-items:center}
.hf .al-c{font-size:17px;line-height:1.55;color:var(--body)}
.hf .al-c b{display:block;font-family:var(--gd);font-weight:700;font-size:1.5rem;line-height:1.05;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.hf .al-r:nth-of-type(1):checked~.al-bench .al-print:nth-child(1),
.hf .al-r:nth-of-type(2):checked~.al-bench .al-print:nth-child(2),
.hf .al-r:nth-of-type(3):checked~.al-bench .al-print:nth-child(3),
.hf .al-r:nth-of-type(4):checked~.al-bench .al-print:nth-child(4){z-index:5;transform:rotate(-.6deg);box-shadow:var(--lift-3)}
.hf .al-k{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 10px}
.hf .al-t{font-family:var(--gd);font-weight:700;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1;text-transform:uppercase;color:var(--ink);margin:0 0 24px}
.hf .al-t em{font-style:italic;font-weight:600;color:var(--accent-2)}
.hf .al-tabs{display:grid;gap:10px}
.hf .al-tabs label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:60px;padding:8px 18px 8px 10px;background:var(--paper-2);border:2px solid var(--line);border-radius:8px;cursor:pointer;
  transition:border-color var(--t-micro,.3s),background var(--t-micro,.3s),transform var(--t-micro,.3s) var(--ease-out,ease),box-shadow var(--t-micro,.3s)}
.hf .al-tabs label:hover{border-color:var(--ink);transform:translateX(4px)}
.hf .al-tabs i{font-family:var(--gd);font-style:normal;font-weight:700;font-size:18px;color:var(--ink);background:var(--stone);border-radius:100px;width:42px;height:42px;display:grid;place-items:center;transition:background var(--t-micro,.3s)}
.hf .al-tabs b{font-family:var(--gd);font-weight:700;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.05}
.hf .al-r:nth-of-type(1):checked~.al-side label:nth-child(1),
.hf .al-r:nth-of-type(2):checked~.al-side label:nth-child(2),
.hf .al-r:nth-of-type(3):checked~.al-side label:nth-child(3),
.hf .al-r:nth-of-type(4):checked~.al-side label:nth-child(4){border-color:var(--ink);background:var(--accent-lt);box-shadow:var(--lift-1)}
.hf .al-r:nth-of-type(1):checked~.al-side label:nth-child(1) i,
.hf .al-r:nth-of-type(2):checked~.al-side label:nth-child(2) i,
.hf .al-r:nth-of-type(3):checked~.al-side label:nth-child(3) i,
.hf .al-r:nth-of-type(4):checked~.al-side label:nth-child(4) i{background:var(--paper-2)}
.hf .al-r:nth-of-type(1):focus-visible~.al-side label:nth-child(1),
.hf .al-r:nth-of-type(2):focus-visible~.al-side label:nth-child(2),
.hf .al-r:nth-of-type(3):focus-visible~.al-side label:nth-child(3),
.hf .al-r:nth-of-type(4):focus-visible~.al-side label:nth-child(4){outline:3px solid var(--ink);outline-offset:3px}
.hf .al-more{text-align:center}
@media(max-width:900px){.hf .album{grid-template-columns:1fr;gap:26px}.hf .al-side{order:-1}.hf .al-t{margin-bottom:18px}.hf .al-tabs{grid-template-columns:1fr 1fr}.hf .al-tabs label{min-height:56px;padding:6px 10px 6px 8px;gap:10px}.hf .al-tabs b{font-size:1.1rem}.hf .al-tabs i{width:36px;height:36px;font-size:16px}
  .hf .album .al-print:nth-child(n){transform:none}.hf .al-print{padding:8px 8px 14px}.hf .al-bench{padding:0}.hf .al-n{width:44px;height:44px;font-size:1.3rem}}

/* ── the reviews: a job tag for each, tied to the vehicle ── */
.hf .said-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center;margin-bottom:clamp(30px,4vw,54px)}
.hf .said-big{font-family:var(--gd);font-weight:700;font-size:clamp(5rem,11vw,10rem);line-height:.8;color:var(--ink);margin:0;background:var(--accent-lt);padding:.14em .16em .1em;border-radius:8px;transform:rotate(-3deg);box-shadow:var(--lift-2)}
.hf .said-head .lede{margin-top:12px}
.hf .tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.hf .tags.one{grid-template-columns:1fr}
.hf .tags.wall{display:block;columns:3;column-gap:22px}
.hf .tags.wall .jt{break-inside:avoid;margin-bottom:22px}
.hf .jt{margin:0;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:18px 22px 20px;box-shadow:var(--lift-2)}
.hf .jt-top{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:16px}
.hf .jt-hole{width:20px;height:20px;border-radius:50%;background:var(--stone);box-shadow:inset 0 0 0 2px var(--line);flex:none}
.hf .jt-car{margin:0;font-family:var(--gd);font-weight:700;font-size:1.45rem;line-height:1.05;text-transform:uppercase;color:var(--ink)}
.hf .jt-car span{display:block;font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--accent-txt);margin-top:4px}
.hf .jt blockquote{margin:0}
.hf .jt blockquote p{margin:0;font-size:17px;line-height:1.62;color:var(--body);font-style:normal}
.hf .jt figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:16px}
.hf .jt figcaption b{font-family:var(--gd);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.hf .jt figcaption span:last-child{font-size:15px;color:var(--muted)}
@media(max-width:1020px){.hf .tags.wall{columns:2}}
@media(max-width:860px){.hf .tags{grid-template-columns:1fr}.hf .said-head{grid-template-columns:1fr}.hf .said-big{justify-self:start}}
@media(max-width:640px){.hf .tags.wall{columns:1}}

/* ── inspection ── */
.hf .insp-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.hf .fails{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.hf .fails li{font-family:var(--gd);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.05;text-transform:uppercase;color:var(--ink);padding:16px 0 16px 46px;border-bottom:2px solid var(--ink);position:relative}
.hf .fails li::before{content:'';position:absolute;left:4px;top:50%;width:24px;height:24px;margin-top:-12px;border:3px solid var(--accent-2);border-radius:50%}
.hf .fails li::after{content:'';position:absolute;left:2px;top:50%;width:32px;height:3px;margin-top:-1.5px;background:var(--accent-2);transform:rotate(-45deg)}
@media(max-width:860px){.hf .insp-in{grid-template-columns:1fr}}
.hf .faillist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);border-top:2px solid var(--ink)}
.hf .faillist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:22px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.hf .faillist i{grid-row:span 2;font-family:var(--gd);font-style:normal;font-weight:700;font-size:17px;color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:100px;width:42px;height:42px;display:grid;place-items:center}
.hf .faillist b{font-family:var(--gd);font-weight:700;font-size:1.6rem;line-height:1.05;text-transform:uppercase;color:var(--ink)}
.hf .faillist span{font-size:17px;line-height:1.6;color:var(--body)}
@media(max-width:860px){.hf .faillist{grid-template-columns:1fr}}

/* ── Ryan ── */
.hf .ryan-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.hf .ryan-in .print{max-width:440px}
.hf .ryan-in .print img{aspect-ratio:1}
@media(max-width:860px){.hf .ryan-in{grid-template-columns:1fr}}

/* ── the work order (the quote form) ── */
.hf .req-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.hf .addr{display:grid;gap:6px;margin:26px 0 0;padding-top:16px;border-top:2px solid var(--ink);font-size:16px;line-height:1.5;color:var(--muted)}
.hf .addr a{font-family:var(--gd);font-weight:700;font-size:2rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;line-height:1.1}
.hf .addr a:hover{color:var(--accent-2)}
.hf .bign{font-family:var(--gd);font-weight:700;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.hf .bign:hover{color:var(--accent-2)}
.hf .qf{background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:26px 30px 26px;box-shadow:var(--lift-3)}
.hf .qf-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.hf .qf-head span{font-family:var(--gd);font-weight:700;font-size:1.6rem;text-transform:uppercase;color:var(--ink);background:var(--accent-lt);padding:2px 12px;border-radius:4px}
.hf .qf-head b{font-family:var(--gd);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hf .qf .chipset{margin:0 0 18px}
.hf .qf .chipset legend{font-family:var(--gd);font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.hf .qf .chip{border-radius:8px}
.hf .qf .fld label{font-family:var(--gd);font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hf .qf input,.hf .qf textarea{font-size:17px;border-radius:6px;border:1px solid var(--line);background:var(--paper)}
.hf .qf input[type=file]{font-size:16px;padding:10px}
.hf .qf input:focus,.hf .qf textarea:focus{border-color:var(--ink)}
.hf .qf-foot{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.hf .qf-foot .fnote{margin:0;font-size:15.5px;color:var(--muted)}
.hf .qf-foot .fnote a{color:var(--ink);font-weight:600}
@media(max-width:900px){.hf .req-in{grid-template-columns:1fr}.hf .qf{padding:22px 18px}}
@media(max-width:560px){.hf .qf-head b{display:none}}

/* ── inner page heads ── */
.hf .phead{padding-top:clamp(48px,6vw,84px);padding-bottom:0}
.hf .phead-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:end;padding-bottom:clamp(30px,4vw,56px)}
.hf .phead:not(.has-ph) .phead-in{grid-template-columns:1fr;max-width:900px}
.hf .phead .crumbs{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 20px;display:flex;align-items:center;gap:10px}
.hf .phead .crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
.hf .phead h1.gd{font-size:clamp(2.9rem,6.2vw,6rem)}
.hf .phead-ph{transform:rotate(1.2deg)}
.hf .phead-ph img{aspect-ratio:4/3}
@media(max-width:860px){.hf .phead-in{grid-template-columns:1fr}.hf .phead-ph{transform:none}}

/* ── services ── */
.hf .svs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.hf .svs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hf .sv{background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:10px 10px 24px;box-shadow:var(--lift-1);scroll-margin-top:calc(var(--nav-h) + 20px)}
.hf .sv-ph{border-radius:2px}
.hf .sv-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.hf .sv-tx{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 14px;padding:18px 12px 0}
.hf .svs .sv:nth-child(n+3) .sv-ph img{aspect-ratio:16/10}
.hf .svs.three .sv:nth-child(n) .sv-ph img{aspect-ratio:1}
.hf .sv-n{grid-row:span 2;font-family:var(--gd);font-weight:700;font-size:17px;color:var(--ink);background:var(--accent-lt);border-radius:100px;width:42px;height:42px;display:grid;place-items:center}
.hf .sv h3{font-family:var(--gd);font-weight:700;font-size:1.9rem;line-height:1.02;text-transform:uppercase;color:var(--ink);margin:0;align-self:center}
.hf .sv p{grid-column:2;margin:0;font-size:17px;line-height:1.6;color:var(--body)}
@media(max-width:960px){.hf .svs.three{grid-template-columns:1fr}}
@media(max-width:760px){.hf .svs{grid-template-columns:1fr}}

/* ── work ── */
.hf .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.hf .story-ph{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;padding:6px 6px 14px}
.hf .story-ph .print img{aspect-ratio:4/5}
.hf .story-ph .print:last-child{margin-top:44px}
.hf .prints4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hf .prints4 .print img{aspect-ratio:4/3}
.hf .two>.print img{aspect-ratio:1}
@media(max-width:1020px){.hf .prints4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.hf .story{grid-template-columns:1fr}.hf .story-ph .print:last-child{margin-top:0}}

/* ── Stop the Rot ── */
.hf .stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hf .stg{background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:24px 24px 26px;box-shadow:var(--lift-1);border-top:8px solid var(--accent-lt)}
.hf .stg:nth-child(2){border-top-color:var(--accent-2)}
.hf .stg:nth-child(3){border-top-color:var(--ink)}
.hf .stg-n{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-txt)}
.hf .stg h3{font-family:var(--gd);font-weight:700;font-size:2.2rem;line-height:1;text-transform:uppercase;color:var(--ink);margin:6px 0 12px}
.hf .stg p{font-size:17px;line-height:1.6;color:var(--body);margin:0 0 12px}
.hf .stg p:last-child{margin:0}
.hf .stg .stg-s{color:var(--muted)}
@media(max-width:900px){.hf .stages{grid-template-columns:1fr}}
.hf .tv{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hf .tv li:first-child{grid-column:span 2}
.hf .tv li:first-child .tv-ph img{aspect-ratio:2.25/1}
.hf .tv li:first-child .tv-t{font-size:1.7rem}
.hf .tv li{display:grid}
.hf .tv a{display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:10px 10px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--lift-1);transition:transform var(--t-micro,.3s) var(--ease-out,ease),box-shadow var(--t-micro,.3s)}
.hf .tv a:hover{transform:translateY(-4px);box-shadow:var(--lift-3)}
.hf .tv-ph{display:block;position:relative;overflow:hidden;border-radius:2px}
.hf .tv-ph img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hf .tv-ph::after{content:'';position:absolute;left:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:var(--accent-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%2317181A'/%3E%3C/svg%3E") center/26px no-repeat;border:2px solid var(--ink)}
.hf .tv-t{display:block;font-family:var(--gd);font-weight:600;font-size:1.3rem;line-height:1.15;color:var(--ink);padding:12px 6px 0}
@media(max-width:900px){.hf .tv{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hf .tv{grid-template-columns:1fr}.hf .tv li:first-child{grid-column:auto}}

/* ── facts ── */
.hf .facts{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:2px solid var(--ink);margin-top:10px} /* one ruled ledger; the kit's two columns left a 55px value cell at 900px */
.hf .facts p{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 24%,transparent);font-size:17px;line-height:1.55;color:var(--body)}
.hf .facts span{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt);padding-top:2px}
.hf .facts a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px;margin-block:-10px}
.hf .req-side .facts{margin-top:26px}

/* ── footer ── */
.hf .hfoot{background:var(--stone);border-top:8px solid var(--accent-lt);padding:clamp(56px,7vw,90px) 0 120px}
.hf .hf-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:clamp(28px,4vw,56px)}
.hf .hf-brand .lg{height:84px;width:auto;display:block;margin-bottom:16px}
.hf .hf-brand p{font-size:16px;line-height:1.6;color:var(--muted);max-width:36ch;margin:0}
.hf .hfoot h4{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 14px}
.hf .hfoot p{margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--body)}
.hf .hfoot a{color:var(--ink)}
.hf .hfoot p a{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px}
.hf .hf-tel{font-family:var(--gd);font-weight:700;font-size:1.9rem;text-decoration:none}
.hf .hf-tel:hover{color:var(--accent-2)}
.hf .hfoot ul{list-style:none;padding:0;margin:0}
.hf .hfoot li a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:none}
.hf .hfoot li a:hover{text-decoration:underline;text-decoration-color:var(--accent-2);text-decoration-thickness:2px}
.hf .hf-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.hf .hf-bot a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:900px){.hf .hf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hf .hf-grid{grid-template-columns:1fr}}

/* ── the phone bar: ONE quiet action. His ink, sentence case, set in the reading face; the call is a 52px square ── */
body.hf .bookbar.quiet{gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(238,238,234,.9);
  -webkit-backdrop-filter:saturate(1.3) blur(18px);backdrop-filter:saturate(1.3) blur(18px);border-top:1px solid rgba(23,24,26,.14);box-shadow:none}
body.hf .bookbar.quiet .b1{min-height:52px;padding:0 16px;background:var(--ink);color:#FFFBF2;border:0;border-radius:8px;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:.01em;text-transform:none}
body.hf .bookbar.quiet .b2{min-height:52px;border:1px solid rgba(23,24,26,.3);border-radius:8px;background:transparent;color:var(--ink)}

/* ── 404 ── */
.hf .err404{padding:120px 0;text-align:center}
.hf .err404 .code{font-family:var(--gd);font-weight:600;color:var(--accent-txt);letter-spacing:.2em;margin:0 0 14px}


/* ══════════════════════════════════════════════════════════════════════════════
   IPHONE PASS (2026-10-06, Adam: "elevate the website especially on mobile and the ios simulator"). Every page read in
   REAL iPhone Safari (iOS simulator, 402 x 874) a screen at a time, against client-site-design/reference/mobile.md.
   Found: a home first screen of 41 words (now about 16: the label, the headline, his rating) where the fastback drowned under a 76% wash, two labels stacked, two identical
   Get a quote buttons and the 5.0 card cut by the bar; inner pages whose photograph sat under the fold below the
   headline; the peeking review and print cards at 40% opacity until swiped; a footer three screens long in one column.
   Everything below is phone-only.
   ══════════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* ── HOME, FIRST SCREEN: the bare-metal fastback reads at the top; the headline, one line and his Google rating sit on
        it at the foot. The bar carries the quote and the call, so the hero keeps no buttons of its own. ── */
  .hf .hx-flanked{min-height:calc(100vh - var(--nav-h) - 76px);min-height:calc(100svh - var(--nav-h) - 76px);place-items:end start;align-content:end;text-align:left;padding:0 0 30px}
  .hf .hx-flanked .hx-ph img{object-position:50% 0}
  .hf .hx-flanked .hx-ph::after{background:linear-gradient(180deg,rgba(5,6,10,0) 0%,rgba(5,6,10,0) 48%,rgba(5,6,10,.5) 62%,rgba(5,6,10,.72) 100%)}
  .hf .hx-flanked .hx-lab,.hf .hx-flanked .hx-acts,.hf .hx-flanked .hx-sub{display:none}
  .hf .hx-flanked .hx-k{display:block;margin:0 0 12px;color:var(--accent-lt);font-size:15px;letter-spacing:.2em}
  .hf .hx-flanked .hx-row{display:block}
  .hf .hx-flanked h1{margin:0;max-width:none;text-align:left;--hx-fs-m:clamp(2.8rem,12.4vw,3.6rem)}
  .hf .hx-flanked .hx-sub{margin:14px 0 0;max-width:34ch;font-size:17px;line-height:1.55;text-align:left}
  .hf .hx-flanked .hx-card{margin-top:18px;gap:10px}
  .hf .hx-flanked .hx-card b{font-size:1.5rem}
  .hf .hx-flanked .hx-card span{font-size:15px;letter-spacing:.1em}
}
@media(max-width:760px){
  /* ── air: a phone needs less of it between bands than a desktop ── */
  .hf .sec{padding-block:68px}
  .hf .phead{padding-top:26px}
  .hf .lanes-head,.hf .grp-head,.hf .al-head,.hf .said-head{margin-bottom:28px}

  /* ── INNER PAGES, FIRST SCREEN: the photograph, at a phone's height, with the headline set ON it like a caption on
        a print. The scrim is the frame's ::after (the gate reads scrims there); the paragraph starts the next screen. ── */
  .hf .phead.has-ph .phead-in{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:30px}
  .hf .phead.has-ph .phead-in>div{display:contents}
  .hf .phead.has-ph .crumbs{grid-row:1;margin:0 0 16px}
  .hf .phead.has-ph .phead-ph{grid-row:2;grid-column:1;position:relative;padding:8px;transform:none}
  .hf .phead.has-ph .phead-ph img{aspect-ratio:auto;height:clamp(330px,calc(100vh - 330px),130vw);height:clamp(330px,calc(100svh - 330px),130vw)}
  .hf .phead.has-ph .phead-ph img[src*="jeep-3"]{object-position:10% 50%} /* Inspection: the whole "Jeep" badge, not "eep" */
  .hf .phead.has-ph .phead-ph img[src*="camaro-banner"]{height:auto;aspect-ratio:4/3;object-position:0% 50%} /* About: his shop banner whole beside the Camaro (a tall crop cut the banner mid-word) */
  .hf .phead.has-ph .phead-ph::after{content:'';position:absolute;inset:8px;border-radius:2px;pointer-events:none;
    background:linear-gradient(180deg,rgba(14,15,16,0) 28%,rgba(14,15,16,.58) 56%,rgba(14,15,16,.9) 100%)}
  .hf .phead.has-ph h1.gd{grid-row:2;grid-column:1;align-self:end;position:relative;z-index:2;margin:0;padding:0 24px 28px;color:#FFFBF2;
    font-size:clamp(2.6rem,11.6vw,3.4rem);text-wrap:balance;text-shadow:0 2px 24px rgba(12,14,12,.45)}
  .hf .phead.has-ph h1.gd em{color:var(--accent-lt)}
  .hf .phead.has-ph .lede{grid-row:3;margin-top:24px}

  /* ── THE FOUR LANES: a row the thumb swipes, big photographs, the next card peeking ── */
  .hf .lanes-list.swipe>li{flex:0 0 min(78%,340px)}
  .hf .lanes-list.swipe a{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:10px 10px 22px;height:100%}
  .hf .lanes-list.swipe .ll-ph{grid-column:1/-1;grid-row:auto;margin:0 0 14px}
  .hf .lanes-list.swipe .ll-ph img{aspect-ratio:1} /* square, not 4:5: his originals top out near 1440px and a 3x iPhone would enlarge a tall crop until it softens */
  .hf .lanes-list.swipe i{margin-left:6px}

  /* ── SERVICES: each group is a swipe row; the photograph leads, the name and the line under it ── */
  .hf .svs.swipe>.sv{flex:0 0 min(84%,360px)}
  .hf .svs.swipe .sv:nth-child(n) .sv-ph img{aspect-ratio:4/3}
  .hf .svs.swipe .sv-tx{padding:16px 6px 0;gap:10px 12px}
  .hf .svs.swipe .sv h3{font-size:1.6rem}
  .hf .svs.swipe .sv p{font-size:16.5px}

  /* ── the album's four stage tabs stay a tidy 2 x 2 under the title, the print under them ── */
  .hf .al-t{font-size:2rem}
}
@media(max-width:560px){
  /* ── the footer: brand, then call and the shop side by side, then the pages in two columns (it ran three screens) ── */
  .hf .hfoot{padding:48px 0 36px}
  .hf .hf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 18px}
  .hf .hf-grid>.hf-brand,.hf .hf-grid>div:last-child{grid-column:1/-1}
  .hf .hf-grid>div:last-child ul{columns:2;column-gap:18px}
  .hf .hf-brand .lg{height:64px}
  .hf .hf-tel{font-size:1.45rem}
  .hf .hfoot li a{min-width:44px}
  .hf .hf-bot{margin-top:30px}
}

/* ── touch screens: the desktop hover lifts and tilts stuck on a card after a tap or a swipe (seen in the simulator) ── */
@media(hover:none){
  .hf .lanes-list a:hover,.hf .tv a:hover,.hf .al-tabs label:hover,.hf .btn.hbtn:hover{transform:none}
  .hf .lanes-list a:hover{box-shadow:var(--lift-1)}
  .hf .lanes-list a:hover .ll-ph img{transform:none}
}

/* ── one value per facts row: "Facebook · Handformed TV" stacked on three rows (a lone dot) because the row is a grid ── */
.hf .facts .fv{font-style:normal;display:flex;flex-wrap:wrap;align-items:center;column-gap:.4em;min-width:0}
/* ── the photo field: his own button, not the browser's grey "Choose File" (16px, or an iPhone zooms) ── */
.hf .qf input[type=file]::file-selector-button{min-height:40px;margin-right:12px;padding:0 14px;border:1px solid var(--ink);border-radius:6px;
  background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer}
/* ── a phone number inside a sentence: Barlow's word space is 3.5px, so "call (443)" read as "call(443)" on an iPhone ── */
.hf .lede a[href^="tel"],.hf .fnote a[href^="tel"]{margin-inline-start:.3em}

/* ══════════════════════════════════════════════════════════════════════════════
   THE QUOTE CHAT (2026-10-06, Adam: "add a high converting branded chat widget"). The panel is the hero's
   satin black with his primer yellow for every action of his own; the visitor's answers are set in primer like a
   job tag. Desktop: a pill in the corner that says what it does, one quiet teaser per visit, never an auto-open.
   Phone: the bar's "Get a quote" opens it as a bottom sheet that rides above the keyboard (hf.js sets --kb/--vvh).
   ══════════════════════════════════════════════════════════════════════════════ */
body.light .chatfab{height:56px;padding:0 22px 0 16px;gap:10px;border-radius:12px;background:var(--ink);color:#FFFBF2;border:1px solid rgba(235,209,90,.55);
  font-family:var(--gd);font-size:19px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--lift-3)}
body.light .chatfab .q{color:var(--accent-lt)}
body.light .chatfab .x{display:none;line-height:0}
body.light.chat-open .chatfab{padding:0 16px}
body.light.chat-open .chatfab .ft,body.light.chat-open .chatfab .q{display:none}
body.light.chat-open .chatfab .x{display:block}
@media(hover:hover){body.light .chatfab:hover{transform:translateY(-2px);border-color:var(--accent-lt);background:#222327}}
body.light .chatfab:focus-visible{outline:3px solid var(--accent-lt);outline-offset:3px}
/* the teaser: only when hf.js says so, once a visit, above the pill */
.chattag{right:18px;bottom:86px;padding:12px 16px;border-radius:12px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);
  border-left:4px solid var(--accent-lt);font-family:var(--sans);font-size:15.5px;font-weight:600;box-shadow:var(--lift-2)}
body.chat-ready .chattag{opacity:0;transform:translateY(8px)}
body.chat-tease .chattag{opacity:1;transform:none}
body.chat-open .chattag{opacity:0}

body.light .chatpanel{width:min(400px,calc(100vw - 36px));max-height:min(660px,calc(100dvh - 120px));
  background:linear-gradient(170deg,#1D1E21,#111214);color:#FFFBF2;border:1px solid rgba(235,209,90,.28);border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);visibility:hidden;
  transition:opacity .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s linear .28s}
body.light.chat-open .chatpanel{visibility:visible;transition-delay:0s}
body.light .chathead{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(235,209,90,.2);padding:12px 12px 12px 16px;gap:12px}
body.light .chathead .mk{width:auto;height:auto;flex:0 0 auto;display:block;line-height:0}
body.light .chathead .mk img{height:34px;width:auto;display:block}
body.light .chathead .ct{flex:1;min-width:0;padding-left:12px;border-left:1px solid rgba(255,255,255,.16)}
body.light .chathead .ct b{font-family:var(--gd);font-size:1.35rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#FFFBF2;line-height:1.05}
body.light .chathead .ct span{font-size:13.5px;color:rgba(255,251,242,.74);margin-top:3px}
body.light .chatx{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:10px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#FFFBF2}
@media(hover:hover){body.light .chatx:hover{border-color:var(--accent-lt);color:var(--accent-lt)}}
body.light .chatx:focus-visible{outline:2px solid var(--accent-lt);outline-offset:2px}
.chatprog{height:3px;background:rgba(235,209,90,.12);overflow:hidden;opacity:0;transition:opacity .3s}
.chatprog.on{opacity:1}
.chatprog i{display:block;height:100%;width:0;background:var(--accent-lt);transition:width .4s cubic-bezier(.2,.7,.3,1)}
body.light .chatbody{padding:18px 16px;gap:10px;overscroll-behavior:contain;scroll-behavior:auto} /* instant jumps to the newest line (the real fix is the re-scroll after chips in hf.js) */
body.light .msg{font-size:16px;line-height:1.5;border-radius:14px;max-width:88%}
body.light .msg.bot{background:rgba(255,255,255,.07);color:#FFFBF2;border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:4px}
body.light .msg.bot b{color:#fff}
body.light .msg.me{background:var(--accent-lt);color:var(--ink);border:0;border-bottom-right-radius:4px;font-weight:600}
body.light .msg a{color:var(--accent-lt);text-decoration:underline;text-underline-offset:3px}
.msg .sub{display:block;margin-top:8px;font-size:14px;color:rgba(255,251,242,.72)}
.msg .sub a{color:var(--accent-lt)}
.msg.typing{display:flex;gap:5px;padding:14px 16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,251,242,.6);animation:hfdot 1s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes hfdot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.msg.typing i{animation:none}}
body.light .chips{gap:8px;padding:2px 16px 14px}
body.light .chips button{font-family:var(--sans);font-size:15px;font-weight:600;color:#FFFBF2;background:transparent;border:1px solid rgba(235,209,90,.55);
  border-radius:999px;padding:9px 15px;min-height:44px;cursor:pointer;transition:background var(--t-micro,.3s),border-color var(--t-micro,.3s),color var(--t-micro,.3s)}
@media(hover:hover){body.light .chips button:hover{background:var(--accent-lt);border-color:var(--accent-lt);color:var(--ink)}}
body.light .chips button:focus-visible{outline:2px solid var(--accent-lt);outline-offset:2px}
body.light .chatform{gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25)}
body.light .chatform input{font-size:16px;min-height:48px;color:#FFFBF2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);border-radius:12px;padding:12px 14px}
body.light .chatform input::placeholder{color:rgba(255,251,242,.6)}
body.light .chatform input:focus{outline:none;border-color:var(--accent-lt);box-shadow:0 0 0 3px rgba(235,209,90,.22)}
body.light .chatform button{flex:0 0 48px;width:48px;height:48px;border-radius:12px;border:0;background:var(--accent-lt);color:var(--ink);display:grid;place-items:center;cursor:pointer}
body.light .chatform button:focus-visible{outline:2px solid #FFFBF2;outline-offset:2px}
body.light .chatpanel .chatnote{font-size:13px;color:rgba(255,251,242,.66);padding:0 16px 12px;line-height:1.45;text-align:center;margin:0}
.chatscrim{display:none}
@media(max-width:760px){
  body.light .chatfab,.chattag{display:none!important}
  .chatscrim{display:block;position:fixed;inset:0;z-index:95;background:rgba(14,15,16,.6);opacity:0;pointer-events:none;transition:opacity .25s ease} /* over the header too */
  body.chat-open .chatscrim{opacity:1;pointer-events:auto}
  body.chat-open{overflow:hidden}
  body.chat-open .bookbar{display:none}
  body.light .chatpanel{z-index:96;left:0;right:0;top:auto;bottom:var(--kb,0px);width:auto;max-height:none;
    height:min(calc(var(--vvh,100vh) * .9),720px);height:min(calc(var(--vvh,100dvh) * .9),720px);
    border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(28px)}
  body.light.chat-open .chatpanel{transform:none}
  body.light .chathead::before{content:'';position:absolute;left:50%;top:6px;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:rgba(255,255,255,.28)}
  body.light .chathead{position:relative;padding-top:16px}
  body.light .chips{padding:2px 14px 12px}
  body.light .chatform{padding:10px 12px}
}

/* 2026-10-07: iPhone Safari hung the "(" of a phone number outside the link (finish.css hanging-punctuation): it ate the space before an in-sentence number and pulled footer numbers left. */
a[href^="tel:"]{hanging-punctuation:none}

/* ── the Nova album (10/16): portrait frames from Ryan's phone video, and the film beside its text ── */
.hf #nova .al-ph img{aspect-ratio:4/5}
.hf .nova-film{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(30px,4vw,54px)}
.hf .nova-v{margin:0;background:var(--paper-2);padding:10px 10px 12px;border:1px solid var(--line);border-radius:4px;box-shadow:var(--lift-2)}
.hf .nova-v video{width:100%;aspect-ratio:9/16;display:block;border-radius:2px;background:#141416;object-fit:cover}
.hf .nova-v figcaption{font-family:var(--gd);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px;padding:0 2px}
.hf .nova-tx h3{font-family:var(--gd);font-weight:700;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.hf .nova-tx h3 em{font-style:italic;font-weight:600;color:var(--accent-2)}
.hf .nova-tx p{font-size:18px;line-height:1.6;color:var(--body);margin:0 0 22px}
@media(max-width:760px){.hf .nova-film{grid-template-columns:1fr}.hf .nova-v{max-width:360px}}