@font-face{font-family:"Archivo Black";font-weight:400;font-display:swap;src:url("/midnight-guest/assets/ArchivoBlack-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:400;font-display:swap;src:url("/midnight-guest/assets/IBMPlexSansCondensed-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:600;font-display:swap;src:url("/midnight-guest/assets/IBMPlexSansCondensed-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-display:swap;src:url("/midnight-guest/assets/IBMPlexSansCondensed-700.woff2") format("woff2")}

:root{
  --black:#0b0d12;
  --surface:#11151c;
  --surface-2:#171c25;
  --paper:#e8e5dc;
  --gold:#d2aa63;
  --brand-navy:#10182d;
  --lichen:#b6c66c;
  --clay:#b9634f;
  --indigo:#182343;
  --indigo-2:#10182d;
  --muted:#aeb2b9;
  --line:rgba(232,229,220,.18);
  --pad:clamp(1.15rem,3.6vw,4.25rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--black);color:var(--paper);font-family:"IBM Plex Sans Condensed",Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button{font:inherit}

.skip{position:fixed;z-index:100;top:.5rem;left:.5rem;padding:.75rem;background:var(--lichen);color:var(--black);transform:translateY(-140%)}
.skip:focus{transform:none}

.topbar{position:absolute;z-index:20;top:0;left:0;right:0;height:5rem;padding:0 var(--pad);display:grid;grid-template-columns:auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:rgba(11,13,18,.72)}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;font-family:"Archivo Black";font-size:1.9rem;line-height:1;letter-spacing:-.035em}
.topbar .wordmark{font-size:clamp(2rem,2.25vw,2.35rem)}
.brand-name{position:relative;display:inline-block;color:var(--paper);isolation:isolate}
.brand-name::after{content:attr(data-text);position:absolute;inset:0;z-index:1;color:transparent;background:url('/assets/brand/seiruna-celestial-mark.webp?v=20261104-seo') center/cover no-repeat;-webkit-background-clip:text;background-clip:text;pointer-events:none}
.media-badge{display:inline-grid;width:2.15rem;aspect-ratio:1;place-items:center;background:var(--gold);color:var(--brand-navy);font:700 .47rem "IBM Plex Sans Condensed";letter-spacing:.11em;vertical-align:middle}
.wordmark:focus-visible{outline:2px solid var(--gold);outline-offset:.35rem}
.topbar nav{display:flex;gap:clamp(1rem,3vw,3rem);justify-content:center;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.topbar nav a:hover{color:var(--lichen)}
.menu{display:none}

.campaign{position:relative;min-height:100svh;overflow:hidden;padding-top:5rem;background:var(--black)}
.campaign-copy{position:relative;z-index:5;width:46%;padding:clamp(4rem,6vh,5.5rem) 0 5rem var(--pad)}
.edition,.media header span,.author-copy>span,.author aside>span,.finale span{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.campaign h1{max-width:10ch;margin:1rem 0 1.2rem;font:400 clamp(3.8rem,6vw,6rem)/.82 "Archivo Black";letter-spacing:-.035em;text-transform:uppercase}
.campaign h1 em{color:var(--lichen);font-style:normal}
.campaign-copy>p{font-size:clamp(1rem,1.4vw,1.22rem);font-weight:600;line-height:1.45;text-transform:uppercase}
.campaign-copy>a{display:flex;width:max-content;min-height:44px;gap:3rem;align-items:center;margin-top:1.5rem;padding:1rem 1.1rem;background:var(--clay);color:var(--black);font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - .55rem) 100%,0 100%)}

.image-blades{position:absolute;inset:5rem 0 0 43%;display:flex;gap:.35rem;padding-right:.45rem}
.blade{position:relative;min-width:0;flex:1;overflow:hidden;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);transition:flex .55s cubic-bezier(.16,1,.3,1)}
.blade:hover,.blade:focus-visible{flex:1.9}
.blade:focus-visible{outline:3px solid var(--lichen);outline-offset:-4px}
.blade img{height:100%;object-fit:cover;filter:saturate(.82) brightness(.82);transition:filter .4s ease}
.blade:hover img,.blade:focus-visible img{filter:saturate(.95) brightness(.9)}
.blade-a img{object-position:center}
.blade-b img{object-position:center 20%}
.blade-c img,.blade-d img,.blade-e img{object-position:center}
.blade:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,18,.94),transparent 54%)}
.blade-copy{position:absolute;z-index:2;left:14%;right:8%;bottom:1.5rem;display:grid;gap:.35rem}
.blade-copy small{color:var(--lichen);font-size:.52rem;font-weight:700;letter-spacing:.12em}
.blade-copy b{font-family:"Archivo Black";font-size:clamp(.68rem,1vw,1rem);line-height:1.05;overflow-wrap:anywhere}

.media{padding:clamp(5rem,8vw,8rem) var(--pad);background:var(--surface)}
.media>header{margin-bottom:3rem}
.media h2,.author h2,.finale h2{margin:.45rem 0 0;font:400 clamp(3.2rem,6vw,6rem)/.84 "Archivo Black";letter-spacing:-.035em;text-transform:uppercase}
.media h2{max-width:13ch}

.story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;grid-auto-rows:clamp(18rem,24vw,28rem);gap:.65rem}
.story-tile{position:relative;min-width:0;overflow:hidden;background:var(--surface-2);isolation:isolate}
.story-tile--lead{grid-column:span 2;grid-row:span 2}
.story-tile--wide,.story-tile--store{grid-column:span 2}
.story-tile img{height:100%;object-fit:cover;filter:saturate(.82) brightness(.82);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease}
.story-tile--lead img{object-position:center 30%}
.story-tile--warm img{object-position:center 20%}
.tile-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,rgba(9,11,16,.97),rgba(9,11,16,.08) 68%)}
.tile-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:.35rem;padding:clamp(1rem,2vw,1.65rem)}
.tile-copy small{color:var(--lichen);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tile-copy b{max-width:18ch;font:400 clamp(1.45rem,2.8vw,3.25rem)/.9 "Archivo Black";letter-spacing:-.025em;text-transform:uppercase}
.tile-copy em{color:#d3d4d7;font-size:.72rem;font-style:normal;letter-spacing:.05em;text-transform:uppercase}
a.story-tile:hover img,a.story-tile:focus-visible img,.story-tile:hover img{transform:scale(1.035);filter:saturate(.94) brightness(.88)}
a.story-tile:focus-visible{outline:3px solid var(--lichen);outline-offset:-4px}

.author{display:grid;grid-template-columns:.8fr 1fr .7fr;gap:clamp(1.5rem,4vw,4rem);padding:clamp(5rem,8vw,8rem) var(--pad);background:var(--indigo-2)}
.author-image{position:relative;height:42rem;overflow:hidden}
.author-image img{height:100%;object-fit:cover;filter:saturate(.75) contrast(.96)}
.author-image span{position:absolute;top:0;left:0;padding:.55rem;background:var(--lichen);color:var(--black);font-size:.55rem;font-weight:700}
.author-copy{align-self:center}
.author-copy blockquote{max-width:24ch;margin:2rem 0;font:600 1.7rem "IBM Plex Sans Condensed";text-transform:uppercase}
.author-copy p{max-width:65ch;color:#d0d4df;line-height:1.65}
.author-copy a,.author aside a,.creator-status{display:inline-block;min-height:44px;margin-top:1rem;padding:.75rem 0 .4rem;border-bottom:1px solid var(--lichen);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.author aside{align-self:end;padding:1.5rem;background:#252c28;color:var(--paper);box-shadow:inset 0 3px 0 var(--lichen)}
.author aside h3{margin:.6rem 0;font:400 2.3rem/.92 "Archivo Black";letter-spacing:-.025em;text-transform:uppercase}
.author aside p{color:#d4d7d3;line-height:1.55}
.creator-status{border-color:var(--lichen);color:var(--lichen)}
.author aside .creator-contact{display:block;width:max-content;max-width:100%;margin-top:1.15rem;color:var(--paper);overflow-wrap:anywhere}

.finale{display:grid;grid-template-columns:1fr 1fr}
.finale>div{min-height:31rem;padding:clamp(3rem,6vw,6rem) var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.finale>div:first-child{background:#151920;color:var(--paper)}
.finale>div:last-child{background:#261b1a;color:var(--paper)}
.finale h2{max-width:10ch}
.finale a{width:max-content;min-height:44px;padding:.75rem 0 .4rem;border-bottom:1px solid var(--lichen);font-size:.65rem;font-weight:700;text-transform:uppercase}

footer{display:grid;grid-template-columns:1fr 1fr auto;gap:2rem;padding:3rem var(--pad) 1.5rem;background:#06070a}
footer p{margin:.2rem 0;color:#9da1a9}
footer nav{display:flex;gap:1.5rem;font-size:.62rem;font-weight:700;text-transform:uppercase}
footer nav a:hover,footer nav a:focus-visible,footer address a:hover,footer address a:focus-visible{color:var(--gold)}
footer address{grid-column:1/-1;max-width:75ch;margin:.5rem 0 0;padding-top:1.5rem;border-top:1px solid #2a2e36;color:#9da1a9;font-size:.72rem;font-style:normal;line-height:1.6}
footer address span{display:block}
footer address a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.22em}
footer>small{grid-column:1/-1;color:#777c86;font-size:.55rem}

.story-tile--full{grid-column:1/-1}
.studio-intro{padding:clamp(3rem,6vw,5.5rem) var(--pad);background:var(--black)}
.studio-intro span{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.studio-intro h2{max-width:20ch;margin:.6rem 0 1.25rem;font:400 clamp(2rem,3.6vw,3.6rem)/.95 "Archivo Black";letter-spacing:-.03em;text-transform:uppercase}
.studio-intro p{max-width:65ch;margin:0 0 .85rem;color:#d0d4df;font-size:1.05rem;line-height:1.65}
.studio-intro a{border-bottom:1px solid var(--lichen)}
.concept-head{margin:clamp(3rem,5vw,4.5rem) 0 1.25rem}
.concept-head span{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.concept-head h3{margin:.45rem 0 .5rem;font:400 clamp(1.7rem,3vw,2.8rem)/.95 "Archivo Black";letter-spacing:-.025em;text-transform:uppercase}
.concept-head p{max-width:60ch;margin:0;color:var(--muted);line-height:1.55}
.notfound{min-height:70svh;padding:9rem var(--pad) 5rem}
.notfound h1{max-width:14ch;margin:.6rem 0 1.25rem;font:400 clamp(2.6rem,6vw,5.5rem)/.9 "Archivo Black";letter-spacing:-.035em;text-transform:uppercase}
.notfound p{max-width:55ch;color:#d0d4df;line-height:1.6}
.notfound ul{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:1.75rem 0 0;padding:0;list-style:none}
.notfound li a{display:inline-block;min-height:44px;padding:.75rem 0 .4rem;border-bottom:1px solid var(--lichen);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

@media(max-width:1100px){
  .topbar{grid-template-columns:1fr auto;gap:1rem}
  .menu{display:block;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--paper);padding:.6rem .75rem;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .topbar nav{display:none;position:absolute;top:5rem;left:0;right:0;padding:1.5rem var(--pad);background:var(--black);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}
  .topbar nav.is-open{display:flex}
  .campaign{min-height:62rem}
  .campaign-copy{width:72%}
  .image-blades{inset:30rem 0 0 20%}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:26rem}
  .story-tile--lead{grid-column:span 2;grid-row:span 1}
  .story-tile--wide,.story-tile--store{grid-column:span 2}
  .author{grid-template-columns:1fr 1fr}
  .author aside{grid-column:1/-1}
  .finale>div{min-height:26rem}
}

@media(max-width:620px){
  .topbar{grid-template-columns:1fr auto}
  .topbar .wordmark{font-size:1.75rem}
  .media-badge{width:1.85rem;font-size:.41rem}
  .campaign{min-height:65rem}
  .campaign-copy{width:100%;padding:4.75rem var(--pad) 0}
  .campaign h1{font-size:3.2rem}
  .campaign-copy>p{font-size:.94rem}
  .campaign-copy>a{gap:1.5rem}
  .image-blades{inset:30rem 0 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:.35rem;overflow-x:auto;padding:0 1rem 1rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .blade{min-width:0;scroll-snap-align:start;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
  .blade:hover,.blade:focus-visible{flex:1}
  .blade-copy{left:12%;bottom:1.1rem}
  .blade-copy b{font-size:.78rem}
  .media h2,.author h2,.finale h2{font-size:3.35rem}
  .story-grid{grid-template-columns:1fr;grid-auto-rows:27rem}
  .story-tile--lead,.story-tile--wide,.story-tile--store{grid-column:span 1;grid-row:span 1}
  .author{grid-template-columns:1fr}
  .author-image{height:30rem}
  .finale{grid-template-columns:1fr}
  .finale>div{min-height:22rem}
  footer{grid-template-columns:1fr}
  footer>small{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}