/* ============================================================================
   iNAM Audio

   The app is a photoreal black amp in a dark room with one blue power LED and
   a pair of cream VU meters. The site is that room. Every colour here is taken
   from the app itself rather than invented, so the page and the product read as
   one object.

   Type: Archivo Narrow, uppercase and tracked, because that is exactly how the
   app letters its own labels (PRESET, SIGNAL CHAIN, RIG). Newsreader for
   anything long enough to actually read.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Narrow';
  src: url('/fonts/archivo-narrow.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #08090a;
  --stage: #0e0f11;
  --panel: #16181b;
  --panel-2: #1e2126;
  --hair: #2a2e34;

  --text: #f1f1ef;
  --dim: #9298a0;
  --dimmer: #6b7178;

  --led: #2f7dff;
  --led-soft: rgba(47, 125, 255, 0.5);
  --vu: #e9dca9;

  --display: 'Archivo Narrow', ui-sans-serif, system-ui, sans-serif;
  --body: 'Newsreader', ui-serif, Georgia, serif;
  --data: ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 36rem;
  --wide: 70rem;
  --gutter: 1.5rem;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--stage);
  color: var(--text);
  font-family: var(--body);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--led);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Shared label treatment: the app's own lettering. */
.eyebrow,
.kicker,
.facts,
.masthead nav,
.legend-row,
.answer-q,
thead th {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- masthead */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding-block: 1.25rem;
  position: relative;
  z-index: 2;
}

/* A hairline anchors the nav, but drawn as a border it runs straight across the
   amplifier in the hero photograph. So it is a pseudo-element, and over a photo
   it fades out before it reaches the picture. */
.masthead::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: rgba(241, 241, 239, 0.1);
}

.stage.has-photo .masthead::after {
  background: linear-gradient(
    90deg,
    rgba(241, 241, 239, 0.16) 0%,
    rgba(241, 241, 239, 0.1) 26%,
    rgba(241, 241, 239, 0) 52%
  );
}

/* The amp's own badge reads "iNAM" — lowercase i, tracked caps. Matching it
   matters more than tidiness, so no text-transform here. */
.wordmark {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--text);
}

/* The lettering is one flex item. A bare text node beside a span becomes its
   own item, and the flex gap then wedges 8px between the i and the N. */
.wordmark-text { letter-spacing: 0.2em; }
.wordmark-i { letter-spacing: 0.06em; }

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.masthead nav a {
  color: #b4bac1;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.masthead nav a:hover { color: var(--text); border-bottom-color: rgba(241, 241, 239, 0.35); }

/* Show which page you are on, rather than four links that all look alike. */
.masthead nav a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--led);
}

/* ---------------------------------------------------------------- hero */
.stage { position: relative; background: var(--void); overflow: hidden; }

/* The room shot sits behind everything, weighted right, so the headline has
   the dark half of the photograph to live in. */
.stage.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-photo-1x);
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: center;
}

.stage.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--void) 4%, rgba(8, 9, 10, 0.86) 34%, rgba(8, 9, 10, 0.12) 72%),
    linear-gradient(0deg, var(--stage) 1%, transparent 26%);
}

.stage > * { position: relative; z-index: 1; }

.hero { padding-block: clamp(3rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 6vw, 6.5rem); }

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--vu);
  margin: 0 0 1.15rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.3rem + 5.4vw, 5rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 1.35rem;
  max-width: 17ch;
  /* Let the browser even out the lines rather than stranding a short word on
     its own — a hard max-width picks the break by accident. */
  text-wrap: balance;
}

.hero > p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.58;
  color: #c4c8cd;
  margin: 0 0 2rem;
  max-width: 34ch;
}

/* Official App Store badge. Apple's guidelines: unmodified artwork, one badge
   per layout, 40px minimum height, and clear space of at least a quarter of the
   badge height on every side — hence the margin. Do not restyle the image. */
.badge {
  display: inline-block;
  line-height: 0;
  margin: 0.75rem 0.75rem 0.75rem 0;
  border-radius: 6px;
}

.badge img { display: block; height: 48px; width: auto; }
.badge:hover { opacity: 0.88; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.75rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(241, 241, 239, 0.13);
  font-size: 0.75rem;
  color: #aab0b7;
  max-width: 40rem;
}

.facts li { margin: 0; }

/* ---------------------------------------------------------------- features */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  border-top: 1px solid var(--hair);
}

/* Alternate the side the phone sits on. The column template has to flip too,
   or the device lands in the text column and renders at full width. */
.feature:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
}

.feature:nth-of-type(even) > .device { order: 2; }

/* An iPhone, built out of a border radius and a bevel rather than a 400 KB PNG
   of a phone.

   Two things decide whether it reads as a device. The radius: iPhones are far
   rounder than they feel — an iPhone 15 Pro screen is 55pt on a 393pt width,
   about 14%, so at the ~300px this displays at the screen radius is ~41px, and
   the frame radius is that plus the bezel. And the frame's value: it has to stay
   lighter than both the page and the screenshot. An earlier gradient fell to
   near-black at one end, the same value as the background, so the sides simply
   vanished and the phone lost its silhouette. Muted titanium, not chrome — this
   page is dark and a shiny band would shout. */
.device {
  position: relative;
  padding: 9px;
  border-radius: 50px;
  background: linear-gradient(
    148deg,
    #6b727a 0%,
    #3d434a 18%,
    #4d545c 44%,
    #363c42 68%,
    #5e656d 88%,
    #40464d 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 34px 64px -26px rgba(0, 0, 0, 0.9);
}

/* The hairline where glass meets frame. Real devices have it; without it the
   screenshot looks pasted on top of a shape. */
.device::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 41px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.device img { display: block; width: 100%; border-radius: 41px; }

.device-wide { padding: 9px; border-radius: 21px; }
.device-wide img { border-radius: 12px; }

/* ---------------------------------------------------------------- reading */
main.wrap { padding-block: 3rem 4.5rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-block: 2.5rem;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.95rem, 1.5rem + 2.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: 0.015em;
  margin: 3rem 0 0.85rem;
}

h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2.25rem 0 0.6rem;
}

p, li { margin: 0 0 1.15rem; }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.5rem; }

a { color: #6ea6ff; text-underline-offset: 0.16em; }
a:hover { color: #9dc3ff; }

strong { font-weight: 600; color: #fff; }

code {
  font-family: var(--data);
  font-size: 0.86em;
  background: var(--panel-2);
  padding: 0.12em 0.4em;
  border-radius: 3px;
}

.lede { font-size: 1.2rem; line-height: 1.55; color: var(--dim); }

/* The extractable answer, set like the app's status strip. */
.answer {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--led);
  border-radius: 0 4px 4px 0;
  padding: 1.3rem 1.4rem;
  margin: 0 0 2.75rem;
}

.answer-q {
  font-size: 0.72rem;
  color: var(--vu);
  margin: 0 0 0.6rem;
}

.answer-a { margin: 0; }

.plate-dark {
  background:
    radial-gradient(120% 140% at 15% 0%, #1c1f24 0%, transparent 70%),
    var(--panel);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  margin: 3rem 0;
}

.plate-dark h2, .plate-dark h3 { margin-top: 0; color: var(--text); }
.plate-dark p { color: #c4c8cd; }
.plate-dark p:last-child { margin-bottom: 0; }

.t3k-logo { display: block; width: min(200px, 58%); height: auto; margin-bottom: 1.35rem; }

.draft {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--vu);
  color: #2a2408;
  padding: 0.65rem 0.95rem;
  border-radius: 3px;
  margin: 0 0 2.5rem;
}

/* Related guides: a path onward for a reader, and a crawlable link between
   pages so each guide is not hanging off the home page alone. */
.related {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
}

.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin-bottom: 0.45rem; }
.related li:last-child { margin-bottom: 0; }

/* A numbered path, used once on the home page. The numbers earn their place
   because this really is a sequence — you cannot play a capture before you have
   the interface. Number only, no circle: the marker should read as a step, not
   as a badge. */
.path {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 1.5rem;
  counter-reset: step;
}

.path li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.1rem;
}

.path li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--led);
}

/* ---------------------------------------------------------------- tables */
.scroller { overflow-x: auto; margin: 1.75rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-family: var(--display);
  font-size: 0.94rem;
}

th, td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}

thead th { font-size: 0.7rem; color: var(--dim); border-bottom-color: var(--dim); }
tbody tr:hover { background: var(--panel); }
td.unknown { font-family: var(--data); font-size: 0.76rem; color: var(--dimmer); text-transform: none; }

.note { font-size: 0.95rem; color: var(--dim); }

/* ---------------------------------------------------------------- footer */
footer.site {
  border-top: 1px solid var(--hair);
  background: var(--void);
  padding-block: 2.5rem 3rem;
  margin-top: 4rem;
}

.legend-row { font-size: 0.74rem; color: #868c93; margin: 0 0 1.15rem; }
footer.site p { color: #7f858c; font-size: 0.93rem; margin: 0 0 0.6rem; max-width: 46rem; }
footer.site a { color: var(--dim); }

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 46rem) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .feature:nth-of-type(even) > .device { order: 0; }
  .device { width: min(300px, 74vw); margin-inline: auto; }
  .device-wide { width: min(520px, 92vw); }
  .stage.has-photo::before { background-position: 62% top; }
  .stage.has-photo::after {
    background:
      linear-gradient(180deg, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0.9) 55%, var(--stage) 99%);
  }
}

@media (max-width: 34rem) {
  .masthead nav { margin-left: 0; width: 100%; gap: 1.1rem; }
}