/* On Point Optical. Swiss Grid. One grotesk, twelve columns, black and white, one red. */
:root {
  --paper: #F5F5F2;
  --white: #FFFFFF;
  --black: #111111;
  --grey: #5F5F5F;
  --rule: #CFCFC9;
  --red: #E10600;
  --red-deep: #B80500;
  --ash: #B9B9B4;
  /* the one type scale, ratio 1.333. Nothing else is used for type. */
  --s-2: .563rem;
  --s-1: .75rem;
  --s0: 1rem;
  --s1: 1.333rem;
  --s2: 1.777rem;
  --s3: 2.369rem;
  --s4: 3.157rem;
  --s5: 4.209rem;
  --s6: 5.61rem;
  --s7: 7.478rem;
  --s8: 9.969rem;
  --s9: 13.288rem;
  --s10: 17.713rem;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --cols: 4;
  --gut: 16px;
  --pad: 16px;
  --bl: 8px;
  --ease: cubic-bezier(.76, 0, .24, 1);
  --header: 64px;
}
@media (min-width: 760px) { :root { --cols: 12; --gut: 24px; --pad: 24px; } }
@media (min-width: 1200px) { :root { --pad: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--black); font: 400 var(--s0)/1.5 var(--body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { max-width: 62ch; }
p + p { margin-top: calc(var(--bl) * 2); }
strong { font-weight: 700; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--pad); top: -5rem; z-index: 1000; padding: 12px 16px; background: var(--black); color: var(--white); font: 500 var(--s-1)/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }
main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--black); outline-offset: -2px; }

/* ---------- type ---------- */
.mono, .eyebrow, .crumbs { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 900; letter-spacing: -.04em; line-height: .9; }
h2 { font-size: clamp(var(--s3), 7.5vw, var(--s6)); }
h3 { font-size: var(--s1); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
h4 { font: 700 var(--s0)/1.5 var(--body); }
.lede { font-size: var(--s1); line-height: 1.333; max-width: 36ch; letter-spacing: -.01em; }
.muted { color: var(--grey); }
.dark .muted { color: var(--ash); }
.big-num { font: 900 var(--s8)/.8 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.red-word { color: var(--red); }
.prose > * + * { margin-top: calc(var(--bl) * 2); }
.prose h3 { margin-top: calc(var(--bl) * 4); }
.prose ul li { padding-left: 1.25em; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6em; height: 2px; background: var(--black); }
.prose ul li + li { margin-top: var(--bl); }

/* ---------- the grid ---------- */
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); width: calc(100% - var(--pad) * 2); max-width: 1440px; margin-inline: auto; }
.grid > * { grid-column: var(--m, 1 / -1); min-width: 0; }
@media (min-width: 760px) { .grid > * { grid-column: var(--c, 1 / -1); } }
.row-gap { row-gap: calc(var(--bl) * 4); }

.grid-overlay { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; }
.show-grid .grid-overlay { display: block; }
.grid-overlay .grid { height: 100%; }
.grid-overlay span { grid-column: auto; background: rgba(225, 6, 0, .09); border-inline: 1px solid rgba(225, 6, 0, .35); font: 500 var(--s-1)/1 var(--mono); color: var(--red-deep); padding: calc(var(--header) + 8px) 4px 0; }
.grid-overlay span:nth-child(n+5) { display: none; }
@media (min-width: 760px) { .grid-overlay span:nth-child(n+5) { display: block; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 20px; border: 2px solid var(--black); border-radius: 0; background: var(--black); color: var(--white); font: 700 var(--s0)/1 var(--body); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease); }
.btn:hover { transform: translateX(4px); }
.btn-primary { background: var(--black); color: var(--white); }
.btn-ghost, .btn-secondary { background: transparent; color: var(--black); }
.btn-signal { background: var(--red-deep); border-color: var(--red-deep); color: var(--white); }
.btn-ghost-dark { background: transparent; color: var(--white); border-color: var(--white); }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: var(--s-1); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); font-weight: 500; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--bl) * 4); }
.text-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--black); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header); width: calc(100% - var(--pad) * 2); max-width: 1440px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--black); text-decoration: none; }
.logo { width: 92px; height: auto; overflow: visible; }
.logo text { font: 900 26px var(--display); letter-spacing: -1px; fill: var(--black); }
.logo circle { fill: var(--red); }
.site-nav { display: none; }
.nav-list { display: flex; gap: 4px; }
.nav-list a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 12px 8px; font: 500 var(--s0)/1.25 var(--body); text-decoration: none; letter-spacing: -.01em; }
.nav-list a:hover, .nav-list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.nav-n { font: 500 var(--s-2)/1 var(--mono); color: var(--grey); letter-spacing: .04em; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-tel { display: none; font: 500 var(--s-1)/1 var(--mono); letter-spacing: .04em; text-decoration: none; padding: 14px 4px; }
.header-actions .btn-sm { padding-inline: 12px; }
.menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; background: transparent; border: 2px solid var(--black); border-radius: 0; cursor: pointer; font: 500 var(--s-1)/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.menu-toggle-bars { display: grid; gap: 5px; width: 16px; }
.menu-toggle-bars span { display: block; height: 2px; background: var(--black); transition: transform .3s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:first-child { transform: translateY(3.5px); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:last-child { transform: translateY(-3.5px); }
.menu-toggle-label { display: none; }
@media (min-width: 400px) { .menu-toggle-label { display: inline; } }
.site-menu { position: fixed; inset: var(--header) 0 0; z-index: 59; overflow-y: auto; background: var(--paper); border-top: 1px solid var(--black); padding: 8px var(--pad) 32px; }
.site-menu[hidden] { display: none; }
.menu-open { overflow: hidden; }
.menu-list li { border-bottom: 1px solid var(--black); }
.menu-list a { display: flex; align-items: baseline; gap: 12px; min-height: 56px; padding: 12px 0; font: 900 var(--s3)/1 var(--display); letter-spacing: -.04em; text-decoration: none; }
.menu-list .nav-n { font-size: var(--s-1); }
.menu-foot { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 1000px) {
  .site-nav { display: block; }
  .header-tel { display: inline-flex; }
  .menu-toggle { display: none; }
  .logo { width: 104px; }
}
@media (min-width: 1200px) { .nav-list { gap: 12px; } }

/* ---------- breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0; list-style: none; }
.crumbs li + li::before { content: "/"; padding-inline: 8px; color: var(--grey); }
.crumbs a { display: inline-block; padding-block: 4px; min-height: 24px; }
.crumbs [aria-current] { color: var(--grey); }

/* ---------- sections, labels and the giant running numerals ---------- */
.sec { position: relative; overflow: clip; padding-block: calc(var(--bl) * 6) calc(var(--bl) * 12); }
.sec > .grid { position: relative; z-index: 1; }
.sec.dark { background: var(--black); color: var(--white); }
.sec.white { background: var(--white); }
.sec-head { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); position: relative; padding-top: 12px; margin-bottom: calc(var(--bl) * 5); font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.sec-head .rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; transform-origin: 0 50%; }
.sec-head span:nth-of-type(1) { grid-column: 1 / 2; }
.sec-head span:nth-of-type(2) { grid-column: 2 / 4; }
.sec-head span:nth-of-type(3) { grid-column: 4 / 5; justify-self: end; }
@media (min-width: 760px) {
  .sec-head span:nth-of-type(1) { grid-column: 1 / 3; }
  .sec-head span:nth-of-type(2) { grid-column: 3 / 10; }
  .sec-head span:nth-of-type(3) { grid-column: 10 / 13; }
}
.sec-num { position: absolute; z-index: 0; top: calc(var(--bl) * 3); left: -.06em; font: 900 44vw/.78 var(--display); letter-spacing: -.07em; color: var(--rule); pointer-events: none; user-select: none; white-space: nowrap; }
.dark .sec-num { color: #262626; }
.sec-num.right { left: auto; right: -.04em; }
@media (min-width: 760px) { .sec-num { font-size: 30vw; } }
.sec-title { margin-bottom: calc(var(--bl) * 5); }
.sec-title + p, .sec-intro { margin-bottom: calc(var(--bl) * 5); }

/* ---------- photographs: black and white, hard grid crops ---------- */
.ph { position: relative; overflow: hidden; background: var(--rule); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.r-1 { aspect-ratio: 1 / 1; }
.r-45 { aspect-ratio: 4 / 5; }
.r-169 { aspect-ratio: 16 / 9; }
.ph.red-block::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 33.333%; background: var(--red); mix-blend-mode: multiply; }
.ph.red-block.right::after { inset: 0 0 0 auto; }
.ph-cap { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); margin-top: 8px; }
.dark .ph-cap { color: var(--ash); }
@media (min-width: 760px) {
  .ph-cap.v { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; align-self: end; justify-self: end; }
}

/* ---------- 08. poster heroes: four fixed layouts, A B C D by bodyclass ---------- */
.page-hero { position: relative; overflow: clip; padding-block: calc(var(--bl) * 3) calc(var(--bl) * 8); border-bottom: 1px solid var(--black); }
.ph-grid { position: relative; row-gap: calc(var(--bl) * 3); }
.ph-crumbs { grid-row: 1; }
.ph-title { grid-row: 3; font-size: clamp(var(--s4), 13vw, var(--s9)); line-height: .86; hyphens: auto; overflow-wrap: break-word; padding-right: 28px; }
.t-long .ph-title { font-size: clamp(var(--s3), 9.6vw, var(--s7)); }
.ph-red { grid-row: 2; display: block; width: 48px; height: 16px; background: var(--red); }
.ph-lede { grid-row: 4; }
.ph-lede .lede { max-width: 40ch; }
.ph-label { position: absolute; top: 40px; right: 0; z-index: 2; }
.ph-label .eyebrow { writing-mode: vertical-rl; color: var(--grey); white-space: nowrap; }
.page-hero-media { grid-row: 5; margin: 0; position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--rule); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.hero-b .ph-red { width: 56px; height: 56px; border-radius: 50%; }
.hero-c .ph-red { width: 16px; height: 64px; }
.hero-d .ph-red { width: 100%; height: 4px; }
@media (min-width: 760px) {
  .page-hero { padding-block: calc(var(--bl) * 4) calc(var(--bl) * 12); }
  .ph-title { padding-right: 0; }
  .ph-label { position: static; }
  .ph-label .eyebrow { transform: rotate(180deg); }
  .hero-a .ph-crumbs { grid-column: 1 / 9; }
  .hero-a .ph-label { grid-column: 12 / 13; grid-row: 1 / 4; justify-self: end; }
  .hero-a .ph-title { grid-column: 1 / 12; grid-row: 2; margin-top: calc(var(--bl) * 6); }
  .hero-a .ph-red { grid-column: 1 / 4; grid-row: 3; width: 100%; }
  .hero-a .ph-lede { grid-column: 7 / 12; grid-row: 4; margin-top: calc(var(--bl) * 4); }
  .hero-a .page-hero-media { grid-column: 1 / 7; grid-row: 4 / 6; aspect-ratio: 16 / 9; margin-top: calc(var(--bl) * 4); }
  .hero-b .ph-crumbs { grid-column: 3 / 13; }
  .hero-b .ph-red { grid-column: 1 / 3; grid-row: 2; width: 100%; height: auto; aspect-ratio: 1 / 1; align-self: start; margin-top: calc(var(--bl) * 6); }
  .hero-b .ph-title { grid-column: 3 / 13; grid-row: 2; margin-top: calc(var(--bl) * 6); }
  .hero-b .ph-label { grid-column: 1 / 2; grid-row: 3 / 5; align-self: start; }
  .hero-b .ph-lede { grid-column: 3 / 8; grid-row: 3; }
  .hero-b .page-hero-media { grid-column: 8 / 13; grid-row: 3 / 5; aspect-ratio: 4 / 5; }
  .hero-c .ph-red { grid-column: 1 / 2; grid-row: 1 / 3; width: 16px; height: 100%; min-height: 96px; }
  .hero-c .ph-crumbs { grid-column: 2 / 9; }
  .hero-c .ph-title { grid-column: 1 / 9; grid-row: 3; margin-top: calc(var(--bl) * 2); }
  .hero-c .ph-lede { grid-column: 1 / 6; grid-row: 4; }
  .hero-c .ph-label { grid-column: 7 / 9; grid-row: 4; justify-self: end; align-self: end; }
  .hero-c .page-hero-media { grid-column: 9 / 13; grid-row: 1 / 5; aspect-ratio: 4 / 5; }
  .hero-d .ph-crumbs { grid-column: 1 / 13; }
  .hero-d .ph-label { grid-column: 1 / 2; grid-row: 2; }
  .hero-d .ph-lede { grid-column: 2 / 7; grid-row: 2; }
  .hero-d .ph-title { grid-column: 1 / 13; grid-row: 3; margin-top: calc(var(--bl) * 8); }
  .hero-d .ph-red { grid-column: 1 / 13; grid-row: 4; height: 8px; }
  .hero-d .page-hero-media { grid-column: 7 / 13; grid-row: 2; aspect-ratio: 16 / 9; }
}

/* ---------- 01. the eye chart hero ---------- */
.chart-hero { position: relative; overflow: clip; padding-block: calc(var(--bl) * 4) calc(var(--bl) * 8); border-bottom: 1px solid var(--black); }
.chart-hero .grid { row-gap: calc(var(--bl) * 4); }
.chart-top { display: flex; justify-content: space-between; gap: 16px; color: var(--grey); }
.chart { position: relative; }
.chart-blur { position: absolute; inset: 0; filter: blur(12px); pointer-events: none; z-index: 2; }
.chart h1, .chart .chart-h1 { font-size: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; }
.cl { display: block; position: relative; padding-right: 56px; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.045em; white-space: nowrap; }
.cl + .cl { margin-top: calc(var(--bl) * 1.5); }
.cl::after { content: attr(data-acuity); content: attr(data-acuity) / ""; position: absolute; right: 0; bottom: .1em; font: 500 var(--s-1)/1 var(--mono); letter-spacing: .04em; color: var(--grey); }
.cl1 { font-size: clamp(var(--s7), 40vw, var(--s10)); }
.cl2 { font-size: clamp(var(--s4), 15.5vw, var(--s8)); }
.cl3 { font-size: clamp(var(--s3), 10vw, var(--s6)); }
.cl4 { font-size: clamp(var(--s2), 6.8vw, var(--s5)); }
.cl5 { font-size: clamp(var(--s1), 4.6vw, var(--s4)); }
.cl6 { font-size: clamp(var(--s0), 3vw, var(--s3)); }
.cl7 { font: 500 var(--s0)/1.333 var(--body); text-transform: none; letter-spacing: 0; white-space: normal; max-width: 40ch; }
.chart-red { display: block; height: 4px; margin-top: calc(var(--bl) * 2); background: var(--red); }
.chart-readout { display: flex; align-items: baseline; gap: 12px; margin-top: calc(var(--bl) * 2); }
.chart-readout b { font: 900 var(--s3)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.chart-side { display: grid; gap: calc(var(--bl) * 3); align-content: start; }
.chart-side .ph { aspect-ratio: 1 / 1; }
@media (min-width: 760px) {
  .chart-side .ph { aspect-ratio: 4 / 5; }
  .cl1 { font-size: clamp(var(--s7), 22vw, var(--s10)); }
  .cl2 { font-size: clamp(var(--s4), 10vw, var(--s8)); }
  .cl3 { font-size: clamp(var(--s3), 7vw, var(--s6)); }
  .cl4 { font-size: clamp(var(--s2), 4.6vw, var(--s5)); }
  .cl5 { font-size: clamp(var(--s1), 3vw, var(--s4)); }
  .cl6 { font-size: clamp(var(--s0), 2vw, var(--s3)); }
}

/* ---------- 02 + 03. the lens and the Rx slider ---------- */
.lens-stage { --r: 88px; --x: 60%; --y: 45%; position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--rule); touch-action: pan-y; }
.lens-soft { position: absolute; inset: -40px; background: url("assets/street.jpg") center / cover no-repeat; filter: grayscale(1) contrast(1.1) blur(var(--b)); opacity: 0; }
.lens-soft.is-on { opacity: 1; }
.lens-sharp { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.lens-live .lens-sharp { clip-path: circle(var(--r) at var(--x) var(--y)); }
.lens-ring { position: absolute; left: 0; top: 0; z-index: 3; display: none; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 2px solid var(--black); border-radius: 50%; transform: translate(calc(var(--x) - var(--r)), calc(var(--y) - var(--r))); touch-action: none; cursor: grab; }
.lens-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--red); }
.lens-ring:focus-visible { outline: 3px solid var(--white); outline-offset: 0; }
.lens-live .lens-ring { display: block; }
.lens-live.is-sharp .lens-sharp { clip-path: none; }
.lens-live.is-sharp .lens-ring { display: none; }
.lens-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.lens-hint { color: var(--grey); }
.rx { display: grid; gap: 8px; align-content: start; }
.rx label { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.rx-num { display: block; font: 900 var(--s8)/.8 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; margin-block: 8px 16px; }
.rx-num small { font: 500 var(--s-1)/1 var(--mono); letter-spacing: .06em; margin-left: 8px; }
.rx-ticks { display: flex; justify-content: space-between; color: var(--grey); }
.rx-read { margin-top: 16px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--black); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; background: var(--black); border: 0; border-radius: 0; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--black); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: var(--black); border: 0; border-radius: 0; }
@media (min-width: 760px) {
  .lens-stage { --r: 140px; aspect-ratio: 16 / 9; }
  .rx-num { font-size: clamp(var(--s7), 9vw, var(--s9)); }
}

/* ---------- 04. frame morph ---------- */
.frame { width: 100%; height: auto; overflow: visible; color: var(--black); }
.frame path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.dark .frame { color: var(--white); }
.morph-stage { position: relative; padding: 24px 0; border-block: 1px solid currentColor; }
.morph-count { display: flex; justify-content: space-between; margin-bottom: 8px; }
.morph-name { font: 900 var(--s4)/.9 var(--display); letter-spacing: -.04em; margin-top: 16px; }
.morph-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--black); }
.morph-list li { border-bottom: 1px solid var(--black); }
.morph-list li:nth-child(odd) { border-right: 1px solid var(--black); }
.morph-list button { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 52px; padding: 12px; background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer; font: 700 var(--s0)/1.2 var(--body); }
.morph-list button span { font: 500 var(--s-2)/1 var(--mono); color: var(--grey); }
.morph-list button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.morph-list button[aria-pressed="true"] span { color: var(--ash); }
.morph-list button:focus-visible { outline-offset: -4px; }
@media (min-width: 760px) {
  .morph-list { grid-template-columns: 1fr; }
  .morph-list li:nth-child(odd) { border-right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .frame-morph path { transition: d .7s var(--ease); }
  .frame-morph.is-fading { transition: opacity .2s steps(2); opacity: .2; }
}
.morph-list button[aria-pressed="true"]:focus-visible { outline-color: var(--white); }

/* ---------- the frame and lens finder ---------- */
.finder { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gut); row-gap: calc(var(--bl) * 4); }
.finder-q { grid-column: 1 / -1; display: grid; gap: calc(var(--bl) * 4); }
.finder-out { grid-column: 1 / -1; }
.f-q { margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--black); min-width: 0; }
.f-q legend { display: flex; gap: 12px; padding: 0; margin-bottom: 12px; font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.f-q legend span { color: var(--grey); }
.f-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { position: relative; display: grid; gap: 6px; align-content: start; min-height: 56px; padding: 12px; border: 1px solid var(--black); background: var(--paper); cursor: pointer; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt b { font: 700 var(--s0)/1.2 var(--body); }
.opt small { font: 500 var(--s-1)/1.333 var(--mono); color: var(--grey); letter-spacing: .02em; }
.opt svg { width: 40px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2; }
.opt:has(input:checked) { background: var(--black); color: var(--white); }
.opt:has(input:checked) small { color: var(--ash); }
.opt:has(input:focus-visible) { outline: 2px solid var(--black); outline-offset: 2px; }
.opt-box { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; }
.opt:has(input:checked) .opt-box { background: var(--white); }
.finder-panel { background: var(--black); color: var(--white); padding: 20px 16px 24px; }
.finder-panel .frame { color: var(--white); margin-block: 16px 20px; }
.f-result { display: grid; gap: 16px; }
.f-shape { display: block; font: 900 var(--s4)/.9 var(--display); letter-spacing: -.04em; }
.f-line { display: block; color: var(--ash); max-width: 40ch; }
.f-line b { color: var(--white); }
.f-total { display: block; font: 900 var(--s4)/.9 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding-top: 16px; border-top: 1px solid var(--ash); }
.f-break { display: block; font: 500 var(--s-1)/1.6 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ash); }
.f-note { margin-top: 16px; color: var(--ash); font-size: var(--s-1); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 760px) {
  .f-opts { grid-template-columns: repeat(4, 1fr); }
  .f-opts.three { grid-template-columns: repeat(3, 1fr); }
  .finder-q { grid-column: 1 / 8; }
  .finder-out { grid-column: 8 / 13; }
  .finder-panel { position: sticky; top: calc(var(--header) + 16px); padding: 24px; }
}

/* ---------- 07. the timetable ---------- */
.tt { --tt-bg: var(--paper); }
.white .tt, .lead-wrap .tt { --tt-bg: var(--white); }
.tt-status { font: 900 var(--s2)/1 var(--display); letter-spacing: -.03em; margin-bottom: 24px; max-width: 24ch; }
.tt-table { font: 400 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 32px; }
.tt-cap { caption-side: top; text-align: left; padding-bottom: 8px; border-bottom: 2px solid var(--black); font-weight: 500; }
.tt-table th, .tt-table td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; font-weight: 400; }
.tt-table thead th { color: var(--grey); font-weight: 500; border-bottom-color: var(--black); }
.tt-table td { padding-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-table tbody th { position: relative; padding-right: 8px; width: 48%; }
.tt-table tbody th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 15px; border-bottom: 2px dotted var(--black); }
.tt-table tbody th span { position: relative; background: var(--tt-bg); padding-right: 8px; }
.tt-scale span { display: flex; justify-content: space-between; }
.tt-scale i { font-style: normal; }
.tt-track { width: 30%; }
.tt-bar { position: relative; height: 14px; overflow: hidden; border-inline: 1px solid var(--black); }
.tt-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--black); }
.tt-open { position: absolute; top: 3px; bottom: 3px; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); background: var(--black); }
.tt-now { position: absolute; inset: 0; transform: translateX(calc(var(--x, 0) * 100%)); }
.tt-now::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; background: var(--red); }
.is-today th span, .is-today td { font-weight: 700; color: var(--black); }
.is-closed td { color: var(--grey); }
@media (prefers-reduced-motion: no-preference) { .tt-now { transition: transform 1.4s var(--ease); } }
@media (min-width: 760px) { .tt-table tbody th { width: 40%; } }

/* ---------- the lead form ---------- */
.lead-wrap { background: var(--white); }
.lead-form, .lead-success { background: var(--white); border: 2px solid var(--black); padding: 20px 16px 24px; }
.form-coord { display: flex; justify-content: space-between; color: var(--grey); padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--black); }
.field { display: grid; gap: 6px; margin-bottom: 20px; }
.field label { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.field .optional { color: var(--grey); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px; border: 2px solid var(--black); border-radius: 0; background: var(--white); color: var(--black); font: 400 var(--s0)/1.4 var(--body); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 112px; resize: vertical; }
.field-row { display: grid; gap: 0 16px; }
.field-hint { margin: -8px 0 20px; color: var(--grey); font-size: var(--s-1); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.field-error { margin: 0; color: var(--red-deep); font: 700 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--red-deep); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .btn-signal { width: 100%; }
.form-note { margin-top: 16px; color: var(--grey); font-size: var(--s-1); line-height: 1.5; }
.lead-success-h { font-size: var(--s3); margin-bottom: 16px; }
.lead-success .mono { margin-top: 16px; color: var(--grey); }
@media (min-width: 760px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .lead-form, .lead-success { padding: 32px; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding-block: calc(var(--bl) * 8) calc(var(--bl) * 4); }
.site-footer a { color: var(--white); }
.footer-top { row-gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--ash); }
.footer-mark { font: 900 clamp(var(--s4), 16vw, var(--s9))/.84 var(--display); letter-spacing: -.05em; max-width: none; }
.footer-mark .dot { display: inline-block; width: .3em; height: .3em; margin-left: .06em; border-radius: 50%; background: var(--red); vertical-align: .44em; }
.footer-h { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ash); margin-bottom: 12px; }
.footer-contact { display: grid; gap: 12px; align-content: start; }
.footer-contact .mono { color: var(--ash); }
.footer-links { row-gap: 32px; padding-block: 32px; }
.footer-col ul { display: grid; gap: 0; }
.footer-col a { display: inline-block; padding-block: 6px; min-height: 24px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-col p { color: var(--ash); margin-bottom: 16px; }
.grid-toggle[aria-pressed="true"] { background: var(--white); color: var(--black); }
.footer-base { row-gap: 12px; padding-top: 24px; border-top: 1px solid var(--ash); color: var(--ash); font-size: var(--s-1); }
.footer-top-link { justify-self: start; font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding-block: 4px; }
@media (min-width: 760px) { .footer-top-link { justify-self: end; } }

/* ---------- shared compositions ---------- */
.cl + .cl, .chart-h1 + .cl { margin-top: calc(var(--bl) * 1.5); }
.ph-cap.v { order: 2; }
@media (min-width: 760px) { .ph-cap.v { order: 0; } }

/* services by number */
.num-list { border-top: 2px solid var(--black); counter-reset: n; }
.num-list li { border-bottom: 1px solid var(--black); }
.num-row { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 0 20px; text-decoration: none; transition: transform .35s var(--ease); }
.num-row:hover { transform: translateX(8px); }
.num-n { grid-row: 1 / 4; font: 900 var(--s5)/.8 var(--display); letter-spacing: -.06em; }
.num-t { font: 900 var(--s2)/1 var(--display); letter-spacing: -.04em; }
.num-d { color: var(--grey); }
.num-p { font-weight: 500; }
@media (min-width: 760px) {
  .num-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline; padding: 20px 0 24px; }
  .num-n { grid-column: 1 / 3; grid-row: auto; font-size: var(--s7); }
  .num-t { grid-column: 3 / 7; font-size: var(--s3); }
  .num-d { grid-column: 7 / 11; }
  .num-p { grid-column: 11 / 13; justify-self: end; }
}

/* mono strip of cells */
.strip { display: grid; border-top: 1px solid currentColor; }
.strip li { display: grid; gap: 6px; padding: 16px 0 20px; border-bottom: 1px solid currentColor; }
.strip b { font: 900 var(--s2)/1 var(--display); letter-spacing: -.04em; }
.strip span:not(.mono) { color: var(--grey); }
.dark .strip span:not(.mono) { color: var(--ash); }
.dark .strip .mono { color: var(--ash); }
@media (min-width: 760px) {
  .strip { grid-template-columns: repeat(4, 1fr); column-gap: var(--gut); }
  .strip li { padding-right: 8px; }
}

/* quotes */
.q { margin: 0; padding-top: 16px; border-top: 2px solid var(--black); }
.q p { font: 700 var(--s2)/1.1 var(--display); letter-spacing: -.03em; max-width: 24ch; }
.q p::before { content: "\201C"; display: block; font: 900 var(--s6)/.6 var(--display); margin-bottom: 8px; }
.q footer { margin-top: 16px; color: var(--grey); }
.q.big p { font-size: var(--s3); }
.q.red { background: var(--red-deep); color: var(--white); padding: 16px; border-top-color: var(--red-deep); }
.q.red footer { color: var(--white); }

/* facts: a number and a caption, set on the grid */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gut); border-top: 2px solid var(--black); padding-top: 16px; }
.facts div { display: grid; gap: 8px; align-content: start; }
.facts b { font: 900 var(--s5)/.85 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--grey); font-size: var(--s-1); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); } .facts b { font-size: var(--s6); } }

/* a spec table, mono head and hairline rows */
.spec { font-size: var(--s0); }
.spec caption { caption-side: top; text-align: left; padding-bottom: 8px; border-bottom: 2px solid var(--black); font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.spec th, .spec td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.spec thead th { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); border-bottom-color: var(--black); }
.spec tbody th { font-weight: 700; }
.spec td.n, .spec th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.table-wrap { overflow-x: auto; }

/* numbered sequence with a minute ruler */
.seq { border-top: 2px solid var(--black); }
.seq li { display: grid; grid-template-columns: 72px 1fr; gap: 4px 12px; padding: 16px 0 20px; border-bottom: 1px solid var(--black); }
.seq-t { grid-row: 1 / 3; font: 500 var(--s-1)/1.6 var(--mono); letter-spacing: .04em; }
.seq h3 { font-size: var(--s2); font-weight: 900; letter-spacing: -.04em; }
.seq p { color: var(--grey); }
.ruler { position: relative; height: 40px; margin-bottom: 24px; border-bottom: 2px solid var(--black); }
.ruler span { position: absolute; bottom: 0; left: calc(var(--p) * 100%); height: 12px; border-left: 1px solid var(--black); font: 500 var(--s-2)/1 var(--mono); padding-left: 4px; }
.ruler span:nth-child(odd) { height: 24px; }
.ruler .now { border-left: 4px solid var(--red); height: 40px; }
@media (min-width: 760px) {
  .seq li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline; }
  .seq-t { grid-column: 1 / 3; grid-row: auto; }
  .seq h3 { grid-column: 3 / 7; font-size: var(--s3); }
  .seq p { grid-column: 7 / 13; }
}

/* typographic person cards */
.people { display: grid; gap: 0; border-top: 2px solid var(--black); }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; padding: 20px 0 24px; border-bottom: 1px solid var(--black); }
.monogram { grid-row: 1 / 5; display: grid; place-items: center start; font: 900 var(--s6)/.8 var(--display); letter-spacing: -.07em; }
.person h3 { font-size: var(--s3); font-weight: 900; letter-spacing: -.04em; }
.person .role { color: var(--grey); }
.person .lic { color: var(--grey); }
@media (min-width: 760px) {
  .person { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: 32px 0; }
  .monogram { grid-column: 1 / 4; grid-row: 1 / 5; font-size: var(--s9); }
  .person > *:not(.monogram) { grid-column: 4 / 10; }
  .person .lic { grid-column: 10 / 13; grid-row: 1; justify-self: end; }
}

/* a dark callout box */
.box { padding: 20px 16px 24px; border: 2px solid var(--black); }
.box.dark { background: var(--black); color: var(--white); }
.box h3 { margin-bottom: 12px; }
.box.dark .muted { color: var(--ash); }
@media (min-width: 760px) { .box { padding: 32px; } }

/* poster blocks: a word or numeral set huge */
.poster-word { font: 900 clamp(var(--s5), 22vw, var(--s10))/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase; overflow-wrap: anywhere; }
.poster-word.red-word { color: var(--red); }

/* drawn art */
.art { width: 100%; height: auto; color: var(--black); }
.art * { vector-effect: non-scaling-stroke; }
.art .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.art .f { fill: currentColor; }
.art .r { fill: var(--red); }
.art text { font: 500 11px var(--mono); fill: currentColor; letter-spacing: .04em; }
.art-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gut); }
.art-row figure { display: grid; gap: 8px; }
.art-row figcaption { font: 500 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 760px) { .art-row { grid-template-columns: repeat(4, 1fr); } }

/* FAQ */
.faq-list { border-top: 2px solid var(--black); }
.faq-item { border-bottom: 1px solid var(--black); }
.faq-item summary { display: grid; grid-template-columns: 48px 1fr 32px; gap: 12px; align-items: baseline; padding: 20px 0; cursor: pointer; list-style: none; font: 900 var(--s2)/1.05 var(--display); letter-spacing: -.03em; counter-increment: faq; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: counter(faq, decimal-leading-zero); font: 500 var(--s-1)/1 var(--mono); letter-spacing: .04em; color: var(--grey); }
.faq-item summary::after { content: "+"; justify-self: end; font: 500 var(--s2)/1 var(--mono); }
.faq-item[open] summary::after { content: "\00D7"; }
.faq-answer { padding: 0 0 24px 60px; max-width: calc(62ch + 60px); }
.faq-list { counter-reset: faq; }
@media (min-width: 760px) { .faq-item summary { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); font-size: var(--s3); } .faq-item summary::before { grid-column: 1 / 2; } .faq-item summary::after { grid-column: 12 / 13; grid-row: 1; } .faq-answer { padding-left: calc((100% + var(--gut)) / 12 * 2); max-width: none; } .faq-answer > * { max-width: 62ch; } }

/* reviews grid */
.reviews { display: grid; gap: 32px var(--gut); }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(12, minmax(0, 1fr)); } .reviews .q { grid-column: span 4; } .reviews .q.wide { grid-column: span 8; } .reviews .q.big p { font-size: var(--s4); } }

/* price list */
.price { font: 400 var(--s-1)/1.333 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 40px; }
.price caption { caption-side: top; text-align: left; padding-bottom: 8px; border-bottom: 2px solid var(--black); font: 900 var(--s2)/1 var(--display); letter-spacing: -.03em; text-transform: none; }
.price th, .price td { padding: 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; font-weight: 400; text-align: left; }
.price tbody th { position: relative; padding-right: 8px; }
.price tbody th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 17px; border-bottom: 2px dotted var(--black); }
.price tbody th span { position: relative; background: var(--paper); padding-right: 8px; }
.price td { text-align: right; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; width: 1%; padding-left: 8px; }
.price thead th { color: var(--grey); font-weight: 500; border-bottom-color: var(--black); }
.price thead th:last-child { text-align: right; }

/* the 404 poster */
.poster-404 { padding-block: calc(var(--bl) * 6) calc(var(--bl) * 12); }
.poster-404 .big { font: 900 clamp(var(--s8), 48vw, var(--s10))/.8 var(--display); letter-spacing: -.07em; }
.poster-404 .big span { color: var(--red); }

/* motion and its absence */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .lens-soft { transition: opacity .35s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn:hover, .num-row:hover { transform: none; }
}
@media print { .site-header, .site-footer, .grid-overlay { display: none; } }

/* fixes after the first look */
h1, h2, h3, .display, .cl, .num-t, .strip b, .q p, .faq-item summary, .menu-list a, .tt-status, .poster-word { word-spacing: .12em; }
.row-gap > .sec-title { margin-bottom: 0; }
.rx { grid-template-columns: minmax(0, 1fr); }
.rx-num { font-size: clamp(var(--s6), 24vw, var(--s8)); }
.num-row { grid-template-columns: 84px minmax(0, 1fr); }
.num-n { font-size: var(--s4); }
@media (min-width: 760px) {
  .num-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .num-n { font-size: var(--s7); }
  .rx-num { font-size: clamp(var(--s7), 9vw, var(--s9)); }
}
@media (min-width: 760px) { .hero-c .page-hero:not(.has-media) .ph-title { grid-column: 1 / 12; } .hero-c .page-hero:not(.has-media) .ph-label { grid-column: 11 / 13; } }

/* services hub: giant numerals down the left */
.hub { border-top: 2px solid var(--black); }
.hub li { border-bottom: 1px solid var(--black); }
.hub-row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px 0 24px; text-decoration: none; transition: transform .35s var(--ease); }
.hub-row:hover { transform: translateX(8px); }
.hub-n { font: 900 clamp(var(--s8), 44vw, var(--s10))/.78 var(--display); letter-spacing: -.07em; }
.hub-body { display: grid; gap: 8px; align-content: end; }
.hub-t { font: 900 var(--s3)/.95 var(--display); letter-spacing: -.04em; word-spacing: .12em; }
.hub-d { color: var(--grey); max-width: 48ch; }
.hub li:nth-child(5) .hub-n { color: var(--red); }
@media (min-width: 760px) {
  .hub-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
  .hub-n { grid-column: 1 / 7; font-size: clamp(var(--s8), 22vw, var(--s10)); }
  .hub-body { grid-column: 7 / 13; padding-bottom: 12px; }
  .hub-t { font-size: var(--s5); }
}

/* two boxes side by side */
.split { display: grid; gap: var(--gut); }
.split .box h3 { font-size: var(--s3); font-weight: 900; letter-spacing: -.04em; margin-top: 8px; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; } }

/* collections */
.cols3 { display: grid; gap: 32px var(--gut); border-top: 2px solid var(--black); padding-top: 24px; }
.coll { display: grid; gap: 8px; align-content: start; }
.coll .frame { margin-bottom: 16px; }
.coll h3 { font-size: var(--s3); font-weight: 900; letter-spacing: -.04em; }
.coll-p { font: 500 var(--s0)/1.333 var(--mono); }
@media (min-width: 760px) { .cols3 { grid-template-columns: repeat(3, 1fr); } }

.credits { margin-top: 24px; border-top: 1px solid var(--black); }
.credits summary { padding: 14px 0; cursor: pointer; min-height: 44px; }
.credits ul { display: grid; gap: 8px; padding-bottom: 16px; }
.white .price tbody th span, .white .tt-table tbody th span { background: var(--white); }
.dark .art { color: var(--white); }
.map { margin-top: 24px; }
.poster-404 h1 { font-size: clamp(var(--s3), 8vw, var(--s6)); }
.poster-404 .frame { max-width: 480px; }
.tumble { margin: 0; }
.chart-top { margin: 0; }
.poster-404 { overflow: clip; }
.poster-404 .big { font-size: clamp(var(--s7), 34vw, var(--s10)); }
.ph-title { font-size: clamp(var(--s3), 11vw, var(--s9)); }
.t-long .ph-title { font-size: clamp(var(--s3), 9vw, var(--s7)); }
.ph-lede { padding-right: 32px; }
@media (min-width: 760px) {
  .ph-title { font-size: clamp(var(--s4), 13vw, var(--s9)); }
  .t-long .ph-title { font-size: clamp(var(--s3), 9.6vw, var(--s7)); }
  .ph-lede { padding-right: 0; }
}