/* Strand — pyite.org/strand
   The palette is the app's own (DesignTokens.swift). The type is the app's own:
   New York for everything read, SF Mono for labels and targets. Both resolve
   from the system on every Apple device, so the site loads no web fonts and
   makes no third-party requests. */

/* Registered so the flood can transition the tokens themselves. */
@property --paper   { syntax: "<color>"; inherits: true; initial-value: #F3EDE3; }
@property --paper-2 { syntax: "<color>"; inherits: true; initial-value: #EAE2D5; }
@property --ink     { syntax: "<color>"; inherits: true; initial-value: #1A1714; }
@property --ink-soft{ syntax: "<color>"; inherits: true; initial-value: #5A534C; }
@property --ink-faint{ syntax: "<color>"; inherits: true; initial-value: rgba(26,23,20,.16); }
@property --amber   { syntax: "<color>"; inherits: true; initial-value: #845708; }

:root{
  --paper:#F3EDE3; --paper-2:#EAE2D5;
  --ink:#1A1714; --ink-soft:#5A534C; --ink-faint:rgba(26,23,20,.16);
  --amber:#845708;
  --flood:#0F5A34; --flood-ink:#F3EDE3; --flood-soft:#C9D6CC; --flood-faint:rgba(243,237,227,.22);
  --night:#14120F; --night-ink:#F3EDE3; --night-soft:#A69E93; --night-amber:#CE8C0E;
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Charter,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --shot-w:min(330px,calc(100vw - 48px));
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
  transition:--paper .32s var(--ease), --paper-2 .32s var(--ease), --ink .32s var(--ease),
             --ink-soft .32s var(--ease), --ink-faint .32s var(--ease), --amber .32s var(--ease);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#211D19; --paper-2:#2B2620;
    --ink:#F3EDE3; --ink-soft:#A69E93; --ink-faint:rgba(243,237,227,.16);
    --amber:#CE8C0E;
    --flood:#0D3F26; --flood-soft:#B9C8BD;
    --night:#0B0A08;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#211D19; --paper-2:#2B2620;
  --ink:#F3EDE3; --ink-soft:#A69E93; --ink-faint:rgba(243,237,227,.16);
  --amber:#CE8C0E;
  --flood:#0D3F26; --flood-soft:#B9C8BD;
  --night:#0B0A08;
  color-scheme:dark;
}
/* In tune: the page does what the app does. Set by the script in index.html. */
:root.flooded{
  --paper:var(--flood); --paper-2:var(--flood);
  --ink:var(--flood-ink); --ink-soft:var(--flood-soft); --ink-faint:var(--flood-faint);
  --amber:var(--flood-ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-color:var(--ink-soft) var(--paper); scroll-padding-top:72px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.6;
  -webkit-font-smoothing:antialiased; caret-color:var(--amber);
  font-variant-numeric:oldstyle-nums proportional-nums;
}
::selection{background:color-mix(in srgb,var(--amber) 28%,transparent); color:inherit}
a{color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.22em; text-decoration-color:var(--ink-faint)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:2px}
p{margin:0 0 1.1em}
h1,h2,h3{font-weight:500; text-wrap:balance; margin:0}
h1{font-size:clamp(38px,6.2vw,76px); line-height:1.04; letter-spacing:-.022em; margin-bottom:24px}
h2{font-size:clamp(29px,3.9vw,44px); line-height:1.1; letter-spacing:-.018em; margin-bottom:22px}
h3{font-size:21px; line-height:1.3; letter-spacing:-.006em}

.skip{position:absolute; left:16px; top:-60px; z-index:20; background:var(--ink); color:var(--paper);
  padding:10px 14px; font:600 14px/1 var(--mono); text-decoration:none}
.skip:focus{top:12px}

.band{padding-inline:24px}
.wrap{max-width:70rem; margin-inline:auto}
.col{max-width:33em}
.soft{color:var(--ink-soft)}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:10; padding-top:env(safe-area-inset-top,0px);
  background:var(--paper); border-bottom:1px solid var(--ink-faint);
}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:16px}
.wordmark{display:inline-flex; align-items:center; gap:11px; font-size:22px; letter-spacing:.005em; text-decoration:none}
.mark{width:40px; height:16px; flex:none; overflow:visible}
.mk-ink{stroke:var(--ink)} .mk-amber{stroke:var(--amber)} .mk-wedge{fill:var(--amber)}
.top nav{display:flex; gap:24px; font:500 13px/1 var(--mono); letter-spacing:.02em}
.top nav a{text-decoration:none; color:var(--ink-soft); padding-block:16px; margin-block:-16px}
.top nav a[aria-current]{color:var(--ink)}
.top nav a:hover{color:var(--ink)}
@media (max-width:620px){ .top nav .wide{display:none} }

/* ---------- screenshots ---------- */
figure{margin:0}
.shot{
  display:block; width:var(--shot-w); height:auto; border-radius:22px;
  box-shadow:0 0 0 1px var(--ink-faint), 0 2px 4px rgba(20,12,4,.12), 0 32px 60px -34px rgba(20,12,4,.6);
}
figcaption{font-size:15px; line-height:1.5; color:var(--ink-soft); margin-top:16px; max-width:21em}

/* ---------- hero ---------- */
.hero{padding-block:clamp(28px,7vw,96px) clamp(60px,8vw,104px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,6vw,96px); align-items:center}
.hero .lead{font-size:clamp(20px,2.1vw,24px); line-height:1.5; color:var(--ink-soft); max-width:26em}
.status{font:500 13px/1.5 var(--mono); color:var(--ink-soft); margin-top:28px}
.status b{font-weight:600; color:var(--amber)}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} .status{margin-top:4px} }

/* ---------- prose beside a screenshot ---------- */
.pair{padding-block:clamp(64px,9vw,120px)}
.pair .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,6vw,96px); align-items:center}
.pair.flip .wrap{grid-template-columns:auto minmax(0,1fr)}
.pair.flip figure{order:-1}
@media (max-width:860px){
  .pair .wrap,.pair.flip .wrap{grid-template-columns:1fr}
  .pair.flip figure{order:1}
}

/* ---------- the flood ---------- */
.flood{background:var(--flood); color:var(--flood-ink)}
.flood figcaption,.flood .soft{color:var(--flood-soft)}
.flood .shot{box-shadow:0 0 0 1px var(--flood-faint), 0 34px 70px -38px rgba(0,0,0,.7)}
.js .flood{background:var(--paper); color:var(--ink)}
.js .flood figcaption,.js .flood .soft{color:var(--ink-soft)}
.js .flood .shot{box-shadow:0 0 0 1px var(--ink-faint), 0 2px 4px rgba(20,12,4,.12), 0 32px 60px -34px rgba(20,12,4,.6)}
.flood .big{font-size:clamp(20px,2.1vw,24px); line-height:1.5}

/* ---------- the strobe, always at night ---------- */
.night{background:var(--night); color:var(--night-ink); padding-block:clamp(72px,10vw,132px)}
.night .soft,.night figcaption{color:var(--night-soft)}
.night .wrap{display:grid; grid-template-columns:minmax(0,25em) auto; gap:clamp(36px,5vw,72px); align-items:center}
.night .dials{display:flex; gap:clamp(18px,2.4vw,32px); align-items:flex-start}
.night .shot{width:min(278px,40vw); box-shadow:0 0 0 1px rgba(243,237,227,.12), 0 34px 70px -38px rgba(0,0,0,.9)}
.night figcaption{max-width:17em}
.night .wrap > div:first-child{max-width:33em}
@media (max-width:1040px){
  .night .wrap{grid-template-columns:1fr}
  .night .dials{flex-wrap:wrap}
  .night .shot{width:var(--shot-w)}
}

/* ---------- the rules ---------- */
.rules{background:var(--paper-2); padding-block:clamp(64px,9vw,120px)}
.rules ul{list-style:none; margin:40px 0 0; padding:0; max-width:44em}
.rules li{display:grid; grid-template-columns:4.2em minmax(0,1fr); gap:0 16px;
  padding-block:22px 20px; border-top:1px solid var(--ink-faint)}
.rules li:last-child{border-bottom:1px solid var(--ink-faint)}
.rules .id{font:500 13px/1.9 var(--mono); color:var(--ink-soft); letter-spacing:.04em}
.rules h3{margin-bottom:4px}
.rules li > div{max-width:30em}
.rules p{margin:0; color:var(--ink-soft); font-size:17px; line-height:1.55}

/* ---------- the numbers ---------- */
.numbers{padding-block:clamp(72px,10vw,132px) clamp(56px,8vw,96px)}
.axes{margin:44px 0 0; max-width:52em}
.axis{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px clamp(24px,5vw,64px);
  padding-block:26px; border-top:1px solid var(--ink-faint); align-items:baseline;
}
.axis:last-child{border-bottom:1px solid var(--ink-faint)}
.axis h3{grid-column:1; grid-row:1}
.axis .fig{
  grid-column:2; grid-row:1 / span 3; margin:0; text-align:right; white-space:nowrap;
  font-size:clamp(40px,5.2vw,58px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.axis .fig small{font-size:.42em; letter-spacing:0; color:var(--ink-soft); margin-left:.2em}
.axis .what{grid-column:1; margin:6px 0 0; color:var(--ink-soft); font-size:17px; line-height:1.55; max-width:30em}
.axis .aside{grid-column:1; margin:8px 0 0; font-size:17px; line-height:1.55; max-width:30em}
.axis .tgt{grid-column:1; margin:10px 0 0; font:500 13px/1.6 var(--mono); color:var(--ink-soft); max-width:40em}
@media (max-width:560px){
  .axis{grid-template-columns:minmax(0,1fr) auto}
  .axis .fig{grid-row:1; align-self:baseline}
  .axis .what,.axis .aside,.axis .tgt{grid-column:1 / -1}
}
.provenance{max-width:33em; font:500 14px/1.6 var(--mono); margin-top:22px}
.plain{padding-block:clamp(64px,9vw,120px)}
.caveat{max-width:33em; margin-top:48px; font-size:clamp(19px,1.9vw,21px); line-height:1.58}
.last{max-width:33em}

/* ---------- footer ---------- */
footer .wrap{
  display:flex; justify-content:space-between; gap:14px 32px; flex-wrap:wrap;
  padding-block:26px 44px; border-top:1px solid var(--ink-faint);
  font:500 13px/1.6 var(--mono); color:var(--ink-soft);
}
footer nav{display:flex; gap:24px; flex-wrap:wrap}

/* ---------- plain pages (privacy, support) ---------- */
.page{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,96px)}
.page .col{max-width:34em}
.page h2{font-size:clamp(24px,3vw,30px); margin:48px 0 14px}
.page h3{margin:36px 0 6px; font-weight:600}
.page .updated{font:500 13px/1.6 var(--mono); color:var(--ink-soft)}
.placeholder{background:color-mix(in srgb,var(--amber) 16%,transparent); padding:1px 6px; border-radius:3px; font-family:var(--mono); font-size:.85em}

@media (prefers-reduced-motion:reduce){ :root{transition:none} }