/* ---------- palettes: paper (light) / night (dark) / duotone ---------- */
:root{
  --bg:#f4f1ea; --fg:#151311; --muted:#6b665d; --line:#d8d3c8;
  --accent:#ff4d00; --panel:#eae5da; --tint:#ff6a1f; --tint-op:.85;
  --hero-fg:#fff; --band:#151311; --band-fg:#f4f1ea;
}
html[data-palette="night"]{
  --bg:#0b0c0e; --fg:#eceae5; --muted:#8b8983; --line:#24262a;
  --accent:#c8ff2f; --panel:#131518; --tint:#3f4d8a; --tint-op:.75;
  --hero-fg:#eceae5; --band:#15181b; --band-fg:#eceae5;
}
html[data-palette="duotone"]{
  --bg:#0d0708; --fg:#f7ece8; --muted:#a08b86; --line:#2a1c1d;
  --accent:#ff2d2d; --panel:#170e0f; --tint:#c3111b; --tint-op:.9;
  --hero-fg:#fff3ef; --band:#170e0f; --band-fg:#f7ece8;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Instrument Serif",Georgia,serif; font-weight:400}
a{color:inherit}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px}
.label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:24px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.01em; font-size:15px}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0; font-size:14px}
nav ul a{text-decoration:none; color:var(--muted)}
nav ul a:hover{color:var(--fg)}
nav .cta{font-size:13px; font-weight:600; text-decoration:none; padding:9px 16px; border-radius:999px; background:var(--fg); color:var(--bg)}
@media(max-width:720px){nav ul{display:none}}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:#0b0b0c}
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%;
  filter:grayscale(1) contrast(1.06) brightness(1.22);
}
.hero .tint{position:absolute; inset:0; background:var(--tint); opacity:var(--tint-op); mix-blend-mode:color}
.hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 18%, rgba(0,0,0,.06) 44%, rgba(0,0,0,.22) 62%, rgba(0,0,0,.86) 100%);
}
.hero .inner{position:relative; z-index:2; color:var(--hero-fg); padding:clamp(96px,17vh,200px) 28px 36px}
.hero .topline{display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:clamp(32px,7vh,84px)}
.hero .topline span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.9; text-shadow:0 1px 8px rgba(0,0,0,.55)}
.hero h1{
  margin:0; font-size:clamp(44px,8.6vw,132px); line-height:.92; letter-spacing:-.03em;
  font-weight:700; max-width:16ch;
}
.hero h1 em{font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; letter-spacing:-.01em}
.hero .sub{margin:26px 0 0; max-width:52ch; font-size:clamp(15px,1.5vw,19px); opacity:.9}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:600;
  padding:13px 22px; border-radius:999px; border:1px solid var(--hero-fg);
}
.btn.solid{background:var(--hero-fg); color:#111}
.btn.ghost{color:var(--hero-fg)}
.btn:hover{opacity:.85}
/* counters ride the bottom edge of the hero */
.hero .stats{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid rgba(255,255,255,.24); color:var(--hero-fg);
}
.hero .stats div{flex:1 1 160px; padding:16px 20px 0; border-right:1px solid rgba(255,255,255,.16)}
.hero .stats div:last-child{border-right:0}
.hero .stats b{display:block; font-size:clamp(22px,3vw,34px); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.hero .stats span{font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.72}

/* ---------- sections ---------- */
section{padding:clamp(64px,8vw,116px) 0}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap}
.sec-head h2{margin:0; font-size:clamp(30px,4.4vw,56px); letter-spacing:-.03em; font-weight:600; line-height:1}
.sec-head p{margin:0; max-width:42ch; color:var(--muted); font-size:15px}

/* what we do */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.services article{padding:34px 32px 38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.services article:first-child{padding-left:0}
.services article:last-child{border-right:0}
.services .num{font-size:11px; letter-spacing:.16em; color:var(--accent); font-weight:700}
.services h3{margin:14px 0 10px; font-size:22px; letter-spacing:-.02em; font-weight:600}
.services p{margin:0; color:var(--muted); font-size:15px}
.services ul{margin:16px 0 0; padding:0; list-style:none; font-size:13px; color:var(--muted)}
.services li{padding:6px 0; border-top:1px dashed var(--line)}
@media(max-width:900px){.services{grid-template-columns:1fr}.services article{border-right:0; padding-left:0}}

/* work — phantom-style rail + optional curved wall */
.work{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.work.wall{
  display:flex; gap:26px; overflow-x:auto; padding:56px 0 34px; scroll-snap-type:x mandatory;
  perspective:1400px; scrollbar-width:thin;
}
.work.wall .card{flex:0 0 min(400px,74vw); scroll-snap-align:center; transform:rotateY(-9deg) scale(.96); transition:transform .25s ease}
.work.wall .card:nth-child(2n){transform:rotateY(9deg) scale(.96)}
.work.wall .card:hover{transform:rotateY(0) scale(1)}
.card{
  display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line);
  background:var(--panel); border-radius:14px; overflow:hidden;
}
.viewtoggle{display:flex; gap:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.filters button{all:unset; cursor:pointer; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:7px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.filters button:hover{border-color:var(--fg); color:var(--fg)}
.filters button[aria-pressed="true"]:hover{color:#fff}
.viewtoggle button{all:unset; cursor:pointer; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-weight:600}
.viewtoggle button[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px}
.card .tags span{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:3px 7px; border:1px solid var(--line); border-radius:4px; color:var(--muted)}
.lockup{font-size:clamp(38px,9vw,150px); line-height:.86; letter-spacing:-.05em; font-weight:700; margin:clamp(56px,8vw,110px) 0 0; text-align:center}
.lockup em{font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--accent)}
.lockup small{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-top:22px; font-family:"Inter Tight",sans-serif}
.card .shot{aspect-ratio:16/10; background:var(--band); position:relative; overflow:hidden}
.card .shot .glyph{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--band-fg);
  font-size:clamp(28px,3.4vw,42px); letter-spacing:-.04em; opacity:.95;
}
.card .shot .glyph.small{font-size:13px; letter-spacing:.22em; text-transform:uppercase; opacity:.6; font-weight:600}
.card .body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{margin:0; font-size:17px; letter-spacing:-.01em; font-weight:600}
.card p{margin:0; color:var(--muted); font-size:14px}
.card .meta{margin-top:auto; padding-top:12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between}
.card:hover{border-color:var(--accent)}
.card:hover .glyph{color:var(--accent)}
@media(max-width:980px){.work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.work{grid-template-columns:1fr}}

/* process */
.proc{border-top:1px solid var(--line)}
.proc div{display:grid; grid-template-columns:80px 1fr 1.1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline}
.proc b{font-size:13px; color:var(--accent); letter-spacing:.1em}
.proc h3{margin:0; font-size:clamp(19px,2.2vw,28px); letter-spacing:-.02em; font-weight:600}
.proc p{margin:0; color:var(--muted); font-size:15px}
@media(max-width:760px){.proc div{grid-template-columns:1fr; gap:8px}}

/* band */
.band{background:var(--band); color:var(--band-fg)}
.band .label{color:color-mix(in srgb,var(--band-fg) 55%, transparent)}
.band .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.band h2{margin:0 0 18px; font-size:clamp(30px,4vw,52px); line-height:1.02; letter-spacing:-.03em; font-weight:600}
.band p{color:color-mix(in srgb,var(--band-fg) 72%, transparent); font-size:16px; max-width:46ch}
.band .portrait{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5}
.band .portrait img{width:100%; height:100%; object-fit:cover; display:block}
.band .portrait .tag{position:absolute; left:14px; bottom:14px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:7px 11px; border-radius:999px; backdrop-filter:blur(6px)}
.fun{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.fun figure{margin:0}
.fun img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border:1px solid var(--line); background:var(--panel)}
.fun figcaption{margin-top:10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.fun .fun-link{display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:4/3; padding:20px; border:1px solid var(--line); background:var(--panel); text-decoration:none; color:inherit}
.fun .fun-link:hover{border-color:var(--accent)}
.fun .fun-link b{font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; line-height:1.05}
.fun .fun-link small{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.band .skills{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.band .skills span{font-size:12px; padding:6px 11px; border:1px solid color-mix(in srgb,var(--band-fg) 26%, transparent); border-radius:999px; color:color-mix(in srgb,var(--band-fg) 82%, transparent)}
@media(max-width:860px){.band .grid{grid-template-columns:1fr}}

/* contact */
.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,6vw,80px)}
.contact h2{margin:0 0 16px; font-size:clamp(34px,5.4vw,68px); line-height:.98; letter-spacing:-.03em; font-weight:600}
.contact h2 em{font-family:"Instrument Serif",serif; font-style:italic; font-weight:400}
.contact .lines{margin-top:30px; font-size:16px}
.contact .lines a{display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); text-decoration:none}
.contact .lines a:hover{color:var(--accent)}
.contact .note{color:var(--muted); font-size:14px; max-width:38ch}
@media(max-width:760px){.contact{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line); padding:26px 0 80px; color:var(--muted); font-size:12px}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; align-items:center}
footer .clock{font-variant-numeric:tabular-nums; letter-spacing:.08em; text-transform:uppercase}
footer .clock b{color:var(--fg); font-weight:600}

/* ---------- palette switcher: three compact swatches, names on hover ---------- */
.switch{
  position:fixed; right:16px; bottom:16px; z-index:50; display:flex; gap:6px; align-items:center;
  background:color-mix(in srgb, var(--bg) 92%, transparent); border:1px solid var(--line);
  padding:5px; border-radius:999px; backdrop-filter:blur(10px);
}
.switch button{
  all:unset; cursor:pointer; position:relative; width:15px; height:15px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--fg) 25%, transparent); transition:transform .15s ease;
}
.switch button[data-p="paper"]{background:#f4f1ea}
.switch button[data-p="duotone"]{background:#0d0708; box-shadow:inset 0 0 0 3px #ff2d2d}
.switch button[data-p="night"]{background:#0b0c0e}
.switch button::after{
  content:attr(data-name); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--fg);
  background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:3px 7px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.switch button:hover{transform:scale(1.15)}
.switch button:hover::after,.switch button:focus-visible::after{opacity:1}
.switch button[aria-pressed="true"]{outline:2px solid var(--accent); outline-offset:2px}
.switch button:focus-visible{outline:2px solid var(--fg); outline-offset:3px}

/* ---------- long-form pages: privacy, terms, 404 ---------- */
.doc{padding:64px 0 80px; max-width:820px}
.doc h1{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:clamp(38px,6vw,68px); line-height:1.02; margin:10px 0 14px; letter-spacing:-.02em}
.doc .lede{color:var(--muted); max-width:56ch; margin:0 0 6px}
.doc h2{font-size:15px; letter-spacing:.02em; margin:34px 0 8px}
.doc p,.doc ul{margin:0 0 12px; max-width:66ch}
.doc ul{padding-left:20px}
.doc li{margin:0 0 6px}
.doc table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:14px}
.doc th,.doc td{text-align:left; padding:9px 12px 9px 0; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.doc .note{border-left:3px solid var(--accent); padding:2px 0 2px 14px; color:var(--muted); font-size:14px}
.doc code{font-size:13px; background:var(--panel); padding:1px 5px}
nav .back{font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:.04em}
nav .back:hover{color:var(--fg)}
@media(max-width:720px){nav ul{display:none}nav .back{order:3}}