/* Rubynotes, site v2 · direction "A · Editoryal".
   Layout: a printed feature. Title page, chapters on paper or ink, a folio in the margin, a colophon.
   One signature accent: the marker-yellow highlighter. Ruby red only means "recording". */

@font-face { font-family: "Literata"; src: url("fonts/Literata-SemiBoldDisplay.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/Literata-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/Literata-Italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/Onest-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/Onest-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/Onest-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #FAF9F6;  --sheet: #FFFFFF;  --ink: #1C1B19;  --ink-2: #57534C;  --ink-3: #6F6A62;
  --rule: #E3DFD7;  --mark: #FFE45C;  --on-mark: #1C1B19;  --ruby: #B4232F;
  /* The ink chapters: the same palette turned over. */
  --night: #161513;  --night-2: #201F1C;  --night-ink: #F1EFEA;  --night-ink-2: #B9B5AD;  --night-ink-3: #8F8A82;  --night-rule: #2E2C29;
  --serif: "Literata", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Onest", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --t-hero: clamp(3.1rem, 1.2rem + 7.6vw, 8.9rem);
  --t-display: clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem);
  --t-h2: clamp(1.9rem, 1.25rem + 2.5vw, 3.4rem);
  --t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  --t-lede: clamp(1.1rem, 1rem + .45vw, 1.38rem);
  --t-body: 1.0625rem;  --t-small: .9rem;  --t-tiny: .78rem;
  --wrap: 1240px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121211;  --sheet: #1D1C1B;  --ink: #F1EFEA;  --ink-2: #B9B5AD;  --ink-3: #9A958D;
    --rule: #2C2A27;  --mark: #E8C93A;  --on-mark: #121211;  --ruby: #E0525C;
    --night: #0B0B0A;  --night-2: #1A1917;  --night-rule: #2A2826;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.6 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--sheet); padding: 8px 12px; border-radius: 8px; }
.kicker { font: 600 var(--t-tiny)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* The highlighter: one flat band of marker yellow under the words, drawn left to right. */
.mark { background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 86%;
  background-size: calc(var(--sweep, 1) * 100%) .38em; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: .06em; }
.js .sweep { --sweep: 0; transition: --sweep 0s; }
.js .sweep.is-on { animation: sweep 900ms var(--ease) forwards; }
@property --sweep { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes sweep { from { --sweep: 0; } to { --sweep: 1; } }
/* On ink, the highlighter sits under the words as a thick stroke, so light type stays legible. */
@media (prefers-color-scheme: dark) { .mark { background-position: 0 100%; background-size: calc(var(--sweep, 1) * 100%) .14em; padding-bottom: .04em; } }
.night .mark { background-position: 0 100%; background-size: calc(var(--sweep, 1) * 100%) .14em; padding-bottom: .04em; }
.note .mark, .night .note .mark { background-position: 0 86%; background-size: calc(var(--sweep, 1) * 100%) .38em; padding-bottom: 0; }
.hero h1 .mark { animation: sweep 1100ms 450ms var(--ease) both; }

/* Buttons: one ink button style, quiet and exact. */
.btn { display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: 0 1.25rem; border-radius: 999px; font: 600 1rem/1 var(--sans); text-decoration: none; transition: transform .2s var(--ease), background-color .2s; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-1px); }
.btn-small { min-height: 38px; padding: 0 1rem; font-size: .92rem; }
.btn svg { width: 1.1em; height: 1.1em; }
.night .btn-ink { background: var(--night-ink); color: var(--night); }

/* Masthead: not fixed; the folio carries the place once the reader is inside. */
.site-header { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 1.08rem/1 var(--serif); text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav { display: flex; align-items: center; gap: 22px; font-size: .95rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 560px) { .nav { gap: 14px; } .nav a[href$="support/"] { display: none; } }

/* Folio: chapter number and title in the left margin, wide screens only. */
.folio { position: fixed; left: max(18px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left top;
  display: none; gap: 10px; align-items: baseline; font: 500 var(--t-tiny)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); z-index: 5; pointer-events: none; transition: color .3s, opacity .3s; white-space: nowrap; opacity: 0; }
.folio b { font: 600 .9rem/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.folio.on-night { color: var(--night-ink-3); }
.folio.on-night b { color: var(--night-ink); }
.folio.is-on { opacity: 1; }
@media (min-width: 1360px) { .folio { display: flex; } }

/* Title page. */
.hero { padding-block: clamp(48px, 9vh, 120px) clamp(40px, 7vh, 88px); }
.hero h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; max-width: 12ch; }
.hero .lede { margin-top: clamp(22px, 3vh, 34px); font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-actions .fine { font-size: var(--t-small); color: var(--ink-3); }
.contents { margin-top: clamp(56px, 10vh, 120px); border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.contents a { padding: 14px 14px 16px 0; text-decoration: none; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--rule); padding-left: 14px; }
.contents a:first-child { padding-left: 0; }
.contents a:last-child { border-right: 0; }
.contents b { font: 600 1rem/1 var(--serif); }
.contents span { font-size: var(--t-small); color: var(--ink-2); line-height: 1.35; }
.contents a:hover span { color: var(--ink); }
@media (max-width: 900px) { .contents { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contents a:nth-child(3) { border-right: 0; } .contents a:nth-child(4) { padding-left: 0; } .contents a:nth-child(-n+3) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 520px) { .contents { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contents a { border-right: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--rule); } .contents a:nth-child(odd) { border-right: 1px solid var(--rule) !important; } .contents a:nth-child(even) { padding-left: 14px !important; } }

/* Chapters. */
.chapter { padding-block: clamp(80px, 13vh, 160px); position: relative; }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 980px; }
.chapter-head h2 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.03em; }
.chapter-head .lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.num { font: 400 italic 1.05rem/1 var(--serif); color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.night { background: var(--night); color: var(--night-ink); --ink: var(--night-ink); --ink-2: var(--night-ink-2); --ink-3: var(--night-ink-3); --rule: var(--night-rule); }

/* I · The meeting (the peak). The reader's scroll is the playhead. */
.meet-track { position: relative; }
.js .meet-track.is-scrub { height: 340vh; }
.meet-stage { margin-top: clamp(40px, 7vh, 72px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.js .meet-track.is-scrub > .wrap { height: 100%; }
.js .meet-track.is-scrub .meet-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.js .meet-track.is-scrub .meet-stage { margin-top: 0; }
.panel { border: 1px solid var(--rule); border-radius: 22px; background: var(--night-2); padding: clamp(18px, 2.2vw, 28px); min-width: 0; }
.rec { display: flex; align-items: center; gap: 12px; font: 500 var(--t-small)/1 var(--sans); color: var(--ink-2); }
.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ruby); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ruby) 22%, transparent); }
.rec .time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.meet[data-state="done"] .rec .dot { background: var(--ink-3); box-shadow: none; }
.wave { display: block; width: 100%; height: 54px; margin: 16px 0 6px; }
.lines { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.line { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 2px 12px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.line .who { font: 600 var(--t-small)/1.5 var(--sans); color: var(--ink); }
.line .at { grid-column: 1; font: 500 var(--t-tiny)/1.2 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.line p { grid-column: 2; grid-row: 1 / span 2; font-size: .98rem; line-height: 1.5; color: var(--ink-2); }
.js .line.is-off { opacity: 0; transform: translateY(8px); }
.line.is-now p { color: var(--ink); }
.note { background: var(--sheet); color: #1C1B19; border-color: transparent; }
@media (prefers-color-scheme: dark) { .note { background: #F1EFEA; } }
.note .kicker { color: #6F6A62; }
.note h3 { font-size: var(--t-h3); line-height: 1.25; margin: 8px 0 18px; letter-spacing: -.01em; color: #1C1B19; }
.note .tldr { border-left: 3px solid var(--mark); padding-left: 14px; }
.note .tldr p { font: 500 1.08rem/1.5 var(--sans); color: #1C1B19; min-height: 4.5em; }
.note .mark { --mark-c: #FFE45C; background-image: linear-gradient(#FFE45C, #FFE45C); }
.caret { display: inline-block; width: 2px; height: 1.05em; background: #1C1B19; vertical-align: -0.15em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.todos { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid #E3DFD7; }
.todo { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #E3DFD7; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.todo i { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid #6F6A62; transform: translateY(2px); }
.todo span { font: 500 .98rem/1.45 var(--sans); color: #1C1B19; }
.todo em { font-style: normal; color: #6F6A62; font-weight: 400; }
.decision { margin-top: 16px; font: 400 .95rem/1.5 var(--sans); color: #57534C; transition: opacity .4s var(--ease); }
.decision b { font: 600 var(--t-tiny)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6F6A62; margin-right: 8px; }
.js .todo.is-off { opacity: 0; transform: translateY(10px); }
.js .decision.is-off { opacity: 0; }
.meet-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: var(--t-small); color: var(--ink-3); }
.replay { display: none; background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0 16px; font: 500 var(--t-small)/1 var(--sans); cursor: pointer; }
.js .meet:not(.is-scrubbing) .replay { display: inline-flex; align-items: center; }
@media (max-width: 860px) { .meet-stage { grid-template-columns: minmax(0, 1fr); } .lines .line:nth-child(n+5) { display: none; } }

/* Interlude: a spoken sentence, set large. */
.quote { padding-block: clamp(90px, 15vh, 180px); }
.quote blockquote { margin: 0; font: 500 italic var(--t-display)/1.08 var(--serif); letter-spacing: -.025em; max-width: 18ch; }
.quote .src { margin-top: 22px; font-size: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.quote .then { margin-top: clamp(34px, 6vh, 64px); font: 600 var(--t-h2)/1.12 var(--serif); letter-spacing: -.02em; max-width: 22ch; margin-left: auto; text-align: right; }

/* II–IV · One phone, its screen turning as the reader reads. */
.tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 6vw, 96px); }
.tour-steps { display: grid; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px 0; }
.step h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.025em; max-width: 16ch; }
.step p { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.step ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; max-width: 42ch; }
.step li { padding-top: 12px; border-top: 1px solid var(--rule); }
.step li b { display: block; font-weight: 600; }
.step li span { color: var(--ink-2); }
.step .inline-shot { display: none; }
.tour-phone { position: sticky; top: 9vh; height: 82vh; display: flex; align-items: center; justify-content: center; }
.phone { position: relative; width: min(100%, 360px); aspect-ratio: 720 / 1565; border-radius: 52px; background: #0E0E0D; padding: 11px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -22px rgba(28,27,25,.35), 0 0 0 1px var(--rule); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #FAF9F6; }
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform .7s var(--ease); }
.js .phone .screen img:not(.is-on) { opacity: 0; transform: scale(1.015); }
@media (max-width: 900px) {
  .tour { grid-template-columns: minmax(0, 1fr); }
  .tour-phone { display: none; }
  .step { min-height: 0; padding: 48px 0; }
  .step .inline-shot { display: block; margin-top: 18px; }
  .step .inline-shot .phone { width: min(78%, 320px); margin-inline: auto; }
}

/* V · Desk, everywhere, languages. */
.desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: clamp(36px, 6vh, 64px); }
.desk article { padding: 22px 24px 8px 0; border-right: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; }
.desk article + article { padding-left: 24px; }
.desk article:last-child { border-right: 0; }
.desk h3 { font-size: var(--t-h3); letter-spacing: -.01em; }
.desk p { color: var(--ink-2); }
@media (max-width: 860px) { .desk { grid-template-columns: minmax(0, 1fr); } .desk article, .desk article + article { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--rule); } }
.devices { margin-top: clamp(56px, 10vh, 110px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.devices div { padding: 22px 0; display: grid; gap: 6px; }
.devices b { font: 600 clamp(1.5rem, 1rem + 2vw, 2.6rem)/1 var(--serif); letter-spacing: -.02em; }
.devices span { font-size: var(--t-small); color: var(--ink-3); }
@media (max-width: 640px) { .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.langs { margin-top: clamp(56px, 10vh, 110px); }
.langs h3 { font-size: var(--t-h2); letter-spacing: -.025em; }
.langs .lede { margin-top: 12px; color: var(--ink-2); font-size: var(--t-lede); max-width: 44ch; }
.wall { margin-top: 26px; font: 500 clamp(1.25rem, 1rem + 1.4vw, 2.2rem)/1.45 var(--serif); letter-spacing: -.01em; color: var(--ink-3); text-wrap: pretty; }
.wall span { white-space: nowrap; color: var(--ink-2); }
.wall .mark { color: var(--ink); }
.wall i { font-style: normal; color: var(--rule); padding: 0 .2em; }

/* VI · Privacy, a calm statement. */
.privacy p.big { font: 500 var(--t-h2)/1.18 var(--serif); letter-spacing: -.02em; max-width: 24ch; }
.privacy .small { margin-top: 22px; color: var(--ink-2); max-width: 52ch; }
.privacy a { color: var(--ink); }

/* Questions. */
.faq-list { margin-top: 28px; border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 600 var(--t-h3)/1.3 var(--serif); letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list details p { padding: 0 0 24px; color: var(--ink-2); max-width: 62ch; }

/* Colophon: the close, set like an imprint. */
.colophon { padding-block: clamp(110px, 18vh, 200px) clamp(48px, 8vh, 80px); }
.colophon h2 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; max-width: 13ch; }
.colophon .lede { margin-top: 24px; font-size: var(--t-lede); color: var(--ink-2); max-width: 36ch; }
.colophon .hero-actions { margin-top: 34px; }
.imprint { margin-top: clamp(80px, 14vh, 150px); padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; font-size: var(--t-small); color: var(--ink-3); }
.imprint nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.imprint a { color: var(--ink-2); text-decoration: none; }
.imprint a:hover { color: var(--ink); }
.imprint .right { margin-left: auto; }
@media (max-width: 640px) { .imprint .right { margin-left: 0; } }

/* Inner pages (support, legal, 404). */
.page { padding-block-start: clamp(40px, 8vh, 96px); padding-block-end: clamp(64px, 10vh, 120px); }
.page-head h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; }
.page-head .lede { margin-top: 18px; font-size: var(--t-lede); color: var(--ink-2); max-width: 44ch; }
.notice { margin-top: 26px; padding: 14px 16px; border-left: 3px solid var(--mark); background: var(--sheet); color: var(--ink-2); max-width: 70ch; }
.prose { margin-top: 36px; max-width: 70ch; color: var(--ink-2); }
.prose h2 { font-size: 1.45rem; color: var(--ink); margin: 2.2em 0 .6em; letter-spacing: -.01em; }
.prose h3 { font-size: 1.15rem; color: var(--ink); margin: 1.6em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin: .3em 0; }
.prose strong { color: var(--ink); }
.contact { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.contact .mail { font: 600 var(--t-h3)/1.2 var(--serif); }
.site-footer { border-top: 1px solid var(--rule); }
.site-footer .imprint { margin-top: 0; border-top: 0; padding: 26px 0 max(26px, env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 .mark, .js .sweep.is-on { animation: none; --sweep: 1; }
  .js .sweep { --sweep: 1; }
  .caret { animation: none; }
  .line, .todo, .decision, .phone .screen img, .btn { transition: none; }
}

/* Former inline styles (the CSP allows no style attributes). */
.big-gap { margin-top: 18px; }
.h2-size { font-size: var(--t-h2); }
/* Read by VoiceOver, not drawn. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }