:root {
  --ink: #090909;
  --paper: #f2f0e9;
  --white: #fff;
  --line: rgba(9, 9, 9, .18);
  --line-light: rgba(255, 255, 255, .22);
  --muted: rgba(9, 9, 9, .62);
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
  background: rgba(242, 240, 233, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand img { width: 132px; display: block; }
.nav { display:flex; flex-wrap: wrap; justify-content: flex-end; gap:24px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.nav a { position:relative; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .2s ease; }
.nav a:hover::after, .nav a:focus-visible::after { right:0; }

.hero {
  min-height: 100vh;
  padding: 120px 28px 42px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background: var(--paper);
}
.hero-noise {
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.055;
  background-image: radial-gradient(#000 0.62px, transparent 0.62px);
  background-size: 6px 6px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.hero-inner { width:min(1180px, 100%); text-align:center; position:relative; }
.hero-topline { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:42px; }
.eyebrow, .hero-status { margin:0; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.hero-logo { width:min(760px, 86vw); display:block; margin:0 auto; }
.hero-line { margin:28px 0 0; font-size:clamp(36px, 6.2vw, 96px); line-height:.88; letter-spacing:-.055em; font-weight:900; }
.hero-subline { margin:24px auto 0; max-width:640px; font-size:clamp(14px, 1.6vw, 21px); line-height:1.4; color:var(--muted); }
.hero-meta { margin-top:68px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.scroll-cue { position:absolute; bottom:28px; right:32px; font-size:24px; animation:float 2s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

.hero-artwork { margin:58px auto 0; width:min(720px, 100%); border:1px solid var(--line); background:var(--white); }
.hero-artwork-image { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero-artwork figcaption { display:flex; justify-content:space-between; gap:20px; padding:14px; border-top:1px solid var(--line); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

section { scroll-margin-top: 72px; }
.dark-section { background:var(--ink); color:var(--white); }
.section-index { font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.68; }
.section-stamp { font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.display-copy { margin:0; font-size:clamp(54px, 9vw, 148px); line-height:.82; letter-spacing:-.06em; font-weight:900; }
.kicker { margin:0 0 18px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }

.origin {
  min-height: 92vh;
  padding:42px 28px 34px;
  display:grid;
  grid-template-columns:170px 1fr;
  grid-template-rows:1fr auto;
  gap:24px;
}
.origin-copy { align-self:center; max-width:1180px; }
.origin-body { margin-top:52px; width:min(760px, 100%); display:grid; gap:0; }
.origin-body p { margin:0; padding:16px 0; border-top:1px solid var(--line-light); font-size:clamp(16px, 1.45vw, 22px); line-height:1.45; color:rgba(255,255,255,.72); }
.origin-body .origin-last { color:var(--white); font-weight:700; }
.origin .section-stamp { grid-column:2; justify-self:end; }

.process { padding:42px 28px 70px; }
.process-intro { max-width:var(--max); margin:96px auto 52px; display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:start; }
.process-intro h2 { margin:0; font-size:clamp(42px, 7vw, 112px); line-height:.88; letter-spacing:-.055em; }
.process-grid { max-width:var(--max); margin:auto; display:grid; grid-template-columns:repeat(4, 1fr); border-left:1px solid var(--line); border-top:1px solid var(--line); }
.process-grid article { min-height:320px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.step-number { font-size:10px; letter-spacing:.15em; }
.process-grid h3 { margin:auto 0 18px; font-size:clamp(22px, 2.2vw, 36px); letter-spacing:-.03em; }
.process-grid p { margin:0; font-size:14px; line-height:1.5; color:var(--muted); }

.archive { padding:42px 28px 70px; }
.archive-heading { max-width:var(--max); margin:96px auto 52px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 440px); gap:60px; align-items:end; }
.archive-intro { margin:0 0 10px; font-size:clamp(16px, 1.55vw, 22px); line-height:1.45; color:rgba(255,255,255,.65); }
.archive-grid { max-width:var(--max); margin:auto; display:grid; grid-template-columns:repeat(5, 1fr); border-left:1px solid var(--line-light); border-top:1px solid var(--line-light); }
.archive-card { min-height:300px; padding:18px; border-right:1px solid var(--line-light); border-bottom:1px solid var(--line-light); display:flex; flex-direction:column; transition:background .2s ease, color .2s ease; }
.archive-card span, .archive-card small { font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.archive-card strong { margin:auto 0 28px; font-size:clamp(18px, 1.55vw, 24px); line-height:1.05; letter-spacing:-.025em; }
.archive-card small { opacity:.55; }
.archive-card:hover, .archive-card:focus-visible { background:var(--white); color:var(--ink); }

.artworks-slot { max-width:var(--max); margin:42px auto 0; }
.artworks { border-top:1px solid var(--line-light); padding-top:24px; }
.artworks-index { font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:24px; }
.artworks-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.artwork-card { background:var(--ink); display:flex; flex-direction:column; min-width:0; }
.artwork-image { width:100%; display:block; aspect-ratio:4/5; object-fit:cover; background:#161616; }
.artwork-meta { padding:20px; border-top:1px solid var(--line-light); }
.artwork-number { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; opacity:.65; }
.artwork-title { margin:0; font-size:clamp(28px,4vw,56px); line-height:.95; letter-spacing:-.04em; text-transform:uppercase; }
.artwork-description { margin:18px 0 0; max-width:52ch; font-size:14px; line-height:1.5; color:rgba(255,255,255,.65); }

.interferences { padding:42px 28px 80px; }
.interference-layout { max-width:var(--max); margin:96px auto 0; display:grid; grid-template-columns:1fr minmax(300px, 520px); gap:72px; align-items:start; }
.interference-layout h2 { margin:0; font-size:clamp(50px, 8vw, 132px); line-height:.83; letter-spacing:-.06em; }
.interference-copy { padding-top:4px; }
.interference-copy > p { margin:0 0 18px; font-size:clamp(16px,1.5vw,21px); line-height:1.5; color:var(--muted); }
.interference-copy blockquote { margin:38px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:clamp(20px,2.3vw,34px); line-height:1.12; letter-spacing:-.035em; }
.button { display:inline-block; border:1px solid var(--ink); padding:16px 18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:.2s ease; }
.button:hover, .button:focus-visible { background:var(--ink); color:var(--white); }
.interference-copy .fineprint { margin-top:18px; font-size:11px; line-height:1.5; letter-spacing:.04em; color:var(--muted); }

.follow { min-height:72vh; padding:42px 28px; display:grid; grid-template-columns:170px 1fr; gap:24px; }
.follow-main { align-self:center; }
.contact-links { margin-top:54px; display:flex; flex-wrap:wrap; gap:12px; }
.contact-links a { border:1px solid var(--white); padding:14px 16px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; transition:.2s ease; }
.contact-links a:hover, .contact-links a:focus-visible { background:var(--white); color:var(--ink); }

.footer { border-top:1px solid var(--line); padding:20px 28px; display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

@media (max-width: 1000px) {
  .nav { gap:14px; }
  .process-grid { grid-template-columns:1fr 1fr; }
  .archive-grid { grid-template-columns:1fr 1fr; }
  .archive-card:last-child { grid-column:1 / -1; min-height:220px; }
  .interference-layout { grid-template-columns:1fr; gap:50px; }
}

@media (max-width: 760px) {
  .site-header { min-height:64px; padding:12px 18px; align-items:flex-start; }
  .brand img { width:106px; }
  .nav { max-width:58%; gap:7px 12px; font-size:9px; line-height:1.4; }
  .hero { min-height:92vh; padding:116px 18px 28px; }
  .hero-topline { margin-bottom:36px; align-items:flex-end; }
  .hero-status { text-align:right; }
  .hero-line { font-size:clamp(42px, 13vw, 72px); }
  .hero-subline { max-width:320px; }
  .hero-meta { margin-top:52px; align-items:flex-end; text-align:left; flex-direction:column; }
  .hero-meta span { width:100%; }
  .scroll-cue { right:18px; bottom:18px; }

  section { scroll-margin-top:82px; }
  .origin, .follow { grid-template-columns:minmax(0,1fr); padding:28px 18px; }
  .origin > *, .follow > *, .process-intro > *, .archive-heading > *, .interference-layout > * { min-width:0; }
  .origin { min-height:auto; padding-bottom:34px; }
  .origin-copy { margin-top:72px; }
  .origin-body { margin-top:38px; }
  .origin .section-stamp { grid-column:1; margin-top:38px; justify-self:start; }
  .display-copy { font-size:clamp(40px, 13vw, 72px); }

  .process, .archive, .interferences { padding:28px 18px 44px; }
  .process-intro, .archive-heading { margin-top:70px; grid-template-columns:minmax(0,1fr); gap:18px; }
  .process-intro h2 { font-size:clamp(40px, 12.3vw, 68px); }
  .process-grid { grid-template-columns:1fr; }
  .process-grid article { min-height:230px; }
  .archive-grid { grid-template-columns:1fr; }
  .archive-card, .archive-card:last-child { grid-column:auto; min-height:220px; }
  .archive-heading { margin-bottom:34px; }
  .artworks-grid { grid-template-columns:1fr; }
  .interference-layout { margin-top:70px; grid-template-columns:minmax(0,1fr); }
  .interference-layout h2 { font-size:clamp(48px, 14vw, 78px); }

  .follow { min-height:64vh; }
  .follow-main { margin-top:72px; }
  .contact-links { margin-bottom:24px; }
  .footer { padding:18px; flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .scroll-cue { animation:none; }
}

/* WRNGLY archive records v2.1 */
.artwork-meta-top { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:14px; }
.artwork-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.artwork-tags span { border:1px solid var(--line-light); padding:6px 7px; font-size:8px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.artwork-note { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line-light); font-size:12px; line-height:1.55; letter-spacing:.02em; color:rgba(255,255,255,.84); }
.artwork-record-footer { margin-top:18px; padding-top:12px; border-top:1px solid var(--line-light); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.58); }

.artwork-sequence { display:grid; gap:1px; background:var(--line-light); }
.artwork-sequence-image { width:100%; display:block; background:#161616; }

.artwork-carousel { position:relative; background:#161616; }
.artwork-carousel-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.artwork-carousel-track::-webkit-scrollbar { display:none; }
.artwork-carousel-frame { flex:0 0 100%; min-width:0; scroll-snap-align:start; }
.artwork-carousel-image { width:100%; display:block; aspect-ratio:4/5; object-fit:cover; }
.artwork-carousel-controls { min-height:46px; padding:8px 10px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; border-top:1px solid var(--line-light); }
.artwork-carousel-controls button { width:38px; height:32px; border:1px solid var(--line-light); background:transparent; color:var(--white); cursor:pointer; font:inherit; }
.artwork-carousel-controls button:last-child { justify-self:end; }
.artwork-carousel-controls span { justify-self:center; font-size:9px; letter-spacing:.14em; }

@media (max-width: 760px) {
  .artwork-meta-top { flex-direction:column; }
  .artwork-tags { justify-content:flex-start; }
}