/* xpot.eu. The Lockline world from DESIGN.md: the night river ground, steel, five lacquers, one sunflower tint.
   Night leads; day follows the system. The system UI face for all text; Archivo lives only in the outlined
   lockup, so nothing loads from elsewhere. */

:root {
  color-scheme: dark;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-swing: cubic-bezier(0.37, 0, 0.63, 1);

  --bg: #0a1a1f;
  --surface: #102429;
  --cell: #16313a;
  --fill: rgba(140, 178, 186, 0.16);
  --separator: rgba(157, 181, 185, 0.18);
  --steel: #4e6a72;
  --text: #eaf2f2;
  --text-2: #9db5b9;
  --tint: #f7c531;
  --tint-text: #f7c531;
  --on-tint: #1a1404;
  --dot: #f7c531;

  /* Padlock steel and its shadow, as in the app's night palette. */
  --st1: #5f777e; --st2: #d2dde0; --st3: #7a9298; --st4: #b3c3c7; --st-edge: #06120f;
  --hang-shadow: rgba(0, 0, 0, 0.42);
  --rail: linear-gradient(to bottom, #e3eaec, #8aa0a6 55%, #4f666c);
  --rail-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #e7eef0;
    --surface: #f6f9fa;
    --cell: #ffffff;
    --fill: rgba(62, 92, 100, 0.1);
    --separator: rgba(14, 34, 40, 0.12);
    --steel: #8ba1a8;
    --text: #0e2228;
    --text-2: #4a6168;
    --tint: #f5be1e;
    --tint-text: #855d00;
    --dot: #f5be1e;

    --st1: #6a8288; --st2: #e3ecee; --st3: #7d949a; --st4: #b9c8cc; --st-edge: #3e555b;
    --hang-shadow: rgba(14, 34, 40, 0.2);
    --rail-shadow: 0 3px 6px rgba(14, 34, 40, 0.18);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 400 17px/1.5 var(--font-ui); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
::selection { background: var(--tint); color: var(--on-tint); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the rail and its locks ---------- */
.rail { height: 8px; background: var(--rail); box-shadow: var(--rail-shadow); }
.hl {
  position: absolute; top: 0; left: calc(50% + var(--x) - var(--w) / 2);
  /* The inner top of the shackle sits on the bar. */
  margin-top: calc(-1 * var(--hang) + 3px);
  filter: drop-shadow(0 10px 12px var(--hang-shadow));
  transform: rotate(var(--r)); transform-origin: 50% var(--hang);
}
.hl svg { display: block; }

/* Just hung: each lock settles once, a pendulum that dies out, from the middle of the railing outwards.
   The page plays it once; nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .hl { animation: settle 1600ms var(--ease-swing) calc(120ms + var(--d)) both; }
  @keyframes settle {
    0% { transform: rotate(calc(var(--r) + 11deg)); }
    32% { transform: rotate(calc(var(--r) - 5deg)); }
    60% { transform: rotate(calc(var(--r) + 2deg)); }
    82% { transform: rotate(calc(var(--r) - 0.6deg)); }
    100% { transform: rotate(var(--r)); }
  }
}

/* ---------- home ---------- */
.stage { flex: 1; flex-direction: column; justify-content: center; padding: 8vh 0 4vh; }
/* The railing and the name form one group, held a little above the middle of the screen. */
.railing { position: relative; height: calc(96px * var(--k, 1)); }
.railing .rail { position: absolute; left: 0; right: 0; top: 0; z-index: 1; }
.railing .locks { position: absolute; left: 0; right: 0; top: 4px; z-index: 2;
  transform: scale(var(--k, 1)); transform-origin: 50% 0; }
@media (min-width: 760px) { .railing .locks { --k: 1.28; } }
@media (min-width: 1280px) { .railing .locks { --k: 1.45; } }

.brand { display: grid; justify-items: center; text-align: center; padding: clamp(40px, 7vh, 80px) 16px 6vh; }
.brand h1, .brand .name { margin: 0; line-height: 0; }
.lockup { display: block; height: auto; }
.brand .lockup { width: clamp(168px, 20vw, 248px); color: var(--text); }
.tease {
  margin: clamp(18px, 2.6vh, 28px) 0 0; max-width: 22ch;
  font-size: clamp(19px, 1.2vw + 13px, 26px); line-height: 1.28; letter-spacing: -0.018em; font-weight: 500;
  color: var(--text-2); text-wrap: balance;
}
/* The name and the line arrive as the locks come to rest: a short rise out of a soft blur. */
@media (prefers-reduced-motion: no-preference) {
  .brand > * { animation: rise 900ms var(--ease-out) both; }
  .brand h1 { animation-delay: 380ms; }
  .brand .tease { animation-delay: 560ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
}

/* ---------- the three faces ---------- */
/* One face a day; the head script names it. Without a script the railing shows. */
.face { display: none; }
html:not([data-face]) .face-a, html[data-face='a'] .face-a { display: flex; }
html[data-face='b'] .face-b, html[data-face='c'] .face-c { display: block; }

/* One lock with its string and blank tag; the group scales from the point where it hangs. */
.big { position: absolute; z-index: 2; width: 0; height: 0; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.big .hl { left: 0; }
.big .string { position: absolute; left: 28px; top: 112px; width: 1.5px; height: 70px; transform: rotate(6deg); transform-origin: top; }
.big .tag { position: absolute; left: 18px; top: 158px; width: 104px; height: 40px; border-radius: 6px 9px 9px 6px; padding: 0 12px 0 20px;
  display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-ui); letter-spacing: -0.15px; transform: rotate(-7deg); transform-origin: 0 50%; }
.big .tag::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--bg); }
.big .tag .blank { flex: 1; height: 1.5px; background: currentColor; opacity: 0.5; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .big .tag { animation: tagswing 1900ms var(--ease-swing) 260ms both; }
  @keyframes tagswing { 0% { transform: rotate(5deg); } 34% { transform: rotate(-12deg); } 64% { transform: rotate(-5deg); } 84% { transform: rotate(-7.6deg); } 100% { transform: rotate(-7deg); } }
}
.face .name { margin: 0; line-height: 0; }
.face-b .lockup, .face-c .lockup { color: var(--text); }

/* B: one lock off a railing that runs in from the right; the line is the headline. */
.one { flex: 1; position: relative; min-height: 600px; }
.one .rail { position: absolute; top: 112px; left: 0; right: 0; z-index: 1; }
.one .big { top: 112px; left: 28px; --s: 1.15; }
.one .big .string { background: var(--steel); }
.one .big .tag { background: var(--text); color: var(--bg); box-shadow: 0 6px 10px -2px var(--hang-shadow); }
.one .copy { position: relative; padding: 400px 20px 40px; }
.one .lockup { width: 132px; }
.one .tease { margin: 20px 0 0; max-width: 14ch; font-size: clamp(32px, 2.4vw + 18px, 56px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; color: var(--text); text-wrap: balance; }
@media (min-width: 860px) {
  .one .rail { top: 26%; }
  .one .big { top: 26%; left: 66%; --s: 1.7; }
  .one .copy { position: absolute; left: clamp(24px, 7vw, 120px); top: 50%; transform: translateY(-50%); padding: 0; }
  .one .lockup { width: 168px; }
}

/* C: the page is a locked drop. The cobalt drench in both themes, white ink on it. */
html[data-face='c'] { color-scheme: dark; --bg: #102a80; --text: #ffffff; --text-2: #b9c8fb; --hang-shadow: rgba(2, 8, 40, 0.45); --dot: #f7c531;
  --st1: #5f777e; --st2: #d2dde0; --st3: #7a9298; --st4: #b3c3c7; --st-edge: #06120f; --rail-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
@media (prefers-color-scheme: light) { html[data-face='c'] { --bg: #2a52d9; --text-2: #e2e9ff; } }
html[data-face='c'] ::selection { background: #f7c531; color: #1a1404; }
.lv { flex: 1; position: relative; min-height: 620px; }
.lv .rail { position: absolute; left: 0; right: 0; top: 28%; z-index: 1; }
.lv .big { top: 28%; left: 22px; }
.lv .big .string { background: #c9d6d9; }
.lv .big .tag { background: #eef2ff; color: #1b3393; box-shadow: 0 6px 10px -2px rgba(2, 8, 40, 0.4); }
.lv .copy { position: absolute; left: 164px; right: 20px; top: calc(28% + 30px); }
.lv .lockup { width: 140px; }
.lv .tease { margin: 14px 0 0; font-size: 19px; line-height: 24px; letter-spacing: -0.3px; font-weight: 500; color: var(--text-2); max-width: 18ch; }
@media (min-width: 860px) {
  .lv .rail { top: 30%; }
  .lv .big { top: 30%; left: calc(50% - 320px); --s: 1.45; }
  .lv .copy { left: calc(50% - 60px); top: calc(30% + 44px); }
  .lv .lockup { width: 232px; }
  .lv .tease { margin-top: 20px; font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
}

/* ---------- footer ---------- */
.foot { padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; font-size: 15px; line-height: 20px; }
.foot a { color: var(--text-2); text-decoration: none; padding: 12px 0; }
.foot a[aria-current='page'] { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .foot a { transition: color 160ms ease; }
  .foot a:hover { color: var(--text); text-decoration: underline; }
}
.doc .foot { border-top: 1px solid var(--separator); margin-top: 72px; }
.doc .foot nav { max-width: 1120px; margin: 0 auto; justify-content: flex-start; padding: 0 4px; }

/* ---------- legal pages ---------- */
.top { height: 72px; display: flex; align-items: center; padding: 0 max(16px, env(safe-area-inset-left)); max-width: 1152px; width: 100%; margin: 0 auto; }
.home-link { display: block; padding: 8px 4px; margin-left: -4px; border-radius: 8px; color: var(--text); }
.top .lockup { width: 76px; }
.rail-top { height: 4px; opacity: 0.9; }

.layout { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 16px; display: grid; gap: 0 64px; }
@media (min-width: 1000px) { .layout { grid-template-columns: 220px minmax(0, 1fr); padding: 0 16px; } }

.article { max-width: 68ch; padding-top: clamp(40px, 7vh, 72px); }
.article h1 { margin: 0; font-size: clamp(34px, 2.4vw + 22px, 46px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.draft { margin: 14px 0 0; color: var(--text-2); font-size: 15px; line-height: 22px; max-width: 52ch; }
.article > p:not(.draft) { margin: 28px 0 0; font-size: 19px; line-height: 1.5; letter-spacing: -0.015em; }
.article section { scroll-margin-top: 24px; }
.article h2 { margin: 56px 0 0; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; font-weight: 650; text-wrap: balance; }
.article section p { margin: 12px 0 0; }
.article ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
/* List marks are small steel rivets. */
.article li { position: relative; padding-left: 22px; }
.article li::before { content: ''; position: absolute; left: 3px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--steel); }
.article a { color: var(--tint-text); }
.article a:hover { text-decoration-thickness: 2px; }

/* Contents: a sticky column on wide screens, a fold-out list at the top on phones. */
.toc { font-size: 14px; line-height: 20px; }
.toc summary { cursor: pointer; color: var(--text-2); font-weight: 600; padding: 10px 0; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.toc details[open] summary::after { transform: rotate(-135deg); vertical-align: -1px; }
.toc ol { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: 10px; color: var(--text-2); text-decoration: none; }
.toc a[aria-current] { color: var(--text); background: var(--fill); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--text); } }
@media (max-width: 999px) {
  .toc { margin-top: 24px; border-radius: 22px; background: var(--cell); padding: 6px 18px 10px; }
  .toc details:not([open]) { padding-bottom: 0; }
  .article { padding-top: 32px; }
}
@media (min-width: 1000px) {
  .toc { position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow: auto; padding: clamp(40px, 7vh, 72px) 0 32px; }
  .toc summary { pointer-events: none; padding-top: 14px; }
  .toc summary::after { display: none; }
}