/* Ced&Dunn site v11 — shared chassis.
   Preserves the Long Take DNA: dark field, Antonio titling, Cormorant editorial,
   brass keylines. Adds the compositional primitives from §20 of the revision brief. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
body{background:var(--black);color:var(--bone);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--bone);text-decoration:none}
a:hover{color:var(--brass)}
h1,h2,h3,h4,h5{font-family:var(--font-display);text-transform:uppercase;font-weight:700;letter-spacing:0}
.mono{font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.15em}
/* service mark sits at the cap line of the compound word, never mid-height.
   vertical-align in em resolves against the mark's OWN size, so size and offset
   must be paired per context: proportional for display type, pinned at the
   12px floor (with a matching offset) for body and label type. */
.sm{font-size:.36em;vertical-align:1.24em;line-height:0;letter-spacing:0}
.prose .sm,.bd .reveal p .sm,.kicker .sm{font-size:12px;vertical-align:.62em}
.mono .sm,.foot .sm,.core .sm{font-size:12px;vertical-align:.55em}
.ci{white-space:nowrap}
.brass{color:var(--brass)}
.dim{color:rgba(242,236,224,.62)}

/* ---------- chrome ---------- */
#prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
#prog i{display:block;height:100%;width:0;background:var(--brass);transition:width .18s linear}
#nav{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:auto 1fr;align-items:center;padding:30px 44px;pointer-events:none;transition:opacity .7s}
#nav.hide{opacity:0}
#nav a{pointer-events:auto}
#logo{height:56px;filter:invert(1) brightness(2);transition:height .6s cubic-bezier(.16,1,.3,1)}
body.cover #logo{height:84px}
#nl{display:flex;justify-content:flex-end;gap:36px;transition:opacity .5s}
#nl a{position:relative;white-space:nowrap;word-spacing:-.16em}
#nl a.tight{word-spacing:-.42em}
#nl a.here{color:var(--brass)}
#nl .par{position:relative}
#nl .par .sub{position:absolute;top:26px;left:-16px;display:grid;gap:10px;padding:14px 16px;background:var(--black);border:1px solid var(--brass);opacity:0;pointer-events:none;transform:translateY(-5px);transition:.3s}
#nl .par:hover .sub{opacity:1;pointer-events:auto;transform:none}
body.collapse:not(.cover) #nl{opacity:0;pointer-events:none}
/* on the homepage the logo belongs to the cover only — past it the MENU mark carries the chrome */
body.collapse:not(.cover) #logo{opacity:0;pointer-events:none}
#logo{opacity:1;transition:height .6s cubic-bezier(.16,1,.3,1),opacity .6s}
#burger{position:fixed;top:34px;right:38px;z-index:60;display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:var(--bone);font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.15em;opacity:0;pointer-events:none;transition:opacity .5s}
body.collapse:not(.cover) #burger{opacity:1;pointer-events:auto}
#burger i{display:grid;gap:5px;width:26px}
#burger i b{display:block;height:1px;background:currentColor;transition:transform .4s,opacity .3s}
body.menu #burger i b:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu #burger i b:nth-child(2){opacity:0}
body.menu #burger i b:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#panel{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.95);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .5s}
body.menu #panel{opacity:1;pointer-events:auto}
body.menu #chapter,body.menu #prog{opacity:0}
#panel .pl2{display:grid;gap:22px;text-align:center}
#panel a{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(32px,5vw,72px);line-height:1;color:var(--bone);transition:color .3s}
#panel .sub2{display:grid;gap:12px}
#panel .sub2 a{font-size:clamp(17px,2vw,26px);font-weight:600;color:rgba(242,236,224,.72)}
#chapter{position:fixed;bottom:26px;right:38px;z-index:40;text-align:right;color:var(--bone);transition:opacity .5s}
#chapter:empty{display:none}
#mark{position:fixed;bottom:26px;left:38px;z-index:40;color:var(--bone);transition:opacity .5s}
body:not(.cover) #mark{opacity:0;pointer-events:none}
body.list #chapter,body.list #mark{opacity:0}

/* ---------- the continuous photographic field ---------- */
#stack{position:fixed;inset:0;z-index:0;background:var(--black)}
#stack .pl{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 1.5s cubic-bezier(.4,0,.2,1)}
#stack .pl.on{opacity:1}
#stack .pl img,#stack .pl video{width:100%;height:100%;object-fit:cover}
#stack .pl img.kb{transform-origin:52% 56%;animation:kb 20s cubic-bezier(.37,0,.63,1) infinite alternate}
@keyframes kb{0%{transform:scale(1.1) translate(2%,1.2%)}100%{transform:scale(1.3) translate(-2%,-1.2%)}}
@media (prefers-reduced-motion:reduce){#stack .pl img.kb{animation:none}}
#stack .pl image-slot{position:absolute;inset:0;width:100%;height:100%}
/* the closing "What do you desire?" plate carries the neon — lift it out of the veil */
#stack .pl[data-k="close"] img{filter:contrast(1.18) brightness(1.12) saturate(.92)}
#stack .pl image-slot:not([data-filled]){inset:auto auto 92px 44px;width:230px;height:96px}
#drift{position:fixed;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.52);transition:background 1.5s ease}
body.veil #drift{background:rgba(0,0,0,.72)}
body.open #drift{background:rgba(0,0,0,.42)}
body.cover #drift{background:rgba(0,0,0,.18)}
body.flash #drift{background:rgba(0,0,0,.94)}

/* ---------- beats ---------- */
.beat{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:132px 8vw 116px;text-align:center;pointer-events:none}
.beat a,.beat button,.beat .live,.beat [data-plate],.beat [data-hit]{pointer-events:auto}
/* interactive blocks inside a beat need to receive the pointer back */
.beat .slits,.beat .rail,.beat .bands,.beat .discs,.beat .rows,.beat .strip,.beat .sigs,.beat .grid,.beat .book,.beat .side,.beat .doors,.beat #world,.beat #rig{pointer-events:auto}
.beat.tall{min-height:auto;padding:150px 6vw 140px}
.beat.floor::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.54))}
.beat.floor-deep::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.62) 0%,rgba(0,0,0,.8) 60%,rgba(0,0,0,.9) 100%)}
.beat.floor-low::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.1) 0%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.62) 100%)}
.beat.solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--black)}

/* rise */
.rise{opacity:0;transform:translateY(26px) scale(1.02);transition:opacity 1.4s cubic-bezier(.2,.8,.2,1),transform 1.5s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
.rise:nth-child(2){transition-delay:.14s}.rise:nth-child(3){transition-delay:.28s}.rise:nth-child(4){transition-delay:.42s}.rise:nth-child(5){transition-delay:.56s}

/* ---------- type scale ---------- */
.eyebrow{color:var(--brass);margin-bottom:34px}
.statement{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(34px,5vw,96px);line-height:1.02;max-width:24ch;text-wrap:balance}
.statement.huge{font-size:clamp(44px,8.4vw,168px);line-height:.92;max-width:16ch}
.statement.mid{font-size:clamp(30px,3.8vw,68px);max-width:28ch}
.prose{font-size:26px;line-height:1.54;max-width:66ch;text-wrap:pretty}
.prose.lg{font-size:30px;line-height:1.5}
.prose p+p{margin-top:1.05em}
.rule{height:1px;background:rgba(176,137,74,.42);width:100%}
.foot{color:rgba(242,236,224,.6);font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.14em}

/* ---------- actions ---------- */
.acts{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;margin-top:44px}
.cta{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;background:var(--bone);color:var(--black);border:1px solid var(--bone);font-family:var(--font-display);text-transform:uppercase;font-weight:600;letter-spacing:.16em;font-size:15px;transition:.5s}
.cta:hover{background:var(--brass);color:var(--bone);border-color:var(--brass);gap:26px}
.cta.ghost{background:none;color:var(--bone);border-color:rgba(242,236,224,.42)}
.cta.ghost:hover{background:none;border-color:var(--brass);color:var(--brass)}
.go{display:inline-block;color:var(--brass);font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.16em;transition:letter-spacing .6s}
a:hover .go,.go:hover{letter-spacing:.3em}

/* ---------- §20 compositional primitives ---------- */
/* SPLIT FIELD — asymmetric image/black */
.split{position:relative;z-index:2;min-height:100vh;display:grid;align-items:center;background:var(--black)}
.split.f3565{grid-template-columns:35fr 65fr}
.split.f4060{grid-template-columns:40fr 60fr}
.split.f6535{grid-template-columns:65fr 35fr}
.split .fig{position:relative;height:100%;min-height:100vh;overflow:hidden;background:#050505}
.split .fig img,.split .fig image-slot{width:100%;height:100%;object-fit:cover}
.split .txt{padding:9vh 6vw;text-align:left;max-width:none}
.split .txt .statement,.split .txt .prose{max-width:26ch;margin-inline:0}
.split .txt .prose{max-width:52ch}
/* the image edge dissolves rather than cutting */
.split .fig.melt::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.96) 100%)}
.split.rev .fig.melt::after{background:linear-gradient(270deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.96) 100%)}

/* IMAGE + NEGATIVE SPACE — small plate inside large dark */
.quiet{position:relative;z-index:2;min-height:100vh;background:var(--black);display:grid;place-items:center;padding:16vh 8vw}
.quiet .plate{width:min(420px,32vw);aspect-ratio:3/4;overflow:hidden;background:#0a0a0a}
.quiet .plate img,.quiet .plate image-slot{width:100%;height:100%;object-fit:cover}

/* INTERRUPTED — image begins or ends outside the frame */
.bleed{position:relative;z-index:2;background:var(--black);padding:18vh 0;overflow:hidden}
.bleed .strip{position:relative;height:64vh;width:82vw;overflow:hidden}
.bleed .strip.left{margin-left:-8vw}
.bleed .strip.right{margin-left:auto;margin-right:-8vw}
.bleed .strip img,.bleed .strip image-slot{width:100%;height:100%;object-fit:cover}
.bleed .over{position:absolute;z-index:3;text-align:left;pointer-events:none}

/* CROPPED PRODUCT VISUAL — enormous object, context later */
.crop{position:relative;z-index:2;background:var(--black);min-height:100vh;display:grid;align-content:center;gap:0;padding-bottom:9vh}
.crop .obj{position:relative;width:100%;height:74vh;overflow:hidden;background:#070707}
.crop .obj img,.crop .obj image-slot{width:100%;height:100%;object-fit:cover}
.crop .obj::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.92) 100%)}
.crop .cap{position:relative;z-index:3;margin-top:-9vh;padding:0 6vw;text-align:left}

/* FULL BLEED with type over photography */
.field{position:relative;z-index:2;min-height:100vh;overflow:hidden;display:grid;align-items:end}
.field>img,.field>video,.field>image-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.field::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.92) 0%,rgba(0,0,0,.34) 16%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.86) 100%)}
.field .lay{padding:0 6vw 12vh;text-align:left}
/* ALIVE — the plate has to look like something is happening in it.
   Transform/opacity only; no blend modes on animated layers. */
.field.alive>img.kb{animation:kbPush 26s cubic-bezier(.4,0,.6,1) infinite alternate}
@keyframes kbPush{0%{transform:scale(1.05) translate(.6%,.4%)}100%{transform:scale(1.24) translate(-.6%,-.4%)}}
.field>.surge{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.field>.surge img{width:100%;height:100%;object-fit:cover;transform-origin:52% 48%;-webkit-mask-image:radial-gradient(42% 46% at 52% 48%,#000 0%,rgba(0,0,0,.55) 44%,transparent 76%);mask-image:radial-gradient(42% 46% at 52% 48%,#000 0%,rgba(0,0,0,.55) 44%,transparent 76%);animation:surge 9.5s ease-in-out infinite}
@keyframes surge{0%,100%{opacity:0;transform:scale(1.02)}46%{opacity:.9;transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){.field.alive>img.kb,.field>.surge img{animation:none}.field>.surge{display:none}}
/* a high-key plate needs its own ground under the type — the frame stays bright at the edges.
   The top stop also dissolves the plate out of the black above it, so a mid-page field has no seam. */
.field.bright::after{background:linear-gradient(rgba(0,0,0,.98) 0%,rgba(0,0,0,.62) 13%,rgba(0,0,0,.3) 32%,rgba(0,0,0,.46) 68%,rgba(0,0,0,.9) 100%)}
.field.bright .lay{position:relative;z-index:0}
.field.bright .lay::before{content:"";position:absolute;inset:-9vh -7vw -7vh;z-index:-1;pointer-events:none;background:radial-gradient(64% 68% at 50% 52%,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 46%,rgba(0,0,0,0) 100%)}
.field.bright.left .lay::before{inset:-7vh -14vw -7vh -9vw;background:linear-gradient(100deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.2) 74%,rgba(0,0,0,0) 100%)}

/* reserved asset — an honest placeholder Ced can drop a real plate into */
.reserve{position:relative;border:1px solid rgba(176,137,74,.45);background:rgba(255,255,255,.015);display:grid;place-items:center;text-align:center;padding:34px;min-height:220px}
.reserve .tag{color:var(--brass);font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.14em}
.reserve .what{margin-top:12px;font-size:20px;line-height:1.45;color:rgba(242,236,224,.72);max-width:44ch}

/* footer */
#fin{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:30px;padding:0 8vw 70px;background:var(--black)}