.cms-art { background:radial-gradient(circle at 52% 38%,#183a33 0,#101916 33%,#0d0e0e 72%); }
.cms-art .cms-grid { position:absolute; inset:12% 9% 18%; display:grid; grid-template-columns:repeat(4,1fr); gap:3%; align-items:end; }
.cms-art .cms-layer { position:relative; min-width:0; height:72%; padding:7% 8%; border:1px solid rgba(255,255,255,.13); background:rgba(11,14,13,.76); backdrop-filter:blur(10px); display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 18px 55px rgba(0,0,0,.25); }
.cms-art .cms-layer::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:#61daba; }
.cms-art .cms-layer:nth-child(2){height:84%}.cms-art .cms-layer:nth-child(2)::before{background:#89d9ff}.cms-art .cms-layer:nth-child(3){height:94%}.cms-art .cms-layer:nth-child(3)::before{background:#ffc44d}.cms-art .cms-layer:nth-child(4){height:64%}.cms-art .cms-layer:nth-child(4)::before{background:#ff7952}
.cms-art .cms-layer small { position:absolute; top:8%; left:8%; color:rgba(255,255,255,.34); font:.46rem monospace; letter-spacing:.1em; }
.cms-art .cms-layer strong { font-family:var(--display); font-size:clamp(1.3rem,2.8vw,3rem); font-weight:400; letter-spacing:-.04em; }
.cms-art .cms-layer span { margin-top:.5rem; color:rgba(255,255,255,.42); font:.48rem monospace; text-transform:uppercase; letter-spacing:.08em; }
.cms-art .cms-flow { position:absolute; left:10%; right:10%; bottom:11%; display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.38); font:.48rem monospace; text-transform:uppercase; letter-spacing:.12em; }
.cms-art .cms-flow::before,.cms-art .cms-flow::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(97,218,186,.42),transparent); }

/* Observatory atmosphere: fixed reference geometry around real project work. */
body:not(.case-study-page) {
  --obs-section-gap:clamp(4.25rem,5vw,5.5rem);
}
body:not(.case-study-page) .hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle at 9% 18%,rgba(255,255,255,.72) 0 1px,transparent 1.4px),
    radial-gradient(circle at 23% 62%,rgba(255,255,255,.35) 0 1px,transparent 1.4px),
    radial-gradient(circle at 44% 13%,rgba(255,196,77,.52) 0 1px,transparent 1.5px),
    radial-gradient(circle at 67% 72%,rgba(155,173,255,.43) 0 1px,transparent 1.5px),
    radial-gradient(circle at 86% 27%,rgba(255,255,255,.45) 0 1px,transparent 1.4px),
    linear-gradient(118deg,transparent 0 44%,rgba(255,255,255,.035) 44.1% 44.2%,transparent 44.3% 100%);
  background-size:211px 193px,277px 251px,341px 307px,403px 379px,509px 463px,100% 100%;
  mask-image:linear-gradient(to bottom,black 0 78%,transparent 100%);
}
body:not(.case-study-page) .hero-copy,
body:not(.case-study-page) .hero-visual,
body:not(.case-study-page) .hero-index { z-index:2; }
body:not(.case-study-page) .hero-visual::before,
body:not(.case-study-page) .hero-visual::after {
  content:"";
  position:absolute;
  left:55%;
  top:43%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
body:not(.case-study-page) .hero-visual::before {
  width:112%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.055);
  border-radius:50%;
  box-shadow:0 0 0 4vw rgba(255,255,255,.008),0 0 0 9vw rgba(255,255,255,.006);
}
body:not(.case-study-page) .hero-visual::after {
  width:118%;
  height:118%;
  background:
    linear-gradient(90deg,transparent 49.94%,rgba(255,255,255,.07) 50%,transparent 50.06%),
    linear-gradient(0deg,transparent 49.94%,rgba(255,255,255,.07) 50%,transparent 50.06%);
  opacity:.55;
}

/*
 * Observatory field geometry
 * 1/32  = outer module
 * 2/32  = coordinate grid
 * 3/32  = reference star diameter
 * 4/32  = radial ring cadence
 * 10/32 = project plate width
 * 1+1/32 = shared focus magnification
 *
 * The field bleeds exactly one global page pad beyond the 1480px content grid
 * when the viewport allows it; below that threshold it aligns exactly to the
 * section heading. The same ratios therefore survive every desktop scale.
 */
#work {
  --obs-module:3.125%;
  --obs-grid:6.25%;
  --obs-ring:12.5%;
  --obs-star:9.375%;
  --obs-plate:31.25%;
  --obs-focus-scale:1.03125;
}
#work.section-shell { width:100%; max-width:none; padding-inline:var(--pad); overflow:hidden; }
#work .section-heading { width:min(100%,var(--max)); margin-inline:auto; }

@media (min-width:1050px) {
  #work { position:relative; padding-bottom:clamp(2rem,2.5vw,2.75rem); }
  #work + .evidence { padding-top:var(--obs-section-gap); }

  #work .project-grid {
    position:relative;
    width:min(100%,calc(var(--max) + (2 * var(--pad))));
    aspect-ratio:1;
    margin:0 auto;
    display:block;
    overflow:visible;
    isolation:isolate;
    container-type:inline-size;
    border-block:1px solid var(--line);
    background:
      radial-gradient(circle at 50% 50%,transparent 0 12.44%,rgba(255,255,255,.075) 12.48% 12.54%,transparent 12.58%),
      radial-gradient(circle at 50% 50%,transparent 0 24.94%,rgba(255,255,255,.06) 24.98% 25.04%,transparent 25.08%),
      radial-gradient(circle at 50% 50%,transparent 0 37.44%,rgba(255,255,255,.05) 37.48% 37.54%,transparent 37.58%),
      radial-gradient(circle at 50% 50%,transparent 0 49.94%,rgba(255,255,255,.04) 49.98% 50.04%,transparent 50.08%),
      linear-gradient(45deg,transparent 49.96%,rgba(255,255,255,.035) 49.98% 50.02%,transparent 50.04%),
      linear-gradient(-45deg,transparent 49.96%,rgba(255,255,255,.035) 49.98% 50.02%,transparent 50.04%),
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
      radial-gradient(circle at 50% 50%,rgba(255,92,33,.045),transparent 31.25%);
    background-size:auto,auto,auto,auto,auto,auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid),auto;
  }

  #work .project-grid::before {
    content:"";
    position:absolute;
    inset:var(--obs-module);
    z-index:0;
    border:1px solid rgba(255,255,255,.035);
    pointer-events:none;
  }

  #work .project-grid::after {
    content:"PERIHELION\A METHOD";
    white-space:pre;
    position:absolute;
    z-index:1;
    left:50%;
    top:50%;
    width:var(--obs-star);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    border:1px solid rgba(255,196,77,.38);
    border-radius:50%;
    background:radial-gradient(circle at 36% 31%,#fff2b7 0 3%,#ffc44d 9%,#ff7a29 42%,#d84418 68%,#44170e 100%);
    box-shadow:0 0 50px rgba(255,92,33,.3),0 0 140px rgba(255,92,33,.13),0 0 0 18px rgba(255,196,77,.018);
    color:rgba(30,13,8,.78);
    text-align:center;
    font:750 clamp(.45rem,.48vw,.58rem)/1.45 var(--sans);
    letter-spacing:.12em;
    pointer-events:none;
    transition:background .35s ease,box-shadow .35s ease,color .35s ease,transform .35s ease;
  }

  #work .project {
    --plate-rotate:0deg;
    position:absolute;
    z-index:3;
    width:var(--obs-plate);
    margin:0;
    padding-top:.55rem;
    border-top-color:rgba(255,255,255,.19);
    transform:rotate(var(--plate-rotate));
    transform-origin:center;
    transition:transform .5s cubic-bezier(.2,.75,.2,1),opacity .35s ease,filter .35s ease;
  }

  #work .project::after {
    position:absolute;
    z-index:8;
    top:.82rem;
    left:.82rem;
    padding:.35rem .44rem;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(8,8,8,.55);
    backdrop-filter:blur(8px);
    color:rgba(255,255,255,.48);
    font:.48rem/1 monospace;
    letter-spacing:.08em;
    pointer-events:none;
  }

  #work .project:nth-child(1) { left:var(--obs-module); top:var(--obs-module); --plate-rotate:-.75deg; }
  #work .project:nth-child(1)::after { content:"01 · SYMBOLIC TOOL"; }
  #work .project:nth-child(2) { right:var(--obs-module); top:var(--obs-module); --plate-rotate:.75deg; }
  #work .project:nth-child(2)::after { content:"02 · EDITORIAL SYSTEM"; }
  #work .project:nth-child(3) { left:var(--obs-module); bottom:var(--obs-module); --plate-rotate:.75deg; }
  #work .project:nth-child(3)::after { content:"03 · GOVERNANCE SYSTEM"; }
  #work .project:nth-child(4) { right:var(--obs-module); bottom:var(--obs-module); --plate-rotate:-.75deg; }
  #work .project:nth-child(4)::after { content:"04 · PUBLISHING SYSTEM"; }

  #work .project-featured { grid-column:auto; }
  #work .project-art,
  #work .project:not(.project-featured) .project-art {
    min-height:0;
    height:auto;
    aspect-ratio:4 / 3;
    border-color:rgba(255,255,255,.1);
    box-shadow:0 24px 80px rgba(0,0,0,.25);
  }

  #work .project-meta {
    grid-template-columns:5fr 7fr;
    gap:1rem;
    padding:1rem 2rem 1.25rem 0;
    background:linear-gradient(90deg,rgba(10,10,10,.22),transparent 70%);
  }
  #work .project-meta h3 { font-size:clamp(1.45rem,2vw,2.45rem); }
  #work .project-meta > p { font-size:clamp(.72rem,.72vw,.82rem); line-height:1.45; }
  #work .project-meta ul { font-size:.5rem; gap:.35rem .7rem; }
  #work .project-arrow { top:1rem; }

  #work .project:hover,
  #work .project:focus-within {
    z-index:7;
    transform:rotate(0) scale(var(--obs-focus-scale));
  }
  #work .project-grid:has(.project:hover) .project:not(:hover),
  #work .project-grid:has(.project:focus-within) .project:not(:focus-within) {
    opacity:.58;
    filter:saturate(.68);
  }
  #work .project-link:hover .project-art,
  #work .project-link:focus-visible .project-art {
    box-shadow:0 34px 100px rgba(0,0,0,.42),0 0 0 1px rgba(255,196,77,.16);
  }

  /* Selection scales the project and its central readout by the same 1+1/32. */
  #work .project-grid:has(.project:nth-child(1):hover)::after,
  #work .project-grid:has(.project:nth-child(1):focus-within)::after {
    content:"01\A SIGILIZE";
    background:radial-gradient(circle at 36% 31%,#fff0ad,#ffad39 24%,#b94b21 68%,#33120c);
    box-shadow:0 0 54px rgba(255,92,33,.34),0 0 150px rgba(255,92,33,.16);
    transform:translate(-50%,-50%) scale(var(--obs-focus-scale));
  }
  #work .project-grid:has(.project:nth-child(2):hover)::after,
  #work .project-grid:has(.project:nth-child(2):focus-within)::after {
    content:"02\A READER";
    background:radial-gradient(circle at 36% 31%,#f4edff,#b7a5ff 28%,#6c54d4 65%,#20183c);
    box-shadow:0 0 54px rgba(134,108,247,.35),0 0 150px rgba(134,108,247,.15);
    color:#211b34;
    transform:translate(-50%,-50%) scale(var(--obs-focus-scale));
  }
  #work .project-grid:has(.project:nth-child(3):hover)::after,
  #work .project-grid:has(.project:nth-child(3):focus-within)::after {
    content:"03\A LATTICE";
    background:radial-gradient(circle at 36% 31%,#f4f6ff,#9badff 30%,#5368c7 66%,#151b35);
    box-shadow:0 0 54px rgba(155,173,255,.34),0 0 150px rgba(155,173,255,.14);
    color:#17203d;
    transform:translate(-50%,-50%) scale(var(--obs-focus-scale));
  }
  #work .project-grid:has(.project:nth-child(4):hover)::after,
  #work .project-grid:has(.project:nth-child(4):focus-within)::after {
    content:"04\A AI NATIVE CMS";
    background:radial-gradient(circle at 36% 31%,#e8fff7,#61daba 30%,#247e69 67%,#0b2721);
    box-shadow:0 0 54px rgba(97,218,186,.32),0 0 150px rgba(97,218,186,.14);
    color:#0b3027;
    transform:translate(-50%,-50%) scale(var(--obs-focus-scale));
  }

  #work .sigil-square.square-two { animation:obs-sigil 8s ease-in-out infinite; }
  #work .reader-page.page-a { animation:obs-page-a 7.8s ease-in-out infinite; }
  #work .reader-page.page-b { animation:obs-page-b 9.2s ease-in-out infinite; }
  #work .reader-thread { animation:obs-thread 4.6s ease-in-out infinite; transform-origin:left center; }
  #work .lattice-node { animation:obs-node 5.4s ease-in-out infinite; }
  #work .lattice-node:nth-of-type(2){animation-delay:-1.4s}#work .lattice-node:nth-of-type(3){animation-delay:-2.7s}#work .lattice-node:nth-of-type(4){animation-delay:-3.6s}#work .lattice-node:nth-of-type(5){animation-delay:-4.4s}
  #work .cms-layer { animation:obs-cms 6.8s ease-in-out infinite; }
  #work .cms-layer:nth-child(2){animation-delay:-1.3s}#work .cms-layer:nth-child(3){animation-delay:-2.8s}#work .cms-layer:nth-child(4){animation-delay:-4.1s}
}

@keyframes obs-sigil { 0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(48deg) scale(1.035)} }
@keyframes obs-page-a { 0%,100%{transform:rotate(-6deg) translate3d(0,0,0)}50%{transform:rotate(-4.7deg) translate3d(4px,-7px,0)} }
@keyframes obs-page-b { 0%,100%{transform:rotate(7deg) translate3d(0,0,0)}50%{transform:rotate(8.4deg) translate3d(-5px,6px,0)} }
@keyframes obs-thread { 0%,100%{opacity:.7;filter:brightness(1)}50%{opacity:1;filter:brightness(1.35)} }
@keyframes obs-node { 0%,100%{box-shadow:0 0 0 8px rgba(155,173,255,.035)}50%{box-shadow:0 0 0 13px rgba(155,173,255,.025),0 0 26px rgba(155,173,255,.16)} }
@keyframes obs-cms { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }

/* Case-study entry closes like an observatory aperture. */
.page-transition { transform:none!important; clip-path:circle(0 at 50% 50%); background:radial-gradient(circle at 50% 50%,#20100b 0 4%,#0b0b0c 28%,#060607 72%),#080808; transition:clip-path .4s cubic-bezier(.72,0,.22,1)!important; }
.page-transition::before { content:"PERIHELION / NEAREST APPROACH"; color:rgba(255,255,255,.42); font-size:.56rem; letter-spacing:.22em; }
body.leaving .page-transition { transform:none!important; clip-path:circle(150vmax at 50% 50%); }

/* Atlas mode uses the exact same geometry with ink-and-paper line weights. */
html[data-theme="light"] #work .project-grid {
  background:
    radial-gradient(circle at 50% 50%,transparent 0 12.44%,rgba(26,54,68,.14) 12.48% 12.54%,transparent 12.58%),
    radial-gradient(circle at 50% 50%,transparent 0 24.94%,rgba(26,54,68,.115) 24.98% 25.04%,transparent 25.08%),
    radial-gradient(circle at 50% 50%,transparent 0 37.44%,rgba(26,54,68,.095) 37.48% 37.54%,transparent 37.58%),
    radial-gradient(circle at 50% 50%,transparent 0 49.94%,rgba(26,54,68,.075) 49.98% 50.04%,transparent 50.08%),
    linear-gradient(45deg,transparent 49.96%,rgba(26,54,68,.055) 49.98% 50.02%,transparent 50.04%),
    linear-gradient(-45deg,transparent 49.96%,rgba(26,54,68,.055) 49.98% 50.02%,transparent 50.04%),
    linear-gradient(rgba(26,54,68,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,54,68,.055) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(180,77,47,.055),transparent 31.25%);
  background-size:auto,auto,auto,auto,auto,auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid),auto;
}
html[data-theme="light"] #work .project-grid::before { border-color:rgba(26,54,68,.075); }
html[data-theme="light"] #work .project-grid::after { border-color:rgba(180,77,47,.4); background:radial-gradient(circle at 36% 31%,#fff3c7 0 4%,#dfb759 12%,#bd663d 48%,#9d432f 72%,#642b25 100%); box-shadow:0 0 45px rgba(180,77,47,.2),0 0 120px rgba(180,77,47,.08),0 0 0 18px rgba(26,54,68,.018); color:#f7f1e4; }
html[data-theme="light"] #work .project::after { border-color:rgba(26,54,68,.14); background:rgba(239,233,219,.78); color:rgba(26,54,68,.62); }
html[data-theme="light"] #work .project-meta { background:linear-gradient(90deg,rgba(233,226,211,.52),transparent 72%); }
html[data-theme="light"] .page-transition { background:radial-gradient(circle at 50% 50%,#b85a38 0 5%,#d8c9b3 31%,#e9e2d3 74%),#e9e2d3; }
html[data-theme="light"] .page-transition::before { color:rgba(26,54,68,.55); }

@media (max-width:1049px) {
  #work .project::after { display:none; }
}

/* At single-column scale one boundary separates adjacent projects; never two. */
@media (max-width:900px) {
  #work .project + .project { border-top:0; padding-top:clamp(1.5rem,5vw,2rem); }
  #work .project-meta { padding-bottom:clamp(1.8rem,6vw,2.4rem); }
}

@media (max-width:620px) {
  .cms-art .cms-grid { inset:10% 7% 20%; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .cms-art .cms-layer,.cms-art .cms-layer:nth-child(2),.cms-art .cms-layer:nth-child(3),.cms-art .cms-layer:nth-child(4) { height:100%; }
  .cms-art .cms-layer strong { font-size:1.6rem; }
  .cms-art .cms-flow { bottom:9%; }
  body:not(.case-study-page) .hero::after { opacity:.2; }
}

@media (prefers-reduced-motion:reduce) {
  #work .sigil-square.square-two,
  #work .reader-page,
  #work .reader-thread,
  #work .lattice-node,
  #work .cms-layer { animation:none!important; }
  .page-transition { transition-duration:.01ms!important; }
}