/* ==========================================================================
   SELF-HOSTED FONTS — no external requests, no third-party dependency.

   Downloaded from Google Fonts and served from assets/fonts/. All families
   here are SIL Open Font License, which permits self-hosting.

   Where Google serves a VARIABLE font, one file covers every weight and the
   rule below carries a weight RANGE instead of a single value.

   The latin-ext faces are effectively free: unicode-range means a browser
   only fetches that file if a character in the range actually appears, so
   they exist purely so an accented name renders correctly rather than
   falling back to a system font mid-word.

   Regenerate with scratchpad/selfhost_fonts.py if the design changes.
   ========================================================================== */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/dm-mono-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/dm-mono-normal-latin-2.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/dm-mono-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/dm-mono-normal-latin-ext-2.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/dm-sans-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;
  src:url(fonts/syne-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;
  src:url(fonts/syne-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ROOM TONE — a DEMONSTRATION podcast site by Naugatuck Web Studio.
 *
 * "Room tone" is the sound a room makes when nobody is talking. Every episode
 * of this invented show is recorded somewhere different, so the name is the
 * premise, and the site is built around it: five pages, one per way of
 * recording, and a carousel on the home page that is the show's contact sheet.
 *
 * Studio-modern: near-black, bone, one coral accent, big tight display type
 * against small wide-tracked labels. Nothing else in the portfolio is dark
 * with a hot accent — the closest is Next Level (cyan on black) and this is
 * deliberately warmer and more editorial than that.
 */
:root{
  --ink:#0B0B0D;
  --panel:#141418;
  --panel-2:#1C1C21;
  --bone:#EFECE6;
  --muted:#9C978E;
  --muted-2:#6E6A63;
  --line:rgba(239,236,230,.14);
  --coral:#FF5A38;
  --coral-dim:rgba(255,90,56,.16);
  --ff-display:Syne,'Arial Black',sans-serif;
  --ff-body:"DM Sans",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--ff-body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,3.4vw,40px)}

/* ------------------------------------------------------------ demo notice */
.demobar{background:var(--coral);color:#180703;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.02em;
  padding:9px 20px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.demobar b{font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.demobar span{color:#4A1A11}

/* ------------------------------------------------------------------ header */
.top{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:26px;padding:15px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--coral);flex:0 0 auto;
  box-shadow:0 0 0 4px var(--coral-dim)}
.brand-name{font-family:var(--ff-display);font-weight:800;font-size:20px;
  letter-spacing:-.02em;text-transform:uppercase}
.brand-sub{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}
.nav{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;padding:7px 13px;text-decoration:none;color:var(--muted);
  font-size:14.5px;border-radius:999px;transition:color .16s ease,background .16s ease}
.nav a:hover{color:var(--bone);background:rgba(239,236,230,.07)}
.nav a[aria-current="page"]{color:var(--coral);background:var(--coral-dim)}
.nav a:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.nav a{transition:none}}

/* -------------------------------------------------------------------- hero */
.hero{padding:clamp(46px,7vw,92px) 0 clamp(26px,4vw,44px)}
.kicker{font-family:var(--ff-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--coral);margin:0 0 16px}
h1{font-family:var(--ff-display);font-weight:800;
  font-size:clamp(42px,8.4vw,104px);line-height:.94;letter-spacing:-.035em;
  margin:0;text-transform:uppercase;text-wrap:balance}
h1 em{font-style:normal;color:var(--coral)}
.sub{color:var(--muted);font-size:clamp(18px,2.2vw,22px);margin:22px 0 0;max-width:56ch}

h2{font-family:var(--ff-display);font-weight:800;
  font-size:clamp(28px,4.4vw,48px);line-height:1.02;letter-spacing:-.028em;
  margin:0 0 14px;text-transform:uppercase;text-wrap:balance}
h3{font-family:var(--ff-display);font-weight:700;font-size:20px;margin:0 0 6px;
  letter-spacing:-.015em}
p{margin:0 0 17px;max-width:66ch}
.lead{font-size:19px;color:var(--muted);max-width:60ch}

section{padding:clamp(40px,6vw,78px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

/* --------------------------------------------------------------- carousel
   A scroll-snap rail. It works with NO script — it is simply a horizontal
   strip you can swipe or shove with the scrollbar. The script only adds the
   arrows and the dots, so a failed request costs the controls, not the
   content. */
.rail-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.rail-head h2{margin:0}
.rail-controls{display:flex;gap:8px;margin-left:auto}
.rail-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--bone);cursor:pointer;font-size:16px;line-height:1;
  transition:background .16s ease,border-color .16s ease}
.rail-btn:hover{background:var(--coral);border-color:var(--coral);color:#180703}
.rail-btn:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.rail-btn[disabled]{opacity:.32;cursor:default}
.rail-btn[disabled]:hover{background:transparent;border-color:var(--line);color:var(--bone)}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,var(--slide,62%));
  gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-bottom:6px}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.slide{scroll-snap-align:start;position:relative;display:block;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);overflow:hidden;
  transition:border-color .2s ease,transform .2s ease}
.slide:hover{border-color:var(--coral);transform:translateY(-3px)}
.slide:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.slide{transition:none}.slide:hover{transform:none}}
.slide img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.92)}
.slide-body{padding:20px 22px 24px}
.slide-n{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--coral)}
.slide h3{margin:9px 0 6px;font-size:23px;text-transform:uppercase;letter-spacing:-.02em}
.slide p{margin:0;color:var(--muted);font-size:15.5px;max-width:none}
.dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:0;padding:0;
  cursor:pointer;transition:background .16s ease,width .16s ease}
.dot[aria-current="true"]{background:var(--coral);width:22px;border-radius:4px}
.dot:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---------------------------------------------------------------- figures */
.plate{border:1px solid var(--line);background:var(--panel);margin:0}
.plate img{width:100%;aspect-ratio:3/2;object-fit:cover}
.plate figcaption{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted-2);padding:10px 14px;border-top:1px solid var(--line)}
.wide img{aspect-ratio:21/9}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.5vw,48px);
  align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ lists */
.log{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:8px}
.log caption{text-align:left;font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);padding-bottom:10px}
.log th{text-align:left;font-family:var(--ff-mono);font-weight:400;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  padding:0 14px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.log td{padding:15px 14px 15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.log tbody tr{transition:background .16s ease}
.log tbody tr:hover{background:rgba(239,236,230,.04)}
.log tbody tr:hover .t{color:var(--coral)}
.log .t{font-weight:600;transition:color .16s ease}
.log .d{color:var(--muted);font-size:15.5px}
.log .n{font-family:var(--ff-mono);font-size:13px;color:var(--muted-2);
  text-align:right;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.log tbody tr,.log .t{transition:none}}
@media (max-width:700px){.log .d{display:none}}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding:0;list-style:none}
.tag{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--muted)}
.tag.on{border-color:var(--coral);color:var(--coral)}

.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px}
.stat div{background:var(--ink);padding:22px}
.stat b{display:block;font-family:var(--ff-display);font-weight:800;font-size:38px;
  line-height:1;letter-spacing:-.03em}
.stat span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin-top:8px;display:block}

/* -------------------------------------------------------------------- CTA */
.cta{background:var(--coral);color:#180703;padding:clamp(30px,4.6vw,58px)}
.cta h2{color:#180703}
.cta p{color:#4A1A11;max-width:54ch}
.btn{display:inline-block;font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;padding:14px 26px;margin-top:6px;
  background:#180703;color:var(--coral);border:1px solid #180703;
  transition:background .16s ease,color .16s ease}
.btn:hover{background:transparent;color:#180703}
.btn:focus-visible{outline:2px solid #180703;outline-offset:3px}
.btn.ghost{background:transparent;color:#180703;margin-left:9px}
.btn.ghost:hover{background:#180703;color:var(--coral)}
.inert{font-family:var(--ff-mono);font-size:11px;color:#6B2A1D;margin:18px 0 0}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ----------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--muted);font-size:14.5px}
.foot-grid{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.foot-nav a{text-decoration:none;color:var(--muted);font-size:14px}
.foot-nav a:hover{color:var(--coral)}
.fine{font-size:12.5px;color:var(--muted-2);max-width:78ch;margin:18px 0 0}
.fine strong{color:var(--coral)}
.studio{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.05em;margin-top:16px}
.studio a{color:var(--coral)}
@media (max-width:820px){
  .top-in{gap:14px}
  .nav{order:3;width:100%}
  .rail{grid-auto-columns:minmax(260px,86%)}
}