/* Twisted Rocks — design tokens and base styles
   Shared by the design mockups and the finished site.
   Fonts are self-hosted in assets/fonts (no outside requests). */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Velvet: the dark cloth the pieces are photographed on */
  --velvet: #120f12;        /* page background */
  --velvet-2: #1b161b;      /* raised panels, cards */
  --velvet-3: #2a2130;      /* plum lift: hover, footer, chips */
  --line: rgba(217, 218, 214, 0.14); /* hairlines on dark */

  /* Metals */
  --silver: #e4e3df;        /* body text, 14.8:1 on velvet */
  --silver-dim: #aeaca8;    /* secondary text, 8.4:1 on velvet */
  --gold: #d9b464;          /* accent, links, eyebrows, 9.7:1 on velvet */
  --gold-deep: #b8893a;     /* gold gradient low point, borders only */
  --copper: #d9a77a;        /* the logo wire: tagline, the drawn wire line, 8.9:1 on velvet */
  --copper-deep: #b87b48;   /* copper gradient low point, borders only */

  /* Stone highlights (use sparingly, one per moment) */
  --seafoam: #c6dccb;       /* the logo stone, 13.2:1 on velvet */
  --lapis: #7aa0e8;         /* 7.3:1 on velvet */
  --fuchsite: #62b89e;      /* 8.0:1 on velvet */
  --rose: #e8adbb;          /* 10.1:1 on velvet */
  --magenta: #c2407a;       /* decorative fills only, not for text */

  --wire-silver: linear-gradient(135deg, #ffffff 0%, #b7b9b6 50%, #ecece8 100%);
  --wire-gold: linear-gradient(135deg, #f6db97 0%, #be8f3e 50%, #e9c675 100%);
  --wire-copper: linear-gradient(135deg, #f0cba4 0%, #c48e5c 50%, #e2b387 100%);

  /* Type */
  --font-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Karla", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.9375rem;                                   /* 15px captions, chips */
  --step-0: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);    /* 18-20px body */
  --step-1: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);   /* 22-26px lead */
  --step-2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);        /* 28-36px h3 */
  --step-3: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);         /* 40-60px h2 */
  --step-4: clamp(3rem, 2rem + 5vw, 6.5rem);              /* 48-104px h1 */

  /* 8px grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;

  --radius-pebble: 28px 34px 30px 38px / 34px 28px 38px 30px; /* tumbled, never perfectly round */
  --radius: 16px;
  --radius-sm: 8px;

  --shadow-lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.8);
  --glow-gold: 0 0 0 2px var(--velvet), 0 0 0 4px var(--gold), 0 0 24px rgba(217,180,100,.35);

  --ease: cubic-bezier(.2,.7,.2,1);
  --max: 1240px;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--velvet);
  color: var(--silver);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* faint cloth texture, same mottled dark as the photo backdrop */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 12% 8%, rgba(53,89,174,.10), transparent 60%),
    radial-gradient(50vmax 40vmax at 92% 30%, rgba(98,184,158,.07), transparent 60%),
    radial-gradient(40vmax 30vmax at 70% 100%, rgba(194,64,122,.07), transparent 60%),
    var(--velvet);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; color: var(--silver); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 var(--s2); max-width: var(--measure); }
a { color: var(--gold); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: #f0d28c; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--silver); }
.muted { color: var(--silver-dim); }

:focus-visible { outline: none; box-shadow: var(--glow-gold); border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  background: var(--gold); color: var(--velvet); padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s2); }

.wrap { width: min(100% - 2 * var(--s3), var(--max)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 2 * var(--s6), var(--max)); } }

/* Buttons: a wire-wrapped edge (gold hairline) not a filled pill */
.btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 48px; padding: 0 var(--s3);
  font: 600 1rem/1 var(--font-body); letter-spacing: .04em;
  color: var(--velvet); background: var(--gold);
  border: 0; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.btn:hover { background: #ecca7f; color: var(--velvet); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--silver); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: var(--velvet-3); color: var(--silver); box-shadow: inset 0 0 0 1px var(--gold-deep); }

/* Stone chip: names the stone and the wire in captions */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); line-height: 1; padding: 8px 12px;
  border-radius: 999px; background: var(--velvet-3); color: var(--silver);
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--lapis)); box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.chip--silver i { background: var(--wire-silver); }
.chip--gold i { background: var(--wire-gold); }

/* Scroll reveal: opt-in, motion-safe */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}