/* =========================================================
   shoaibsadiq.com

   1. Fonts
   2. Tokens
   3. Base
   4. Layout: spine, topbar, stage, frames
   5. Type
   6. Components
   7. Reveal motion
   8. Responsive
   ========================================================= */

/* ---------------------------------------------------------
   1. Fonts
   --------------------------------------------------------- */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   2. Tokens
   --------------------------------------------------------- */

:root {
  --bg: #0a0908;
  --ink-strong: #f8f3eb;
  --ink: #efeae2;
  --ink-soft: #e6e0d7;
  --ink-muted: #cfc8c0;
  --dim: #a9a19a;
  --dim-2: #8a837c;
  --rule: #221f1b;
  --rule-lit: #3a352e;
  --accent: #e0b463;
  --accent-hi: #f5deb0;
  --accent-ink: #0a0908;
  --accent-underline: #7a6840;
  --rule-btn: #6a635a;

  /* type */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* layout */
  --spine: clamp(38px, 5vw, 68px);
  --pad-x: clamp(20px, 5vw, 88px);
  --pad-l: clamp(20px, 4vw, 64px);
  --pad-t: clamp(46px, 7vh, 80px);
  --pad-b: clamp(30px, 5vh, 54px);

  /* spacing */
  --space-1: clamp(10px, 1.4vh, 16px);
  --space-2: clamp(18px, 2.6vh, 28px);
  --space-3: clamp(28px, 4vh, 44px);
  --space-4: clamp(38px, 5.6vh, 64px);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------
   3. Base
   --------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hi); }

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

::selection {
  background: #3b3017;
  color: #fff8ea;
}

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-weight: 400; }
hr { border: 0; margin: 0; }

.u-break { display: inline; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 180ms var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--accent-ink);
}

/* ---------------------------------------------------------
   4. Layout
   --------------------------------------------------------- */

.spine {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--spine);
  padding: 14px 0 16px;
  background: var(--bg);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.spine__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.spine__ticks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.spine__tick {
  width: 6px;
  height: 1px;
  background: var(--rule-lit);
  transition: background 300ms var(--ease), width 300ms var(--ease);
}
.spine__tick.is-on {
  width: 11px;
  background: var(--accent);
}

.spine__place {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 45;
  display: flex;
  align-items: stretch;
}

.topbar__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(12px, 2vw, 20px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(10, 9, 8, 0.9);
  backdrop-filter: blur(6px);
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.topbar__link:hover { color: var(--ink); }

.topbar__link--solid {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  padding: 0 clamp(14px, 2vw, 22px);
}
.topbar__link--solid:hover {
  color: var(--accent-ink);
  background: var(--accent-hi);
}

.stage { padding-left: var(--spine); }

.frame {
  min-height: 100svh;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  padding: var(--pad-t) var(--pad-x) var(--pad-b) var(--pad-l);
  border-top: 1px solid var(--rule);
}
.frame--open {
  border-top: 0;
  padding-top: clamp(58px, 9vh, 96px);
}

.frame__body { align-self: center; }

/* ---------------------------------------------------------
   5. Type
   --------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--role {
  font-size: clamp(10.5px, 1.1vw, 12px);
  letter-spacing: 0.26em;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink-strong);
  text-wrap: pretty;
}

.display--name {
  font-size: clamp(58px, 13vw, 200px);
  line-height: 0.84;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-3);
}
.display--sm {
  font-size: clamp(46px, 11vw, 168px);
  line-height: 0.88;
  margin-bottom: var(--space-2);
}
.display--md {
  font-size: clamp(30px, 5.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.display--score {
  font-size: clamp(52px, 10vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  padding-bottom: 0.06em;
}

.figure__mark { color: var(--accent); }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.22;
  color: var(--ink-soft);
  max-width: 28ch;
  text-wrap: pretty;
}
.lede--sm {
  font-size: clamp(20px, 2.2vw, 31px);
  line-height: 1.3;
  max-width: 30ch;
}

.meta {
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 12.5px);
  line-height: 1.9;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.meta--wide {
  line-height: 2;
  letter-spacing: 0.1em;
  max-width: 62ch;
  margin-top: var(--space-3);
}
.meta a {
  color: inherit;
  border-bottom: 1px solid var(--accent-underline);
}
.meta a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hairline {
  height: 1px;
  background: var(--accent);
  width: min(100%, 620px);
  margin-bottom: var(--space-2);
}

.foot {
  border-top: 1px solid var(--rule);
  padding-top: clamp(14px, 2.2vh, 20px);
}
.foot--quiet {
  border-top: 0;
  padding-top: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.foot--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px clamp(20px, 4vw, 60px);
}
.foot--block > .meta { margin-top: var(--space-2); }

/* ---------------------------------------------------------
   6. Components
   --------------------------------------------------------- */

/* 01 Scale */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}
.split--mid { align-items: center; }

.figure {
  font-family: var(--serif);
  font-size: clamp(96px, 20vw, 300px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--ink-strong);
}
.split__label {
  display: block;
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.24;
  color: var(--ink-soft);
  max-width: 22ch;
  margin-bottom: clamp(6px, 1.5vh, 18px);
  text-wrap: pretty;
}

.brands {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 30px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}
.brands li { display: inline; }
.brands li:not(:last-child)::after {
  content: " / ";
  color: var(--dim-2);
}

/* 02 A first */
.year {
  position: relative;
  overflow-x: clip;
}
.year__ghost {
  display: block;
  font-family: var(--serif);
  font-size: clamp(120px, 26vw, 380px);
  line-height: 0.86;
  padding-top: 0.1em;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px #2b2723;
  user-select: none;
  margin-bottom: -0.13em;
}
.year__line { max-width: 26ch; font-size: clamp(30px, 5.4vw, 82px); }

/* 03 Seasons */
.regions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  margin-top: var(--space-4);
}
.regions li {
  background: var(--bg);
  padding: 18px 8px 18px 16px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.regions li:nth-child(4n + 1) { padding-left: 0; }

/* 04 Repair */
.caption {
  font-family: var(--mono);
  font-size: clamp(10.5px, 1.05vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-top: var(--space-3);
}
.caption + .lede { margin-top: var(--space-2); }

.ledger__head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.ledger { border-top: 1px solid var(--rule); }
.ledger li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

/* 05 Now */
.pipeline {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.pipeline__step {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.pipeline__step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: clamp(5px, 1vw, 11px);
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0;
}
.pipeline__step--out {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.pipeline + .lede { margin-top: var(--space-3); }

/* 06 Craft */
.craft {
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr;
  column-gap: clamp(18px, 3vw, 44px);
}
.craft dt,
.craft dd {
  padding: clamp(13px, 1.8vh, 18px) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  min-width: 0;
}
.craft dt {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.craft dd {
  font-size: clamp(11px, 1.15vw, 12.5px);
  line-height: 1.95;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* 07 Next */
.email {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(13px, 2.1vw, 26px);
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-underline);
  padding-bottom: 6px;
  margin-top: var(--space-3);
  word-break: break-word;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.email:hover { border-bottom-color: var(--accent); }

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(16px, 2.4vw, 28px);
  margin-top: var(--space-2);
}
.social a {
  font-family: var(--mono);
  font-size: clamp(10.5px, 1.05vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 6px 0;
  transition: color 200ms var(--ease);
}
.social a:hover { color: var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule-btn);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.btn--solid {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.btn--solid:hover {
  color: var(--accent-ink);
  background: var(--accent-hi);
  border-color: var(--accent-hi);
}

/* ---------------------------------------------------------
   7. Reveal motion
   --------------------------------------------------------- */

.js .frame:not(.frame--open) > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js .frame.is-in > * {
  opacity: 1;
  transform: none;
}
.js .frame.is-in > *:nth-child(2) { transition-delay: 90ms; }
.js .frame.is-in > *:nth-child(3) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  .js .frame:not(.frame--open) > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------
   8. Responsive
   --------------------------------------------------------- */

@media (max-width: 760px), (max-height: 620px) {
  html { scroll-snap-type: none; }
  .frame { scroll-snap-align: none; }
}

@media (max-width: 760px) {
  :root {
    --spine: 34px;
    --pad-t: clamp(64px, 9vh, 84px);
  }

  .frame {
    min-height: auto;
    padding-bottom: clamp(40px, 7vh, 56px);
    gap: clamp(26px, 6vh, 40px);
  }
  .frame--open { min-height: 100svh; }
  .frame__body { align-self: start; }

  .spine__place { display: none; }

  .split { align-items: start; }
  .split__label { margin-bottom: 0; }

  .regions { grid-template-columns: repeat(2, 1fr); }
  .regions li { padding-left: 14px; }
  .regions li:nth-child(2n + 1) { padding-left: 0; }

  .craft { grid-template-columns: 1fr; }
  .craft dt { border-bottom: 0; padding-bottom: 0; }
  .craft dd { padding-top: 6px; }

  .pipeline { gap: 10px; }
  .pipeline__step::after { display: none; }

  .u-break { display: none; }
}

@media (max-width: 400px) {
  .brands { font-size: 16px; }
  .actions .btn { width: 100%; justify-content: center; }
}

@media print {
  .spine, .topbar, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .stage { padding-left: 0; }
  .frame { min-height: auto; page-break-inside: avoid; }
}