/* Variation 03: white accents, ink black, editorial typography. */
:root {
  --bg: #0b0b09;
  --panel: #151512;
  --ink: #f2f0e5;
  --muted: #aaa99d;
  --line: #f2f0e525;
  --cyan: #ffffff;
  --green: #ffffff;
  --max: 1400px;
  --headline: "Barlow Condensed", Impact, sans-serif;
}
body { background: var(--bg); }
.site-nav, .site-nav.scrolled { background: #0b0b09ed; }
.site-nav { height: 80px; }
.brand { font-size: 14px; }
.brand-mark { border: 0; border-radius: 0; background: var(--cyan); color: var(--bg); font-weight: 800; transform: rotate(-5deg); }
.nav-links { gap: 40px; }
.nav-links a { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.nav-links a.active, .nav-links a:hover { color: var(--cyan); }
.mode-switch { padding-left: 28px; }
/* The switch labels reflect the preserved fluid palettes, independently of the page theme. */
.mode-signal .mode-label-signal { color: #61dde5; }
.switch input:checked + .switch-track .switch-thumb { background: #61dde5; }
.hero { padding-top: 118px; }
.hero-topline { margin-bottom: 27px; }
.eyebrow, .location { font-size: 11px; }
.location { color: var(--muted); }
.hero-grid { grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; }
.hero-copy { padding: 0; }
.hero h1 { font-family: var(--headline); font-size: clamp(76px, 8vw, 112px); font-weight: 800; line-height: .9; letter-spacing: -.028em; color: var(--cyan); margin: 5px 0 38px; }
.hero h1 > span { display: block; }
.hero h1 > span + span { margin-top: 13px; }
.name-period { color: var(--ink); }
.hero-description { display: grid; grid-template-columns: .85fr 1fr; gap: 25px; margin-bottom: 23px; }
.hero-statement { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.04em; margin: 0; }
.hero-sub { font-size: 13px; line-height: 1.8; margin: 0; max-width: 31ch; }
.btn { border-radius: 0; min-height: 48px; padding-inline: 22px; }
.btn-primary, .signal-send { color: var(--bg); }
.btn-primary:hover, .signal-send:hover { background: #dedede; border-color: #dedede; }
.btn-ghost { border-color: #f2f0e540; background: transparent; }
.btn:hover { border-color: var(--cyan); }
.field-image { border-radius: 0; height: 520px; transform: rotate(2deg); border: 1px solid #f2f0e547; overflow: hidden; animation: photo-arrive 1.1s ease both; }
.field-image img { filter: grayscale(1) brightness(.78); }
.field-image:hover img { filter: grayscale(0) brightness(.88); transform: scale(1.05); }
.field-image::after { background: linear-gradient(#0b0b0944,transparent 40%,#0b0b09e8); }
.field-image-top { color: var(--cyan); font-size: 10px; }
.field-image-bottom { font-family: var(--headline); font-size: 43px; text-transform: uppercase; font-weight: 700; line-height: .95; bottom: 28px; }
.image-caption { color: var(--cyan); margin-top: 17px; font-size: 10px; }
.scan-line { background: linear-gradient(90deg,transparent,#ffffff1c,transparent); }
.hero-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 42px; padding: 22px 0 28px; font: 10px/1.6 var(--mono); color: var(--muted); }
.hero-bottom a { text-decoration: none; color: var(--ink); }
.hero-bottom a:hover { color: var(--cyan); }
.gallery-section { padding-top: 88px; }
.gallery-section .section-head { padding-top: 0; border: 0; }
.section-head h2 { font: 700 clamp(38px,4.2vw,60px)/.95 var(--headline); letter-spacing: -.015em; margin: 20px 0; }
.outline-type { -webkit-text-stroke: 1px var(--ink); color: transparent; }
.section-head p { font-size: 15px; max-width: 55ch; }
.carousel-top { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 30px; }
.carousel-hint { color: var(--muted); font-size: 10px; }
.carousel-btn { background: transparent; border-color: #f2f0e544; border-radius: 0; width: 44px; height: 44px; }
.carousel-btn:hover { background: var(--cyan); color: var(--bg); }
.carousel-track { gap: 22px; scrollbar-color: var(--cyan) transparent; }
.gallery figure { border-radius: 0; border-color: #f2f0e522; }
#photos-gallery figure { flex-basis: calc((100% - 44px)/3); }
#photos-gallery figure:nth-child(3n + 2) { margin-top: 36px; }
#photos-gallery img { height: 410px; filter: saturate(.7); }
#photos-gallery figure:hover img { filter: saturate(1); }
.lightbox { background: #0b0b09f5; }
.lightbox img { border-radius: 0; }
.contact { margin-top: 50px; padding-top: 75px; border-top: 1px solid var(--line); }
.contact-shell { grid-template-columns: .9fr 1.1fr; gap: 70px; }
.contact-intro { padding-top: 0; }
.contact h2 { font: 800 clamp(64px,6.5vw,90px)/.8 var(--headline); letter-spacing: -.025em; margin: 28px 0; }
.contact-intro p { font-size: 15px; }
.contact-grid { margin-top: -105px; }
.signal-form { background: #141411; border-radius: 0; border-color: #f2f0e52c; }
.signal-topline { color: var(--muted); }
.signal-fieldset legend, .signal-prompt, .signal-identity label>span { color: var(--ink); font-size: 13px; }
.signal-types span { border-radius: 0; font-size: 11px; }
.signal-types input:checked+span { border-color: var(--cyan); background: #ffffff10; }
.signal-form textarea, .signal-form input:not([type=radio]):not([type=hidden]) { background: var(--bg); border-radius: 0; font-size: 14px; }
.signal-form ::placeholder { color: #8c8b80; }
.signal-send { border-radius: 0; }
.signal-status.ok { color: #ace594; }
.social-links a { color: var(--muted); font-size: 12px; }
.site-footer { color: var(--muted); }
.resume-hero h1 { font: 800 clamp(70px,8vw,110px)/.85 var(--headline); letter-spacing: -.025em; margin: 20px 0 32px; }
.timeline { border-radius: 0; background: #131310; }
.role ul { color: #c1c0b5; }
.tags span { border-radius: 0; }
.tags .featured-cert { border-color: #ffffff50; }
@keyframes photo-arrive { from { opacity: 0; transform: translateY(25px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(2deg); } }
@media(max-width:1100px) {
  .hero-grid { gap: 35px; }
  .hero h1 { font-size: 10vw; }
  .hero-description { grid-template-columns: 1fr; gap: 15px; }
  .hero-sub { max-width: 40ch; }
  .field-image { height: 520px; }
  .contact-shell { gap: 35px; }
  #photos-gallery img { height: 340px; }
}
@media(max-width:800px) {
  .site-nav { height: 75px; }
  .mobile-panel { background: #0b0b09f7; }
  .mobile-panel a { font: 700 65px var(--headline); text-transform: uppercase; }
  .mode-switch { padding-left: 0; }
  .hero h1 { font-size: 11vw; }
  .hero-statement { font-size: 22px; }
  .hero-grid { gap: 25px; }
  .field-image { height: 470px; }
  .hero-bottom { font-size: 9px; }
  .scroll-note { display: none; }
  #photos-gallery figure { flex-basis: calc((100% - 22px)/2); }
  #photos-gallery img { height: 360px; }
  .contact-shell { grid-template-columns: 1fr; }
  .contact h2 { font-size: 76px; }
  .contact-grid { margin: 0; }
  .contact-intro p { max-width: 48ch; }
}
@media(max-width:560px) {
  .hero { padding-top: 105px; }
  .brand { font-size: 11px; }
  .hero-topline { gap: 15px; }
  .eyebrow { font-size: 9px; }
  .location { font-size: 8px; max-width: 100px; }
  .hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .hero h1 { font-size: clamp(68px,21vw,100px); margin-bottom: 27px; }
  .hero h1 > span + span { margin-top: 10px; }
  .hero-description { grid-template-columns: 1fr; }
  .hero-statement { font-size: 26px; }
  .hero-sub { font-size: 14px; }
  .hero-actions { gap: 9px; }
  .btn { padding-inline: 16px; gap: 12px; }
  .field-image { height: 380px; margin-inline: 7px; }
  .field-image-bottom { font-size: 40px; }
  .hero-bottom { flex-direction: column; gap: 7px; margin-top: 28px; }
  .gallery-section { padding-top: 60px; }
  .section-head h2 { font-size: clamp(34px,8vw,44px); }
  .section-head p { font-size: 14px; }
  #photos-gallery figure { flex-basis: 87%; }
  #photos-gallery figure:nth-child(3n + 2) { margin-top: 0; }
  #photos-gallery img { height: 380px; }
  .contact { padding-top: 55px; margin-top: 25px; }
  .signal-form textarea, .signal-form input:not([type=radio]):not([type=hidden]) { font-size: 16px; }
  .signal-types span { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .field-image { animation: none; }
  .field-image { transform: none; }
}

/* Scroll choreography. Compact and reduced-motion layouts remain in normal flow. */
.hero-sticky { position: relative; }
.scroll-cinema .scroll-scene { height: 185vh; padding-top: 0; }
.scroll-cinema .hero-sticky { position: sticky; top: 0; height: 100vh; padding-top: 118px; overflow: hidden; }
.scroll-cinema .hero-grid { position: relative; }
.scroll-cinema .hero-copy { animation: none; transform: translateX(calc(var(--journey, 0) * -180px)); opacity: calc(1 - var(--journey, 0) * 1.6); will-change: transform, opacity; }
.scroll-cinema .hero h1 > span:first-child { transform: translateX(calc(var(--journey, 0) * -110px)); }
.scroll-cinema .hero h1 > span:nth-child(2) { transform: translateX(calc(var(--journey, 0) * 75px)); }
.scroll-cinema .field-image { animation: none; transform-origin: right center; transform: translateX(calc(var(--journey, 0) * -8px)) rotate(calc(2deg - var(--journey, 0) * 2deg)) scale(calc(1 + var(--journey, 0) * .52)); will-change: transform; }
.scroll-cinema .field-image img { filter: grayscale(calc(1 - var(--journey, 0))) brightness(.85); }
.scroll-cinema .hero-bottom { opacity: calc(1 - var(--journey, 0) * 1.8); }
.scroll-cinema .hero-topline { opacity: calc(1 - var(--journey, 0)); }
.scroll-cinema #photos { height: 240vh; padding-top: 75px; }
.scroll-cinema #photos > .wrap { position: sticky; top: 100px; }
.scroll-cinema #photos .section-head { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 70px; margin-bottom: 15px; align-items: end; }
.scroll-cinema #photos .eyebrow { grid-column: 1 / -1; }
.scroll-cinema #photos h2 { font-size: clamp(38px,3.8vw,54px); margin: 15px 0 0; }
.scroll-cinema #photos .section-head p { font-size: 13px; margin: 0; }
.scroll-cinema #photos .carousel-top { margin-top: 20px; padding-top: 15px; }
.scroll-cinema #photos-gallery { scroll-snap-type: none; }
.scroll-cinema #photos-gallery img { height: min(38vh,380px); }
#cv { padding-top: 100px; padding-bottom: 40px; }
#cv .cv-experience { display: grid; grid-template-columns: .78fr 1.22fr; gap: 35px 60px; align-items: start; }
#cv .section-head { position: sticky; top: 110px; }
#cv .section-head h2 { font-size: clamp(38px,3.8vw,54px); }
#cv .timeline { padding-inline: 25px; }
#cv .role { grid-template-columns: 1fr; gap: 10px; }
#cv .cv-columns { margin-top: 55px; }
@media(min-width:801px) and (max-height:850px) {
  .scroll-cinema .hero-sticky { padding-top: 105px; }
  .scroll-cinema .hero h1 { font-size: min(8vw,108px); }
  .scroll-cinema .field-image { height: 430px; }
  .scroll-cinema .hero-topline { margin-bottom: 18px; }
  .scroll-cinema .hero-bottom { margin-top: 28px; }
}
@media(max-width:800px) {
  #cv .cv-experience { grid-template-columns: 1fr; }
  #cv .section-head { position: static; }
  #cv { padding-top: 70px; }
}

.btn:hover{border-color:#ffffff70}