/* The plain home: just the haiku on paper, in a serif you can change for the haiku, Inter Tight for the rest, IBM Plex Mono for the small figures. */

:root {
  --paper: #f6f5f1;
  --ink: #0c0c0b; /* the original's near-black, a touch deeper */
  --rule: #8b8a85; /* its muted grey */
  --sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --serif: Newsreader, Georgia, serif; /* the haiku; the row of typefaces changes it */
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}

/* Dark mode (the button in the header; theme.js sets it before the page is painted). */
html[data-theme='dark'] { --paper: #131312; --ink: #d3d1ca; --rule: #8b8a85; --top: #131312; color-scheme: dark; } /* --top: the thin line across the top, which vanishes in the dark */
/* The three colours are registered, so changing them is itself animated: one slow fade of everything that uses them,
   background and text together, with nothing re-drawn element by element. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #f6f5f1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #0c0c0b; }
@property --rule { syntax: '<color>'; inherits: true; initial-value: #8b8a85; }
@property --life { syntax: '<color>'; inherits: false; initial-value: #8b8a85; }
@property --top { syntax: '<color>'; inherits: true; initial-value: #0c0c0b; }
html[data-theme] { transition: --paper 0.8s ease, --ink 0.8s ease, --rule 0.8s ease, --top 0.8s ease; }

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--paper); color: var(--ink); }
html:not(.feed) body { border-top: 3px solid var(--top, var(--ink)); } /* as the original */
body { overflow-x: clip; } /* the painted light reaches past the window; it should not make the page scroll sideways */
html { font-size: 100%; }
body { font: 400 1rem / 1.45 var(--sans); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding: 1.6rem clamp(1.25rem, 4vw, 3.5rem);
  align-items: center; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.012em;
}
.bar .brand { display: inline-flex; align-items: center; white-space: pre; }
/* "Life" in a soft circle, like the numbers; the circle hangs a little outside the line so the text stays level */
.bar .life { display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; margin: -1.05rem -0.7rem -1.05rem -0.85rem; border-radius: 50%; transition: --life 1.2s ease; /* a new colour behind it each time (brand.js) */
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--life) 30%, transparent) 55%, color-mix(in srgb, var(--life) 11%, transparent) 82%, transparent 100%); }
.bar nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; }
.bar a, .bar button { transition: opacity 0.35s ease; }
.bar a:hover, .bar button:hover { opacity: 0.5; }
.bar [aria-pressed] { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 2px; transition: opacity 0.35s ease, text-decoration-color 0.5s ease; }
.bar [aria-pressed='true'] { text-decoration-color: currentColor; }

.haiku-list {
  list-style: none; margin: 0;
  padding: 2.2rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
  display: grid; gap: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 5vw, 5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* always two to a row */
}

.entry { padding-top: 0.2rem; }
.entry .rank { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; }
.entry .rank { display: flex; align-items: center; gap: 0.4rem; }
.entry .rank .when { font: 500 0.8rem/1 var(--mono); letter-spacing: 0; color: var(--rule); }
.entry .rank .num { font: 500 0.85rem/1 var(--mono); letter-spacing: 0; display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; margin-left: -0.45rem; /* a soft circle of the haiku's colour behind the number, fading at its edge */
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--badge, var(--rule)) 26%, transparent) 55%, color-mix(in srgb, var(--badge, var(--rule)) 10%, transparent) 82%, transparent 100%); }
.entry .words { display: block; font-family: var(--serif); font-size: calc(clamp(1.6rem, 2.9vw, 2.5rem) * var(--serif-scale, 1)); line-height: 1.12; font-weight: var(--list-weight, 300); letter-spacing: -0.005em; }
.entry .words span { display: block; margin-bottom: 0.45em; }
.entry .words, .entry .num { transition: opacity 0.4s ease, transform 0.4s ease; }
.entry .words:hover, .entry:has(.num:hover) .words { opacity: 0.5; }
.entry .num:hover, .entry:has(.words:hover) .num { transform: scale(1.1); }
.entry .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; font-size: 0.85rem; }

.more { margin: 0 clamp(1.25rem, 4vw, 3.5rem) 3rem; font-size: 0.95rem; font-weight: 600; }
.more { transition: opacity 0.35s ease; }
.more:hover { opacity: 0.5; }

.entry, .bar { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .entry, .bar { animation: none; } }

/* ---- a haiku's own page ---- */

.page { padding: 1rem clamp(1.25rem, 4vw, 3.5rem) 3rem; overflow: clip; }
.haiku-page { display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; max-width: 90rem; margin: 0 auto; }
@media (max-width: 52rem) { .haiku-page { grid-template-columns: 1fr; } }

.poem { margin: 0; font-family: var(--serif); font-weight: var(--poem-weight, 300); letter-spacing: 0.005em; font-size: calc(clamp(1.8rem, 3.6vw, 2.8rem) * var(--serif-scale, 0.88) / 0.88); line-height: 1.22; }
.poem span { display: block; margin-bottom: 0.45em; white-space: nowrap; } /* a line stays whole, even over the lattice */
.byline { margin: 1.8rem 0 0; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; }
.quiet { color: var(--rule); font-style: italic; font-weight: 300; }
.moves { margin: 2rem 0 0; display: flex; gap: 1.6rem; font-size: 0.95rem; font-weight: 600; }
.moves a, .moves .toggle { transition: opacity 0.35s ease; }
.moves a:hover, .moves .toggle:hover { opacity: 0.5; }
.moves .toggle[aria-pressed='false'] { opacity: 0.65; }

.figure { margin: 0; }
.stage { position: relative; width: min(100%, 72vh); aspect-ratio: 1; margin: 0 auto; }
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage canvas.light { position: absolute; width: 200%; height: 200%; left: -50%; top: -50%; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.figure figcaption { margin-top: 1rem; text-align: center; font-size: 0.85rem; color: var(--rule); font-style: italic; }
/* Moving between pages cross-fades them, ground colour and all (where the browser supports it). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 800ms; }

.night .votes button.on { color: var(--paper); }

/* ---- writing ---- */

.compose { max-width: 860px; margin: 2rem auto 0; display: grid; gap: 0.4rem; }
.compose h1, .compose h2 { margin: 0 0 1.2rem; font-size: 0.85rem; font-weight: 600; text-align: center; }
.compose .field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; border-bottom: 1px solid var(--rule); transition: border-color 0.25s; }
.compose .field:focus-within { border-bottom-color: var(--ink); }
.compose input { width: 100%; min-width: 0; font: var(--list-weight, 300) calc(clamp(28px, 3.1vw, 46px) * var(--serif-scale, 1))/1.25 var(--serif); letter-spacing: -0.01em; color: var(--ink); background: transparent; border: 0; outline: 0; padding: 16px 0 10px; }
.compose input::placeholder { color: var(--rule); opacity: 0.7; }
.compose .count { padding: 6px 15px; border-radius: 999px; font: 500 17px/1.3 var(--mono); color: var(--rule); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color 0.25s, color 0.25s; }
.compose .count.ok { background: color-mix(in srgb, #b4dc19 38%, var(--paper)); color: color-mix(in srgb, #2a5a14 70%, var(--ink)); }
/* a line that has just come right: a small, soft pop and a faint ring */
.compose .count.pop { animation: pop 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes pop {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgb(180 220 25 / 0.35); }
  40% { transform: scale(1.14); }
  70% { transform: scale(0.98); box-shadow: 0 0 0 7px rgb(180 220 25 / 0.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgb(180 220 25 / 0); }
}
@media (prefers-reduced-motion: reduce) { .compose .count.pop { animation: none; } }
.compose .count.over { background: color-mix(in srgb, #fa551e 30%, var(--paper)); color: color-mix(in srgb, #8a2a0a 70%, var(--ink)); }
.compose-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; }
.compose .field.name { display: block; border-bottom: 0; }
.compose .name input { width: min(320px, 100%); font: 400 16px var(--sans); letter-spacing: 0; padding: 10px 0 8px; border-bottom: 1px solid var(--rule); transition: border-color 0.25s; }
.compose .name input:focus { border-bottom-color: var(--ink); }
.compose .publish { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.55rem; padding: 15px 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; transition: color 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s; }
/* on hover the original's yellow floods in from the left, the arrow slips forward and the button lifts */
.compose .publish::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #f9d24b; border-radius: inherit; transform: translateX(-101%); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.compose .publish .arrow { display: inline-block; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.compose .publish:hover:not(:disabled) { color: #5c3a00; transform: translateY(-2px); }
.compose .publish:hover:not(:disabled)::before { transform: translateX(0); }
.compose .publish:hover:not(:disabled) .arrow { transform: translateX(6px); }
.compose .publish:disabled { opacity: 0.25; cursor: default; }
.compose .message { margin: 1.6rem 0 0; min-height: 3.6em; font: italic 400 calc(clamp(22px, 1.8vw, 28px) * var(--serif-scale, 1))/1.2 var(--serif); }
.compose .message span { display: block; opacity: 0; transform: translateY(8px); transition: opacity 0.9s ease, transform 0.9s ease; transition-delay: calc(var(--i, 0) * 140ms); }
.compose .message.show span { opacity: 1; transform: none; }

/* ---- the rules ---- */

.rules { list-style: none; max-width: 40rem; margin: 2rem auto 0; padding: 0; display: grid; gap: 3rem; }
.rules h2 { margin: 0 0 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--rule); }
.rules p { margin: 0; font-weight: var(--list-weight, 300); font-family: var(--serif); font-size: calc(clamp(1.7rem, 2.4vw, 2.1rem) * var(--serif-scale, 1)); line-height: 1.16; }
.rules p span { display: block; margin-bottom: 0.4em; }


.stage canvas.layer { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The settings for the circle. */
.tune { margin: 1.2rem 0 0; font-size: 0.9rem; }
.tune summary { cursor: pointer; font-weight: 600; width: max-content; }
.tune summary { transition: opacity 0.35s ease; }
.tune summary:hover { opacity: 0.5; }
.tune label { display: grid; grid-template-columns: 7rem minmax(0, 11rem) 3rem; align-items: center; gap: 0.8rem; margin: 0.6rem 0 0; }
.tune input[type='range'] { accent-color: var(--ink); width: 100%; }
.tune .toggle { margin-top: 0.9rem; font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tune .toggle { transition: opacity 0.35s ease; }
.tune .toggle:hover { opacity: 0.5; }
.stage canvas.layer { touch-action: pan-y; }
.stage canvas.layer.over { cursor: grab; }
.stage canvas.layer.grabbing { cursor: grabbing; touch-action: none; }

.tune output { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--rule); }
.tune .buttons { display: flex; gap: 1.4rem; margin: 0.9rem 0 0; }
.tune .buttons .toggle { margin-top: 0; }
.tune .config { margin: 0.8rem 0 0; font: 0.72rem/1.5 ui-monospace, Menlo, monospace; color: var(--rule); white-space: pre-wrap; word-break: break-all; user-select: all; }

/* Minimal display: all but the haiku and the drawing fade away when the mouse is still or gone (see haiku.js). */
.bar, .chrome { transition: opacity 1.6s ease; }
html.idle .bar, html.idle .chrome { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bar, .chrome { transition-duration: 0.3s; } }

/* The words sit level with the middle of the drawing; what goes with them hangs beneath, out of the way of that. */
.words { position: relative; }
.words > .chrome { position: absolute; left: 0; right: 0; top: 100%; }
@media (max-width: 52rem) { .words > .chrome { position: static; } .poem { margin-top: 1.5rem; } .poem span { white-space: normal; } }
.poem span:last-child { margin-bottom: 0; }

/* The haiku page: one full-screen sheet at a time, in its own colours; the one on show fades away before the next comes up
   (see haiku.js). The page itself does not scroll. */
html.feed, html.feed body { height: 100%; overflow: hidden; background: var(--paper); transition: background-color 0.9s ease; }
.page.sheets { padding: 0; overflow: visible; }
.sheet { position: fixed; inset: 0; z-index: 1; display: flex; overflow-x: clip; overflow-y: auto; padding: 5rem clamp(1.25rem, 4vw, 3.5rem); color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
.sheet.current { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; }
.sheet .haiku-page { width: 100%; max-width: 90rem; margin: auto; }
.sheet .words { z-index: 2; } /* the words may run over the lattice, and stay readable there */
html.feed .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; transition: color 0.8s ease, opacity 1.6s ease; }
.faces { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.1rem; padding: 0 clamp(1.25rem, 4vw, 3.5rem); font-size: 0.85rem; color: var(--rule); }
.faces .weight { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: 0.8rem; }
.faces .weight input { width: 7.5rem; accent-color: var(--ink); }
.faces .weight output { font: 500 0.8rem/1 var(--mono); letter-spacing: 0; min-width: 2.2ch; }
.faces button { opacity: 0.6; transition: opacity 0.35s ease; }
.faces button:hover { opacity: 1; }
.faces button[aria-pressed='true'] { opacity: 1; color: var(--ink); }
html.feed .faces { position: fixed; top: 4.3rem; left: 0; right: 0; z-index: 10; }
.next { position: fixed; left: 50%; bottom: 1rem; z-index: 10; translate: -50% 0; padding: 0.4rem 1rem; font-size: 2.8rem; line-height: 1; color: var(--ink); opacity: 0.4; transition: color 0.8s ease, opacity 1.6s ease; animation: bob 2.6s ease-in-out infinite; }
.next[hidden] { display: none; }
.lost { position: fixed; left: 50%; bottom: 2.4rem; z-index: 10; translate: -50% 0; padding: 0.4rem 0.2rem; color: var(--ink); font-style: italic; font-size: 1.1rem; opacity: 0.55; transition: color 0.8s ease, opacity 1.6s ease; }
.lost:hover { opacity: 0.95; }
.next:hover { opacity: 0.75; }
@keyframes bob { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .next { animation: none; } .sheet, .sheet.current { transition-duration: 0.01s; } }

/* The write section sits below the haiku on the list page, as on the original; and the footer. */
.write { padding: 6rem clamp(1.25rem, 4vw, 3.5rem) 2rem; }
.write .compose { margin: 0 auto; }
.write .write html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.site-foot { display: flex; justify-content: flex-end; padding: 3rem clamp(1.25rem, 4vw, 3.5rem) 2.8rem; }
.maker { display: block; text-align: right; font: italic 400 calc(clamp(19px, 1.55vw, 23px) * var(--serif-scale, 0.88) / 0.88)/1.2 var(--serif); letter-spacing: -0.005em; color: var(--rule); transition: color 0.6s ease; }
.maker span { display: block; }
.maker:hover { color: var(--ink); } /* the words darken */

/* The scoring: a score and a plus, small and a little faded until they are wanted. */
.votes { display: inline-flex; align-items: center; gap: 0.7rem; opacity: 0.6; transition: opacity 0.4s ease; }
.votes:hover, .entry:hover .votes { opacity: 1; }
.votes > span { font: 500 0.9rem/1 var(--mono); letter-spacing: 0; text-align: right; }
.votes button { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: 1.1rem; line-height: 1; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.votes button:hover, .votes button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.byline .votes { margin-left: 0.4rem; }

/* On a haiku's own page "Life" has no circle behind it. */
html.feed .bar .brand { display: inline; white-space: normal; }
html.feed .bar .life { display: inline; width: auto; height: auto; margin: 0; background: none; transition: none; }

/* The main page: the top haiku, then the list, one at a time (home.js). The list is a sheet that scrolls inside itself. */
.poem-link { display: block; }
.sheet.listing { display: block; padding: 6.6rem 0 0; scroll-padding-top: 6rem; }
.sheet.listing .haiku-list { padding-top: 1rem; }

/* After publishing: the page lets go (its words and controls fade and blur away while its ground takes on the new haiku's colour), then the haiku comes up. */
html.leaving .bar, html.leaving #listing, html.leaving main, html.leaving .site-foot, html.leaving .faces { opacity: 0; filter: blur(6px); pointer-events: none; transition: opacity 0.8s ease, filter 0.8s ease; }

/* Best / Newest: the list lets go, then the new one comes up haiku by haiku (home.js). */
.haiku-list { transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease; }
.haiku-list.swapping { opacity: 0; transform: translateY(10px); filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .haiku-list { transition: none; } }

/* The parts of a haiku come in one after another, each on its own delay (--d), whenever it is shown (sheet.js). */
.sheet .poem span, .sheet .byline, .sheet .tune { transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease; transition-delay: var(--d, 0ms); }
.sheet:not(.shown) .poem span, .sheet:not(.shown) .byline, .sheet:not(.shown) .tune { opacity: 0; filter: blur(10px); transform: translateY(10px); }
.sheet.hush .poem span, .sheet.hush .byline, .sheet.hush .tune { transition: none; }