/* Telop's website. Brand rules: brand/README.md ("Type by surface", "Interface colors", "Motion").
   Colors are the brand's own and don't change with a theme. Nothing animates: the brand cuts.
   Type follows one scale (a major third from 16 px) and every line height lands on a 4 px grid. */

:root {
  --sea: #2e3f9a;
  --cream: #f4e6c4;
  --night: #0a0f2a;
  --white: #fff;
  --black: #000;
  --hair: color-mix(in srgb, var(--sea) 35%, transparent);
  --rule: 4px;
  --head: "Hoefler Text", Georgia, serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --t-1: 0.8125rem;  /* 13 */
  --t0: 1rem;        /* 16 */
  --t1: 1.25rem;     /* 20 */
  --t2: 1.5625rem;   /* 25 */
  --t3: 1.9375rem;   /* 31 */
  --t4: 2.4375rem;   /* 39 */
  --t5: 3.0625rem;   /* 49 */
  --t6: 3.8125rem;   /* 61 */
  --t7: 4.75rem;     /* 76 */
  --gutter: clamp(17px, 5vw, 64px);   /* never under the mark's 16.48 px clear space at its 32 px cap */
  --measure: 34em;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* iOS Safari tints its bars from the body's background, so the body is the header's night and the cream moves onto
   main. The footer reaches down behind the home indicator itself (viewport-fit=cover + its safe-area padding), and
   nothing bounces, so the body never shows below it. */
html { overscroll-behavior-y: none; }
body:has(> main) { background: var(--night); }
body > main { background: var(--cream); }
body.at-foot { background: var(--sea); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--sea);
  font: 400 var(--t0)/1.5 var(--body);
  font-kerning: normal;
  overflow-wrap: break-word;
}

main:focus { outline: none; }

/* Japanese text settings sit on the page's body only. On a bare :lang(), they would reach every span inside a
   heading and break its leading. */
/* text-autospace puts the quarter-em between Japanese and Latin (iPhoneアプリ → iPhone アプリ) that print uses. */
body:lang(ja) { line-height: 1.75; line-break: strict; text-spacing-trim: trim-start; text-autospace: normal; }
/* text-wrap-style, not the text-wrap shorthand: the shorthand also resets wrapping, undoing .nb and .sr-only. */
:lang(ja) :is(h3, figcaption) { word-break: auto-phrase; text-wrap-style: pretty; }
/* Japanese body copy in wide columns fills the measure, as Japanese is set; Latin words never stretch (auto,
   not inter-character). Narrow columns and English runs stay ragged: justifying ten characters makes rivers. */
:lang(ja) :is(p, dd) { word-break: normal; text-wrap-style: pretty; }
/* Short Japanese captions break only where <wbr> says, unless a line can't hold a phrase at all. */
:lang(ja) :is(.cards p, .cards h3, .gestures dd, .watch-text p, .watch-text h3) { word-break: keep-all; overflow-wrap: anywhere; }

img, video, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

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

/* Line heights snap up to the 4 px grid from a ratio of the size. */
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: -0.01em; margin: 0; text-wrap-style: balance; overflow-wrap: anywhere; }
.keep { word-break: keep-all; overflow-wrap: anywhere; }
.section-head > *, .wrap > * { min-width: 0; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { font-family: var(--mincho); font-weight: 600; letter-spacing: 0; word-break: auto-phrase; }
h2 { font-size: var(--t3); line-height: round(up, 1.08em, 4px); }
h3 { font-size: var(--t1); line-height: 1.2; }
:lang(ja) h2 { font-size: var(--t2); line-height: round(up, 1.4em, 4px); }
:lang(ja) h3 { font-size: var(--t1); line-height: 1.4; }

p { margin: 0; max-width: var(--measure); text-wrap-style: pretty; }

.skip {
  position: absolute; left: var(--gutter); top: 8px; z-index: 2;
  padding: 8px 16px; background: var(--sea); color: var(--cream);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* ── Header ───────────────────────────────────────────────────────────────── */

.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-block: 24px;
}
/* The mark's clear space is the sun's radius, 0.515 of its 32 px cap: 16.48 px, held at 16 here for the 8 px grid
   (the half pixel is invisible), and the focus ring draws outside it. */
.masthead .home { display: block; flex-shrink: 0; padding: 16px; margin: -16px 0 -16px -16px; }
/* 32 px cap height: the kana lockup's floor (brand/README.md). The tight file is 554.25 × 103.25 units on a
   100-unit cap, and carries no clear space, so the padding around it here is the clear space. */
.mark { width: 178px; height: auto; aspect-ratio: 554.25 / 103.25; }   /* cap 32.1 px: never under the floor to rounding */
.mark-print { display: none; }   /* the one-color black mark, loaded with the page so a first print has it */
.masthead nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.note { font-size: var(--t-1); }
.masthead nav a { display: inline-block; padding: 12px 0; font-weight: 600; }
.masthead nav a[aria-current="page"] { text-decoration-thickness: 3px; }

/* ── Night band: the hero and the closing promise ─────────────────────────── */

.night { background: var(--night); color: var(--cream); }
/* viewport-fit=cover: the page runs under Safari's bars, so the night header reaches up behind the status bar and
   the footer down behind the home indicator; Safari's chrome then shows the page's own colors at each end. */
body > header { padding-top: env(safe-area-inset-top, 0px); }

.hero { display: grid; gap: 40px; padding-block: 48px 64px; align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
/* A keyed plate, the cards' own title device (天気予報 | 今夜): a filled block and a tag beside it. */
/* Written in capitals where wanted, never text-transform: that would make iPhone IPHONE. */
.plate { display: inline-flex; flex-wrap: wrap; margin: 0; font: 700 var(--t-1)/1.5385 var(--body); letter-spacing: 0.02em; }
.plate[lang="en"] span, .plate span:lang(en) { letter-spacing: 0.08em; }
.plate span { padding: 4px 12px; background: var(--sea); color: var(--cream); border: 2px solid var(--sea); }
.plate span + span { background: transparent; color: var(--sea); }
.plate.on-night span { background: var(--cream); color: var(--night); border-color: var(--cream); }
.plate.on-night span + span { background: transparent; color: var(--cream); }
.plate[lang="ja"] span, .plate span:lang(ja) { letter-spacing: 0.12em; }
/* On an English page the capitals tag is English by inheritance, so it gets the capitals tracking too. */
.plate span:not(:lang(ja)):not(:first-child) { letter-spacing: 0.08em; }
.hero-copy .plate span { letter-spacing: 0.02em; }
.hero h1 { font-size: var(--t4); line-height: round(up, 1em, 4px); }
:lang(ja) .hero h1 { font-size: var(--t3); line-height: round(up, 1.3em, 4px); }
.hero .lede { font-size: var(--t1); line-height: 1.6; max-width: 30em; }
:lang(ja) .hero .lede { font-size: var(--t0); line-height: 2; }
/* テロップ never breaks across lines: テロ alone is the short form of terrorism (brand/README.md). */
.nb { white-space: nowrap; }
/* A Japanese number and its counter (1984年, 16都市, 12時間) kept whole without adding characters to the text. */
.tok { word-break: keep-all; }
/* A phrase kept on one line while its column can hold it (18 em, so enlarged text still wraps). */
.hero-copy, .promise .wrap, .cards li { container-type: inline-size; }
.nb-soft { white-space: nowrap; }
@container (max-width: 18em) { .nb-soft { white-space: normal; } }
.tag { font: 600 var(--t-1)/1.5385 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }

.reel { display: grid; justify-items: center; gap: 16px; }

/* The other language, the way the period ads set it: one vertical column. */
.vertical {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 600 var(--t2)/1.44 var(--mincho);
  letter-spacing: 0.06em; margin: 0; max-height: 16em;
}

.hero-screen { display: grid; grid-template-columns: auto auto; gap: 24px; align-items: start; justify-content: center; }
.hero-phone { --w: clamp(240px, 26vw, 380px); }

/* A plain black slab, the hardware rather than a mockup template (brand/README.md "Imagery"), drawn to an
   iPhone 17 Pro's proportions: a bezel 3.7% of the body's width, screen corners 12.7% and body corners 16.4%,
   so the two curves are concentric. Container units (cqi, a hundredth of the slab's width) keep every corner a
   true circle at any size; a percentage radius would turn elliptical on a box this tall. */
.phone {
  position: relative; margin: 0; container-type: inline-size;
  width: var(--w, 280px);
}
.phone::before {
  content: ""; position: absolute; inset: 0;
  background: #0b0b0c; border-radius: 16.4cqi;
  box-shadow: inset 0 0 0 1.5px #3a3a3f;
}
.phone > img, .phone > video {
  position: relative; display: block;
  width: calc(100% - 7.4cqi); margin: 3.7cqi;
  aspect-ratio: 886 / 1920; object-fit: cover;
  border-radius: 12.7cqi; background: #050505;
}
.phone.card > img { aspect-ratio: 1320 / 2868; }
/* The live hero (assets/telop-signal): drawn over the recording's poster, in exactly its box, so nothing moves
   when it takes over. Hidden until its first field is in; no fade, since only the picture moves. */
.phone > canvas.live {
  position: absolute; top: 0; left: 0; width: calc(100% - 7.4cqi); margin: 3.7cqi;
  aspect-ratio: 886 / 1920; border-radius: 12.7cqi; visibility: hidden;
}
.phone.is-live > canvas.live { visibility: visible; }

.reel-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: transparent; color: inherit; border: 2px solid currentColor; border-radius: 0;
  font: 600 var(--t0)/1.25 var(--body); cursor: pointer;
}
.reel-toggle:hover { background: var(--cream); color: var(--night); }
.reel-toggle[hidden] { display: none; }

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section { padding-block: 72px; border-top: var(--rule) solid var(--sea); }
/* Where a night band meets a cream one, the change of ground is the boundary: no rule. */
.night + .section { border-top: 0; }
.section > .wrap { display: grid; gap: 40px; }
.section-head { display: grid; gap: 16px; align-content: start; justify-items: start; }
/* The plate keeps its own face and size wherever it sits: the section and Japanese text rules would otherwise
   outrank it and set it as body text or Mincho. */
.section-head .plate { margin-bottom: 8px; }
:is(.section-head, .boiler, .hero-copy) .plate, :lang(ja) :is(.section-head, .boiler, .hero-copy) .plate { font: 700 var(--t-1)/1.5385 var(--body); }
.section-head p { font-size: var(--t1); line-height: 1.6; }
:lang(ja) .section-head p { font-size: var(--t0); line-height: 2; }

/* Drawn, then taped: one card twice, the proof the copy above asserts. */
.making { display: grid; gap: 24px; margin: 0; }
.making figure { display: grid; gap: 12px; margin: 0; align-content: start; }
.making img { width: 100%; aspect-ratio: 4 / 3; background: var(--night); }
.making figcaption { font-size: var(--t0); line-height: 1.5; max-width: var(--measure); }
.making strong { font-weight: 700; }
@media (min-width: 720px) { .making { grid-template-columns: 1fr 1fr; } }

.pair { display: grid; gap: 16px; }
.pair > * { min-width: 0; }

.cards {
  display: grid; gap: 40px 24px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cards { justify-items: start; }
.cards li { display: grid; gap: 8px; align-content: start; width: 100%; max-width: 260px; }
/* Small headings in the body face: Hoefler's Black clots at 20 px. */
.cards h3 { font-family: var(--body); font-weight: 700; letter-spacing: 0; }
:lang(ja) .cards h3 { font-family: var(--mincho); font-weight: 600; }
.cards .phone { --w: 100%; max-width: 260px; margin-bottom: 16px; }
.cards p { font-size: var(--t0); line-height: 1.5; }

.languages { display: flex; gap: 16px; justify-content: start; }
.languages figure { display: grid; gap: 8px; margin: 0; }
.languages .phone { --w: min(200px, 40vw); }
.languages figcaption { font-weight: 600; }


/* How to watch: real screen recordings of each gesture, looping. Phones beside their text on small screens; three
   portrait loops in a row and the landscape one under them from 880 px. */
.watch { display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; }
.watch li { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: start; align-content: start; }
.watch li.land { grid-template-columns: 1fr; }
.watch .phone { --w: 100%; }
.watch .land { --w: min(100%, 560px); }
.watch-text { display: grid; gap: 8px; align-content: start; }
.watch h3 { font: 700 var(--t1)/1.2 var(--body); letter-spacing: 0; }
:lang(ja) .watch h3 { font-family: var(--mincho); font-weight: 600; }
/* A phone on its side: the bezel and corners keep their proportion to the short side (0.462 of the long one). */
.phone.land::before { border-radius: 7.6cqi; }
.phone.land > video { width: calc(100% - 3.4cqi); margin: 1.7cqi; aspect-ratio: 840 / 388; border-radius: 5.9cqi; }
.reel-toggle.on-cream { justify-self: start; }
.reel-toggle.on-cream:hover { background: var(--sea); color: var(--cream); }
.gestures { display: grid; gap: 24px; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gestures div { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid var(--sea); }
.gestures dt { font: 700 var(--t1)/1.2 var(--body); }
:lang(ja) .gestures dt { font-family: var(--mincho); font-weight: 600; line-height: 1.4; }
.gestures dd { margin: 0; }
.gestures div { min-width: 0; }
.gestures :is(dt, dd) { overflow-wrap: anywhere; }

.onair h1 { font-size: var(--t4); line-height: round(up, 1.04em, 4px); }
/* On air: the honest-states band, with the app's own standby card, rendered by telop-render (call letters cropped off). */
.onair { padding-block: 72px; }
.standby-card { display: grid; gap: 16px; margin: 0; align-content: start; max-width: 560px; }
.standby-card figcaption { font-size: var(--t-1); line-height: 1.5385; }
.standby-card img { width: 100%; aspect-ratio: 1200 / 888; outline: 1px solid color-mix(in srgb, var(--cream) 30%, transparent); }

.promise { padding-block: 72px; }
.promise .wrap { display: grid; gap: 24px; }
.promise h1, .promise h2 { font-size: var(--t4); line-height: round(up, 1.04em, 4px); }
:lang(ja) .promise h1, :lang(ja) .promise h2 { font-size: var(--t2); line-height: round(up, 1.4em, 4px); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.foot { background: var(--sea); color: var(--cream); padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot .wrap { display: grid; gap: 32px; }
.foot .fine + .fine { margin-top: -24px; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.foot nav a { display: inline-block; padding: 12px 0; font-weight: 600; }
.foot .fine { font-size: var(--t-1); line-height: 1.5385; max-width: 46em; }

/* ── Press kit ────────────────────────────────────────────────────────────── */

.facts { display: grid; gap: 0; margin: 0; grid-template-columns: minmax(8em, max-content) minmax(0, 1fr); }
.facts dd { overflow-wrap: anywhere; }
.facts dt, .facts dd { padding-block: 12px; border-bottom: 1px solid var(--hair); }
.facts dt { font-weight: 700; padding-right: 24px; }
.facts dd { margin: 0; }
.facts dd > a:only-child { display: inline-block; padding-block: 6px; margin-block: -6px; }

/* Tiles at least 264 px wide keep the kana lockup inside at its 32 px cap-height floor or above. */
.downloads { display: grid; gap: 32px 24px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); }
.downloads li { display: grid; gap: 8px; align-content: start; min-width: 0; }
.swatch { display: grid; place-items: center; height: 168px; padding: 24px; margin-bottom: 8px; border: 1px solid var(--hair); background: var(--cream); }
.swatch.on-sea { background: var(--sea); }
.swatch.on-night { background: var(--night); }
.swatch.on-white { background: var(--white); }
.swatch img { max-width: 100%; max-height: 118px; width: auto; height: auto; }
.swatch.fill { padding: 0; overflow: hidden; height: auto; aspect-ratio: 4 / 3; }
.swatch.fill img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.swatch .icon { width: 118px; height: 118px; max-height: none; border-radius: 22.5%; }
.links { display: flex; gap: 16px; flex-wrap: wrap; }
.links a { display: inline-block; padding: 12px 0; min-width: 44px; text-align: center; }

.shots p { font-size: var(--t0); line-height: 1.5; }
.swatch.tall { position: relative; height: auto; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; }
.swatch.tall img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 42%; }
.downloads h3 { font: 700 var(--t1)/1.2 var(--body); letter-spacing: 0; }
.boiler { display: grid; gap: 16px; align-content: start; justify-items: start; padding: 24px; border: 1px solid var(--sea); max-width: 46em; }

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .cards { gap: 32px 16px; }
  .cards p { font-size: var(--t-1); line-height: 1.5385; }
  .cards p { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .masthead { flex-wrap: wrap; }
  .hero-screen { grid-template-columns: 1fr; justify-items: center; }
  .phone.hero-phone { --w: min(280px, 78vw); }
}

/* ── Wider screens ────────────────────────────────────────────────────────── */

@media (min-width: 600px) {
}

@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The home page's six program cards sit three by two; the press kit's ten screens stay four across. */
  .cards:not(.shots) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .hero h1 { font-size: var(--t5); }
  :lang(ja) .hero h1 { font-size: var(--t4); }
}

@media (min-width: 880px) {
  .hero { padding-block: 72px 96px; }
  .onair { padding-block: 96px; }
  .gestures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .watch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .watch li { grid-template-columns: 1fr; }
  .watch li:not(.land) .phone { max-width: 240px; }
  .watch li.land { grid-column: 1 / -1; grid-template-columns: minmax(0, 560px) 1fr; gap: 32px; align-items: center; }
  .pair { grid-template-columns: 1fr 1fr; gap: 48px; }
  /* Widgets is two sentences: the heading and the text side by side, so neither leaves half the row empty. */
  .widgets .section-head { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .widgets .section-head .plate { grid-column: 1 / -1; }
  /* The body column starts level with the heading, below the plate: 32 px plate + 8 margin + 16 gap. */
  .pair > .section-head.body { padding-top: 56px; }
  :lang(ja) .section-head p { font-size: var(--t1); line-height: 1.8; text-align: justify; text-justify: auto; }
  :lang(ja) .hero .lede { font-size: var(--t1); line-height: 1.8; }
  .section { padding-block: 96px; }
  h2 { font-size: var(--t5); }
  :lang(ja) h2 { font-size: var(--t4); }
  .promise h1, .promise h2 { font-size: var(--t6); }
  :lang(ja) .promise h1, :lang(ja) .promise h2 { font-size: var(--t4); }
  .vertical { font-size: var(--t3); line-height: 1.4194; }
}

@media (min-width: 1100px) {
  .hero h1 { font-size: var(--t7); }
  :lang(ja) .hero h1 { font-size: var(--t6); }
}

@media (min-width: 1600px) {
  .wrap { max-width: 1440px; }
  .hero-phone { --w: 420px; }
}

/* A phone on its side: two columns, and the reel sized by the screen's height so it and its button fit. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .hero-phone, .phone.hero-phone { --w: calc((100svh - 96px) * 0.44); }
}

/* The vertical line needs the room beside the phone: from 960 px. */
@media (max-width: 959px) {
  .hero-screen .vertical { display: none; }
}

@media (max-width: 479px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: 4px; }
}

/* Forced colors: keep the bands and swatches their own ground, so the cream logo still has night under it. */
@media (forced-colors: active) {
  header.night, .foot, .swatch, .phone::before { forced-color-adjust: none; }
}

/* Paper: no night ink, dark type, and the logo in its one-color black. */
@media print {
  .night, .foot { background: none; color: var(--black); }
  .reel-toggle, .skip, .phone > canvas.live { display: none; }
  .plate span, .plate span + span, .plate.on-night span, .plate.on-night span + span { background: none; color: var(--black); border-color: var(--black); }
  .mark { display: none; }
  .mark.mark-print { display: block; }
}