:root {
  color-scheme: light;
  --ink: #221d1b;
  --text-muted: #5e534c;
  --paper: #f7f3ed;
  --white: #fffcf7;
  --border: #dbd0c5;
  --red: #7e1a1a;
  --red-dark: #601313;
  --red-light: #eaa29a;
  --night: #171515;
  --night-text: #d2c8c0;
  --night-border: #493d38;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: Inter, 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.65 var(--sans); }
a { color: var(--red); text-underline-offset: .21em; }
a:hover { color: var(--red-dark); }
img { display: block; width: 100%; height: auto; }
figure, p, dl, dd { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.07; text-wrap: balance; }
section[id] { scroll-margin-top: 1rem; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.wrap { width: min(100% - 3rem, 76rem); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .6rem 1rem; background: var(--white); }
.skip:focus { transform: translateY(0); }

.header { color: var(--white); background: var(--night); border-bottom: 1px solid var(--night-border); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.2rem; align-items: center; min-height: 5.125rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; width: fit-content; color: inherit; font-size: .95rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--red-light); }
.brand-mark { display: inline-grid; width: 2.15rem; height: 2.15rem; place-items: center; background: var(--red); color: var(--white); font-size: .72rem; letter-spacing: .08em; }
.nav { display: flex; flex-wrap: wrap; gap: .6rem 1.85rem; }
.nav a, .footer a { color: var(--night-text); font-size: .9rem; text-decoration: none; }
.nav a:hover, .footer a:hover { color: var(--white); text-decoration: underline; }
.header .button { justify-self: end; }

.hero { overflow: hidden; color: var(--white); background: radial-gradient(ellipse at 79% 55%, #38221f 0%, #221918 34%, var(--night) 67%); border-bottom: 4px solid var(--red); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; padding-block: clamp(3rem, 5.7vw, 5.65rem); }
.hero-copy { padding-block: .35rem 1.6rem; }
.eyebrow, .card-meta, .link-type, .case-facts dt { font: 650 .72rem/1.45 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.hero-label { color: var(--red-light); margin-bottom: 1.25rem; }
.hero-label::before { display: inline-block; width: 1.8rem; height: 1px; margin: 0 .65rem .22rem 0; background: var(--red-light); content: ''; }
.hero h1, .case-header h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3.6rem, 7.05vw, 7rem); line-height: .98; letter-spacing: -.06em; }
.hero-role { margin-top: 1.15rem; font-size: clamp(1.1rem, 2.1vw, 1.55rem); font-weight: 560; }
.hero-intro { max-width: 27rem; margin-top: 1.15rem; color: var(--night-text); font-size: 1.06rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.55rem; margin-top: 1.8rem; }
.button { display: inline-flex; gap: .75rem; align-items: center; justify-content: center; min-height: 3rem; padding: .65rem 1.1rem; border: 1px solid transparent; border-radius: 3px; font-size: .9rem; font-weight: 660; text-decoration: none; }
.button-primary { color: var(--white); border-color: #aa5650; background: var(--red); }
.button-primary:hover { color: var(--white); background: #98302b; }
.button-outline { color: var(--white); border-color: #85756c; }
.button-outline:hover { color: var(--white); border-color: var(--white); background: #312824; }
.button-small { min-height: 2.45rem; padding: .47rem .78rem; font-size: .82rem; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; font-size: .94rem; font-weight: 650; }
.light-link, .light-link:hover { color: var(--white); }
.arrow-right, .arrow-down, .arrow-up { position: relative; display: inline-block; width: .75rem; height: .75rem; flex: none; }
.arrow-right::before, .arrow-down::before, .arrow-up::before { position: absolute; top: 50%; left: 0; width: .68rem; border-top: 1px solid; content: ''; }
.arrow-right::after, .arrow-down::after, .arrow-up::after { position: absolute; top: .19rem; right: .06rem; width: .36rem; height: .36rem; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); content: ''; }
.arrow-down { transform: rotate(90deg); }
.arrow-up { transform: rotate(-90deg); }
.hero-figure { width: 100%; align-self: center; min-width: 0; }
.planet-frame { isolation: isolate; position: relative; aspect-ratio: 1.16; overflow: hidden; display: grid; place-items: center; border: 1px solid #655048; background: radial-gradient(circle at 53% 47%, #332522, #0e0c0b 76%); }
.planet-frame img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.planet-frame::after { z-index: 1; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 3rem #11090787; content: ''; }
.reticle { position: absolute; z-index: 2; inset: .8rem; pointer-events: none; }
.reticle i { position: absolute; width: .95rem; height: .95rem; border-color: #cf9a8b; border-style: solid; border-width: 0; }
.reticle i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.reticle i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.reticle i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.reticle i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hero-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .7rem; margin-top: .75rem; color: var(--night-text); font-size: .73rem; }
.hero-figure figcaption a { color: var(--night-text); }
.hero-figure figcaption a:hover { color: var(--white); }

.section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section h2, .case-body h2 { font: 400 clamp(2.35rem, 4.1vw, 4.2rem)/1.04 var(--serif); letter-spacing: -.045em; }
.section-intro { max-width: 34rem; margin-top: 1.25rem; color: var(--text-muted); font-size: 1.06rem; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; margin-top: 1.65rem; }
.work-card { display: flex; flex-direction: column; min-height: 19.5rem; padding: clamp(1.3rem, 3vw, 2.4rem); border: 1px solid var(--border); border-top: 3px solid var(--red); background: var(--white); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .55rem 1rem; color: var(--red); }
.card-meta span:last-child { white-space: nowrap; }
.work-card h3 { margin-top: 1.05rem; font: 400 clamp(1.85rem, 3.25vw, 3.05rem)/1.05 var(--serif); letter-spacing: -.037em; }
.work-card h3 a { color: var(--ink); text-decoration: none; }
.work-card h3 a:hover { color: var(--red); }
.work-card p { max-width: 32rem; margin: .85rem 0 1.3rem; color: var(--text-muted); }
.work-card .text-link { margin-top: auto; }
.interest { background: #efe7df; border-block: 1px solid var(--border); }
.interest-grid, .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); }
.interest-list { border-top: 2px solid var(--red); }
.interest-list > div { padding: 1rem 0; border-bottom: 1px solid #cfc2b7; }
.interest-list dt { font-size: 1.05rem; font-weight: 680; }
.interest-list dd { margin-top: .25rem; color: var(--text-muted); }
.about-grid { display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.portrait { position: relative; margin: 0; max-width: 28rem; padding: 0 0 .5rem .5rem; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); }
.portrait img { aspect-ratio: 1; object-fit: cover; }
.education { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.education h3 { margin-bottom: .32rem; font-size: 1.05rem; font-weight: 680; }
.education .detail { margin-top: .22rem; color: var(--text-muted); font-size: .91rem; }
.contact { color: var(--white); background: var(--night); border-top: 4px solid var(--red); }
.contact .section-intro { color: var(--night-text); }
.contact-email { display: inline-block; margin-top: 1.25rem; color: var(--red-light); font-size: 1.1rem; font-weight: 650; }
.contact-email:hover { color: var(--white); }
.contact-links { align-self: center; border-top: 1px solid var(--night-border); }
.contact-links a { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; color: var(--white); border-bottom: 1px solid var(--night-border); text-decoration: none; }
.contact-links a:hover { color: var(--red-light); }
.link-type { display: inline-flex; align-items: center; gap: .65rem; color: var(--night-text); }
.footer { color: var(--white); background: var(--night); border-top: 1px solid var(--night-border); }
.footer-inner { display: flex; justify-content: space-between; gap: .7rem 1.5rem; padding-block: 1.2rem; font-size: .85rem; }
.footer-location { color: var(--night-text); }

.case-header { color: var(--white); background: radial-gradient(ellipse at right bottom, #3a211e, var(--night) 76%); border-bottom: 4px solid var(--red); }
.case-header .wrap { padding-block: 2.6rem clamp(3rem, 7vw, 6.6rem); }
.back { display: inline-flex; margin-bottom: 2.5rem; color: var(--night-text); }
.back:hover { color: var(--white); }
.case-header .eyebrow { color: var(--red-light); margin-bottom: .85rem; }
.case-header h1 { max-width: 52rem; font-size: clamp(3.1rem, 7vw, 6.4rem); }
.case-header p:last-child { max-width: 40rem; margin-top: 1.2rem; color: var(--night-text); font-size: 1.14rem; }
.case-layout { display: grid; grid-template-columns: minmax(0, 1.43fr) minmax(0, .66fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.case-body { padding-block: clamp(2.8rem, 5vw, 5.4rem); }
.case-body h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); }
.case-content section + section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.case-content section p { max-width: 42rem; margin-top: .65rem; color: var(--text-muted); font-size: 1.04rem; }
.case-sidebar { padding: 1.45rem; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--red); }
.case-facts div + div { margin-top: 1.05rem; }
.case-facts dt { color: var(--red); }
.case-facts dd { margin-top: .2rem; }
.case-sources { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: .85rem; }
.case-sources a { display: block; width: fit-content; margin-block: .3rem; font-size: .91rem; font-weight: 610; }
.case-next { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

@media (max-width: 850px) {
  .hero-grid { gap: 2rem; }
  .hero h1 { font-size: clamp(3.3rem, 8vw, 6rem); }
  .hero-intro { font-size: 1rem; }
  .card-meta { flex-wrap: wrap; }
  .desktop-break { display: none; }
}

@media (max-width: 690px) {
  .wrap { width: min(100% - 2rem, 40rem); }
  .header-inner { grid-template-columns: 1fr auto; gap: .63rem 1rem; padding-block: .8rem .67rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; gap: .35rem 1.3rem; }
  .nav a { display: inline-flex; align-items: center; min-height: 2.35rem; }
  .header .button { grid-column: 2; grid-row: 1; }
  .hero-grid, .work-grid, .interest-grid, .about-grid, .contact-grid, .case-layout { grid-template-columns: 1fr; }
  .hero-grid { gap: 1.8rem; padding-block: 3.2rem 2.15rem; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(3.65rem, 12vw, 6.3rem); }
  .hero-role { margin-top: .85rem; }
  .hero-intro { margin-top: .85rem; }
  .actions { margin-top: 1.3rem; }
  .planet-frame { aspect-ratio: 1.26; }
  .work-card { min-height: auto; }
  .about .portrait { grid-row: 2; max-width: 21rem; }
  .case-sidebar { grid-row: 1; }
  .footer-inner { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }