/* Hallmark · shape: Letter · genre: modern-minimal · theme: Coral (by request) · redesign: full · job: hire · draw: 1c8450
 * hero: Index · nav: edge-aligned · footer: mast · imagery: screenshots 6 (from the repositories' READMEs), library photo 1 (server rack), the user's portrait, stationery built in CSS · signature: the six repositories filed as cotton index cards on the felt desk, each carrying its own README screenshot
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a developer page could fall back to a stock card grid; the repos are filed as index cards and the about text is set as a signed letter */
/* Hallmark · waive 44c · Index posture, the head row sits above the six filed repository cards · the cards span all twelve columns under the headline, so a beside-the-text distance does not apply */
/* Hallmark · dropped mailto:contact@khairu-aqsara.net · the owner moved the contact address to me@khairu-aqsara.net on request */
/* Hallmark · reworded "moodlebox" to "MoodleDocks" · the owner renamed the project on request */
/* Hallmark · answered F4 · Coral pairs an ink card with a cotton card; the cotton one is the theme's secondary, not a second filled primary */
/* Hallmark · reworded "Full-Stack Developer, SRE & Security Researcher (wenkhairu)" to the hero lede "Full-stack developer, SRE and security researcher, building from Yogyakarta." · 54 names a role line set as an eyebrow over the display */
/* Hallmark · dropped "Security Research & CTF" and "The Philosophy" · 54 and 67 name both as tracked-caps eyebrows over their headings */
/* Hallmark · reworded "Let's build something remarkable" to curly quotes "Let’s build something remarkable" · F1 names the straight quote */
/* Hallmark · reworded "with a streamlined, interactive CLI experience" to "with an interactive CLI experience" · 19 names streamlined */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 72px;
  --color-nav: color-mix(in oklab, var(--color-paper) 94%, transparent);
  --color-board-muted: oklch(80% 0.009 60);
  --color-board-rule: oklch(36% 0.012 40);
  --color-glassine: color-mix(in oklab, var(--color-paper-3) 72%, transparent);
  --cast-board: 6px 6px 12px -6px oklch(var(--deep) / 0.7);
  --press-lit: oklch(var(--lit) / 0.75);
  --press-shade: oklch(var(--shade) / 0.35);
  --text-statement: clamp(1.75rem, 1.6vw + 1.1rem, 2.75rem);
  --text-mast: clamp(3rem, 9vw, 8.5rem);
}

/* ---------- shared ---------- */
.hidden { display: none !important; }
.defs { position: absolute; width: 0; height: 0; }
strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h3 { letter-spacing: -0.01em; }
.lucide, .icon { width: 1.125em; height: 1.125em; flex-shrink: 0; }

.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); }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

a:hover { text-decoration-color: var(--color-accent-2); }
.link { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent-2); }
.link:active { color: var(--color-ink-2); }

/* the desk and the stock */
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }

/* controls: letterpress cards */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn--ink:hover { box-shadow: var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.nav.glass { background: var(--color-nav); box-shadow: 0 1px 0 var(--color-rule); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.wordmark__k { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-input); background: var(--color-board); color: var(--color-board-type); font-size: var(--text-sm); }
.wordmark__handle { font-weight: 400; color: var(--color-muted); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 500; }
.nav__links > a:not(.btn) { text-decoration: none; padding-block: var(--space-xs); }
.nav__links > a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.nav__links > a:not(.btn):active { color: var(--color-ink-2); }
.nav__menu { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-ink); cursor: pointer; }
.nav__menu:hover { background: var(--color-paper-2); }
.nav__menu:active { background: var(--color-paper-3); }

.menu { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); background: var(--color-paper); font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-display); }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.menu__out { color: var(--color-accent-2); }
.menu__close { position: absolute; top: var(--space-md); right: var(--space-md); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-ink); cursor: pointer; }
.menu__close:hover { background: var(--color-paper-2); }
.menu__close:active { background: var(--color-paper-3); }
.menu__close .lucide { width: 28px; height: 28px; }

/* ---------- hero: the files on the desk ---------- */
.hero { display: flex; align-items: center; min-height: 100svh; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-lg); }
.hero__inner { width: 100%; }
.hero__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.hero__head h1 { grid-column: 1 / span 7; max-width: 14ch; }
.hero__side { grid-column: 8 / -1; display: flex; flex-direction: column; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.hero__side .lead { color: var(--color-ink-2); }

.files { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); }
.files > li { rotate: -1.2deg; }
.files > li:nth-child(even) { rotate: 0.9deg; translate: 0 var(--space-sm); }
.files > li:nth-child(3n) { rotate: -0.4deg; }
.file { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-md); border-radius: var(--radius-stock); text-decoration: none; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.file__tab { position: absolute; top: -26px; left: calc(var(--space-sm) + var(--i, 0) * 7%); height: 27px; padding: 0 var(--space-sm); border-radius: var(--radius-input) var(--radius-input) 0 0; font-size: var(--text-xs); font-weight: 500; line-height: 27px; color: var(--color-muted); clip-path: inset(-6px -12px 0 -6px); }
.file__title { margin-top: var(--space-2xs); padding-inline: var(--space-2xs); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule-2); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: break-word; min-width: 0; }
.file__line { padding-inline: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.file__shot { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-input); }
.file__shot > img { object-position: 0 0; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; border-radius: var(--radius-input); }
.file__shot--code { display: flex; align-items: flex-end; padding: var(--space-sm); background: var(--color-board); color: var(--color-board-type); }
.file__shot--code code { font-family: var(--font-outlier); font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere; }
.file:hover { transform: translateY(-2px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.file:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.file:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .js .files > li { animation: settle var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 80ms); }
}
@keyframes settle { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .js .files > li { animation: none; }
  .btn, .file, .slip { transition: none; }
  .btn:hover, .file:hover, .slip:hover { transform: none; }
}

/* ---------- about: the letter ---------- */
.about { padding-block: var(--section-gap) var(--section-gap-s); }
.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.letter-wrap { position: relative; grid-column: 1 / span 8; }
.letter { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-2xl); border-radius: var(--radius-stock); }
.letter h2 { margin-bottom: var(--space-xs); }
.letter .lead { margin-bottom: var(--space-sm); color: var(--color-ink-2); }
.letter p:not([class]) { max-width: 62ch; color: var(--color-print); }
.letter__sign { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.letter__name { font-weight: 600; line-height: 1.35; }
.letter__name span { font-weight: 400; color: var(--color-muted); }
.pressed-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.pressed { display: inline-block; padding: var(--space-sm) var(--space-md); border: 2px solid currentColor; border-radius: var(--radius-input); color: var(--color-paid); font-size: var(--text-2xl); font-weight: 600; line-height: 1; letter-spacing: -0.01em; text-shadow: -0.5px -0.5px 0 var(--press-shade), 0.5px 0.75px 0 var(--press-lit); rotate: -6deg; filter: url(#press); }
.pressed-note { font-size: var(--text-sm); color: var(--color-muted); }

.print { position: absolute; top: calc(-1 * var(--space-xl)); right: calc(-1 * var(--space-lg)); width: 172px; margin: 0; padding: var(--space-xs) var(--space-xs) var(--space-xl); border-radius: var(--radius-input); background-color: var(--color-cotton); background-image: var(--tex-cotton); box-shadow: var(--edge-stock), var(--cast-stock-lift); rotate: 3deg; }
.print img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--space-3xs); filter: saturate(0.8) sepia(0.08); }

.margin { grid-column: 10 / -1; display: flex; flex-direction: column; gap: var(--space-2xl); padding-top: var(--space-lg); }
.tally { margin: 0; }
.tally > div { display: flex; flex-direction: column-reverse; padding-block: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.tally dt { font-size: var(--text-sm); color: var(--color-muted); }
.tally dd { margin: 0; font-size: var(--text-3xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.tally .fig { font-family: var(--font-outlier); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.notes > li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.notes h3 { font-size: var(--text-md); letter-spacing: 0; }
.notes p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- work: the index ---------- */
.work { padding-block: var(--section-gap-s) var(--section-gap); }
.work__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.work__head h2 { grid-column: 1 / span 6; }
.work__aside { grid-column: 8 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.work__aside .lead { color: var(--color-ink-2); }
.showcase { margin: var(--space-2xl) 0 0; }
.showcase__frame { aspect-ratio: 1154 / 634; border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.showcase__frame > img { border-radius: var(--radius-card); }
.showcase figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.index { margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule-2); }
.index__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.index__row h3 { grid-column: 1 / span 4; }
.index__row h3 a { text-decoration: none; }
.index__row h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.index__row h3 a:active { color: var(--color-ink-2); }
.index__row > p { grid-column: 5 / span 5; color: var(--color-ink-2); }
.index__row .tags { grid-column: 10 / -1; }
.index__row--lead { padding-block: var(--space-xl); }
.index__row--lead h3 { font-size: var(--text-2xl); }
.index__row--lead > p { font-size: var(--text-lg); line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- security: the board ---------- */
.board { padding-block: var(--section-gap-s); background: var(--color-board); color: var(--color-board-type); }
.board :focus-visible { outline-color: var(--color-accent); }
.board__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.board__head h2 { grid-column: 1 / span 5; }
.board__head .lead { grid-column: 7 / -1; color: var(--color-board-muted); }
.board__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-board-rule); }
.board__ctf { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--space-md); }
.board__ctf > p { color: var(--color-board-muted); }
.board__links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.slip { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-width: 15rem; min-height: 56px; padding: 0 var(--space-lg); border-radius: var(--radius-stock); box-shadow: var(--edge-stock), var(--cast-board); font-weight: 500; text-decoration: none; transition: transform var(--dur-short) var(--ease-out); }
.slip .lucide { color: var(--color-muted); }
.slip:hover { transform: translateY(-1px); }
.slip:active { transform: translateY(1px); }
.board__points { grid-column: 8 / -1; }
.board__points > li { padding-block: var(--space-lg); border-top: 1px solid var(--color-board-rule); }
.board__points > li:first-child { padding-top: 0; border-top: 0; }
.board__points p { margin-top: var(--space-xs); color: var(--color-board-muted); }

/* ---------- expertise: rows ---------- */
.skills { padding-block: var(--section-gap-l) var(--section-gap); }
.skills__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.skills__head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--space-lg); }
.skills__head .lead { color: var(--color-ink-2); }
.rows { grid-column: 5 / -1; border-bottom: 1px solid var(--color-rule); }
.row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.row__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); color: var(--color-ink-2); }

/* ---------- philosophy: the statement ---------- */
.philosophy { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.statement { margin: var(--space-2xl) 0 0; }
.statement p { max-width: 46ch; font-size: var(--text-statement); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.tenets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-3xl); }
.tenets > li { padding-left: var(--space-lg); border-left: 1px solid var(--color-rule-2); }
.tenets p { margin-top: var(--space-xs); color: var(--color-muted); }

/* ---------- contact: the envelope ---------- */
.contact { padding-block: var(--section-gap-s); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.contact__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-lg); }
.contact__text .lead { color: var(--color-ink-2); }
.contact__text .actions { margin-top: var(--space-sm); }
.contact__desk { position: relative; grid-column: 7 / -1; aspect-ratio: 6 / 5; }
.snap { position: absolute; top: 0; right: 0; width: 58%; margin: 0; padding: var(--space-sm) var(--space-sm) var(--space-2xl); border-radius: var(--radius-input); background-color: var(--color-cotton); background-image: var(--tex-cotton); box-shadow: var(--edge-stock), var(--cast-stock-lift); rotate: 3deg; }
.snap__img { aspect-ratio: 1; border-radius: var(--space-3xs); }
.envelope { position: absolute; left: 0; bottom: 0; z-index: var(--z-raised); width: 72%; aspect-ratio: 16 / 10; border-radius: var(--radius-input); rotate: -3deg; }
.envelope__window { position: absolute; left: 9%; bottom: 16%; display: flex; flex-direction: column; gap: var(--space-3xs); width: 56%; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-glassine); box-shadow: inset 0 0 0 1px var(--color-rule-2), var(--press-groove); font-size: var(--text-md); color: var(--color-print); }
.envelope__window span:first-child { font-weight: 600; }

/* ---------- footer: the mast ---------- */
.footer { padding-block: var(--space-3xl) var(--space-2xl); border-top: 1px solid var(--color-rule); }
.footer__mast { margin: 0 0 var(--space-xl); font-size: var(--text-mast); font-weight: 600; line-height: 0.95; letter-spacing: -0.045em; overflow-wrap: break-word; min-width: 0; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__links { display: flex; gap: var(--space-lg); font-weight: 500; }
.footer__links a { color: var(--color-ink); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.footer__links a:active { color: var(--color-ink-2); }
.footer__line { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.heart { width: 1em; height: 1em; }
.footer__credits { flex-basis: 100%; order: 3; font-size: var(--text-xs); color: var(--color-muted); }
.footer__credits a { color: var(--color-ink-2); }
.footer__credits a:hover { text-decoration-color: var(--color-accent-2); }
.footer__credits a:active { color: var(--color-ink); }

/* ---------- under 60rem ---------- */
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
  .wordmark__handle { display: none; }

  .hero { min-height: 0; padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl); }
  .hero__head, .about__grid, .work__head, .index__row, .board__head, .board__body, .skills__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  :is(.hero__head, .about__grid, .work__head, .index__row, .board__head, .board__body, .skills__grid, .contact__grid) > :is(*, .tags, .lead) { grid-column: 1 / -1; }
  .files { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 62%); gap: var(--space-md); margin-top: var(--space-2xl); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-xl) var(--gutter) var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
  .files > li { scroll-snap-align: start; }

  .letter-wrap { display: flex; flex-direction: column; }
  .print { position: relative; top: auto; right: auto; order: -1; align-self: flex-end; width: 128px; margin-bottom: calc(-1 * var(--space-md)); margin-right: var(--space-md); z-index: var(--z-raised); }
  .letter { padding: var(--space-xl) var(--space-lg); }
  .letter__sign { flex-direction: column; align-items: flex-start; }
  .pressed-wrap { align-items: flex-start; }
  .margin { padding-top: var(--space-2xl); }

  .index__row { row-gap: var(--space-xs); }
  .board__body { row-gap: var(--space-2xl); }
  .rows { margin-top: var(--space-xl); }
  .tenets { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .contact__desk { margin-top: var(--space-xl); }
}
@media (max-width: 40rem) {
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .row__items { grid-template-columns: minmax(0, 1fr); }
  .letter { padding: var(--space-lg) var(--space-md); }
  .slip { min-width: 0; width: 100%; }
  .envelope__window { width: 78%; left: 8%; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
}