/* ===== Tim Symes: brand tokens ===== */
@font-face { font-family: "Lato"; src: url("../fonts/lato-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/roboto-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/roboto-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --cream: #E9E1D1;      /* page ground, from the TS monogram artwork */
  --bone: #EDE8DF;       /* raised panels */
  --parchment: #DDC69A;  /* tarot gold, tints */
  --ink: #0B0B0D;        /* type, marks */
  --oxblood: #6E1423;    /* THE accent */
  --ink-soft: rgba(11,11,13,.62);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: "Lato", system-ui, sans-serif; }
.mono { font-family: "Roboto Mono", monospace; }
.display { font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
img.wm { display: block; }

/* grain: subtle tactile noise over everything */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== nav ===== */
nav.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem 2rem; mix-blend-mode: normal;
}
nav.site .links { display: flex; gap: 1.6rem; }
nav.site .links.right { justify-content: flex-end; }
nav.site a.navlink {
  font-family: "Roboto Mono", monospace; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
nav.site a.navlink:hover, nav.site a.navlink[aria-current="page"] { border-bottom-color: var(--oxblood); color: var(--oxblood); }
nav.site a.navlink sup { font-size: .6em; color: var(--oxblood); }
nav.site .logo img { height: 44px; width: auto; }
nav.site.on-dark a.navlink { color: var(--bone); }
nav.site.on-dark a.navlink:hover { color: var(--parchment); border-bottom-color: var(--parchment); }
/* blend nav: readable over ANY panel (bone + difference = light on ink, near-ink on cream) */
nav.site.blend { mix-blend-mode: difference; }
nav.site.blend a.navlink { color: var(--bone); }
nav.site.blend a.navlink sup { color: var(--bone); }
nav.site.blend a.navlink:hover, nav.site.blend a.navlink[aria-current="page"] { color: var(--bone); border-bottom-color: var(--bone); }

/* ===== loader ===== */
#loader {
  position: fixed; inset: 0; z-index: 100; background: var(--cream); /* identical to the page ground: no shift behind the icons */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  transition: opacity .5s ease, visibility .5s;
}
#loader.done { opacity: 0; visibility: hidden; }
/* v5: true-alpha stencils straight on the cream ground (no plate), 25% smaller */
#loader img { width: min(23.5vmin, 214px); height: min(23.5vmin, 214px); object-fit: contain; }
#loader .pct { font-family: "Roboto Mono", monospace; font-size: .8rem; letter-spacing: .3em; }
@media (prefers-reduced-motion: reduce) { #loader { display: none; } }

/* ===== landing slides ===== */
main.slides {
  height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none;
}
main.slides::-webkit-scrollbar { display: none; }
section.slide { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
section.slide video, section.slide img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
section.slide .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,13,.72), rgba(11,11,13,.05) 45%, rgba(11,11,13,.25)); }
section.slide .meta { position: absolute; left: 2rem; bottom: 2.2rem; z-index: 5; }
section.slide .meta .tag { font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--parchment); }
section.slide .meta h2 { color: var(--bone); font-weight: 900; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3.6rem); margin-top: .4rem; }
section.slide .meta a.view {
  display: inline-block; margin-top: 1rem; font-family: "Roboto Mono", monospace; font-size: .75rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bone); text-decoration: none;
  border: 1px solid rgba(237,232,223,.5); padding: .55rem 1.1rem; transition: all .25s;
}
section.slide .meta a.view:hover { background: var(--oxblood); border-color: var(--oxblood); }
.slide-index { position: fixed; right: 2rem; bottom: 2.2rem; z-index: 50; font-family: "Roboto Mono", monospace; font-size: .72rem; letter-spacing: .2em; color: var(--bone); }
.slide-dots { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: .6rem; }
.slide-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--bone); background: transparent; cursor: pointer; padding: 0; }
.slide-dots button.active { background: var(--parchment); border-color: var(--parchment); }

/* ===== portfolio ===== */
.page-pad { padding: 8rem 2rem 4rem; min-height: 100dvh; }
.cat-toggle { display: flex; gap: 2.5rem; justify-content: center; margin-bottom: 3.5rem; }
.cat-toggle button {
  background: none; border: none; cursor: pointer; font-family: "Lato", sans-serif; font-weight: 900;
  letter-spacing: -0.02em; font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--ink-soft); padding-bottom: .3rem;
  border-bottom: 3px solid transparent;
}
.cat-toggle button.active { color: var(--ink); border-bottom-color: var(--oxblood); }
.cat-toggle button:hover { color: var(--oxblood); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.4rem; max-width: 1500px; margin: 0 auto; }
.work-card { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bone); cursor: pointer; display: block; text-decoration: none; }
.work-card img, .work-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.work-card video { opacity: 0; transition: opacity .35s; }
.work-card:hover video.ready { opacity: 1; }
.work-card:hover img { transform: scale(1.03); }
.work-card .label { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 3; }
.work-card .label .tag { font-family: "Roboto Mono", monospace; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--parchment); }
.work-card .label h3 { color: var(--bone); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.01em; margin-top: .2rem; }
.work-card .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,13,.7), transparent 55%); z-index: 2; }
.work-card .info-btn {
  position: absolute; top: .9rem; right: .9rem; z-index: 4; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--bone); color: var(--bone); background: rgba(11,11,13,.35);
  font-family: "Roboto Mono", monospace; font-size: .8rem; cursor: pointer; opacity: 0; transition: opacity .25s, background .25s;
}
.work-card:hover .info-btn { opacity: 1; }
.work-card .info-btn:hover { background: var(--oxblood); border-color: var(--oxblood); }
.work-card .soon { position: absolute; top: .9rem; left: .9rem; z-index: 3; font-family: "Roboto Mono", monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: var(--parchment); padding: .3rem .6rem; }

/* info overlay */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(11,11,13,.55); display: none;
  align-items: flex-end; justify-content: center;
}
.overlay.open { display: flex; }
.overlay .sheet {
  background: var(--bone); width: min(680px, 100%); margin: 0 1rem 1rem; padding: 2rem;
  border-top: 4px solid var(--oxblood); animation: sheet-up .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.overlay .sheet .tag { font-family: "Roboto Mono", monospace; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oxblood); }
.overlay .sheet h3 { font-weight: 900; font-size: 1.8rem; letter-spacing: -0.02em; margin: .4rem 0 .8rem; }
.overlay .sheet p { line-height: 1.65; max-width: 60ch; }
.overlay .sheet dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; margin-top: 1.2rem; font-size: .9rem; }
.overlay .sheet dt { font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); align-self: center; }
.overlay .sheet .row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; }
.overlay .sheet a.goto { font-family: "Roboto Mono", monospace; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--bone); background: var(--ink); text-decoration: none; padding: .6rem 1.2rem; }
.overlay .sheet a.goto:hover { background: var(--oxblood); }
.overlay .sheet button.close { background: none; border: none; font-family: "Roboto Mono", monospace; font-size: .75rem; letter-spacing: .1em; cursor: pointer; color: var(--ink-soft); }
.overlay .sheet button.close:hover { color: var(--oxblood); }

/* ===== project page ===== */
.proj-hero { position: relative; height: 72dvh; background: var(--ink); }
.proj-hero video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.proj-hero img.static { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.proj-body { padding: 3rem 2rem 5rem; max-width: 1100px; margin: 0 auto; }
.proj-body .tag { font-family: "Roboto Mono", monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood); }
.proj-body h1 { font-weight: 900; letter-spacing: -0.02em; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: .5rem 0 1.2rem; }
.proj-body p.blurb { font-size: 1.1rem; line-height: 1.7; max-width: 58ch; }
.proj-body dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.6rem; margin-top: 2rem; }
.proj-body dt { font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); align-self: center; }
.next-proj {
  position: fixed; right: 0; top: 50%; transform: translate(70%, -50%); z-index: 55;
  background: var(--ink); color: var(--bone); text-decoration: none; padding: 1.1rem 1.4rem;
  font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s; white-space: nowrap;
}
.next-proj:hover { transform: translate(0, -50%); background: var(--oxblood); }
@media (hover: none) { .next-proj { transform: translate(0,-50%); } }

/* hamburger + menu */
.burger { position: fixed; top: 1.1rem; right: 2rem; z-index: 70; width: 44px; height: 44px; background: none; border: none; cursor: pointer; display: grid; place-items: center; }
.burger span, .burger::before, .burger::after { content: ""; display: block; width: 26px; height: 2px; background: var(--ink); margin: 3.5px 0; transition: transform .3s, opacity .3s; }
.burger.on-dark span, .burger.on-dark::before, .burger.on-dark::after { background: var(--bone); }
.menu { position: fixed; inset: 0; z-index: 65; background: var(--cream); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.menu.open { display: flex; }
.menu a { font-weight: 900; letter-spacing: -0.02em; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--ink); text-decoration: none; }
.menu a:hover { color: var(--oxblood); }
.menu .mono-line { font-family: "Roboto Mono", monospace; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }

/* ===== about ===== */
.about-hero { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6rem 2rem 2rem; }
.about-hero img.wm { width: min(560px, 78vw); }
.about-hero p.hook { margin-top: 1.6rem; font-size: 1.15rem; max-width: 46ch; line-height: 1.65; }
.about-hero .role { font-family: "Roboto Mono", monospace; font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; margin-top: 1.4rem; color: var(--oxblood); }
.about-hero .scroll-cue { margin-top: 4rem; font-family: "Roboto Mono", monospace; font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .about-hero .scroll-cue { animation: none; } }

/* ===== moth panel: scroll-driven rise (replaces the tarot cards) ===== */
.moth-panel { min-height: 92dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.moth-stage { text-align: center; padding: 4rem 2rem; }
.moth-stage img.moth-fly {
  width: min(560px, 72vw); height: auto; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 24px 40px rgba(11,11,13,.18));
}
.moth-stage img.moth-fly.afloat { animation: moth-float 5.5s ease-in-out infinite; }
@keyframes moth-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.moth-stage .moth-words {
  margin-top: 2.2rem; opacity: 0; font-family: "Roboto Mono", monospace;
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--oxblood);
}
@media (prefers-reduced-motion: reduce) {
  .moth-stage img.moth-fly, .moth-stage .moth-words { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.bio { padding: 4rem 2rem; max-width: 760px; margin: 0 auto; }
.bio .portrait { margin: 0 0 2.2rem; }
.bio .portrait img {
  display: block; width: min(340px, 62vw); height: auto;
  box-shadow: 0 22px 44px -20px rgba(11,11,13,.4);
  border-bottom: 3px solid var(--oxblood);
}
.bio h1, .bio h2, .services h2, .clients h2, .contact-sec h2 { font-weight: 900; letter-spacing: -0.02em; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.6rem; }
.services .cta-row { margin-top: 2rem; }
.services a.cta { font-family: "Roboto Mono", monospace; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--bone); background: var(--ink); text-decoration: none; padding: .7rem 1.3rem; display: inline-block; transition: background .25s; }
.services a.cta:hover { background: var(--oxblood); }
.bio p { line-height: 1.75; margin-bottom: 1rem; }
.services { background: var(--bone); padding: 5rem 2rem; }
.services .inner { max-width: 900px; margin: 0 auto; }
.services p.lede { line-height: 1.7; max-width: 62ch; margin-bottom: 2rem; }
.services ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2rem; }
@media (max-width: 640px) { .services ul { grid-template-columns: 1fr; } }
.services li { font-family: "Roboto Mono", monospace; font-size: .85rem; padding: .7rem 0; border-bottom: 1px solid rgba(11,11,13,.15); }
.services li::before { content: "†  "; color: var(--oxblood); }

.clients { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; text-align: center; }
.clients .wall { display: flex; flex-wrap: wrap; gap: 2.6rem 3.4rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.clients .wall img { height: 34px; width: auto; opacity: .82; }
.clients .wall img.tall { height: 46px; }

.contact-sec { background: var(--ink); color: var(--bone); padding: 6rem 2rem; text-align: center; }
.contact-sec .mono-tag { font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment); margin-bottom: 1rem; }
.contact-sec a.email { display: inline-block; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(1.5rem, 4.5vw, 3rem); color: var(--bone); text-decoration: none; border-bottom: 3px solid var(--oxblood); padding-bottom: .3rem; }
.contact-sec a.email:hover { color: var(--parchment); }
.contact-sec p.loc { font-family: "Roboto Mono", monospace; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; margin-top: 1.6rem; color: rgba(237,232,223,.6); }

footer.site { background: var(--ink); color: rgba(237,232,223,.55); padding: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
footer.site img { height: 30px; opacity: .9; }
footer.site p { font-family: "Roboto Mono", monospace; font-size: .65rem; letter-spacing: .15em; }
/* v5 footer: moth beside the wordmark, Instagram below */
footer.site .fmark { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
footer.site .fmark .row { display: flex; align-items: center; gap: 1rem; }
footer.site .fmark img.moth { height: 24px; width: auto; opacity: .85; }
footer.site a.ig { display: inline-flex; color: rgba(237,232,223,.55); transition: color .25s; }
footer.site a.ig:hover, footer.site a.ig:focus-visible { color: var(--parchment); }
footer.site a.ig svg { width: 20px; height: 20px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .work-card img, .work-card video, .pillars img, .next-proj { transition: none; }
}

/* ===== v3: stacked slide-over page transitions =====
   Panels sit in normal flow. JS adds .pin ONLY to panels that fit the viewport,
   so the next section slides over them. Tall panels (like the ledger) scroll
   normally and are never clipped. */
.stack { position: relative; }
.stack > .panel { position: relative; }
.stack > .panel.pin { position: sticky; top: 0; }
.stack > .panel:nth-child(1) { z-index: 1; } .stack > .panel:nth-child(2) { z-index: 2; }
.stack > .panel:nth-child(3) { z-index: 3; } .stack > .panel:nth-child(4) { z-index: 4; }
.stack > .panel:nth-child(5) { z-index: 5; } .stack > .panel:nth-child(6) { z-index: 6; }
.stack > .panel + .panel { box-shadow: 0 -30px 60px -30px rgba(11,11,13,.35); }
.contact-panel { min-height: 100dvh; display: flex; align-items: center; justify-content: center; position: relative; }
.bg-cream { background: var(--cream); } .bg-bone { background: var(--bone); } .bg-ink { background: var(--ink); }

/* ===== v3: portfolio ledger (reference layout) ===== */
.ledger-head { min-height: 88dvh; display: flex; flex-direction: column; justify-content: flex-end; padding: 8rem 2rem 2rem; }
.ledger-head h1 { font-weight: 900; letter-spacing: -0.03em; line-height: .9; font-size: clamp(3.4rem, 12vw, 9.5rem); text-transform: uppercase; }
.ledger-head .sub { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.4rem; }
.ledger-head .sub .mono-cue { font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); animation: cue 2.2s ease-in-out infinite; }
.ledger-head .sub .count { font-family: "Roboto Mono", monospace; font-size: .8rem; color: var(--oxblood); }
.ledger { padding: 0 2rem 6rem; }
.ledger .cols, .ledger a.row { display: grid; grid-template-columns: 3.2rem 1.4fr 1.6fr 1fr 5rem; gap: 1.2rem; align-items: center; }
.ledger .cols { padding: .8rem 0; border-bottom: 1px solid rgba(11,11,13,.35); font-family: "Roboto Mono", monospace; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.ledger a.row { text-decoration: none; color: var(--ink); padding: 1.6rem 0; border-bottom: 1px solid rgba(11,11,13,.16); transition: background .25s, padding-left .25s; position: relative; }
.ledger a.row:hover { background: rgba(221,198,154,.25); padding-left: .6rem; }
.ledger a.row .num { font-family: "Roboto Mono", monospace; font-size: .72rem; color: var(--oxblood); }
.ledger a.row .client { font-weight: 900; letter-spacing: -0.01em; font-size: clamp(1.1rem, 2.4vw, 1.7rem); }
.ledger a.row .title { font-size: clamp(1rem, 2vw, 1.35rem); color: var(--ink); }
.ledger a.row .svcs { display: flex; flex-direction: column; gap: .15rem; font-family: "Roboto Mono", monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ledger a.row .year { font-family: "Roboto Mono", monospace; font-size: .75rem; text-align: right; }
.ledger a.row .soon-flag { position: absolute; right: 0; top: .6rem; font-family: "Roboto Mono", monospace; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; background: var(--parchment); padding: .25rem .5rem; }
.ledger a.row .details-btn { position: absolute; right: 0; bottom: .6rem; opacity: 0; font-family: "Roboto Mono", monospace; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; background: none; border: 1px solid rgba(11,11,13,.4); padding: .3rem .7rem; cursor: pointer; transition: opacity .2s; }
.ledger a.row:hover .details-btn { opacity: 1; }
.ledger a.row .details-btn:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
@media (max-width: 760px) {
  .ledger .cols { display: none; }
  .ledger a.row { grid-template-columns: 2rem 1fr 4rem; }
  .ledger a.row .title, .ledger a.row .svcs { display: none; }
}

/* floating hover preview */
#hoverPrev {
  position: fixed; left: -9999px; top: 0; z-index: 75; width: min(30vw, 420px); aspect-ratio: 16/9; pointer-events: none;
  opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(11,11,13,.55); background: var(--ink);
}
#hoverPrev.show { opacity: 1; transform: scale(1); }
#hoverPrev video, #hoverPrev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#hoverPrev .view-tag { position: absolute; inset: auto .8rem .7rem auto; font-family: "Roboto Mono", monospace; font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--bone); background: var(--oxblood); padding: .3rem .7rem; }
@media (hover: none) { #hoverPrev { display: none; } }
@media (prefers-reduced-motion: reduce) { .ledger-head .sub .mono-cue { animation: none; } }


/* panel inner wrappers: full-bleed background, constrained content */
.inner-760 { max-width: 760px; margin: 0 auto; }
.inner-1200 { max-width: 1200px; margin: 0 auto; }
/* project page chrome: readable over hero AND cream body */
.proj-chrome { mix-blend-mode: difference; }
.burger.blend span, .burger.blend::before, .burger.blend::after { background: var(--bone); }


/* ===== v4: reference-verbatim work pages ===== */

/* rolling text hover on nav links (spans injected by stack.js) */
nav.site a.navlink .roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
nav.site a.navlink .roll > span { display: block; transition: transform .35s cubic-bezier(.65,.05,.36,1); }
nav.site a.navlink .roll > span::after { content: attr(data-text); display: block; position: absolute; top: 100%; left: 0; }
nav.site a.navlink:hover .roll > span { transform: translateY(-100%); }

/* scroll reveal (Framer-style rise + fade) */
.reveal { opacity: 0; transform: translateY(42px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* work toolbar: scroll cue + view switcher */
.work-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 5.4rem 2rem 1.2rem; }
.work-toolbar .cue { font-family: "Roboto Mono", monospace; font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); animation: cue 2.2s ease-in-out infinite; }
.view-switch { display: flex; gap: .5rem; }
.view-switch button { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: none; border: 1px solid rgba(11,11,13,.3); cursor: pointer; color: var(--ink-soft); transition: all .2s; }
.view-switch button:hover { border-color: var(--ink); color: var(--ink); }
.view-switch button.active { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.view-switch svg { width: 14px; height: 14px; display: block; }

/* FULL WIDTH view: media full-bleed, name + credits to the side (default) */
.fw-item { position: relative; display: block; text-decoration: none; color: var(--ink); margin-bottom: .6rem; }
.fw-item .media { position: relative; width: 100%; height: 86dvh; overflow: hidden; background: var(--ink); }
.fw-item .media video, .fw-item .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.fw-item:hover .media video, .fw-item:hover .media img { transform: scale(1.025); }
.fw-item .media .shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,11,13,.72) 0%, rgba(11,11,13,.25) 38%, transparent 65%); }
.fw-item .side { position: absolute; left: 2rem; bottom: 2.4rem; z-index: 3; max-width: 480px; }
.fw-item .side .num { font-family: "Roboto Mono", monospace; font-size: .7rem; letter-spacing: .2em; color: var(--parchment); }
.fw-item .side h2 { color: var(--bone); font-weight: 900; letter-spacing: -0.02em; line-height: 1; font-size: clamp(1.9rem, 4vw, 3.2rem); margin: .4rem 0 .2rem; }
.fw-item .side .proj { color: rgba(237,232,223,.85); font-size: clamp(1rem, 1.6vw, 1.3rem); }
.fw-item .side dl.credits { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; margin-top: 1.1rem; }
.fw-item .side dl.credits dt { font-family: "Roboto Mono", monospace; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--parchment); align-self: center; }
.fw-item .side dl.credits dd { color: rgba(237,232,223,.9); font-size: .85rem; }
.fw-item .side .svc-line { font-family: "Roboto Mono", monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(237,232,223,.65); margin-top: .8rem; }
.fw-item .year-tag { position: absolute; right: 2rem; bottom: 2.4rem; z-index: 3; font-family: "Roboto Mono", monospace; font-size: .72rem; letter-spacing: .2em; color: var(--bone); }
.fw-item .soon-flag, .work-card .soon-flag, .grid-card .soon-flag { position: absolute; top: 1rem; left: 2rem; z-index: 3; font-family: "Roboto Mono", monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: var(--parchment); padding: .3rem .6rem; }

/* LIST view reuses .ledger; GRID view: classic 3-col columns */
.grid-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; padding: 0 2rem 4rem; }
@media (max-width: 1000px) { .grid-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-wrap { grid-template-columns: 1fr; } }
.grid-card { position: relative; display: block; text-decoration: none; }
.grid-card .frame { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bone); }
.grid-card .frame img, .grid-card .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.grid-card .frame video { opacity: 0; transition: opacity .35s; }
.grid-card:hover .frame video.ready { opacity: 1; }
.grid-card:hover .frame img { transform: scale(1.03); }
.grid-card .under { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem 0 0; }
.grid-card .under b { font-weight: 900; letter-spacing: -0.01em; font-size: 1.05rem; color: var(--ink); }
.grid-card .under span { font-family: "Roboto Mono", monospace; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.grid-card .under .proj-name { display: block; font-size: .9rem; color: var(--ink-soft); }

.view-pane { display: none; min-height: calc(100dvh - 140px); }
.view-pane.active { display: block; }