/* Machiya's site. Tokens follow ui/machiya.css (Tokyo Night / Tokyo Night Day, the house default).
   Text pairs are >= 4.5:1: in light, text sits on --bg or --surface only; --comment is not used. */

:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, "Segoe UI", "Inter", Roboto, sans-serif;
  --width: 1160px;
  --gutter: 16px;
  --r-m: 10px; --r-l: 16px; --r-phone: 28px; --r-pill: 999px;

  /* Tokyo Night Day */
  --bg: #e1e2e7; --surface: #eef0f6; --line: #c4c8da; --line2: #aab1cb;
  --fg: #3760bf; --fg2: #4c5a8f;
  --blue: #155fc5; --orange: #9a5000; --green: #506b34; --magenta: #802cee; --cyan: #006a8e;
  /* Shiori's pill colours (Tokyo Night Day): Pages, Notes, Web, Small Web, Code */
  /* Pages takes Day's own blue (#2e7de9), not the apps' darker #155fc5: it only colours large headings here (3.1:1, enough
     for large text), and #155fc5 is as dark as Day's blue text, so it didn't stand out from it */
  --pill-pages: #2e7de9; --pill-notes: #9a5000; --pill-web: #7a5e36; --pill-smallweb: #0d6e5c; --pill-code: #bd204c; --pill-konbini: #802cee;
  --on-blue: #ffffff;
  --shadow: 0 2px 4px rgba(55,96,191,.10), 0 18px 48px rgba(55,96,191,.18);
}

/* Dark (Tokyo Night): the system's choice unless the theme button picked one (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Tokyo Night */
    --bg: #1a1b26; --surface: #24283b; --line: #292e42; --line2: #3b4261;
    --fg: #c0caf5; --fg2: #a9b1d6;
    --blue: #7aa2f7; --orange: #ff9e64; --green: #9ece6a; --magenta: #bb9af7; --cyan: #7dcfff;
    /* Shiori's pill colours (Tokyo Night) */
    --pill-pages: #7aa2f7; --pill-notes: #ff9e64; --pill-web: #e0af68; --pill-smallweb: #1abc9c; --pill-code: #f7768e; --pill-konbini: #bb9af7;
    --on-blue: #1a1b26;
    --shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .only-light { display: none !important; }
  :root:not([data-theme="light"]) .only-dark { display: block !important; }
}
:root[data-theme="dark"] {
  /* Tokyo Night */
  --bg: #1a1b26; --surface: #24283b; --line: #292e42; --line2: #3b4261;
  --fg: #c0caf5; --fg2: #a9b1d6;
  --blue: #7aa2f7; --orange: #ff9e64; --green: #9ece6a; --magenta: #bb9af7; --cyan: #7dcfff;
  /* Shiori's pill colours (Tokyo Night) */
  --pill-pages: #7aa2f7; --pill-notes: #ff9e64; --pill-web: #e0af68; --pill-smallweb: #1abc9c; --pill-code: #f7768e; --pill-konbini: #bb9af7;
  --on-blue: #1a1b26;
  --shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }
.only-dark { display: none !important; }

@media (min-width: 720px) { :root { --gutter: 32px; } }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 var(--font);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

h1, h2 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 2;
  background: var(--blue); color: var(--on-blue); padding: 8px 12px; border-radius: 6px;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 var(--gutter); }

/* header */
.site-header .wrap { padding-block: 18px; display: flex; align-items: center; justify-content: space-between; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--line2); border-radius: var(--r-pill); background: transparent; color: var(--fg2);
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg2); }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg.only-dark, .theme-toggle svg.only-light { display: block; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand img { width: 28px; height: 28px; }

/* hero */
.hero { padding: 32px 0 56px; }
.hero-text { text-align: center; max-width: 780px; margin: 0 auto; }
.hero h1 { font-size: clamp(34px, 8vw, 60px); font-weight: 800; }
/* The heading's word flips like a split-flap sign: the page, the note, the phlog, the capsule, the code, 1.5 s each,
   then "everything" for 8 s, and round again: one loop is 15.5 s (CSS only). "everything" wears the five pill colours in
   the order the words flipped (Pages, Notes, Small Web, Web, Code), blended, and they drift back and forth across it,
   as Hister's own title does. With reduced motion it's "everything", still. "Find" and the word are the first line,
   in a slot as wide as the widest word with the word set left in it, so nothing moves while the words change; the
   spare room falls at the line's end. The h1's aria-label reads the whole sentence. */
.hero h1 .line1, .hero h1 .line2 { display: block; }
.spin { display: inline-grid; vertical-align: bottom; perspective: 600px; }
.spin .w { grid-area: 1 / 1; text-align: left; white-space: nowrap; opacity: 0;
  transform-origin: 50% 50%; backface-visibility: hidden; animation: flip 15.5s ease-in-out infinite both; }
.spin .page { color: var(--pill-pages); animation-delay: 0s; }
.spin .note { color: var(--pill-notes); animation-delay: 1.5s; }
.spin .phlog { color: var(--pill-smallweb); animation-delay: 3s; }
.spin .capsule { color: var(--pill-web); animation-delay: 4.5s; }
.spin .code { color: var(--pill-code); animation-delay: 6s; }
.spin .all { font-weight: 900; color: var(--fg); animation: flip-all 15.5s ease-in-out 7.5s infinite both; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .spin .all {
    /* one loop of the five colours, back to blue, so it tiles without a seam */
    /* Hister's title moves the same way (indigo, coral, teal on a 300% gradient, 6 s each way, eased, back and
       forth); ours keeps Machiya's five pill colours in flip order */
    background: linear-gradient(90deg, var(--pill-pages), var(--pill-notes), var(--pill-smallweb),
      var(--pill-web), var(--pill-code), var(--pill-pages)) 0% 50% / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: flip-all 15.5s ease-in-out 7.5s infinite both, drift 6s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  }
}
/* A word holds 1.5 s of the 15.5 s loop (9.68%); "everything" holds 8 s (51.61%) and the colours cross it once. */
@keyframes flip {
  0% { opacity: 0; transform: rotateX(-90deg); }
  1.55% { opacity: 1; transform: rotateX(0); }
  8.13% { opacity: 1; transform: rotateX(0); }
  9.68%, 100% { opacity: 0; transform: rotateX(90deg); }
}
@keyframes flip-all {
  0% { opacity: 0; transform: rotateX(-90deg); }
  2.58% { opacity: 1; transform: rotateX(0); }
  50.06% { opacity: 1; transform: rotateX(0); }
  51.61%, 100% { opacity: 0; transform: rotateX(90deg); }
}
@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .spin .w { animation: none; }
  .spin .all { opacity: 1; }
}
.lede a { color: inherit; text-decoration-color: var(--blue); }
.lede { text-wrap: balance; max-width: 34em; margin-inline: auto; margin-top: 18px; font-size: clamp(18px, 2.4vw, 21px); color: var(--fg2); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; margin-top: 28px; }
.button {
  display: inline-block; padding: 12px 32px; border-radius: var(--r-pill); border: 2px solid var(--blue);
  background: var(--blue); color: var(--on-blue); font-weight: 700; text-decoration: none;
}
.button.secondary { background: transparent; color: var(--blue); }   /* the same pill, outlined: beside the filled one */
.button.neutral { background: transparent; color: var(--fg2); border-color: var(--fg2); }   /* not a way to start: where the code lives */
@media (max-width: 480px) { .actions .button { padding: 10px 18px; } }   /* three fit on one line on a phone */
.button:hover { text-decoration: underline; }

.hero-shot { margin-top: 44px; }
.hero-shot img, .feature-shot img {
  border-radius: var(--r-l); border: 1px solid var(--line2); box-shadow: var(--shadow); background: var(--surface);
}
/* lazy screenshots fade in when they arrive instead of popping (only with JavaScript, which marks them loaded) */
.js .hero-shot img, .js .feature-shot img { opacity: 0; transition: opacity .35s ease-out; }
.js .hero-shot img.is-loaded, .js .feature-shot img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .hero-shot img, .js .feature-shot img { transition: none; } }
@media (max-width: 640px) {
}

/* features */
.feature { padding: 56px 0; }
.feature .wrap { display: grid; gap: 28px; align-items: center; }
.feature-text { max-width: 44em; }
.feature h2 { font-size: clamp(28px, 4.5vw, 38px); font-weight: 800; }
.feature-text p:not(.tag) { margin-top: 12px; font-size: 18px; color: var(--fg2); }
.tag { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 700; }
.tag img { width: 20px; height: 20px; }
.tag img + img { margin-left: -2px; }
/* Each feature's heading wears its Shiori pill colour (Pages, Notes, Web, Code); the tags above them share one. */
.feature { --c: var(--fg); }
.feature:has(.tag.shiori) { --c: var(--pill-pages); }
.feature:has(.tag.kura) { --c: var(--pill-notes); }
.feature:has(.tag.web) { --c: var(--pill-web); }
.feature:has(.tag.code) { --c: var(--pill-code); }
.feature:has(.tag.konbini) { --c: var(--pill-konbini); }
/* a heading that names several kinds of thing gives each its pill's colour (the search section: pages blue, notes orange, code red, the web gold, as Shiori's pills) */
.feature h2 .c-notes { color: var(--pill-notes); }
.feature h2 .c-code { color: var(--pill-code); }
.feature h2 .c-web { color: var(--pill-web); }
.feature h2 { color: var(--c); }
.feature .tag { color: var(--fg2); }
.feature-shot { margin: 0; }

.pair { position: relative; padding-bottom: 12%; }
.pair .wide { width: 88%; }
.pair .phone { position: absolute; right: 0; bottom: 0; width: 26%; }
.pair .phone img { border-radius: 18px; border: 4px solid var(--line); }
/* the hero as a pair: the Mac app with the phone in front */
.hero-shot.pair .wide { width: 90%; }
.hero-shot.pair .phone { width: 22%; }

@media (min-width: 880px) {
  .feature { padding: 72px 0; }
  .feature .wrap { grid-template-columns: 5fr 7fr; gap: 56px; }
  .feature-text { max-width: 28em; }
  .feature.flip .wrap { grid-template-columns: 7fr 5fr; }
  .feature.flip .feature-text { order: 2; }
  .feature.flip .feature-shot { order: 1; }
}

/* extras: one-liners, each with a rule at its left */
.extras { padding: 56px 0 72px; }
.extras .wrap { border-top: 1px solid var(--line2); padding-top: 48px; }
.extras h2 { font-size: clamp(24px, 3.5vw, 30px); font-weight: 800; }
.extras-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.extras-grid li { color: var(--fg2); font-size: 16px; padding-left: 14px; border-left: 3px solid var(--line2); }
/* Shiori on Haiku and on a Mac Plus. The System 6 shot is the Mac's own 512x342 pixels, never wider than that, scaled
   pixel for pixel (exactly 2x on a high-density screen) so its 1-bit dithering stays crisp */
.extras-shots { display: grid; gap: 32px 40px; margin-top: 44px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.extras-shots img { width: 100%; height: auto; }
/* the Haiku shot is a window with its yellow tab, transparent beside the tab: a shadow that follows its outline, no frame */
.extras-shots .window img { border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 6px 16px rgb(0 0 0 / .28)); }
.extras-shots figcaption { margin-top: 12px; text-align: center; font-size: 15px; color: var(--fg2); }
.extras-shots .retro img { max-width: 512px; display: block; margin-inline: auto; image-rendering: pixelated;
  border-radius: 6px; background: #fff; }

/* footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0 32px; font-size: 15px; color: var(--fg2); }
.footer-cols { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-stack nav + nav { margin-top: 28px; }
.site-footer h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 6px; }
.site-footer li span { display: block; font-size: 14px; }
.site-footer a { color: var(--blue); }
.footer-legal { text-align: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }