/* Resume page ("Journey Atlas").
   Layout: hero → journey (timeline rail + story panel) → field notes (case studies with
   screenshot carousels) → toolkit → contact. Interactive states are driven by
   js/resume-atlas.js; the html.js class (set in the page head) lets the enhanced layout
   paint correctly before that script runs. */

:root {
  --atlas-styles-ready: 1;
  --paper: #fafaf5;
  --paper-2: #f3f2ea;
  --surface: #fff;
  --ink: #21303a;
  --ink-2: #3a4952;
  --muted: #56656d;
  --rule: #d8e0de;
  --rule-soft: #e5eae7;
  --rule-strong: #bfcbc7;
  --blue: #2f72ad;
  --blue-strong: #235b8c;
  --link: #23669f;
  --green: #4d7561;
  --green-strong: #355847;
  --green-tint: #e5efe9;
  --green-wash: #eff5f1;
  --gold: #86651c;
  --focus: #f2a93b;
  --night: #1c2a26;
  --night-ink: #f6f4ec;
  --night-muted: #c3cec8;
  --night-accent: #9fcbb2;
  --shadow-sm: 0 1px 2px rgba(33,48,58,.05), 0 2px 10px rgba(33,48,58,.05);
  --shadow: 0 1px 2px rgba(33,48,58,.05), 0 14px 34px -8px rgba(33,48,58,.14);
  --shadow-lg: 0 2px 4px rgba(33,48,58,.04), 0 30px 70px -18px rgba(33,48,58,.22);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-display: "Bodoni Moda SC", Georgia, serif;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.5 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.5 20.2 4 15 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5l-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
  --i-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 12.9 17 22l-5-3-5 3 1.5-9.1'/%3E%3C/svg%3E");
  --i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E");
}

/* Category colours: used by timeline stops, story chips and the panel spine. */
[data-category="Education"] { --cat: #2f72ad; --cat-ink: #235b8c; --cat-tint: #e9f1f8; }
[data-category="Work"] { --cat: #4d7561; --cat-ink: #355847; --cat-tint: #e5efe9; }
[data-category="Research"] { --cat: #a07a24; --cat-ink: #765716; --cat-tint: #f6efdd; }
[data-category="Leadership"] { --cat: #5c6b86; --cat-ink: #414e66; --cat-tint: #ebeef4; }

/* ---------- Base ---------- */

html { scroll-padding-top: 24px; scrollbar-gutter: stable; }
body.atlas-page { background: var(--paper); color: var(--ink); font: 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.atlas-page h1, .atlas-page h2, .atlas-page h3, .atlas-page h4 { text-wrap: balance; }
.atlas-page p { text-wrap: pretty; }
.atlas-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.atlas-page a, .atlas-page button { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* Zero-specificity defaults, so component colours always win. */
:where(.atlas-page) a { color: var(--link); }
:where(.atlas-page) a:hover { color: var(--blue-strong); }
.atlas-page :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.atlas-page button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.atlas-main:focus { outline: none; }
.atlas-skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff !important; font-weight: 700; text-decoration: none; transition: top .2s var(--ease-out); }
.atlas-skip:focus { top: 12px; }

/* ---------- Header (shared look with the rest of the site) ---------- */

.atlas-header { width:100%;position:relative;z-index:20;box-shadow:0 2px 16px rgba(33,48,58,.05) }
.atlas-header .atlas-nav { width:100%;max-width:none;margin-inline:0;padding-inline:clamp(20px,2.5vw,48px);box-sizing:border-box }
.atlas-wordmark,.atlas-intro h1 { font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;font-style:normal;font-variant:normal;text-transform:none;letter-spacing:-.025em }
.atlas-wordmark { font-size:clamp(22px,2vw,28px);line-height:1.15 }
.atlas-page .atlas-wordmark { color: var(--ink); text-decoration: none; }
.atlas-nav-list a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; padding: 25px 2px 22px; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; }
.atlas-nav-list a:hover, .atlas-nav-list a.atlas-active { color: var(--blue); border-color: var(--blue); }

/* ---------- Shared type ---------- */

.atlas-eyebrow, .atlas-kicker { margin: 0 0 10px; color: var(--green); font: 800 12.5px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.atlas-section-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.atlas-section-heading h2, .atlas-contact h2 { margin: 0; font-family: var(--font-display); font-weight: 650; line-height: 1.04; letter-spacing: -.012em; }
.atlas-section-heading h2 { font-size: clamp(32px, 3.8vw, 46px); }
.atlas-section-intro { max-width: 54ch; margin: 14px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.atlas-journey, .atlas-work, .atlas-skills { padding-block: clamp(64px, 8vw, 112px); }
.atlas-journey { padding-top: clamp(28px, 4vw, 56px); }

/* ---------- Buttons and links ---------- */

.atlas-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; background: var(--blue); color: #fff !important; font: 700 16px/1.2 var(--font-body); text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -10px rgba(47,114,173,.75); transition: background-color .2s, box-shadow .3s var(--ease-out); }
.atlas-button:hover { background: var(--blue-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px -10px rgba(35,91,140,.8); }
.atlas-button:active { background: #1f5281; }
.atlas-button-icon { transition: transform .3s var(--ease-out); }
.atlas-button:hover .atlas-button-icon { transform: translateY(2px); }
.atlas-text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink) !important; font-weight: 700; text-decoration: underline; text-decoration-color: var(--rule-strong); transition: text-decoration-color .2s; }
.atlas-text-link:hover { text-decoration-color: currentColor; }
.atlas-text-link span { display: inline-block; transition: transform .3s var(--ease-out); }
.atlas-text-link:hover span { transform: translateY(3px); }
.atlas-inline-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; }
.atlas-inline-link span { display: inline-block; transition: transform .3s var(--ease-out); }
.atlas-inline-link:hover span { transform: translateY(3px); }

/* ---------- Hero ---------- */

.atlas-hero { position: relative; isolation: isolate; overflow: hidden; }
.atlas-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('../images/BgHome.webp') 70% 75%/cover no-repeat; transform-origin: 72% 60%; animation: atlas-settle 1.8s var(--ease-out) both; }
.atlas-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(250,250,245,.97) 0%, rgba(250,250,245,.92) 40%, rgba(250,250,245,.6) 70%, rgba(250,250,245,.42) 100%), linear-gradient(180deg, rgba(250,250,245,0) 58%, var(--paper) 100%); }
.atlas-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); align-items: center; gap: clamp(40px, 6vw, 96px); min-height: min(600px, 76vh); padding-block: clamp(56px, 7vw, 96px) clamp(64px, 7vw, 96px); }
.atlas-intro h1 { margin: 0; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); }
.atlas-deck { margin: 12px 0 22px; color: var(--blue); font: italic 400 clamp(22px, 2.2vw, 29px)/1.3 var(--font-serif); }
.atlas-lede { max-width: 60ch; margin: 0; color: var(--ink-2); font-size: clamp(17px, 1.25vw, 18.5px); line-height: 1.7; }
.atlas-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 32px; }
.atlas-socials { display: flex; align-items: center; gap: 4px; padding-left: 18px; border-left: 1px solid var(--rule-strong); }
.atlas-social-link { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; color: #30383d; transition: background-color .2s; }
.atlas-social-link:hover, .atlas-social-link:focus-visible { background: rgba(33,48,58,.07); }
.atlas-social-link img { width: 22px; height: 22px; }
.atlas-icon-fallback { font-size: 11px; font-weight: 800; line-height: 1; }
.atlas-social-link::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 4; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .18s, transform .25s var(--ease-out); }
.atlas-social-link:hover::after, .atlas-social-link:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.atlas-current { position: relative; padding: 22px 22px 12px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: var(--shadow); }
.atlas-current-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.atlas-current-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.atlas-current-dot::before { content:"";position:absolute;inset:0;border:1px solid var(--green);border-radius:50%;animation:atlas-current-pulse 2.5s ease-out infinite;pointer-events:none }
@keyframes atlas-current-pulse { 0% { opacity:.5;transform:scale(1) } 70%,100% { opacity:0;transform:scale(2.8) } }
.atlas-current-list { margin: 0; padding: 0; list-style: none; }
.atlas-current-list li + li { border-top: 1px solid rgba(33,48,58,.08); }
.atlas-current-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-inline: -10px; padding: 11px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.atlas-current-list a:hover { background: rgba(255,255,255,.85); color: var(--ink); }
.atlas-current-text strong { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.atlas-current-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.atlas-current-arrow { color: var(--blue); font-weight: 700; transition: transform .3s var(--ease-out); }
.atlas-current-list a:hover .atlas-current-arrow { transform: translateX(4px); }

.atlas-rise { animation: atlas-rise .8s var(--ease-out) both; animation-delay: calc(var(--rise, 0) * 70ms + 60ms); }
@keyframes atlas-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes atlas-settle { from { transform: scale(1.045); } to { transform: none; } }

/* ---------- Journey: tools ---------- */

.atlas-journey-tools { display: flex; align-items: center; gap: 12px; }
.atlas-view-switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.atlas-view-switch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform .4s var(--ease-out); }
.atlas-view-switch[data-view="all"]::before { transform: translateX(100%); }
.atlas-view-switch button { position: relative; z-index: 1; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 14px/1.2 var(--font-body); white-space: nowrap; cursor: pointer; transition: color .25s; }
.atlas-view-switch button[aria-pressed="true"] { color: #fff; }
.atlas-view-switch button[aria-pressed="false"]:hover { color: var(--blue-strong); }
.atlas-expand-all { min-height: 40px; padding: 8px 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 14px/1.2 var(--font-body); cursor: pointer; }
html:not(.js) .atlas-journey-tools, html:not(.js) .atlas-route-bar { display: none; }

/* ---------- Journey: the rail ---------- */

.atlas-explorer { position: relative; }
.atlas-route-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.atlas-route-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--muted); font-size: 14px; }
.atlas-route-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.atlas-route-hint { display: none; color: #7a878d; font-size: 13px; }
.atlas-route-steps { display: flex; gap: 8px; }
.atlas-step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .2s, color .2s, opacity .2s; }
.atlas-step svg { transition: transform .3s var(--ease-out); }
.atlas-step[aria-disabled="true"] { opacity: .38; cursor: default; box-shadow: none; }
.atlas-route { position: relative; margin-inline: -12px; padding-inline: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%); }
.atlas-route::-webkit-scrollbar { height: 6px; }
.atlas-route::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }
.atlas-route::-webkit-scrollbar-track { background: transparent; }
.atlas-route-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); min-width: 100%; margin: 0; padding: 6px 0 10px; list-style: none; }
/* The line runs from the first marker's centre to the last; columns are equal, so that is 5% in from each end. */
.atlas-route-track::before, .atlas-route-track::after { content: ""; position: absolute; top: calc(6px + 26px + 26px - 1px); left: 5%; width: 90%; height: 2px; pointer-events: none; }
.atlas-route-track::before { background: repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 11px); }
.atlas-route-track::after { background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 2px; transform-origin: left center; transform: scaleX(var(--progress, 0)); transition: transform .7s var(--ease-out); }
.atlas-route-track li { display: flex; scroll-snap-align: center; }
.atlas-stop { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 26px 6px 12px; border-radius: 16px; color: var(--ink); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.atlas-stop::before { content: ""; position: absolute; inset: 0 3px; border-radius: 16px; background: rgba(33,48,58,.045); opacity: 0; transition: opacity .25s; }
.atlas-stop:focus-visible { outline-offset: -2px; border-radius: 16px; }
.atlas-stop-year { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); color: var(--green); font: 800 11.5px/1.4 var(--font-body); letter-spacing: .14em; }
.atlas-marker { position: relative; z-index: 1; display: block; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rule-strong), 0 6px 14px -4px rgba(33,48,58,.22); transition: box-shadow .35s var(--ease-out), transform .5s var(--ease-out); }
.atlas-marker img { width: 100%; height: 100%; border-radius: 50%; }
.atlas-stop[data-current] .atlas-marker::after { content: ""; position: absolute; right: -2px; bottom: 0; width: 14px; height: 14px; border: 3px solid var(--paper); border-radius: 50%; background: var(--green); }
.atlas-stop time { margin-top: 14px; color: var(--muted); font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.atlas-stop strong { margin-top: 3px; font: 700 15px/1.25 var(--font-serif); transition: color .25s; }
.atlas-stop small { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.atlas-stop small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cat, var(--green)); }
.atlas-stop[aria-selected="true"] .atlas-marker { transform: scale(1.1); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--blue), 0 12px 24px -8px rgba(47,114,173,.6); }
.atlas-stop[aria-selected="true"] strong { color: var(--blue-strong); }
.atlas-stop[aria-selected="true"] time { color: var(--ink-2); }

/* ---------- Journey: stories as a list (no script, "All stories", phones) ---------- */

.atlas-stories { position: relative; margin-top: 12px; }
.atlas-stories::before { content: ""; position: absolute; top: 48px; bottom: 48px; left: 27px; width: 2px; background: repeating-linear-gradient(180deg, var(--rule-strong) 0 6px, transparent 6px 11px); }
.atlas-story { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: clamp(16px, 3vw, 28px); padding-block: 26px; border-bottom: 1px solid var(--rule-soft); scroll-margin-top: 24px; }
.atlas-story:last-child { border-bottom: 0; }
.atlas-story[hidden] { display: none; }
.atlas-story-head { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: inherit; align-items: start; }
.atlas-story-logo { position: relative; z-index: 1; display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule), 0 6px 14px -6px rgba(33,48,58,.25); }
.atlas-story-logo img { width: 100%; height: 100%; }
.atlas-story-id { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kind facts" "title title" "role role" "status status"; align-items: center; column-gap: 12px; min-width: 0; }
.atlas-story-kind { grid-area: kind; justify-self: start; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--cat-tint); color: var(--cat-ink); font: 800 11px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.atlas-story h3 { grid-area: title; margin: 8px 0 2px; font: 700 clamp(21px, 2vw, 26px)/1.2 var(--font-serif); color: var(--ink); }
.atlas-role { grid-area: role; margin: 0; color: var(--blue); font: italic 400 18px/1.4 var(--font-serif); }
.atlas-story-facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.atlas-story-facts li { display: inline-flex; align-items: center; gap: 6px; }
.atlas-story-facts li::before { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .75; -webkit-mask: var(--i-calendar) center/contain no-repeat; mask: var(--i-calendar) center/contain no-repeat; }
.atlas-story-facts .atlas-fact-where::before { -webkit-mask-image: var(--i-pin); mask-image: var(--i-pin); }
.atlas-story-status { grid-area: status; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--green-strong); font-size: 13.5px; font-weight: 700; }
.atlas-story-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
.atlas-story-body { grid-column: 2; min-width: 0; max-width: 72ch; padding-top: 14px; }
.atlas-story-body > :first-child { margin-top: 0; }
.atlas-story-body > :last-child { margin-bottom: 0; }
.atlas-story-body p { margin: 0 0 14px; }

/* Story details */
.atlas-outcome { position: relative; padding: 12px 16px 12px 46px; border-radius: 12px; background: var(--green-wash); color: var(--ink); }
.atlas-outcome::before { content: ""; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; background: var(--green); -webkit-mask: var(--i-trend) center/contain no-repeat; mask: var(--i-trend) center/contain no-repeat; }
.atlas-outcome strong { color: var(--green-strong); font-weight: 800; }
.atlas-outcome--award { background: #f8f2e3; }
.atlas-outcome--award::before { background: var(--gold); -webkit-mask-image: var(--i-award); mask-image: var(--i-award); }
.atlas-outcome--award strong { color: #6e5214; }
.atlas-affiliation { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 48px; border: 1px solid var(--rule-soft); border-radius: 12px; background: var(--paper); }
.atlas-affiliation::before { content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; background: var(--muted); -webkit-mask: var(--i-building) center/contain no-repeat; mask: var(--i-building) center/contain no-repeat; }
.atlas-affiliation strong { font-weight: 700; }
.atlas-affiliation span { color: var(--muted); font-size: 15px; }
.atlas-detail-list { display: grid; gap: 12px; margin: 0 0 22px; }
.atlas-detail-list div { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); gap: 4px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
.atlas-detail-list dt { padding-top: 3px; color: var(--muted); font: 800 11.5px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.atlas-detail-list dd { margin: 0; }
.atlas-subhead { margin: 0 0 12px; color: var(--muted); font: 800 11.5px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.atlas-honors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.atlas-honors li { padding: 5px 12px; border-radius: 999px; background: #f8f2e3; color: #6e5214; font-size: 13.5px; font-weight: 700; }
.atlas-scholarships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atlas-scholarships > p { display: grid; gap: 4px; margin: 0; padding: 14px 16px; border: 1px solid var(--rule-soft); border-left: 3px solid var(--blue); border-radius: 4px 12px 12px 4px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.atlas-scholarships span { color: var(--muted); }
.atlas-checklist { display: grid; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; }
.atlas-checklist li { position: relative; padding-left: 30px; }
.atlas-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-tint); }
.atlas-checklist li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 12px; height: 12px; background: var(--green-strong); -webkit-mask: var(--i-check) center/contain no-repeat; mask: var(--i-check) center/contain no-repeat; }

/* ---------- Journey: phones (accordion) ---------- */

.atlas-story-toggle { position: absolute; inset: -14px -10px; z-index: 2; display: block; width: auto; padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .2s; }
.atlas-story-toggle:hover { background: rgba(33,48,58,.035); }
.atlas-story-chevron { position: absolute; top: 18px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); }
.atlas-story-chevron::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-chevron) center/contain no-repeat; mask: var(--i-chevron) center/contain no-repeat; transition: transform .35s var(--ease-out); }
.atlas-story[data-open] .atlas-story-chevron::before { transform: rotate(180deg); }
.atlas-story[data-open] .atlas-story-chevron { color: var(--blue); }

@media (max-width: 759.98px) {
  .atlas-route, .atlas-route-bar, .atlas-view-switch { display: none !important; }
  .js .atlas-story-id { padding-right: 44px; }
  .js .atlas-story:not([data-open]) .atlas-story-body { display: none; }
  .atlas-story[data-animating] .atlas-story-body { overflow: hidden; }
}
@media (min-width: 760px) {
  .atlas-expand-all, .atlas-story-toggle { display: none; }
}

/* ---------- Journey: one story at a time (tablets and up) ---------- */

@media (min-width: 760px) {
  .js .atlas-explorer[data-view="all"] .atlas-route, .js .atlas-explorer[data-view="all"] .atlas-route-bar { display: none; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-stories { margin-top: 26px; overflow: hidden; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
  .js .atlas-explorer:not([data-view="all"]) .atlas-stories::before { display: none; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-stories { touch-action: pan-y pinch-zoom; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story:not([data-default]) { display: none; }
  .atlas-enhanced .atlas-explorer:not([data-view="all"]) .atlas-story:not([data-default]) { display: grid; }
  .atlas-enhanced .atlas-explorer:not([data-view="all"]) .atlas-story[hidden] { display: none; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story { grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); column-gap: 0; padding: 0; border: 0; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story.is-leaving { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-head { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3.2vw, 40px); background: linear-gradient(180deg, var(--cat-tint), rgba(255,255,255,0) 85%); border-right: 1px solid var(--rule-soft); }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-logo { width: 60px; height: 60px; margin-bottom: 20px; box-shadow: 0 0 0 1px rgba(33,48,58,.1), 0 8px 18px -8px rgba(33,48,58,.35); }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-id { display: flex; flex-direction: column; align-items: flex-start; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story h3 { margin: 12px 0 6px; font-size: clamp(23px, 2.3vw, 30px); }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-facts { flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(33,48,58,.08); font-size: 14px; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-status { margin-top: 16px; }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-body { grid-column: 2; max-width: none; padding: clamp(26px, 3.2vw, 40px) clamp(26px, 3.6vw, 52px); }
  .js .atlas-explorer:not([data-view="all"]) .atlas-story-body > * { max-width: 70ch; }
}
/* Notch that points from the panel up to the selected stop. */
.atlas-notch { position: absolute; z-index: 2; left: 0; width: 18px; height: 18px; margin-top: -9px; border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); border-radius: 4px 0 0 0; background: var(--surface); opacity: 0; pointer-events: none; transform: translateX(var(--notch-x, 0px)) rotate(45deg); transition: transform .55s var(--ease-out), opacity .25s; }
.atlas-notch[data-visible] { opacity: 1; }
.atlas-notch[data-instant] { transition: none; }
.atlas-explorer[data-view="all"] .atlas-notch { display: none; }
@media (max-width: 759.98px) { .atlas-notch { display: none; } }

/* ---------- Work in practice ---------- */

.atlas-work { position: relative; isolation: isolate; background: var(--paper-2); border-block: 1px solid var(--rule-soft); }
.atlas-work::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; background-image: radial-gradient(rgba(77,117,97,.16) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }
.atlas-case { --accent: var(--green); --accent-ring: rgba(77,117,97,.35); position: relative; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--rule); scroll-margin-top: 16px; }
.atlas-section-heading + .atlas-case { padding-top: 8px; border-top: 0; }
.atlas-case--campusfound { --accent: #2f72ad; --accent-ring: rgba(47,114,173,.35); }
.atlas-case--infrastructure { --accent: #4f5f73; --accent-ring: rgba(79,95,115,.35); }
.atlas-case--arc { --accent: #23778a; --accent-ring: rgba(35,119,138,.35); padding-bottom: 0; }
.atlas-case-head { max-width: 860px; margin-bottom: clamp(24px, 3vw, 36px); }
.atlas-case-index { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--accent); font: 800 12.5px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.atlas-case-number { font: 600 24px/1 var(--font-display); letter-spacing: 0; }
.atlas-case-sep { display: inline-block; width: 32px; height: 1.5px; overflow: hidden; background: var(--accent); font-size: 0; opacity: .5; }
.atlas-case h3 { margin: 14px 0 8px; font: 700 clamp(28px, 3.3vw, 42px)/1.12 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.atlas-purpose { margin: 0; color: var(--blue); font: italic 400 clamp(18px, 1.6vw, 21px)/1.45 var(--font-serif); }
.atlas-case-copy > p { max-width: 64ch; margin: 0 0 16px; }
.atlas-case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0; border-block: 1px solid var(--rule); }
.atlas-case-facts div { min-width: 0; padding: 14px 14px 14px 0; }
.atlas-case-facts div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.atlas-case-facts dt { color: var(--muted); font: 800 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.atlas-case-facts dd { margin: 5px 0 0; font: 700 16.5px/1.3 var(--font-serif); color: var(--ink); }
.atlas-stack-label { margin: 0 0 10px; color: var(--muted); font: 800 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.atlas-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.atlas-tags a { display:block;padding:6px 12px;border:1px solid var(--rule-strong);border-radius:999px;background:rgba(255,255,255,.65);color:var(--ink-2);font-size:13.5px;font-weight:650;line-height:1.3;text-decoration:none;transition:border-color .2s,color .2s,background-color .2s }
.atlas-tags a:hover { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.atlas-visit-link { display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "text arrow" "host arrow"; align-items: center; column-gap: 22px; padding: 12px 18px 12px 20px; border-radius: 14px; background: var(--ink); color: #fff !important; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(33,48,58,.8); transition: background-color .25s, box-shadow .3s var(--ease-out); }
.atlas-visit-link:hover { background: #172229; box-shadow: 0 16px 30px -14px rgba(33,48,58,.9); }
.atlas-visit-text { grid-area: text; font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.atlas-visit-host { grid-area: host; color: #b9c6cc; font: 500 12.5px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.atlas-visit-arrow { grid-area: arrow; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); font-weight: 700; transition: transform .35s var(--ease-out), background-color .25s; }
.atlas-visit-link:hover .atlas-visit-arrow { transform: translate(2px, -2px); background: var(--accent); }
.atlas-reading { margin-top: 26px; }
.atlas-reading ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.atlas-reading a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 650; }
.atlas-reading a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; opacity: .8; -webkit-mask: var(--i-doc) center/contain no-repeat; mask: var(--i-doc) center/contain no-repeat; }

@media (min-width: 1000px) {
  .atlas-case-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 76px); align-items: start; }
  .atlas-case--flip .atlas-case-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .atlas-case--flip .atlas-case-copy { order: 2; }
  .atlas-case-body > .atlas-gallery { position: sticky; top: 24px; }
  .atlas-case--arc .atlas-case-body { display: block; }
}
@media (max-width: 999.98px) {
  .atlas-case-body > .atlas-gallery { margin-top: 40px; }
}

/* ARC: two summers, side by side */
.atlas-case-lede { max-width: 64ch; margin: 0; font-size: 18px; }
.atlas-chapters { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.atlas-chapter { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.atlas-chapter > p { margin: 0 0 14px; }
.atlas-chapter-year { display: flex; align-items: baseline; gap: 12px; color: var(--muted); font: 800 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.atlas-chapter-year span { color: var(--accent); font: 600 32px/1 var(--font-display); letter-spacing: 0; }
.atlas-chapter-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: auto 0 0 !important; padding-top: 16px; border-top: 1px dashed var(--rule-strong); }
.atlas-chapter-stat strong { color: var(--accent); font: 600 34px/1.1 var(--font-display); }
.atlas-chapter-stat span { flex: 1 1 180px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* ---------- Screenshot galleries ---------- */

.atlas-gallery { min-width: 0; }
.atlas-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.atlas-gallery-head h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 700 16.5px/1.3 var(--font-serif); }
.atlas-view-count { color: var(--muted); font: 650 12.5px/1.4 var(--font-body); white-space: nowrap; }
.atlas-gallery-expand { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 13.5px/1.2 var(--font-body); cursor: pointer; transition: border-color .2s, color .2s; }
html:not(.js) .atlas-gallery-expand, html:not(.js) .atlas-gallery-thumbs { display: none; }
.atlas-gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 48px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; padding: 8px 16px; margin: -8px -16px; }
.atlas-gallery-track::-webkit-scrollbar { display: none; }
html:not(.js) .atlas-gallery-track { scrollbar-width: thin; padding-bottom: 8px; }
html:not(.js) .atlas-gallery-track::-webkit-scrollbar { display: block; height: 6px; }
.atlas-shot { min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.atlas-zoom-trigger { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 1.85; padding: 0; overflow: hidden; border: 1px solid rgba(33,48,58,.13); border-radius: var(--radius); background: linear-gradient(var(--shot-top, #f3f4f1), var(--shot-bottom, #f3f4f1)); box-shadow: 0 1px 2px rgba(33,48,58,.06), 0 12px 24px -12px rgba(33,48,58,.3); cursor: zoom-in; transition: border-color .3s, box-shadow .45s var(--ease-out); }
.atlas-zoom-trigger img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 0; transition: transform .8s var(--ease-out); backface-visibility: hidden; }
.atlas-zoom-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(20,29,35,.8); color: #fff; font: 700 12.5px/1 var(--font-body); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .4s var(--ease-out); }
.atlas-zoom-hint::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--i-expand) center/contain no-repeat; mask: var(--i-expand) center/contain no-repeat; }
.atlas-zoom-trigger:focus-visible { outline-offset: 3px; border-radius: var(--radius); }
.atlas-zoom-trigger:focus-visible .atlas-zoom-hint { opacity: 1; transform: none; }
.atlas-shot figcaption { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.atlas-shot figcaption strong { color: var(--ink); font-weight: 700; }
.atlas-gallery-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82px, 1fr); gap: 10px; margin-top: 14px; padding: 5px 4px 4px; overflow-x: auto; scrollbar-width: none; }
.atlas-gallery-thumbs::-webkit-scrollbar { display: none; }
.atlas-thumb { display: grid; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; color: var(--muted); font: 650 12.5px/1.25 var(--font-body); text-align: left; cursor: pointer; transition: color .2s; }
.atlas-thumb img { width: 100%; aspect-ratio: 1.85; object-fit: cover; object-position: top center; border-radius: 8px; background: #e9ece8; box-shadow: 0 0 0 1px rgba(33,48,58,.14); opacity: .7; transition: opacity .25s, box-shadow .3s var(--ease-out); }
.atlas-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-thumb[aria-selected="true"] { color: var(--ink); }
.atlas-thumb[aria-selected="true"] img { opacity: 1; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--accent, var(--blue)); }
.atlas-thumb:focus-visible { outline-offset: 4px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .atlas-zoom-trigger:hover { border-color: rgba(33,48,58,.24); box-shadow: 0 1px 2px rgba(33,48,58,.06), 0 18px 30px -14px rgba(33,48,58,.38); }
  .atlas-zoom-trigger:hover img { transform: scale(1.018); }
  .atlas-zoom-trigger:hover .atlas-zoom-hint { opacity: 1; transform: none; }
  .atlas-thumb:hover { color: var(--ink); }
  .atlas-thumb:hover img { opacity: 1; }
  .atlas-gallery-expand:hover { border-color: var(--accent, var(--blue)); color: var(--accent, var(--blue)); }
  .atlas-step:hover:not([aria-disabled="true"]) { border-color: var(--blue); color: var(--blue); }
  .atlas-step[data-step="1"]:hover:not([aria-disabled="true"]) svg { transform: translateX(2px); }
  .atlas-step[data-step="-1"]:hover:not([aria-disabled="true"]) svg { transform: translateX(-2px); }
  .atlas-stop:hover::before { opacity: 1; }
  .atlas-stop:hover:not([aria-selected="true"]) .atlas-marker { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--blue), 0 8px 16px -6px rgba(33,48,58,.3); }
  .atlas-route-hint { display: inline; }
}
@media (hover: none) {
  .atlas-zoom-hint { opacity: 1; transform: none; padding: 8px; font-size: 0; gap: 0; }
}

/* ---------- Screenshot viewer ---------- */

.atlas-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--night-ink); overflow: hidden; }
.atlas-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: atlas-fade-in .3s var(--ease-out); }
.atlas-viewer::backdrop { background: rgba(11,17,20,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.atlas-viewer[open]::backdrop { animation: atlas-fade-in .3s var(--ease-out); }
.atlas-viewer[open] .atlas-viewer-viewport { animation: atlas-viewer-in .45s var(--ease-out); }
.atlas-viewer.is-closing, .atlas-viewer.is-closing::backdrop { animation: atlas-fade-out .2s ease-in forwards; }
@keyframes atlas-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes atlas-viewer-in { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
body.atlas-viewer-open { overflow: hidden; }
.atlas-viewer-bar { display: flex; align-items: center; gap: 16px; padding: 14px clamp(14px, 2.5vw, 28px); }
.atlas-viewer-bar h2 { min-width: 0; margin: 0; overflow: hidden; font: 700 17px/1.3 var(--font-serif); text-overflow: ellipsis; white-space: nowrap; }
.atlas-viewer-count { margin: 0 auto 0 0; color: var(--night-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-viewer-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid rgba(246,244,236,.22); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--night-ink); font: 700 14px/1 var(--font-body); cursor: pointer; transition: background-color .2s, border-color .2s; }
.atlas-viewer-close:hover { background: rgba(255,255,255,.14); border-color: rgba(246,244,236,.4); }
.atlas-viewer-viewport { position: relative; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.atlas-viewer-viewport[data-zoomed] { cursor: grab; }
.atlas-viewer-viewport[data-dragging] { cursor: grabbing; }
.atlas-viewer-viewport img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); transform-origin: center; will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.atlas-viewer-viewport[data-loading]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(246,244,236,.2); border-top-color: var(--night-ink); border-radius: 50%; animation: atlas-spin .8s linear infinite; }
@keyframes atlas-spin { to { transform: rotate(360deg); } }
.atlas-viewer-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 1px solid rgba(246,244,236,.2); border-radius: 50%; background: rgba(18,26,30,.6); color: var(--night-ink); cursor: pointer; transition: background-color .2s, opacity .2s; }
.atlas-viewer-nav:hover:not([aria-disabled="true"]) { background: rgba(40,54,61,.85); }
.atlas-viewer-nav[aria-disabled="true"] { opacity: .28; cursor: default; }
.atlas-viewer-nav[hidden] { display: none; }
.atlas-viewer-nav--prev { left: clamp(10px, 2vw, 24px); }
.atlas-viewer-nav--next { right: clamp(10px, 2vw, 24px); }
.atlas-viewer-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "caption controls" "hint hint"; align-items: center; gap: 6px 20px; padding: 14px clamp(14px, 2.5vw, 28px) 18px; }
.atlas-viewer-caption { grid-area: caption; margin: 0; color: var(--night-ink); font-size: 15px; line-height: 1.5; }
.atlas-viewer-caption strong { font-weight: 700; }
.atlas-viewer-controls { grid-area: controls; display: flex; gap: 6px; }
.atlas-viewer-controls button { min-width: 44px; min-height: 40px; padding: 6px 12px; border: 1px solid rgba(246,244,236,.22); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--night-ink); font: 700 15px/1 var(--font-body); cursor: pointer; transition: background-color .2s; }
.atlas-viewer-controls button:hover { background: rgba(255,255,255,.14); }
.atlas-viewer-hint { grid-area: hint; margin: 0; color: #93a19a; font-size: 12.5px; }

/* ---------- Skills ---------- */

.atlas-skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.atlas-skill-group { min-width: 0; padding: 24px 22px 28px 0; }
.atlas-skill-group + .atlas-skill-group { padding-left: 22px; border-left: 1px solid var(--rule); }
.atlas-skill-group h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; font: 700 18px/1.3 var(--font-serif); }
.atlas-skill-index { color: var(--green); font: 600 15px/1 var(--font-display); }
.atlas-tool-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.atlas-tool-list li { display: flex; min-width: 0; }
.atlas-tool-list a { position:relative;display:flex;flex:1;align-items:center;gap:12px;min-height:42px;margin-inline:-10px;padding:8px 34px 8px 10px;border-radius:10px;color:var(--ink-2);font-size:15.5px;line-height:1.35;text-decoration:none;transition:background-color .2s,color .2s }
.atlas-tool-list a::after { content: "↗"; position: absolute; right: 10px; top: 50%; color: var(--green); font-weight: 700; opacity: 0; transform: translate(-3px, calc(-50% + 3px)); transition: opacity .2s, transform .3s var(--ease-out); }
.atlas-tool-list a:hover { background: var(--green-wash); color: var(--ink); }
.atlas-tool-list a:hover::after, .atlas-tool-list a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.atlas-tool-list img { flex: none; width: 22px; height: 22px; }
.atlas-tool-glyph { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--green-tint); }
.atlas-tool-glyph::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--green); }
/* Timeline and toolkit artwork retain their original brand colors. */
.atlas-marker img,
.atlas-tool-list img {
  filter: none;
  object-fit: contain;
}
/* Monochrome treatment applies only to the top contact links. */
.atlas-social-link img {
  filter: grayscale(1) brightness(.25);
  object-fit: contain;
}
.atlas-social-link--linkedin img,
.atlas-social-link--linkedin:hover img,
.atlas-social-link--linkedin:focus-visible img {
  filter:none;
  opacity:1;
}
.atlas-practices { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; padding: 18px 22px; border: 1px solid #d7e5dc; border-radius: var(--radius); background: var(--green-wash); }
.atlas-practices h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 17px/1.3 var(--font-serif); }
.atlas-practices h3 img { width: 22px; height: 22px; }
.atlas-practices .atlas-tool-list { display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-practices .atlas-tool-list a { margin: 0; min-height: 40px; padding: 8px 14px; border: 1px solid #cfe0d6; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 15px; }
.atlas-practices .atlas-tool-list a::after { content: none; }
.atlas-practices .atlas-tool-list a:hover { border-color: var(--green); background: var(--surface); }

/* ---------- Contact ---------- */

.atlas-contact { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(76px, 9vw, 128px) clamp(64px, 8vw, 104px); background: radial-gradient(120% 90% at 50% 0%, #2c4239 0%, #1f2f2a 55%, var(--night) 100%); color: var(--night-ink); text-align: center; }
.atlas-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(246,244,236,.11) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(60% 70% at 50% 25%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 25%, #000, transparent); }
.atlas-contact .atlas-eyebrow { color: var(--night-accent); }
.atlas-contact h2 { color: #fffdf5; font-size: clamp(34px, 4.8vw, 58px); }
.atlas-contact-lede { max-width: 58ch; margin: 18px auto 0; color: var(--night-muted); font-size: clamp(17px, 1.3vw, 18.5px); }
.atlas-contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1040px; margin: 44px auto 0; padding: 0; list-style: none; }
.atlas-contact-links li { flex: 1 1 210px; max-width: 290px; }
.atlas-contact-links a { position: relative; display: grid; gap: 4px; height: 100%; padding: 18px 44px 18px 20px; border: 1px solid rgba(246,244,236,.14); border-radius: 16px; background: rgba(255,255,255,.04); color: var(--night-ink) !important; text-align: left; text-decoration: none; transition: background-color .25s, border-color .25s; }
.atlas-contact-links a::after { content: "→"; position: absolute; right: 18px; top: 50%; color: var(--night-accent); font-weight: 700; transform: translateY(-50%); transition: transform .3s var(--ease-out); }
.atlas-contact-links a:hover { border-color: rgba(246,244,236,.32); background: rgba(255,255,255,.08); }
.atlas-contact-links a:hover::after { transform: translate(4px, -50%); }
.atlas-contact-label { color: var(--night-accent); font: 800 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.atlas-contact-value { font-size: 16px; font-weight: 650; line-height: 1.35; overflow-wrap: break-word; }
.atlas-contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.atlas-contact .atlas-button { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px -12px rgba(0,0,0,.55); }
.atlas-button--ghost { border-color: rgba(246,244,236,.32); background: transparent; box-shadow: none !important; }
.atlas-button--ghost:hover, .atlas-button--ghost[aria-expanded="true"] { border-color: rgba(246,244,236,.6); background: rgba(255,255,255,.08); }
html:not(.js) .atlas-pdf-toggle { display: none; }
.atlas-pdf { max-width: 920px; margin: 32px auto 0; text-align: left; }
.atlas-pdf:not([hidden]) { animation: atlas-rise .5s var(--ease-out) both; }
.atlas-pdf-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 12px; color: var(--night-muted); font-size: 14px; }
.atlas-pdf-note a { color: var(--night-ink) !important; font-weight: 700; }
.atlas-pdf iframe { display: block; width: 100%; height: min(80vh, 920px); border: 0; border-radius: 14px; background: #fff; box-shadow: 0 30px 80px -24px rgba(0,0,0,.6); }
.atlas-pdf-fallback { margin: 0; padding: 22px; border: 1px dashed rgba(246,244,236,.3); border-radius: 14px; color: var(--night-muted); }

/* The footer continues the contact band, so the page ends on one colour. */
.atlas-page .site-footer { border-top: 1px solid rgba(246,244,236,.1); background: var(--night); color: #a9b7b0; }
.atlas-page .site-footer__top { color: var(--night-ink); }

/* ---------- Scroll reveals (added by script only) ---------- */

.atlas-reveal { opacity: 0; transform: translateY(18px); }
.atlas-reveal.is-revealed { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

/* ---------- Responsive ---------- */

@media (max-width: 1099.98px) {
  .atlas-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-skill-group:nth-child(3) { padding-left: 0; border-left: 0; }
  .atlas-skill-group:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 979.98px) {
  .atlas-hero-inner { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .atlas-current { max-width: 560px; }
  .atlas-contact-links { max-width: 640px; }
}
@media (max-width: 759.98px) {
  .atlas-section-heading { display: block; }
  .atlas-journey-tools { margin-top: 20px; }
  .atlas-stories::before { left: 21px; top: 40px; bottom: 40px; }
  .atlas-story { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-block: 22px; }
  .atlas-story-head { grid-template-columns: 44px minmax(0, 1fr); }
  .atlas-story-logo { width: 44px; height: 44px; }
  .atlas-story-id { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kind" "title" "role" "facts" "status"; }
  .atlas-story-facts { margin-top: 6px; font-size: 13px; }
  .atlas-story h3 { font-size: 20px; margin-top: 8px; }
  .atlas-role { font-size: 16.5px; }
  .atlas-story-body { grid-column: 1 / -1; padding-top: 16px; padding-left: 60px; }
  .atlas-detail-list div { grid-template-columns: 1fr; }
  .atlas-scholarships { grid-template-columns: 1fr; }
  .atlas-chapters { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 16px; }
  .atlas-header .atlas-nav { padding-inline: 20px; }
  .atlas-header { position: relative; }
  .atlas-nav { min-height: 68px; }
  .atlas-menu-button { width: 44px; height: 42px; padding: 10px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; }
  .atlas-menu-button span:not(.atlas-sr-only) { display: block; height: 2px; margin: 4px 0; background: var(--ink); }
  .atlas-nav-list { top: 68px; box-shadow: 0 12px 20px rgba(33,48,58,.08); }
  .atlas-nav-list a { display: block; padding: 10px 0; border: 0; }
  .atlas-hero::before { background-image: url('../images/BgHomePhone.webp'); background-position: center 30%; }
  .atlas-hero::after { background: linear-gradient(180deg, rgba(250,250,245,.86) 0%, rgba(250,250,245,.93) 45%, var(--paper) 100%); }
  .atlas-hero-inner { padding-block: 44px 56px; }
  .atlas-lede { font-size: 17px; }
  .atlas-actions { gap: 10px 18px; margin-top: 26px; }
  .atlas-actions .atlas-button { width: 100%; }
  .atlas-socials { padding-left: 14px; }
  .atlas-current { padding: 18px 18px 8px; }
  .atlas-journey, .atlas-work, .atlas-skills { padding-block: 56px; }
  .atlas-section-heading h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .atlas-case-facts { grid-template-columns: 1fr; border-bottom: 0; }
  .atlas-case-facts div, .atlas-case-facts div + div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .atlas-case-facts dd { margin: 0; text-align: right; }
  .atlas-visit-link { display: grid; width: 100%; }
  .atlas-gallery-head h4 { font-size: 15.5px; }
  .atlas-gallery-expand { padding-inline: 12px; }
  .atlas-gallery-thumbs { grid-auto-columns: minmax(54px, 1fr); gap: 8px; }
  .atlas-thumb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .atlas-skill-grid { grid-template-columns: 1fr; }
  .atlas-skill-group, .atlas-skill-group + .atlas-skill-group { padding: 22px 0 24px; border-left: 0; }
  .atlas-skill-group + .atlas-skill-group { border-top: 1px solid var(--rule); }
  .atlas-skill-group .atlas-tool-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); column-gap: 18px; }
  .atlas-practices { padding: 18px; }
  .atlas-contact-links { flex-direction: column; align-items: stretch; max-width: 420px; }
  .atlas-contact-links li { flex: none; max-width: none; }
  .atlas-contact-actions .atlas-button { width: 100%; max-width: 420px; }
  .atlas-pdf iframe { height: 70vh; }
  .atlas-viewer-close span { display: none; }
  .atlas-viewer-close { padding: 8px 12px; }
  .atlas-viewer-nav { width: 44px; height: 44px; margin-top: -22px; }
  .atlas-viewer-foot { grid-template-columns: 1fr; grid-template-areas: "caption" "controls"; }
  .atlas-viewer-controls { justify-content: center; }
  .atlas-viewer-hint { display: none; }
}
@media (max-width: 380px) {
  .atlas-shell { width: calc(100% - 32px); }
  .atlas-socials { margin-left: -10px; padding-left: 0; border-left: 0; }
  .atlas-view-count { display: none; }
  .atlas-story-body { padding-left: 0; }
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.atlas-current-dot::before{display:none}.atlas-zoom-trigger img{transition:none!important;transform:none!important}.atlas-rise,.atlas-hero::before,.atlas-pdf:not([hidden]){animation:none!important}.atlas-reveal{opacity:1!important;transform:none!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media print {
  .atlas-header, .atlas-skip, .atlas-route, .atlas-route-bar, .atlas-journey-tools, .atlas-notch, .atlas-story-toggle, .atlas-gallery-thumbs, .atlas-gallery-expand, .atlas-zoom-hint, .atlas-pdf, .atlas-pdf-toggle, .atlas-viewer, .atlas-current, .atlas-actions, site-footer { display: none !important; }
  .atlas-hero::before, .atlas-hero::after, .atlas-work::before, .atlas-contact::before { display: none; }
  .atlas-hero-inner { min-height: 0; padding-block: 16px; }
  .atlas-rise, .atlas-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .atlas-journey, .atlas-work, .atlas-skills, .atlas-contact { padding-block: 20px; background: none; color: var(--ink); }
  .atlas-stories { border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .atlas-story, .atlas-story[hidden] { display: grid !important; break-inside: avoid; }
  .atlas-story-body { display: block !important; }
  .atlas-gallery-track { display: block; overflow: visible; }
  .atlas-shot:not(:first-child) { display: none; }
  .atlas-case, .atlas-chapter { break-inside: avoid; box-shadow: none; }
  .atlas-contact h2, .atlas-contact-links a { color: var(--ink) !important; }
  .atlas-contact-lede, .atlas-contact .atlas-eyebrow, .atlas-contact-label, .atlas-contact-links a::after { color: var(--muted) !important; }
  .atlas-contact-links a { border-color: var(--rule) !important; }
  .atlas-contact-actions { display: none !important; }
}