@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&display=swap');
:root {
  color-scheme: dark;
  --bg: #101112;
  --panel: #181a1c;
  --panel-soft: #202326;
  --accent: #e0443e;
  --accent-light: #ff6257;
  --text: #f4f2ef;
  --muted: #a6a6a5;
  --line: #ffffff20;
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, Arial, sans-serif;
}
body::before {
  position: fixed;
  z-index: 20;
  inset: 0;
  background-image: radial-gradient(#fff2 .6px, transparent .8px);
  background-size: 7px 7px;
  content: "";
  opacity: .045;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 4px;
}
.wrap { width: min(var(--max), calc(100% - 11vw)); margin-inline: auto; }

/* Hero navigation */
.site-header {
  position: absolute;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  height: 104px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 6vw;
}
.brand { display: flex; align-items: center; line-height: 1; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #ffffff72;
  border-radius: 50%;
  color: var(--text);
  font: 800 13px Poppins, sans-serif;
  letter-spacing: -.06em;
}
.hero-nav { display: grid; width: min(720px, 72vw); grid-template-columns: repeat(4, 1fr); align-items: center; gap: 24px; }
.hero-nav a { color: #e6e5e6; font: 700 11px Poppins, sans-serif; letter-spacing: .08em; text-align: center; transition: color .2s; }
.hero-nav a:hover { color: #d84dff; }

/* Personal hero inspired by the supplied reference */
.hero {
  position: relative;
  display: grid;
  min-height: max(760px, 100svh);
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 67%;
  background: linear-gradient(180deg, #050505 66%, #05050500 100%);
  content: "";
}
.hero-portrait {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 50%;
  bottom: 0;
  width: min(60vw, 790px);
  height: min(83vh, 850px);
  transform: translateX(-50%);
}
.hero-person {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.hero-back-title {
  position: absolute;
  z-index: 0;
  top: 31%;
  left: 50%;
  width: 100%;
  margin: 0;
  transform: translateX(-50%);
  color: #cbd0d7;
  font: 900 clamp(66px, 12.2vw, 184px)/.9 Poppins, sans-serif;
  letter-spacing: -.09em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.hero-back-title span { display: block; }
.hero-bottom {
  position: absolute;
  z-index: 3;
  right: 5vw;
  bottom: 4.5%;
  left: 5vw;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  pointer-events: none;
}
.hero-note { margin: 0; color: #dbdadd; font-size: 12px; font-weight: 500; letter-spacing: .04em; line-height: 1.65; }
.hero-contact {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 16px;
  padding: 0 23px;
  border: 1px solid #edb7ff;
  border-radius: 40px;
  background: linear-gradient(110deg, #8400d5, #cb168f 65%, #ed5548);
  box-shadow: 0 0 20px #c529e755, inset 0 0 0 2px #ffffff26;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  pointer-events: auto;
  transition: transform .2s, box-shadow .2s;
}
.hero-contact:hover { transform: translateY(-3px); box-shadow: 0 0 30px #c529e788, inset 0 0 0 2px #ffffff40; }
.hero-contact span { font-size: 17px; }
.hero-cursor {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #111, 0 0 12px #fff8;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .16s ease;
}
body.pointer-active .hero-cursor { opacity: 1;
}

/* Moving personal wordmark */
.marquee { overflow: hidden; padding: 15px 0; border-block: 1px solid var(--line); background: #151617; }
.marquee-track { display: flex; width: max-content; white-space: nowrap; animation: marquee 34s linear infinite; }
.marquee span { padding: 0 28px; color: #c2bfbc; font: 700 12px Poppins, sans-serif; letter-spacing: .18em; }
.marquee b { padding-left: 28px; color: var(--accent-light); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Content sections */
section { position: relative; padding: 112px 0; }
.section-label { margin-bottom: 13px; color: var(--accent-light); font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.section-title { margin: 0; font: 800 clamp(36px, 5.8vw, 72px)/.98 Poppins, sans-serif; letter-spacing: -.065em; text-transform: uppercase; }
.section-title span { display: block; color: transparent; -webkit-text-stroke: 1px #f4f2ef91; }
.about { padding-top: 125px; }
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 7vw; }
.about-intro { position: sticky; top: 100px; }
.about-intro p { max-width: 340px; color: var(--muted); line-height: 1.7; }
.about-copy { padding-top: 3px; }
.about-copy p { max-width: 740px; margin: 0 0 23px; color: #c8c6c4; font-size: clamp(15px, 1.55vw, 18px); line-height: 1.85; }
.about-copy p:first-child { color: var(--text); font-size: clamp(18px, 2vw, 23px); font-weight: 600; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
.tool-chip { padding: 10px 14px; border: 1px solid var(--line); border-radius: 30px; color: #d1cecb; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.tool-chip:hover { border-color: var(--accent); color: white; }

.work-section { padding: 112px 0 124px; background: var(--panel); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.section-head p, .photo-heading p { max-width: 350px; margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.work-list { border-top: 1px solid var(--line); }
.work-row { position: relative; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 22px; overflow: hidden; padding: 25px 10px; border-bottom: 1px solid var(--line); transition: padding .25s, color .25s; }
.work-row::before { position: absolute; inset: 0; transform: scaleY(0); transform-origin: bottom; background: var(--accent); content: ""; transition: transform .3s; }
.work-row:hover::before { transform: scaleY(1); }
.work-row > * { position: relative; z-index: 1; }
.work-no { color: #8c8987; font-size: 11px; }
.work-name { font: 700 clamp(21px, 3.6vw, 42px) Poppins, sans-serif; letter-spacing: -.04em; }
.work-meta { color: #aaa6a3; font-size: 9px; letter-spacing: .14em; text-align: right; }
.work-row:hover .work-meta, .work-row:hover .work-no { color: white; }

.projects { padding: 112px 0; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.project-card { position: relative; display: flex; min-height: 340px; flex-direction: column; align-items: flex-start; justify-content: end; overflow: hidden; padding: 23px; border: 1px solid #ffffff12; border-radius: 8px; background: var(--panel); isolation: isolate; transition: transform .25s, border-color .25s; }
.project-card:hover { transform: translateY(-6px); border-color: #ffffff45; }
.project-art { position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; transition: transform .5s; }
.project-card:hover .project-art { transform: scale(1.045); }
.project-art::after { position: absolute; inset: 0; background: linear-gradient(0deg, #090a0bee 2%, #090a0a4a 68%, #090a0a10); content: ""; }
.art-one { background-image: radial-gradient(circle at 72% 28%, #f06554 0 7%, transparent 7.5%), linear-gradient(135deg, #4d1718, #171819 72%); }
.art-two { background-image: radial-gradient(ellipse at 72% 30%, #283541 0 23%, transparent 23.5%), linear-gradient(135deg, #263440, #171819 76%); }
.art-three { background-image: radial-gradient(circle at 75% 32%, #a93a32 0 15%, transparent 15.5%), linear-gradient(135deg, #481c1b, #171819 72%); }
.project-card h3 { margin: 0 0 6px; font: 700 23px Poppins, sans-serif; }
.project-card p { margin: 0; color: #d0ccca; font-size: 12px; line-height: 1.6; }
.project-card .card-index { position: absolute; top: 18px; right: 18px; color: #fff9; font-size: 9px; letter-spacing: .12em; }

.photo-section { padding: 112px 0; background: #141617; }
.photo-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.photo-grid { display: grid; height: 300px; grid-template-columns: 1.15fr .85fr 1fr 1.1fr; gap: 12px; margin-top: 40px; }
.photo-tile { position: relative; overflow: hidden; margin: 0; border: 1px solid #ffffff18; border-radius: 6px; background: #222426; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .5s, filter .5s; }
.photo-tile:hover img { transform: scale(1.055); filter: saturate(1.12); }
.photo-tile:nth-child(2) { transform: translateY(18px); }
.photo-tile:nth-child(4) { transform: translateY(-12px); }
.photo-tile::after { position: absolute; inset: 0; background: linear-gradient(0deg, #0008, transparent 60%); content: ""; pointer-events: none; }
.photo-caption { position: absolute; z-index: 2; bottom: 13px; left: 13px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.faq { padding: 112px 0; }
.faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 7vw; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 2px; border: 0; background: none; color: white; cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; }
.faq-question span:last-child { color: var(--accent-light); font-size: 23px; transition: transform .2s; }
.faq-question[aria-expanded="true"] span:last-child { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { margin: 0; padding: 0 44px 18px 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.contact { padding: 108px 0 116px; background: var(--panel); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
.contact-copy p { max-width: 370px; color: var(--muted); line-height: 1.8; }
.contact-links { display: grid; gap: 12px; margin-top: 26px; }
.contact-links a { font-size: 13px; }
.contact-links a:hover { color: var(--accent-light); }
.contact-form { display: grid; gap: 13px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 15px 17px; border: 1px solid #ffffff22; border-radius: 5px; outline: none; background: #111314; color: white; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.contact-form textarea { min-height: 125px; resize: vertical; }
.form-hint { color: #999; font-size: 10px; line-height: 1.6; }
.submit { justify-self: start; padding: 13px 20px; border: 0; border-radius: 30px; background: var(--accent); color: white; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.submit:hover { background: var(--accent-light); }
.form-status { min-height: 1.5em; color: #ffc1bc; font-size: 12px; }

.good { padding: 100px 0; text-align: center; }
.good p { max-width: 580px; margin: 22px auto; color: var(--muted); line-height: 1.8; }
.good-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.good-links a { padding: 11px 16px; border: 1px solid var(--line); border-radius: 30px; font-size: 10px; }
.good-links a:hover { border-color: var(--accent); }
.ticker { overflow: hidden; padding: 22px 0; background: #191b1c; white-space: nowrap; }
.ticker span { display: inline-block; animation: marquee 27s linear infinite; font: 700 16px Poppins, sans-serif; letter-spacing: .12em; }
.ticker i { padding: 0 19px; color: var(--accent-light); font-style: normal; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 29px 6.5vw; border-top: 1px solid var(--line); color: #aaa; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.footer-links { display: flex; gap: 17px; }
.footer-links a:hover { color: white; }
.reveal { transform: translateY(20px); opacity: 0; transition: opacity .65s, transform .65s; }
.reveal.visible { transform: none; opacity: 1; }

/* Photo preview */
.photo-lightbox { width: min(92vw, 1080px); max-width: none; max-height: 92vh; padding: 48px 24px 20px; overflow: auto; border: 1px solid #ffffff30; background: #111314; color: white; }
.photo-lightbox::backdrop { background: #000e; backdrop-filter: blur(8px); }
.photo-lightbox img { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; margin: auto; }
.photo-lightbox p { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.lightbox-close { position: absolute; top: 9px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent); color: white; cursor: pointer; font-size: 24px; }

@media (max-width: 820px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 86px; padding: 16px 22px; }
  .hero-nav { width: min(560px, 78vw); gap: 12px; }
  .hero-nav a { font-size: 9px; }
  .hero { min-height: max(720px, 100svh); }
  .hero-back-title { top: 30%; font-size: clamp(56px, 13.5vw, 120px); }
  .hero-portrait { width: min(78vw, 620px); height: min(70vh, 690px); }
  .hero-bottom { right: 24px; bottom: 4%; left: 24px; }
  .hero-note { font-size: 10px; }
  .hero-contact { min-height: 46px; padding-inline: 17px; font-size: 9px; }
  .about-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-intro { position: static; }
  .section-head, .photo-heading { display: block; }
  .section-head p, .photo-heading p { max-width: 560px; margin-top: 18px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card { min-height: 300px; }
  .photo-grid { height: auto; grid-template-columns: repeat(2, 1fr); }
  .photo-tile { height: 220px; }
  .photo-tile:nth-child(2), .photo-tile:nth-child(4) { transform: none; }
}

@media (max-width: 520px) {
  .site-header { height: 76px; padding: 14px 16px; }
  .brand-mark { width: 34px; height: 34px; font-size: 11px; }
  .hero-nav { width: calc(100% - 49px); gap: 4px; }
  .hero-nav a { font-size: 8px; letter-spacing: .03em; }
  .hero { min-height: max(690px, 100svh); }
  .hero-back-title { top: 30%; font-size: clamp(49px, 12vw, 80px); letter-spacing: -.085em; }
  .hero-portrait { width: 100vw; height: 61vh; }
  .hero-bottom { right: 17px; bottom: 3.5%; left: 17px; align-items: end; gap: 10px; }
  .hero-note { font-size: 8px; line-height: 1.55; }
  .hero-contact { min-height: 40px; gap: 8px; padding-inline: 12px; font-size: 8px; letter-spacing: .08em; }
  .hero-contact span { font-size: 14px; }
  section { padding: 82px 0; }
  .about { padding-top: 95px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 290px; }
  .photo-grid { gap: 8px; }
  .photo-tile { height: 160px; }
  .photo-caption { bottom: 9px; left: 9px; font-size: 8px; }
  .work-row { grid-template-columns: 31px 1fr; gap: 8px 12px; padding: 20px 3px; }
  .work-meta { grid-column: 2; text-align: left; }
  .work-name { font-size: 21px; }
  footer { display: grid; justify-items: start; padding: 24px 20px; }
  .footer-links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (hover: hover) and (pointer: fine) {
  .hero, .hero * { cursor: none; }
}



.vd-header,.vd-hero{--vd-font:'Barlow Condensed','Arial Narrow',Impact,sans-serif;color:#fff}
.vd-header{position:absolute;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 24px;gap:20px}
.vd-header nav{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.vd-label{font:800 clamp(18px,2vw,32px)/.94 var(--vd-font);display:inline-block;border:1px solid #fff;padding:2px 5px 4px;color:#fff;text-decoration:none;transition:background .2s,color .2s}
.vd-logo,.vd-label:hover{background:#fff;color:#080807}
.vd-label:focus-visible,.vd-continue:focus-visible{outline:3px solid #fff;outline-offset:5px}
.vd-hero{height:100vh;height:100svh;min-height:580px;position:relative;overflow:hidden;isolation:isolate;background:var(--bg)}
.vd-image,.vd-shade{position:absolute;inset:0;z-index:-2}
.vd-image{transform:translate3d(0,var(--vd-shift,0px),0) scale(1.05);will-change:transform}
.vd-image img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.vd-shade{z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 45%,rgba(8,7,6,.25) 70%,var(--bg) 100%)}
.vd-caption{position:absolute;top:43%;left:24px;display:flex;flex-direction:column;font:600 12px/1.6 var(--vd-font);letter-spacing:.06em;max-width:175px}
.vd-title-area{position:absolute;bottom:0;width:100%}
.vd-kicker{margin:0;text-align:center;border-block:1px solid rgba(255,255,255,.85);padding:8px 16px;font:700 clamp(15px,1.75vw,28px)/1 var(--vd-font)}
.vd-hero h1{font:800 19.5vw/.86 var(--vd-font);letter-spacing:-.025em;white-space:nowrap;text-align:center;margin:0;padding:0 8px 14px;transform-origin:50% 100%;animation:vd-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.vd-continue{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-top:1px solid #fff;color:#fff;text-decoration:none;font:700 16px/1 var(--vd-font);letter-spacing:.035em;background:var(--bg)}
.vd-continue span:last-child{font-size:23px}
@keyframes vd-enter{from{opacity:0;transform:translateY(35%)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.vd-header{padding:16px;gap:12px}.vd-secondary{display:none}.vd-header nav{gap:5px}.vd-label{font-size:22px}.vd-image img{object-position:52% 35%}.vd-caption{left:16px;top:18%;font-size:11px;max-width:135px}.vd-hero{min-height:540px}.vd-hero h1{font-size:19.5vw;padding-block:14px 18px}.vd-kicker{font-size:17px;padding-block:10px}.vd-continue{padding:16px}.vd-shade{background:linear-gradient(180deg,#0003,transparent 45%,var(--bg) 100%)}}
@media(prefers-reduced-motion:reduce){.vd-hero h1{animation:none}.vd-image{transform:none;will-change:auto}html{scroll-behavior:auto!important}}

/* Warm charcoal palette, drawn from the cinematic portrait. */
:root{--bg:#15110e;--panel:#1c1713;--panel-soft:#25201a}
.marquee{background:var(--bg)}
.photo-section{background:#191410}
.photo-tile{background:var(--panel-soft)}
.contact-form input,.contact-form textarea,.photo-lightbox{background:#120f0c}
.ticker{background:var(--panel)}

/* User-selected portrait continues behind the entire homepage. */
body{background:#15110e;isolation:isolate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#100c09aa,#100c09d9),url('../images/ivo-homepage-background.png') center center/cover no-repeat}
.about,.projects,.faq,.good{background:transparent}
.work-section,.contact,.photo-section{background:rgba(21,17,14,.70)}
.marquee,.ticker,footer{background:rgba(21,17,14,.82)}
.project-card,.photo-tile{background-color:rgba(28,23,19,.78)}
.vd-continue{background:rgba(21,17,14,.72)}
@media(max-width:700px){body::after{background-position:54% center}}


/* VANDAAG editorial layout: large type, portrait stories, staggered gallery. */
:root{--accent:#c2a080;--accent-light:#e7c6a3;--muted:#c2b7ad;--line:#ffffff40;--vd-editorial:'Barlow Condensed','Arial Narrow',Impact,sans-serif}
.wrap{width:calc(100% - 48px);max-width:1600px;margin-inline:auto}
section:not(.vd-hero){padding-block:clamp(72px,9vw,150px)}
.vd-hero{padding:0}
.section-label{display:table;background:#f5f1eb;color:#17110d;padding:3px 7px;font:800 20px/1 var(--vd-editorial);letter-spacing:0;margin-bottom:24px}
.section-title{font:800 clamp(64px,10vw,170px)/.84 var(--vd-editorial);letter-spacing:-.025em;overflow-wrap:normal}
.section-title span{color:#fff;-webkit-text-stroke:0}
.about-grid{grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.about-intro{position:relative;top:auto}
.about-intro .section-title{font-size:clamp(64px,8vw,130px)}
.vd-editorial-portrait{margin:36px 0 0;overflow:hidden;aspect-ratio:4/5}
.vd-editorial-portrait img{width:100%;height:100%;object-fit:cover;object-position:52% 35%;display:block}
.vd-editorial-portrait figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.about-copy{padding-top:80px}
.about-copy p:first-child{font:600 clamp(26px,3.1vw,50px)/1.12 var(--vd-editorial);text-transform:uppercase}
.about-copy p{font-size:17px;line-height:1.8}
.tool-chip{border-radius:0;font:700 16px/1 var(--vd-editorial);padding:7px 10px;letter-spacing:.02em}
.vd-detail-image{margin:60px 0 0;width:78%;margin-left:auto;aspect-ratio:3/4;overflow:hidden}
.vd-detail-image img{width:100%;height:100%;object-fit:cover;object-position:55% center;display:block}
.section-head,.photo-heading{align-items:start;margin-bottom:56px}
.section-head p,.photo-heading p{padding-top:32px;font-size:16px}
.work-row{padding:30px 8px;border-color:#ffffff55}
.work-name{font:700 clamp(34px,5vw,80px)/1 var(--vd-editorial);text-transform:uppercase}
.work-meta{font-size:11px}
.work-row:hover::before{background:#483326}
.project-grid{grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.project-card{min-height:560px;min-height:clamp(380px,48vw,760px);border-radius:0;border:0;padding:28px}
.project-card:nth-child(2){margin-top:180px}
.project-card:nth-child(3){grid-column:1/-1;min-height:clamp(380px,52vw,760px);margin-top:20px}
.project-card h3{font:800 clamp(45px,6vw,90px)/.95 var(--vd-editorial);text-transform:uppercase}
.project-card p{font-size:15px}
.card-index{background:#f5f1eb;padding:6px 8px;color:#15110e!important}
.project-art::after{background:linear-gradient(0deg,#100c09ef,transparent 75%)}
.art-three{background-image:url('../images/ivo-homepage-background.png');background-position:center 35%}
.photo-grid{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.photo-tile{border-radius:0;border:0;aspect-ratio:3/5;transform:none!important}
.photo-tile:nth-child(2){margin-top:110px;aspect-ratio:3/4}
.photo-tile:nth-child(3){margin-top:40px;aspect-ratio:3/5}
.photo-tile:nth-child(4){margin-top:180px;aspect-ratio:3/4}
.photo-tile img{display:block}
.photo-caption{font:700 18px/1 var(--vd-editorial);letter-spacing:0;background:#f5f1eb;color:#15110e;padding:5px 7px}
.faq-grid,.contact-grid{grid-template-columns:1fr 1fr;gap:6vw}
.faq-question{font:600 clamp(20px,2vw,28px)/1.2 var(--vd-editorial);padding-block:26px}
.contact-form input,.contact-form textarea{border-radius:0;padding:20px 0;border-width:0 0 1px;background:transparent}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid #e7c6a3;outline-offset:5px}
.submit,.good-links a{border-radius:0;background:#f5f1eb;color:#15110e;font:800 24px/1 var(--vd-editorial);padding:10px 18px}
.submit:hover{background:#e7c6a3}
.good .section-title{font-size:clamp(80px,13vw,210px)}
.marquee span,.ticker span{font-family:var(--vd-editorial);font-size:22px;letter-spacing:.04em}
.reveal{transition:opacity .8s,transform .8s}
@media(max-width:1000px){.section-title{font-size:clamp(64px,10vw,120px)}.project-card:nth-child(2){margin-top:100px}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-tile:nth-child(3){margin-top:0}.photo-tile:nth-child(4){margin-top:40px}}
@media(max-width:700px){.wrap{width:calc(100% - 32px)}.about-grid,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.about-copy{padding-top:0}.vd-detail-image{width:72%;margin-top:32px}.section-head,.photo-heading{display:block}.section-head p,.photo-heading p{padding-top:22px}.project-grid{grid-template-columns:1fr}.project-card:nth-child(2),.project-card:nth-child(3){margin-top:0;grid-column:auto}.project-card{min-height:460px}.work-row{grid-template-columns:28px 1fr;gap:12px}.work-meta{grid-column:2;text-align:left}.photo-tile:nth-child(2){margin-top:50px}.photo-tile:nth-child(4){margin-top:50px}.photo-caption{font-size:14px;left:8px;bottom:8px}.section-title,.about-intro .section-title{font-size:clamp(54px,14vw,98px)}footer{flex-wrap:wrap}.vd-editorial-portrait{aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.marquee-track,.ticker span{animation:none}.project-art,.project-card,.photo-tile img{transition:none}}

/* Third section: light editorial contrast, as requested. */
#works{background:#f5f3ef;color:#19130f;--line:#19130f40;--muted:#554a42;--accent-light:#563e2c;color-scheme:light}
#works .section-title,#works .section-title span{color:#19130f;-webkit-text-stroke:0}
#works .section-label{background:#19130f;color:#f5f3ef}
#works .section-head p{color:#554a42}
#works .work-list,#works .work-row{border-color:#19130f55}
#works .work-no,#works .work-meta{color:#65574c}
#works .work-row:hover{color:#fff}
#works .work-row:hover .work-no,#works .work-row:hover .work-meta{color:#fff}
#works .work-row:focus-visible{outline:2px solid #563e2c;outline-offset:5px}

/* Scroll-driven dark-to-light palette; static light fallback without JS. */
#works{--works-background:245 243 239;--works-foreground:25 19 15;--works-muted:85 74 66;background:rgb(var(--works-background));color:rgb(var(--works-foreground))}
#works .section-title,#works .section-title span{color:rgb(var(--works-foreground))}
#works .section-label{background:rgb(var(--works-foreground));color:rgb(var(--works-background))}
#works .section-head p,#works .work-no,#works .work-meta{color:rgb(var(--works-muted))}
#works .work-list,#works .work-row{border-color:rgb(var(--works-foreground) / .34)}
#works .work-row:hover .work-no,#works .work-row:hover .work-meta{color:#fff}
#works .work-row:focus-visible{outline-color:rgb(var(--works-foreground))}

/* Fourth section mirrors the transition back to warm dark. */
#projects{--projects-background:21 17 14;--projects-foreground:245 243 239;--projects-muted:194 183 173;background:rgb(var(--projects-background));color:rgb(var(--projects-foreground))}
#projects .section-title,#projects .section-title span{color:rgb(var(--projects-foreground))}
#projects .section-label{background:rgb(var(--projects-foreground));color:rgb(var(--projects-background))}
#projects .section-head p{color:rgb(var(--projects-muted))}
#projects .project-card{color:#fff}
#projects .project-card:focus-visible{outline-color:rgb(var(--projects-foreground))}

/* Hero typography and white information band, sized to the viewport. */
.vd-hero h1{font-weight:900;font-size:var(--vd-title-size,19.5vw);line-height:.86;padding:8px clamp(6px,.6vw,16px) 12px;letter-spacing:-.025em}
.vd-hero h1 span{display:inline-block;white-space:nowrap}
.vd-kicker{font-weight:800;font-size:clamp(14px,1.7vw,34px);line-height:1.1;padding:8px 12px;border-color:#fff}
.vd-continue{justify-content:center;gap:16px;background:#fff;color:#15110e;border:0;padding:9px 20px;font:800 clamp(15px,1.7vw,34px)/1.1 var(--vd-font);letter-spacing:0;text-align:center;min-height:44px}
.vd-continue:hover{background:#efe7df}
.vd-continue span:last-child{font-size:inherit}
.vd-continue:focus-visible{outline:3px solid #15110e;outline-offset:-5px}
@media(max-width:700px){.vd-hero h1{padding-block:12px 16px}.vd-kicker{font-size:clamp(13px,3.4vw,23px);padding-block:9px}.vd-continue{font-size:clamp(13px,3.6vw,24px);padding:11px 10px;gap:8px;min-height:42px}}

/* Equal breathing room above and below the shorter name. */
.vd-hero h1{--vd-name-gap:clamp(12px,1.4vw,28px);font-size:var(--vd-title-size,16.4vw);line-height:1;padding-block:var(--vd-name-gap);letter-spacing:0}
.vd-hero h1 span{letter-spacing:var(--vd-title-tracking,.024em);padding-left:var(--vd-title-tracking,.024em)}

/* Reference composition: 68% portrait, 5% ruled strip, 22% name, 5% band. */
.vd-title-area{height:32svh;display:grid;grid-template-rows:4.6svh 22.6svh 4.8svh}
.vd-kicker{display:flex;justify-content:center;align-items:center;margin:0;padding:0 10px;font-size:clamp(13px,3.1svh,36px);font-weight:800;border-block:1px solid #fff;white-space:nowrap}
.vd-hero h1{display:flex;justify-content:center;align-items:center;height:100%;margin:0;padding:clamp(4px,.65svh,10px) .6vw;font-size:var(--vd-title-size,27svh);line-height:1;animation:none;overflow:visible}
.vd-hero h1 span{flex:none;line-height:1;transform:scaleX(var(--vd-title-scale,1));transform-origin:center}
.vd-continue{height:100%;min-height:0;padding:0 10px;display:flex;align-items:center;justify-content:center;font-size:clamp(13px,3.1svh,36px);font-weight:800;white-space:nowrap;background:#fff;color:#15110e}
.vd-continue span:last-child{display:none}
.vd-caption{display:none}
.vd-header{padding:14px 24px}
.vd-label{background:#fff;color:#15110e;border:0;font-size:clamp(20px,3.6svh,40px);padding:1px 4px 3px}
.vd-label:hover{background:#e7c6a3}
@media(max-width:700px){.vd-header{padding:14px 16px}.vd-label{font-size:clamp(18px,5vw,28px)}.vd-kicker,.vd-continue{font-size:clamp(12px,3.6vw,22px)}.vd-title-area{height:32svh}.vd-hero h1{padding-inline:1.2vw}}

/* User's Anton wordmark, inline so the loaded font applies to SVG text. */
.vd-hero .vd-vector-title{font-size:inherit;padding-block:.65svh}
.vd-user-wordmark{display:block;width:100%;height:100%;overflow:visible}
.vd-user-wordmark text{font-family:Anton,Impact,'Arial Narrow',sans-serif}


.vd-cursor-ring{position:fixed;left:0;top:0;width:24px;height:24px;box-sizing:border-box;border:2px solid #e84020;border-radius:50%;box-shadow:0 0 10px #e84020b3;pointer-events:none;z-index:10001;opacity:0;transform:translate(-100px,-100px);transition:opacity .2s,background-color .18s,box-shadow .18s;will-change:transform}
.vd-cursor-ring.is-visible{opacity:1}
.vd-cursor-ring.is-hover{background:#e840202e;box-shadow:0 0 18px #e84020e6}
.vd-cursor-glow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10000}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){html.vd-cursor-enabled,html.vd-cursor-enabled body,html.vd-cursor-enabled a,html.vd-cursor-enabled button,html.vd-cursor-enabled [role=button],html.vd-cursor-enabled img{cursor:none}html.vd-cursor-enabled input,html.vd-cursor-enabled textarea,html.vd-cursor-enabled [contenteditable=true]{cursor:text}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.vd-cursor-ring,.vd-cursor-glow{display:none}}


/* All sections from number three share the same reversible palette. */
#top > section.vd-scroll-theme{background:rgb(var(--section-background,21 17 14));color:rgb(var(--section-foreground,245 243 239));--muted:rgb(var(--section-muted,194 183 173));--line:rgb(var(--section-foreground,245 243 239) / .34)}
#top > section.vd-scroll-theme .section-title,#top > section.vd-scroll-theme .section-title span{color:rgb(var(--section-foreground));-webkit-text-stroke:0}
#top > section.vd-scroll-theme .section-label{background:rgb(var(--section-foreground));color:rgb(var(--section-background))}
#top > section.vd-scroll-theme :is(.section-head p,.photo-heading p,.work-no,.work-meta,.faq-answer p,.contact-copy p,.good p,.form-hint,.form-status){color:rgb(var(--section-muted))}
#top > section.vd-scroll-theme .faq-grid > div > p{color:rgb(var(--section-muted))!important}
#top > section.vd-scroll-theme :is(.work-list,.work-row,.faq-list,.faq-item){border-color:rgb(var(--section-foreground) / .34)}
#top > section.vd-scroll-theme .faq-question{color:rgb(var(--section-foreground))}
#top > section.vd-scroll-theme .faq-question span:last-child{color:rgb(var(--section-muted))}
#top > section.vd-scroll-theme .work-row:hover,#top > section.vd-scroll-theme .work-row:hover :is(.work-no,.work-meta){color:#fff}
#top > section.vd-scroll-theme :is(.project-card,.photo-tile){color:#fff}
#top > section.vd-scroll-theme .contact-form :is(input,textarea){color:rgb(var(--section-foreground));border-color:rgb(var(--section-foreground) / .4)}
#top > section.vd-scroll-theme .contact-form :is(input,textarea)::placeholder{color:rgb(var(--section-muted));opacity:1}
#top > section.vd-scroll-theme :is(a,button,input,textarea):focus-visible{outline-color:rgb(var(--section-foreground))}


/* Subtle full-page film treatment. Pointer events always pass through. */
body::before{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:1;background-image:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 43%,rgba(27,15,7,.10) 78%,rgba(13,8,5,.22) 100%),linear-gradient(125deg,rgba(187,119,62,.035),transparent 48%,rgba(65,76,82,.025));
}
html::after{
  content:"";position:fixed;inset:0;z-index:9001;pointer-events:none;
  background-image:url('../images/film-grain.svg');background-size:180px 180px;
  opacity:.045;mix-blend-mode:soft-light;
}
@media(max-width:700px){body::before{background:radial-gradient(ellipse at 50% 42%,transparent 48%,rgba(13,8,5,.15) 100%),linear-gradient(125deg,rgba(187,119,62,.025),transparent 65%)}html::after{opacity:.035}}
@media(forced-colors:active){body::before,html::after{display:none}}
@media print{body::before,html::after{display:none}}