


@font-face {
  font-family: "Solmoe KimDaeGeon";
  src: url("../assets/fonts/solmoe-kimdaegeon-light.woff2") format("woff2");
  font-weight: 100 400; font-display: swap;
}
@font-face {
  font-family: "Solmoe KimDaeGeon";
  src: url("../assets/fonts/solmoe-kimdaegeon-medium.woff2") format("woff2");
  font-weight: 500 900; font-display: swap;
}

@font-face {
  font-family: "Solmoe KimDaeGeon";
  src: url("../assets/fonts/solmoe-i18n-light.woff2") format("woff2");
  font-weight: 100 400; font-display: swap;
  unicode-range: U+00AB, U+00BB, U+00C0-00C4, U+00C7-00CF, U+00D1-00D6, U+00D9-00DD, U+00DF-00E4, U+00E7-00EF, U+00F1-00F6, U+00F9-00FD, U+0102-0107, U+010C-010F, U+0116-011B, U+011E-011F, U+0130-0131, U+0141-0144, U+0147-0148, U+0150-0151, U+0158-015B, U+015E-0165, U+016E-0171, U+0179-017E, U+0218-021B, U+201E;
}
@font-face {
  font-family: "Solmoe KimDaeGeon";
  src: url("../assets/fonts/solmoe-i18n-medium.woff2") format("woff2");
  font-weight: 500 900; font-display: swap;
  unicode-range: U+00AB, U+00BB, U+00C0-00C4, U+00C7-00CF, U+00D1-00D6, U+00D9-00DD, U+00DF-00E4, U+00E7-00EF, U+00F1-00F6, U+00F9-00FD, U+0102-0107, U+010C-010F, U+0116-011B, U+011E-011F, U+0130-0131, U+0141-0144, U+0147-0148, U+0150-0151, U+0158-015B, U+015E-0165, U+016E-0171, U+0179-017E, U+0218-021B, U+201E;
}


@font-face {
  font-family: "Solmoe Fallback";
  src: local("Georgia");
  size-adjust: 100.9%; ascent-override: 79.3%; descent-override: 24.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Solmoe Fallback Times";
  src: local("Times New Roman");
  size-adjust: 105.2%; ascent-override: 76%; descent-override: 23.8%; line-gap-override: 0%;
}

@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest-ext-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-024F;
}

@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest-i18n-latin-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
  unicode-range: U+00A0-00A3, U+00A5, U+00A8-00AB, U+00AE-00B4, U+00B6, U+00B8-00D6, U+00D8-00E1, U+00E3-00E6, U+00E8-00E9, U+00EB-00F0, U+00F2-00FB, U+00FD-00FF, U+0131, U+2018, U+201A, U+201E, U+2026, U+2039-203A;
}
@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest-i18n-ext-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-0102, U+0104-010B, U+010D-0130, U+0132-0151, U+0154-0160, U+0162-017F, U+0218-021B;
}

@font-face {
  font-family: "Onest Fallback";
  src: local("Segoe UI");
  size-adjust: 103.7%; ascent-override: 93.6%; descent-override: 29.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Onest Fallback Arial";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.5%; ascent-override: 94.6%; descent-override: 29.7%; line-gap-override: 0%;
}



html, body { cursor: var(--cursor); }
:where(a[href], button, [role="button"], [role="tab"], summary, label[for], select) { cursor: var(--cursor-hover); }
:where(input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"], [type="range"]), textarea) { cursor: text; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
* { scrollbar-width: thin; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) padding-box;
    border: 2px solid transparent; border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
}
body, h1, h2, h3, p, figure, ul, blockquote, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; }

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--bg-900);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


h1, h2, .sec-title, .hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
p { color: var(--ink-muted); max-width: var(--measure); overflow-wrap: anywhere; }
strong, b { color: var(--ink); font-weight: 600; }
.hl { color: var(--accent); font-weight: 600; }


.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


.skip {
  position: fixed; inset-inline-start: var(--sp-4); inset-block-start: var(--sp-4);
  z-index: var(--z-skip);
  transform: translateY(calc(-100% - var(--sp-8)));
  padding: var(--sp-3) var(--sp-5);
  background: var(--crimson-500); color: var(--text-primary);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--track-micro); font-size: var(--fs-sm);
  border-radius: var(--card-radius); text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }


:where(a, button, [tabindex], input, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
:where(a, button):focus:not(:focus-visible) { outline: none; }


.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - (var(--gutter) * 2), 880px); }


.section {
  position: relative;
  
  padding-block: max(var(--sp-6), calc(var(--section-pad) - var(--tear-h) / 2)) calc(var(--section-pad) + var(--tear-h));
  scroll-margin-top: var(--sp-7);
  isolation: isolate;
  overflow-x: clip;   
}
.footer { isolation: isolate; }
.section > .shell, .footer > .shell { position: relative; z-index: var(--z-raise); }


.ground-dark {
  background-color: var(--bg-900);
  color: var(--text-primary);
}
.ground-light {
  
  background-color: var(--parchment-100);
  color: var(--text-on-light);
}

[data-scene="courtyard"] { --scene: url("../assets/theme/2f0e6e0ce1d590b5.webp"); --scene-light: url("../assets/theme/bcb7fd747d6eaf31.webp"); }
[data-scene="camp"]      { --scene: url("../assets/theme/c49ecc5a1c736ece.webp");      --scene-light: url("../assets/theme/edf3907929708b26.webp"); }
[data-scene="pagoda"]    { --scene: url("../assets/theme/d110831a84f0d2a9.webp");    --scene-light: url("../assets/theme/01a72504b604daf7.webp"); }
[data-scene="belltower"] { --scene: url("../assets/theme/39da491eff758c94.webp"); --scene-light: url("../assets/theme/463a6b3919689c3d.webp"); }
@media (max-width: 899px) {
  .section, .footer {
    --scene:            url("../assets/theme/c0d68b47b6fa7a4f.webp");
    --scene-tile:       url("../assets/theme/b86aefcba98f0d02.webp");
    --scene-light:      url("../assets/theme/8f0b6f55b79cb80e.webp");
    --scene-light-tile: url("../assets/theme/7296c30d30e4c95b.webp");
  }
  [data-scene="courtyard"] { --scene: url("../assets/theme/ed1824ca58e3c093.webp"); --scene-light: url("../assets/theme/4860bf0feae2fc4c.webp"); }
  [data-scene="camp"]      { --scene: url("../assets/theme/583db779819914cb.webp");      --scene-light: url("../assets/theme/24e3f224ce4f3a43.webp"); }
  [data-scene="pagoda"]    { --scene: url("../assets/theme/26f24e40c24229e9.webp");    --scene-light: url("../assets/theme/f565620322e58049.webp"); }
  [data-scene="belltower"] { --scene: url("../assets/theme/4672e8dfe04c3c97.webp"); --scene-light: url("../assets/theme/4481544fec977503.webp"); }
}


.ground-light::before {
  content: ""; position: absolute; inset: 0; z-index: 1;   
  pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image:
    url("../assets/theme/31ef3ea4f87e3cd2.svg"),
    url("../assets/theme/3efb4002b60334b1.svg");
  background-size: 300px 300px, 900px 900px;
}


.tear {
  position: absolute;
  inset-block: calc(var(--tear-h) * -1 + 1px) 0;
  inset-inline: 0;
  z-index: 0;                               
  pointer-events: none;
  
  overflow: hidden;
  --tear-src: url("../assets/theme/2b30f2e311d502b8.png");
  --tear-sx: 100%;  --tear-px: 50%;
  -webkit-mask-image: var(--tear-src), linear-gradient(#000, #000);
          mask-image: var(--tear-src), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--tear-sx) var(--tear-h), 100% calc(100% - var(--tear-h) + 2px);
          mask-size: var(--tear-sx) var(--tear-h), 100% calc(100% - var(--tear-h) + 2px);
  -webkit-mask-position: var(--tear-px) 0, 0 100%;
          mask-position: var(--tear-px) 0, 0 100%;
}
.tear::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; aspect-ratio: 1920 / 1130;
  background: 0 0 / 100% 100% no-repeat;
  transition: opacity .9s var(--ease-out);
}

.section[data-scene="none"], .footer[data-scene="none"] { --scene: none; --scene-light: none; }
[data-scene="none"] > .tear::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .tear::before { transition: none; } }
.tear--dark { background: var(--bg-900) var(--scene-tile) 0 0 / 100% auto repeat-y; }
.tear--dark::before { background-image: var(--scene); opacity: var(--scene-opacity); }
.tear--light {
  background-color: var(--parchment-100);
  background-image: var(--scene-light-tile),
                    linear-gradient(180deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
  background-size: 100% auto, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  background-blend-mode: screen, normal;
}
.tear--light::before { background-image: var(--scene-light); mix-blend-mode: screen; opacity: var(--scene-light-opacity); }

.tear::after { content: ""; position: absolute; inset: 0; }
.tear--dark::after  { background: var(--ground-shade); }
.tear--light::after { background: var(--ground-tint); mix-blend-mode: multiply; }


.tear--flat {
  
  inset-block-start: calc(var(--section-pad) * -1);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--section-pad));
          mask-image: linear-gradient(transparent, #000 var(--section-pad));
  -webkit-mask-size: auto; mask-size: auto;
}
.tear--flat::before { content: none; }

.section:has(+ .section > .tear--flat) { padding-block-end: var(--section-pad); }


.tear[data-tear="2"] { --tear-sx: 132%; --tear-px: 0%; }
.tear[data-tear="3"] { --tear-sx: 124%; --tear-px: 100%; }
.tear[data-tear="4"] { --tear-sx: 148%; --tear-px: 38%; }

.tear--flip { --tear-src: url("../assets/theme/220c967e91cae4a2.png"); }
.tear--flip[data-tear="2"] { --tear-px: 100%; }
.tear--flip[data-tear="3"] { --tear-px: 0%; }
.tear--flip[data-tear="4"] { --tear-px: 62%; }


.sec-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-block-end: clamp(var(--sp-5), 2.5vw, var(--sp-6));
}


.sec-eyebrow {
  max-width: none;
  margin-block-end: var(--sp-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-muted);
}
.sec-title {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  min-width: min(344px, 78vw);   
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.3rem);
  line-height: 1.15; letter-spacing: .05em; text-transform: uppercase;
  color: var(--title-rust);
}

.sec-title__ko {
  font-family: var(--font-ko); font-weight: inherit; font-size: .9em; line-height: 1;
  letter-spacing: 0;
  text-shadow: var(--title-glow);
}

.sec-title__line {
  --tb-edge-y: 14px; --tb-edge-x: clamp(14px, 2.4vw, 30px);
  position: relative; isolation: isolate;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  column-gap: .45em;
  padding: .28em .55em .22em;
}
.sec-title__line::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--tb-edge-y) * -1) calc(var(--tb-edge-x) * -1);
  background: var(--wash);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--tb-edge-y) var(--tb-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--tb-edge-y) var(--tb-edge-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .sec-title__line::before { -webkit-mask: var(--brush-block) center / 100% 100% no-repeat; mask: var(--brush-block) center / 100% 100% no-repeat; }
}

.sec-title::after {
  content: ""; flex: 0 0 100%; height: 17px;
  margin-block-start: calc(var(--sp-3) + 14px);
  background: var(--title-rust);
  -webkit-mask: var(--knot) center / min(344px, 78vw) 17px no-repeat;
          mask: var(--knot) center / min(344px, 78vw) 17px no-repeat;
}
.sec-title .em { color: var(--accent); }


.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
  background: var(--bg-900);
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
}

.hero__veil {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 40% at 50% 47%,
      rgb(var(--bg-900-rgb) / .66) 0%,
      rgb(var(--bg-900-rgb) / .34) 56%,
      transparent 80%),
    linear-gradient(180deg,
      rgb(var(--bg-900-rgb) / .80) 0%,
      rgb(var(--bg-900-rgb) / .32) 30%,
      rgb(var(--bg-900-rgb) / .48) 62%,
      rgb(var(--bg-900-rgb) / .94) 100%),
    radial-gradient(120% 78% at 50% 50%, transparent 38%, rgb(var(--bg-900-rgb) / .58) 100%);
}
.hero { padding-block-end: var(--tear-h); }


.hero__inner { text-align: center; padding-block: clamp(96px, calc(44vh - 256px), 520px) var(--sp-7); }

@media (max-width: 767px) { .hero__inner { padding-block-start: clamp(76px, calc(30vh - 146px), 300px); } }



.hero__dust {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__title { font-size: 0; line-height: 0; }
.hero__logo {
  width: min(68vw, 520px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 6px 18px rgb(var(--shadow-rgb) / .7))
          drop-shadow(0 2px 3px rgb(var(--shadow-rgb) / .5));
}

.countdown {
  --tb-edge-y: 16px; --tb-edge-x: clamp(16px, 3vw, 34px);
  --cd-num: clamp(2.25rem, 1.35rem + 3.6vw, 3.9rem);
  position: relative; isolation: isolate;
  container: countdown / inline-size;
  width: min(100%, 31rem);
  
  margin: calc(var(--sp-6) + var(--tb-edge-y)) auto calc(var(--sp-7) + var(--tb-edge-y));
  padding: var(--sp-3) clamp(var(--sp-2), 2vw, var(--sp-5)) var(--sp-4);
}
.countdown::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--tb-edge-y) * -1) calc(var(--tb-edge-x) * -1);
  background: var(--wash);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--tb-edge-y) var(--tb-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--tb-edge-y) var(--tb-edge-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .countdown::before { -webkit-mask: var(--brush-block) center / 100% 100% no-repeat; mask: var(--brush-block) center / 100% 100% no-repeat; }
}
.countdown__title {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .45em;
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.15; letter-spacing: .05em; text-transform: uppercase;
  color: var(--title-rust);
}

.countdown__title::after {
  content: ""; flex: 0 0 100%; height: 17px;
  margin-block-start: var(--sp-2);
  background: var(--title-rust);
  -webkit-mask: var(--knot) center / min(344px, 100%) 17px no-repeat;
          mask: var(--knot) center / min(344px, 100%) 17px no-repeat;
}
.countdown__ko {
  font-family: var(--font-ko); font-weight: 700; font-size: .9em; line-height: 1;
  letter-spacing: 0; text-transform: none;
  text-shadow: var(--title-glow);
}

.countdown__title > .countdown__ko { font-size: max(.9em, 1.17rem); }
.countdown__units {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: var(--sp-4);
}
.countdown:not(.is-live) .countdown__units,
.countdown.is-open .countdown__units { display: none; }
.countdown__unit {
  position: relative;
  display: grid; justify-items: center; gap: var(--sp-2);
  margin: 0;
}

.countdown__unit + .countdown__unit::before {
  content: ""; position: absolute;
  inset-inline-start: -3px; inset-block-start: calc(var(--cd-num) * .47 - 3px);
  width: 6px; height: 6px; rotate: 45deg;
  background: var(--crimson-300);
}
.countdown__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--cd-num); line-height: 1;
  color: var(--text-primary);
  text-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .6), 0 6px 22px rgb(var(--bg-900-rgb) / .9);
}

.countdown__dig { display: inline-block; width: .6em; text-align: center; }
.countdown.is-long [data-unit="d"] .countdown__dig { width: .5em; }   
.countdown__label {
  display: inline-flex; align-items: baseline; gap: .45em;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-micro); line-height: 1.2;
  letter-spacing: var(--track-micro); text-transform: uppercase;
  white-space: nowrap;
  color: var(--brass-300);
}
.countdown__label .countdown__ko { font-size: 1.15em; color: var(--rust-200); text-shadow: none; }

.countdown__date {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-sm); line-height: 1.2;
  letter-spacing: var(--track-micro); text-transform: uppercase;
  color: var(--text-secondary);
}

.countdown.is-calm .countdown__units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.countdown.is-calm .countdown__unit:has([data-unit="s"]) { display: none; }

@container countdown (max-width: 26rem) {
  .countdown__label { flex-direction: column; align-items: center; gap: 3px; letter-spacing: .08em; font-size: .6875rem; }
}

@container countdown (max-width: 16rem) {
  .countdown__units { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .countdown__unit:nth-child(3)::before { display: none; }
}

@media (max-height: 800px) {
  .countdown { --cd-num: clamp(2rem, 1.2rem + 2.4vw, 2.9rem); padding-block: var(--sp-2); margin-block: calc(var(--sp-5) + var(--tb-edge-y)); }
  .countdown__units { margin-block-start: var(--sp-3); }
  .hero__inner { padding-block-end: var(--sp-4); }
  .hero .scroll-cue { padding-block-end: var(--sp-4); }   
  .hero .scroll-cue__line { height: 32px; }
}
@media (max-height: 700px) {
  .countdown { margin-block-end: calc(var(--sp-5) + var(--tb-edge-y)); }
  .hero .hero__meta { margin-block-start: var(--sp-4); }
}

.hero__sub {
  margin-block-start: 0;   
  margin-inline: auto;
  max-width: 46ch;
  text-wrap: balance;
  font-size: var(--fs-lede);
  color: var(--text-primary);
  text-shadow: 0 1px 14px rgb(var(--bg-900-rgb) / .9);
}
.hero__meta {
  margin-block-start: var(--sp-5);
  container: herometa / inline-size;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  justify-content: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--brass-300);
}
.hero__meta li { display: flex; align-items: center; gap: var(--sp-3); }
.hero__meta li + li::before {
  content: ""; width: 4px; height: 4px; rotate: 45deg;
  background: var(--crimson-300); margin-inline-end: var(--sp-2);
}

@container herometa (max-width: 34rem) {
  .hero__meta li:nth-child(3) { flex-basis: 100%; justify-content: center; }
  .hero__meta li:nth-child(3)::before { display: none; }
}


.scroll-cue {
  justify-self: center;
  display: grid; justify-items: center; gap: var(--sp-3);
  padding-block-end: clamp(var(--sp-5), 4vh, var(--sp-7));
  color: var(--text-primary);
  text-shadow: 0 1px 6px rgb(var(--shadow-rgb) / .8);
  font-family: var(--font-display); font-size: var(--fs-micro);
  letter-spacing: var(--track-micro); text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.scroll-cue:hover { color: var(--brass-300); }
.scroll-cue__line {
  position: relative; overflow: hidden;
  width: 7px; height: clamp(44px, 7vh, 72px);
  background: linear-gradient(180deg, rgb(var(--brass-400-rgb) / .65), rgb(var(--brass-400-rgb) / 0)) center / 1px 100% no-repeat;
}
.scroll-cue__line::after {
  content: ""; position: absolute; inset-inline: 2px; inset-block-start: 0;
  height: 40%;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgb(var(--brass-300-rgb) / 0), var(--brass-300));
  translate: 0 -100%;
  animation: cue-drop 2.4s var(--ease-in) infinite;
}
.scroll-cue:hover .scroll-cue__line::after { background: linear-gradient(180deg, rgb(var(--highlight-rgb) / 0), rgb(var(--highlight-rgb))); }
@keyframes cue-drop {
  0%       { translate: 0 -100%; }
  70%,100% { translate: 0 250%; }
}


.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal="head"]  { transform: translateY(-10px); filter: blur(4px); }
.js-reveal [data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; }


.js-reveal [data-reveal].ink-reveal {
  opacity: 1;                 
  transform: none;
  filter: none;
  transition: none;
  -webkit-mask-image: var(--ink-sprite);  mask-image: var(--ink-sprite);
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--ink-frames) * 100%) 100%;
          mask-size: calc(var(--ink-frames) * 100%) 100%;
  -webkit-mask-position: 0 0;             mask-position: 0 0;
}

.ink-reveal:nth-child(even) { --ink-sprite: var(--ink-sprite-b); }
.js-reveal [data-reveal].ink-reveal.is-in {
  animation: ink-spread var(--dur-ink) steps(var(--ink-frames), jump-none)
             var(--reveal-delay, 0ms) forwards;
}

@keyframes ink-spread {
  from { -webkit-mask-position: 0 0;    mask-position: 0 0; }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}


.js-reveal .sec-title[data-reveal] {
  filter: none;
  transform: translateY(18px);
  transition-duration: var(--dur-liquify), var(--dur-liquify), 0s;
}
.js-reveal .sec-title[data-reveal].is-in { transform: none; }


.js-reveal [data-reveal].ink-reveal.ink-done {
  -webkit-mask-image: none; mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .js-reveal [data-reveal].ink-reveal {
    -webkit-mask-image: none; mask-image: none; animation: none;
  }
  .scroll-cue__line::after { animation: none; }
}


.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: none; place-content: center; justify-items: center; gap: 28px;
  background: radial-gradient(60% 50% at 50% 46%, #241509, #0d0705 75%);
  transition: opacity 700ms var(--ease-out), visibility 0s linear 700ms;
}
.is-loading .loader, .loader.is-leaving { display: grid; }
.loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo {
  width: min(360px, 62vw); height: auto;
  filter: drop-shadow(0 10px 30px rgb(0 0 0 / .7));
  animation: loader-breathe 2.4s ease-in-out infinite alternate;
}
.loader.is-leaving .loader__logo { animation: none; transform: scale(1.12); transition: transform 700ms var(--ease-out); }

.loader__bar {
  position: relative; width: min(336px, 86vw); aspect-ratio: 336 / 30;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .6));
}
.loader__clip { position: absolute; inset: 0; clip-path: inset(6.667% 0 6.667% 0 round 2.53% / 28.33%); }
.loader__bar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__fill {
  clip-path: inset(0 calc((1 - var(--p, .08)) * 100%) 0 0);
  transition: clip-path 400ms var(--ease-out);
}
@keyframes loader-breathe { from { opacity: .82; transform: scale(.98); } to { opacity: 1; transform: scale(1.01); } }
.is-loading body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .loader__logo { animation: none; } .loader { transition: none; } }


body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img, video, canvas { -webkit-user-drag: none; }

img { pointer-events: none; }
::selection { background: transparent; }
input::selection, textarea::selection { background: rgb(var(--brass-400-rgb) / .45); }
@media print {
  body * { visibility: hidden !important; }
  body::after { content: "ERYON \2014  eryon.to"; visibility: visible; position: fixed; inset: 45% 0 auto; text-align: center; font: 600 24px/1 serif; color: #000; }
}
