/* Approved light portfolio: shared Onest 400 type, pink terminal points.
   Contact is primary. The hero and reel own separate rows in document flow. */
:root {
  --type-section: clamp(40px, 4.5vw, 64px);
  --type-cta: clamp(40px, 4.5vw, 64px);
  --type-subsection: clamp(26px, 2.2vw, 32px);
  --type-body: 16px;
  --type-support: 14px;
  --type-meta: 13px;
  --body-leading: 1.6;
  --space-section: clamp(56px, 6vw, 88px);
  --surface-base: #f4f5f9;
  --surface-grid: #7b738b26;
  --surface-grid-step: 56px;
  --radius-control: 12px;
  --control-height: 48px;
  --control-height-header: 56px;
  --control-height-hero: var(--control-height);
  --control-height-prominent: var(--control-height);
  --control-radius-prominent: var(--radius-control);
  --text-action-size: 18px;
  --text-action-height: 52px;
  --text-accent: #ad2e75;
  --heading-accent: #e44399;
  --link-rule: #a4a2af;
  --type-skill: 14px;
  --skills-surface: linear-gradient(135deg, #efe4eeed, #eee6f0e6);
  --skill-surface: linear-gradient(145deg, #fffdfef0, #fcf8fdb8);
  --skill-edge: #ffffffe0;
}

/* One section-heading scale; project names and micro-labels remain separate. */
body :is(.section-opening h2, .about-section h2, .work-interlude h2) {
  margin: 0; font-size: var(--type-section); font-weight: 400;
  line-height: 1.08; letter-spacing: -.035em;
}
body { font-size: var(--type-body); line-height: var(--body-leading); }
body :is(.section-opening > p, .about-intro > p, .practice-item p, .intro-bottom p, .closing p, .rail-lede, .story details p, .contact-copy p, .ai-series-head p, .deck-description, .deck-note, .vpn-section > p, .vpn-scope p, .vpn-test-plan) {
  font-size: var(--type-body); line-height: var(--body-leading); font-weight: 400; color: #50515d;
}
body :is(.case-facts dt, .case-facts dd, .gallery-figure figcaption, .logo-item > p, .logo-variants figcaption, .ai-media figcaption, .graphic-dialog p, .ai-lightbox p, .vpn-screen figcaption, .contact-channel > p, .site-footer, .social-list small) {
  font-size: var(--type-support); line-height: 1.5; font-weight: 400; color: #595662;
}
body :is(.case-pills li, .capability-group li, .tile-tag, .case-reveal .case-reveal-pills > span, .ai-tags span) {
  min-height: 28px; padding: 5px 10px; font-size: var(--type-meta); line-height: 1.25; font-weight: 400;
}
body :is(.capability-group h3, .about-portrait-caption, .result-count) { font-size: var(--type-meta); color: #645565; line-height: 1.5; }
body :is(.ai-count, .deck-heading > span, .deck-controls, .collection-intro, .vpn-priority, .hero-keyboard-tooltip) { font-size: var(--type-meta); color: #62616e; line-height: 1.5; }
body .vpn-research-table { font-size: var(--type-support); line-height: var(--body-leading); }
body .vpn-research-table :is(th, td) { font-size: inherit; }
body .vpn-research-table thead th, body .vpn-research-table td::before { font-size: var(--type-meta); color: #62616e; }
body :is(.graphic-dialog-close, .ai-lightbox-close) { font-size: var(--type-support); }
body :is(.gallery-group, .vpn-section) { margin-top: 48px; }
body .deck-section { margin-bottom: 48px; }
body :is(.logo-variants figcaption, .vpn-screen figcaption) { margin-top: 12px; }
body :is(.story summary, .ai-jump a, .deck-jump a, .back-link) { font-size: var(--type-support); font-weight: 500; }
body .story summary { min-height: 48px; }
body .case-facts { gap: 12px; padding: 20px 0; }
body .case-facts div { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
body .practice-item h3 { font-size: var(--type-subsection); font-weight: 400; line-height: 1.2; }
::selection { background: #f3bfdd; color: #17181d; }
html { scrollbar-color: #908697 #edf0f5; }
body :focus-visible { outline: 2px solid #982762; outline-offset: 4px; }
.accent-dot { color: var(--heading-accent); font-weight: inherit; white-space: nowrap; }
.section-opening { grid-template-columns: 1fr; gap: 20px; }
.section-opening > p { max-width: 52ch; margin: 0; }
.social-section .section-opening { align-items: start; }
.social-section .section-opening > p { max-width: 52ch; align-self: start; }
body :is(.about-section h2 em, .contact-copy h2 em) { color: var(--text-accent); font-style: normal; }
/* The portrait introduces both aligned columns, rather than offsetting one. */
.about-contents {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start; column-gap: clamp(28px, 3.2vw, 48px); row-gap: 28px;
  padding: var(--space-section) 0;
}
.about-contents > .about-portrait-line { grid-column: 1 / -1; margin: 0; }
.about-intro { min-width: 0; padding-top: 0; }
body .about-section h2 { max-width: none; }
.about-intro > p { max-width: none; margin-top: 24px; font-size: var(--type-body); line-height: var(--body-leading); }
.about-contents .practice-list { align-self: start; min-width: 0; padding-top: 0; margin: 0; }
.practice-item p { max-width: none; font-size: var(--type-body); line-height: var(--body-leading); }
/* The same skills material is used at every size. Pills are content, not buttons. */
body .about-intro > .about-capabilities {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin-top: 24px; padding: 24px; border: 1px solid #ffffffeb; border-radius: 16px;
  background: var(--skills-surface); box-shadow: inset 0 1px 0 #ffffffb3;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body .about-capabilities .capability-group h3 {
  margin: 0 0 12px; color: var(--text-accent); font-size: var(--type-meta);
  font-weight: 500; letter-spacing: .035em;
}
.about-capabilities .capability-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
body .about-capabilities .capability-group li {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; padding: 7px 12px;
  border: 1px solid var(--skill-edge); border-radius: 999px; background: var(--skill-surface);
  box-shadow: inset 0 1px 0 #ffffff80; color: #514b56;
  font-size: var(--type-skill); line-height: 1.3; white-space: normal; text-wrap: pretty;
}
.about-capabilities .capability-group + .capability-group { padding-top: 24px; border-top: 1px solid #ded7e3; }
body .about-capabilities .capability-group + .capability-group h3 { color: #595662; }
body .about-capabilities .capability-group + .capability-group li { background: var(--skill-surface); border-color: var(--skill-edge); color: #514b5b; }
.work-interlude { gap: 40px; padding: var(--space-section) 0; }
.work-interlude h2 { max-width: 25ch; }
.library-intro h1 { font-size: clamp(48px, 6vw, 88px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.rail-inner h1 { font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
body :is(.gallery-group h2, .ai-series-head h2, .deck-heading h2, .vpn-section h2) {
  font-size: var(--type-subsection); font-weight: 400; line-height: 1.12; letter-spacing: -.035em;
}
.logo-item h2 { font-size: 22px; font-weight: 400; line-height: 1.2; }
/* CTA scenes are the intentional display-scale exception; no dot after "?". */
body .contact-copy h2 { font-size: clamp(52px, 5.6vw, 80px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
body :is(.closing h2, .footer-inner #footer-title) { margin: 0; font-size: var(--type-cta); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.ai-jump a { min-height: 44px; font-size: 13px; }
.rail-navigation .back-link { min-height: 44px; }
/* Mobile narratives stay in normal page flow; desktop pinning is below. */
body .case-rail { max-height: none; overflow: visible; }
body .case-page .rail-inner { max-height: none; overflow: visible; padding-right: 0; }

/* One tactile contact family. Header and hero have their own compact roles. */
body :is(.site-header, .library-header) :is(.identity, .brand, .nav-glass, .header-links, .masthead-links, .language-switch, .languages, .locale) {
  height: var(--control-height-header); min-height: var(--control-height-header);
}
body :is(.nav-glass, .header-links, .masthead-links) { padding-block: 5px; }
body :is(.language-switch, .languages, .locale) { padding-block: 6px; }
body :is(.header-contact, .contact-link) {
  height: var(--control-height-header); min-height: var(--control-height-header); min-width: 44px; padding: 0 16px; gap: 8px;
  border-radius: 13px; font-size: 13px; line-height: 1.2;
}
body :is(.header-contact, .contact-link) .icon { width: 16px; height: 16px; }
body :is(.language-switch button, .languages button, .locale a) { min-width: 44px; min-height: 44px; }
body .hero-keyboard-controls button { min-width: 44px; min-height: 44px; font-size: var(--type-meta); }
/* Labels and icons retain their own space; icons never shrink into the copy. */
body :is(.header-contact, .contact-link, .hero-contact, .about-contact, .contact-telegram, .closing > a, .footer-contact) > span { flex: none; }
body :is(.hero-contact, .about-contact.button-primary) {
  min-height: var(--control-height-hero); padding: 0 18px; gap: 10px;
  border-radius: var(--radius-control); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
body :is(.hero-contact, .about-contact.button-primary) .icon { width: 18px; height: 18px; }
body .about-contact.button-primary { justify-content: center; margin-top: 24px; border: 1px solid #34333e; color: #fff; }
body .about-contact.button-primary:is(:hover, :focus-visible) { color: #fff; }
body :is(.contact-channel .contact-telegram, .closing > a, .case-footer .footer-contact) {
  min-height: var(--control-height-prominent); min-width: 0; padding: 0 18px; gap: 10px;
  border-radius: var(--control-radius-prominent); font-size: 14px; font-weight: 500;
  line-height: 1.2; white-space: nowrap;
}
body :is(.contact-channel .contact-telegram, .closing > a, .case-footer .footer-contact) .icon { width: 18px; height: 18px; }
body .closing > a > span:not(.icon) { font: inherit; transform: none; }
body .closing > a:is(:hover, :focus-visible) > span:not(.icon) { transform: none; }
body :is(.hero-contact, .about-contact.button-primary, .contact-channel .contact-telegram, .closing > a, .case-footer .footer-contact) { box-shadow: inset 0 1px 0 #ffffff38, 0 4px 8px -4px #27233130; }
.button-secondary { min-height: var(--control-height); color: var(--control-ink); font-size: 14px; }
.project-actions a { min-height: var(--control-height); padding: 0 16px; font-size: 14px; border-radius: var(--radius-control); gap: 10px; }
.project-actions { flex-wrap: wrap; }
body :is(.filter-controls button, .ai-filters button) { min-width: 44px; min-height: 44px; font-size: 13px; border-radius: 11px; }

/* Large text actions: one lower rule, shared typography and touch target. */
body :is(.hero-action, .all-work, .about-contact:not(.button-primary), .work-interlude a, .intro-bottom a, .practice-item a, .vpn-source-link, .deck-source, .gallery-figure figcaption a, .site-footer a) {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 0; min-height: var(--text-action-height); padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--link-rule); border-radius: 0;
  background: none; box-shadow: none; color: var(--control-ink);
  font-size: var(--text-action-size); font-weight: 400; line-height: 1.3;
  text-decoration: none; white-space: normal; transition: color .18s ease, border-color .18s ease;
}
body :is(.hero-action, .all-work, .about-contact:not(.button-primary), .work-interlude a, .intro-bottom a, .practice-item a, .vpn-source-link, .deck-source, .gallery-figure figcaption a, .site-footer a):is(:hover, :focus-visible) {
  background: none; box-shadow: none; color: var(--text-accent); border-color: currentColor; transform: none;
}
body .hero-action::before, body .hero-action::after { content: none; }
body :is(.hero-action, .all-work, .about-contact:not(.button-primary), .work-interlude a, .intro-bottom a, .practice-item a, .vpn-source-link, .deck-source, .gallery-figure figcaption a, .site-footer a) .icon { flex: none; width: 20px; height: 20px; }
body .all-work { display: flex; width: min(440px, 100%); margin: 80px 0 0 auto; }
.work-interlude a { flex: none; min-width: 240px; }
.practice-item a { margin-top: 6px; color: var(--text-accent); }
.gallery-figure figcaption { gap: 16px; flex-wrap: wrap; }
.case-footer .footer-actions { gap: 20px; }
body .case-footer .footer-work {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--control-height); padding: 8px 0; border: 0;
  border-bottom: 1px solid var(--link-rule); border-radius: 0;
  background: none; box-shadow: none; font-size: 16px; font-weight: 400;
}
body .case-footer .footer-work .icon { flex: none; width: 20px; height: 20px; }
body .case-footer .footer-work:is(:hover, :focus-visible) { background: none; color: var(--text-accent); border-color: currentColor; }
.deck-jump a, .graphic-dialog-close { min-height: 44px; }
.deck-pagination { flex-shrink: 0; }
.deck-pagination > span { min-width: 48px; text-align: center; white-space: nowrap; }
.deck-controls > span { min-width: 0; }
/* Selection is a surface state; keyboard focus is separate and deliberately fine. */
body .deck-thumbs button { border: 0; padding: 3px; background: #e9e8ee; }
body .deck-thumbs button[aria-pressed=true] { border: 0; background: #eadce7; opacity: 1; }
body :is(.deck-art, .deck-thumbs button):focus-visible { outline: 1px solid #982762; outline-offset: 2px; }
body .site-footer a { font-size: var(--type-support); min-height: 44px; }
.motion-setting { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: #595662; font: inherit; font-size: var(--type-support); cursor: pointer; }
.motion-setting:is(:hover, :focus-visible) { color: var(--text-accent); }
.motion-setting[hidden] { display: none; }

/* No fixed height or absolute-bottom reel can compress the action area. */
body:not(.hero-centered) .hero { height: auto; min-height: 0; max-height: none; padding-bottom: 24px; }
.hero-layout {
  position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  grid-template-areas: 'heading keyboard' 'intro keyboard';
  align-items: start; gap: 24px 32px; width: 88%; max-width: 1600px; margin: auto; padding-top: 112px;
}
.hero-heading { grid-area: heading; align-self: end; position: relative; z-index: 3; min-width: 0; }
.hero-intro { grid-area: intro; position: relative; z-index: 3; min-width: 0; }
body:not(.hero-centered) .hero-context { position: static; margin: 16px 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: .025em; text-transform: none; }
body:not(.hero-centered) .poster-type { position: static; width: 100%; height: auto; }
body:not(.hero-centered) .poster-type h1 {
  margin: 0; font-size: clamp(72px, 6.7vw, 96px); font-weight: 400; line-height: 1.04; letter-spacing: -.04em;
  color: #17181d; padding-bottom: .06em;
}
body:not(.hero-centered) :is(.type-line--one, .type-line--two) { position: static; display: block; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; white-space: nowrap; }
@supports (background-clip: text) {
  body:not(.hero-centered) .poster-type h1 { background: linear-gradient(155deg, #17181d 25%, #303138 70%, #5c5d66); background-clip: text; -webkit-background-clip: text; color: transparent; }
}
body:not(.hero-centered) .hero-copy { position: static; width: 100%; margin-top: 0; }
body:not(.hero-centered) .hero-copy p { max-width: 44ch; font-size: var(--type-body); font-weight: 400; line-height: var(--body-leading); letter-spacing: -.012em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.hero-actions > a { flex: none; }
body:not(.hero-centered) .hero-action { top: auto; right: auto; bottom: auto; left: auto; min-height: var(--control-height-hero); gap: 24px; font-size: 16px; padding: 0; white-space: nowrap; }
.hero-keyboard-slot { grid-area: keyboard; align-self: center; position: relative; top: auto; right: auto; left: auto; width: 100%; height: clamp(380px, 32vw, 500px); margin: 0; z-index: 2; }
.hero-keyboard-slot canvas { transform: scale(1.18); }
.hero-keyboard-slot::before { content: none; }
/* Lighting belongs to the object stage, not to the height of the whole hero. */
.hero-print { background: linear-gradient(155deg, #fafafd, var(--surface-base) 75%, #eef0f5); }
.hero-print::before { inset: 0; background-image: linear-gradient(var(--surface-grid) 1px, transparent 1px), linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px); background-size: var(--surface-grid-step) var(--surface-grid-step); opacity: .7; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 68%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 68%, transparent); }
.hero-keyboard-slot::after { content: ''; position: absolute; z-index: -1; inset: -5% -12%; pointer-events: none; background: radial-gradient(ellipse at 55% 48%, #e5a8ce9c, #f0d8e97a 40%, transparent 72%); mix-blend-mode: multiply; }
body :is(.about-section, .contact-section, .library-intro, .closing, .case-footer) { background: var(--surface-base); }
.about-section::before, .contact-print { background-image: linear-gradient(var(--surface-grid) 1px, transparent 1px), linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px); background-size: var(--surface-grid-step) var(--surface-grid-step); opacity: .55; }
.about-section::before { opacity: .36; }
.intro-grid { background-image: linear-gradient(var(--surface-grid) 1px, transparent 1px), linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px); background-size: var(--surface-grid-step) var(--surface-grid-step); opacity: .55; }
body:not(.hero-centered) .reel-scene { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: 190px; margin-top: 16px; overflow: hidden; }
.hero-reel { inset: 10px 0; }
.reel-horizon { bottom: 5%; }

/* Typographic protection is shared; the new compositions are desktop-first. */
body :is(h1, h2, h3) { text-wrap: balance; }
body :is(.section-opening > p, .about-intro > p, .practice-item p, .hero-copy p, .rail-lede, .story details p, .closing p, .footer-note) { text-wrap: pretty; }
body :is(.case-footer-art, .closing-mark) img {
  display: block; width: 100%; height: auto; max-width: none; max-height: none;
  object-fit: contain; transform: rotate(-8deg);
}

@media (min-width: 761px) {
  body .case-page .case-rail {
    position: sticky; top: 106px; align-self: start; display: flex; flex-direction: column;
    min-height: 0; max-height: calc(100dvh - 122px); overflow: visible;
  }
  body .case-page .rail-navigation { flex: none; }
  body .case-page .rail-inner {
    position: static; flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; padding: 6px 8px 8px 6px;
    scrollbar-gutter: stable; overscroll-behavior-y: auto;
  }
  /* Copy/actions stay together; the oversized chrome mark stays in the background. */
  body :is(.closing, .case-footer) { --cta-mark-size: clamp(660px, 56vw, 900px); overflow: clip; }
  body .closing {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0; min-height: 448px;
    padding: 64px max(6%, calc((100% - 1450px) / 2));
    background: linear-gradient(110deg, #f1f2f7 45%, #f3e7f0 100%);
  }
  body .closing > div:not(.closing-mark) { position: relative; z-index: 1; width: 56%; }
  body .closing h2 { max-width: 15ch; }
  body .closing p { max-width: 46ch; margin-top: 20px; }
  body .closing > a { z-index: 1; align-self: flex-start; margin-top: 24px; }
  body .case-footer {
    position: relative; isolation: isolate; overflow: clip; padding: 64px 6%; border-top: 0;
    background: linear-gradient(110deg, #f1f2f7 45%, #f3e7f0 100%);
  }
  body .case-footer .footer-inner {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; min-height: 320px; padding-right: 44%; gap: 0; max-width: 1450px;
  }
  body .case-footer #footer-title { max-width: 16ch; }
  body .case-footer .footer-note {
    display: block; margin-top: 20px; max-width: 46ch;
    font-size: var(--type-body); line-height: var(--body-leading); color: #50515d;
  }
  body .case-footer .footer-actions { margin-top: 24px; justify-content: start; gap: 20px; flex-wrap: wrap; }
  body :is(.closing .closing-mark, .case-footer-art) {
    position: absolute; z-index: 0; display: flex; align-items: center; justify-content: center;
    /* Account for the asset's transparent top: the glyph stays whole above,
       while the lower strokes emerge from beyond the scene's bottom edge. */
    top: auto; right: -4%; bottom: calc(100% - var(--cta-mark-size) * .85 - 56px); left: auto; height: auto; aspect-ratio: 1;
    width: var(--cta-mark-size); opacity: .42; transform: none; pointer-events: none;
  }
}

@media (min-width: 901px) {
  :root { --type-section: clamp(52px, 5.2vw, 80px); }
  .work-section > .section-opening {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: end; gap: 48px;
  }
  .work-section > .section-opening > p { justify-self: end; width: min(38ch, 100%); max-width: 38ch; margin: 0; }
  .hero-layout { gap: 12px 40px; padding-top: 108px; }
  .hero-heading { display: flex; flex-direction: column; align-self: end; }
  body:not(.hero-centered) .hero-context {
    order: -1; align-self: flex-start; margin: 0 0 12px;
    padding: 6px 12px; border-radius: 999px; background: #f1dfeaff;
    color: var(--text-accent); font-size: var(--type-meta); line-height: 1.3;
    font-weight: 500; letter-spacing: 0;
  }
  body:not(.hero-centered) .poster-type h1 { font-size: clamp(84px, 7.8vw, 124px); }
  .hero-keyboard-slot { height: clamp(420px, 35vw, 620px); }
  .hero-keyboard-slot canvas { transform: scale(1.24); }
  .hero-actions { margin-top: 36px; }
  body:not(.hero-centered) .reel-scene { margin-top: 28px; }
  /* Introduction + working vocabulary above, three practices together below. */
  .about-section { --type-section: clamp(40px, 4.5vw, 64px); }
  .about-section::before {
    content: ''; inset: 0; width: 100%; height: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .about-contents {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: 'portrait skills' 'title skills' 'bio skills' 'contact skills' 'practice practice';
    gap: 20px 56px;
  }
  .about-contents > .about-portrait-line { grid-area: portrait; }
  .about-intro { display: contents; }
  .about-intro > h2 { grid-area: title; }
  .about-intro > p { grid-area: bio; max-width: 57ch; margin: 0; }
  body .about-intro > .about-contact { grid-area: contact; justify-self: start; margin: 0; gap: 12px; }
  .about-intro > .about-capabilities {
    grid-area: skills; align-self: center;
  }
  body .about-intro > .about-capabilities { margin: 0; }
  .about-contents .practice-list {
    grid-area: practice; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px; margin-top: 24px; padding: 0;
  }
  .about-contents .practice-item {
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; padding: 0; border: 0;
  }
  body .practice-item h3 { font-size: 28px; line-height: 1.2; text-wrap: initial; }
  .practice-item p { margin: 16px 0 20px; }
  body .practice-item a { margin-top: auto; font-size: 18px; }
}

@media (max-width: 1200px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .hero-actions { gap: 16px; }
  body:not(.hero-centered) .hero-action { gap: 12px; font-size: 16px; }
  body:not(.hero-centered) .poster-type h1 { font-size: clamp(62px, 6.7vw, 96px); }
  .hero-keyboard-slot { height: clamp(340px, 34vw, 440px); }
  .work-interlude { align-items: start; flex-direction: column; gap: 24px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-layout { row-gap: 12px; }
  body:not(.hero-centered) .poster-type h1 { font-size: clamp(72px, 7.7vw, 94px); }
  .hero-keyboard-slot { height: clamp(380px, 38vw, 460px); }
  .about-contents { column-gap: 40px; }
  .about-contents .practice-list { gap: 28px; }
}
/* A narrow laptop is still a split hero; stack only when both columns stop fitting. */
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; grid-template-areas: 'heading' 'intro' 'keyboard'; gap: 16px; padding-top: 96px; }
  .hero-heading { display: flex; flex-direction: column; align-self: start; }
  body:not(.hero-centered) .hero-context {
    order: -1; align-self: flex-start; margin: 0 0 12px; padding: 6px 12px;
    border-radius: 999px; background: #f1dfea; color: var(--text-accent);
    font-size: var(--type-meta); font-weight: 500; line-height: 1.3; letter-spacing: 0;
  }
  .hero-intro { max-width: 720px; }
  body:not(.hero-centered) .poster-type h1 { font-size: clamp(56px, 8vw, 72px); }
  .hero-keyboard-slot { width: min(100%, 660px); height: 360px; margin: 0 auto; }
  .hero-keyboard-slot canvas { transform: scale(1.18); }
  body:not(.hero-centered) .reel-scene { margin-top: 16px; }
  /* An explicit tablet/phone flow avoids the legacy split text column. */
  .about-contents { display: block; }
  .about-contents > .about-portrait-line { margin-bottom: 24px; }
  .about-section::before { inset: 0; width: 100%; height: 100%; }
  body .about-intro > .about-contact { margin-top: 24px; }
  .about-contents .practice-list { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; padding: 0; }
  .about-contents .practice-item { padding: 0; border: 0; }
  .practice-item p { margin: 12px 0 16px; }
  body .practice-item a { margin-top: 0; }
  .section-opening { display: grid; grid-template-columns: 1fr; gap: 20px; }
  body :is(.closing, .case-footer) {
    --cta-mark-size: min(620px, 120vw);
    position: relative; isolation: isolate; overflow: clip; display: block;
    min-height: 0; padding: 40px 20px clamp(240px, calc(var(--cta-mark-size) * .82 - 88px), 420px); border-top: 0;
    background: linear-gradient(110deg, #f1f2f7 45%, #f3e7f0 100%);
  }
  body .closing > div:not(.closing-mark) { position: relative; z-index: 1; width: 100%; }
  body .closing h2, body .case-footer #footer-title { max-width: 16ch; }
  body .closing p { max-width: 46ch; margin-top: 16px; }
  body .closing > a { position: relative; z-index: 1; width: 100%; margin-top: 24px; justify-content: center; }
  body .case-footer .footer-inner {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch;
    justify-content: start; gap: 0; width: 100%; min-height: 0; padding: 0; margin: 0;
  }
  body .case-footer .footer-note {
    display: block; max-width: 46ch; margin-top: 16px;
    font-size: var(--type-body); line-height: var(--body-leading); color: #50515d;
  }
  body .case-footer .footer-actions { display: flex; flex-direction: column; width: 100%; gap: 8px; margin-top: 24px; }
  body .case-footer .footer-actions > a { width: 100%; }
  body .case-footer .footer-contact { justify-content: center; }
  body :is(.closing .closing-mark, .case-footer-art) {
    position: absolute; z-index: 0; display: flex; align-items: center; justify-content: center;
    top: auto; right: -18%; bottom: -112px; left: auto; margin: 0;
    width: var(--cta-mark-size); height: auto; aspect-ratio: 1;
    opacity: .42; transform: none; pointer-events: none;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  body .about-intro > .about-capabilities { grid-template-columns: 1fr 1fr; gap: 24px; }
  .about-capabilities .capability-group + .capability-group { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #ded7e3; }
  body :is(.closing, .case-footer) { --cta-mark-size: 70vw; min-height: 440px; padding: 48px 6%; }
  body .closing > div:not(.closing-mark) { width: 62%; }
  body .closing > a { width: 62%; }
  body .case-footer .footer-inner { width: 62%; }
  body :is(.closing .closing-mark, .case-footer-art) {
    top: auto; right: -18%; bottom: calc(100% - var(--cta-mark-size) * .85 - 56px); left: auto; margin: 0;
    width: var(--cta-mark-size); height: auto; aspect-ratio: 1; transform: none;
  }
}
@media (max-width: 760px) {
  :root { --type-section: clamp(34px, 8vw, 48px); --type-subsection: 26px; --text-action-size: 16px; --text-action-height: 48px; --surface-grid-step: 40px; --control-height-header: 44px; }
  .hero-layout { padding-top: 88px; width: calc(100% - 40px); gap: 12px; }
  body:not(.hero-centered) .poster-type h1 { font-size: clamp(40px, 10.8vw, 64px); }
  body:not(.hero-centered) .hero-copy { margin-top: 0; }
  body:not(.hero-centered) .hero-copy p { font-size: 16px; max-width: 39ch; }
  .hero-actions { margin-top: 24px; gap: 8px; flex-wrap: wrap; }
  body :is(.contact-channel .contact-telegram, .closing > a, .case-footer .footer-contact) { padding: 0 18px; font-size: 14px; gap: 10px; }
  body .hero-contact { padding: 0 18px; gap: 10px; border-radius: var(--radius-control); }
  body:not(.hero-centered) .hero-action { min-height: var(--control-height-hero); font-size: 16px; }
  /* Mobile navigation is a disclosure, not tiny desktop links squeezed inline. */
  body :is(.site-header, .library-header) { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; min-height: 48px; }
  body :is(.header-right, .header-actions, .masthead-actions) { gap: 8px; }
  body :is(.language-switch, .languages, .locale) { order: 1; padding: 0 2px; gap: 0; }
  body :is(.language-switch button, .languages button, .locale a) { min-width: 44px; min-height: 44px; font-size: 12px; }
  body :is(.site-header .header-contact, .site-header .contact-link, .library-header .contact-link) {
    order: 2; display: inline-flex; width: 44px; min-width: 44px; height: 44px; padding: 0; gap: 0;
  }
  body :is(.site-header, .library-header) .menu-toggle {
    order: 3; display: inline-flex !important; align-items: center; justify-content: center;
    flex-direction: row; min-width: 64px; width: auto; height: 44px; margin: 0; padding: 0 12px;
    border: 1px solid #ffffffb3; border-radius: 12px; color: var(--control-ink);
    background: #f8f8fce6; font-size: 13px; font-weight: 500; cursor: pointer;
  }
  body :is(.site-header, .library-header) .menu-toggle > span { width: auto; height: auto; background: none; border-radius: 0; }
  body :is(.site-header, .library-header) .menu-toggle[aria-expanded=true] { color: var(--text-accent); background: #f3e7f0; }
  body :is(.site-header .nav-glass, .library-header .header-links, .site-header .masthead-links) {
    position: absolute; top: calc(100% + 8px); right: 0; left: auto;
    display: none !important; flex-direction: column; align-items: stretch; gap: 4px;
    width: min(248px, 100%); min-width: 0; height: auto; padding: 8px; border-radius: 16px;
    background: #f8f8fcf5; box-shadow: 0 16px 32px -16px #433c5655;
  }
  body :is(.site-header .nav-glass, .library-header .header-links, .site-header .masthead-links).is-open { display: flex !important; }
  body :is(.nav-glass, .header-links, .masthead-links) > a { display: flex !important; justify-content: flex-start; min-height: 48px; padding: 0 16px; font-size: 16px; }
  .about-contents { display: block; padding: var(--space-section) 0; }
  body :is(.about-contents, .work-section, .social-section, .intro-content, .library-section) { width: calc(100% - 40px); }
  .about-intro > p { font-size: 16px; }
  .practice-item p { font-size: var(--type-body); }
  .about-contents > .about-portrait-line { margin-bottom: 24px; }
  .about-contents .practice-list { margin-top: 40px; }
  body .about-intro > .about-capabilities { padding: 20px; }
  .hero-keyboard-slot { width: 100%; height: clamp(240px, 72vw, 360px); margin: 4px 0 0; }
  .hero-keyboard-slot canvas { transform: scale(1.3); }
  .hero-keyboard-slot::after { inset: -8% -5%; }
  body:not(.hero-centered) .reel-scene { height: 140px; margin-top: 24px; }
  .reel-item--work { width: 150px; height: 112px; }
  .reel-item--object { width: 112px; height: 112px; }
  .section-opening { display: grid; gap: 20px; margin-bottom: 32px; }
  .social-section .section-opening { margin-bottom: 32px; }
  .work-section .work-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .work-section .work-grid .case-card { grid-column: auto; margin: 0; }
  /* Tags must remain available on narrow screens, including fine-pointer laptops. */
  body :is(.case-reveal-pills, .tile-tags) { max-height: 80px; opacity: 1; margin-top: 8px; transform: none; }
  .work-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
  .work-interlude { padding: 16px 0; }
  .work-interlude a { display: flex; margin-top: 24px; width: 100%; }
  body .all-work { margin-top: 32px; }
  .work-interlude a { min-width: min(240px, 100%); }
  body .contact-copy h2 { font-size: clamp(40px, 9.6vw, 64px); margin-top: 0; }
  body :is(.closing h2, .footer-inner #footer-title) { font-size: var(--type-section); }
  .contact-copy p { margin-top: 20px; }
  .contact-channel { padding: 20px 0 24px; }
  body .contact-channel .contact-telegram { width: 100%; justify-content: center; }
  .intro-content { padding: 96px 0 40px; }
  .intro-bottom { margin-top: 20px; }
  .case-page { width: calc(100% - 40px); padding-top: 88px; }
  .rail-navigation { padding-bottom: 16px; }
  body .rail-lede { margin-top: 16px; }
  body .project-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  body .project-actions a { width: 100%; justify-content: space-between; }
  body :is(.gallery-figure figcaption a, .vpn-source-link, .deck-source, .intro-bottom a, .all-work, .about-contact, .practice-item a) { width: 100%; }
  body .gallery-figure figcaption { font-size: var(--type-support); }
  .gallery-figure { margin-bottom: 40px; }
  .hero-print::before { opacity: .5; }
  .footer-inner #footer-title { max-width: 20ch; }
  body .contact-section { padding: clamp(280px, 84vw, 378px) 20px 28px; }
  body .contact-art { width: min(120vw, 500px); top: -36px; }
  body :is(.closing, .site-footer) { padding-inline: 20px; }
  .site-footer { flex-wrap: wrap; gap: 12px 20px; }
  .site-footer > span { flex-basis: 100%; }
}
@media (max-width: 600px) {
  body .about-intro > .about-capabilities { gap: 16px; padding: 16px; }
  body .about-capabilities .capability-group h3 { margin-bottom: 8px; }
  .about-capabilities .capability-group ul { gap: 6px; }
  body .about-capabilities .capability-group li { min-height: 30px; padding: 6px 10px; font-size: 13px; }
  .about-capabilities .capability-group + .capability-group { padding-top: 16px; }
  body .practice-item h3 { font-size: 22px; line-height: 1.25; }
  .about-contents .practice-list { gap: 28px; margin-top: 32px; }
  .practice-item p { margin: 10px 0 12px; }
}
@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-actions .hero-contact { width: 100%; justify-content: center; }
  .hero-actions .hero-action { align-self: stretch; width: 100%; min-width: 0; justify-content: space-between; }
  .library-intro h1 { font-size: clamp(40px, 10.5vw, 54px); }
  .closing > a { width: 100%; }
  .contact-channel .contact-telegram { width: 100%; justify-content: center; }
  .case-footer .footer-actions > a { width: 100%; }
}
@media (forced-colors: active) {
  body:not(.hero-centered) .poster-type h1 { background: none; color: CanvasText; }
  .accent-dot { color: CanvasText; }
}
@media (prefers-reduced-transparency: reduce) {
  body .about-intro > .about-capabilities { background: #eee5ee; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 370px) {
  body .header-contact { width: 44px; min-width: 44px; padding: 0; }
}