/* Väli Studio: mobile-first editorial system, scoped to one staging concept. */
body.vali-body { margin:0; background:#eae9e2; }
.vali { --vali-paper:#eae9e2; --vali-ink:#242b28; --vali-muted:#626a64; --vali-line:#bbbeb4; --vali-olive:#6b7768; color:var(--vali-ink); background:var(--vali-paper); font:400 16px/1.55 'Segoe UI',Arial,sans-serif; overflow:clip; }
.vali *, .vali *::before, .vali *::after { box-sizing:border-box; }
.vali a { color:inherit; }
.vali :focus-visible { outline:2px solid #53675a; outline-offset:4px; }
.vali h1, .vali h2, .vali h3 { color:inherit; font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.055em; line-height:1.04; }
.vali h1 em, .vali h2 em { color:#6b7768; font-weight:400; }
.vali p { margin-top:0; }
.vali__skip { position:absolute; z-index:10; left:1rem; top:-100px; padding:.6rem 1rem; background:#fff; }
.vali__skip:focus { top:1rem; }
.vali__concept { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:32px; padding:.4rem 1rem; background:#344039; color:#f5f3eb; font-size:.62rem; letter-spacing:.045em; }
.vali__concept a { flex:none; text-underline-offset:.22rem; }
.vali__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:75px; padding:1rem; border-bottom:1px solid var(--vali-line); }
.vali__brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-size:.84rem; font-weight:750; letter-spacing:.19em; line-height:1.03; }
.vali__brand small { display:block; margin-top:.2rem; font-size:.45rem; font-weight:500; letter-spacing:.25em; }
.vali__brand-glyph { display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid var(--vali-ink); font:italic 1.4rem/.8 Georgia,serif; letter-spacing:-.2em; padding-right:.15rem; }
.vali__brand-glyph span { color:#8a9383; }
.vali__header nav { display:flex; align-items:center; gap:1.1rem; font-size:.75rem; }
.vali__header nav a { text-decoration:none; padding:.4rem 0; }
.vali__header nav a:not(:last-child) { display:none; }
.vali__header nav a:last-child { border-bottom:1px solid currentColor; }
.vali__header nav a:hover, .vali__intro-foot a:hover, .vali__contact a:hover { color:#5b7564; }
.vali__eyebrow, .vali__index, .vali__project-open, .vali__project-info dt, .vali__dialog-note { font:500 .65rem/1.4 'Courier New',monospace; letter-spacing:.08em; text-transform:uppercase; }
.vali__eyebrow, .vali__index { color:#626c63; }
.vali__intro { padding:4.5rem 1rem 3.6rem; background-image:radial-gradient(#827d6b13 .4px,transparent .6px); background-size:7px 7px; }
.vali__intro h1 { margin:1.5rem 0 2rem; font-size:clamp(3.55rem,13vw,5rem); }
.vali__intro-foot { display:grid; gap:1.5rem; }
.vali__intro-foot p { max-width:29rem; margin:0; color:#47524a; font-size:.95rem; line-height:1.7; }
.vali__intro-foot a { width:fit-content; padding-bottom:.3rem; border-bottom:1px solid currentColor; font-size:.78rem; font-weight:650; text-decoration:none; }
.vali__intro-foot a span { padding-left:1.8rem; }
.vali__projects { padding:2rem 1rem 6rem; }
.vali__section-head { display:grid; gap:.5rem; padding:2rem 0 2.5rem; border-top:1px solid var(--vali-line); }
.vali__section-head h2 { margin:.5rem 0 1rem; font-size:clamp(2.8rem,10vw,4.7rem); }
.vali__section-head>p:last-child { max-width:26rem; color:var(--vali-muted); font-size:.85rem; line-height:1.65; }
.vali__project { min-width:0; }
.vali__project + .vali__project { margin-top:4rem; }
.vali__project-link { display:block; position:relative; text-decoration:none; }
.vali__image-wrap { position:relative; overflow:hidden; background:#a7aaa0; }
.vali__project img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.045); transition:filter .45s ease; }
.vali__project-link:hover img { filter:brightness(.93); }
.vali__project--feature .vali__image-wrap { aspect-ratio:1/1.05; }
.vali__project-pair { display:grid; gap:4rem; margin-top:5rem; }
.vali__project-pair .vali__image-wrap { aspect-ratio:4/5; }
.vali__project-pair .vali__project:nth-child(2) .vali__image-wrap { aspect-ratio:4/3; }
.vali__project-open { position:absolute; right:.8rem; bottom:.8rem; padding:.65rem .85rem; background:#efeee7; color:#26312a; transition:background .2s,transform .2s; }
.vali__project-link:hover .vali__project-open { background:#fff; transform:translateY(-3px); }
.vali__project-open span { padding-left:.7rem; }
.vali__project-info { display:grid; gap:1.2rem; padding:1.1rem 0 0; }
.vali__project-info .vali__index { margin-bottom:.55rem; }
.vali__project-info h3 { margin:0 0 .6rem; font-size:clamp(2.25rem,8vw,3.6rem); }
.vali__project-desc { max-width:29rem; margin:0; color:#505b53; font-size:.9rem; line-height:1.65; }
.vali__project-info dl, .vali__dialog-copy dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin:0; padding-top:.8rem; border-top:1px solid var(--vali-line); }
.vali__project-info dl div, .vali__dialog-copy dl div { min-width:0; }
.vali__project-info dt, .vali__dialog-copy dt { margin-bottom:.4rem; color:#68726a; font-size:.57rem; }
.vali__project-info dd, .vali__dialog-copy dd { margin:0; font-size:.73rem; line-height:1.35; }
.vali__thought { position:relative; overflow:hidden; min-height:390px; padding:5rem 1rem; background:#cdd2c8; }
.vali__thought h2 { position:relative; z-index:1; max-width:50rem; margin:2rem 0; font-size:clamp(3.1rem,11vw,6.5rem); }
.vali__thought>p:nth-of-type(2) { position:relative; z-index:1; max-width:27rem; margin:0; line-height:1.7; }
.vali__thought-mark { position:absolute; right:-1rem; bottom:-6rem; color:#b4bfb1; font:italic 19rem/.7 Georgia,serif; letter-spacing:-.19em; }
.vali__contact { display:grid; gap:2rem; padding:6rem 1rem 7rem; }
.vali__contact h2 { margin:0 0 2rem; font-size:clamp(4rem,14vw,8rem); }
.vali__contact p:not(.vali__index) { max-width:34rem; margin-bottom:3rem; line-height:1.75; }
.vali__contact a { display:flex; justify-content:space-between; gap:1rem; width:min(100%,29rem); padding:1rem 0; border-block:1px solid var(--vali-ink); font-weight:600; text-decoration:none; }
.vali__footer { display:grid; gap:1rem; padding:2rem 1rem; background:#344039; color:#f3f0e8; font-size:.7rem; }
.vali__footer span { font-weight:700; letter-spacing:.12em; }
.vali__footer p { margin:0; }
.vali__footer a { width:fit-content; text-underline-offset:.2rem; }
.vali__dialog { width:calc(100vw - 2rem); max-width:1100px; max-height:min(96vh,900px); max-height:min(96svh,900px); padding:0; border:0; background:#efeee7; color:var(--vali-ink); box-shadow:0 20px 70px #16221c55; }
.vali__dialog::backdrop { background:#15221bc9; }
.vali__dialog-close { position:absolute; z-index:2; right:.8rem; top:.8rem; display:flex; gap:1rem; align-items:center; border:0; padding:.7rem .9rem; background:#f5f3ed; color:var(--vali-ink); font:600 .75rem 'Segoe UI',Arial,sans-serif; cursor:pointer; }
.vali__dialog-close span { font-size:1.3rem; line-height:.6; }
.vali__dialog-layout { display:grid; }
.vali__dialog-image { min-height:0; max-height:50vh; max-height:50svh; overflow:hidden; }
.vali__dialog-image img { display:block; width:100%; max-height:50vh; max-height:50svh; object-fit:cover; }
.vali__dialog-copy { padding:1.5rem; }
.vali__dialog-copy h2 { margin:1rem 0; font-size:clamp(2.5rem,9vw,4rem); }
.vali__dialog-copy>p:not(.vali__index):not(.vali__dialog-note) { max-width:32rem; line-height:1.65; }
.vali__dialog-copy dl { margin:2rem 0; }
.vali__dialog-note { margin:0; color:#69746a; line-height:1.6; }
@supports (view-timeline-name:--vali-image) {
  .vali__image-wrap { view-timeline-name:--vali-image; view-timeline-axis:block; }
  .vali__project img { animation:vali-depth linear both; animation-timeline:--vali-image; animation-range:entry 0% exit 100%; }
  @keyframes vali-depth { from { transform:scale(1.09) translateY(-2%); } to { transform:scale(1.09) translateY(2%); } }
}
@media (min-width:720px) {
  .vali__concept, .vali__header, .vali__intro, .vali__projects, .vali__thought, .vali__contact, .vali__footer { padding-left:clamp(2rem,5vw,6rem); padding-right:clamp(2rem,5vw,6rem); }
  .vali__header { min-height:98px; }
  .vali__header nav { gap:clamp(1.5rem,3vw,3rem); font-size:.84rem; }
  .vali__header nav a:not(:last-child) { display:block; }
  .vali__intro { padding-top:clamp(6rem,10vw,11rem); padding-bottom:clamp(5rem,9vw,9rem); }
  .vali__intro h1 { font-size:clamp(5.8rem,10vw,11rem); margin:2rem 0 4rem; }
  .vali__intro-foot { grid-template-columns:1fr 1fr; align-items:end; }
  .vali__intro-foot a { justify-self:end; }
  .vali__projects { padding-bottom:11rem; }
  .vali__section-head { grid-template-columns:.36fr 1.35fr .65fr; gap:2rem; align-items:end; padding:4rem 0; }
  .vali__section-head h2 { font-size:clamp(4rem,6vw,7rem); margin:0; }
  .vali__section-head>p:last-child { margin:0; }
  .vali__project--feature .vali__image-wrap { aspect-ratio:1.85/1; }
  .vali__project-info { grid-template-columns:1fr auto; gap:3rem; padding-top:1.5rem; }
  .vali__project-info dl { width:360px; }
  .vali__project-pair { grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); gap:clamp(2rem,5vw,6rem); margin-top:9rem; align-items:start; }
  .vali__project-pair .vali__project:nth-child(2) { margin-top:10rem; }
  .vali__project-pair .vali__project:nth-child(2) .vali__image-wrap { aspect-ratio:4/4.3; }
  .vali__project-pair .vali__project-info { display:block; }
  .vali__project-pair .vali__project-info dl { width:100%; margin-top:1.5rem; }
  .vali__thought { min-height:640px; padding-top:8rem; padding-bottom:8rem; }
  .vali__thought h2 { margin:3rem 0; }
  .vali__thought>p:nth-of-type(2) { margin-left:auto; margin-right:10%; }
  .vali__thought-mark { right:6rem; bottom:-4rem; font-size:27rem; }
  .vali__contact { grid-template-columns:.4fr 1fr; padding-top:10rem; padding-bottom:11rem; }
  .vali__footer { grid-template-columns:1fr 1fr auto; align-items:end; }
  .vali__dialog-layout { grid-template-columns:1.25fr .75fr; height:min(80vh,720px); }
  .vali__dialog-image, .vali__dialog-image img { height:100%; max-height:none; }
  .vali__dialog-copy { display:flex; flex-direction:column; justify-content:end; padding:3rem; }
  .vali__dialog-copy dl { margin-top:auto; }
}
@media (max-width:370px) {
  .vali__intro h1 { font-size:12vw; }
  .vali__project-info dl, .vali__dialog-copy dl { gap:.3rem; }
  .vali__project-info dd, .vali__dialog-copy dd { font-size:.67rem; }
}
@media (prefers-reduced-motion:reduce) {
  .vali *, .vali *::before, .vali *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .vali__project img { transform:none !important; }
}