/* ============================================================
   cosplay.bar — a coastal-edition zine
   Palette: Ink Tide #0E2A36 · Driftwood Teal #3E6B7A · Sea-Glass #9DBFC6
            Linen Sand #E9D9B8 · Salt Bleach #F4ECDC · Stage Vermilion #C0533C
            Tarnished Brass #7A6A3F
   Fonts:   Cormorant Garamond (display) · EB Garamond (body) ·
            Caveat (marginalia) · Special Elite (stamps) · Gowun Batang (한글)
   ============================================================ */

:root{
  --ink-tide:#0E2A36;
  --driftwood:#3E6B7A;
  --seaglass:#9DBFC6;
  --linen-sand:#E9D9B8;
  --salt-bleach:#F4ECDC;
  --vermilion:#C0533C;
  --brass:#7A6A3F;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'EB Garamond',Georgia,serif;
  --hand:'Caveat',cursive;
  --stamp:'Special Elite','Courier New',monospace;
  --hangul:'Gowun Batang',serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--body);
  font-size:18px;
  line-height:1.7;
  color:var(--ink-tide);
  background:var(--linen-sand);
  overflow-x:hidden;
  position:relative;
  cursor:none;
}

/* ---------- Paper grain over the page ---------- */
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  background-image:
    radial-gradient(circle at 50% 12%, rgba(122,106,63,.07), transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(62,107,122,.05), transparent 55%);
  mix-blend-mode:multiply;
}

/* ============================================================
   PLANE z=0 — TIDE  (fixed, slow wash)
   ============================================================ */
.tide-plane{
  position:fixed;inset:-10vh -10vw;
  z-index:0;
  pointer-events:none;
  will-change:transform;
}
.tide-plane .grain{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.06;
}
.wash{position:absolute;border-radius:50%;filter:blur(80px);}
.w1{width:60vw;height:60vw;left:-15vw;top:5vh;background:radial-gradient(circle,rgba(157,191,198,.55),transparent 70%);}
.w2{width:50vw;height:50vw;right:-12vw;bottom:-10vh;background:radial-gradient(circle,rgba(62,107,122,.4),transparent 70%);}
.salt-ring{
  position:absolute;border-radius:50%;
  border:2px solid rgba(122,106,63,.18);
}
.r1{width:38vw;height:34vw;left:8vw;top:30vh;transform:rotate(-8deg);box-shadow:inset 0 0 0 6px rgba(122,106,63,.06);}
.r2{width:26vw;height:24vw;right:14vw;top:62vh;transform:rotate(6deg);box-shadow:inset 0 0 0 5px rgba(122,106,63,.05);}

/* ============================================================
   PLANE z=1 — PINNED PAPER  (torn cards, mid drift)
   ============================================================ */
.pinned-plane{
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  will-change:transform;
}
.torn-card{
  position:absolute;
  background:var(--salt-bleach);
  box-shadow:0 14px 34px rgba(14,42,54,.12);
  --tear:polygon(0 3%,4% 0,12% 2%,22% 0,33% 3%,46% 1%,58% 3%,70% 0,82% 2%,93% 0,100% 4%,99% 14%,100% 28%,98% 42%,100% 56%,99% 70%,100% 84%,98% 97%,88% 100%,74% 98%,60% 100%,46% 98%,32% 100%,18% 98%,7% 100%,0 96%,1% 80%,0 66%,2% 50%,0 36%,1% 20%);
  clip-path:var(--tear);
}
.t1{width:30vw;height:42vh;left:62vw;top:124vh;transform:rotate(2.5deg);}
.t2{width:24vw;height:30vh;left:-3vw;top:280vh;transform:rotate(-3deg);}
.t3{width:26vw;height:34vh;right:-4vw;top:430vh;transform:rotate(2deg);}

/* ============================================================
   RUNNING STITCH THREAD — the page spine
   ============================================================ */
.thread-svg{
  position:absolute;
  left:50%;top:0;
  width:120px;height:100%;
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
}
#threadPath{
  stroke-dasharray:6 8 14 8;   /* running-stitch rhythm: short short long */
  stroke-dashoffset:0;
}

/* ============================================================
   NEEDLE-AND-THREAD CURSOR
   ============================================================ */
.needle-cursor{
  position:fixed;top:0;left:0;
  width:40px;height:40px;
  margin:-6px 0 0 -6px;
  z-index:9999;
  pointer-events:none;
  transition:transform .12s ease-out;
  transform:translate(-100px,-100px);
}
.needle-cursor svg{width:100%;height:100%;display:block;}
.needle-cursor.over{transform-origin:6px 34px;}
.thread-trail{
  position:fixed;inset:0;
  z-index:9998;
  pointer-events:none;
}

/* ============================================================
   FOLD-UP INTRO
   ============================================================ */
.fold-cover{
  position:fixed;inset:0;
  z-index:9000;
  pointer-events:none;
  perspective:1600px;
}
.fold-half{
  position:absolute;left:0;width:100%;height:50%;
  background:var(--linen-sand);
  backface-visibility:hidden;
}
.fold-half.top{top:0;transform-origin:bottom;
  background-image:linear-gradient(180deg,rgba(14,42,54,.06),transparent),
                   radial-gradient(circle at 60% 30%,rgba(122,106,63,.08),transparent 60%);
}
.fold-half.bottom{bottom:0;transform-origin:top;
  background-image:linear-gradient(0deg,rgba(14,42,54,.06),transparent),
                   radial-gradient(circle at 40% 70%,rgba(62,107,122,.07),transparent 60%);
}
.fold-crease{
  position:absolute;left:0;right:0;top:50%;height:2px;
  transform:translateY(-1px);
  background:linear-gradient(90deg,transparent,rgba(14,42,54,.25),transparent);
}
body.unfolded .fold-half.top{animation:foldUp 1.5s cubic-bezier(.22,1.4,.4,1) forwards;}
body.unfolded .fold-half.bottom{animation:foldDown 1.5s cubic-bezier(.22,1.4,.4,1) forwards;}
body.unfolded .fold-crease{animation:fade .6s ease forwards .8s;}
body.unfolded .fold-cover{animation:lift 0s linear forwards 1.6s;}
@keyframes foldUp{from{transform:rotateX(0);}to{transform:rotateX(92deg);}}
@keyframes foldDown{from{transform:rotateX(0);}to{transform:rotateX(-92deg);}}
@keyframes fade{to{opacity:0;}}
@keyframes lift{to{display:none;visibility:hidden;}}

/* ============================================================
   RIBBON TABLE OF CONTENTS
   ============================================================ */
.ribbon-toc{
  position:fixed;
  left:0;top:50%;
  transform:translateY(-50%);
  z-index:50;
  background:var(--vermilion);
  color:var(--salt-bleach);
  padding:18px 22px 30px 14px;
  box-shadow:4px 8px 22px rgba(14,42,54,.25);
  font-family:var(--hand);
  transition:transform .35s cubic-bezier(.22,1.4,.4,1);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%);
}
.ribbon-toc .ribbon-tag{
  display:block;
  font-size:13px;letter-spacing:.15em;text-transform:uppercase;
  font-family:var(--stamp);
  opacity:.8;
  margin-bottom:8px;
}
.ribbon-toc ol{list-style:none;}
.ribbon-toc li{margin:4px 0;}
.ribbon-toc a{
  color:var(--salt-bleach);
  text-decoration:none;
  font-size:1.35rem;
  display:block;
  padding:2px 4px;
  border-bottom:1px dashed transparent;
  transition:transform .3s cubic-bezier(.22,1.4,.4,1),opacity .2s;
  opacity:.78;
}
.ribbon-toc a:hover{opacity:1;transform:translateX(6px) rotate(-1deg);}
.ribbon-toc a.active{opacity:1;transform:translateX(10px) rotate(-1.5deg);border-bottom-color:rgba(244,236,220,.6);}
.ribbon-tail{
  position:absolute;left:14px;bottom:-30px;width:2px;height:34px;
  background:repeating-linear-gradient(180deg,var(--vermilion) 0 6px,transparent 6px 14px);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:relative;z-index:4;
  text-align:center;
  padding:18vh 8vw 12vh;
  max-width:1100px;margin:0 auto;
}
.masthead-stamp{
  font-family:var(--stamp);
  font-size:.85rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--driftwood);
  transform:rotate(-1.5deg);
  display:inline-block;
  margin-bottom:1.2rem;
}
.logo{
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(4rem,13vw,10rem);
  line-height:.9;
  color:var(--ink-tide);
  letter-spacing:-.02em;
}
.logo .dot{color:var(--vermilion);}
.kicker{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  font-style:italic;
  color:var(--driftwood);
  margin-top:1.4rem;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  flex-wrap:wrap;
}
.kicker-line{flex:1;max-width:120px;height:1px;background:var(--driftwood);opacity:.5;}
.masthead-aside{
  font-family:var(--hand);
  font-size:1.5rem;
  color:var(--brass);
  margin-top:2rem;
  transform:rotate(-2deg);
}

/* ============================================================
   CONTENT PLANE — the editorial spreads (z=2)
   ============================================================ */
.content-plane{position:relative;z-index:5;}

.spread{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:9vh 6vw 4vh;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  gap:3.5rem;
  align-items:start;
}
.dept-num{
  position:absolute;
  left:1vw;top:5.5vh;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(6rem,12vw,11rem);
  color:rgba(62,107,122,.14);
  line-height:1;
  user-select:none;
  z-index:0;
}
.dept-ornament{
  position:absolute;
  width:120px;height:120px;
  right:4vw;top:3vh;
  opacity:.5;
  transform:rotate(-6deg);
  z-index:0;
}
.dept-ornament svg{width:100%;height:100%;}

.spread-body{position:relative;z-index:2;}

.stage-dir{
  font-family:var(--stamp);
  font-style:italic;
  font-size:.95rem;
  font-variant:small-caps;
  letter-spacing:.04em;
  color:var(--brass);
  border-left:3px solid var(--seaglass);
  padding-left:1rem;
  margin-bottom:1.8rem;
  transform:rotate(-.4deg);
}
.dept-title{
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(3.4rem,9vw,9rem);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--ink-tide);
  margin-bottom:1.6rem;
}
.spread-body p{margin-bottom:1.2rem;}
.spread-body p em{font-style:italic;color:var(--driftwood);}

.lead{font-size:1.18rem;}
.drop-cap::first-letter{
  font-family:var(--display);
  font-weight:600;
  font-size:6.5em;
  line-height:.78;
  float:left;
  color:var(--vermilion);
  margin:.05em .08em -.08em -.04em;
  font-style:italic;
}

.small-caps{font-variant:small-caps;letter-spacing:.06em;color:var(--brass);font-weight:500;}

/* ---------- Page-break ornaments ---------- */
.page-break-orn{
  grid-column:1 / -1;
  text-align:center;
  margin:5vh 0 0;
  padding-top:3vh;
}
.page-break-orn svg{width:min(360px,60vw);height:40px;}
.page-break-orn .hand{
  display:block;
  font-family:var(--hand);
  color:var(--brass);
  font-size:1.15rem;
  margin-top:.3rem;
}
.page-break-orn.torn-tide svg{width:100%;height:50px;}

/* ============================================================
   MARGINALIA RAIL
   ============================================================ */
.margin-rail{
  position:relative;z-index:2;
  font-size:.95rem;
}
.margin-rail .hand{
  font-family:var(--hand);
  font-size:1.35rem;
  color:var(--driftwood);
  line-height:1.4;
  display:block;
  margin:1.6rem 0;
}
.margin-rail .hand strong{color:var(--vermilion);}
.tilt-a{transform:rotate(-2.2deg);}
.tilt-b{transform:rotate(1.8deg);}

/* ---------- Costume tags ---------- */
.costume-tag{
  position:relative;
  background:var(--salt-bleach);
  border:1px solid rgba(122,106,63,.4);
  border-radius:4px 4px 4px 4px;
  padding:1.1rem 1.2rem 1.1rem 2.2rem;
  margin:1.8rem 0;
  transform:rotate(-3deg);
  box-shadow:0 8px 20px rgba(14,42,54,.12);
  transition:transform .4s cubic-bezier(.22,1.4,.4,1);
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 12%);
}
.costume-tag.tag-vermilion{border-color:var(--vermilion);}
.costume-tag.tag-vermilion .tag-name{color:var(--vermilion);}
.costume-tag .twine-hole{
  position:absolute;left:.6rem;top:50%;
  width:14px;height:14px;
  border:2px solid var(--brass);
  border-radius:50%;
  transform:translateY(-50%);
  background:var(--linen-sand);
}
.tag-kicker{
  display:block;
  font-family:var(--stamp);
  font-size:.7rem;letter-spacing:.2em;
  color:var(--brass);
  margin-bottom:.3rem;
}
.tag-name{
  display:block;
  font-family:var(--display);
  font-style:italic;
  font-size:1.5rem;
  color:var(--ink-tide);
  line-height:1.1;
}
.tag-meta{
  display:block;
  font-family:var(--hand);
  font-size:1.05rem;
  color:var(--driftwood);
  margin-top:.3rem;
}

/* ---------- Polaroids ---------- */
.polaroid{
  position:relative;
  background:#fff;
  padding:12px 12px 38px;
  margin:2rem auto;
  width:min(220px,80%);
  box-shadow:0 10px 26px rgba(14,42,54,.2);
  transition:transform .5s cubic-bezier(.22,1.4,.4,1);
  transform-origin:center;
}
.polaroid.p1{transform:rotate(-3.5deg);}
.polaroid.p2{transform:rotate(2.8deg);}
.polaroid.p3{transform:rotate(-2.4deg);}
.polaroid.p4{transform:rotate(3.2deg);}
.polaroid-img{
  width:100%;aspect-ratio:1/1;display:block;
  background:var(--seaglass);
}
.grad-a{background:linear-gradient(135deg,#9DBFC6,#3E6B7A 60%,#0E2A36);}
.grad-b{background:linear-gradient(160deg,#E9D9B8,#C0533C 70%,#7A6A3F);}
.grad-c{background:linear-gradient(120deg,#F4ECDC,#9DBFC6 55%,#3E6B7A);}
.grad-d{background:linear-gradient(145deg,#7A6A3F,#0E2A36 60%,#3E6B7A);}
.polaroid-cap{
  position:absolute;left:0;right:0;bottom:8px;
  text-align:center;
  font-family:var(--hand);
  font-size:1.15rem;
  color:var(--ink-tide);
}
.washi{
  position:absolute;
  width:60px;height:24px;
  background:rgba(157,191,198,.65);
  box-shadow:0 2px 6px rgba(14,42,54,.12);
}
.washi.tl{top:-10px;left:-12px;transform:rotate(-38deg);background:rgba(192,83,60,.45);}
.washi.br{bottom:24px;right:-14px;transform:rotate(-38deg);}

/* ---------- See-fig callout ---------- */
.see-fig{margin:1.6rem 0;}
.see-fig svg{width:90px;height:60px;display:block;}
.see-fig .hand{
  font-family:var(--hand);font-size:1.2rem;color:var(--driftwood);
  display:block;margin-top:-.4rem;margin-left:1.5rem;
}

/* ---------- Zigzag fabric edge ---------- */
.zigzag-edge{margin:1.8rem 0;}
.zigzag-edge svg{width:100%;height:24px;display:block;}
.zigzag-edge .hand{font-family:var(--hand);font-size:1.1rem;color:var(--brass);display:block;margin-top:.2rem;}

/* ---------- Sea-glass blockquote ---------- */
.seaglass-quote{
  border-left:8px solid var(--seaglass);
  background:rgba(157,191,198,.18);
  padding:1.2rem 1.4rem;
  margin:2rem 0;
  transform:rotate(-1deg);
}
.seaglass-quote p{
  font-family:var(--hangul);
  font-size:1.15rem;
  color:var(--ink-tide);
  line-height:1.6;
}
.seaglass-quote cite{
  display:block;
  font-family:var(--hand);
  font-size:1.15rem;
  color:var(--driftwood);
  margin-top:.6rem;
  font-style:normal;
}

/* ============================================================
   DRAMATIS PERSONAE  (Tonight's Cast)
   ============================================================ */
.dramatis{margin-top:2rem;}
.persona{
  margin-bottom:2.4rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(62,107,122,.25);
}
.persona:last-child{border-bottom:none;}
.persona-name{
  font-variant:small-caps;
  letter-spacing:.05em;
  font-size:1.5rem;
  color:var(--ink-tide);
  font-weight:500;
  margin-bottom:.4rem !important;
}
.persona-role{
  font-variant:normal;
  font-style:italic;
  font-size:1.1rem;
  letter-spacing:0;
  color:var(--vermilion);
}
.persona .hand{font-family:var(--hand);color:var(--driftwood);}

/* ============================================================
   BACKSTAGE NOTES — two-column print
   ============================================================ */
.wide-essay .spread-body{}
.essay-columns{
  margin-top:1.6rem;
  column-count:2;
  column-gap:2.6rem;
  column-rule:1px solid rgba(62,107,122,.3);
}
.essay-columns p{
  margin-bottom:1.1rem;
  text-align:justify;
  hyphens:auto;
}
@media(max-width:900px){
  .essay-columns{column-count:1;column-rule:none;}
}

/* ============================================================
   THE MENDING WALL — list
   ============================================================ */
.mend-list{list-style:none;margin-top:1.6rem;}
.mend-list li{
  position:relative;
  padding-left:2.2rem;
  margin-bottom:1.4rem;
}
.mend-list li strong{color:var(--ink-tide);font-weight:600;}
.glass-bullet{
  position:absolute;left:0;top:.45rem;
  width:14px;height:14px;
  background:linear-gradient(135deg,var(--seaglass),var(--driftwood));
  transform:rotate(45deg);
  box-shadow:0 2px 6px rgba(14,42,54,.18),inset 0 0 4px rgba(255,255,255,.4);
}

/* ============================================================
   LAST CALL — colophon
   ============================================================ */
.colophon .spread-body{text-align:left;}
.colophon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin:2.4rem 0;
}
.colophon-grid p:first-child{margin-bottom:.4rem;}
.colophon-grid .hand{font-family:var(--hand);font-size:1.2rem;color:var(--driftwood);line-height:1.5;}
@media(max-width:900px){.colophon-grid{grid-template-columns:1fr;}}
.colophon-stamp{
  font-family:var(--stamp);
  font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);
  transform:rotate(-1deg);
  display:inline-block;
  border-top:1px dashed var(--driftwood);
  padding-top:1rem;
  margin-top:1rem;
}

/* ============================================================
   SKETCH PLANE z=3 — fast-drift marginalia scribbles
   ============================================================ */
.sketch-plane{
  position:absolute;inset:0;
  z-index:6;
  pointer-events:none;
  will-change:transform;
}
.sk{position:absolute;opacity:.55;}
.sk1{width:120px;left:8vw;top:160vh;transform:rotate(-12deg);}
.sk2{width:60px;right:10vw;top:90vh;}
.sk3{width:70px;left:14vw;top:330vh;transform:rotate(8deg);}
.sk4{width:100px;right:8vw;top:470vh;transform:rotate(-5deg);}

/* ============================================================
   FLOAT PLANE z=4 — quickest, elastic sway
   ============================================================ */
.float-plane{
  position:absolute;inset:0;
  z-index:7;
  pointer-events:none;
  will-change:transform;
}
.tape-strip{
  position:absolute;
  width:90px;height:30px;
  background:rgba(157,191,198,.5);
  box-shadow:0 3px 8px rgba(14,42,54,.12);
}
.tape1{left:55vw;top:70vh;transform:rotate(28deg);}
.tape2{left:6vw;top:250vh;transform:rotate(-18deg);background:rgba(192,83,60,.35);}
.tape3{right:8vw;top:400vh;transform:rotate(12deg);}
.float-polaroid{
  position:absolute;
  background:#fff;
  padding:8px 8px 22px;
  width:120px;
  box-shadow:0 12px 28px rgba(14,42,54,.22);
}
.float-polaroid .polaroid-img{width:104px;height:104px;}
.fp1{right:6vw;top:130vh;transform:rotate(5deg);}
.fp2{left:4vw;top:380vh;transform:rotate(-6deg);}

/* ============================================================
   RESPONSIVE — below 900px, rail folds into reading flow
   ============================================================ */
@media(max-width:900px){
  body{cursor:auto;}
  .needle-cursor,.thread-trail{display:none;}
  .ribbon-toc{
    position:static;transform:none;
    width:100%;
    clip-path:none;
    padding:1rem 1.2rem;
    text-align:center;
  }
  .ribbon-toc ol{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;}
  .ribbon-tail{display:none;}
  .ribbon-toc a{font-size:1.1rem;}
  .ribbon-toc a:hover,.ribbon-toc a.active{transform:none;}
  .spread{
    grid-template-columns:1fr;
    gap:1.5rem;
    padding:6vh 7vw 3vh;
  }
  .margin-rail{
    border-left:3px dashed var(--seaglass);
    padding-left:1.2rem;
    transform:rotate(-1deg);
  }
  .margin-rail .hand{font-size:1.2rem;margin:1rem 0;}
  .polaroid{transform:none !important;}
  .polaroid.p1,.polaroid.p2,.polaroid.p3,.polaroid.p4{transform:none;}
  .thread-svg{width:30px;left:8px;transform:none;}
  .torn-card,.sketch-plane,.float-plane{display:none;}
  .dept-ornament{opacity:.3;width:80px;height:80px;}
  .dept-num{font-size:5rem;left:2vw;}
  .drop-cap::first-letter{font-size:4.5em;}
}

@media(max-width:560px){
  body{font-size:17px;}
  .logo{font-size:3.2rem;}
  .dept-title{font-size:2.6rem;}
}