/* ===== SOFIA — SHARED CORE ===== */
/* Cool palettes — kept light & airy across all pages */
:root, html[data-palette="glacier"]{
  --bg:#FAFCFE; --surface:#E6EDF6; --ink:#080B12; --soft:#4E5765; --hair:#CBD5E3;
  --accent:#1A5BDE; --shadow:rgba(17,22,31,.16);
}
html[data-palette="raspberry"]{
  --bg:#FDFAFB; --surface:#F2E5EA; --ink:#120A0D; --soft:#695761; --hair:#DFCDD5;
  --accent:#C70F4E; --shadow:rgba(25,18,21,.16);
}
html[data-palette="frost"]{
  --bg:#FAFCFB; --surface:#E1ECE8; --ink:#070F0F; --soft:#4D5C57; --hair:#CADDD6;
  --accent:#07806F; --shadow:rgba(15,23,24,.16);
}
html[data-palette="amber"]{
  --bg:#FEFBF8; --surface:#F4E8DC; --ink:#140C05; --soft:#6A5847; --hair:#E2D2BF;
  --accent:#C25214; --shadow:rgba(25,16,8,.16);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:"Archivo",sans-serif; -webkit-font-smoothing:antialiased; line-height:1.5; transition:background .5s, color .5s; }
::selection{ background:var(--accent); color:var(--bg); }
a{ color:inherit; }

/* ===== ACCESSIBILITY ===== */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:10px; left:10px; z-index:2147483647; transform:translateY(-200%); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:10px; font-size:13px; letter-spacing:.02em; text-decoration:none; box-shadow:0 10px 30px var(--shadow); transition:transform .2s ease; }
.skip-link:focus{ transform:translateY(0); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.topbar a:focus-visible, .nav a:focus-visible{ outline-offset:6px; }
.lab{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--soft); }
.container{ width:min(100% - 12vw, 1320px); margin-inline:auto; }
.em{ font-style:italic; font-weight:300; color:var(--accent); }

/* ===== TOPBAR ===== */
.topbar{ position:fixed; z-index:60; top:0; left:0; right:0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:16px max(6vw, calc((100% - 1320px) / 2)); background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); transition:background .5s, border-color .5s; }.topbar .wm{ font-weight:800; font-size:14px; letter-spacing:-.01em; text-decoration:none; justify-self:start; }
.topbar .wm .d{ color:var(--accent); }
.topbar .nav{ justify-self:center; display:flex; align-items:center; gap:30px; }
.topbar .nav a{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); text-decoration:none; padding:5px 0; position:relative; transition:color .25s; }
.topbar .nav a:hover{ color:var(--ink); }
.topbar .nav a.active{ color:var(--ink); }
.topbar .nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent); }
.topbar .right{ justify-self:end; display:flex; align-items:center; gap:20px; }

.palette{ display:inline-flex; align-items:center; gap:8px; }
.palette .auto{ font-family:inherit; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); background:none; border:1px solid var(--hair); border-radius:100px; padding:4px 9px; cursor:pointer; transition:color .25s, border-color .25s; }
.palette .auto[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }
.palette .sw{ width:15px; height:15px; border-radius:50%; border:1px solid var(--hair); cursor:pointer; padding:0; position:relative; transition:transform .2s; }
.palette .sw:hover{ transform:scale(1.15); }
.palette .sw[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.palette .sw-glacier{ background:#1A5BDE; }
.palette .sw-raspberry{ background:#C70F4E; }
.palette .sw-frost{ background:#07806F; }
.palette .sw-amber{ background:#C25214; }

.langtog{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:inherit; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); padding:4px 0; }
.langtog .sep{ color:var(--hair); }
.langtog span[data-l]{ transition:color .25s; }
.langtog span[data-l].active{ color:var(--accent); font-weight:600; }
@media (max-width:760px){ .topbar .nav{ gap:18px; } .topbar .right{ gap:12px; } .palette .auto{ display:none; } }
@media (max-width:560px){ .topbar{ grid-template-columns:1fr auto; } .topbar .nav{ display:none; } }

/* ===== REVEAL ===== */
.reveal{ transition:transform 1s cubic-bezier(.2,.6,.2,1), opacity 1s cubic-bezier(.2,.6,.2,1); }
.reveal.lift{ transition-delay:.08s; }
@media (prefers-reduced-motion: no-preference){ .reveal:not(.in){ opacity:0; transform:translateY(28px); } }

/* ===== PAGE HEAD (shared hero band for subpages) ===== */
.pagehead{ width:min(100% - 12vw, 1320px); margin-inline:auto; padding:21vh 0 8vh; }
.pagehead .crumb{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-bottom:30px; }
.pagehead .crumb a{ text-decoration:none; color:var(--soft); transition:color .25s; }
.pagehead .crumb a:hover{ color:var(--accent); }
.pagehead .crumb .sl{ color:var(--hair); }

/* ===== FOOTER ===== */
.foot{ border-top:1px solid var(--hair); margin-top:0; padding:8vh 0 5vh; width:min(100% - 12vw, 1320px); margin-inline:auto; }
.foot .colophon{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.reginfo{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); opacity:.62; }
.reginfo span{ position:relative; }
.reginfo span + span::before{ content:"·"; position:absolute; left:-11px; opacity:.6; }
.footrow{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px 28px; padding-bottom:30px; margin-bottom:28px; border-bottom:1px solid var(--hair); }
.social{ display:flex; flex-wrap:wrap; gap:22px; }
.social a{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); text-decoration:none; transition:color .2s; }
.social a:hover{ color:var(--accent); }
.legal{ display:flex; flex-wrap:wrap; gap:22px; }
.legal a, .legal button{ font-family:inherit; background:none; border:none; cursor:pointer; padding:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); text-decoration:none; transition:color .2s; }
.legal a:hover, .legal button:hover{ color:var(--accent); }

/* shared CTA button + text link (hero, contact) */
.cta-btn{ font-family:inherit; cursor:pointer; border:none; background:var(--ink); color:var(--bg); font-size:13px; letter-spacing:.04em; padding:16px 26px; border-radius:100px; display:inline-flex; align-items:center; gap:10px; transition:background .25s, gap .25s; }
.cta-btn:hover{ background:var(--accent); gap:14px; }
.cta-text{ cursor:pointer; font-size:13px; letter-spacing:.02em; color:var(--soft); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.cta-text:hover{ color:var(--accent); border-color:var(--accent); }
.herocta{ margin-top:5vh; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* ===== SHARED WORK WALL (home + work index read identically) ===== */
.workhead{ padding:14vh 0 2vh; border-top:1px solid var(--hair); display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:16px; width:min(100% - 12vw, 1320px); margin:0 auto; }
.workhead h2{ font-weight:800; font-size:clamp(34px,6vw,84px); line-height:.92; letter-spacing:-.035em; }
.workhead .count{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
a.count{ text-decoration:none; transition:color .25s; }
a.count:hover{ color:var(--accent); }

.wall{ min-height:86vh; display:flex; align-items:center; padding:9vh 6vw; }
.wall + .wall{ border-top:1px solid var(--hair); }
.wall.hide{ display:none; }
.work{ display:grid; grid-template-columns:repeat(12,1fr); gap:34px; align-items:center; width:100%; max-width:1320px; margin:0 auto; }
.piece{ position:relative; }
.piece image-slot{ display:block; width:100%; filter:drop-shadow(0 26px 44px var(--shadow)); }
.wall:nth-of-type(odd) .piece{ grid-column:1/8; }
.wall:nth-of-type(odd) .label{ grid-column:9/13; }
.wall:nth-of-type(even) .piece{ grid-column:6/13; order:2; }
.wall:nth-of-type(even) .label{ grid-column:1/5; order:1; }

.label .no{ font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--accent); }
.label .rule{ height:1px; background:var(--ink); margin:14px 0 18px; width:46px; }
.label .ttl{ font-size:clamp(26px,2.8vw,40px); font-weight:700; letter-spacing:-.02em; line-height:1.02; }
.label .blurb{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--soft); max-width:34ch; text-wrap:pretty; }
.label .meta{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.label .meta .row{ font-size:13px; line-height:1.5; display:grid; grid-template-columns:90px 1fr; gap:14px; }
.label .meta .k{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); padding-top:3px; }
.label .view{ margin-top:30px; display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink); transition:gap .25s; }
.label .view .vt{ border-bottom:1px solid var(--ink); padding-bottom:5px; transition:color .25s, border-color .25s; }
.label .view:hover{ gap:14px; }
.label .view:hover .vt{ color:var(--accent); border-color:var(--accent); }

@media (max-width:860px){
  .wall{ min-height:auto; padding:8vh 6vw; }
  .work{ gap:28px; }
  .wall:nth-of-type(odd) .piece,.wall:nth-of-type(even) .piece{ grid-column:1/13; order:1; }
  .wall:nth-of-type(odd) .label,.wall:nth-of-type(even) .label{ grid-column:1/13; order:2; }
}