:root {
  --black: #050606;
  --panel: #0a0b0b;
  --panel-2: #0e1010;
  --bone: #d6d0c2;
  --muted: #8f8b82;
  --bronze: #8e6d3d;
  --bronze-light: #b38c51;
  --red: #5d201d;
  --line: rgba(151, 113, 60, .32);
  --font-display: "Michroma", sans-serif;
  --font-body: "Rajdhani", sans-serif;
  --font-tech: "Oxanium", sans-serif;
  --font-serif: var(--font-display);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  color: var(--bone);
  background-color: #040505;
  background-image:
    linear-gradient(rgba(3,4,4,.62), rgba(3,4,4,.62)),
    url("assets/page-background-tile.png");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: scroll;
  font-family: var(--font-body);
  letter-spacing: .03em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.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; }
.page-noise { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.cursor-glow { position: fixed; width: 520px; height: 520px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(117,78,36,.08), transparent 68%); transition: transform .12s linear; }
.section-shell {
  width: min(1500px, calc(100% - 40px));
  margin-inline: auto;
  border-inline: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6,7,7,.82), rgba(5,6,6,.74));
  backdrop-filter: blur(1.5px);
}
.site-header { height: 76px; padding: 0 28px; position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(5,6,6,.84); backdrop-filter: blur(18px); }
.mini-brand { justify-self: start; display: flex; align-items: center; gap: 12px; font-size: 15px; letter-spacing: .18em; }
.mini-brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--bronze); border-radius: 50%; color: var(--bronze-light); font-family: var(--font-serif); }
.desktop-nav { display: flex; gap: clamp(18px, 2.3vw, 45px); }
.desktop-nav a { text-transform: uppercase; color: #aaa394; font-size: 13px; letter-spacing: .18em; transition: color .25s; }
.desktop-nav a:hover { color: var(--bone); }
.header-cta { justify-self: end; border: 1px solid var(--bronze); padding: 12px 18px; text-transform: uppercase; font-size: 13px; letter-spacing: .17em; }
.header-cta span, .primary-button span, .secondary-button span { margin-left: 22px; }
.menu-button { display:none; background:none; border:0; padding:10px; }
.menu-button span { display:block; width:25px; height:1px; margin:6px; background:var(--bronze-light); }
.mobile-panel { display:none; }
.hero { min-height: 880px; position: relative; overflow: hidden; display:grid; place-items:center; background: radial-gradient(circle at 50% 47%, rgba(74,43,26,.16), transparent 29%), linear-gradient(180deg, #090a0a, #050606); border-bottom:1px solid var(--line); }
.hero::before { content:""; position:absolute; inset:0; opacity:.42; background: repeating-radial-gradient(ellipse at center, transparent 0 75px, rgba(134,99,55,.09) 76px 78px, transparent 79px 108px); }
.hero-rings { position:absolute; width:min(72vw, 1000px); aspect-ratio:1; border:1px solid rgba(159,115,61,.2); border-radius:50%; box-shadow: 0 0 0 25px rgba(128,92,49,.018), 0 0 0 80px rgba(128,92,49,.02), inset 0 0 100px #000; }
.bio-architecture { position:absolute; top:0; bottom:0; width:34%; opacity:.82; filter: contrast(1.08); }
.bio-left { left:0; background: radial-gradient(ellipse at 10% 45%, #151817 0 6%, transparent 7%), repeating-radial-gradient(ellipse at 0 50%, transparent 0 37px, rgba(92,93,86,.18) 39px 46px, transparent 48px 72px), linear-gradient(90deg,#070808,transparent); clip-path: polygon(0 0,100% 0,72% 18%,87% 35%,69% 51%,88% 70%,63% 100%,0 100%); }
.bio-right { right:0; transform:scaleX(-1); background: radial-gradient(ellipse at 10% 45%, #151817 0 6%, transparent 7%), repeating-radial-gradient(ellipse at 0 50%, transparent 0 37px, rgba(92,93,86,.18) 39px 46px, transparent 48px 72px), linear-gradient(90deg,#070808,transparent); clip-path: polygon(0 0,100% 0,72% 18%,87% 35%,69% 51%,88% 70%,63% 100%,0 100%); }
.hero-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:min(770px, 70vw); padding-top:25px; }
.official-logo { width:min(650px, 68vw); height:auto; object-fit:contain; }
.hero-manifesto { margin: 0 0 26px; text-align:center; text-transform:uppercase; color:#b8ad98; letter-spacing:.23em; font-size:clamp(15px,1.4vw,21px); }
.hero-manifesto span { color:var(--bronze-light); }
.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-width:280px; padding:16px 22px; border:1px solid var(--bronze); background:linear-gradient(180deg,rgba(77,43,27,.45),rgba(8,9,9,.65)); text-transform:uppercase; letter-spacing:.18em; transition:.3s; }
.primary-button:hover, .secondary-button:hover { box-shadow:0 0 35px rgba(151,99,45,.15); border-color:var(--bronze-light); transform:translateY(-2px); }
.hero-status { position:absolute; right:28px; bottom:22px; display:flex; align-items:center; gap:12px; color:#726f68; font-size:11px; letter-spacing:.15em; }
.status-line { width:75px; height:1px; background:var(--bronze); }
.realms { padding:85px 34px 100px; border-bottom:1px solid var(--line); }
.section-heading { margin-bottom:38px; }
.eyebrow { display:block; color:var(--bronze-light); text-transform:uppercase; letter-spacing:.24em; font-size:12px; margin-bottom:10px; }
h2 { margin:0; font-size:clamp(43px,5vw,74px); line-height:.98; font-weight:400; text-transform:uppercase; letter-spacing:.08em; }
.split-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.split-heading > p { max-width:500px; color:var(--muted); font-size:18px; line-height:1.6; }
.realm-grid { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line); }
.realm-card { min-height:245px; position:relative; padding:28px 22px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(18,20,20,.88),rgba(7,8,8,.96)); transition:.35s; overflow:hidden; }
.realm-card:last-child { border-right:0; }
.realm-card::after { content:""; position:absolute; inset:auto -25% -58% -25%; aspect-ratio:1; border:1px solid rgba(139,100,52,.14); border-radius:50%; transition:.35s; }
.realm-card:hover { background:#111313; transform:translateY(-5px); }
.realm-card:hover::after { transform:scale(1.2); }
.realm-sigil { width:48px; height:48px; border:1px solid var(--bronze); border-radius:50%; display:grid; place-items:center; color:var(--bronze-light); margin-bottom:24px; }
.realm-number { color:#6f6b63; font-size:12px; }
.realm-card h3 { font-size:22px; text-transform:uppercase; letter-spacing:.08em; font-weight:400; margin:7px 0; }
.realm-card p { color:var(--muted); margin:0; }
.card-arrow { position:absolute; bottom:20px; right:22px; color:var(--bronze-light); }
.archive, .experiments, .motion, .machines { padding:100px 34px; border-bottom:1px solid var(--line); }
.text-button { border:1px solid var(--line); background:rgba(11,13,13,.9); padding:13px 18px; text-transform:uppercase; letter-spacing:.15em; cursor:pointer; }
.text-button span { margin-left:18px; color:var(--bronze-light); }
.filter-bar { display:flex; gap:9px; margin:0 0 28px; flex-wrap:wrap; }
.filter { padding:8px 14px; border:1px solid #292724; background:transparent; color:#8d8981; text-transform:uppercase; letter-spacing:.12em; cursor:pointer; }
.filter.active, .filter:hover { color:var(--bone); border-color:var(--bronze); }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.project-card { border:1px solid var(--line); background:rgba(9,10,10,.9); transition:.35s; animation-delay:var(--delay); }
.project-card:hover { transform:translateY(-7px); border-color:rgba(181,132,68,.6); box-shadow:0 25px 60px rgba(0,0,0,.4); }
.project-open { width:100%; padding:0; text-align:left; border:0; background:transparent; cursor:pointer; }
.project-visual { height:350px; position:relative; overflow:hidden; background:#0d1010; border-bottom:1px solid var(--line); }
.visual-index { position:absolute; z-index:2; top:18px; left:18px; color:#796f60; letter-spacing:.15em; }
.visual-organism { position:absolute; width:72%; aspect-ratio:1; left:14%; top:10%; border-radius:48% 52% 42% 58%; border:1px solid rgba(172,134,78,.28); box-shadow: inset 0 0 40px #000, 0 0 0 16px rgba(103,79,47,.04), 0 0 0 46px rgba(103,79,47,.025); }
.visual-organism::before, .visual-organism::after { content:""; position:absolute; inset:11%; border:10px double rgba(92,97,92,.31); border-radius:63% 37% 62% 38%; transform:rotate(34deg); }
.visual-organism::after { inset:28%; border-width:5px; transform:rotate(-35deg); }
.visual-neural { background:radial-gradient(circle at 50% 42%,#32413f 0,#101515 24%,#070808 60%); }
.visual-reliquary { background:radial-gradient(ellipse at 50% 45%,#2a211c,#0a0b0b 58%); }
.visual-corridor { background:repeating-radial-gradient(ellipse at 50% 50%,#101616 0 28px,#27302e 30px,#080909 37px 70px); }
.visual-sigil { background:radial-gradient(circle,#241817,#090a0a 56%); }
.visual-organism { background:radial-gradient(circle,#212525,#080909 55%); }
.project-copy { padding:24px; min-height:265px; display:flex; flex-direction:column; }
.project-copy > span { color:var(--bronze-light); text-transform:uppercase; font-size:11px; letter-spacing:.18em; }
.project-copy h3 { margin:10px 0 12px; font-size:32px; font-weight:400; text-transform:uppercase; letter-spacing:.06em; }
.project-copy p { margin:0; color:var(--muted); line-height:1.55; font-family:Arial,sans-serif; font-size:14px; }
.project-link { margin-top:auto; padding-top:22px; border-top:1px solid #252521; text-transform:uppercase; font-size:13px; letter-spacing:.14em; display:flex; justify-content:space-between; }
.project-link b { color:var(--bronze-light); }
.experiment-list { border-top:1px solid var(--line); }
.experiment-row { display:grid; grid-template-columns:130px 1fr 170px 50px; align-items:center; gap:25px; min-height:125px; border-bottom:1px solid var(--line); transition:.25s; }
.experiment-row:hover { background:rgba(255,255,255,.018); padding-inline:12px; }
.experiment-code, .experiment-status { color:var(--bronze-light); text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.experiment-row h3 { margin:0 0 7px; text-transform:uppercase; font-size:25px; font-weight:400; }
.experiment-row p { margin:0; color:var(--muted); }
.experiment-row button { background:none; border:0; font-size:25px; color:var(--bronze-light); }
.statement-panel { min-height:490px; padding:70px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:60px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(110deg,#0d0f0f 0 55%,#080909); }
.statement-panel h2 { max-width:850px; }
.statement-panel > p { color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; font-size:16px; }
.statement-panel .secondary-button { grid-column:2; justify-self:start; min-width:auto; }
.statement-orb { position:absolute; width:530px; height:530px; right:-220px; border-radius:50%; border:1px solid rgba(168,126,69,.22); box-shadow:0 0 0 35px rgba(108,77,40,.03),0 0 0 95px rgba(108,77,40,.02); }
.motion-stage { display:grid; grid-template-columns:1.6fr .8fr; border:1px solid var(--line); min-height:550px; }
.motion-screen { position:relative; min-height:550px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 50%,#1a211f,#070808 62%); }
.screen-core { width:56%; aspect-ratio:1; border-radius:45% 55% 48% 52%; border:1px solid rgba(141,112,68,.35); box-shadow:0 0 0 20px rgba(114,90,54,.03),0 0 0 60px rgba(114,90,54,.02),inset 0 0 80px #000; animation:breathe 5s ease-in-out infinite; }
.screen-core::after { content:""; position:absolute; inset:18%; border:12px double rgba(106,111,105,.23); border-radius:50%; }
@keyframes breathe { 50% { transform:scale(1.045) rotate(2deg); filter:brightness(1.15); } }
.play-button { position:absolute; width:76px; height:76px; border-radius:50%; background:rgba(6,7,7,.75); border:1px solid var(--bronze-light); color:var(--bone); cursor:pointer; }
.play-button span { margin-left:5px; }
.screen-label { position:absolute; left:22px; bottom:20px; color:#817b70; font-size:11px; letter-spacing:.17em; }
.motion-copy { padding:55px; display:flex; flex-direction:column; justify-content:center; background:#0b0c0c; }
.counter { color:var(--bronze-light); }
.motion-copy h3 { text-transform:uppercase; font-weight:400; font-size:42px; line-height:1; margin:15px 0 24px; }
.motion-copy > p:not(.counter) { color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; }
.text-link { margin-top:30px; text-transform:uppercase; letter-spacing:.12em; color:#c1b49e; }
.text-link span { color:var(--bronze-light); margin-left:14px; }
.machine-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.machine-card { min-height:430px; position:relative; padding:30px; border:1px solid var(--line); background:linear-gradient(#0d0f0f,#080909); overflow:hidden; }
.machine-index { color:#6f6b63; }
.machine-core { width:165px; aspect-ratio:1; margin:35px auto; border:1px solid var(--bronze); border-radius:50%; box-shadow:inset 0 0 40px #000,0 0 0 15px rgba(124,91,49,.04),0 0 0 30px rgba(124,91,49,.025); position:relative; }
.machine-core::before { content:""; position:absolute; inset:20%; border:8px double rgba(135,143,136,.28); border-radius:45%; transform:rotate(45deg); }
.machine-card h3 { text-transform:uppercase; font-size:30px; font-weight:400; margin:0 0 12px; }
.machine-card p { color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; font-size:14px; }
.machine-card a { position:absolute; bottom:28px; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.machine-card a span { margin-left:12px; color:var(--bronze-light); }
.about { min-height:710px; padding:45px; display:grid; grid-template-columns:1.1fr 1.1fr .7fr; gap:38px; align-items:center; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#0b0c0c,#080909); }
.about-photo-frame { position:relative; height:580px; border:1px solid var(--line); overflow:hidden; background:#000; }
.about-photo-frame img { width:100%; height:100%; object-fit:contain; background:#000; }
.photo-index { position:absolute; bottom:15px; right:15px; color:#8a8172; font-size:11px; letter-spacing:.16em; }
.about-copy h2 { font-size:55px; }
.about-copy .lead { color:#c5bba8; font-size:23px; font-family:var(--font-serif); }
.about-copy p:not(.lead) { color:var(--muted); line-height:1.7; font-family:Arial,sans-serif; }
.about-copy .secondary-button { margin-top:20px; min-width:230px; }
.about-reliquary { height:580px; border:1px solid var(--line); border-radius:50% 50% 12px 12px; display:grid; place-items:center; background:repeating-radial-gradient(ellipse at center,transparent 0 36px,rgba(102,80,48,.1) 38px 40px,transparent 42px 70px); }
.reliquary-figure { width:36%; height:70%; border:1px solid rgba(158,126,76,.4); border-radius:48% 48% 28% 28%; box-shadow:inset 0 0 60px #000,0 0 0 15px rgba(119,86,44,.04); }
.signal { margin-top:70px; padding:55px; border:1px solid var(--line); display:grid; grid-template-columns:1fr 1.3fr; align-items:center; gap:50px; background:#0a0c0c; }
.signal h2 { font-size:48px; }
.signal p { color:var(--muted); }
.signal-form { display:grid; grid-template-columns:1fr auto; }
.signal-form input { min-width:0; padding:18px; border:1px solid var(--line); background:#060707; color:var(--bone); outline:none; }
.signal-form input:focus { border-color:var(--bronze); }
.signal-form button { padding:18px 28px; border:1px solid var(--bronze); background:#15100c; color:var(--bone); text-transform:uppercase; letter-spacing:.14em; cursor:pointer; }
.signal-form button span { margin-left:18px; }
.site-footer { margin-top:30px; padding:70px 42px 25px; background:#070808; }
.footer-brand { display:flex; gap:18px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:35px; }
.footer-brand strong { letter-spacing:.15em; }
.footer-brand p { color:var(--muted); margin:7px 0 0; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; padding:42px 0; }
.footer-links div { display:flex; flex-direction:column; gap:9px; }
.footer-links span { color:var(--bronze-light); text-transform:uppercase; letter-spacing:.16em; font-size:11px; margin-bottom:7px; }
.footer-links a { color:#8b877f; }
.footer-bottom { border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; color:#696760; font-size:12px; }
.project-dialog { width:min(950px,calc(100% - 32px)); padding:0; color:var(--bone); border:1px solid var(--bronze); background:#090a0a; box-shadow:0 50px 120px #000; }
.project-dialog::backdrop { background:rgba(0,0,0,.85); backdrop-filter:blur(10px); }
.dialog-close { position:absolute; z-index:2; top:14px; right:16px; width:40px; height:40px; border:1px solid var(--line); background:#080909; font-size:25px; cursor:pointer; }
.dialog-visual { height:420px; background:radial-gradient(circle,#242a28,#070808 58%); border-bottom:1px solid var(--line); }
.dialog-copy { padding:38px; }
.dialog-title { font-size:56px; }
.dialog-description, .dialog-note { color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
[hidden] { display:none!important; }
@media (max-width:1150px) {
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .header-cta { display:none; }
  .menu-button { display:block; justify-self:end; }
  .mobile-panel { position:fixed; z-index:49; top:76px; right:0; width:min(370px,90vw); padding:25px; display:flex; flex-direction:column; gap:4px; background:rgba(7,8,8,.97); border-left:1px solid var(--line); border-bottom:1px solid var(--line); transform:translateX(105%); transition:.3s; }
  .mobile-panel.open { transform:none; }
  .mobile-panel a { padding:15px; border-bottom:1px solid #222; text-transform:uppercase; letter-spacing:.13em; }
  .realm-grid { grid-template-columns:repeat(3,1fr); }
  .realm-card:nth-child(3) { border-right:0; }
  .realm-card:nth-child(-n+3) { border-bottom:1px solid var(--line); }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .about { grid-template-columns:1fr 1fr; }
  .about-reliquary { display:none; }
}
@media (max-width:760px) {
  .section-shell { width:calc(100% - 18px); }
  .site-header { height:64px; padding:0 14px; }
  .mobile-panel { top:64px; }
  .hero { min-height:760px; }
  .hero-content { width:92vw; }
  .official-logo { width:94vw; }
  .bio-architecture { width:50%; opacity:.45; }
  .hero-status { display:none; }
  .realms,.archive,.experiments,.motion,.machines { padding:75px 18px; }
  .realm-grid { grid-template-columns:1fr 1fr; }
  .realm-card { border-bottom:1px solid var(--line)!important; }
  .realm-card:nth-child(odd) { border-right:1px solid var(--line); }
  .realm-card:nth-child(even) { border-right:0; }
  .split-heading { align-items:start; flex-direction:column; }
  .project-grid { grid-template-columns:1fr; }
  .project-visual { height:320px; }
  .experiment-row { grid-template-columns:1fr auto; gap:8px; padding:22px 0; }
  .experiment-code { grid-column:1; }
  .experiment-row div { grid-column:1; }
  .experiment-status { grid-column:2; grid-row:1; }
  .experiment-row button { grid-column:2; grid-row:2; }
  .statement-panel { padding:55px 25px; grid-template-columns:1fr; }
  .statement-panel .secondary-button { grid-column:1; }
  .motion-stage { grid-template-columns:1fr; }
  .motion-screen { min-height:400px; }
  .motion-copy { padding:35px 25px; }
  .machine-grid { grid-template-columns:1fr; }
  .about { padding:20px; grid-template-columns:1fr; }
  .about-photo-frame { height:auto; aspect-ratio:1.27; }
  .signal { padding:35px 22px; grid-template-columns:1fr; }
  .signal-form { grid-template-columns:1fr; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }

/* =========================================
   CINEMATIC LAYERED HERO — exact supplied art
   ========================================= */
.hero {
  --hero-x: 0;
  --hero-y: 0;
  --glow-flicker: 1;
  --glow-scale: 1;
  --static-opacity: .14;
  position: relative;
  min-height: min(100svh, 980px);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: #020303;
}
.hero-background-layer {
  position: absolute;
  inset: -3%;
  z-index: -10;
  background: url("assets/hero-background.png") center center / cover no-repeat;
  transform: translate3d(calc(var(--hero-x) * -19px), calc(var(--hero-y) * -13px), 0) scale(1.06);
  animation: heroBackgroundDrift 21s linear infinite alternate;
  will-change: transform;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 25%, rgba(76,14,10,.1) 45%, rgba(0,0,0,.1) 56%, rgba(0,0,0,.76) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.16), transparent 22%, transparent 78%, rgba(0,0,0,.56));
}
.hero-logo-stage {
  position: relative;
  z-index: 4;
  width: min(62vw, 820px);
  margin-top: -4vh;
  transform: translate3d(calc(var(--hero-x) * 14px), calc(var(--hero-y) * 10px), 0);
  animation: heroLogoEnter 2.2s cubic-bezier(.2,.75,.2,1) both, heroLogoFloat 7.2s ease-in-out 2.2s infinite;
  will-change: transform, opacity, filter;
}
.official-logo {
  position: relative;
  z-index: 3;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,.92)) drop-shadow(0 0 20px rgba(92,10,10,.22));
  animation: heroLogoBreath 7.2s ease-in-out 2.2s infinite;
  transform-origin: center;
}
.hero-logo-glow {
  position: absolute;
  inset: 10% 14% 16%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,0,0,.96) 0%, rgba(16,0,0,.94) 14%, rgba(34,2,4,.86) 26%, rgba(76,8,10,.56) 42%, rgba(46,5,7,.24) 60%, transparent 78%);
  filter: blur(54px) saturate(1.25);
  opacity: calc(.7 * var(--glow-flicker));
  transform: scale(calc(1.06 * var(--glow-scale)));
  animation: heroRedPulse 4.2s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-logo-glow::before,
.hero-logo-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.hero-logo-glow::before {
  inset: -8% -12% -5%;
  background: radial-gradient(circle, rgba(12,0,0,.78) 0%, rgba(48,4,6,.42) 34%, transparent 70%);
  filter: blur(68px);
  opacity: calc(.68 * var(--glow-flicker));
  animation: heroRedPulseSecondary 2.3s ease-in-out infinite;
}
.hero-logo-glow::after {
  inset: 8% 16% 22%;
  background: radial-gradient(circle, rgba(92,10,12,.20) 0%, rgba(70,8,10,.14) 24%, transparent 62%);
  filter: blur(34px);
  opacity: calc(.8 * var(--glow-flicker));
  animation: heroGlowCoreFlicker 1.45s steps(5,end) infinite;
}

.hero-orb-cluster {
  position: absolute;
  inset: -18%;
  z-index: 2;
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 50%;
  opacity: .72;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 33% 30%, rgba(255,244,236,.96) 0 10%, rgba(255,177,139,.88) 14%, rgba(196,40,24,.66) 34%, rgba(92,8,8,.30) 56%, rgba(28,2,2,0) 76%);
  box-shadow:
    0 0 8px rgba(255,180,160,.34),
    0 0 20px rgba(189,30,20,.24),
    0 0 36px rgba(96,7,7,.18);
  filter: blur(.1px) saturate(1.14);
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,14,14,.22) 0%, rgba(64,8,8,.10) 38%, transparent 72%);
  filter: blur(8px);
  opacity: .72;
}
.orb-one {
  width: 24px;
  height: 24px;
  animation:
    heroOrbPulse 3.2s ease-in-out infinite,
    heroOrbOrbitOne 12s linear infinite;
}
.orb-two {
  width: 14px;
  height: 14px;
  animation:
    heroOrbPulse 2.6s ease-in-out .5s infinite,
    heroOrbOrbitTwo 9s linear infinite;
}
.orb-three {
  width: 18px;
  height: 18px;
  animation:
    heroOrbPulse 3.8s ease-in-out .2s infinite,
    heroOrbOrbitThree 14s linear infinite;
}
.orb-four {
  width: 20px;
  height: 20px;
  animation:
    heroOrbPulse 3.1s ease-in-out .3s infinite,
    heroOrbOrbitFour 10.5s linear infinite reverse;
}
.orb-five {
  width: 10px;
  height: 10px;
  animation:
    heroOrbPulse 2.2s ease-in-out .1s infinite,
    heroOrbOrbitFive 7.5s linear infinite;
}
.orb-six {
  width: 12px;
  height: 12px;
  opacity: .58;
  animation:
    heroOrbPulse 3.4s ease-in-out .4s infinite,
    heroOrbOrbitSix 15s linear infinite;
}
.orb-seven {
  width: 8px;
  height: 8px;
  opacity: .52;
  animation:
    heroOrbPulse 2.9s ease-in-out .9s infinite,
    heroOrbOrbitSeven 11.5s linear infinite reverse;
}
.orb-eight {
  width: 14px;
  height: 14px;
  opacity: .6;
  animation:
    heroOrbPulse 4s ease-in-out .2s infinite,
    heroOrbOrbitEight 17s linear infinite;
}
.orb-nine {
  width: 9px;
  height: 9px;
  opacity: .5;
  animation:
    heroOrbPulse 2.5s ease-in-out .7s infinite,
    heroOrbOrbitNine 13s linear infinite;
}
.orb-ten {
  width: 11px;
  height: 11px;
  opacity: .55;
  animation:
    heroOrbPulse 3.3s ease-in-out .1s infinite,
    heroOrbOrbitTen 18.5s linear infinite reverse;
}
.orb-eleven {
  width: 7px;
  height: 7px;
  opacity: .46;
  animation:
    heroOrbPulse 2.3s ease-in-out .3s infinite,
    heroOrbOrbitEleven 10.8s linear infinite;
}
.orb-twelve {
  width: 13px;
  height: 13px;
  opacity: .57;
  animation:
    heroOrbPulse 3.7s ease-in-out .8s infinite,
    heroOrbOrbitTwelve 16.2s linear infinite;
}
.hero-logo-sweep {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: url("assets/paulbooth-ai-logo-transparent.png");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("assets/paulbooth-ai-logo-transparent.png");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.hero-logo-sweep::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -42%;
  width: 15%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,236,196,.3), rgba(255,153,90,.14), transparent);
  animation: heroLightSweep 8.2s ease-in-out 2.8s infinite;
}
.hero-content {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: clamp(32px, 5.7vh, 68px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(92vw, 760px);
  animation: heroCopyEnter 1.2s ease 1.4s both;
}
.hero-manifesto {
  margin: 0;
  color: rgba(215,202,178,.8);
  text-transform: uppercase;
  letter-spacing: .22em;
  text-align: center;
  font-size: clamp(11px, 1.15vw, 16px);
  text-shadow: 0 2px 12px #000;
}
.hero-manifesto span { color: #c68a54; }
.hero-smoke {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 65%;
  height: 58%;
  left: 18%;
  top: 18%;
  border-radius: 50%;
  opacity: .34;
  filter: blur(36px);
  mix-blend-mode: screen;
}
.smoke-one {
  background: radial-gradient(ellipse at 40% 55%, rgba(173,169,158,.14), transparent 60%);
  animation: heroSmokeOne 15s ease-in-out infinite alternate;
}
.smoke-two {
  background: radial-gradient(ellipse at 65% 42%, rgba(130,124,112,.1), transparent 56%);
  animation: heroSmokeTwo 18s ease-in-out infinite alternate-reverse;
}
.hero-particles,
.hero-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-particles {
  z-index: 2;
  opacity: .9;
}
.hero-static {
  z-index: 6;
  opacity: var(--static-opacity);
  mix-blend-mode: screen;
}
.hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .1;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, transparent, rgba(90,16,12,.08) 52%, transparent 100%);
  mix-blend-mode: soft-light;
  animation: heroScanlineShift .18s steps(3,end) infinite, heroScanlineFlicker 2.1s steps(8,end) infinite;
}

@keyframes heroOrbPulse {
  0%,100% { opacity: .45; scale: .92; filter: blur(.15px) brightness(.94); }
  35% { opacity: .88; scale: 1.06; filter: blur(.1px) brightness(1.12); }
  65% { opacity: .62; scale: .98; filter: blur(.18px) brightness(.98); }
}
@keyframes heroOrbOrbitOne {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(154px) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(154px) rotate(-360deg); }
}
@keyframes heroOrbOrbitTwo {
  from { transform: translate(-50%, -50%) rotate(78deg) translateX(132px) rotate(-78deg); }
  to { transform: translate(-50%, -50%) rotate(438deg) translateX(132px) rotate(-438deg); }
}
@keyframes heroOrbOrbitThree {
  from { transform: translate(-50%, -50%) rotate(145deg) translateX(178px) rotate(-145deg); }
  to { transform: translate(-50%, -50%) rotate(505deg) translateX(178px) rotate(-505deg); }
}
@keyframes heroOrbOrbitFour {
  from { transform: translate(-50%, -50%) rotate(220deg) translateX(146px) rotate(-220deg); }
  to { transform: translate(-50%, -50%) rotate(580deg) translateX(146px) rotate(-580deg); }
}
@keyframes heroOrbOrbitFive {
  from { transform: translate(-50%, -50%) rotate(300deg) translateX(118px) rotate(-300deg); }
  to { transform: translate(-50%, -50%) rotate(660deg) translateX(118px) rotate(-660deg); }
}
@keyframes heroOrbOrbitSix {
  from { transform: translate(-50%, -50%) rotate(18deg) translateX(216px) rotate(-18deg); }
  to { transform: translate(-50%, -50%) rotate(378deg) translateX(216px) rotate(-378deg); }
}
@keyframes heroOrbOrbitSeven {
  from { transform: translate(-50%, -50%) rotate(58deg) translateX(242px) rotate(-58deg); }
  to { transform: translate(-50%, -50%) rotate(418deg) translateX(242px) rotate(-418deg); }
}
@keyframes heroOrbOrbitEight {
  from { transform: translate(-50%, -50%) rotate(102deg) translateX(226px) rotate(-102deg); }
  to { transform: translate(-50%, -50%) rotate(462deg) translateX(226px) rotate(-462deg); }
}
@keyframes heroOrbOrbitNine {
  from { transform: translate(-50%, -50%) rotate(168deg) translateX(254px) rotate(-168deg); }
  to { transform: translate(-50%, -50%) rotate(528deg) translateX(254px) rotate(-528deg); }
}
@keyframes heroOrbOrbitTen {
  from { transform: translate(-50%, -50%) rotate(224deg) translateX(236px) rotate(-224deg); }
  to { transform: translate(-50%, -50%) rotate(584deg) translateX(236px) rotate(-584deg); }
}
@keyframes heroOrbOrbitEleven {
  from { transform: translate(-50%, -50%) rotate(278deg) translateX(262px) rotate(-278deg); }
  to { transform: translate(-50%, -50%) rotate(638deg) translateX(262px) rotate(-638deg); }
}
@keyframes heroOrbOrbitTwelve {
  from { transform: translate(-50%, -50%) rotate(332deg) translateX(210px) rotate(-332deg); }
  to { transform: translate(-50%, -50%) rotate(692deg) translateX(210px) rotate(-692deg); }
}

@keyframes heroBackgroundDrift {
  0% { transform: translate3d(calc(var(--hero-x) * -19px - 8px), calc(var(--hero-y) * -13px + 5px),0) scale(1.055); filter: brightness(.92); }
  25% { transform: translate3d(calc(var(--hero-x) * -19px - 3px), calc(var(--hero-y) * -13px - 2px),0) scale(1.064); filter: brightness(.95); }
  50% { transform: translate3d(calc(var(--hero-x) * -19px + 3px), calc(var(--hero-y) * -13px - 5px),0) scale(1.073); filter: brightness(1.01); }
  75% { transform: translate3d(calc(var(--hero-x) * -19px + 7px), calc(var(--hero-y) * -13px - 7px),0) scale(1.08); filter: brightness(.98); }
  100% { transform: translate3d(calc(var(--hero-x) * -19px + 11px), calc(var(--hero-y) * -13px - 9px),0) scale(1.088); filter: brightness(1.03); }
}
@keyframes heroLogoEnter {
  0% { opacity:0; transform:scale(.86) translateY(24px); filter:blur(14px) brightness(.55); }
  65% { opacity:1; filter:blur(0) brightness(1.08); }
  100% { opacity:1; transform:scale(1) translateY(0); filter:none; }
}
@keyframes heroLogoFloat {
  0%,100% { translate:0 0; }
  25% { translate:0 -5px; }
  50% { translate:0 -14px; }
  75% { translate:0 -7px; }
}
@keyframes heroLogoBreath {
  0%,100% { scale:1; filter:drop-shadow(0 28px 56px rgba(0,0,0,.92)) brightness(.97); }
  25% { scale:1.009; filter:drop-shadow(0 31px 60px rgba(0,0,0,.93)) drop-shadow(0 0 24px rgba(98,11,11,.16)) brightness(1.015); }
  50% { scale:1.022; filter:drop-shadow(0 36px 68px rgba(0,0,0,.95)) drop-shadow(0 0 32px rgba(124,12,12,.27)) brightness(1.07); }
  75% { scale:1.011; filter:drop-shadow(0 32px 62px rgba(0,0,0,.94)) drop-shadow(0 0 24px rgba(88,10,10,.19)) brightness(1.025); }
}
@keyframes heroRedPulse {
  0%,100% { opacity: calc(.48 * var(--glow-flicker)); transform: scale(calc(.98 * var(--glow-scale))); }
  25% { opacity: calc(.74 * var(--glow-flicker)); transform: scale(calc(1.03 * var(--glow-scale))); }
  50% { opacity: calc(1 * var(--glow-flicker)); transform: scale(calc(1.09 * var(--glow-scale))); }
  75% { opacity: calc(.64 * var(--glow-flicker)); transform: scale(calc(1.04 * var(--glow-scale))); }
}
@keyframes heroRedPulseSecondary {
  0%,100% { transform: scale(1); opacity: calc(.46 * var(--glow-flicker)); }
  50% { transform: scale(1.08); opacity: calc(.82 * var(--glow-flicker)); }
}
@keyframes heroGlowCoreFlicker {
  0%,100% { opacity: calc(.48 * var(--glow-flicker)); }
  20% { opacity: calc(.88 * var(--glow-flicker)); }
  40% { opacity: calc(.52 * var(--glow-flicker)); }
  60% { opacity: calc(.95 * var(--glow-flicker)); }
  80% { opacity: calc(.62 * var(--glow-flicker)); }
}
@keyframes heroLightSweep {
  0%,14% { left:-42%; opacity:0; }
  23% { opacity:1; }
  47% { left:128%; opacity:.82; }
  54%,100% { left:128%; opacity:0; }
}
@keyframes heroSmokeOne {
  from { transform:translate3d(-5%,4%,0) scale(.99); opacity:.24; }
  to { transform:translate3d(7%,-6%,0) scale(1.2); opacity:.48; }
}
@keyframes heroSmokeTwo {
  from { transform:translate3d(7%,-3%,0) scale(1.12); opacity:.19; }
  to { transform:translate3d(-7%,6%,0) scale(.93); opacity:.42; }
}
@keyframes heroCopyEnter {
  from { opacity:0; transform:translate(-50%,18px); }
  to { opacity:1; transform:translate(-50%,0); }
}
@keyframes heroScanlineShift {
  0% { transform: translateY(0); }
  100% { transform: translateY(3px); }
}
@keyframes heroScanlineFlicker {
  0%,100% { opacity: .06; }
  12% { opacity: .1; }
  13% { opacity: .02; }
  26% { opacity: .16; }
  27% { opacity: .05; }
  48% { opacity: .13; }
  49% { opacity: .04; }
  74% { opacity: .12; }
  75% { opacity: .03; }
  88% { opacity: .14; }
}
@media (max-width:760px) {
  .hero { min-height:760px; }
  .hero-background-layer { inset:-8%; background-position:center; }
  .hero-logo-stage { width:min(94vw,680px); margin-top:-12vh; }
  .official-logo { max-height:63vh; }
  .hero-content { bottom:32px; }
  .hero-manifesto { max-width:90vw; line-height:1.65; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-background-layer,.hero-logo-stage,.official-logo,.hero-logo-glow,.hero-logo-sweep::before,.hero-smoke,.hero-content,.hero-scanlines,.hero-orb { animation:none!important; }
  .hero-logo-stage,.hero-orb { transform:none; }
}

.hero.section-shell { background-color:#020303; backdrop-filter:none; }


/* =========================================
   FUTURISTIC / EERIE TYPOGRAPHY SYSTEM
   ========================================= */
h1, h2, h3,
.site-header,
.desktop-nav,
.mobile-panel,
.header-cta,
.primary-button,
.secondary-button,
.text-button,
.filter,
.eyebrow,
.hero-manifesto,
.hero-status,
.realm-number,
.project-copy > span,
.project-link,
.experiment-code,
.experiment-status,
.machine-index,
.machine-card a,
.screen-label,
.counter,
.text-link,
.photo-index,
.signal-form,
.site-footer {
  font-family: var(--font-display);
}

body,
.project-copy p,
.machine-card p,
.experiment-row p,
.motion-copy p,
.about-copy p,
.signal p,
.split-heading > p,
.realm-card p {
  font-family: var(--font-body);
}

.mini-brand-mark,
.footer-brand .mini-brand-mark {
  font-family: var(--font-tech);
}

.statement-panel h2 {
  font-family: var(--font-display);
  letter-spacing: .075em;
  line-height: 1.12;
}

h2 {
  letter-spacing: .105em;
  text-shadow: 0 0 18px rgba(118, 30, 24, .08);
}

h3 {
  letter-spacing: .085em;
}

.desktop-nav a,
.mobile-panel a,
.header-cta,
.primary-button,
.secondary-button,
.text-button,
.filter,
.eyebrow,
.hero-manifesto {
  letter-spacing: .19em;
}

.project-copy p,
.machine-card p,
.experiment-row p,
.about-copy p,
.motion-copy p,
.signal p {
  letter-spacing: .018em;
}

input::placeholder {
  font-family: var(--font-display);
  letter-spacing: .09em;
}

@media (max-width: 760px) {
  h2 {
    letter-spacing: .075em;
  }

  .desktop-nav a,
  .mobile-panel a,
  .header-cta,
  .primary-button,
  .secondary-button,
  .text-button,
  .filter,
  .eyebrow,
  .hero-manifesto {
    letter-spacing: .135em;
  }
}


/* Refined futuristic type hierarchy */
.eyebrow,
.realm-number,
.project-copy > span,
.experiment-code,
.experiment-status,
.machine-index,
.screen-label,
.counter,
.photo-index,
.hero-status {
  font-family: var(--font-tech);
}

.statement-panel h2 {
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0 0 16px rgba(103, 24, 20, .10);
}

@media (max-width: 760px) {
  .statement-panel h2 {
    letter-spacing: .045em;
    line-height: 1.18;
  }
}


/* Alien-inspired cinematic typography:
   thin, geometric, widely tracked, industrial, and highly readable */
h2,
h3,
.site-header,
.desktop-nav,
.mobile-panel,
.header-cta,
.primary-button,
.secondary-button,
.text-button,
.filter,
.hero-manifesto,
.project-link,
.machine-card a,
.text-link,
.signal-form,
.site-footer {
  font-family: var(--font-display);
  font-weight: 400;
}

h2 {
  letter-spacing: .16em;
  line-height: 1.08;
}

h3 {
  letter-spacing: .115em;
}

.desktop-nav a,
.mobile-panel a,
.header-cta,
.primary-button,
.secondary-button,
.text-button,
.filter,
.hero-manifesto {
  letter-spacing: .22em;
}

.statement-panel h2 {
  font-family: var(--font-display);
  letter-spacing: .12em;
  line-height: 1.14;
  text-transform: uppercase;
  font-weight: 400;
}

@media (max-width: 760px) {
  h2 {
    letter-spacing: .09em;
  }

  .statement-panel h2 {
    letter-spacing: .07em;
    line-height: 1.18;
  }

  .desktop-nav a,
  .mobile-panel a,
  .header-cta,
  .primary-button,
  .secondary-button,
  .text-button,
  .filter,
  .hero-manifesto {
    letter-spacing: .14em;
  }
}


/* =========================================
   AUTO-LOADED CONTENT FOLDERS
   ========================================= */
.folder-content {
  padding: 100px 34px;
  border-bottom: 1px solid var(--line);
}

.folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
}

.folder-tab {
  border: 1px solid #302b27;
  background: rgba(7, 9, 9, .72);
  color: #9b968c;
  padding: 10px 15px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--font-tech);
  cursor: pointer;
}

.folder-tab.active,
.folder-tab:hover {
  color: var(--bone);
  border-color: var(--bronze);
  background: rgba(32, 21, 17, .82);
}

.folder-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.folder-media-card {
  border: 1px solid var(--line);
  background: rgba(7, 9, 9, .92);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}

.folder-media-card:hover {
  transform: translateY(-5px);
  border-color: rgba(181, 132, 68, .65);
}

.folder-media-preview {
  position: relative;
  min-height: 260px;
  background: #050606;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.folder-media-preview img,
.folder-media-preview video {
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.folder-media-preview audio {
  width: calc(100% - 38px);
}

.folder-document {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: .14em;
  color: var(--bronze-light);
}

.folder-media-type {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 9px;
  border: 1px solid rgba(179, 140, 81, .52);
  background: rgba(3, 4, 4, .78);
  color: #c7b28c;
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.folder-media-copy {
  padding: 22px;
}

.folder-media-copy > span {
  color: var(--bronze-light);
  font-family: var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
}

.folder-media-copy h3 {
  margin: 9px 0 11px;
  font-size: 23px;
  line-height: 1.25;
}

.folder-media-copy p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

.folder-media-copy a {
  display: inline-block;
  margin-top: 18px;
  color: #c9b793;
  font-family: var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

.folder-empty {
  border: 1px solid var(--line);
  padding: 36px;
  color: var(--muted);
  text-align: center;
  background: rgba(7, 9, 9, .82);
}

@media (max-width: 980px) {
  .folder-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .folder-content {
    padding: 75px 18px;
  }

  .folder-media-grid {
    grid-template-columns: 1fr;
  }
}


.folder-media-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 2px 0 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(142, 109, 61, .24);
  border-bottom: 1px solid rgba(142, 109, 61, .18);
}

.folder-media-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #b9b2a6;
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.folder-media-meta b {
  color: var(--bronze-light);
  font-weight: 500;
}


/* Category artwork cards */
.realm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border: 0;
}

.realm-card-graphic {
  min-height: 520px;
  padding: 0;
  border: 1px solid var(--line);
  background: #050606;
  overflow: hidden;
  isolation: isolate;
}

.realm-card-graphic::after {
  display: none;
}

.realm-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.72) contrast(1.08) saturate(.88);
  transform: scale(1.01);
  transition: transform .7s ease, filter .5s ease;
}

.realm-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(2,3,3,.98) 0%, rgba(2,3,3,.78) 26%, rgba(2,3,3,.14) 62%, rgba(2,3,3,.24) 100%),
    radial-gradient(circle at 50% 28%, transparent 0 36%, rgba(0,0,0,.42) 100%);
}

.realm-card-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
}

.realm-card-graphic .realm-sigil {
  position: absolute;
  top: 22px;
  left: 22px;
  margin: 0;
  background: rgba(4,5,5,.62);
  backdrop-filter: blur(8px);
}

.realm-card-graphic .realm-number {
  color: #a99d8b;
}

.realm-card-graphic h3 {
  max-width: 90%;
  font-size: clamp(20px, 2vw, 29px);
  text-shadow: 0 2px 14px #000;
}

.realm-card-graphic p {
  color: #b2aca1;
  text-shadow: 0 2px 12px #000;
}

.realm-card-graphic:hover {
  transform: translateY(-7px);
  border-color: rgba(181,132,68,.7);
}

.realm-card-graphic:hover .realm-card-image {
  transform: scale(1.055);
  filter: brightness(.88) contrast(1.1) saturate(.96);
}

@media (max-width: 1050px) {
  .realm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .realm-grid {
    grid-template-columns: 1fr;
  }

  .realm-card-graphic {
    min-height: 470px;
  }
}


/* =========================================
   FIXED PAGE BACKGROUND + TRANSLUCENT PANELS
   ========================================= */

/* Keep the biomechanical page background locked to the viewport. */
html {
  background: #040505;
}

body {
  position: relative;
  background-color: #040505;
  background-image:
    linear-gradient(rgba(2, 3, 3, .52), rgba(2, 3, 3, .52)),
    url("assets/page-background-tile.png");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}

/* Fixed pseudo-layer improves reliability where background-attachment
   is inconsistent and prevents the texture from moving with sections. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(2, 3, 3, .50), rgba(2, 3, 3, .50)),
    url("assets/page-background-tile.png") top center / 100% auto repeat-y;
  transform: translateZ(0);
  will-change: transform;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 24%, transparent 0 20%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.58) 100%);
}

/* Main framed sections become smoked glass instead of opaque boxes. */
.section-shell:not(.hero) {
  background:
    linear-gradient(180deg, rgba(7, 9, 9, .50), rgba(4, 6, 6, .30));
  -webkit-backdrop-filter: blur(5px) saturate(.82);
  backdrop-filter: blur(5px) saturate(.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 18px 55px rgba(0,0,0,.17);
}

/* Individual cards and boxed panels. */
.realm-card,
.project-card,
.machine-card,
.motion-stage,
.statement-panel,
.about,
.signal,
.folder-media-card,
.project-dialog,
.experiment-row,
.text-button,
.signal-form input,
.signal-form button {
  background-color: rgba(6, 8, 8, .46);
  -webkit-backdrop-filter: blur(6px) saturate(.82);
  backdrop-filter: blur(6px) saturate(.82);
}

/* Preserve gradients, but make them translucent enough to reveal the wall. */
.realm-card {
  background:
    linear-gradient(180deg, rgba(16, 18, 18, .50), rgba(5, 7, 7, .40));
}

.project-card {
  background: rgba(7, 9, 9, .48);
}

.machine-card {
  background:
    linear-gradient(180deg, rgba(12, 14, 14, .50), rgba(4, 6, 6, .40));
}

.motion-stage {
  background: rgba(5, 7, 7, .40);
}

.statement-panel {
  background:
    radial-gradient(circle at 14% 50%, rgba(78, 29, 24, .18), transparent 34%),
    linear-gradient(135deg, rgba(8, 10, 10, .48), rgba(3, 5, 5, .36));
}

.about {
  background:
    linear-gradient(115deg, rgba(7, 9, 9, .50), rgba(3, 5, 5, .36));
}

.signal {
  background:
    linear-gradient(90deg, rgba(8, 10, 10, .48), rgba(4, 6, 6, .36));
}

.folder-media-card {
  background: rgba(6, 8, 8, .50);
}

.experiment-row {
  background: rgba(5, 7, 7, .16);
}

/* Card copy areas remain readable without turning fully opaque. */
.project-copy,
.folder-media-copy,
.motion-copy,
.about-copy {
  background: linear-gradient(180deg, rgba(5, 7, 7, .16), rgba(4, 6, 6, .30));
}

/* Header stays glassy while fixed background remains visible beneath it. */
.site-header {
  background: rgba(4, 6, 6, .60);
  -webkit-backdrop-filter: blur(18px) saturate(.8);
  backdrop-filter: blur(18px) saturate(.8);
}

/* Mobile browsers often handle fixed backgrounds better via the fixed
   pseudo-element, so disable the body attachment there to avoid jitter. */
@media (max-width: 760px) {
  body {
    background-image: none;
    background-attachment: scroll;
  }

  body::before {
    background-size: auto 100vh;
    background-repeat: repeat-y;
  }

  .section-shell:not(.hero) {
    background:
      linear-gradient(180deg, rgba(7, 9, 9, .60), rgba(4, 6, 6, .50));
    -webkit-backdrop-filter: blur(4px) saturate(.8);
    backdrop-filter: blur(4px) saturate(.8);
  }
}

.project-open[href]{display:block;text-decoration:none;color:inherit;}


/* Zion Lost archive artwork */
.project-visual-image { background:#000; }
.project-visual-image > img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#000;
  transition:transform .65s ease, filter .35s ease;
}
.project-visual-image .project-image-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 45%,rgba(0,0,0,.34) 100%);
}
.project-card:hover .project-visual-image > img {
  transform:scale(1.025);
  filter:brightness(1.08);
}
.project-visual-image .visual-index { z-index:2; }

/* Main hero: remove the gold frame without changing the page structure. */
.hero.section-shell {
  border-inline: 0 !important;
  border-bottom: 0 !important;
}

/* Active Experiments project links */
.experiment-row > a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bone);
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.experiment-row > a:hover {
  border-color: var(--bronze);
  background: rgba(109, 76, 42, .14);
  transform: translateX(2px);
}

/* Zion Lost featured inside Motion Systems */
.motion-project-feature .motion-screen {
  text-decoration: none;
}
.motion-zion-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #020303;
}
.motion-zion-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.58) contrast(1.12);
  transition: transform .7s ease, filter .5s ease;
}
.motion-zion-visual .screen-core {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.58)),
    radial-gradient(circle at center, transparent 18%, rgba(0,0,0,.44) 100%);
}
.motion-project-play {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  background: rgba(3,4,4,.62);
  color: var(--bone);
  font-size: 23px;
  padding-left: 4px;
  backdrop-filter: blur(8px);
  transition: transform .3s ease, background .3s ease;
}
.motion-zion-visual:hover img {
  transform: scale(1.025);
  filter: brightness(.72) contrast(1.12);
}
.motion-zion-visual:hover .motion-project-play {
  transform: scale(1.08);
  background: rgba(76, 10, 12, .72);
}
.motion-project-feature .screen-label {
  z-index: 2;
}
.motion-project-feature .motion-copy .eyebrow {
  margin-bottom: 4px;
}


/* Manifest-driven Motion Systems */
.motion-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.motion-folder-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(3, 4, 4, .62);
  backdrop-filter: blur(8px);
}

.motion-folder-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid var(--line);
}

.motion-folder-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.motion-folder-index {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .72);
  color: var(--bone);
  font: 10px "Oxanium", sans-serif;
  letter-spacing: .14em;
}

.motion-folder-copy {
  padding: 26px;
}

.motion-folder-copy h3 {
  margin: 9px 0 12px;
  font-family: "Michroma", sans-serif;
  font-weight: 400;
}

.motion-folder-copy p {
  margin: 0 0 18px;
}

.motion-folder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--bronze);
  font: 10px "Oxanium", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.motion-folder-meta span + span::before {
  content: "•";
  margin-right: 10px;
  opacity: .55;
}

@media (max-width: 850px) {
  .motion-project-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   ACTIVE EXPERIMENT — ZION LOST COVER
   ========================================= */

.experiment-row-with-cover {
  grid-template-columns: 360px 130px minmax(0, 1fr) 170px 50px;
  gap: 28px;
  min-height: 390px;
  padding-block: 15px;
}

/*
  This selector intentionally outranks the older generic rule:
  .experiment-row > a { width: 42px; height: 42px; }
*/
.experiment-row > a.experiment-cover {
  display: block;
  width: 360px;
  height: 360px;
  min-width: 360px;
  min-height: 360px;
  max-width: none;
  justify-self: start;
  align-self: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #050606;
  transform: none;
}

.experiment-row > a.experiment-cover:hover {
  transform: none;
  background: #050606;
}

.experiment-row > a.experiment-cover img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  transform: none !important;
}

.experiment-row > a.experiment-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  justify-self: end;
  color: var(--bronze-light);
  font-size: 25px;
}

@media (max-width: 1100px) {
  .experiment-row-with-cover {
    grid-template-columns: 260px 105px minmax(0, 1fr) 110px 50px;
    gap: 20px;
    min-height: 290px;
  }

  .experiment-row > a.experiment-cover {
    width: 260px;
    height: 260px;
    min-width: 260px;
    min-height: 260px;
  }
}

@media (max-width: 760px) {
  .experiment-row-with-cover {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 0;
    padding: 24px 0;
  }

  .experiment-row > a.experiment-cover {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    margin-bottom: 8px;
  }

  .experiment-row-with-cover .experiment-code {
    grid-column: 1;
    grid-row: 2;
  }

  .experiment-row-with-cover > div {
    grid-column: 1;
    grid-row: 3;
  }

  .experiment-row-with-cover .experiment-status {
    grid-column: 2;
    grid-row: 2;
  }

  .experiment-row-with-cover .experiment-arrow {
    grid-column: 2;
    grid-row: 3;
  }
}

/* =========================================
   ALL SITE VIDEOS — UNCROPPED PREVIEW + FULLSCREEN
   ========================================= */

/* Content Repository previews */
.folder-media-preview video {
  width: 100%;
  height: 310px;
  object-fit: contain !important;
  object-position: center;
  background: #000;
}

/* Motion Systems previews */
.motion-folder-preview video,
.motion-project-preview video,
.motion-preview video,
.manifest-machine-preview video,
.machine-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  background: #000;
}

/* Preserve the entire frame in every native fullscreen implementation. */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000 !important;
}

/* Chromium/WebKit fullscreen media container. */
video::-webkit-media-controls-enclosure {
  max-width: 100%;
}

/* =========================================
   ABOUT PAUL BOOTH — BLACK PHOTO COLUMN
   ========================================= */

.about {
  background:
    linear-gradient(
      90deg,
      #000 0,
      #000 38%,
      #080909 38%,
      #080909 100%
    );
}

.about-photo-frame {
  background: #000;
}

@media (max-width: 1150px) {
  .about {
    background:
      linear-gradient(
        90deg,
        #000 0,
        #000 50%,
        #080909 50%,
        #080909 100%
      );
  }
}

@media (max-width: 760px) {
  .about {
    background: #000;
  }

  .about-copy {
    background: #080909;
    margin: 0 -20px -20px;
    padding: 30px 20px 20px;
  }
}

/* =========================================
   ABOUT PHOTO COLUMN — FULL-HEIGHT BLACK HARD FIX
   ========================================= */

/*
  Uses a dedicated layer instead of the panel background. This overrides the
  more-specific .section-shell:not(.hero) smoked-glass rule and extends from
  the absolute top edge to the absolute bottom edge of the About panel.
*/
#about.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#about.about::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(
    45px + ((100% - 166px) * 1.1 / 2.9) + 19px
  );
  background: #000 !important;
  pointer-events: none;
}

#about.about > * {
  position: relative;
  z-index: 1;
}

#about.about .about-photo-frame {
  background: #000 !important;
}

@media (max-width: 1150px) {
  #about.about::before {
    width: calc(45px + ((100% - 128px) / 2) + 19px);
  }
}

@media (max-width: 760px) {
  #about.about::before {
    top: 0;
    bottom: auto;
    width: 100%;
    height: calc(20px + ((100vw - 40px) / 1.27) + 20px);
  }
}

/* =========================================
   ABOUT PHOTO — REMOVE GOLD STROKE
   ========================================= */

#about.about .about-photo-frame,
#about.about .about-photo-frame::before,
#about.about .about-photo-frame::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#about.about .about-photo-frame img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* =========================================
   ABOUT PHOTO — ALIGN TO VERY TOP OF COLUMN
   ========================================= */

#about.about {
  align-items: stretch !important;
}

#about.about .about-photo-frame {
  align-self: start !important;
  margin-top: 0 !important;
  top: 0 !important;
  transform: none !important;
}

#about.about .about-photo-frame img {
  display: block;
  margin-top: 0 !important;
}

/* =========================================
   ABOUT PAUL BOOTH — REMOVE THIRD COLUMN
   ========================================= */

#about.about {
  grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1.8fr) !important;
}

#about.about .about-copy {
  grid-column: 2 !important;
}

#about.about .about-reliquary,
#about.about .reliquary-figure {
  display: none !important;
}

@media (max-width: 1150px) {
  #about.about {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #about.about {
    grid-template-columns: 1fr !important;
  }

  #about.about .about-copy {
    grid-column: 1 !important;
  }
}

/* =========================================
   ABOUT PHOTO — FLUSH WITH PANEL TOP EDGE
   ========================================= */

/*
  The About panel has internal top padding. A normal top alignment only reaches
  the padded content edge. This negative margin removes that padding above the
  first-column photo so the image begins at the panel's true outer top edge.
*/
#about.about .about-photo-frame {
  align-self: start !important;
  margin-top: -45px !important;
  top: auto !important;
  transform: none !important;
}

#about.about .about-photo-frame img {
  display: block;
  margin-top: 0 !important;
}

@media (max-width: 1150px) {
  #about.about .about-photo-frame {
    margin-top: -32px !important;
  }
}

@media (max-width: 760px) {
  #about.about .about-photo-frame {
    margin-top: -20px !important;
  }
}

/* =========================================
   INTELLIGENT MACHINES — CLEAN RESPONSIVE LAYOUT
   ========================================= */

#machines .machine-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

#machines .machine-card.manifest-machine-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(12,14,14,.78), rgba(4,6,6,.72)) !important;
}

#machines .manifest-machine-preview {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #000 !important;
  border-bottom: 1px solid rgba(169,119,67,.28) !important;
}

#machines .manifest-machine-preview video,
#machines .manifest-machine-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000 !important;
}

#machines .manifest-machine-preview .folder-document {
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at center, rgba(142,109,61,.15), transparent 55%),
    #000 !important;
  color: var(--bronze-light) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 54px) !important;
  letter-spacing: .18em !important;
}

#machines .manifest-machine-card .machine-index {
  display: block !important;
  margin: 22px 24px 8px !important;
}

#machines .manifest-machine-card h3 {
  margin: 0 24px 12px !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere !important;
}

#machines .manifest-machine-card p {
  margin: 0 24px 24px !important;
  line-height: 1.6 !important;
}

#machines .manifest-machine-card > a {
  position: static !important;
  margin: 0 24px 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(151,113,60,.24) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

@media (max-width: 900px) {
  #machines .machine-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #machines {
    padding-inline: 18px !important;
  }

  #machines .manifest-machine-card .machine-index {
    margin: 18px 18px 8px !important;
  }

  #machines .manifest-machine-card h3,
  #machines .manifest-machine-card p {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  #machines .manifest-machine-card > a {
    margin: 0 18px 20px !important;
  }
}

/* =========================================
   INTELLIGENT MACHINES — NATURAL VIDEO RATIO FIX
   ========================================= */

/*
  The machine previews were being forced into 16:9. The ThetaForge and
  TimeLord advertisements are vertical media, so that fixed frame made the
  inline playback area appear cropped or nearly invisible. Let each video use
  its own encoded aspect ratio instead.
*/
#machines .manifest-machine-preview {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
  background: #000 !important;
}

#machines .manifest-machine-preview video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 760px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000 !important;
}

/* Images keep their full frame as well. */
#machines .manifest-machine-preview img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 760px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000 !important;
}

/* Keep the document preview at a deliberate card height. */
#machines .manifest-machine-preview:has(.folder-document) {
  min-height: 300px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#machines .manifest-machine-preview .folder-document {
  min-height: 300px !important;
}

@media (max-width: 900px) {
  #machines .manifest-machine-preview video,
  #machines .manifest-machine-preview img {
    max-height: 80vh !important;
  }
}


/* =========================================
   YOUTUBE EMBEDS — MATCH EXISTING SITE CARDS
   ========================================= */

.pb-youtube-embed {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.pb-youtube-embed.is-landscape {
  aspect-ratio: 16 / 9;
}

.pb-youtube-embed.is-vertical {
  width: min(100%, 430px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

.pb-youtube-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.motion-folder-preview,
.folder-media-preview,
.manifest-machine-preview {
  background: #000;
}

#machines .manifest-machine-preview:has(.pb-youtube-embed) {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: #000 !important;
}

#machines .manifest-machine-preview .pb-youtube-embed.is-landscape {
  width: 100%;
}

#machines .manifest-machine-preview .pb-youtube-embed.is-vertical {
  width: min(100%, 430px);
  margin-inline: auto;
}

@media (max-width: 760px) {
  .pb-youtube-embed.is-vertical {
    width: min(100%, 390px);
  }
}


/* =========================================
   CLEAN MEDIA GRID REBUILD — AUTHORITATIVE
   Exactly two columns and uncropped portrait
   YouTube players in every media section.
   ========================================= */

/* All three media sections use the same two-column structure. */
#folder-media-grid.folder-media-grid,
#motion-project-grid.motion-project-grid,
#machine-grid.machine-grid,
#machines #machine-grid.machine-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

#folder-media-grid > .folder-media-card,
#motion-project-grid > .motion-folder-card,
#machine-grid > .machine-card {
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
}

/* YouTube cards grow to the complete media height. */
#folder-media-grid > .folder-media-card.is-youtube-card,
#motion-project-grid > .motion-folder-card.is-youtube-card,
#machine-grid > .machine-card.is-youtube-card {
  overflow: hidden !important;
}

/* Remove inherited fixed-height and 16:9 rules from YouTube preview parents. */
#folder-media-grid .folder-media-preview.is-youtube-preview,
#motion-project-grid .motion-folder-preview.is-youtube-preview,
#machine-grid .manifest-machine-preview.is-youtube-preview,
#machines .manifest-machine-preview.is-youtube-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  background: #000 !important;
  border-bottom: 1px solid var(--line) !important;
}

/* The embed wrapper itself owns the correct video ratio. */
#folder-media-grid .pb-youtube-embed,
#motion-project-grid .pb-youtube-embed,
#machine-grid .pb-youtube-embed {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #000 !important;
  flex: none !important;
}

/* Horizontal videos fill the column. */
#folder-media-grid .pb-youtube-embed.is-landscape,
#motion-project-grid .pb-youtube-embed.is-landscape,
#machine-grid .pb-youtube-embed.is-landscape {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
}

/* Vertical videos are complete 9:16 players, centered and never cropped. */
#folder-media-grid .pb-youtube-embed.is-vertical,
#motion-project-grid .pb-youtube-embed.is-vertical,
#machine-grid .pb-youtube-embed.is-vertical {
  width: min(72%, 390px) !important;
  max-width: 390px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto !important;
}

#folder-media-grid .pb-youtube-embed > iframe,
#motion-project-grid .pb-youtube-embed > iframe,
#machine-grid .pb-youtube-embed > iframe {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border: 0 !important;
  background: #000 !important;
}

/* Keep overlay labels above the YouTube frame. */
#folder-media-grid .folder-media-type,
#motion-project-grid .motion-folder-index {
  z-index: 8 !important;
}

/* One column only on small screens. */
@media (max-width: 760px) {
  #folder-media-grid.folder-media-grid,
  #motion-project-grid.motion-project-grid,
  #machine-grid.machine-grid,
  #machines #machine-grid.machine-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  #folder-media-grid .pb-youtube-embed.is-vertical,
  #motion-project-grid .pb-youtube-embed.is-vertical,
  #machine-grid .pb-youtube-embed.is-vertical {
    width: min(88%, 390px) !important;
  }
}


/* =========================================
   CUSTOM VIDEO POSTERS — CLICK TO LOAD
   The YouTube iframe is not created until
   the visitor clicks the custom still frame.
   ========================================= */

.pb-youtube-poster {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.pb-youtube-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .08) 58%, rgba(0, 0, 0, .46)),
    radial-gradient(circle at 50% 45%, transparent 42%, rgba(0, 0, 0, .18) 100%);
  transition: background .25s ease;
}

.pb-youtube-poster > img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #000 !important;
  transform: scale(1.002);
  filter: saturate(.84) contrast(1.06) brightness(.88);
  transition: transform .35s ease, filter .35s ease;
}

.pb-youtube-poster:hover > img,
.pb-youtube-poster:focus-visible > img {
  transform: scale(1.025);
  filter: saturate(.92) contrast(1.08) brightness(.98);
}

.pb-youtube-poster:hover::after,
.pb-youtube-poster:focus-visible::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .01), rgba(0, 0, 0, .04) 58%, rgba(0, 0, 0, .34)),
    radial-gradient(circle at 50% 45%, transparent 48%, rgba(0, 0, 0, .12) 100%);
}

.pb-custom-play {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 4 !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(179, 140, 81, .92) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(180deg, rgba(24, 22, 19, .88), rgba(5, 6, 6, .92)) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .48),
    inset 0 0 16px rgba(179, 140, 81, .08) !important;
  backdrop-filter: blur(8px) !important;
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.pb-custom-play-triangle {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 3px !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid var(--bone) !important;
  filter: drop-shadow(0 0 5px rgba(214, 208, 194, .22));
}

.pb-youtube-poster:hover .pb-custom-play,
.pb-youtube-poster:focus-visible .pb-custom-play {
  transform: scale(1.08);
  border-color: var(--bronze-light) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .56),
    0 0 22px rgba(179, 140, 81, .18),
    inset 0 0 18px rgba(179, 140, 81, .13) !important;
}

.pb-youtube-poster:focus-visible {
  outline: 1px solid var(--bronze-light) !important;
  outline-offset: -2px !important;
}

/* After click, the real YouTube iframe fills the same uncropped ratio box. */
.pb-youtube-embed.is-playing > iframe {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  background: #000 !important;
}

@media (max-width: 760px) {
  .pb-custom-play {
    right: 12px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-youtube-poster > img,
  .pb-custom-play {
    transition: none !important;
  }
}


/* =========================================
   CUSTOM POSTER IMAGE — AUTHORITATIVE FIX
   Overrides older Intelligent Machines image
   rules that were forcing poster images back
   to height:auto / object-fit:contain.
   ========================================= */

#folder-media-grid .folder-media-preview .pb-youtube-poster,
#motion-project-grid .motion-folder-preview .pb-youtube-poster,
#machine-grid .manifest-machine-preview .pb-youtube-poster,
#machines #machine-grid .manifest-machine-preview .pb-youtube-poster {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

#folder-media-grid .folder-media-preview .pb-youtube-poster > img,
#motion-project-grid .motion-folder-preview .pb-youtube-poster > img,
#machine-grid .manifest-machine-preview .pb-youtube-poster > img,
#machines #machine-grid .manifest-machine-preview .pb-youtube-poster > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
}

/*
  YouTube supplies Shorts thumbnails inside a landscape source image.
  Cropping that source to the center of the portrait frame enlarges the actual
  vertical artwork instead of leaving it as a tiny image above a black field.
*/
#folder-media-grid .pb-youtube-embed.is-vertical .pb-youtube-poster > img,
#motion-project-grid .pb-youtube-embed.is-vertical .pb-youtube-poster > img,
#machine-grid .pb-youtube-embed.is-vertical .pb-youtube-poster > img,
#machines #machine-grid .pb-youtube-embed.is-vertical .pb-youtube-poster > img {
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Keep the custom indicator small and anchored to the visible still frame. */
#folder-media-grid .pb-youtube-poster .pb-custom-play,
#motion-project-grid .pb-youtube-poster .pb-custom-play,
#machine-grid .pb-youtube-poster .pb-custom-play,
#machines #machine-grid .pb-youtube-poster .pb-custom-play {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 6 !important;
}

/* The real iframe takes over the identical full frame after the click. */
#folder-media-grid .pb-youtube-embed.is-playing > iframe,
#motion-project-grid .pb-youtube-embed.is-playing > iframe,
#machine-grid .pb-youtube-embed.is-playing > iframe,
#machines #machine-grid .pb-youtube-embed.is-playing > iframe {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border: 0 !important;
}


/* =========================================
   VERTICAL VIDEO SIZE BALANCE — 2026-08-02
   Keeps portrait videos uncropped while preventing
   them from visually overpowering landscape videos.
   ========================================= */
@media (min-width: 761px) {
  #folder-media-grid .pb-youtube-embed.is-vertical,
  #motion-project-grid .pb-youtube-embed.is-vertical,
  #machine-grid .pb-youtube-embed.is-vertical {
    width: min(46%, 250px) !important;
    max-width: 250px !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px) {
  #folder-media-grid .pb-youtube-embed.is-vertical,
  #motion-project-grid .pb-youtube-embed.is-vertical,
  #machine-grid .pb-youtube-embed.is-vertical {
    width: min(68%, 280px) !important;
    max-width: 280px !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 auto !important;
  }
}

/* =========================================
   PORTRAIT YOUTUBE CARD BALANCE — AUTHORITATIVE
   Shrinks the complete vertical card, not only the iframe.
   Horizontal video cards remain unchanged.
   ========================================= */
@media (min-width: 761px) {
  #motion-project-grid > .motion-folder-card.is-youtube-card.is-vertical-card,
  #folder-media-grid > .folder-media-card.is-youtube-card.is-vertical-card,
  #machine-grid > .machine-card.is-youtube-card.is-vertical-card {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    justify-self: center !important;
    align-self: start !important;
  }

  #motion-project-grid > .motion-folder-card.is-vertical-card .motion-folder-preview.is-vertical-preview,
  #folder-media-grid > .folder-media-card.is-vertical-card .folder-media-preview.is-vertical-preview,
  #machine-grid > .machine-card.is-vertical-card .manifest-machine-preview.is-vertical-preview {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #motion-project-grid > .motion-folder-card.is-vertical-card .pb-youtube-embed.is-vertical,
  #folder-media-grid > .folder-media-card.is-vertical-card .pb-youtube-embed.is-vertical,
  #machine-grid > .machine-card.is-vertical-card .pb-youtube-embed.is-vertical {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px) {
  #motion-project-grid > .motion-folder-card.is-youtube-card.is-vertical-card,
  #folder-media-grid > .folder-media-card.is-youtube-card.is-vertical-card,
  #machine-grid > .machine-card.is-youtube-card.is-vertical-card {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    justify-self: center !important;
  }

  #motion-project-grid > .motion-folder-card.is-vertical-card .pb-youtube-embed.is-vertical,
  #folder-media-grid > .folder-media-card.is-vertical-card .pb-youtube-embed.is-vertical,
  #machine-grid > .machine-card.is-vertical-card .pb-youtube-embed.is-vertical {
    width: min(58vw, 190px) !important;
    max-width: 190px !important;
    aspect-ratio: 9 / 16 !important;
    margin: 16px auto !important;
  }
}