/* ============================================================
   matthewolivier.com — design system v6
   The Arsham grammar, seen and translated:
   uncaptioned grid / numbered list toggle / stage pages with
   (MORE) split / scroll-return veil in MO blue / ambient
   monogram linework. White, black, grey, hairlines. Helvetica.
   ============================================================ */

:root {
  --white: #ffffff;
  --black: #000000;
  --grey:  #999999;
  --hair:  #e6e6e6;
  --veil:  #dfe6f1;            /* pale MO blue */
  --f: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--f);
  font-size: 12.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .15s ease, opacity .15s ease; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--f); background: none; border: 0; cursor: pointer; color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 55;
  background: transparent;
}
.site-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 24px;
  padding-bottom: 20px;
}


.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 26px; height: 26px; transition: opacity .15s ease; }
.brand:hover img { opacity: 0.7; }

.site-nav { margin-left: auto; }
.site-nav a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 22px;
}
.site-nav a:hover { color: var(--grey); }
.site-nav a.active { color: var(--black); }
.site-nav a.dim { color: var(--grey); }
.site-nav a.dim:hover { color: var(--black); }

/* stage-title takeover (work page) */
.stage-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 14px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stage-title .no { font-weight: 400; }
.stage-title .t { font-weight: 700; }
.stage-title .more {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
.stage-title .more:hover { color: var(--black); }

/* ---------- archive: grid view (uncaptioned) ---------- */

.archive { padding-top: 34px; position: relative; z-index: 1; }

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 110px;
  align-items: center;
  padding-bottom: 60px;
}
.g-item { display: block; }
.g-item img { width: 100%; transition: opacity .18s ease; }
.g-item:hover img { opacity: 0.86; }


/* a lone work sits centered and modest until the catalog grows */
.works-grid .g-item:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 440px;
  margin: 12vh auto 0;
}

/* ---------- work page: stage ---------- */

.stage {
  min-height: calc(100vh - 46px);
  display: grid;
  align-items: center;
  position: relative;
  z-index: 1;
}
.stage-inner { padding: 20px 0 70px; }
.stage-img {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}
.stage-img img { max-height: 72vh; width: auto; max-width: 100%; margin: 0 auto; }
.stage-label {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 12px;
  min-height: 1.2em;
}

.dots {
  position: absolute;
  left: 20px; bottom: 26px;
  display: flex; gap: 8px;
}
.dots .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--black);
  background: transparent;
  padding: 0;
}
.dots .dot.active { background: var(--black); }

/* reading mode — the (MORE) split */
body.reading .stage { display: block; min-height: 0; }
body.reading .stage-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 20px 70px;
}
body.reading .stage-img { position: sticky; top: 70px; padding: 0; }
body.reading .stage-img img { max-height: 76vh; }

.reading-panel { display: none; }
body.reading .reading-panel { display: block; }

.reading-panel p {
  font-size: 12.5px;
  line-height: 1.7;
  margin-bottom: 1.1em;
}
.placeholder-note { color: var(--grey); }

.cat-table { width: 100%; border-collapse: collapse; margin: 30px 0 0; }
.cat-table tr { border-top: 1px solid var(--hair); }
.cat-table tr:last-child { border-bottom: 1px solid var(--hair); }
.cat-table th {
  font-weight: 400; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black);
  text-align: left; padding: 9px 0; width: 42%;
}
.cat-table td { font-size: 11.5px; letter-spacing: 0.03em; text-align: left; padding: 9px 0; }

.credit {
  font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey);
  margin-top: 22px;
}

/* ---------- scroll-return ---------- */

.return-zone { position: relative; }
.return-zone .veil {
  position: sticky; top: 0;
  height: 0;
}
.veil-inner {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh;
  background: var(--veil);
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 30;
  transition: opacity .1s linear;
}
.veil-inner span {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
}

/* ---------- about ---------- */

.about-main { max-width: 640px; margin: 0 auto; padding-top: 44px; position: relative; z-index: 1; }
.about-main h1 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 28px;
}
.bio p { font-size: 12.5px; line-height: 1.7; margin-bottom: 1.1em; }
.bio a { border-bottom: 1px solid var(--hair); }
.bio a:hover { color: var(--grey); }
.section-head { margin: 56px 0 0; }
.rule { display: flex; align-items: center; gap: 14px; }
.rule .label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.rule .line { flex: 1; height: 1px; background: var(--hair); }
.chrono { width: 100%; border-collapse: collapse; margin-top: 18px; }
.chrono tr { border-top: 1px solid var(--hair); }
.chrono tr:last-child { border-bottom: 1px solid var(--hair); }
.chrono th {
  font-weight: 400; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey);
  text-align: left; vertical-align: top;
  padding: 11px 20px 11px 0; width: 70px; white-space: nowrap;
}
.chrono td { padding: 11px 0; font-size: 12px; }
.contact-line { margin-top: 18px; font-size: 12.5px; }
.contact-line a { border-bottom: 1px solid var(--hair); }
.contact-line a:hover { color: var(--grey); }

/* ---------- 404 ---------- */

.lost { padding: 140px 0; text-align: center; position: relative; z-index: 1; }
.lost .no { font-size: 11px; letter-spacing: 0.35em; }
.lost p { font-size: 13px; margin: 14px 0 28px; }
.lost a { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.lost a:hover { color: var(--grey); }

/* ---------- footer ---------- */

.site-footer { margin-top: 110px; position: relative; z-index: 1; }
.site-footer .wrap {
  display: flex; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-top: 16px; padding-bottom: 48px;
}
.site-footer span, .site-footer a {
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey);
}
.site-footer a:hover { color: var(--black); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); row-gap: 70px; }
  body.reading .stage-inner { grid-template-columns: 1fr; }
  body.reading .stage-img { position: static; }
}

@media (max-width: 700px) {
  .site-nav { display: none; }
  .stage-title { position: static; transform: none; margin-left: auto; }
  .stage-title .t { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
  .archive { padding-top: 20px; }
  .works-grid { column-gap: 14px; row-gap: 48px; }
  .menu-inner { padding-top: 100px; }
  .menu-list a { font-size: 17px; }
}

/* ---------- click-to-expand: the thumbnail morphs into the stage ---------- */

@view-transition { navigation: auto; }

::view-transition-old(work-001),
::view-transition-new(work-001) {
  animation-duration: 0.34s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* ---------- menu: pop-in — no surface, the buttons just arrive ---------- */

.menu-zone {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; align-items: center;
  pointer-events: none;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background .3s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.menu-zone .menu-list { padding-left: 64px; }
.menu-zone .menu-list a {
  display: block;
  pointer-events: auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 0;
  opacity: 0;
  transform: scale(0.85);
  visibility: hidden;
  transition: opacity .16s ease, transform .22s cubic-bezier(.34,1.56,.64,1),
              visibility .22s, color .15s ease;
}
.menu-zone .menu-list a:hover { color: var(--grey); }
body.menu-open .menu-zone .menu-list a { opacity: 1; transform: none; visibility: visible; }
body.menu-open .menu-zone .menu-list a:nth-child(1) { transition-delay: .02s; }
body.menu-open .menu-zone .menu-list a:nth-child(2) { transition-delay: .07s; }
body.menu-open .menu-zone .menu-list a:nth-child(3) { transition-delay: .12s; }
body.menu-open .menu-zone .menu-list a:nth-child(4) { transition-delay: .17s; }
body.menu-open .menu-zone .menu-list a:nth-child(5) { transition-delay: .22s; }

.menu-zone .menu-foot {
  padding: 18px 0 0;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease .27s, visibility .2s .27s;
}
body.menu-open .menu-zone .menu-foot { opacity: 1; visibility: visible; }
.menu-zone .menu-foot a, .menu-zone .menu-foot span {
  pointer-events: auto;
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grey);
  margin-right: 16px;
}
.menu-zone .menu-foot a:hover { color: var(--black); }

@media (max-width: 560px) {
  .menu-zone .menu-list { padding-left: 48px; }
  .menu-zone .menu-list a { font-size: 14px; }
}

/* ---------- menu trigger: dot grid on the left rail ---------- */

.rail-dots {
  position: fixed;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  z-index: 80;
}
.rail-dots .d {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--black);
  transition: opacity .18s ease, transform .18s ease;
}
.rail-dots .d:nth-child(1) { left: 0; top: 0; }
.rail-dots .d:nth-child(2) { right: 0; top: 0; }
.rail-dots .d:nth-child(3) { left: 0; bottom: 0; }
.rail-dots .d:nth-child(4) { right: 0; bottom: 0; }
.rail-dots::before, .rail-dots::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 1.75px;
  background: var(--black);
  opacity: 0;
  transition: opacity .2s ease .08s;
}
.rail-dots::before { transform: translate(-50%,-50%) rotate(45deg); }
.rail-dots::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.rail-dots:hover .d { transform: scale(1.35); }
body.menu-open .rail-dots .d { opacity: 0; transform: scale(0.4); }
body.menu-open .rail-dots::before, body.menu-open .rail-dots::after { opacity: 1; }

@media (max-width: 560px) {
  .rail-dots { left: 14px; }
}

/* mobile: frost the room while the menu is open */
@media (max-width: 700px) {
  body.menu-open .menu-zone {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* ---------- ambient: drifting paper grain (placeholder while deciding) ---------- */

.grain {
  position: fixed; inset: -140px;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.038;
  mix-blend-mode: multiply;
  animation: grainDrift 36s linear infinite;
}
@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-60px, -40px); }
  50%  { transform: translate(-120px, 20px); }
  75%  { transform: translate(-40px, 70px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ============================================================
   v11 experience — The Table (homepage)
   ============================================================ */

:root { --fieldbg: #f5f4ee; --panel-tint: #d0d0cf; }

body.table-page { background: var(--fieldbg); overflow: hidden; height: 100vh; }

.table-page .brand { position: fixed; left: 22px; top: 20px; z-index: 60; }

.view-toggle-pill {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center;
  border: 1px solid var(--hair); background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.view-toggle-pill .ic { width: 34px; height: 34px; display: grid; place-items: center; border-right: 1px solid var(--hair); }
.view-toggle-pill .ic span { width: 12px; height: 12px;
  background: radial-gradient(circle 1.5px, var(--black) 1.4px, transparent 1.5px) 0 0/6px 6px; }
.view-toggle-pill .lbl { padding: 0 16px; font-size: 11px; letter-spacing: .1em; text-transform: lowercase; }
.view-toggle-pill:hover .lbl { color: var(--grey); }

#field { position: fixed; inset: 0; cursor: grab; touch-action: none; }
#field.dragging { cursor: grabbing; }
#plane { position: absolute; left: 0; top: 0; width: 3200px; height: 2200px;
  will-change: transform; transform-origin: 0 0; }

.mo-piece { position: absolute; user-select: none; opacity: 0;
  transform: translateX(var(--outx, 0px)) scale(var(--osc, .55));
  transition: opacity .4s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
body.objects-in .mo-piece { opacity: 1; transform: none; }
body.objects-in .mo-piece:nth-child(1) { transition-delay: 0s; }
body.objects-in .mo-piece:nth-child(2) { transition-delay: .12s; }
body.objects-in .mo-piece:nth-child(3) { transition-delay: .22s; }
body.objects-in .mo-piece:nth-child(4) { transition-delay: .3s; }
.mo-piece img { width: 100%; height: auto; pointer-events: none;
  filter: drop-shadow(0 22px 30px rgba(40,36,28,.22)); }
.mo-piece img[src*="codex-orb"] { filter: none; }
.mo-piece .chip { position: absolute; transform: scale(var(--invs,1)); transform-origin: 0 0; left: calc(100% + 10px); top: 12px;
  background: var(--black); color: #fff; font-size: 10px; letter-spacing: .08em;
  padding: 4px 8px; white-space: nowrap; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.mo-piece:hover .chip { opacity: 1; }
.mo-piece.is-plate img { transition: transform .5s cubic-bezier(.22,.61,.36,1),
  opacity .6s ease, filter .6s ease; }
.mo-piece.is-plate:hover img { transform: translateY(-12px); }
.chip .chip-cc { display: block; font-size: 8.5px; letter-spacing: .16em;
  color: rgba(255,255,255,.62); margin-top: 3px; font-variant-numeric: tabular-nums; }

.hint { position: fixed; right: 136px; bottom: 33px; z-index: 60;
  font-size: 10.5px; letter-spacing: .08em; color: var(--grey); }
.zoomui { position: fixed; right: 20px; bottom: 18px; z-index: 60; display: flex; gap: 8px; }
.zoomui button { width: 42px; height: 42px; border: 1px solid var(--hair); border-radius: 50%;
  background: rgba(255,255,255,.72); font-size: 16px; line-height: 1; color: var(--black);
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              transform .22s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.zoomui button:hover:not(:disabled) { background: var(--black); color: #fff;
  border-color: var(--black); transform: scale(1.1); }
.zoomui button:disabled { opacity: .32; cursor: default; }

.table-page .toggle-chrome { opacity: 0; transition: opacity .7s ease; }
body.ui-in .toggle-chrome { opacity: 1; }

.panel { position: fixed; left: 0; top: 0; bottom: 0; width: min(600px, 68vw); z-index: 65;
  background: var(--panel-tint);
  transform: translateX(-102%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; padding: 64px 44px 28px; }
body.panel-open .panel { transform: none; }
.panel .p-img { flex: 1; display: grid; place-items: center; min-height: 0; }
.panel .p-img img { max-height: 100%; max-width: 100%; width: auto;
  filter: drop-shadow(0 18px 26px rgba(40,36,28,.25)); }
.panel .p-cap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; margin-top: 14px; }
.panel .rail { position: absolute; left: 16px; top: 64px; display: flex; flex-direction: column; gap: 10px; }
.panel .rail button { width: 44px; border: 1px solid rgba(0,0,0,.15); background: #fff; padding: 3px; }
.panel .rail button.active { border-color: var(--black); }
.panel .go { margin-top: 18px; align-self: flex-end; }
.panel .go a { background: var(--black); color: #fff; font-size: 11px; letter-spacing: .08em; padding: 10px 16px; }
.panel .go a:hover { opacity: .85; }
.panel .x { position: absolute; right: -21px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--hair);
  display: grid; place-items: center; font-size: 15px; }
.panel .x:hover { border-color: var(--black); }

#gridView { position: fixed; inset: 0; overflow-y: auto; z-index: 40; background: transparent;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s ease, visibility .8s ease; }
body.grid-mode #gridView { opacity: 1; visibility: visible; pointer-events: auto; }
body.grid-mode #field, body.grid-mode .hint, body.grid-mode .zoomui { display: none; }
.gwrap { max-width: 1240px; margin: 0 auto; padding: 110px 20px 60px; }
.gwrap h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 500; letter-spacing: -.01em;
  line-height: 1.02; margin-bottom: 22px; }
.gwrap .intro { max-width: 300px; font-size: 12.5px; line-height: 1.7; margin-bottom: 56px; }
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gcard { border: 1px solid var(--hair); border-radius: 4px; padding: 40px;
  display: grid; place-items: center; aspect-ratio: 1 / 1.05; }
.gcard img { max-width: 82%; filter: drop-shadow(0 16px 22px rgba(40,36,28,.18)); }
.gcap { display: flex; justify-content: space-between; font-size: 13px; padding: 10px 2px 0; }
.gcap .n { color: var(--grey); }
.gfoot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--hair); margin-top: 70px; padding: 16px 0 40px; }
.gfoot span, .gfoot a { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.gfoot a:hover { color: var(--black); }

body.work-tint { background: #e6e6e5; }

@media (max-width: 800px) {
  .gcards { grid-template-columns: 1fr; }
  .panel { width: min(600px, 86vw); padding: 56px 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-piece { opacity: 1; transform: none; transition: none; }
  .table-page .toggle-chrome { opacity: 1; }
}

/* ============================================================
   v12 navigation — carved word nav + split-bar pill
   ============================================================ */

.brand{position:fixed;left:22px;top:20px;z-index:60}
.brand img{width:26px;height:26px;transition:opacity .15s ease}
.brand:hover img{opacity:.7}

.word-nav{position:fixed;top:24px;right:24px;z-index:60;display:flex;gap:26px;align-items:baseline}
.word-nav a{font-family:"Figtree","Helvetica Neue",sans-serif;
  font-weight:700;font-size:16.5px;letter-spacing:.05em;text-transform:lowercase;
  color:var(--carve, rgba(245,244,238,.92));position:relative;
  text-shadow:0 1px 1px rgba(40,36,28,.28),0 -1px 1px rgba(255,255,255,.85);
  transition:color .22s ease,text-shadow .22s ease,transform .2s ease}
.word-nav a:hover{color:var(--black);text-shadow:none;transform:translateY(-1.5px)}
.word-nav a.active{color:rgba(17,17,17,.42);text-shadow:none}
.word-nav a.active:hover{color:var(--black)}
.word-nav a .ext{font-size:10px;vertical-align:super;margin-left:2px}

.bm{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:75;
  display:flex;align-items:center;background:#141414;border-radius:4px;gap:0}
.bm .tg{font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.045em;text-transform:lowercase;cursor:pointer;
  background:none;color:#fff;padding:10px 16px}
.bm .pwrap{display:flex;max-width:0;overflow:hidden;
  transition:max-width .5s cubic-bezier(.22,.61,.36,1)}
.bm.open .pwrap{max-width:420px}
.bm .it{font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.045em;text-transform:lowercase;
  color:#fff;padding:10px 16px;border-left:1px solid rgba(255,255,255,.18);
  white-space:nowrap;opacity:0;transition:opacity .3s ease .15s,background .15s ease}
.bm.open .it{opacity:1}
.bm .it:hover,.bm .tg:hover{background:#000}
.bm .tg:hover{border-radius:4px 0 0 4px}

/* work page: floating title takeover */
.stage-float{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:58;
  display:flex;align-items:baseline;gap:14px;white-space:nowrap;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.stage-float .no{font-weight:400}
.stage-float .t{font-weight:700}
.stage-float .more{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.stage-float .more:hover{color:var(--black)}

/* interior pages breathe under floating chrome */
body.float-chrome .sheet{padding-top:110px}
body.float-chrome .about-main{padding-top:120px}
body.float-chrome .lost{padding-top:190px}
body.float-chrome .empty-state{padding-top:26vh}

/* footer nav links */
.site-footer .fnav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:840px){
  .word-nav{flex-direction:column;align-items:flex-end;gap:10px;top:20px;right:18px}
  .word-nav a{font-size:14px}
  .stage-float{top:auto;bottom:74px;font-size:10.5px}
}

/* ============================================================
   v13 rooms — four tables, the ritual, the signal
   ============================================================ */

body.table-page { transition: background-color .6s ease; }
#plane { width: 15000px; }

/* objects arrive by earning the .in class (per-node, staggered via JS) */
.mo-piece.in { opacity: 1; transform: none; }
.mo-piece.in.shift { transform: translate(var(--px, 0px), var(--py, 0px)); }
.mo-piece.notrans { transition: none !important; }

}

/* acquisition line — quiet, present, findable */
.acquire { text-align: center; margin-top: 34px; }
.acquire a {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--black); border-bottom: 1px solid var(--hair); padding-bottom: 2px;
}
.acquire a:hover { color: var(--grey); border-bottom-color: var(--grey); }
.panel .inq { margin-top: 10px; align-self: flex-end; }
.panel .inq a {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(17,17,17,.6);
}
.panel .inq a:hover { color: var(--black); }

/* ============================================================
   v20 painting viewer — click a painting: the room lays over
   the table; scroll pushes it away
   ============================================================ */

body.viewer-open #field { pointer-events: none; }
body.viewer-open .word-nav, body.viewer-open .view-toggle-pill,
body.viewer-open .bm, body.viewer-open .hint, body.viewer-open .zoomui {
  opacity: 0 !important; pointer-events: none !important; transition: opacity .4s ease;
}

#viewer{position:fixed;inset:0;z-index:78;opacity:0;visibility:hidden;
  background:transparent;will-change:transform;
  transition:opacity .6s ease,visibility .6s ease,background-color 2.2s cubic-bezier(.25,.46,.45,.94)}
body.viewer-open #viewer{opacity:1;visibility:visible}
#viewer.solid{background:#e8e9ea}

.v-title{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-6px);z-index:86;
  display:flex;align-items:baseline;gap:30px;white-space:nowrap;
  opacity:0;transition:opacity .5s ease,transform .5s ease}
body.chrome-in .v-title{opacity:1;transform:translateX(-50%)}
.v-title::before{content:"";width:82px;flex:none}
.v-title .t{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.v-title .info-btn{font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:800;font-size:15.5px;
  letter-spacing:.07em;text-transform:lowercase;cursor:pointer;min-width:82px;text-align:left;
  color:rgba(232,233,234,.98);
  text-shadow:0 1.5px 2px rgba(40,36,28,.5), 0 -1.5px 1.5px rgba(255,255,255,.95);
  transition:color .25s ease,text-shadow .25s ease,transform .2s ease}
.v-title .info-btn:hover{color:var(--black);text-shadow:none;transform:translateY(-1px)}
body.info-open .v-title .info-btn{color:rgba(17,17,17,.5);text-shadow:none}
body.info-open .v-title .info-btn:hover{color:var(--black)}

.v-stage{position:absolute;inset:0;z-index:80}
.v-img-wrap{position:absolute;will-change:transform,width;opacity:0}
.v-img-wrap.on{opacity:1}
@media (max-width:700px){ .v-img-wrap{opacity:1} }
.v-img-wrap img{width:100%;height:auto;
  filter:drop-shadow(0 26px 40px rgba(40,36,28,.28))}
#vimg{transition:opacity .32s ease,transform .32s ease}

.frame-dots{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:18px;display:flex;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .4s ease .3s}
body.info-open .frame-dots{opacity:1;pointer-events:auto}
.frame-dots button{width:7px;height:7px;border-radius:50%;
  background:rgba(17,17,17,.22);transition:background .25s ease,transform .2s ease}
.frame-dots button:hover{background:rgba(17,17,17,.6);transform:scale(1.3)}
.frame-dots button.on{background:var(--black)}

.vticks{position:fixed;left:22px;bottom:22px;z-index:86;display:flex;gap:6px;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease .12s,transform .5s ease .12s}
body.chrome-in .vticks{opacity:1;transform:none}
.vticks span{width:12px;height:2px;background:rgba(17,17,17,.22);transition:background .3s}
.vticks span.on{background:var(--black)}

.vpill{font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.045em;text-transform:lowercase;display:inline-block;
  background:#141414;color:#fff;border-radius:4px;padding:10px 16px;
  transition:background .2s,transform .25s ease}
.vpill:hover{background:#000;transform:translateY(-1px)}
.v-inquire{position:fixed;right:22px;bottom:20px;z-index:86;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease .2s,transform .5s ease .2s}
body.chrome-in .v-inquire{opacity:1;transform:none}
body.info-open .v-inquire{opacity:0;pointer-events:none;transition:opacity .3s ease}

.v-info{position:fixed;right:5vw;top:0;bottom:0;width:min(560px,44vw);z-index:84;
  padding:17vh 48px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateX(32px);
  transition:opacity .55s ease .12s,transform .65s cubic-bezier(.22,.61,.36,1) .12s,visibility .8s}
body.info-open .v-info{opacity:1;visibility:visible;transform:none}
.v-info .statement{font-size:13.5px;line-height:1.75;color:var(--black);margin-bottom:32px}
.vdeck{border-top:1px solid rgba(17,17,17,.14)}
.vdeck .row{display:flex;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:1px solid rgba(17,17,17,.14)}
.vdeck .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--black);padding-top:2px}
.vdeck .v{font-size:12.5px;color:var(--black);text-align:right}
.v-info .vpill{margin-top:26px;opacity:0;transform:translateY(16px);
  transition:opacity .4s ease .5s,transform .5s cubic-bezier(.34,1.56,.64,1) .5s}
body.info-open .v-info .vpill{opacity:1;transform:none}

#cur{position:fixed;z-index:90;pointer-events:none;opacity:0;
  font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:lowercase;
  background:#141414;color:#fff;padding:6px 12px;border-radius:3px;
  transform:translate(-50%,-140%);transition:opacity .25s ease}
#cur.on{opacity:1}

.v-return{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:86;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(17,17,17,.35);
  opacity:0;transition:opacity .5s ease .3s}
body.chrome-in .v-return{opacity:1}
body.info-open .v-return{opacity:0}

.m-return{display:none}
@media (max-width:700px){
  body.table-page.viewer-open{overflow:auto;height:auto}
  #viewer{position:absolute;inset:auto 0 auto 0;top:0;min-height:100vh}
  .v-stage{position:relative;inset:auto;padding:84px 0 0}
  .v-img-wrap{position:relative !important;left:auto !important;top:auto !important;
    width:88vw !important;margin:0 auto;transform:none !important}
  #cur,.v-return,.frame-dots{display:none}
  .v-info{position:static;width:auto;padding:26px 22px 8px;
    opacity:1;visibility:visible;transform:none;overflow:visible}
  .v-info .vpill{opacity:1;transform:none}
  .vticks{position:static;justify-content:center;padding:16px 0 0;opacity:1;transform:none}
  .v-inquire{display:none}
  .m-return{display:block;text-align:center;padding:56px 0 84px;
    font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(17,17,17,.4)}
}

/* logo ink — the mark rides above the viewing room, as a black cutout */
.brand img { transition: opacity .15s ease, filter .45s ease; }
body.viewer-open .brand { z-index: 88; }
body.viewer-open .brand img { filter: brightness(0); }
body.work-tint .brand img { filter: brightness(0); }

/* forthcoming shadows — the stripped viewer */
body.shadow-mode .vticks { display: none; }
.mo-piece img[src*="carve-"] { filter: none; }
body.shadow-mode #vimg { filter: none; }


/* ============================================================
   v26 the book, unpacked — satellites + preorder drawer
   ============================================================ */

.mo-sat{position:absolute;opacity:0;pointer-events:none;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .5s ease}
body.book-unpacked .mo-sat{opacity:1;pointer-events:auto;transform:translate(0,0) scale(1) !important}

.ms-count{text-align:left}
.ms-count .n{font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:800;
  font-size:104px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ms-count .n small{font-size:.34em;font-weight:700;margin-right:.3em}
.ms-count .sub{margin-top:10px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#3c3f39}

.ms-card{background:#f7f5ef;border-radius:4px;box-shadow:0 16px 28px rgba(30,32,26,.16);
  font-family:"EB Garamond",Georgia,serif;color:#1c1b18}
.ms-colophon{width:330px;padding:34px 30px;text-align:center}
.ms-colophon .sm{font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  font-family:"Helvetica Neue",Arial,sans-serif}
.ms-colophon h3{font-weight:500;font-style:italic;font-size:27px;margin:.55em 0 .8em}
.ms-colophon .meta{font-size:16px;line-height:1.9}
.ms-page{width:400px;padding:30px 34px}
.ms-page p{font-size:16.5px;line-height:1.66;margin-bottom:.6em}
.ms-page .it{font-style:italic;opacity:.75}
.ms-page .pg{font-size:11px;letter-spacing:.2em;
  font-family:"Helvetica Neue",Arial,sans-serif;color:#777;margin-top:16px}
.ms-quote{width:340px;padding:32px 32px;font-style:italic;font-size:20px;line-height:1.55}
.ms-quote .att{font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-family:"Helvetica Neue",Arial,sans-serif;color:#777;margin-top:14px}
.carveorder{display:block;text-align:left;cursor:pointer}
.carveorder .w{display:block;font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:800;
  font-size:52px;letter-spacing:.05em;text-transform:lowercase;line-height:1;
  color:rgba(220,224,215,.97);
  text-shadow:0 2px 3px rgba(30,32,26,.5), 0 -2px 2px rgba(255,255,255,.9);
  transition:color .3s ease,text-shadow .3s ease}
.carveorder .ul{display:block;height:3.5px;width:100%;background:var(--black);
  margin-top:10px;transform:scaleX(.16);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.carveorder .cd{display:block;margin-top:12px;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(17,17,17,.55);font-variant-numeric:tabular-nums;
  transition:color .3s ease}
.carveorder:hover .w{color:var(--black);text-shadow:none}
.carveorder:hover .ul{transform:scaleX(1)}
.carveorder:hover .cd{color:var(--black)}

.po-drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,88vw);z-index:96;
  background:#fff;box-shadow:-18px 0 40px rgba(20,20,18,.12);
  padding:64px 44px 40px;overflow-y:auto;
  transform:translateX(103%);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
body.preorder-open .po-drawer{transform:none}
.po-head{font-family:"Figtree","Helvetica Neue",sans-serif;font-weight:800;font-size:22px;
  letter-spacing:.04em;text-transform:lowercase}
.po-sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  margin:8px 0 26px}
.po-region{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--black);
  margin:26px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--hair)}
.po-row{display:block;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--hair)}
.po-row:hover{color:var(--grey)}
.po-off{display:none}
.po-more{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  margin:30px 0 4px;padding:0 0 6px;border-bottom:1px solid var(--hair)}
.po-more:hover{color:var(--black)}
.po-more[hidden]{display:none}
.po-x{position:absolute;right:20px;top:18px;font-size:20px;color:var(--grey)}
.po-x:hover{color:var(--black)}

@media (max-width:700px){
  .ms-count .n{font-size:84px}
}


/* v37 — the void compass */
#void { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%);
  z-index: 60; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .7s ease; }
body.voided #void { opacity: 1; }
#voidArrow { pointer-events: none; width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid rgba(17,17,17,.28); background: rgba(255,255,255,.32);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--black); transition: width .6s cubic-bezier(.22,.61,.36,1),
  height .6s cubic-bezier(.22,.61,.36,1), background .4s ease; }
body.voided #voidArrow { pointer-events: auto; }
#voidArrow:hover { background: var(--black); color: #fff; }
#voidArrowSvg { transition: width .6s ease, height .6s ease; }
#void.s2 #voidArrow { width: 86px; height: 86px; }
#void.s2 #voidArrowSvg { width: 36px; height: 36px; }
#void.s3 #voidArrow { width: 112px; height: 112px;
  animation: voidpulse 1.15s ease-in-out infinite; }
#void.s3 #voidArrowSvg { width: 46px; height: 46px; }
@keyframes voidpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
#voidMsg { margin-top: 20px; font-family: "Figtree","Helvetica Neue",sans-serif;
  font-weight: 500; font-size: 16.5px; letter-spacing: .02em; line-height: 1.55;
  color: rgba(17,17,17,.62);
  max-width: min(460px, 72vw); margin-left: auto; margin-right: auto; }
#void.s3 #voidMsg { font-size: 19px; color: rgba(17,17,17,.85); }
@media (prefers-reduced-motion: reduce) { #void.s3 #voidArrow { animation: none; } }


/* v39 — carve + sink page transition */
#pgcarve { position: fixed; left: 50%; top: 44%; z-index: 97; pointer-events: none;
  transform: translate(-50%,-50%) scale(.9); opacity: 0;
  font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 800;
  font-size: clamp(52px, 9vw, 132px); letter-spacing: .02em; text-transform: lowercase;
  white-space: nowrap; color: var(--carve, rgba(245,244,238,.97));
  text-shadow: 0 4px 6px rgba(40,36,28,.5), 0 -3px 4px rgba(255,255,255,.9);
  transition: opacity .5s ease, transform .72s cubic-bezier(.22,.61,.36,1); }
body.leaving #pgcarve { opacity: 1; transform: translate(-50%,-50%) scale(1); }
body.leaving #field, body.leaving main.wrap {
  transform: scale(.92); opacity: .22; filter: blur(5px) saturate(.8);
  transition: transform .75s cubic-bezier(.22,.61,.36,1), opacity .6s ease, filter .75s ease; }
body.leaving .zoomui, body.leaving .hint, body.leaving .view-toggle-pill { opacity: 0 !important;
  transition: opacity .4s ease; }
body.float-chrome .about-main h1 { animation: mo-inkin 1s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mo-inkin {
  from { color: rgba(245,244,238,.97);
    text-shadow: 0 3px 5px rgba(40,36,28,.5), 0 -2px 3px rgba(255,255,255,.9); }
  to { color: var(--black); text-shadow: none; } }
body.float-chrome .about-main > *:not(h1) { animation: mo-riseup .7s ease both; }
body.float-chrome .about-main > *:nth-child(2) { animation-delay: .25s; }
body.float-chrome .about-main > *:nth-child(3) { animation-delay: .33s; }
body.float-chrome .about-main > *:nth-child(4) { animation-delay: .40s; }
body.float-chrome .about-main > *:nth-child(5) { animation-delay: .46s; }
body.float-chrome .about-main > *:nth-child(6) { animation-delay: .52s; }
body.float-chrome .about-main > *:nth-child(7) { animation-delay: .57s; }
body.float-chrome .about-main > *:nth-child(8) { animation-delay: .62s; }
body.float-chrome .about-main > *:nth-child(9) { animation-delay: .66s; }
body.float-chrome .about-main > *:nth-child(10) { animation-delay: .70s; }
body.float-chrome .about-main > *:nth-child(11) { animation-delay: .74s; }
@keyframes mo-riseup { from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.float-chrome .about-main h1, body.float-chrome .about-main > * { animation: none; } }


/* v40 — contact tray */
.ctc { position: fixed; bottom: 88px; left: 50%; z-index: 97;
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  background: var(--black); color: #fff; border-radius: 99px;
  padding: 8px 10px 8px 20px; box-shadow: 0 14px 40px rgba(20,20,24,.28);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.ctc.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ctc .em { font-size: 12.5px; letter-spacing: .05em; white-space: nowrap; }
.ctc button, .ctc a { font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .1em; text-transform: lowercase; color: #fff;
  background: rgba(255,255,255,.14); border: 0; border-radius: 99px;
  padding: 9px 15px; cursor: pointer; white-space: nowrap; }
.ctc button:hover, .ctc a:hover { background: rgba(255,255,255,.3); }
@media (max-width: 560px) { .ctc { width: calc(100vw - 32px); justify-content: space-between;
  padding-left: 14px; } .ctc .em { font-size: 11px; } }


/* v41 — plate shockwave exit */
body.plate-leaving .zoomui, body.plate-leaving .hint,
body.plate-leaving .view-toggle-pill, body.plate-leaving .bm {
  opacity: 0 !important; transition: opacity .8s ease; pointer-events: none; }


/* v42 — pointer affordance + touch input */
a, button:not(:disabled) { cursor: pointer; }
.word-nav a, .bm .tg, .bm .it, .view-toggle-pill, .mo-piece,
.tab, .gcard, .po-row, .po-more, .po-x, .frame-dots span,
.carveorder, #voidArrow, .ms-order button { cursor: pointer; }
#field, #field * { touch-action: none; }
#viewer { touch-action: pan-y; }
html, body { overscroll-behavior: none; }
body.table-page:not(.viewer-open) { position: fixed; inset: 0; width: 100%; }


/* v44 — mobile order pass */
@media (max-width: 700px) {
  .word-nav { gap: 12px; top: 18px; right: 16px; }
  .word-nav a { color: rgba(17,17,17,.6); text-shadow: none; font-size: 13.5px; }
  .word-nav a.active { color: rgba(17,17,17,.26); }
  .view-toggle-pill { top: auto; bottom: 86px; left: 50%; transform: translateX(-50%); }
  .hint { display: none; }
  .zoomui { bottom: 22px; right: 12px; }
  .brand { top: 16px; left: 16px; }
  .chrono th { font-size: 11px; letter-spacing: .04em; }
  .about-main { padding-left: 2px; padding-right: 2px; }
  #voidMsg { font-size: 14.5px; }
  .po-head { font-size: 19px; }
  .ctc { bottom: 96px; }
}


/* v46 — instant controls on touch */
.word-nav a, .bm, .bm .tg, .bm .it, .zoomui button, .view-toggle-pill,
.ctc, .ctc button, .ctc a, .po-drawer, .po-row, .po-more, .po-x,
#voidArrow, .carveorder, .mo-sat, .site-footer a, .brand {
  touch-action: manipulation; }

/* v47 marker */


/* v48 — mobile GPU relief */
@media (max-width: 820px) {
  .mo-piece img { filter: none !important; }
  #plane { width: 3200px; height: 2200px; }
  .grain { display: none; }
}


/* v49 — the closed viewer is INERT, no descendant may resurrect itself */
body:not(.viewer-open) #viewer,
body:not(.viewer-open) #viewer * {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* v50 — list grid, hamburger, socials, polish */
.gcards { display: none; }
#gvList { display: flex; flex-direction: column; margin-top: 8px; }
.gv-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t y" "i y";
  gap: 2px 18px; text-align: left; padding: 20px 2px; background: none; border: 0;
  border-bottom: 1px solid transparent; cursor: pointer; color: var(--black);
  opacity: 0; transform: translateY(10px);
  font-family: "Helvetica Neue",Helvetica,sans-serif;
  transition: opacity .9s ease var(--da, 0s),
    transform 1.1s cubic-bezier(.22,.61,.36,1) var(--da, 0s),
    border-color 1.3s ease var(--d, .55s), background .2s ease; }
body.grid-mode .gv-row { transform: none; }
.gv-row .gv-t { color: var(--carve, rgba(245,244,238,.97));
  text-shadow: 0 1.5px 2px rgba(40,36,28,.45), 0 -1.5px 1.5px rgba(255,255,255,.85);
  transition: color 1.4s ease var(--d, .55s), text-shadow 1.4s ease var(--d, .55s); }
.gv-row .gv-i, .gv-row .gv-y { opacity: 0; transition: opacity 1.1s ease var(--d, .55s); }
body.grid-mode .gv-row { opacity: 1; border-bottom-color: var(--hair); }
body.grid-mode .gv-row .gv-t { color: var(--black); text-shadow: none; }
body.grid-mode .gv-row .gv-i, body.grid-mode .gv-row .gv-y { opacity: 1; }
body:not(.grid-mode) .gv-row, body:not(.grid-mode) .gv-row .gv-t,
body:not(.grid-mode) .gv-row .gv-i, body:not(.grid-mode) .gv-row .gv-y {
  transition-delay: 0s; }
.gv-row:hover:not(.gv-off) { background: rgba(17,17,17,.035); }
.gv-row.gv-off { cursor: default; color: rgba(17,17,17,.45); }
.gv-t { grid-area: t; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.gv-i { grid-area: i; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey); }
.gv-y { grid-area: y; align-self: center; font-size: 11.5px; letter-spacing: .12em;
  color: rgba(17,17,17,.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail { display: none !important; }

/* socials */
.soc-corner { position: fixed; left: 20px; bottom: 18px; z-index: 55;
  display: flex; flex-direction: column; gap: 10px; }
.soc-icons { display: flex; gap: 12px; }
.soc-icons a { color: rgba(17,17,17,.45); display: inline-flex; }
.soc-icons a:hover { color: var(--black); }
.soc-c { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey); }
.hint { left: auto; right: 118px; bottom: 29px; }
.site-footer .fcol { display: flex; flex-direction: column; gap: 10px; }

/* hamburger (mobile only) */
.mnav-tg { display: none; position: fixed; top: 16px; right: 14px; z-index: 92;
  width: 42px; height: 42px; border: 1px solid rgba(17,17,17,.14); border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer; padding: 12px 11px;
  flex-direction: column; justify-content: space-between; }
.mnav-tg span { display: block; height: 1.8px; background: var(--black); border-radius: 2px;
  transition: transform .35s ease, opacity .3s ease; }
.mnav-tg.open span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.mnav-tg.open span:nth-child(2) { opacity: 0; }
.mnav-tg.open span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }
.mnav { position: fixed; top: 66px; right: 14px; z-index: 91; background: var(--black);
  border-radius: 14px; padding: 10px 0; min-width: 200px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.mnav.open { opacity: 1; transform: none; pointer-events: auto; }
.mnav a { display: block; font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .06em; text-transform: lowercase; color: #fff;
  padding: 12px 22px; text-decoration: none; cursor: pointer; }
.mnav a:active { background: rgba(255,255,255,.12); }
.mnav-soc { display: flex; gap: 16px; padding: 12px 22px 8px;
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 8px; }
.mnav-soc a { color: rgba(255,255,255,.75); padding: 0; display: inline-flex; }

/* contact tray X */
.ctc { overflow: visible; }
.ctcx { position: absolute; top: -14px; right: 6px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--black); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 15px; line-height: 1; cursor: pointer; }

@media (max-width: 700px) {
  .word-nav { display: none; }
  .mnav-tg { display: flex; }
  .soc-corner { display: none; }
  .site-footer .soc-icons { display: none; }
  .bm .pwrap { position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%); flex-direction: column; max-width: none;
    max-height: 0; background: var(--black); border-radius: 12px; }
  .bm.open .pwrap { max-height: 240px; transition: max-height .5s cubic-bezier(.22,.61,.36,1); }
  .bm .it { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); text-align: center; }
  .bm .it:first-child { border-top: 0; }
  /* painting viewer — arsham mobile */
  #infoBtn { display: none !important; }
  #vinq2 { display: none !important; }
  .v-inquire { display: block !important; position: fixed; right: 16px; bottom: 20px;
    z-index: 96; opacity: 1 !important; transform: none !important; }
  .v-info { padding: 40px 24px 110px !important; }
  #vstatement { font-size: 14.5px; line-height: 1.85; margin-bottom: 28px; }
  .vdeck .row { padding: 14px 0; }
  .gwrap { padding: 90px 18px 60px; }
  .gv-t { font-size: 14px; max-width: 60vw; }
}


/* v52 — carve-in grid: the table itself becomes the ledger */
body.grid-mode #field { pointer-events: none; }
#plane { transition: opacity 1.1s ease; }
body.grid-mode #plane { opacity: 0; }
body.grid-mode .zoomui, body.grid-mode .hint { opacity: 0 !important; pointer-events: none; }
.gwrap > h1, .gwrap .intro, .gfoot { display: none; }
.gv-k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--grey);
  margin: 6px 0 20px; opacity: 0; transition: opacity .9s ease .2s; }
body.grid-mode .gv-k { opacity: 1; }
.gv-note { margin-top: 28px; font-size: 10.5px; font-style: italic; letter-spacing: .05em;
  color: rgba(17,17,17,.45); opacity: 0; transition: opacity 1.1s ease var(--dn, 1s); }
body.grid-mode .gv-note { opacity: 1; }


/* v54 — the return veil */
.rveil { position: fixed; inset: 0; z-index: 130; pointer-events: none;
  background: var(--fieldbg, #f5f4ee); transform: translateY(101%);
  will-change: transform; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 -18px 50px rgba(20,20,24,.10); }
.rveil .rv-l { font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .26em; text-transform: lowercase;
  color: rgba(17,17,17,.55); opacity: 0; }


/* v55 — the return zone (arsham mechanic, native scroll) */
.rzone { position: relative; height: 118vh; background: var(--fieldbg, #dadde0);
  overflow: hidden; }
.rzone .rz-item { position: absolute; opacity: .34; filter: saturate(.75);
  pointer-events: none; }
.rzone .rz-label { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .22em; text-transform: lowercase; color: var(--black);
  text-decoration: none; padding: 14px 22px; z-index: 2; }
.rzone .rz-label:hover { letter-spacing: .3em; }
.rzone-v { display: none; }
.v-inq-block { display: none; }
@media (max-width: 700px) {
  body.viewer-open .rzone-v { display: block; --fieldbg: #f5f4ee; }
  .rzone-v .rz-item { opacity: .3; }
  .v-title { position: static !important; transform: none !important; opacity: 1 !important;
    text-align: center; margin: 22px auto 6px; padding: 0 20px; }
  .v-inq-block { display: block; margin: 18px 22px 6px;
    border: 1px solid rgba(17,17,17,.35); text-align: center; padding: 16px 10px;
    font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700; font-size: 13px;
    letter-spacing: .14em; text-transform: lowercase; color: var(--black);
    text-decoration: none; }
  .v-inq-block:active { background: var(--black); color: #fff; }
  .v-inquire { display: none !important; }
  .rzone { height: 112vh; }
  .rzone .rz-item { width: 26vw !important; }
}


/* v56 — navy return, real-table reveal, arsham mobile viewer */
.rzone { background: #203040; }
.rzone .rz-item { opacity: .3; filter: saturate(.8); }
.rzone .rz-label { color: #f5f4ee; }
.rzone-v { background: rgba(32,48,64,.86); }
#vnavy { position: fixed; inset: 0; background: #2c4a9a; opacity: 0;
  pointer-events: none; z-index: 70; }
.v-inq-block { display: none !important; }
.v-inq-fixed { display: none; }
@media (max-width: 700px) {
  body.viewer-open .v-inq-fixed { display: block; position: fixed; left: 16px; right: 16px;
    bottom: 14px; z-index: 96; text-align: center; padding: 17px 10px;
    border: 1px solid rgba(17,17,17,.45); background: rgba(245,244,238,.95);
    font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700; font-size: 13px;
    letter-spacing: .14em; text-transform: lowercase; color: var(--black);
    text-decoration: none; }
  .v-stage { min-height: 72vh; }
  .v-title { margin: 8vh auto 5vh !important; }
  .vticks { padding: 3vh 0 !important; }
  #vstatement { font-size: 16px !important; line-height: 1.9 !important;
    margin: 5vh 0 5vh !important; }
  .v-info { padding: 0 26px 14vh !important; }
  .vdeck .row { padding: 17px 0 !important; }
  .m-return { padding: 9vh 0 12vh !important; }
  .rzone .rz-item { width: 22vw !important; }
}


/* v57 — dock-on-reach inquire + room to breathe */
@media (max-width: 700px) {
  body.viewer-open .v-inq-fixed { display: block; position: static;
    margin: 7vh 0 2vh; }
  body.viewer-open .v-inq-fixed.docked { position: fixed; left: 16px; right: 16px;
    bottom: 14px; margin: 0; z-index: 96; }
  .v-inqdock { min-height: 60px; }
  .v-stage { min-height: 84vh !important; }
  .v-title { margin: 12vh auto 7vh !important; }
  #vstatement { margin: 8vh 0 7vh !important; }
  .vdeck .row { padding: 20px 0 !important; }
  .v-info { padding: 0 26px 6vh !important; }
  .m-return { padding: 14vh 0 16vh !important; }
}


/* v58 - dissolving tint: bold color to the real field */
.rzone { background: var(--fieldbg, #dadde0); }
.rzone .rz-item { opacity: .88; filter: saturate(.95); }
.rzone .rz-tint { position: absolute; inset: 0; background: #2c4a9a; opacity: .96;
  pointer-events: none; z-index: 1; }
.rzone .rz-label { z-index: 3; color: #f5f4ee; transition: color .4s ease; }
.rzone .rz-label.lit { color: #111; }
.rzone-v { background: transparent; }


/* v59 - electric blue bridge, arsham mobile viewer, static mobile chapters */
html.fromzone, html.fromzone body { background: #dadde0 !important; }

.rzone .rz-label { white-space: nowrap; font-size: 12px; }
@media (max-width: 700px) {
  body.viewer-open .v-inq-fixed { display: block; position: static !important;
    margin: 24px 22px 8px !important; }
  body.viewer-open .v-inq-fixed.docked { position: static !important; }
  .v-inq-top { display: block; margin: 22px 22px 4px; text-align: center;
    padding: 16px 10px; border: 1px solid rgba(17,17,17,.45);
    font-family: "Figtree","Helvetica Neue",sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: .14em; text-transform: lowercase;
    color: var(--black); text-decoration: none; background: transparent; }
  .v-stage { min-height: 0 !important; padding-top: 74px !important; }
  .v-title { margin: 26px auto 6px !important; }
  .vticks { padding: 12px 0 24px !important; }
  #vstatement { margin: 30px 0 26px !important; font-size: 15.5px !important;
    line-height: 1.8 !important; }
  .vdeck .row { padding: 16px 0 !important; }
  .v-info { padding: 0 24px 6vh !important; }
  .m-return { padding: 7vh 0 9vh !important; }
}
@media (min-width: 701px) { .v-inq-top { display: none; } }


/* v60 - sticky reveal zone, eased painting shadow */
.rzone { height: 175vh; position: relative; background: var(--fieldbg, #dadde0); overflow: visible; }
.rzone .rz-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.rzone .rz-item { position: absolute; opacity: 1; filter: saturate(.98); }
.rzone .rz-tint { position: absolute; inset: 0; background: #2c4a9a; opacity: .97; z-index: 1; }
.rzone .rz-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.v-img-wrap img { transition: filter 1.4s ease; }
body.viewer-open:not(.chrome-in) .v-img-wrap img {
  filter: drop-shadow(0 22px 30px rgba(40,36,28,.22)); }
body.chrome-in .v-img-wrap img {
  filter: drop-shadow(0 34px 58px rgba(20,20,24,.30)); }
@media (max-width: 700px) { .rzone { height: 150vh; } }


/* v62 - every seam breathes */
body.soft-arrive .mo-piece img { filter: drop-shadow(0 26px 34px rgba(40,36,28,0)); }
body.soft-arrive.soft-go .mo-piece img {
  filter: drop-shadow(0 22px 30px rgba(40,36,28,.22));
  transition: filter 1.5s ease; }
html.fromtable { background: #dadde0; }
html.fromtable body > *:not(#intro) { opacity: 0; }
html.fromtable #intro > *:not(.plate) { opacity: 0; }
html.fromtable #intro .plate { opacity: 1 !important; transform: none !important;
  transition: none !important; }
html.fromtable.ft-in body > *:not(#intro) { opacity: 1; transition: opacity 1.35s cubic-bezier(.25,.46,.45,.94) .15s; }
html.fromtable.ft-in #intro > *:not(.plate) { opacity: 1; transition: opacity 1.35s cubic-bezier(.25,.46,.45,.94) .15s; }


/* v63 - chrome breathes in with the shadows */
body.soft-arrive .word-nav, body.soft-arrive .brand, body.soft-arrive .soc-corner,
body.soft-arrive .view-toggle-pill, body.soft-arrive .bm, body.soft-arrive .zoomui,
body.soft-arrive .hint { opacity: 0; }
body.soft-arrive.soft-go .word-nav, body.soft-arrive.soft-go .brand,
body.soft-arrive.soft-go .soc-corner, body.soft-arrive.soft-go .view-toggle-pill,
body.soft-arrive.soft-go .bm, body.soft-arrive.soft-go .zoomui,
body.soft-arrive.soft-go .hint { opacity: 1; transition: opacity 1s ease .2s; }

/* v64 - the swap is invisible; the page breathes in around the landed image */

/* v70 - statement rhythm */
.v-info .statement + .statement { margin-top: 16px; }


/* v71 - mobile: arsham rhythm, floating inquire, live reveal exit, quiet chrome */
@media (max-width: 700px) {
  body.viewer-open .v-title, body.viewer-open .vticks, body.viewer-open .v-inq-top,
  body.viewer-open .v-info, body.viewer-open .m-return, body.viewer-open .v-inq-fixed {
    opacity: 0 !important; transition: opacity 1s ease .12s; }
  body.viewer-open.chrome-in .v-title, body.viewer-open.chrome-in .vticks,
  body.viewer-open.chrome-in .v-inq-top, body.viewer-open.chrome-in .v-info,
  body.viewer-open.chrome-in .m-return, body.viewer-open.chrome-in .v-inq-fixed {
    opacity: 1 !important; }
  .v-stage { min-height: 0 !important; padding-top: 86px !important; }
  .v-title { margin: 34px auto 10px !important; }
  .v-title .t { font-size: 13px; letter-spacing: .24em; }
  .v-title .info-btn { display: none !important; }
  .vticks { padding: 10px 0 8px !important; }
  .v-inq-top { margin: 26px 24px 8px !important; padding: 17px 10px !important; }
  .v-info { padding: 0 24px 2vh !important; }
  #vstatement, .v-info .statement { font-size: 16px !important; line-height: 1.75 !important; }
  .v-info .statement { margin: 0 0 18px !important; }
  #vstatement { margin-top: 44px !important; }
  .v-info .statement:last-of-type { margin-bottom: 40px !important; }
  .vdeck .row { padding: 18px 0 !important; }
  .vdeck .k { font-size: 10.5px !important; letter-spacing: .18em !important; }
  .vdeck .v { font-size: 15px !important; }
  .v-inqdock { margin: 40px -8px 6px; }
  body.viewer-open .v-inq-fixed { display: block; position: static !important; margin: 0 !important; }
  body.viewer-open .v-inq-fixed.float { position: fixed !important; left: 16px; right: 16px;
    bottom: 14px; margin: 0 !important; z-index: 96; }
  .m-return { padding: 8vh 0 10vh !important; }
  body.vz-reveal #viewer { background: transparent !important; }
  .rzone-v .rz-tint { will-change: opacity; }
}
html.fromtable .mnav:not(.open), html.fromtable.ft-in .mnav:not(.open),
html.fromzone .mnav:not(.open) { opacity: 0 !important; transition: none !important; }
html.fromtable .ctc:not(.on), html.fromtable.ft-in .ctc:not(.on) {
  opacity: 0 !important; transition: none !important; }
.ctcx { position: absolute; top: -60px; right: 0; width: 44px; height: 44px; border-radius: 50%;
  background: #111; color: #fff; font-size: 21px; line-height: 1; border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 8px 22px rgba(10,10,14,.28); }
/* the legacy side panel is retired: its parked close button was the cutout on the left edge */
.panel, .panel .x { display: none !important; }


/* v72 - one sticky inquire riding the scroll (arsham bronze), settles before the blue */
@media (max-width: 700px) {
  .v-inq-top { display: none !important; }
  .v-inqdock { margin: 46px 0 10px !important; min-height: 0 !important; }
  body.viewer-open #viewer, body.viewer-open .v-info { overflow: visible !important; }
  body.viewer-open .v-inq-fixed, body.viewer-open .v-inq-fixed.float {
    display: block; position: -webkit-sticky !important; position: sticky !important;
    bottom: 14px; margin: 0 !important; z-index: 60;
    background: rgba(245,244,238,.97); }
  #vstatement { margin-top: 34px !important; }
  .vticks { padding: 8px 0 4px !important; }
}


/* v73 - the reveal is real: the viewer zone is glass over the live table; sticky uncaged */
.rzone-v, .rzone-v .rz-stage { background: transparent !important; }
@media (max-width: 700px) {
  body.viewer-open .v-inq-fixed { margin: 46px 24px 10px !important; }
  .m-return { margin: 0 24px; }
}


/* v74 - arsham air: the page breathes between every station */
@media (max-width: 700px) {
  .v-title { display: block !important; text-align: center !important;
    padding: 0 24px !important; margin: 72px auto 0 !important; }
  .v-title .t { display: inline-block; float: none !important;
    font-size: 13.5px; letter-spacing: .26em; }
  .vticks { padding: 58px 0 0 !important; }
  #vstatement { margin-top: 106px !important; }
  .v-info .statement { font-size: 16.5px !important; line-height: 1.78 !important;
    margin: 0 0 20px !important; }
  .vdeck { margin-top: 84px !important; }
  .vdeck .row { padding: 21px 0 !important; }
  body.viewer-open .v-inq-fixed { margin: 64px 24px 12px !important; }
  .m-return { padding: 96px 0 130px !important; }
}


/* v75 - the plate lift: the real plate waits while its double glides home */
html.ft-carry #intro .plate { opacity: 0 !important; }

/* single-frame works show no pager */
.vticks span:only-child, .frame-dots button:only-child { display: none; }


/* v76 - the words never pre-flash: opacity snaps to zero, transitions only on the way in */
@media (max-width: 700px) {
  body.viewer-open .v-title, body.viewer-open .vticks, body.viewer-open .v-inq-top,
  body.viewer-open .v-info, body.viewer-open .m-return, body.viewer-open .v-inq-fixed {
    transition: none !important; }
  body.viewer-open.chrome-in .v-title, body.viewer-open.chrome-in .vticks,
  body.viewer-open.chrome-in .v-inq-top, body.viewer-open.chrome-in .v-info,
  body.viewer-open.chrome-in .m-return, body.viewer-open.chrome-in .v-inq-fixed {
    transition: opacity 1s ease .12s !important; }
}


/* v77 - mobile zone: neon blue to the bare field; the table breathes in on arrival */
@media (max-width: 700px) {
  .rzone .rz-item { display: none !important; }
}