/* Hallmark · shape: Index-First · genre: modern-minimal · theme: Dose (deal 3/3, seed personal-portal-launcher-handful-71e1·e3e4282d·2026-11-03·r0) · redesign: full · draw: 1f5d98
 * hero: Index, the keys are the argument (drawn: Poster, swapped: five keys must sit inside the fold) · nav: edge-aligned mast (drawn: search-led bar, swapped: nothing to search on five links) · footer: letter close (drawn: index columns, swapped: the addresses already have a section) · imagery: none, five real brand marks · signature: moulded plastic keys that take the window light and answer the pointer · dose: paper fibre grain, window light in the hero, plastic tint on every key, one ink band (kept against the draw's leave-out: the band is where the network fact gets said)
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · weakest: R, kept the window-light panes and the specimen bar because the page is an object; cut the fifth section and the address table instead */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --font-display: "Schibsted Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, sans-serif;
  --font-body: "Instrument Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, sans-serif;
  --ink-douyu: oklch(72.3% 0.19 50.5);
  --ink-bili: oklch(72.6% 0.171 4.5);
  --ink-xhs: oklch(64.2% 0.244 22.1);
  --ink-huawei: oklch(54.2% 0.215 23);
  --ink-dsh: oklch(48.1% 0.091 170.1);
  --key-h: 104px;
  --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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
}

body { background-color: var(--color-paper); background-image: var(--grain); }

.sprite { position: absolute; width: 0; height: 0; }

.m-douyu { --mk: var(--ink-douyu); }
.m-bili { --mk: var(--ink-bili); }
.m-xhs { --mk: var(--ink-xhs); }
.m-huawei { --mk: var(--ink-huawei); }
.m-dsh { --mk: var(--ink-dsh); }

.mark { width: 34px; height: 34px; color: var(--mk); }

/* ── mast ─────────────────────────────────────────────── */
.nav { padding-top: var(--space-xs); }
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); height: 68px;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.wordmark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
.domain { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }

/* ── hero · Index ─────────────────────────────────────── */
.hero { position: relative; overflow: clip; padding-block: var(--space-xl) var(--section-gap-s); }
.light {
  position: absolute; inset: -18% -12% auto -12%; height: 118%;
  display: flex; gap: 5%; z-index: 0; pointer-events: none;
  transform: skewX(-13deg);
  animation: light-drift 90s var(--ease-in-out) infinite alternate;
}
.light i { flex: 1; border-radius: var(--space-3xl); background: var(--light); filter: blur(52px); opacity: 0.72; }
@keyframes light-drift {
  from { transform: skewX(-13deg) translateX(-2.5%); }
  to { transform: skewX(-13deg) translateX(2.5%); }
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-size: var(--text-display-s); max-width: 14ch; }
.hero .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.launchpad { display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); }

/* ── the keys · moulded plastic ───────────────────────── */
.app {
  --s: 1;
  --k: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr) auto;
  grid-template-areas: "mark name note flag";
  align-items: center;
  column-gap: var(--space-lg);
  min-height: var(--key-h);
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-lg);
  position: relative;
  isolation: isolate;
  z-index: var(--z, var(--z-base));
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-card);
  background-color: color-mix(in oklab, var(--p-thu) 60%, transparent);
  background-image: linear-gradient(color-mix(in oklab, var(--glint) 42%, transparent), transparent 26%);
  box-shadow:
    inset 0 1.5px 0 var(--glint),
    inset 0 -28px 36px -32px color-mix(in oklab, var(--mk) 28%, var(--color-ink)),
    0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent),
    0 12px 22px -16px color-mix(in oklab, var(--color-ink) 34%, transparent);
  transform: scale(var(--s));
  transition: transform var(--dur-short) var(--ease-out);
}
.app-mark { grid-area: mark; width: 44px; height: 44px; display: grid; place-items: center; transform: scale(var(--k)); transition: transform var(--dur-short) var(--ease-out); }
.app-name { grid-area: name; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); line-height: 1.15; letter-spacing: var(--tracking-display); }
.app-note { grid-area: note; font-size: var(--text-md); color: var(--color-ink-2); }
.app-flag {
  grid-area: flag; white-space: nowrap;
  font-size: var(--text-sm); line-height: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  background-color: color-mix(in oklab, var(--color-ink-2) 11%, transparent);
}

@media (hover: hover) {
  .app:hover {
    box-shadow:
      inset 0 1.5px 0 var(--glint),
      inset 0 -28px 36px -32px color-mix(in oklab, var(--mk) 28%, var(--color-ink)),
      0 0 0 1px color-mix(in oklab, var(--mk) 34%, transparent),
      0 20px 30px -18px color-mix(in oklab, var(--color-ink) 42%, transparent);
  }
}
.app:focus-visible { box-shadow: 0 0 0 1px var(--color-focus), 0 12px 22px -16px color-mix(in oklab, var(--color-ink) 34%, transparent); }
.app:active { transform: translateY(3px) scale(calc(var(--s) * 0.992)); }

/* ── the one locked key · ink band ────────────────────── */
.band-ink { background-color: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap); }
.band-ink .statement {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--text-display-s); line-height: 1.08;
  letter-spacing: var(--tracking-display); max-width: 18ch; text-wrap: balance;
}
.band-ink .statement-sub { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-accent-soft); max-width: 30ch; }

/* ── head blocks ──────────────────────────────────────── */
.labels, .inks { padding-block: var(--section-gap-s); }
.head { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-2xl); }
.head h2 { font-size: var(--text-section); }
.head .lead { color: var(--color-ink-2); }
.inks .head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); }
.inks .head .lead { text-align: right; }

/* ── the addresses · printed labels ───────────────────── */
.label-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.label {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-radius: var(--radius-input);
  background-color: var(--color-paper);
  background-image: var(--grain);
  box-shadow:
    0 1px 1px color-mix(in oklab, var(--color-ink) 8%, transparent),
    0 18px 30px -22px color-mix(in oklab, var(--color-ink) 38%, transparent);
}
.label-name { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }
.label-addr {
  font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink);
  overflow-wrap: anywhere;
  padding-bottom: var(--space-lg);
  border-bottom: 1.5px dashed color-mix(in oklab, var(--color-muted) 32%, transparent);
}
.stamp {
  align-self: flex-start; margin-top: var(--space-2xs);
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--stamp-ink);
  box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 4.5px var(--stamp-ink);
  transform: rotate(-2deg);
  font-family: var(--font-outlier); font-size: var(--text-xs); line-height: 1; color: var(--stamp-ink);
}
.stamp--open { --stamp-ink: var(--color-accent); }
.stamp--in { --stamp-ink: var(--color-muted); }

/* ── the five inks · specimen bar ─────────────────────── */
.ink-bar {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 208px; border-radius: var(--radius-card); overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 color-mix(in oklab, var(--glint) 40%, transparent),
    0 26px 44px -30px color-mix(in oklab, var(--color-ink) 45%, transparent);
}
.ink { display: grid; place-items: center; background-color: var(--mk); }
.ink .mark { width: 56px; height: 56px; color: var(--color-paper); }
.ink-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.ink-legend li { display: flex; flex-direction: column; gap: var(--space-3xs); padding-right: var(--space-md); }
.ink-name { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.ink-hex { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }

/* ── letter close ─────────────────────────────────────── */
.foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl) var(--space-xl); }
.foot-in { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-xl); row-gap: var(--space-2xs); }
.sign { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: var(--tracking-display); }
.foot-meta { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }
.foot-note { font-size: var(--text-sm); color: var(--color-muted); margin-left: auto; }

/* ── widths ───────────────────────────────────────────── */
@media (max-width: 80rem) {
  .ink-bar { height: 176px; }
}
@media (max-width: 64rem) {
  .app {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "mark name flag" "mark note flag";
    row-gap: var(--space-3xs);
    padding-inline: var(--space-lg);
  }
  .app-mark { width: 40px; height: 40px; }
  .mark { width: 30px; height: 30px; }
  .label-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inks .head { flex-direction: column; align-items: flex-start; }
  .inks .head .lead { text-align: left; }
}
@media (max-width: 48rem) {
  .nav-in { height: 56px; }
  .ink-bar { grid-template-columns: 1fr; height: auto; }
  .ink { padding-block: var(--space-xl); }
  .ink .mark { width: 44px; height: 44px; }
  .ink-legend { grid-template-columns: 1fr; gap: var(--space-xs); }
  .ink-legend li { flex-direction: row; align-items: baseline; gap: var(--space-sm); padding-right: 0; }
  .label-grid { grid-template-columns: 1fr; }
  .foot-note { margin-left: 0; }
}
@media (max-width: 40rem) {
  :root { --key-h: 88px; }
  .app { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "mark name" "mark note" "mark flag"; }
  .app-flag { justify-self: start; }
  .app-name { font-size: var(--text-lg); }
  .hero h1 { font-size: var(--text-2xl); }
}