/* ═══════════════════════════════════════════════════════════════
   Tommy Darrell Audio Visual
   simplicity is complex
   ═══════════════════════════════════════════════════════════════ */

/* ── fonts (self-hosted; no external requests) ─────────────── */
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrumentsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrumentsans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrumentsans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrumentserif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrumentserif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#F4F1EC; --ink-dim:#9A958C; --line:rgba(244,241,236,.14);
  --bg:#0A0A0B; --brass:#E9A23B; --steel:#7FB2C9; --accent:var(--brass);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,4vw,54px);
}
html[data-scene="away"]{--accent:var(--steel)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
::selection{background:var(--accent);color:#12100C}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;padding:12px 18px;background:var(--accent);color:#12100C;font-weight:600}
.skip:focus{left:8px;top:8px}

.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ── nav ──────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:24px var(--pad);
  background:linear-gradient(rgba(8,8,12,.78),transparent)}
.wordmark{font-family:"Instrument Serif",serif;font-size:21px;color:#fff;text-decoration:none}
.wordmark em{font-style:italic;opacity:.72}
.navlinks{display:flex;gap:28px;list-style:none}
.navlinks a{color:#fff;text-decoration:none;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.14em;opacity:.78;transition:opacity .3s}
.navlinks a:hover,.navlinks a[aria-current="page"]{opacity:1}
.navlinks a[aria-current="page"]{color:var(--accent)}
@media(max-width:760px){
  nav{padding:18px var(--pad)}
  .navlinks{gap:15px}
  .navlinks a{font-size:10.5px;letter-spacing:.09em;white-space:nowrap}
  .wordmark{font-size:18px;white-space:nowrap}
}
/* At phone width the full wordmark plus three links cannot share a line —
   it wrapped and collided. Drop to the name; the tab title carries the rest. */
@media(max-width:560px){
  .wordmark{font-size:16px}
  .wordmark em{display:none}
  .navlinks{gap:12px}
  .navlinks a{font-size:9.5px;letter-spacing:.07em}
}
@media(max-width:360px){
  .navlinks a{font-size:9px;letter-spacing:.04em}
}

/* ── the toggle: simplicity :: complex ────────────────────── */
.toggle{font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(32px,4.6vw,60px);line-height:1.05;letter-spacing:-.015em;max-width:20ch}
.toggle .a{display:block}
.toggle .b{display:block;font-style:italic;color:var(--accent);transition:color .6s var(--ease)}
.toggle .rule{display:block;width:54px;height:1px;background:var(--accent);
  opacity:.5;margin:16px 0;transition:background .6s var(--ease)}

/* ── the struck line ──────────────────────────────────────────
   "…to the world wide web." draws a line through "wide web" on scroll,
   leaving "…to the world", then answers itself. The strike IS the pivot
   of the toggle here, standing in for the hairline rule.
   Without JS everything renders in its finished state — the sentence is
   real copy and must never depend on an observer firing. */
/* inline-block so the words can collapse to nothing and close the sentence
   up. overflow:hidden would normally drag the inline-block's baseline to its
   bottom edge and drop the phrase below the line — vertical-align:baseline
   with an explicit line-height keeps it sitting on the same baseline as the
   rest of the heading. */
.strike{
  position:relative;display:inline-block;white-space:nowrap;
  overflow:hidden;vertical-align:baseline;line-height:inherit;
}
.strike::after{
  content:"";position:absolute;left:.24em;right:.02em;top:.545em;height:.052em;
  background:var(--accent);border-radius:2px;
  transform-origin:left center;
  transition:transform .8s cubic-bezier(.62,0,.3,1), background .6s var(--ease);
}
.toggle-strike .addendum{display:block}

/* --w is measured in JS after the fonts settle; without it the phrase simply
   stays at its natural width and nothing collapses. */
.has-js .toggle-strike .strike{
  width:var(--w,auto);
  transition:width .6s cubic-bezier(.6,0,.28,1) .92s,
             opacity .42s var(--ease) .92s;
}
.has-js .toggle-strike .strike::after{transform:scaleX(0)}
.has-js .toggle-strike .addendum{opacity:0;transform:translateY(15px);
  transition:opacity .75s var(--ease) 1.5s, transform .75s var(--ease) 1.5s}

.toggle-strike.struck .strike::after{transform:scaleX(1)}
.toggle-strike.struck .strike{width:0;opacity:0}   /* gone, sentence closes up */
.toggle-strike.struck .addendum{opacity:1;transform:none}

/* ── sections ─────────────────────────────────────────────── */
section{padding:clamp(88px,12vh,160px) var(--pad)}
.eyerule{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--line);
  padding-top:17px;margin-bottom:52px;flex-wrap:wrap}
.eyerule span:first-child{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.2em;color:var(--accent);transition:color .6s}
.eyerule span:last-child{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim)}
h1,h2{font-family:"Instrument Serif",serif;font-weight:400;letter-spacing:-.02em}
.lede{margin-top:24px;max-width:56ch;color:rgba(244,241,236,.72);font-size:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.frame{position:relative;overflow:hidden;border:1px solid var(--line)}
.frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.03)}
.frame figcaption{position:absolute;left:0;bottom:0;right:0;padding:18px 20px;
  background:linear-gradient(transparent,rgba(6,6,10,.92));font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,236,.82)}

.specs{border-top:1px solid var(--line);margin-top:14px}
.spec{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:baseline;
  padding:21px 4px;border-bottom:1px solid var(--line);transition:background .4s}
.spec:hover{background:rgba(244,241,236,.03)}
.spec b{font-family:"JetBrains Mono",monospace;font-weight:400;font-size:11px;
  color:var(--accent);letter-spacing:.1em;transition:color .6s}
.spec p{font-size:19px}
.spec i{font-style:normal;font-size:12px;color:var(--ink-dim);text-align:right}
@media(max-width:640px){.spec{grid-template-columns:44px 1fr}.spec i{display:none}}

.rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ── page header (inner pages) ────────────────────────────── */
.masthead{padding:clamp(140px,20vh,220px) var(--pad) clamp(50px,8vh,90px)}
.masthead h1{font-size:clamp(44px,7vw,96px);line-height:.98}
.masthead h1 em{font-style:italic;color:var(--accent)}
.masthead .lede{margin-top:26px;font-size:19px}

/* ── automotive gallery ───────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:760px){.gallery{grid-template-columns:1fr}}
.gallery .frame{aspect-ratio:3/2}
.gallery .frame.tall{aspect-ratio:3/2}
.note{margin-top:44px;padding:22px 24px;border:1px dashed var(--line);border-radius:4px;
  font-size:15px;color:var(--ink-dim);max-width:70ch}
.note b{color:var(--accent);font-weight:500;font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:8px}

/* ── contact ──────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.detail{display:block;text-decoration:none;padding:20px 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease)}
.detail:hover{padding-left:10px}
.detail b{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.detail span{font-size:21px}

form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim)}
.field input,.field select,.field textarea{
  font-family:"Instrument Sans",sans-serif;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:7px;
  padding:13px 14px;transition:border-color .3s,background .3s;width:100%}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A958C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px}
.field select option{background:#15151A;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.06)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#FF6B5A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:rgba(244,241,236,.72);cursor:pointer}
.check input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Instrument Sans",sans-serif;font-size:14px;font-weight:600;
  color:#12100C;background:var(--accent);border:1px solid transparent;border-radius:9px;
  padding:15px 26px;cursor:pointer;transition:all .3s var(--ease);
  box-shadow:0 0 26px -6px var(--accent)}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 32px -4px var(--accent)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.formnote{font-size:13.5px;color:var(--ink-dim)}
.result{padding:15px 17px;border-radius:8px;font-size:15px;display:none}
.result.ok{display:block;background:rgba(233,162,59,.1);border:1px solid rgba(233,162,59,.4)}
.result.err{display:block;background:rgba(255,107,90,.1);border:1px solid rgba(255,107,90,.45);color:#FFB4A8}

/* ── footer ───────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:52px var(--pad);
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:baseline}
footer p,footer a{font-size:13.5px;color:var(--ink-dim);text-decoration:none}
footer a:hover{color:var(--accent)}
footer .tag{font-family:"Instrument Serif",serif;font-style:italic;font-size:19px;color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .rise{opacity:1;transform:none}
}