/* Ced&Dunn site v11 — mobile. Loaded last on every page.
   Not a scaled-down desktop: the chrome collapses, the field stops parallaxing,
   multi-column composition becomes vertical sequence, and every hit target
   clears 44px. Type stays at the locked floors — nothing tracked below 13px. */

@media (max-width:820px){

/* ---------- chrome ---------- */
#nav{padding:18px 20px}
#logo{height:40px}
body.cover #logo{height:52px}
#nl{display:none}
#burger{opacity:1;pointer-events:auto;top:20px;right:18px;min-height:44px;padding:0 4px}
body.collapse:not(.cover) #logo{opacity:1;pointer-events:auto}
#panel .pl2{gap:18px}
#panel a{font-size:clamp(30px,9vw,46px);min-height:48px;display:flex;align-items:center;justify-content:center}
#panel .sub2{gap:8px}
#panel .sub2 a{font-size:19px;min-height:44px}
#chapter{right:18px;bottom:16px;max-width:52vw}
#mark{left:18px;bottom:16px}
#fin{gap:16px 22px;padding:0 6vw 54px}
#fin a{min-height:44px;display:inline-flex;align-items:center}

/* the fixed field costs too much on a phone — hold the plate still */
#stack .pl img.kb{animation:none;transform:scale(1.06)}
.field.alive>img.kb{animation:none}
.field>.surge{display:none}

/* ---------- beats + type ---------- */
.beat{padding:104px 6vw 92px}
.beat.tall{padding:104px 5vw 92px}
.eyebrow{margin-bottom:22px}
.statement{font-size:clamp(30px,8.6vw,48px);line-height:1.04;max-width:none}
.statement.huge{font-size:clamp(36px,11.4vw,62px);line-height:.96;max-width:none}
.statement.mid{font-size:clamp(27px,7.4vw,42px);max-width:none}
.prose{font-size:20px;line-height:1.5;max-width:none}
.prose.lg{font-size:22px;line-height:1.48}
.acts{margin-top:32px;gap:14px}
.cta{padding:16px 24px;font-size:14px;letter-spacing:.13em;min-height:52px}

/* ---------- compositional primitives ---------- */
.split,.split.f3565,.split.f4060,.split.f6535{grid-template-columns:minmax(0,1fr);min-height:0}
.split .fig{min-height:56vh;height:auto}
.split .fig.melt::after,.split.rev .fig.melt::after{background:linear-gradient(rgba(0,0,0,0) 58%,rgba(0,0,0,.94) 100%)}
.split .txt{padding:8vh 6vw}
.split .txt .statement,.split .txt .prose{max-width:none}
.quiet{padding:12vh 6vw;min-height:0}
.quiet .plate{width:min(340px,74vw)}
.bleed{padding:12vh 0}
.bleed .strip{height:44vh;width:94vw}
.bleed .strip.left{margin-left:-3vw}
.bleed .strip.right{margin-right:-3vw}
.bleed .over{position:static;padding:26px 6vw 0}
.crop{min-height:0;padding-bottom:7vh}
.crop .obj{height:56vh}
.crop .cap{padding:0 6vw}
.field{min-height:88vh}
.field .lay{padding:0 6vw 10vh}
.reserve{padding:24px;min-height:170px}
.reserve .what{font-size:18px}

/* ---------- HOME ---------- */
#b3 .doors{grid-template-columns:minmax(0,1fr);gap:0}
#b3 .seam{height:1px;width:100%;margin:6vh 0}
#b3 .door{padding:0}
#b3 .door h3{font-size:clamp(48px,15vw,72px)}
#b3 .lede{margin-bottom:5vh}
#b4 .cuemark{width:min(180px,52vw);margin-bottom:26px}
#b5 .duo{grid-template-columns:minmax(0,1fr);gap:6vh}
#b5 .plate{max-width:min(320px,72vw);margin-inline:auto}
#b6 .cap{grid-template-columns:minmax(0,1fr);gap:5vh}
#b6 h2{font-size:clamp(40px,11.6vw,62px)}
#b6 .tl{font-size:21px;max-width:none}
#b6 .side .prose{font-size:20px}
#b6 .obj{height:58vh}
/* six slats do not survive a phone — three columns, two rows */
#b7 .slits{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
#b7 .mid{padding:0 6vw}
#b7 .mid::before{inset:-13vh -7vw}
#b7 .kicker{font-size:clamp(17px,5vw,23px);margin-top:22px}
#b8 .rts{gap:20px;margin-top:36px}
#b8 .rts a.big{font-size:clamp(20px,6.4vw,27px);min-height:44px;display:inline-flex;align-items:center}
.ocl{--w:min(340px,80vw)}

/* ---------- STAGECRAFT ---------- */
#rig .cols{grid-template-columns:minmax(0,1fr);gap:26px}
#rig .col{padding:0;text-align:left;border-top:1px solid rgba(176,137,74,.3);padding-top:20px}
#rig .col .stem{display:none}
#spine{display:none}
.disc{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 0}
.disc .n{color:var(--brass)}

/* ---------- WORK ---------- */
#w1 .statement{font-size:clamp(52px,17vw,86px)}
#w1 .prose{max-width:none}
#w2 .cap{grid-template-columns:minmax(0,1fr);gap:5vh}
#w2 h2{font-size:clamp(38px,11.4vw,60px)}
.wrow{grid-template-columns:minmax(0,1fr);gap:10px;padding:24px 0}

/* ---------- ON CUE ---------- */
#o1 .slits{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
#o1 .lay::before{inset:-11vh -7vw}
#o1 .edline{gap:8px 14px;flex-wrap:wrap;justify-content:center}
#o4 .rail{grid-template-columns:repeat(2,1fr);height:auto;grid-auto-rows:30vh}
#o4 .v b{font-size:15px;bottom:18px}
}

/* very narrow */
@media (max-width:420px){
.beat{padding:92px 5vw 80px}
#b7 .slits,#o1 .slits{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
#o4 .rail{grid-template-columns:minmax(0,1fr);grid-auto-rows:26vh}
.prose{font-size:19px}
}