/* ShadowSelf, "Written in your own words": the mirror. You are the solid head on the white half; your ShadowSelf is
   the same head on the black half, drawn with everything you've written. */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/bodoni-moda-latin.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;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin.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;
}

:root {
  --white: oklch(1 0 0);
  --black: oklch(0 0 0);
  --seam: oklch(0.817 0.161 75.1);      /* honey: the line of light where the mirror meets, and the words it's saying now */
  --seam-hover: oklch(0.87 0.13 78);    /* the honey button, hovered */
  --ink-2: oklch(0.38 0.012 75);        /* secondary text on white (10.0:1) */
  --light-2: oklch(0.82 0.012 75);      /* secondary text on black (12.0:1) */
  --rule-on-black: oklch(0.4 0.01 75);  /* hairline rules on the black half (decorative) */
  --serif: "Bodoni Moda", "Didot", serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --gutter: 56px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out-quart */
  --head-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 600'%3E%3Cg transform='translate(500 0) scale(-1 1)'%3E%3Cpath d='M120 600 L120 560 C120 520 150 500 175 488 C185 470 182 440 170 420 C130 380 112 320 118 260 C124 170 190 95 285 90 C355 86 405 125 416 200 C418 222 420 236 428 248 L478 316 C482 322 476 328 466 330 L442 332 C448 340 454 348 446 356 C452 364 454 374 440 384 C446 398 446 414 426 428 C406 438 380 440 360 442 C354 462 356 482 370 505 C420 518 470 540 480 600 Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
/* body copy: 19 px at weight 450 on white, so it never reads thin */
body { background: var(--white); color: var(--black); font: 450 19px/1.6 var(--sans); }
/* light-on-dark text reads heavier, so body copy on the black half drops to 400. No grayscale smoothing anywhere:
   it strips the stem darkening and leaves Bodoni's hairlines too thin on both halves */
.r, .on-black { font-weight: 400; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.btn:focus-visible { outline-color: var(--seam); }   /* the honey buttons sit on black: a black (currentColor) ring would vanish */
/* Bodoni at weight 600 and optical size 18 throughout: a lower optical size draws thicker hairlines */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
h1, h2, h3, .serif { overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative; }
.l { background: var(--white); color: var(--black); }
.r { background: var(--black); color: var(--white); }

/* nav */
nav.split > div { display: flex; align-items: center; padding: 24px var(--gutter); font-weight: 600; font-size: 16px; }
nav .r { justify-content: flex-end; gap: 32px; }
nav a { text-decoration: none; white-space: nowrap; }
nav a:not(.pill):hover { text-decoration: underline; text-underline-offset: 5px; }
nav a:not(.pill):active { opacity: .7; }
.word { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; font-variation-settings: "opsz" 18; }
.pill { display: inline-block; border: 1.5px solid currentColor; padding: 8px 20px; border-radius: 999px; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.pill:hover { background: var(--white); color: var(--black); }
.pill:active, .btn:active { transform: translateY(1px); }

/* hero: you and your reflection, face to face across the seam. The black half is a sheet of glass: its edge catches
   the light just past the seam, a faint sheen lies across it, and your reflection sits back behind it, a little smaller,
   cooler and softer than you, fading out at the bottom. You stand back from the edge, so the two faces don't meet at
   the seam */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 500px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--white) 50%, var(--black) 50%);
}
.seamline { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--seam); box-shadow: 0 0 26px 3px color-mix(in oklch, var(--seam) 60%, transparent); z-index: 2; transform-origin: 50% 50%; }
/* the headline crosses the seam: black on the white half, white on the black half (two clipped copies of the same line) */
.headline {
  grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 3; text-align: center; padding: 40px var(--gutter) 0;
  font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -0.02em; font-variation-settings: "opsz" 18;
}
h1.headline { color: var(--black); clip-path: inset(0 50% 0 0); }
.headline-light { color: var(--white); clip-path: inset(0 0 0 50%); }
.stage { grid-row: 2; position: relative; }
.stage-l { grid-column: 1; }
.stage-r { grid-column: 2; }
.head { position: absolute; bottom: 0; width: 400px; height: 480px; }
.stage-l .head { right: 60px; color: var(--black); }
.stage-r .head { left: 66px; width: 352px; height: 422px; bottom: 34px; opacity: .8;   /* 88% size, eyes level with yours */
  -webkit-mask: linear-gradient(to top, transparent, #000 24%); mask: linear-gradient(to top, transparent, #000 24%); }
.head svg { width: 100%; height: 100%; display: block; }
.words { position: absolute; inset: 0; overflow: hidden; font: 800 5px/1.02 var(--sans); text-align: justify; letter-spacing: -0.01em; color: var(--white); }
.words.faint { opacity: 0; }   /* the loose page of words; only visible while the reflection forms */
.words.face { -webkit-mask: var(--head-l) center / 100% 100% no-repeat; mask: var(--head-l) center / 100% 100% no-repeat; }
.words b { font-weight: 800; color: inherit; transition: color .7s var(--ease-out), text-shadow .7s var(--ease-out); }
.words b.on { color: var(--seam); text-shadow: 0 0 6px var(--seam); }
.stage-r .words { color: oklch(0.86 0.025 250); }   /* a cool silver, not your white */
.stage-r .words.face { filter: blur(.4px); }
.pane { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
  background:
    linear-gradient(90deg, oklch(1 0 0 / .16), oklch(1 0 0 / .05) 9px, oklch(1 0 0 / .14) 10px, oklch(1 0 0 / 0) 11px),   /* the glass's thickness at the seam: a lit edge and its back face */
    linear-gradient(112deg, transparent 14%, oklch(1 0 0 / .09) 15%, oklch(1 0 0 / .09) 25%, transparent 26%, transparent 31%, oklch(1 0 0 / .06) 32%, oklch(1 0 0 / .06) 35%, transparent 36%);
  -webkit-mask: linear-gradient(to bottom, transparent, #000 30%); mask: linear-gradient(to bottom, transparent, #000 30%); }   /* fades in under the headline */
.glint { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, oklch(1 0 0 / .14) 50%, transparent 70%); }

/* the signed reply its lit words just sent */
.said-wrap { position: absolute; right: var(--gutter); bottom: 64px; z-index: 3; width: 300px; }
.said {
  background: var(--white); color: var(--black); border-radius: 18px 18px 18px 4px; padding: 16px 20px 12px;
  font-size: 17px; line-height: 1.4; font-weight: 450;
}
.said small { display: block; font-size: 15px; font-weight: 500; color: var(--ink-2); margin-top: 8px; }

/* page-load motion (about 2.5 s, on Anime.js in js/site.js): the seam opens, you arrive, a page of your words pulls
   together into your reflection behind the glass, the headline settles, and a few words light up and leave as a signed
   reply. Until it starts, html.motion holds those pieces at their first frame */
/* --flare: 1 is the seam's first bright flash as the page opens, 0 its resting glow */
.motion .seamline { --flare: 1; opacity: 0; transform: scaleY(0);
  box-shadow: 0 0 calc(26px + 44px * var(--flare)) calc(3px + 7px * var(--flare)) color-mix(in oklch, var(--seam) calc(60% + 10% * var(--flare)), transparent); }
.motion .headline, .motion .said-wrap, .motion .stage-l .head, .motion .stage-r .head, .motion .pane { opacity: 0; }

/* you, and your ShadowSelf */
.halves > div { padding: 72px var(--gutter) 96px; }
.halves h2 { font-size: 40px; line-height: 1.08; margin-bottom: 16px; font-variation-settings: "opsz" 18; }
.halves p { font-size: 21px; max-width: 36ch; }
.halves .l { text-align: right; }
.halves .l p { color: var(--ink-2); margin-left: auto; }
.halves .r p { color: var(--light-2); }

/* how it learns you */
.learn h2.t { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.02em; font-variation-settings: "opsz" 18; text-align: center; max-width: 20ch; margin: 0 auto; padding: 140px var(--gutter) 72px; }

/* no two are alike */
.kinds { background: var(--black); color: var(--white); padding: 128px var(--gutter) 160px; }
.kinds .head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: end; max-width: 1240px; margin: 0 auto; }
.kinds h2 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.02em; font-variation-settings: "opsz" 18; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; max-width: 1240px; margin: 72px auto 0; }
.mini { position: relative; }
.mini .pic { position: relative; height: 400px; }
.mini .words { font-size: 4.2px; }
.mini.narrow .words.face { -webkit-mask-size: 84% 100%; mask-size: 84% 100%; }
.mini.wide .words.face { -webkit-mask-size: 112% 96%; mask-size: 112% 96%; -webkit-mask-position: 70% 100%; mask-position: 70% 100%; }
.mini figcaption { margin-top: 20px; font-size: 18px; font-weight: 500; color: var(--light-2); }
/* the captions take turns (js/site.js): all of a head's captions share one cell, only the current one shown, so the
   caption keeps the height of its tallest and nothing under it moves when it changes */
.mini figcaption { display: grid; }
.mini figcaption > span { grid-area: 1 / 1; visibility: hidden; }
.mini figcaption > span.now { visibility: visible; }

/* where it goes next */
.next > div { padding: 120px var(--gutter) 128px; }
.next .l h2 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.02em; font-variation-settings: "opsz" 18; text-align: right; max-width: 12ch; margin-left: auto; }

/* early access, and a word for the people who got a message from one */
.end { border-top: 1px solid var(--black); }
.end > div { padding: 112px var(--gutter) 120px; }
.end .l .got { max-width: 34ch; margin-left: auto; text-align: right; }
.end .l h2 { font-size: 34px; line-height: 1.12; font-variation-settings: "opsz" 18; margin-bottom: 16px; }
.end .l p { font-size: 21px; color: var(--ink-2); }
.end .r h2 { font-size: clamp(44px, 5vw, 74px); line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: "opsz" 18; margin-bottom: 32px; }
.btn { display: inline-block; white-space: nowrap; text-decoration: none; background: var(--seam); color: var(--black); font-weight: 700; font-size: 18px; padding: 16px 28px; border-radius: 999px; transition: background-color .2s var(--ease-out); }
.btn:hover { background: var(--seam-hover); }
/* early access isn't open yet: the button is switched off and says so, with a footnote on what "soon" means */
button.btn { font-family: inherit; border: 0; }
.btn:disabled, .btn:disabled:hover { background: oklch(0.3 0.02 75); color: oklch(0.74 0.012 75); cursor: not-allowed; transform: none; }   /* a dimmed honey: plainly off */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.soon { font-size: 18px; font-weight: 600; color: var(--seam); white-space: nowrap; }
.soon a { text-decoration: none; padding: 0 2px; }
.soon a:hover { text-decoration: underline; text-underline-offset: 4px; }
.note { margin-top: 28px; font-size: 15px; line-height: 1.5; color: var(--light-2); max-width: 48ch; }
footer.split > div { padding: 24px var(--gutter) 32px; font-size: 16px; }
footer .l { text-align: right; color: var(--ink-2); }
footer .r { color: var(--light-2); }
.mirror { display: inline-block; transform: scaleX(-1); }

/* the 404 page: the page you asked for on your side, its reflection on the other, and neither is there. The two
   halves fill the screen between the nav and the footer */
.lost-page { min-height: 100svh; display: flex; flex-direction: column; }
.lost { flex: 1; }
.lost > div { display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter) 128px; }
.lost .l { text-align: right; align-items: flex-end; }
.lost .r { align-items: flex-start; }
.lost h1, .lost h2 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.02em; font-variation-settings: "opsz" 18; max-width: 12ch; }
.lost p { font-size: 21px; margin-top: 16px; max-width: 30ch; }
.lost .l p { color: var(--ink-2); }
.lost .r .btn { margin-top: 32px; }

@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .head { width: 340px; height: 408px; }
  .hero { grid-template-rows: auto 430px; }
  .stage-l .head { right: 48px; }
  .stage-r .head { left: 54px; width: 300px; height: 360px; bottom: 28px; }
}

/* phone: the headline on solid white, then the two heads across the seam, then the reply on black */
@media (max-width: 700px) {
  :root { --gutter: 20px; }
  body { font-size: 18px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  nav.split, footer.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  nav.split > div { padding: 16px; font-size: 15px; }
  nav .r a.how { display: none; }
  .word { font-size: 22px; }
  .pill { padding: 8px 16px; }
  .hero { grid-template-rows: auto 248px auto; background: var(--white); }
  .headline { grid-row: 1; padding: 28px 20px 0; font-size: 36px; line-height: 1.08; text-align: left; }
  h1.headline { clip-path: none; }
  .headline-light { display: none; }
  .headline br { display: none; }
  .stage { grid-row: 2; }
  .stage-l { background: var(--white); }
  .stage-r { background: var(--black); }
  .stage-r::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--seam); box-shadow: 0 0 18px 2px color-mix(in oklch, var(--seam) 60%, transparent); z-index: 2; clip-path: inset(0 -40px); }   /* glow sideways only, not up into the text */
  .seamline { display: none; }
  .head { width: 172px; height: 206px; }
  .stage-l .head { right: 22px; }
  .stage-r .head { left: 24px; width: 152px; height: 182px; bottom: 14px; }
  .words, .hero .words { font-size: 1.9px; }
  .stage-r .words.face { filter: none; }   /* at 2 px type, blur only smudges */
  .pane { background:
    linear-gradient(90deg, oklch(1 0 0 / .16), oklch(1 0 0 / .05) 5px, oklch(1 0 0 / .14) 6px, oklch(1 0 0 / 0) 7px),
    linear-gradient(112deg, transparent 14%, oklch(1 0 0 / .08) 15%, oklch(1 0 0 / .08) 26%, transparent 27%, transparent 33%, oklch(1 0 0 / .05) 34%, oklch(1 0 0 / .05) 38%, transparent 39%); }
  .said-wrap { position: static; grid-column: 1 / -1; grid-row: 3; width: auto; background: var(--black); padding: 20px 20px 28px; display: flex; justify-content: flex-end; }
  .said { max-width: 300px; font-size: 17px; }
  .said small { font-size: 15px; }
  .halves > div { padding: 32px 20px 36px; }
  .halves .l { text-align: left; }
  .halves .l p { margin-left: 0; }
  .halves h2 { font-size: 30px; margin-bottom: 8px; }
  .halves p { font-size: 18px; }
  .learn h2.t { font-size: 36px; padding: 64px 20px 32px; }
  .kinds { padding: 64px 20px 64px; }
  .kinds .head-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kinds h2 { font-size: 36px; }
  .gallery { gap: 12px; margin-top: 32px; }
  .mini .pic { height: 132px; }
  .mini .words { font-size: 1.5px; }
  .mini figcaption { margin-top: 12px; font-size: 15px; line-height: 1.3; }
  .next > div { padding: 48px 20px; }
  .next .l h2 { font-size: 36px; text-align: left; margin-left: 0; }
  .next .r:empty { display: none; }   /* the black half with no line in it: on the phone it would be a blank bar */
  .end > div { padding: 48px 20px; }
  .end .l .got { text-align: left; margin-left: 0; }
  .end .l h2 { font-size: 28px; }
  .end .l p { font-size: 18px; }
  .end .r h2 { font-size: 44px; margin-bottom: 24px; }
  footer.split > div { padding: 16px 16px 24px; font-size: 15px; }
  .lost > div { padding: 48px 20px; }
  .lost .l { text-align: left; align-items: flex-start; }
  .lost h1, .lost h2 { font-size: 36px; }
  .lost p { font-size: 18px; }
  .lost .r .btn { margin-top: 24px; }
}

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