/* ============================================================
   Microcut Studio — site.css

   The parts that are the same on every page: the palette, the type
   scale, the header, the footer and the first screen. Before this file
   existed each of those lived in six places (guides.css plus the five
   pages that carry their own <style>), and they drifted — the wordmark
   sat at a different width on three page types, the first section had
   three different top paddings, and the disc offset had to be fixed
   page by page three times running.

   Load order: site.css first, then guides.css, then the page's own
   <style>. Anything a page genuinely needs to do differently still
   overrides from there — the homepage keeps its larger landing
   headline that way, for instance.
   ============================================================ */

/* ---------- SELF-HOSTED FONTS ----------
   Previously loaded from fonts.googleapis.com (three <link> tags per page:
   two preconnect, one stylesheet). Moved in-house for two reasons: it drops
   a third-party request on every load, and Google Fonts' own IP-based
   delivery has been a repeated GDPR complaint in Germany (LG München, 2022)
   — our largest single market. Files are the "latin" subset only (covers
   English copy plus €, –, —, ’ — everything this site actually sets in
   type), pulled from the same upstream Google Fonts release via the
   @fontsource npm packages, OFL-1.1 licensed. woff2 only: every browser this
   site needs to support has shipped it since 2016, and the old stylesheet's
   own "format('woff')" fallback never fires as a result.
   Weights loaded match exactly what the site sets and nothing else:
   Space Grotesk 500/600/700, Manrope 400/500/600/700, Space Mono 400/700. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500-v1.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600-v1.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700-v1.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400-v1.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-v1.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600-v1.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700-v1.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400-v1.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700-v1.woff2') format('woff2');}

:root{
  --paper:#FDFBF3;
  --paper-2:#FFFFFF;
  --ink:#191A1F;
  --ink-soft:#54525C;
  --ink-head:#3D3B47;             /* headings sit slightly lighter than --ink */
  --coral:#FF5A3C;
  --coral-deep:#E8431F;
  --teal:#00B3A4;
  --sunny:#FFC83D;
  --violet:#7C5CFF;
  --cobalt:#0A84FF;
  --fern:#16A34A;
  --hairline: rgba(var(--ink-rgb,25,26,31),0.10);
  --hairline-2: rgba(var(--ink-rgb,25,26,31),0.18);
  --panel:#FFFFFF;
  --muted-text:#7A7885;
  --maxw: 760px;
  --maxw-wide: 1120px;

  /* Channel triplets for the colours that are also used at reduced opacity.
     CSS cannot add alpha to a hex custom property, so every tint on the site
     used to be written out by hand — rgba(255,90,60,0.35) and the like — which
     means it stops following the palette the moment the palette changes.
     Written as rgba(var(--coral-rgb,255,90,60),0.35) it follows. Add a triplet here
     whenever a colour starts being used at partial opacity. A triplet is a
     manual copy of its hex, not a derivation: change --coral and you must
     change --coral-rgb in the same edit or the two drift apart. */
  --ink-rgb:25,26,31;
  --paper-rgb:253,251,243;
  --coral-rgb:255,90,60;
  --coral-deep-rgb:232,67,31;
  --teal-rgb:0,179,164;
  --sunny-rgb:255,200,61;
  --violet-rgb:124,92,255;
  /* A warm off-white that is NOT --paper (#FDFBF3 / 253,251,243). It draws the
     groove rings on the ink-filled sections and predates the bright palette;
     the exact channels are kept so the tint does not shift. */
  --groove-warm-rgb:243,236,221;

  /* Colours that existed only as literals in page CSS until now. */
  --on-accent:#FFFFFF;            /* text, rings and dots on a filled surface */
  --on-accent-rgb:255,255,255;
  --violet-ink:#5B3FD6;           /* violet darkened to 6.48:1 on --paper */
  --violet-band:#D0C7FF;          /* violet counterpart of the sunny band */
  --footer-meta:#C6C3D2;          /* footer small print on --ink */

  /* First screen. One scale for every page except the homepage, which
     overrides --h1-size with a larger landing value. */
  --h1-size: clamp(2rem,3.8vw,2.8rem);
  --lede-size: 1.08rem;
  --first-screen-top: 52px;       /* header to eyebrow */
  --eyebrow-gap: 16px;            /* eyebrow to h1 */
  --eyebrow-line: 19.2px;         /* 12px Space Mono at the body leading */
}

/* ---------- HEADER ---------- */
.site-header{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:50;}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;}
.brand{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;}
.brand .name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--coral-deep);letter-spacing:-0.01em;}
.brand .tag{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:0.24em;color:var(--ink-soft);margin-top:3px;}
.site-nav{display:flex;gap:10px;flex-wrap:nowrap;overflow:hidden;min-width:0;}
.site-nav a{font-family:'Manrope';font-size:0.9rem;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:8px 16px;border-radius:100px;white-space:nowrap;}
.site-nav a:hover{color:var(--ink);}
.site-nav a[aria-current="page"]{background:var(--coral);color:var(--on-accent,#FFFFFF);}

/* ---------- PRIORITY NAV (menu button + dropdown) ----------
   .site-nav is measured by site-ui.js against the space actually available
   next to the brand mark. When it does not fit, [hidden] is removed from
   .nav-toggle by script (never by CSS/a breakpoint) and .site-nav keeps its
   markup but is simply not the thing on screen. There is deliberately no
   media query here: a fixed pixel threshold is exactly what this replaces,
   because it had to be re-tuned by hand every time a nav item changed. */
.nav-toggle{
  background:transparent;border:1.5px solid var(--ink);border-radius:8px;
  color:var(--ink);padding:8px 10px;line-height:0;cursor:pointer;flex-shrink:0;
}
.nav-toggle:hover{background:rgba(25,26,31,0.06);}
.nav-dropdown{
  display:flex;flex-direction:column;gap:2px;
  padding:10px var(--gutter,24px) 16px;
  border-top:1px solid var(--hairline);
  background:var(--paper);
}
.nav-dropdown[hidden]{display:none;}
.site-nav[hidden]{display:none;}
.nav-dropdown a{
  font-family:'Manrope';font-size:1rem;font-weight:600;color:var(--ink-soft);
  text-decoration:none;padding:12px 4px;border-radius:8px;
}
.nav-dropdown a:hover{color:var(--ink);background:rgba(25,26,31,0.04);}
.nav-dropdown a[aria-current="page"]{color:var(--coral-deep);}

/* The header is one object and must be exactly the same height on every page.
   It was not: /contact/ sets body line-height 1.6 and guides.css sets 1.65, and
   the nav links inherit it, so the header box came out a different height on the
   two page types. Everything the box height depends on is stated here, at a
   specificity no page stylesheet reaches by accident. */
.site-header .site-header-inner{
  padding-top:18px; padding-bottom:18px;
  min-height:76px; align-items:center;
}
.site-header .brand{line-height:1;}
.site-header .site-nav a{line-height:1.2;}

/* ---------- FOCUS ----------
   One visible focus ring for the whole site. Before this there was no global
   rule at all, and the contact form removed the browser outline and marked
   focus with a border colour only, which is hard to see with a keyboard.
   :focus-visible keeps the ring off mouse clicks. */
:focus-visible{
  outline:3px solid var(--violet);
  outline-offset:2px;
  border-radius:2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline-offset:1px;}

/* The header and footer are one object on every page, so their container
   must not inherit the page's own .wrap width. That is what put the
   wordmark in three different places: 1120px on most pages, 920px on
   /contact/, 760px on the guides and legal pages. */
.site-header .wrap, .site-header .wrap-wide, footer .wrap{
  max-width:var(--maxw-wide); margin:0 auto; padding:0 24px;
}

/* ---------- FOOTER ---------- */
footer{padding:80px 0 60px;background:var(--ink);color:var(--paper);text-align:center;}
.label-disc{width:280px;height:280px;margin:0 auto;}
.label-disc svg{width:100%;height:100%;display:block;}
.label-disc .wm{font-family:'Space Grotesk',sans-serif;font-weight:700;}
.label-disc .st{font-family:'Space Mono',monospace;}
.label-disc .rn{font-family:'Space Mono',monospace;font-weight:500;}
.footer-meta{margin-top:28px;color:var(--footer-meta,#C6C3D2);font-family:'Space Mono';font-size:11px;letter-spacing:0.06em;}
.footer-meta a{color:var(--sunny);}

/* ---------- EYEBROW ---------- */
.matrix{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--coral-deep);
  display:inline-flex; align-items:center; gap:8px;
}
.matrix::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sunny);display:inline-block;}

/* ---------- FIRST SCREEN ----------
   Three numbers used to be repeated by hand on four pages and had to
   agree: the top padding of the first section, the gap under the
   eyebrow, and the constant inside the disc offset. They are tokens
   now, and the offset is derived from them rather than retyped. */
section:first-of-type{padding-top:var(--first-screen-top);}

.hero-grid, .guides-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:48px;
  align-items:start;
}
.hero-copy, .guides-hero-copy{min-width:0;}
.hero-copy > .matrix, .guides-hero-copy > .matrix, .hero-copy > .eyebrow{margin-bottom:var(--eyebrow-gap);}
.hero-copy h1, .guides-hero-copy h1{margin-top:0;line-height:1.12;font-size:var(--h1-size);}

/* ---------- HERO DISC ----------
   Top of the disc on the x-height line of the h1: the block above the
   heading, plus cap-height to x-height, less the empty band above the
   disc inside a 460-wide viewBox. */
.record-stage{
  position:relative;display:flex;align-items:flex-start;justify-content:center;min-width:0;
  margin-top:calc(var(--eyebrow-line) + var(--eyebrow-gap) + 0.38 * var(--h1-size) - 20px);
}
.record-stage svg{width:100%;max-width:460px;height:auto;overflow:visible;}
.disc-spin{animation:mc-spin 18s linear infinite;transform-origin:230px 230px;}
@keyframes mc-spin{to{transform:rotate(360deg);}}

/* The arm rests at -21.5deg and tracks one side; site-ui.js adds
   .tracking and hands it a negative delay so the position carries
   across page views. Both rules have to be present or the class does
   nothing, which is exactly how the arm ended up frozen on three
   pages while it moved on the homepage. */
.tonearm{transform-origin:458px 62px;transform:rotate(-21.5deg);}
.tonearm.tracking{animation:tonearm-track 303s linear infinite;}
@keyframes tonearm-track{
  0%{transform:rotate(-21.5deg);}
  99%{transform:rotate(-3.8deg);}
  100%{transform:rotate(-21.5deg);}
}
@media (prefers-reduced-motion: reduce){ .disc-spin,.tonearm.tracking{animation:none;} }

@media (max-width:820px){
  .hero-grid, .guides-hero-grid{grid-template-columns:1fr;}
  .record-stage{order:-1;margin-top:0;margin-bottom:4px;max-width:180px;margin-left:auto;margin-right:auto;}
  .tonearm{display:none;}
  /* The plinth plate sits outside the .tonearm group on purpose (that group is
     rotated and the plate would turn with it), so hiding the arm used to leave
     the plate behind as a grey square floating beside the disc. */
  .plinth{display:none;}
  /* One line, always, at the desktop size. Space Mono is monospaced at 0.6em
     per glyph, so at 12px with 0.14em tracking the full 43-character eyebrow
     needs ~397px and cannot fit any phone at any tracking. Type is untouched;
     the MC-001-A prefix is dropped instead, because the disc directly above
     already carries it in its label ring. 28 characters, ~264px, fits at 320. */
  .matrix.eyebrow{white-space:nowrap;letter-spacing:0.02em;}
  /* The wide separator is five monospaced cells (space, nbsp, dot, nbsp,
     space) and costs ~44px on its own. Swapped for a plain one, which is two
     cells narrower, so the full line keeps its 12px size. */
  .matrix.eyebrow .ey-sep{font-size:0;}
  .matrix.eyebrow .ey-sep::before{content:" · ";font-size:12px;}
}

/* At 12px the full 43-cell line needs 335px and the narrowest phones have 272.
   Nothing but the prefix can go: the disc above already carries MC-001-A in
   its label ring, so it is the one part that is repeated rather than lost. */
@media (max-width:382px){
  .matrix.eyebrow .ey-code, .matrix.eyebrow .ey-sep{display:none;}
}
@media (max-width:620px){
  .record-stage{display:none;}
  .site-header-inner{padding-top:14px;padding-bottom:14px;flex-wrap:nowrap;gap:8px;}
  .brand .name{font-size:0.92rem;}
  .brand .tag{font-size:8.5px;}
  /* .site-nav no longer shrinks or drops "Home" here: site-ui.js measures
     the real content width and swaps to .nav-toggle + .nav-dropdown when it
     stops fitting, at whatever width that turns out to be. */
}