/* JetBrains Mono (SIL OFL 1.1), self-hosted — see fonts/OFL-LICENSE.txt */
/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-greek-wght-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.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;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.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;
}

/* ==========================================================================
   COLOR TOKENS — edit palette here, nothing else
   ========================================================================== */
:root {
  /* Surfaces */
  --color-bg:            #1e1e1e;   /* page background — dark gray, not pure black */
  --color-bg-raised:     #262626;   /* cards, inputs, video placeholder */
  --color-bg-hover:      #2c2c2c;   /* hover state for raised surfaces */

  /* Text */
  --color-ink:           #f0f0ec;   /* headings, primary text */
  --color-ink-secondary: #adada6;   /* body copy */
  --color-ink-tertiary:  #7a7a73;   /* captions, meta */
  --color-ink-faint:     #4d4d47;   /* disabled / index numerals */

  /* Rules & borders */
  --color-rule:          rgba(240, 240, 236, 0.14);
  --color-rule-strong:   rgba(240, 240, 236, 0.30);

  /* Accent — single accent color, used sparingly */
  --color-accent:          #e4821a;
  --color-accent-contrast: #16211f; /* text/background painted ON the accent */

  /* Status */
  --color-ok:    #7fd88f;
  --color-error: #ff6b5e;

  /* -------- Legacy aliases --------
     Kept so inline styles already authored against the old token names
     (var(--color-text-secondary), var(--radius-md), var(--shadow-lg), etc.)
     resolve to the new flat, un-rounded, shadowless system automatically. */
  --color-text-primary:    var(--color-ink);
  --color-text-secondary:  var(--color-ink-secondary);
  --color-text-muted:      var(--color-ink-tertiary);
  --color-accent-primary:  var(--color-accent);
  --radius-md: 0;
  --shadow-lg: none;
}

/* ==========================================================================
   SPACING / SIZE TOKENS
   ========================================================================== */
:root {
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --max-width: 980px;
  --edge: 24px;        /* horizontal gutter, per-section (not on .container) */
  --label-w: 168px;    /* ledger label column, index page only */
}

@media (max-width: 560px) {
  :root { --edge: 16px; }
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
* , *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink-secondary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

::selection { background: var(--color-accent); color: var(--color-accent-contrast); }

*:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 { font-family: var(--mono); color: var(--color-ink); margin: 0; }

h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.1;
}

h2 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-lg);
}
h2::before { content: '— '; color: var(--color-accent); }

h3 { font-size: 0.95rem; font-weight: 700; color: var(--color-ink); }

p { margin: 0 0 var(--spacing-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); }
a:hover, a:focus-visible { color: var(--color-accent); text-decoration-color: var(--color-accent); }

ul { padding-left: 1.2em; margin: 0 0 var(--spacing-md); }
li { margin-bottom: var(--spacing-sm); }
li::marker { color: var(--color-accent); }

.subtitle { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-top: var(--spacing-sm); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container { max-width: var(--max-width); margin: 0 auto; }

hr { border: none; border-top: 1px solid var(--color-rule); margin: 0; }

/* ==========================================================================
   NAV — sticky, horizontal, unambiguous
   ========================================================================== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule-strong);
}
.topnav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--edge);
}
.topnav__brand {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.topnav__links { display: flex; flex-wrap: wrap; gap: var(--spacing-1, 4px); list-style: none; margin: 0; padding: 0; }
.topnav__links a {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-secondary);
  border: 1px solid transparent;
}
.topnav__links a:hover, .topnav__links a:focus-visible { color: var(--color-ink); border-color: var(--color-rule-strong); }
.topnav__links a[aria-current="page"] { color: var(--color-accent-contrast); background: var(--color-accent); font-weight: 700; }
.topnav__links a.is-cta { color: var(--color-accent); border-color: var(--color-accent); }
.topnav__links a.is-cta:hover { color: var(--color-accent-contrast); background: var(--color-accent); }

/* ==========================================================================
   PAGE HEADER — simple hero for sub-pages (meow / hedgehog / legal)
   ========================================================================== */
.page-hero { padding: var(--spacing-3xl) var(--edge) var(--spacing-2xl); border-bottom: 1px solid var(--color-rule); }

/* ==========================================================================
   PANEL — generic bordered section, used by sub-pages between <hr>s
   ========================================================================== */
.panel { padding: var(--spacing-2xl) var(--edge); }
.panel.legal h2 { margin-top: var(--spacing-2xl); }
.panel.legal h2:first-child { margin-top: 0; }
.panel.legal p { max-width: 68ch; }

/* ==========================================================================
   HOMEPAGE — bio header
   ========================================================================== */
.pageheader {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl) var(--edge);
  border-bottom: 1px solid var(--color-rule);
  flex-wrap: wrap;
}
.pageheader__photo {
  width: 100px; height: 100px;
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(35%) contrast(1.05);
  border: 1px solid var(--color-rule-strong);
}
.pageheader__role {
  margin: var(--spacing-1, 4px) 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pageheader__meta { font-size: 0.82rem; color: var(--color-ink-tertiary); margin-top: var(--spacing-sm); }
.pageheader__meta p { margin: 4px 0; }

/* ==========================================================================
   HOMEPAGE — ledger rows
   ========================================================================== */
.ledger-row {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl) var(--edge);
  border-bottom: 1px solid var(--color-rule);
}
.ledger-row__label {
  display: flex; align-items: baseline; gap: var(--spacing-sm);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink);
}
.ledger-row__label small { font-weight: 400; color: var(--color-ink-faint); letter-spacing: 0.02em; }
.ledger-row__body { min-width: 0; }
.ledger-row__subhead { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink); margin: var(--spacing-2xl) 0 var(--spacing-md); }

.credits-line { font-size: 0.87rem; line-height: 1.75; color: var(--color-ink-tertiary); margin: 0 0 var(--spacing-xl); max-width: 62ch; }

.luts-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.luts-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md);
  padding: var(--spacing-md) 0; font-size: 0.87rem; border-bottom: 1px solid var(--color-rule);
}
.luts-link { color: var(--color-ink); text-decoration: none; font-weight: 500; }
.luts-link:hover { color: var(--color-accent); }
.luts-item span { flex-shrink: 0; font-size: 0.74rem; color: var(--color-ink-tertiary); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }

/* Tools grid */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.tool-card {
  display: block; text-decoration: none; padding: var(--spacing-lg);
  border: 1px solid var(--color-rule); transition: background .1s linear, border-color .1s linear;
}
.tool-card:hover, .tool-card:focus-visible { background: var(--color-bg-raised); border-color: var(--color-rule-strong); }
.tool-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 4px; }
.tool-card p { margin: 0; font-size: 0.82rem; color: var(--color-ink-tertiary); }
.tool-card span { display: inline-block; margin-top: var(--spacing-md); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   VIDEO
   ========================================================================== */
.video-container {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--color-bg-raised); border: 1px solid var(--color-rule);
}
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ==========================================================================
   FEATURED LOOK CARDS (meow.html)
   ========================================================================== */
.featured-looks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.look-card { border: 1px solid var(--color-rule); padding: var(--spacing-lg); }
.look-card img { border: 1px solid var(--color-rule); margin: var(--spacing-md) 0; }
.look-card h3 { text-transform: uppercase; letter-spacing: 0.02em; }
.look-card p { font-size: 0.87rem; color: var(--color-ink-secondary); }
@media (max-width: 700px) { .featured-looks { grid-template-columns: 1fr; } }

/* ==========================================================================
   GALLERY / BEFORE-AFTER COMPARISON SLIDER
   ========================================================================== */
.gallery-section h3 { margin-bottom: var(--spacing-md); }

.comparison-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--color-rule);
  margin-bottom: var(--spacing-md);
  background: var(--color-bg-raised);
}
.comparison-before, .comparison-after {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; -webkit-user-select: none; user-select: none; pointer-events: none;
}
.comparison-after { clip-path: inset(0 0 0 50%); }

.comparison-slider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--color-accent);
  pointer-events: none;
}
.comparison-slider::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; transform: translate(-50%, -50%);
  border: 1px solid var(--color-accent); background: var(--color-bg);
}
.comparison-slider::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 1px; background: var(--color-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px transparent;
}

.comparison-label {
  position: absolute; top: var(--spacing-sm);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink); background: rgba(20, 20, 20, 0.65);
  padding: 3px 8px; z-index: 2; pointer-events: none;
}
.comparison-label.before { left: var(--spacing-sm); }
.comparison-label.after  { right: var(--spacing-sm); }

/* Full viewport width on small screens — comparisons need the room */
@media (max-width: 700px) {
  .comparison-container {
    margin-left: calc(var(--edge) * -1);
    margin-right: calc(var(--edge) * -1);
    width: calc(100% + (var(--edge) * 2));
    border-left: none;
    border-right: none;
  }
}

.proof-photo { border: 1px solid var(--color-rule); margin: 0 auto; }

/* ==========================================================================
   PURCHASE BAND — order block sits beside the copy, nothing centered
   ========================================================================== */
.purchase-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--spacing-xl);
  align-items: start;
}
.purchase-copy .proof-photo { width: 220px; margin: 0 0 var(--spacing-lg); }
.purchase-copy p { max-width: 64ch; }

.purchase-order {
  border: 1px solid var(--color-rule);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.purchase-order__label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-tertiary); margin: 0; }
.purchase-order__price { font-size: 2rem; font-weight: 800; color: var(--color-ink); margin: -8px 0 0; }
.purchase-order__vat { font-size: 0.75rem; color: var(--color-ink-faint); margin: -8px 0 0; }
.purchase-order hr { margin: var(--spacing-sm) 0; }
.purchase-order .btn { align-self: stretch; text-align: center; }
.purchase-order__demo-note { font-size: 0.76rem; color: var(--color-ink-tertiary); margin: 0; }

@media (max-width: 700px) {
  .purchase-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  background: transparent;
  color: var(--color-accent);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn::before { content: '[ '; }
.btn::after { content: ' ]'; }
.btn:hover, .btn:focus-visible { background: var(--color-accent); color: var(--color-accent-contrast); }

.btn--secondary { color: var(--color-ink-secondary); border-color: var(--color-rule-strong); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-ink-secondary); color: var(--color-bg); }

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-form { display: flex; flex-direction: column; gap: var(--spacing-md); max-width: 460px; }
.cf-row { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.cf-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.cf-input {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-rule);
  border-radius: 0;
  padding: var(--spacing-md);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.88rem;
}
.cf-input::placeholder { color: var(--color-ink-faint); }
.cf-input:focus-visible { outline: none; border-color: var(--color-accent); }
.cf-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink-tertiary) 50%),
    linear-gradient(135deg, var(--color-ink-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--spacing-xl);
}
.cf-textarea { resize: vertical; min-height: 100px; }
.cf-submit { align-self: flex-start; }
.h-captcha { min-height: 78px; }
.h-captcha:empty::before { content: "Captcha loads when you start filling in the form."; font-size: 0.72rem; color: var(--color-ink-faint); }
.cf-status { font-size: 0.78rem; min-height: 1.2em; margin: 0; }
.cf-status[data-state="success"] { color: var(--color-ok); }
.cf-status[data-state="error"] { color: var(--color-error); }
.cf-status[data-state="sending"] { color: var(--color-ink-tertiary); }
.cf-note { font-size: 0.76rem; color: var(--color-ink-faint); max-width: 52ch; line-height: 1.65; margin-top: var(--spacing-lg); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--edge);
  font-size: 0.76rem;
}
.footer p { margin: 0; color: var(--color-ink-faint); }
.footer__links { display: flex; gap: var(--spacing-md); }
.footer__links a { color: var(--color-ink-tertiary); text-decoration: none; }
.footer__links a:hover { color: var(--color-accent); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 700px) {
  .ledger-row { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .ledger-row__label { padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-rule); }
}
@media (max-width: 560px) {
  .pageheader { flex-direction: column; align-items: flex-start; }
  .luts-item { flex-direction: column; align-items: flex-start; gap: 4px; }
}