/* ---- Fonts ---- */
@font-face { font-family: 'AN'; src: url('/fonts/archivo-narrow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'AN'; src: url('/fonts/archivo-narrow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'AN'; src: url('/fonts/archivo-narrow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'AN'; src: url('/fonts/archivo-narrow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'AR'; src: url('/fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'AR'; src: url('/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --u: 8px;
  --ink: #1a1916;
  --paper: #ffffff;
  --soft: #f4f4f3;
  --muted: #b0ada7;
  --hair: #ececec;
  --accent: #dc2b1b;
  --ease: cubic-bezier(.22,.61,.36,1);
  --gutter: clamp(22px, 7vw, 88px);
  --maxw: 1320px;
  --tab-h: calc(58px + env(safe-area-inset-bottom));
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { min-height:100%; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--paper); color: var(--ink); font-family:'AR',Helvetica,Arial,sans-serif; line-height:1.6; overflow-x:hidden; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; }

/* ---- type primitives ---- */
.kicker { font-family:'AN'; font-weight:600; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.display { font-family:'AN'; font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:.92; }

#app { min-height:100%; padding-bottom: var(--tab-h); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ---- header: centered wordmark, near-invisible ---- */
header {
  position: sticky; top:0; z-index:40; text-align:center;
  padding: calc(var(--u)*2.75) var(--gutter);
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
header.scrolled { border-bottom-color: var(--hair); }
.topbar { position:relative; display:flex; align-items:center; justify-content:center; }
.mark { background:none; border:0; cursor:pointer; padding:0; display:flex; align-items:center; }
.mark img { height:36px; width:auto; display:block; }
/* desktop top nav */
.topnav { display:none; position:absolute; left:0; top:50%; transform:translateY(-50%); gap: calc(var(--u)*4); }
.topnav a { text-decoration:none; font-family:'AN'; font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); transition:color .25s var(--ease); }
.topnav a:hover, .topnav a.active { color:var(--ink); }

.view { animation: fade .5s var(--ease); }
@keyframes fade { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }

/* ---- hero (home) ---- */
.hero { text-align:center; padding: clamp(48px,13vh,140px) var(--gutter) clamp(40px,8vh,88px); }
.hero .kicker { display:block; }
.hero h1 { font-size: clamp(56px, 15vw, 184px); letter-spacing:.005em; line-height:1.0; text-align:left; }
.hero h1 .d { display:inline-block; width:.14em; height:.14em; border-radius:50%; background:var(--accent); margin:0 .04em; vertical-align:baseline; }
.hero .sub { margin: calc(var(--u)*3.5) auto 0; max-width: 30ch; font-size: clamp(13px,1.6vw,15px); line-height:1.7; color:#6a6862; letter-spacing:.01em; }

/* ---- role blocks: editorial (Style A) ---- */
.roles { padding: clamp(20px,5vh,56px) var(--gutter) 0; }
.erow { display:block; text-decoration:none; color:inherit; border-top:1px solid var(--hair); padding: clamp(28px,5vh,48px) 0 clamp(34px,6vh,56px); cursor:pointer; }
.erow:last-child { border-bottom:1px solid var(--hair); }
.erow-head { display:flex; align-items:baseline; justify-content:space-between; }
.enum { font-family:'AN'; font-weight:500; font-size:13px; letter-spacing:.12em; color:var(--mut, var(--muted)); }
.ecat { font-family:'AN'; font-weight:600; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.etitle { margin: calc(var(--u)*2) 0 calc(var(--u)*3.5); font-size: clamp(32px,9vw,58px); line-height:.98; letter-spacing:.01em; }
.eframe { aspect-ratio:4/5; overflow:hidden; background:var(--soft); }
.eframe img { transition: transform 1.3s var(--ease); }
.erow:hover .eframe img { transform: scale(1.035); }
.eframe.square { aspect-ratio:1/1; background:#000; }
.edesc { margin-top: calc(var(--u)*3.5); max-width: 32ch; font-size:13px; line-height:1.7; color:#6a6862; }
@media (min-width: 880px){
  .erow { display:grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px,6vw,96px); row-gap: calc(var(--u)*3); align-items:start; }
  .erow-head { grid-column: 1 / -1; }
  .etitle { margin:0; align-self:center; }
  .eframe { grid-row: span 2; }
  .erow:nth-of-type(even) .eframe { order:-1; }
  .edesc { margin-top: calc(var(--u)*2); }
}

/* ---- page head (sub pages) ---- */
.page-head { text-align:center; padding: clamp(48px,11vh,120px) var(--gutter) clamp(32px,6vh,64px); }
.page-head h1 { font-size: clamp(46px, 12vw, 128px); letter-spacing:.005em; }
.page-head p { margin: calc(var(--u)*2.5) auto 0; max-width: 42ch; font-size: 14px; line-height:1.7; color:#6a6862; }

/* ---- symmetric photo grid: photos are the UI ---- */
.grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px,2.6vw,28px); padding: 4px var(--gutter); }
@media (min-width: 880px){ .grid { grid-template-columns: repeat(3, 1fr); } }
.cell { display:block; position:relative; cursor:pointer; text-decoration:none; color:inherit; }
.cell .thumb { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper); border-radius:14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.cell .thumb::after { content:""; position:absolute; inset:0; border:1px solid rgba(0,0,0,.07); border-radius:14px; pointer-events:none; }
.cell:hover .thumb { box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 14px 36px rgba(0,0,0,.1); transform: translateY(-2px); }
.cell .thumb img { transition: transform 1.1s var(--ease); }
.cell:hover .thumb img { transform: scale(1.04); }
.cell .cap { margin-top: calc(var(--u)*1.5); text-align:center; }
.cell .cap span { font-family:'AN'; font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }

/* ---- contact ---- */
.contact-wrap { text-align:center; padding: clamp(20px,5vh,48px) var(--gutter) clamp(40px,8vh,90px); }
.stamp { width:118px; height:118px; margin: 0 auto calc(var(--u)*5); }
.stamp img { object-fit:contain; }
.contact-wrap .lead { font-family:'AN'; font-weight:600; font-size: clamp(22px,5.5vw,34px); line-height:1.15; text-transform:uppercase; max-width: 18ch; margin:0 auto; }
.mailbtn { display:inline-block; margin-top: calc(var(--u)*4); padding: 15px 34px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; font-family:'AN'; font-weight:600; letter-spacing:.16em; font-size:12px; text-transform:uppercase; transition: background .3s var(--ease), color .3s var(--ease); }
.mailbtn:hover, .mailbtn:active { background:var(--ink); color:#fff; }

/* ---- project page (editorial scroll) ---- */
.project { max-width: 920px; margin:0 auto; padding: clamp(8px,3vh,24px) var(--gutter) clamp(60px,12vh,140px); }
.crumb { padding: calc(var(--u)*2) 0; }
.crumb a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-family:'AN'; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .25s var(--ease); }
.crumb a:hover { color:var(--ink); }
.crumb svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.project-intro { min-height: 46vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: clamp(32px,8vh,90px) 0; }
.project-intro .pcat { font-family:'AN'; font-weight:500; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.project-intro h1 { font-family:'AN'; font-weight:700; text-transform:uppercase; font-size: clamp(44px,13vw,104px); line-height:.95; letter-spacing:.01em; margin: calc(var(--u)*2) 0; }
.project-intro .pquote { max-width: 30ch; font-family:'AR'; font-size: clamp(15px,2.4vw,18px); line-height:1.6; color:#4a4a47; }
.project-intro .pcount { margin-top: calc(var(--u)*4); font-family:'AN'; font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.pflow .gphoto { margin-bottom: clamp(10px,2.4vw,22px); }
.pflow img { width:100%; height:auto; display:block; }
.pcta { text-align:center; padding: clamp(24px,5vh,48px) 0 0; }
.pcta a { display:inline-block; padding: 14px 34px; background:var(--ink); color:#fff; text-decoration:none; font-family:'AN'; font-weight:600; letter-spacing:.16em; font-size:12px; text-transform:uppercase; transition: opacity .25s var(--ease); }
.pcta a:active, .pcta a:hover { opacity:.78; }

/* ---- footer signature ---- */
.sig { text-align:center; padding: clamp(48px,9vh,110px) var(--gutter) calc(var(--u)*6); }
.sig .mk { display:flex; justify-content:center; }
.sig .mk a { display:flex; }
.sig .mk img { height:40px; width:auto; display:block; }
.soc { margin-top: calc(var(--u)*3); display:flex; gap: calc(var(--u)*1.75); justify-content:center; flex-wrap:wrap; }
.soc a { width:42px; height:42px; border:1px solid var(--hair); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ink); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.soc a:hover { background:var(--ink); color:#fff; transform: translateY(-2px); }
.soc svg { width:19px; height:19px; fill:currentColor; }

/* ---- bottom tab bar (phone) ---- */
nav.tabs {
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair);
  display:grid; grid-template-columns: repeat(4,1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab { background:none; border:0; cursor:pointer; height:56px; display:flex; align-items:center; justify-content:center; color:#cfcdc9; transition: color .25s var(--ease); position:relative; }
.tab svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tab.active { color:var(--ink); }
.tab::after { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%) scaleX(0); width:14px; height:2px; background:var(--ink); transition: transform .28s var(--ease); }
.tab.active::after { transform:translateX(-50%) scaleX(1); }

/* ---- desktop: become a website ---- */
@media (min-width: 860px){
  #app { padding-bottom:0; }
  .topbar { justify-content:flex-start; }
  .mark { margin: 0 auto; }
  .topnav { display:flex; }
  nav.tabs { display:none; }
}

/* ---- footer privacy line ---- */
.cookie-line { margin-top: calc(var(--u)*3); font-family:'AN'; font-size:11px; letter-spacing:.06em; color:var(--muted); text-align:center; }
.cookie-line a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.cookie-line a:hover { color:var(--ink); }

/* ---- cookie consent banner ---- */
#consent-banner {
  position: fixed; bottom:0; left:0; right:0; z-index:70;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  display: none; flex-wrap: wrap; align-items: center; gap: calc(var(--u)*2);
  padding: calc(var(--u)*2.5) var(--gutter) calc(var(--u)*2.5 + env(safe-area-inset-bottom));
}
#consent-banner p { flex:1; min-width:200px; font-family:'AN'; font-size:12px; font-weight:500; letter-spacing:.04em; color:#6a6862; margin:0; }
#consent-btns { display:flex; gap: calc(var(--u)*1.5); flex-shrink:0; }
#consent-btns button {
  padding: 9px 22px; border: 1px solid var(--hair); background: none;
  font-family:'AN'; font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); cursor:pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
#consent-btns button:hover { border-color: var(--ink); color: var(--ink); }
#consent-accept { border-color: var(--ink) !important; color: var(--ink) !important; }
#consent-accept:hover { background: var(--ink) !important; color: #fff !important; }