/* Independent v3 page. No imports or selectors from the existing portfolio. */
:root {
  font-family: 'DM Sans', sans-serif;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color-scheme: light dark;
  --v3-page-background: #f5f5f7;
  --v3-text: #000;
  --v3-ink: #232522;
  --v3-muted: #66686d;
  --v3-score-ink: #0b0b0c;
  --v3-glass-solid: #ffffffd9;
  --v3-focus: #232522;
  --v3-card-surface: rgb(255 255 255 / .78);
  --v3-card-solid: #fff;
  --v3-card-rim: #ffffffb3;
  --v3-light-glass-surface: rgb(255 255 255 / .46);
  --v3-light-glass-sheen: linear-gradient(135deg, #ffffff55, #ffffff08 54%, #ffffff30);
  --v3-light-glass-highlight: linear-gradient(115deg, #ffffff35, transparent 48%, #ffffff12);
  --v3-light-glass-edge: inset 0 1px 0 #fffffff0, inset 0 -1px 0 #3737450c, inset 1px 0 0 #ffffff80, inset -1px 0 0 #ffffff55;
  --v3-glass-surface: var(--v3-light-glass-surface);
  --v3-glass-sheen: var(--v3-light-glass-sheen);
  --v3-glass-highlight: var(--v3-light-glass-highlight);
  --v3-glass-edge: var(--v3-light-glass-edge);
  --v3-control-surface: #ffffff9e;
  --v3-control-hover: #fff;
  --v3-control-rim: #ffffffe0;
  --v3-keycap-surface: #ffffffb3;
  --v3-toast-surface: rgb(255 255 255 / .94);
  --v3-portrait-backdrop: rgb(245 245 247 / .18);
  --v3-monochrome-filter: none;
  --v3-score-empty-opacity: .32;
  color: var(--v3-text);
  background: var(--v3-page-background);
}
/* Leave native focus visible in editable fields and during keyboard navigation. */
html[data-v3-input="pointer"] :focus:not(:where(input, textarea, select, [contenteditable], [contenteditable] *)) {
  outline: none !important;
}
/* Native media queries also update an already open page when the OS theme changes. */
@media (prefers-color-scheme: dark) {
  :root {
    --v3-page-background: #141416;
    --v3-text: #f3f3f5;
    --v3-ink: #f3f3f5;
    --v3-muted: #b0b0b9;
    --v3-score-ink: #f3f3f5;
    --v3-glass-solid: #2e2e34;
    --v3-focus: #c9baff;
    --v3-card-surface: rgb(28 28 32 / .94);
    --v3-card-solid: #1c1c20;
    --v3-card-rim: #ffffff24;
    --v3-glass-surface: rgb(46 46 52 / .78);
    --v3-glass-sheen: linear-gradient(135deg, #ffffff0a, #ffffff02 54%, #ffffff05);
    --v3-glass-highlight: linear-gradient(115deg, #ffffff08, transparent 48%, #ffffff03);
    --v3-glass-edge: inset 0 1px 0 #ffffff2e, inset 0 -1px 0 #00000040, inset 1px 0 0 #ffffff12, inset -1px 0 0 #ffffff0a;
    --v3-control-surface: #35353bc9;
    --v3-control-hover: #45454c;
    --v3-control-rim: #ffffff2e;
    --v3-keycap-surface: #ffffff1a;
    --v3-toast-surface: rgb(39 39 44 / .97);
    --v3-portrait-backdrop: rgb(10 10 13 / .64);
    --v3-monochrome-filter: brightness(0) invert(1);
    --v3-score-empty-opacity: .52;
  }
}
/* Keep viewport ancestors unclipped. Physical iPhone A/B showed that outer
   overflow clipping makes sticky, resizing covers flicker under backdrop glass.
   Decorative overflow is contained by the individual components instead. */
body { margin: 0; }
.v3-page { position: relative; z-index: 1; min-height: 100svh; padding-block: 38px 80px; box-sizing: border-box; }
.v3-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.v3-header { align-items: center; }
.v3-identity { grid-column: 1 / 6; display: flex; align-items: center; gap: 21px; }
.v3-portrait { position: relative; flex: 0 0 68px; width: 68px; height: 68px; overflow: hidden; border-radius: 50%; background: #fff; }
.v3-portrait img { position: absolute; width: 120.84%; height: 120.84%; max-width: none; left: -11.11%; top: 3.58%; }
.v3-name, .v3-nav { font-size: 24px; font-weight: 500; line-height: 31px; letter-spacing: -.03em; }
.v3-name { white-space: nowrap; }
.v3-nav { grid-column: 7 / -1; justify-self: end; display: flex; align-items: center; gap: 44px; }
.v3-nav a { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
@media (hover: hover) {
  .v3-nav a:hover {
    text-decoration: underline 1px #d7d7df;
    text-underline-offset: .28em;
  }
}
.v3-hero { margin-top: var(--v3-desktop-hero-gap, 115px); }
.v3-headline { grid-column: 1 / span 10; margin: 0; font-size: 48px; line-height: 62px; font-weight: 400; letter-spacing: -.03em; word-spacing: 2px; }
.v3-headline em { font-style: italic; }
.v3-headline__nowrap { white-space: nowrap; }
.v3-hero > .v3-brief { grid-column: 1 / -1; margin-top: 52px; justify-self: start; }
@media (max-width: 1100px) {
  .v3-grid { width: calc(100% - 80px); }
  .v3-name, .v3-nav { font-size: 21px; }
  .v3-nav { gap: 26px; }
  .v3-headline { grid-column: 1 / -1; font-size: 44px; line-height: 1.3; }
}
@media (max-width: 800px) {
  .v3-page { padding-top: 40px; }
  .v3-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 20px; }
  .v3-identity { grid-column: 1 / 4; }
  .v3-nav { grid-column: 4 / -1; }
  .v3-hero { margin-top: var(--v3-mobile-hero-gap, 76px); }
  .v3-headline { font-size: 40px; }
  .v3-hero > .v3-brief { margin-top: 40px; }
}
@media (max-width: 767px), (max-width: 800px) and (pointer: coarse) {
  .v3-identity { grid-column: 1 / -1; }
  .v3-nav { grid-column: 1 / -1; justify-self: start; margin-top: 32px; gap: 32px; flex-wrap: wrap; }
}
/* Stable small-viewport units reserve room for the first case teaser while
   Safari toolbars expand/collapse. */
@media (max-width: 480px) {
  /* Extra scroll runway lets the penultimate cover finish fading when the
     mobile Chrome toolbar collapses and the visible viewport grows. */
  .v3-page { padding-block: 28px 108px; }
  .v3-grid { width: calc(100% - 48px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
  .v3-identity { gap: 16px; }
  .v3-portrait { flex-basis: 52px; width: 52px; height: 52px; }
  .v3-name { font-size: 21px; }
  .v3-nav { font-size: 18px; line-height: 26px; gap: 24px; margin-top: 28px; }
  .v3-hero { margin-top: var(--v3-mobile-hero-gap, clamp(32px, calc(100svh - 620px), 64px)); }
  .v3-headline { font-size: 32px; line-height: 1.3; }
  .v3-hero > .v3-brief { margin-top: clamp(24px, calc(100svh - 620px), 32px); }
}
@media (max-width: 359px) {
  .v3-nav { gap: 20px; font-size: 17px; }
  .v3-headline { font-size: clamp(28px, calc(100svh - 540px), 30px); }
}

/* Slightly open word spacing, independent of letter tracking. */
.v3-case-copy h3,.v3-name,.v3-nav,.v3-menu-links { word-spacing:1px; }

/* Preserve a small case preview on shorter desktop windows. Only vertical
   breathing room contracts; regular-height Figma typography stays unchanged. */
@media(min-width:801px) and (max-height:800px){
 .v3-page{padding-top:clamp(12px,calc(50svh - 350px),38px)}
 .v3-hero{margin-top:var(--v3-desktop-hero-gap,clamp(36px,calc(100svh - 680px),115px))}
 .v3-hero > .v3-brief{margin-top:clamp(28px,calc(100svh - 720px),52px)}
}
@media(min-width:801px) and (max-height:620px){
 .v3-headline{font-size:44px;line-height:1.2}
 .v3-cases__title{font-size:60px;line-height:80px}
}