/* DRAMVU · mobile vertical edition — designed for 390×844, scales to any tall viewport */
:root{
  --ink:#0a0b0d;--ink2:#101217;--paper:#ece7dd;--dim:#a9a49a;--gold:#c7a46a;--line:rgba(236,231,221,.16);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#050607}
body.m{
  color:var(--paper);font-family:var(--sans);
  max-width:560px;margin:0 auto;position:relative;
  -webkit-font-smoothing:antialiased;
  background:var(--ink);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* top bar */
.mbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:rgba(10,11,13,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.18em;color:var(--dim);
}
.mbar b{font-family:var(--serif);font-size:15px;letter-spacing:.24em;color:var(--paper);font-weight:600}
.mbar .r{display:flex;gap:14px;align-items:center}
.mbar a{color:var(--dim)}
.mbar a:active{color:var(--gold)}

/* sections: full-height vertical cards */
.mshow,.mhero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:52px 22px 44px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  scroll-snap-align:start;
}
html{scroll-snap-type:y proximity}

.mhero{background:
  radial-gradient(120% 60% at 80% 0%,rgba(199,164,106,.14),transparent 60%),
  radial-gradient(90% 50% at 0% 30%,rgba(46,111,106,.13),transparent 65%),
  linear-gradient(180deg,#0a0b0d,#050607)}
.mkick{font-size:10px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.mkick i{width:34px;height:1px;background:var(--gold);display:block}
.mhero h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(52px,17vw,86px);line-height:.94;letter-spacing:.04em;margin-top:24px;
}
.mhero h1 em{display:block;font-style:normal;font-size:.24em;letter-spacing:.3em;color:var(--gold);margin-top:8px}
.mhero .lede{color:#c8c3b8;font-size:14.5px;line-height:1.72;margin-top:20px;max-width:30ch}
.mhero .scroll{margin-top:26px;font-size:10px;letter-spacing:.22em;color:var(--dim)}
.mhero .scroll::after{content:"";display:block;width:1px;height:34px;background:var(--gold);opacity:.6;margin:12px 0 0 6px}

/* show card */
.mshow{isolation:isolate}
.mshow::before{content:"";position:absolute;inset:0;z-index:-1}
.mshow.a::before{display:none}
.mshow.b::before{display:none}
.mshow.c::before{display:none}
.mshow .ghostnum{
  position:absolute;right:10px;top:44px;font-family:var(--serif);font-size:clamp(96px,26vw,150px);
  line-height:.8;color:rgba(236,231,221,.07);z-index:-1;
}
.mshow .tag{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.mshow .tag .st{border:1px solid rgba(199,164,106,.42);color:var(--gold);padding:4px 8px;letter-spacing:.14em}
.mshow h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(44px,13.5vw,68px);line-height:1.02;letter-spacing:.02em;margin:auto 0 0;
}
.mshow .sub{font-size:10px;letter-spacing:.2em;color:rgba(236,231,221,.5);margin-top:12px;text-transform:uppercase}
.mshow .log{font-size:14px;line-height:1.7;color:#c8c3b8;margin-top:18px;max-width:32ch}
.mshow .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.go{
  margin-top:20px;display:flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 22px;border:1px solid rgba(199,164,106,.5);color:var(--gold);
  font-size:12px;letter-spacing:.16em;width:100%;
}
.go:active{background:rgba(199,164,106,.14)}
.mhero > div:first-child{margin:auto 0}
.mwork-head > div:first-child{margin:auto 0}
.mhero .go{margin-bottom:22px}

/* footer */
.mfoot{padding:40px 22px 56px;color:var(--dim);font-size:11px;line-height:1.9;letter-spacing:.04em}
.mfoot .cta{display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--gold);color:#1a1409;font-size:12px;letter-spacing:.14em;margin-bottom:24px}
.mfoot .cta:active{background:#d8b47a}
.mfoot a{u;color:var(--gold)}

/* work detail pages */
.mwork-head{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:26px 22px 40px;position:relative;overflow:hidden}
.mwork-head::before{content:"";position:absolute;inset:0;z-index:-1}
.mwork-head.a::before{background:radial-gradient(120% 70% at 70% 8%,rgba(46,111,106,.22),transparent 62%),linear-gradient(180deg,#0d1519,#050607)}
.mwork-head.b::before{background:radial-gradient(120% 70% at 70% 8%,rgba(140,70,50,.24),transparent 62%),linear-gradient(180deg,#150e0b,#050607)}
.mwork-head.c::before{background:radial-gradient(120% 70% at 70% 8%,rgba(58,74,110,.24),transparent 62%),linear-gradient(180deg,#0b0f18,#050607)}
.mback{font-size:11px;letter-spacing:.18em;color:var(--dim)}
.mwork-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,12vw,62px);line-height:1.02;letter-spacing:.02em}
.mwork-head .lede{font-size:14.5px;line-height:1.72;color:#c8c3b8;margin-top:18px;max-width:31ch}
.mwork-head .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:26px;font-size:12px}
.mwork-head .facts div{border-top:1px solid var(--line);padding-top:9px}
.mwork-head .facts dt{font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.mwork-head .facts dd{margin-top:3px;font-family:var(--serif);font-size:14px}

.meps{padding:34px 22px 20px}
.meps h2{font-family:var(--serif);font-size:26px;letter-spacing:.02em;font-weight:600;margin-bottom:6px}
.meps .hint{font-size:11px;color:var(--dim);letter-spacing:.04em;margin-bottom:18px}
.mep{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.mep .n{font-family:var(--serif);font-size:12px;color:var(--gold);letter-spacing:.1em;min-width:44px}
.mep h3{font-size:15px;font-weight:500;letter-spacing:.01em}
.mep p{font-size:12.5px;color:var(--dim);margin-top:5px;line-height:1.6}
.mep .d{font-size:11px;color:var(--dim);margin-left:auto}

@media (min-width:561px){
  body.m{box-shadow:0 0 0 1px var(--line)}
}

/* mid-frame guide line — keeps the vertical poster from reading as empty */
.mshow .rule{position:absolute;left:22px;right:22px;top:48%;height:1px;background:linear-gradient(90deg,rgba(236,231,221,.16),rgba(236,231,221,.04))}
.mshow .rule span{position:absolute;right:0;top:-16px;font-size:9px;letter-spacing:.24em;color:rgba(236,231,221,.34)}

/* show card v2: typographic poster plate + text block */
.mshow{padding:0;min-height:auto;display:block}
.mshow .tag{padding:20px 22px 14px}
.mshow .mplate{width:100%;aspect-ratio:3/4;background:#08090b}
.mshow .mplate img{width:100%;height:100%;object-fit:cover;display:block}
.mshow .mbody{padding:22px 22px 36px}
.mshow .mbody .log{margin-top:14px}
.mshow h2.sr,.mshow .sub.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mshow h2,.mshow .sub{display:none}