/* Hallmark · shape: Bento Grid (one lead print, one hang of the product's own screens) · genre: editorial · theme: Atelier (deal 1/3, seed memorial-pages-four-retired-957d·99cd9296·2026-10-30·r0) · redesign: full · draw: aedfc8
 * hero: Stage on all four (themultilife's print is the BBC Click poster, the player loads on request) · nav: edge-aligned, the product's mark and one link to its maker · footer: colophon block · imagery: the owner's own screenshots and photographs, 1 to 4 a page, none from the library · signature: the product's lead picture as a print on a cotton mat, its years pencilled beneath
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, a memorial has no argument to lose; the pages say plainly what each product did and when it stopped */
/* Hallmark · dropped the emoji icons, the "In Memory" banners, the figure rows (70+ / 95% / 100%), the social row without links and the stock closing lines · the owner asked for simpler pages; every fact moved into the rows */
/* Hallmark · waive 47b · one framed phone on the vidonado page, the owner's own marketing shot of the app · the other screens hang unframed */
/* Hallmark · waive 8 · four pages on one system, by design · the owner asked for one simple template for four memorials */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved · gap: none (whole screenshots in the hang, the video back on the page, the statement sections filled, the drop cap dropped, product heads, 16px colophon) */
/* Hallmark · r1 2026-10-30 · each page carries its product's own colour: --color-brand (from the logo) tints the hero wash and the band, --color-accent (its text-safe shade) takes the rules, the years, the counters and the control · marks: the Tyle tile and the Vidonado wordmark are the products' logos, Themultilife keeps its wordmark, Lingista never had a logo (the astronaut was Grav's) and gets a text mark */
/* Hallmark · r2 2026-10-30 · the limewash paper read yellow to the owner: paper, ink, card and rule tokens neutralised to a cool grey-white, the warm photo filter removed, the grain and fibre set grey, the brand tints lightened */
@import url("./tokens.css?v=3");
@import url("./base.css?v=3");

@font-face { font-family: "Sentient"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/sentient-300.woff2") format("woff2"); }
@font-face { font-family: "Sentient"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/sentient-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/hanken-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/hanken-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.32 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.35 0 0 0 0 0.37 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --bar-height: 72px;
}

body { color: var(--color-ink-2); line-height: 1.6; }
h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); }
h3 { font-weight: var(--serif-small); color: var(--color-ink); }
a { text-decoration-color: var(--color-accent); transition: text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-ink); }
a:active { color: var(--color-ink); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* the bar */
.bar { border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--bar-height); }
.mark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-accent); text-decoration: none; font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-lg); }
.mark img { flex-shrink: 0; height: 32px; width: auto; }
.mark img.tile { border-radius: 6px; }
.bar nav a { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }

/* the air: a still wash under the hero, paper covers the rest */
.hero { position: relative; background: linear-gradient(170deg, var(--color-paper) 0%, color-mix(in oklab, var(--color-brand) 12%, var(--color-paper-2)) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; }
.hero > .container { position: relative; z-index: var(--z-base); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - var(--bar-height)); padding-block: var(--space-3xl) var(--space-xl); }
.hero-text { display: flex; flex-direction: column; gap: var(--space-xl); }
.hero-text h1 { font-size: var(--text-display); max-width: 12ch; }
.hero-text .lead { color: var(--color-ink-2); }
.hero-text .years { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-lead); color: var(--color-accent); }
.hero--corridor .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero--corridor .hero-text { align-items: center; max-width: 44ch; }
.hero--corridor .hero-text h1 { font-size: var(--text-display); max-width: 14ch; }
.hero--corridor .hero-text .lead { max-width: 40ch; }

/* a print on a cotton mat, the edition pencilled beneath */
.print { position: relative; margin: 0; padding: var(--space-lg) var(--space-lg) var(--space-md); border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); justify-self: end; width: min(100%, 560px); }
.print::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); pointer-events: none; }
.print .frame { position: relative; aspect-ratio: 4 / 5; height: min(640px, 70svh); width: auto; max-width: 100%; margin: 0 auto; background: var(--color-paper-2); }
.print .frame--portrait { aspect-ratio: 9 / 16; }
.print .frame > img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.print figcaption { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); text-shadow: 0 1px 0 var(--lit); }
.print figcaption .edition::before { content: ""; display: inline-block; width: 3.5em; border-bottom: var(--rule-hair) solid var(--color-accent); margin-right: 0.4em; vertical-align: -0.1em; }

/* a film on the mat: the poster, then the player on request */
.print .frame--film { aspect-ratio: 16 / 9; height: auto; width: 100%; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-paper); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-ink) 72%, transparent); color: var(--color-paper); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.film-play:hover { background: var(--color-ink); }
.film-play:active { transform: translate(-50%, calc(-50% + 1px)); }
.film-play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .film-play { display: none; }
.frame--film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* sections */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--band { padding-block: var(--section-gap-s); background: color-mix(in oklab, var(--color-brand) 7%, var(--color-paper-2)); }
.two { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap-columns); align-items: start; }
.two h2 { font-size: var(--text-section); max-width: 12ch; }
.statement { font-family: var(--font-display); font-weight: var(--statement-weight); font-size: var(--text-display-s); line-height: 1.1; letter-spacing: var(--tracking-statement); color: var(--color-ink); max-width: 22ch; }
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.about--picture { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.about--picture .wall { margin-top: var(--space-2xl); }
.wall { max-width: 48ch; font-size: var(--text-lg); line-height: 1.6; }
.wall p + p { margin-top: var(--space-md); }
.about .frame { position: relative; aspect-ratio: 1 / 1; background: var(--color-paper-2); }
.about .frame > img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.about figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.about figcaption { font-size: var(--text-sm); color: var(--color-muted); }

/* rows under an ink rule */
.ruled { list-style: none; margin: 0; padding: 0; border-top: var(--rule-head) solid var(--color-accent); }
.ruled > li { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-columns); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.ruled > li:first-child { border-top: 0; }
.ruled h3 { font-size: var(--text-title); }
.ruled p { max-width: 52ch; }
.ruled .year { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-title); color: var(--color-ink); font-variant-numeric: tabular-nums; }
ol.ruled { counter-reset: step; }
ol.ruled > li { grid-template-columns: 1fr 4fr 7fr; }
ol.ruled > li::before { counter-increment: step; content: counter(step); font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-title); color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* the hang: the product's own screens, square on the wall, each with its label */
.hang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.hang figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.hang .frame { position: relative; flex: 1; min-height: 0; background: var(--color-paper-2); }
.hang .frame > img { width: 100%; height: 100%; object-fit: cover; object-position: center; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.hang figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.hang figcaption b { font-weight: 400; color: var(--color-ink); }
.tile-3 { grid-column: span 3; } .tile-4 { grid-column: span 4; } .tile-6 { grid-column: span 6; }
.ratio-square .frame { aspect-ratio: 1 / 1; }
.ratio-phone .frame { aspect-ratio: 9 / 16; }
.ratio-ios .frame { aspect-ratio: 473 / 1024; }

/* the close: a letter close over the colophon */
.close { border-top: var(--rule-head) solid var(--color-accent); }
.close-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap-columns); padding-block: var(--space-2xl) var(--space-xl); }
.close .farewell { font-family: var(--font-display); font-weight: var(--statement-weight); font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink); max-width: 30ch; }
.close .maker { display: flex; flex-direction: column; gap: var(--space-xs); align-self: end; }
.close .maker p { max-width: 36ch; color: var(--color-ink-2); }
.close .maker a.btn { align-self: flex-start; }
.colophon { padding-block: var(--space-lg) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.colophon p { max-width: 72ch; }
.colophon p + p { margin-top: var(--space-xs); }

/* the one control: hairline in ink, fills on hover */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); background: transparent; color: var(--color-accent); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* the one entrance: the hero settles once; visible without script */
.js .hero-text > *, .js .print { animation: settle var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero-text > *, .js .print { animation: none; } .btn, a { transition: none; } }

@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl); }
  .print { justify-self: stretch; width: 100%; }
  .print .frame { height: auto; width: 100%; }
  .print .frame--portrait { width: auto; height: 70svh; }
  .two, .about, .about--picture { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .ruled > li, ol.ruled > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  ol.ruled > li::before { font-size: var(--text-md); }
  .hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-3, .tile-4, .tile-6 { grid-column: span 1; }
  .close-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .hang { grid-template-columns: minmax(0, 1fr); }
  .bar nav a { font-size: var(--text-md); }
}