/* Archorde demo A — "Gallery wall" */
:root {
  --white: #fff;
  --ink: #111;
  --grey: #77736c;
  --line: #e4e2de;
  --pad: clamp(16px, 3vw, 40px);
  --display: "Michroma", "Arial Black", sans-serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;
  --name-h: clamp(48px, 11.6vw, 190px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--white); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbd, .tbd-inline { font-size: 12px; color: var(--grey); }
.tbd::before { content: "▲ "; }
.no-drafts .tbd, .no-drafts .tbd-inline, .no-drafts .tbd-block { display: none; }

/* Header — nav right, dark button */
.top {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 16px var(--pad);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.mark { width: 28px; height: 28px; display: block; color: var(--ink); }
.top nav { margin-left: auto; }
.top ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.top nav a { text-decoration: none; font: 700 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-btn { display: none; }
.cta {
  display: inline-block; background: var(--ink); color: var(--white); text-decoration: none;
  padding: 13px 26px; border-radius: 3px;
  font: 700 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s;
}
.cta:hover { background: #333; }
.cta-lg { padding: 18px 30px; font-size: 14px; margin: 8px 0 40px; }

/* The pinned name */
.name {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
  padding: 0 var(--pad);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none; user-select: none;
  line-height: 1; white-space: nowrap;
}
.name span { display: block; font: 400 var(--name-h)/.86 var(--display); letter-spacing: -.01em; transform: translateY(10%); }

/* Placeholder "photos" — flat tones, clearly labelled */
.ph { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.ph[data-tone="1"] { background: linear-gradient(180deg, #b9c3cc 0 55%, #8e959a 55% 100%); }
.ph[data-tone="2"] { background: linear-gradient(180deg, #d9d4cb 0 40%, #a8a196 40% 100%); }
.ph[data-tone="3"] { background: linear-gradient(180deg, #c8cfc6 0 62%, #7f8a7c 62% 100%); }
.ph[data-tone="4"] { background: linear-gradient(180deg, #5b6066 0 50%, #2f3236 50% 100%); }
.ph::after {
  content: "PLACEHOLDER — PROJECT PHOTO";
  position: absolute; left: 10px; top: 10px;
  font: 700 10px/1 var(--body); letter-spacing: .1em;
  background: var(--white); color: var(--ink); padding: 5px 7px;
}
.ph.portrait::after { content: "PLACEHOLDER — PORTRAIT"; }
img.ph { display: block; height: auto; object-fit: cover; background: #e9e7e3; }

/* Wall — vertical scroll drives horizontal movement (height set by main.js) */
.wall { position: relative; }
.wall-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.wall-track {
  list-style: none; margin: 0; padding: 0 0 0 6vw;
  display: flex; align-items: flex-start; gap: 7vw;
  height: 100%; width: max-content;
  will-change: transform;
}
.piece a { display: block; text-decoration: none; }
.piece .ph { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.piece a:hover .ph { transform: scale(.985); }
.cap { display: flex; gap: 14px; margin: 0 0 4px; font: 500 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.piece h2 { font: 700 15px/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
/* Offset, varied sizes — the rhythm of a hung wall */
.p1 { width: 44vw; margin-top: 22vh; }
.p2 { width: 30vw; margin-top: max(12vh, 96px); } .p2 .ph { aspect-ratio: 3 / 4; height: auto; }
.p3 { width: 52vw; margin-top: 16vh; }
.p4 { width: 26vw; margin-top: 30vh; } .p4 .ph { aspect-ratio: 4 / 5; }
.p5 { width: 40vw; margin-top: max(14vh, 96px); margin-right: 10vw; }
.p1 .ph, .p3 .ph, .p5 .ph { max-height: 52vh; }
.p2 .ph { max-height: 62vh; }
.p4 .ph { max-height: 46vh; }
.hint { position: absolute; left: var(--pad); top: 50%; margin: 0; font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%); }

/* How we do it — sticky 3D stage driven by scroll (progress set by process3d.js) */
.how { position: relative; height: 440vh; border-top: 1px solid var(--line); background: var(--white); }
.how-sticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px);
  padding: 92px var(--pad) calc(var(--name-h) + 20px);
}
.how-text { display: flex; flex-direction: column; min-height: 0; }
.how-lede { font: 400 clamp(20px, 2.2vw, 30px)/1.25 var(--body); margin: 18px 0 28px; max-width: 18ch; letter-spacing: -.01em; }
.how-steps { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.how-steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); opacity: .32; transition: opacity .35s; }
.how-steps li.is-active { opacity: 1; }
.how-steps .n { grid-row: span 2; font: 700 12px/1.6 var(--body); letter-spacing: .08em; color: var(--grey); }
.how-steps h3 { font: 700 14px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.how-steps p { margin: 4px 0 0; font-size: 15px; color: #3b3935; }
.how-stage { position: relative; min-height: 0; background: var(--stage-bg, #1c3a66); overflow: hidden; }
.how-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.how-label { position: absolute; left: 14px; top: 12px; margin: 0; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--stage-ink, #fff); }
.how-bar { position: absolute; left: 14px; right: 14px; top: 34px; height: 1px; background: color-mix(in srgb, var(--stage-ink, #fff) 30%, transparent); }
.how-bar span { display: block; height: 100%; width: 0; background: var(--stage-ink, #fff); }
.how-note { position: absolute; right: 14px; bottom: 10px; margin: 0; font-size: 11px; color: var(--stage-ink, #fff); opacity: .75; }
.no-3d .how { height: auto; }
.no-3d .how-sticky { position: static; height: auto; grid-template-columns: 1fr; }
.no-3d .how-stage { display: none; }
.no-3d .how-steps li { opacity: 1; }

@media (max-width: 860px) {
  .how { height: 400vh; }
  .how-sticky { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding-top: 76px; }
  .how-stage { grid-row: 1; }
  .how-text { grid-row: 2; }
  .how-lede, .how-text .tbd { display: none; }
  .how-text .kicker { margin-bottom: 10px; }
  .how-steps { border-top: 0; margin: 0; }
  .how-steps li { display: none; border: 0; padding: 0; }
  .how-steps li.is-active { display: grid; }
  .no-3d .how-steps li { display: grid; padding: 12px 0; }
}

/* Projects */
.projects, .about, .contact { padding: 140px var(--pad) calc(var(--name-h) + 80px); border-top: 1px solid var(--line); background: var(--white); position: relative; }
.bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.bar h2, .kicker { font: 700 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.switch, .filters { display: flex; gap: 4px; }
.filters { margin-left: auto; }
.switch button, .filters button {
  background: transparent; border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  padding: 8px 14px; min-height: 36px; cursor: pointer;
  font: 500 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
}
.switch button[aria-pressed="true"], .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.catalog { list-style: none; margin: 0 0 20px; padding: 0; }
.catalog a { text-decoration: none; display: block; }
.catalog li[hidden] { display: none; }
.catalog[data-view="grid"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.catalog[data-view="grid"] .ph { margin-bottom: 12px; transition: opacity .3s; }
.catalog[data-view="grid"] a:hover .ph { opacity: .82; }
.catalog[data-view="grid"] .yr, .catalog[data-view="grid"] .loc { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-right: 10px; }
.catalog[data-view="grid"] .nm { display: block; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.catalog[data-view="grid"] .yr { display: inline; }
.catalog[data-view="grid"] .nm { order: -1; }
.catalog[data-view="grid"] .ty { display: none; }
.catalog[data-view="list"] li { border-top: 1px solid var(--line); }
.catalog[data-view="list"] li:last-child { border-bottom: 1px solid var(--line); }
.catalog[data-view="list"] a { display: grid; grid-template-columns: 90px 2fr 1fr 1fr; gap: 16px; padding: 18px 0; align-items: baseline; }
.catalog[data-view="list"] .ph { display: none; }
.catalog[data-view="list"] .nm { font: 400 clamp(16px, 1.8vw, 22px)/1.2 var(--display); }
.catalog[data-view="list"] .yr, .catalog[data-view="list"] .loc, .catalog[data-view="list"] .ty { color: var(--grey); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.catalog[data-view="list"] a:hover .nm { text-decoration: underline; text-underline-offset: 6px; }
.empty { color: var(--grey); }

/* About + contact */
.statement { font: 400 clamp(22px, 3vw, 44px)/1.25 var(--body); max-width: 24ch; margin: 24px 0 12px; letter-spacing: -.01em; }
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; margin-top: 64px; align-items: end; }
.ph.portrait { aspect-ratio: 4 / 5; }
.about h3 { font: 700 16px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.role { color: var(--grey); margin: 4px 0 16px; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; border-top: 1px solid var(--line); padding-top: 24px; }
dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
dd { margin: 0; overflow-wrap: anywhere; }

.foot { position: relative; z-index: 31; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px var(--pad); background: var(--ink); color: #cfccc6; font-size: 12px; }

/* Reduced motion: the wall becomes a normal stacked list (handled in main.js too) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Tablet / phone: stacked wall, menu button */
@media (max-width: 860px) {
  .top { background: var(--white); border-bottom: 1px solid var(--line); gap: 14px; }
  .menu-btn {
    display: block; background: none; border: 1px solid var(--ink); border-radius: 3px; padding: 9px 12px;
    font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer;
  }
  .top ul { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); }
  .top ul.open { display: flex; }
  .top ul a { display: block; padding: 16px var(--pad); border-top: 1px solid var(--line); font-size: 15px; }
  .cta { padding: 11px 14px; font-size: 11px; white-space: nowrap; }
  .cta-lg { padding: 16px 22px; font-size: 13px; }
  .wall { height: auto !important; padding: 96px var(--pad) 40px; }
  .wall-sticky { position: static; height: auto; overflow: visible; }
  .wall-track { flex-direction: column; width: auto; padding: 0; gap: 56px; transform: none !important; }
  .piece { width: 82% !important; margin: 0 !important; }
  .piece:nth-child(even) { align-self: flex-end; width: 64% !important; }
  .piece .ph { max-height: none !important; }
  .hint { display: none; }
  .catalog[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { margin-left: 0; flex-wrap: wrap; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .portrait { max-width: 300px; }
  .details { grid-template-columns: 1fr 1fr; }
  .projects, .about, .contact { padding-top: 80px; }
}
@media (max-width: 520px) {
  .mark { width: 24px; height: 24px; }
  .piece, .piece:nth-child(even) { width: 100% !important; }
  .catalog[data-view="grid"] { grid-template-columns: 1fr; }
  .catalog[data-view="list"] a { grid-template-columns: 1fr 1fr; }
  .catalog[data-view="list"] .nm { grid-column: 1 / -1; order: -1; }
  .details { grid-template-columns: 1fr; }
}

/* Project page */
.is-project .name { padding-right: 50%; }
.is-project .top { background: var(--white); border-bottom: 1px solid var(--line); }
.pj { padding: 104px var(--pad) calc(var(--name-h) + 48px); }
.back { display: inline-block; font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 10px 14px; }
.back:hover { border-color: var(--ink); }
.pj-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; align-items: baseline; margin: 56px 0 14px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.pj-head h1 { font: 700 15px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.pj-head p { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.pj-head p:last-child { text-align: right; }
.pj-lead { margin: 0; }
.pj-lead img { width: 100%; max-height: 82vh; object-fit: cover; display: block; background: #e9e7e3; }
.pj-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); padding: 72px 0; }
.pj-statement { font: 400 clamp(20px, 2.4vw, 32px)/1.3 var(--body); margin: 0 0 12px; max-width: 30ch; }
.tbd-block { color: var(--grey); }
.pj-facts { margin: 0; border-top: 1px solid var(--line); }
.pj-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pj-facts dt { margin: 0; }
.pj-gallery { display: grid; gap: clamp(16px, 3vw, 40px); }
.pj-row img { width: 100%; display: block; object-fit: cover; background: #e9e7e3; }
.pj-row-full img { max-height: 86vh; }
.pj-row-pair { display: grid; grid-template-columns: 5fr 4fr; gap: clamp(16px, 3vw, 40px); align-items: start; }
.pj-row-pair img:nth-child(2) { margin-top: 12vh; }
.pj-row-pair img:only-child { grid-column: 1 / -1; width: 70%; margin-left: auto; }
.pj-pager { display: grid; grid-template-columns: 1fr 1fr; margin: 96px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pj-pager a { display: grid; gap: 6px; padding: 22px 0; text-decoration: none; }
.pj-pager a:last-child { text-align: right; border-left: 1px solid var(--line); }
.pj-pager span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.pj-pager strong { font: 400 clamp(16px, 2vw, 24px)/1.2 var(--display); }
.pj-pager a:hover strong { text-decoration: underline; text-underline-offset: 6px; }
.pj-similar { padding: 72px 0 0; }
.pj-similar .kicker { margin-bottom: 28px; }
.pj-similar .catalog[data-view="grid"] .loc { display: inline; }
.pj-cta { padding: 72px 0 0; }
.pj-missing { font-size: 18px; margin-top: 48px; }
@media (max-width: 860px) {
  .pj { padding-top: 88px; }
  .pj-head { grid-template-columns: 1fr 1fr; }
  .pj-head h1 { grid-column: 1 / -1; font-size: 18px; }
  .pj-head p:last-child { text-align: left; }
  .pj-intro { grid-template-columns: 1fr; padding: 48px 0; }
  .pj-row-pair { grid-template-columns: 1fr; }
  .pj-row-pair img:nth-child(2) { margin-top: 0; }
  .pj-row-pair img:only-child { width: 100%; }
  .is-project .name { padding-right: var(--pad); }
}