@charset "UTF-8";

/* Pencil stage: the centre remains clear while the frame stays over scrolling pages. */
.stage-frame {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: opacity .26s ease, visibility 0s .26s;
}
.stage-frame-art {
  position: absolute;
  inset: 0;
  background: url("assets/stage-curtain.svg") center / 100% 100% no-repeat;
}
body.gate-open.curtain-pinned:not(.curtain-locked) .stage-frame {
  visibility: visible;
  opacity: 1;
  transition: opacity .32s ease;
}
body.curtain-locked .stage-frame { transition: none; }

/* Flat pigment bands and pencil hatching replace the former glossy fabric. */
.curtain-gate {
  background: var(--paper, #f6f3e8);
  --stage-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='280' viewBox='0 0 126 280'%3E%3Cdefs%3E%3Cpattern id='h' width='12' height='21' patternUnits='userSpaceOnUse' patternTransform='rotate(-9)'%3E%3Cpath d='M1-3v27M5-3v27M10-3v27' fill='none' stroke='%23f6f3e8' stroke-width='.65' opacity='.28'/%3E%3Cpath d='M0 9h12M0 17h12' fill='none' stroke='%232b4d31' stroke-width='.4' opacity='.25'/%3E%3C/pattern%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='url(%23h)' d='M0 0h126v280H0z'/%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%23e1e7b5' opacity='.3' d='M12-10q4 70-1 136t1 167M40-9q-4 80 0 140t0 160M81-10q5 82 0 145t1 160M107-8q-2 78 1 138t-1 161'/%3E%3Cpath stroke='%232b4d31' opacity='.36' d='M29-10q-4 70 0 140t-1 160M71-10q4 70 0 145t1 156M119-10q-3 70 0 140t0 166'/%3E%3C/g%3E%3Cpath d='M0 0h126v280H0z' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.curtain-gate .stage-glow { background: none; }
.curtain-panel {
  top: 0;
  bottom: -6px;
  width: 50.7%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: #62844e;
  background-image: var(--stage-pencil), repeating-linear-gradient(90deg,
    #4d703f 0 9px, #5f804a 9px 28px, #77945b 28px 46px,
    #819d64 46px 58px, #6c8a52 58px 76px, #547542 76px 94px,
    #42663b 94px 103px, #5b7c47 103px 126px);
  background-size: 126px 280px, 126px 100%;
  transition: transform 1.32s cubic-bezier(.65,.04,.2,1), opacity .2s 1.15s;
}
.curtain-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(109deg, transparent 0 5px,
    #e8eac615 5px 6px, transparent 6px 9px),
    repeating-linear-gradient(21deg, transparent 0 12px,
    #203c2815 12px 13px, transparent 13px 21px);
}
.curtain-panel:after {
  inset: auto 0 12px;
  height: 9px;
  background: repeating-linear-gradient(110deg,#efbb36 0 2px,#f3e884 2px 3px,#d1aa44 3px 6px);
  border-block: 1px solid #4d6439;
  mix-blend-mode: normal;
}
.curtain-left {
  left: -2px;
  transform-origin: left center;
  clip-path: polygon(0 0, 100% 0, 99.4% 12%, 100% 27%, 99.2% 44%,
    100% 61%, 99.4% 78%, 100% 100%, 0 100%);
  transform: translateX(calc(var(--pull) * -.12));
}
.curtain-right {
  right: -2px;
  transform-origin: right center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .6% 83%,
    0 64%, .8% 46%, 0 28%, .6% 11%);
  transform: translateX(calc(var(--pull) * .12));
  background-position: right top;
}
.curtain-gate .curtain-rod { display: none; }
.curtain-valance {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url("assets/stage-curtain.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  transform: none;
  transition: none;
  z-index: 3;
}
.curtain-gate.is-opening { background: transparent; }
.curtain-gate.is-opening .stage-glow { opacity: 0; }
.curtain-gate.is-opening .curtain-left {
  transform: translateX(-1%) scaleX(.105);
  border-radius: 0;
  opacity: 0;
}
.curtain-gate.is-opening .curtain-right {
  transform: translateX(1%) scaleX(.105);
  border-radius: 0;
  opacity: 0;
}
.curtain-gate.is-opening .curtain-valance { transform: none; }
.gate-title { text-shadow: 0 1px 1px #2b4d31, 0 3px 12px #2b4d3133; }
.gate-title h1 { font-family: var(--sans); font-weight: 700; }
.gate-subtitle, #cord-hint { font-family: var(--sans); font-style: normal; }
.cord-line {
  background: repeating-linear-gradient(35deg,#efbb36 0 2px,#f3e884 2px 4px,#b59e57 4px 5px);
  border-inline: 1px solid #f3e884;
  box-shadow: 1px 0 0 #526d3b;
}
.cord-handle {
  background: repeating-linear-gradient(96deg,#e9bd4f 0 2px,#f3e884 2px 4px,#e9bd4f 4px 7px);
  box-shadow: 2px 2px 0 #2b4d3144;
}
.cord-handle:before, .cord-handle:after { background: #efbb36; }
.cord-handle > span { background: #e6bd4e; }
#cord-hint { color: #fff4bf; }

@media(max-width:600px) {
  .curtain-panel { top: 0; bottom: -6px; }
  .curtain-valance { inset: 0; height: auto; }
  .curtain-gate .gate-title { width: 73%; left: 44%; }
  .curtain-gate .gate-title h1 { font-size: clamp(27px, 7.1vw, 38px); line-height: 1.55; }
  .curtain-gate .gate-subtitle { font-size: 15px; line-height: 1.8; max-width: 230px; }
  .curtain-gate .load-label { font-size: 12px; letter-spacing: .03em; }
  .curtain-gate .gate-edition { font-size: 10px; letter-spacing: .07em; }
  .curtain-gate .gate-footer { display: none; }
  .curtain-gate #cord-hint { font-size: 15px; }
  .curtain-gate #cord-hint small { font-size: 9px; letter-spacing: .04em; }
}
@media(prefers-reduced-motion:reduce) {
  .stage-frame, .curtain-panel { transition: none; }
  .curtain-gate.is-opening .curtain-panel { opacity: 0; }
}