/* Hallmark · shape: Conversational FAQ (home), Long Document (cases, AI, about) · genre: editorial · theme: Studio (deal 1/3, seed personal-portfolio-operations-lead-6a9f·3f6df01a·2026-11-13·r0) · job: hire · draw: 91443b
 * hero: Stage (portrait) · nav: edge-aligned (draw said search-led bar, swapped: a portfolio of fifteen pages needs no search) · footer: colophon block · imagery: Parker's own photographs 2, product screenshots 2 (his captures) · signature: the work index as figures on an ink band
 * axes: light/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · reveal: fade-up stagger, once · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a portfolio argues little; the questions a hiring manager would ask carry the page instead of section labels */
/* Hallmark · dismissed 23 · the accent fill is the 2px reading-progress spine on long documents, well under 1% of any viewport */
/* Hallmark · dismissed 25 · the 34ch measure is a one-sentence caption under the hours figure */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Hedvig Letters Serif"; src: url("../fonts/hedvig-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --nav-height: 72px;
}

body { color: var(--color-ink-2); }
h1, h2, h3 { font-optical-sizing: auto; color: var(--color-ink); }
h3 { letter-spacing: -0.005em; }
strong, b { font-weight: 500; color: var(--color-ink); }

/* ground */
.proof { background-color: var(--color-paper); background-image: var(--grain), radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 160px 160px, 24px 24px; }
.proof--fade { position: relative; isolation: isolate; background: none; }
.proof--fade::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-paper); background-image: var(--grain), radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 160px 160px, 24px 24px; -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) 60%, transparent); mask-image: linear-gradient(to bottom, var(--color-ink) 60%, transparent); }

/* crop marks: eight ticks off the corners */
.crop { position: relative; --l: 10px; --o: 14px; }
.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--o)); pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--color-mark), var(--color-mark)) 0 var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 100% var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 0 calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 100% calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 100% / 1px var(--l) no-repeat; }

/* nav */
.nav { position: relative; z-index: var(--z-raised); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-height); border-bottom: var(--rule-hair) solid var(--color-rule); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--color-ink-2); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--color-ink); text-decoration: none; white-space: nowrap; border-bottom: var(--rule-hair) solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav__links a:hover { border-bottom-color: var(--color-accent); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); }

/* controls */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 2px; background: var(--color-paper-hi); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 2px; border: var(--rule-hair) solid var(--color-mark); border-radius: 1px; pointer-events: none; opacity: 0.35; }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.link { font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }

/* hero: Stage, the text on seven columns and Parker's portrait on four */
.hero { min-height: calc(100svh - var(--nav-height)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.hero__text { grid-column: 1 / span 7; }
.hero h1 { max-width: 12ch; font-size: clamp(2.75rem, 5.6vw + 0.5rem, 6.5rem); line-height: 1; }
.hero .lead { margin-top: var(--space-xl); font-size: var(--text-xl); color: var(--color-ink-2); }
.hero .actions { margin-top: var(--space-xl); }
.hero__photo { grid-column: 8 / span 4; margin: 0; }
.portrait { aspect-ratio: 1000 / 1390; border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); }
.portrait img { object-position: 50% 30%; }
@media (max-width: 60rem) { .hero__text { grid-column: 1 / -1; } .hero__photo { grid-column: 1 / span 7; grid-row: 1; max-width: 18rem; } }

/* one reveal (home page only): fade and a 12px rise, staggered, once; visible without script and under reduced motion */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* progress spine on long documents: a 2px rule that fills with reading progress */
.spine { position: fixed; inset-block: 0; left: max(1rem, 2vw); width: 2px; background: var(--color-rule); z-index: var(--z-sticky); pointer-events: none; }
.spine::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform-origin: top; transform: scaleY(0); }
@media (max-width: 40rem) { .spine { display: none; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .spine::after { animation: spine-grow linear both; animation-timeline: scroll(root); }
    @keyframes spine-grow { to { transform: scaleY(1); } }
  }
}
@supports not (animation-timeline: scroll()) { .spine { display: none; } }

/* sections */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l) var(--section-gap); }
.section--tail { padding-block: var(--section-gap) var(--section-gap-l); }
.section--air { padding-block: calc(var(--section-gap) + var(--space-3xl)) var(--section-gap); }
.band { background: var(--color-paper-2); }
.ink { background: var(--color-ink); color: color-mix(in oklab, var(--color-paper) 82%, var(--color-ink)); }
.ink h2, .ink a, .ink strong { color: var(--color-paper); }
.ink :focus-visible { outline-color: var(--color-accent); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / span 7; }
.head .lead { grid-column: 8 / span 5; color: var(--color-ink-2); }
.ink .head .lead { color: inherit; }
@media (max-width: 60rem) { .head h2, .head .lead { grid-column: 1 / -1; } }

/* index of work */
.index { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.index li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-2xl); color: inherit; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.index a:hover { background: color-mix(in oklab, var(--color-paper-2) 70%, transparent); }
.index a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.index__fig { grid-column: 1 / span 4; font: 400 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.index__fig small { display: block; margin-top: var(--space-xs); font: 500 var(--text-sm)/1.35 var(--font-body); letter-spacing: 0; color: var(--color-muted); white-space: normal; }
.index h3 { grid-column: 5 / span 8; }
@media (max-width: 60rem) {
  .index a { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .index__fig, .index h3 { grid-column: 1 / -1; }
}

.ink .index { border-top-color: color-mix(in oklab, var(--color-paper) 70%, transparent); }
.ink .index li { border-bottom-color: color-mix(in oklab, var(--color-paper) 16%, transparent); }
.ink .index__fig, .ink .index h3 { color: var(--color-paper); }
.ink .index__fig small { color: color-mix(in oklab, var(--color-paper) 66%, var(--color-ink)); }
.ink .index a { position: relative; }
.ink .index a::before { content: ""; position: absolute; left: calc(-1 * var(--space-lg)); top: var(--space-2xl); bottom: var(--space-2xl); width: 2px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-short) var(--ease-out); }
.ink .index a:hover { background: color-mix(in oklab, var(--color-paper) 6%, transparent); }
.ink .index a:hover::before, .ink .index a:focus-visible::before { transform: scaleY(1); }
.ink .head h2 { color: var(--color-paper); }
@media (max-width: 60rem) { .ink .index a::before { left: calc(-1 * var(--space-sm)); } }

/* today: figure beside rows */
.today { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.today__fig { grid-column: 1 / span 5; }
.today__body { grid-column: 7 / span 6; }
.bigfig { position: relative; isolation: isolate; font: 400 clamp(5rem, 9vw + 1rem, 10rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.today__fig p:not(.bigfig) { margin-top: var(--space-lg); max-width: 34ch; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.today__body > p { margin-bottom: var(--space-xl); }
.rows { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.rows > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font-weight: 500; color: var(--color-ink); }
.rows dd { margin: 0; }
@media (max-width: 60rem) { .today__fig, .today__body { grid-column: 1 / -1; } .rows > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); } }

/* opened case */
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.case__chart { grid-column: 1 / span 5; }
.case__table { grid-column: 7 / span 6; }
.case__shot { grid-column: 1 / -1; }
@media (max-width: 60rem) { .case__chart, .case__table { grid-column: 1 / -1; } }
.cost { margin: 0; }
.cost__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 8rem; column-gap: var(--space-md); align-items: center; }
.cost__row + .cost__row { margin-top: var(--space-lg); }
.cost__label { font-size: var(--text-sm); color: var(--color-muted); }
.cost__bar { position: relative; height: 3.25rem; }
.cost__bar > span { position: absolute; inset: 0 auto 0 0; background: var(--color-ink); border-radius: 1px; }
.cost__row--after .cost__bar > span { background: var(--color-ink-2); }
.cost__val { font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost__note { margin: var(--space-lg) 0 0 calc(8.5rem + var(--space-md)); font: 400 var(--text-xl)/1.1 var(--font-display); color: var(--color-ink); }
@media (max-width: 40rem) { .cost__note { margin-left: 0; } }
.cost figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table caption { text-align: left; caption-side: bottom; padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.table th, .table td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.table thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); border-bottom-color: var(--color-ink); white-space: nowrap; }
.table tbody th { font-weight: 500; color: var(--color-ink); }
.table td.num { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.shot { margin: 0; }
.shot__frame { aspect-ratio: 4759 / 1180; border-radius: var(--radius-card); background: var(--color-paper-hi); }
.shot__frame img { outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; object-fit: contain; }
.shot figcaption { margin-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }

/* statement */
.statement { font: 400 var(--text-section)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 22ch; text-wrap: balance; }
.principles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); margin: var(--space-2xl) 0 0; padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
.principles > div { grid-column: span 5; }
.principles > div:nth-child(even) { grid-column: 7 / span 5; }
.principles dt { font-family: var(--font-display); font-size: var(--text-title); color: var(--color-ink); line-height: 1.2; }
.principles dd { margin: var(--space-sm) 0 0; max-width: 36ch; }
@media (max-width: 60rem) { .principles > div, .principles > div:nth-child(even) { grid-column: 1 / -1; } }

/* AI */
.ai { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.ai .table-wrap { grid-column: 1 / span 10; }
.ai__more { grid-column: 1 / -1; }
@media (max-width: 60rem) { .ai .table-wrap { grid-column: 1 / -1; } }

/* about */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: end; }
.about__photo { grid-column: 1 / span 5; }
.about__text { grid-column: 7 / span 6; display: grid; gap: var(--space-md); }
.photo { aspect-ratio: 4 / 5; width: 100%; margin: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); }
.photo img { object-position: 72% 60%; }
.photo + figcaption, .about__photo figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.facts { margin: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-ink); }
.facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-3xs); }
.facts dd { margin: 0; color: var(--color-ink); }
@media (max-width: 60rem) { .about__photo, .about__text { grid-column: 1 / -1; } .photo { min-height: 0; } }

/* contact close */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.contact h2 { grid-column: 1 / span 6; }
.contact__body { grid-column: 7 / span 6; display: grid; gap: var(--space-lg); }
.contact__email { font: 400 var(--text-display-s)/1.05 var(--font-display); letter-spacing: -0.02em; overflow-wrap: break-word; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; text-decoration-color: color-mix(in oklab, var(--color-paper) 40%, transparent); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.contact__email:hover { text-decoration-color: var(--color-accent); }
.contact__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.contact__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (max-width: 60rem) { .contact h2, .contact__body { grid-column: 1 / -1; } .contact__email { font-size: var(--text-2xl); } }

/* footer: colophon block */
.foot { padding-block: var(--space-3xl) var(--space-2xl); }
.foot__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-xl); }
.foot__mark { grid-column: 1 / span 4; font: 400 var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); }
.foot__text { grid-column: 6 / span 7; max-width: 60ch; font-size: var(--text-sm); color: var(--color-muted); }
.foot__text a { color: var(--color-ink); }
@media (max-width: 60rem) { .foot__mark, .foot__text { grid-column: 1 / -1; } }

/* long document: cases and the AI page */
.doc-head { padding-block: var(--space-3xl) var(--space-2xl); }
.doc-head .container > * { max-width: 52rem; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-xl); }
.doc-head h1 { font-size: var(--text-display-s); max-width: 24ch; line-height: 1.04; }
.doc-head .lead { margin-top: var(--space-lg); max-width: 60ch !important; }
.summary { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); max-width: none !important; }
.summary > div { grid-column: span 3; padding-block: var(--space-sm) var(--space-lg); padding-right: var(--space-lg); }
.summary > div + div { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
.summary dt { font-size: var(--text-sm); color: var(--color-muted); }
.summary dd { margin: var(--space-xs) 0 0; color: var(--color-ink); }
.summary .fig dd { font: 400 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) { .summary > div { grid-column: 1 / -1; } .summary > div + div { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule); } }
.skills { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 70ch !important; }
.skills span { color: var(--color-muted); margin-right: var(--space-xs); }
.inline-photo { margin-inline: 0; max-width: 30rem; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: visible; }
.inline-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; border-radius: var(--radius-card); }
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose > :not(.table-wrap):not(figure) { max-width: 58ch; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-2xl); line-height: 1.15; margin-top: var(--space-2xl); }
.prose h3 { margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-muted); }
.prose .table-wrap, .prose figure { margin-block: var(--space-xl); }
.wide { max-width: 64rem; }
.prose figure.shot { margin-inline: 0; }
.prose .note { font-size: var(--text-sm); color: var(--color-muted); }
.doc { padding-bottom: var(--section-gap-s); }
.next { padding-block: var(--space-2xl) var(--section-gap-s); }
.next__inner { border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-lg); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); }
.next__inner p { grid-column: 1 / span 3; font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-xs); }
.next__inner a { grid-column: 4 / span 8; font: 400 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; text-wrap: balance; }
.next__inner a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
@media (max-width: 60rem) { .next__inner p, .next__inner a { grid-column: 1 / -1; } .next__inner a { font-size: var(--text-xl); } }

@media (max-width: 40rem) { .nav__links { gap: var(--space-md); } .nav__links .hide-s { display: none; } .hero { min-height: 0; padding-block: var(--space-3xl); } }