@layer tokens, base, layout, components, motion;

/* Brand tokens: marketing/brand-kit.md */
@layer tokens {
  :root {
    --ink: #141414;
    --cobalt: #1F4FD8;
    --cobalt-light: #5B82F0;
    --yellow: #FFC629;
    --white: #FFFFFF;

    --bg: #F6F5F1;
    --surface: #FFFFFF;
    --text: var(--ink);
    --muted: #4A4A4A;
    --line: #D6D3CA;
    --link: var(--cobalt);
    --slab: var(--ink);
    --grid: rgb(20 20 20 / 0.06);
    --error: #B42318;
    --success: #146C2E;

    --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Type scale */
    --t-mega: clamp(3.25rem, 12.5vw, 10rem);
    --t-xl: clamp(2.75rem, 8vw, 6rem);
    --t-l: clamp(2rem, 4.5vw, 3rem);
    --t-m: 1.5rem;
    --t-body: 1.0625rem;
    --t-small: 0.875rem;
    --t-tag: 0.75rem;

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 40px;
    --s-6: 64px;
    --s-7: 96px;
    --s-8: 144px;

    --gutter: 16px;
    --max: 1200px;
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101010;
      --surface: #1B1B1B;
      --text: #F2F2F2;
      --muted: #B8B8B8;
      --line: #2E2E2E;
      --link: var(--cobalt-light);
      --slab: #0A0A0A;
      --grid: rgb(255 255 255 / 0.045);
      --error: #FF8A80;
      --success: #7BD88F;
    }
  }

  @media (min-width: 720px) {
    :root { --gutter: 40px; }
  }

  /* Sections that are always dark, in both schemes */
  .seven, .founder {
    --text: #F2F2F2;
    --muted: #B8B8B8;
    --line: #333333;
    --link: var(--cobalt-light);
    --bg: var(--ink);
    --surface: #1B1B1B;
  }

  /* The CTA ticket is always white paper */
  .cta .ticket {
    --text: var(--ink);
    --muted: #4A4A4A;
    --line: #D6D3CA;
    --surface: var(--white);
    --link: var(--cobalt);
    --error: #B42318;
    --success: #146C2E;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 0.92;
    margin: 0;
    text-transform: uppercase;
  }
  p { margin: 0; }
  a { color: var(--link); text-underline-offset: 0.18em; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
}

@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: calc(var(--max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

@layer components {
  .skip {
    position: absolute;
    inset-inline-start: var(--s-2);
    inset-block-start: -48px;
    background: var(--yellow);
    color: var(--ink);
    padding: var(--s-2) var(--s-3);
    font-weight: 600;
    z-index: 10;
  }
  .skip:focus { inset-block-start: var(--s-2); }

  /* Shared: small tags and tabbed section labels */
  .tag, .label, .ticket-tag {
    font-family: var(--font-body);
    font-size: var(--t-tag);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
  }
  .label {
    display: inline-block;
    background: var(--text);
    color: var(--bg);
    padding: 9px 12px 7px;
  }

  /* Header */
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block: var(--s-4);
  }
  .brand img { inline-size: clamp(132px, 30vw, 168px); }
  .ig {
    font-size: var(--t-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    text-decoration: none;
    border-block-end: 2px solid var(--yellow);
    padding-block-end: 2px;
  }
  .ig:hover { color: var(--link); }

  /* Hero, with a faint blueprint grid */
  .hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--s-5) var(--s-6);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
    mask-image: linear-gradient(to bottom, #000 30%, transparent);
  }
  .hero h1 {
    font-size: var(--t-mega);
    line-height: 0.88;
    letter-spacing: -0.005em;
    max-inline-size: 11.5em;
  }
  /* A bar sized to the caps, not the font box, so tight lines don't overlap */
  .hl {
    background: linear-gradient(var(--yellow), var(--yellow)) 0 var(--hl-y, 62%) / 100% 0.86em no-repeat;
    color: var(--ink);
    padding-inline: 0.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hero-foot {
    display: grid;
    gap: var(--s-5);
    margin-block-start: clamp(var(--s-4), 5vw, var(--s-6));
    align-items: start;
  }
  @media (min-width: 860px) {
    .hero-foot { grid-template-columns: 5fr 6fr; gap: var(--s-6); }
  }
  .lede {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.45;
    max-inline-size: 30ch;
    padding-block-start: var(--s-3);
  }

  /* Sign-up form as a work ticket */
  .ticket {
    position: relative;
    border: 2px solid var(--text);
    background: var(--surface);
    padding: var(--s-5) var(--s-4) var(--s-4);
  }
  .ticket-tag {
    position: absolute;
    inset-block-start: -12px;
    inset-inline-start: var(--s-3);
    background: var(--yellow);
    color: var(--ink);
    padding: 7px 10px 5px;
  }
  .signup label { display: block; font-weight: 600; font-size: 0.9375rem; margin-block-end: var(--s-2); }
  .row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .signup input[type="email"] {
    flex: 1 1 240px;
    min-inline-size: 0;
    block-size: 56px;
    font: inherit;
    padding-inline: var(--s-3);
    border: 2px solid var(--text);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
  }
  .cta .signup input[type="email"] { background: var(--white); }
  .signup input[aria-invalid="true"] { border-color: var(--error); }
  .signup button {
    flex: 0 0 auto;
    block-size: 56px;
    font: inherit;
    font-weight: 600;
    padding-inline: var(--s-4);
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--cobalt);
    color: var(--white);
    cursor: pointer;
    transition: translate 120ms, box-shadow 120ms;
  }
  .signup button:hover { translate: 0 -2px; box-shadow: 0 3px 0 var(--ink); }
  .signup button:active { translate: 0 0; box-shadow: none; }
  .signup button[disabled] { opacity: 0.6; cursor: progress; }
  @media (max-width: 479px) {
    .signup button { flex: 1 1 100%; }
  }
  .status { min-block-size: 1.55em; margin-block-start: var(--s-2); font-weight: 500; }
  .status[data-state="error"] { color: var(--error); }
  .status[data-state="ok"] { color: var(--success); }
  .fine {
    font-size: var(--t-small);
    color: var(--muted);
    border-block-start: 2px dashed var(--line);
    padding-block-start: var(--s-3);
    margin-block-start: var(--s-2);
  }
  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  /* Signature: a tape measure */
  .tape {
    block-size: 28px;
    background-color: var(--yellow);
    border-block: 2px solid var(--ink);
    background-image:
      repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 96px),
      repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 48px),
      repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px);
    background-size: 100% 100%, 100% 55%, 100% 28%;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  @media (max-width: 719px) {
    .tape { block-size: 20px; }
  }

  /* What we're building: spec-sheet columns */
  .pillars { padding-block: var(--s-6); }
  .spec {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-5);
  }
  .spec li { border-block-start: 4px solid var(--text); padding-block-start: var(--s-4); }
  .spec h3 { font-size: var(--t-l); margin-block-end: var(--s-3); }
  .spec p { max-inline-size: 34ch; }
  @media (min-width: 860px) {
    .spec {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-block-start: 4px solid var(--text);
    }
    .spec li { border-block-start: 0; padding: var(--s-4) var(--s-4) 0; }
    .spec li:first-child { padding-inline-start: 0; }
    .spec li + li { border-inline-start: 1px solid var(--line); }
  }

  /* 7 things: the punch list */
  .seven { background: var(--slab); color: var(--text); }
  .seven .split { padding-block: var(--s-7) var(--s-8); }
  .split { display: grid; gap: var(--s-5); align-items: start; }
  .seven h2 { font-size: var(--t-xl); }
  .seven .sub { color: var(--muted); font-size: 1.125rem; margin-block-start: var(--s-4); max-inline-size: 28ch; }
  @media (min-width: 860px) {
    .split { grid-template-columns: 5fr 6fr; gap: var(--s-6); }
    .seven-head { position: sticky; inset-block-start: var(--s-5); }
  }
  .checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: item;
    border-block-start: 2px solid var(--text);
  }
  .checklist li {
    counter-increment: item;
    display: grid;
    grid-template-columns: 3ch 1fr 28px;
    gap: var(--s-3);
    align-items: center;
    padding-block: 18px;
    border-block-end: 1px dashed #3A3A3A;
    font-size: 1.1875rem;
    font-weight: 500;
  }
  .checklist li::before {
    content: counter(item);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--yellow);
  }
  .checklist li::after {
    content: "";
    inline-size: 28px;
    block-size: 28px;
    border: 2px solid var(--yellow);
    background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5' fill='none' stroke='%23FFC629' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E");
  }

  /* Why not: the options, struck out */
  .why { padding-block: var(--s-7) var(--s-6); }
  .compare { margin: 0; border-block-start: 4px solid var(--text); }
  .compare > div {
    display: grid;
    gap: var(--s-2);
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--line);
  }
  @media (min-width: 860px) {
    .compare > div { grid-template-columns: 22rem 1fr; gap: var(--s-5); align-items: baseline; }
  }
  .compare dt {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--t-l);
    text-transform: uppercase;
    line-height: 1;
    text-decoration: line-through var(--yellow);
    text-decoration-thickness: 0.08em;
    text-decoration-skip-ink: none;
  }
  .compare dd { margin: 0; max-inline-size: 52ch; font-size: 1.125rem; }

  /* Founder: always dark, the emotional peak */
  /* #151515 is the photo's own background (sampled), so its edges disappear */
  .founder { --bg: #151515; background: var(--bg); color: var(--text); padding-block: var(--s-8); }
  .nowrap { white-space: nowrap; }
  .founder-hed {
    font-family: var(--font-head);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--t-xl);
    line-height: 0.92;
    margin-block: var(--s-5) var(--s-6);
    max-inline-size: 9em;
  }
  .founder-grid { display: grid; gap: var(--s-5); align-items: start; }
  @media (min-width: 960px) {
    .founder-grid { grid-template-columns: 7fr 5fr; gap: var(--s-6); }
    .founder-photo { margin-inline-start: calc(-1 * var(--gutter)); position: sticky; inset-block-start: var(--s-5); }
  }
  @media (max-width: 719px) {
    .founder-photo { margin-inline: calc(-1 * var(--gutter)); }
  }
  .founder-photo { margin-block: 0; }
  @media (max-width: 959px) {
    .founder-photo { margin-block-end: var(--s-2); }
  }
  .story { display: grid; gap: var(--s-3); font-size: 1.125rem; }
  .pull {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.4;
    border-inline-start: 6px solid var(--yellow);
    padding-inline-start: var(--s-3);
  }
  .about {
    margin-block-start: var(--s-6);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--line);
    display: grid;
    gap: var(--s-3);
  }
  .about .tag { color: var(--muted); }
  .about-body { display: grid; gap: var(--s-3); color: var(--muted); }
  .sign {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--t-m);
    text-transform: uppercase;
    line-height: 1;
    border-block-start: 2px solid var(--text);
    padding-block-start: var(--s-2);
    max-inline-size: 16rem;
    margin-block-start: var(--s-3);
  }

  /* Closing CTA */
  .cta { background: var(--cobalt); color: var(--white); }
  .cta-grid { display: grid; gap: var(--s-5); align-items: center; padding-block: var(--s-7); }
  @media (min-width: 860px) {
    .cta-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  }
  .cta h2 { font-size: var(--t-xl); }
  .cta .sub { margin-block-start: var(--s-4); font-size: 1.125rem; max-inline-size: 36ch; }
  .cta .sub a { color: var(--white); font-weight: 600; }
  .cta .ticket { color: var(--text); border-color: var(--ink); padding-block-end: var(--s-3); }
  .status:empty { min-block-size: 0; margin: 0; }

  /* Footer */
  .foot {
    display: grid;
    gap: var(--s-2) var(--s-4);
    align-items: center;
    padding-block: var(--s-5) var(--s-6);
    font-size: var(--t-small);
    color: var(--muted);
  }
  @media (min-width: 720px) {
    .foot { grid-template-columns: auto 1fr auto; }
  }
  .foot p:last-child { max-inline-size: 44ch; }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .tape { animation: pull-tape 700ms cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes pull-tape { from { clip-path: inset(0 100% 0 0); } }
  }
}