/* thesmall.company
   Editorial serif, mono metadata, one square. One accent color per screen.
   Tokens and scale follow DESIGN.md; deltas follow the build spec. */

/* ---------- 1. Tokens ---------- */

:root {
  /* color */
  --paper: #FAFAF7;
  --paper-2: #F1F0EB;
  --ink: #0E0E10;
  --ink-muted: #55555B;
  --accent: #2438FF;
  --accent-dark: #8C98FF; /* accent on ink bands only */
  --rule: #0E0E10;
  --rule-soft: #0E0E1024;

  /* type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s10: 40px;
  --s16: 64px;
  --s24: 96px;
  --column: 100px;

  /* layout */
  --content: 1200px;
  --measure: 640px;
  --masthead: 36px;
  --control: 48px;
  --gutter: var(--s10);

  /* lines */
  --hair: 1px;
  --heavy: 2px;
  --radius: 0;

  /* motion */
  --t-hover: 120ms ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* type scale */
  --display-xl: clamp(56px, 10.4vw, 150px);
  --display-l: clamp(40px, 5.9vw, 76px);
  --display-m: clamp(36px, 5vw, 56px);
  --title: 28px;
  --body-l: 21px;
  --body: 18px;
  --label: 11px;
  --ui: 14px;
  --caption: 12px;
}

@media (max-width: 720px) {
  :root {
    --gutter: var(--s6);
    --title: 24px;
    --body-l: 19px;
    --body: 17px;
  }
}

/* ---------- 2. Base ---------- */

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

html {
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  position: relative;
  z-index: 0;
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Column hairlines live only around the hero and fade out below it. They are
   anchored to the gutter, so the first line sits exactly one gutter in. */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--rule-soft) var(--hair), transparent var(--hair));
  background-size: var(--column) 100%;
  background-position: var(--gutter) 0;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
}

@media (min-width: 1280px) {
  body::before {
    /* Content is centered at 1200. Tile is 100 wide, so placing its midpoint
       10px left of center puts a line at (center - 560) = content left + gutter. */
    background-position: calc(50% - 10px) 0;
  }
}

@media (max-width: 880px) {
  body::before {
    height: 760px;
  }
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
p,
ul,
figure,
blockquote {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-hover);
}

img,
svg {
  display: block;
}

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

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- 3. Type utilities ---------- */

.label {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ui {
  font-family: var(--mono);
  font-size: var(--ui);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.caption {
  font-family: var(--mono);
  font-size: var(--caption);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.body-l {
  font-size: var(--body-l);
  line-height: 1.5;
}

.muted {
  color: var(--ink-muted);
}

.measure {
  max-width: var(--measure);
}

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

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

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 5. Masthead bar ---------- */

/* Left: where we are, with a ticking local clock. Right: the one promise worth a slot. */
.masthead {
  border-top: var(--heavy) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  background: var(--paper);
}

.masthead .wrap {
  height: var(--masthead);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  white-space: nowrap;
}

.masthead__time {
  font-variant-numeric: tabular-nums;
}

.masthead__right {
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .masthead__right {
    display: none;
  }
}

/* ---------- 6. Nav ---------- */

.nav .wrap {
  min-height: var(--control);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

.nav__links {
  display: flex;
  gap: var(--s6);
  margin-left: auto;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control);
  color: var(--ink);
}

.nav__links a:hover {
  color: var(--accent);
}

.nav__links a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 6px;
}

/* Horizontal lockup: mark 28 + name in Newsreader 22, 12px gap. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
}

.lockup span {
  position: relative;
  top: 0.04em; /* optical: sit the x-height on the mark's vertical center */
}

.lockup span {
  white-space: nowrap;
}

.lockup img,
.lockup svg {
  width: 28px;
  height: 28px;
  flex: none;
}

.lockup:hover {
  color: var(--accent);
}

/* Under 480 the masthead bar already names the studio directly above the nav,
   so the lockup drops to the mark alone. The link keeps its accessible name. */
@media (max-width: 479px) {
  .nav .lockup span {
    display: none;
  }
}

/* ---------- 7. Hero ---------- */

.hero {
  padding-block: var(--s16) var(--s24);
}

.hero__grid {
  display: grid;
  /* 160 | 1fr. The left column is the mark's own width, so the wordmark column
     (and the "Small" indent one column in) land on the background hairlines. */
  grid-template-columns: 160px 1fr;
  gap: var(--s10);
  align-items: start;
}

.mark {
  width: 160px;
  height: 160px;
  overflow: visible;
}

.mark__pixel {
  transition: transform 280ms var(--ease-out);
}

.mark:hover .mark__pixel {
  transform: translate(-10px, -10px);
}

/* Wordmark: three lines, Newsreader Light. */
.wordmark {
  font-family: var(--serif);
  font-size: var(--display-xl);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  margin-top: 0.073em; /* measured: puts the cap height of "The" on the mark's top edge */
}

.wordmark__line {
  display: block;
  white-space: nowrap;
}

.wordmark__line--small {
  font-style: italic;
  color: var(--accent);
  padding-left: var(--column);
}

.wordmark__square {
  display: inline-block;
  width: 0.147em; /* 22px at 150 */
  height: 0.147em;
  margin-left: 0.093em; /* 14px at 150 */
  background: var(--ink);
  vertical-align: baseline;
}

@media (max-width: 880px) {
  .hero {
    padding-block: var(--s10) var(--s16);
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }
  .mark {
    width: 64px;
    height: 64px;
  }
  .wordmark {
    font-size: clamp(44px, 14.4vw, 56px);
    margin-top: 0;
  }
}

/* ---------- 8. Headline block ---------- */

.headline {
  padding-block: 0 var(--s24);
}

.headline h1 {
  font-size: var(--display-l);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.headline h1 .line {
  display: block;
}

.headline h1 .line--accent {
  color: var(--accent);
}

.headline h1 em {
  font-style: italic;
}

.headline .lead {
  max-width: var(--measure);
}

.headline .lead {
  margin-top: var(--s10);
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s6) var(--s10);
  margin-top: var(--s10);
}

@media (max-width: 720px) {
  .headline {
    padding-bottom: var(--s16);
  }
  .headline h1 {
    letter-spacing: -0.02em;
  }
  .headline h1 .line + .line,
  .manifesto__title .line + .line {
    margin-top: 0.14em; /* the two sentences wrap to four lines here; give them a seam */
  }
  .headline .lead,
  .cta {
    margin-top: var(--s6);
  }
}

/* ---------- 9. Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  height: var(--control);
  padding: 0 var(--s4);
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--ui);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
}

.btn--secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Optional trailing glyph: a 6px solid square. */
.btn__square {
  width: 6px;
  height: 6px;
  background: currentColor;
  flex: none;
}

.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 4px;
  transition: color var(--t-hover), text-decoration-color var(--t-hover);
}

.link:hover {
  color: var(--accent);
}

/* ---------- 10. Belief strip ---------- */

.belief {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--paper);
  padding-block: var(--s24);
}

.belief__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s10);
  align-items: end;
}

.belief p {
  font-size: var(--display-m);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.belief em {
  font-style: italic;
  color: var(--accent-dark);
}

.belief .link {
  display: inline-block;
  margin-top: var(--s6);
  color: var(--paper);
  text-decoration-color: #FAFAF780;
}

.belief .link:hover {
  color: var(--accent-dark);
  text-decoration-color: var(--accent-dark);
}

.belief ::selection {
  background: var(--paper);
  color: var(--ink);
}

/* The logo, drawn as an idea: the pixel ends up inside the box. */
.belief__box {
  --b: 200px;
  position: relative;
  width: var(--b);
  height: var(--b);
  border: var(--heavy) solid var(--paper);
}

.belief__pixel {
  position: absolute;
  left: 58%;
  top: 58%;
  width: 24%;
  height: 24%;
  margin: -1px 0 0 -1px;
  background: var(--paper);
}

@media (max-width: 720px) {
  .belief {
    padding-block: var(--s16);
  }
  .belief__grid {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }
  .belief__box {
    --b: 96px;
  }
}

/* ---------- 11. Founder note ---------- */

.note {
  padding-block: var(--s24);
}

.note__grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s10);
  align-items: start;
}

.note__label {
  padding-top: 0.45em; /* optical: sit the cap height on the body's x-height */
}

.note__body {
  text-wrap: pretty;
}

.note__sig {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
}

.note__name {
  font-size: var(--title);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.note__sep {
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .note {
    padding-block: var(--s16);
  }
  .note__grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .note__label {
    padding-top: 0;
  }
}

/* ---------- 12. Footer ---------- */

.footer {
  background: var(--paper-2);
  border-top: var(--heavy) solid var(--rule);
  padding-block: var(--s10);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s10);
  align-items: center;
}

.footer__promise {
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}

.footer__bottom {
  margin-top: var(--s10);
  padding-top: var(--s4);
  border-top: var(--hair) solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
}

.footer__bottom a {
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 4px;
}

.footer__bottom a:hover {
  color: var(--accent);
}

@media (max-width: 720px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
    align-items: start;
  }
}

/* ---------- 13. Manifesto (/why) ---------- */

.manifesto {
  padding-block: var(--s16) var(--s24);
}

.manifesto__title {
  font-size: var(--display-l);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: var(--s24);
}

.manifesto__title .line {
  display: block;
}

.manifesto__title .line--accent {
  color: var(--accent);
}

.manifesto__title em {
  font-style: italic;
}

.beat {
  max-width: var(--measure);
}

.beat + .beat {
  margin-top: var(--s16);
}

.beat h2 {
  font-size: var(--title);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.beat p {
  margin-top: var(--s4);
  text-wrap: pretty;
}

.pull {
  position: relative;
  max-width: 900px;
  margin-block: var(--s24);
  padding-top: var(--s6);
}

.pull::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--heavy);
  background: var(--rule);
  transform-origin: left center;
}

.pull p {
  font-size: var(--display-m);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-wrap: balance;
  hanging-punctuation: first;
}

.manifesto + .note {
  border-top: var(--hair) solid var(--rule);
}

@media (max-width: 720px) {
  .manifesto {
    padding-block: var(--s10) var(--s16);
  }
  .manifesto__title {
    margin-bottom: var(--s16);
    letter-spacing: -0.02em;
  }
  .beat + .beat {
    margin-top: var(--s10);
  }
  .pull {
    margin-block: var(--s16);
  }
}

/* A hundred squares, three of them lit: "You need three. You pay for all hundred." */
.hundred {
  margin: var(--s10) 0 0;
  max-width: 360px;
}

.hundred__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

.hundred__grid i {
  display: block;
  aspect-ratio: 1;
  background: #0E0E1022;
}

.hundred__grid i.on {
  background: var(--accent);
}

.hundred__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin-top: var(--s4);
  color: var(--ink-muted);
}

.hundred__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.sw {
  display: block;
  width: 10px;
  height: 10px;
  background: #0E0E1033;
}

.sw--on {
  background: var(--accent);
}

.beat .cta {
  margin-top: var(--s10);
}

/* ---------- 14. Reserved components (unused for now) ---------- */

/* Product row: whole row is the link. Hover: name goes accent. */
.product {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: var(--hair) solid var(--rule);
  color: var(--ink);
}

.product:first-child {
  border-top: var(--hair) solid var(--rule);
}

.product__name {
  font-size: var(--title);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color var(--t-hover);
}

.product:hover .product__name {
  color: var(--accent);
}

.product__desc {
  margin-top: var(--s1);
}

.product__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s2);
}

/* Tag: mono label, 1px ink border. LIVE · EARLY ACCESS · INVITE ONLY · COMING */
.tag {
  display: inline-block;
  padding: var(--s1) var(--s2);
  border: var(--hair) solid var(--ink);
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- 15. Motion ---------- */

/* The colon in the clock ticks. Cheap, and it proves the time is live. */
@media (prefers-reduced-motion: no-preference) {
  .colon {
    animation: tick 2s steps(1) infinite;
  }

  @keyframes tick {
    50% {
      opacity: 0.25;
    }
  }
}

/* Hero on load: the box lands, the pixel follows 300ms later, then the wordmark lines
   settle in turn. Opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .mark {
    animation: fade-in 320ms var(--ease-out) both;
  }

  .mark__pixel {
    animation: fade-in 240ms var(--ease-out) 300ms both;
  }

  .wordmark__line {
    animation: fade-in 560ms var(--ease-out) both;
  }

  .wordmark__line:nth-child(1) { animation-delay: 160ms; }
  .wordmark__line:nth-child(2) { animation-delay: 260ms; }
  .wordmark__line:nth-child(3) { animation-delay: 360ms; }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Scroll-driven: no JavaScript. Browsers without support show the finished state. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Pull-quote rules draw in from the left. */
    .pull::before {
      animation: draw-rule linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    /* The pixel finds its box. */
    .belief__pixel {
      animation: pixel-home linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }

    /* The hundred squares fill in one by one; the three you use arrive last, in blue. */
    .hundred__grid i {
      animation: square-in linear both;
      animation-timeline: view();
      animation-range:
        entry calc(var(--i) * 0.45%)
        entry calc(var(--i) * 0.45% + 18%);
    }

    .hundred__grid i.on {
      animation-name: square-on;
      animation-range: entry 55% cover 30%;
    }

    @keyframes draw-rule {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes pixel-home {
      from { transform: translate(380%, 320%); opacity: 0; }
      25% { opacity: 1; }
      to { transform: none; opacity: 1; }
    }

    @keyframes square-in {
      from { opacity: 0; transform: scale(0.4); }
      to { opacity: 1; transform: none; }
    }

    @keyframes square-on {
      from { opacity: 0.15; transform: scale(0.4); }
      60% { transform: scale(1.35); opacity: 1; }
      to { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}