/* SOLUNA XII — The End (closing chapter + footer). Scoped to .se */
.se {
  --se-ivory: #F7F1E6;
  --se-bg: #9E3A16;
  --se-line: rgba(247, 241, 230, .25);
  --se-ease: cubic-bezier(.22, .61, .36, 1);
  --se-ease-io: cubic-bezier(.65, 0, .35, 1);
  /* the app mounts #end full-viewport under its terracotta frame: clear the frame,
     the top notch (logo, ~60px) and the fixed counter / sound controls at the bottom */
  --se-top: calc(var(--frame, 0px) + clamp(54px, 7vh, 78px));
  --se-side: calc(var(--frame, 0px) + clamp(16px, 3.4vw, 60px));
  --se-bottom: calc(var(--frame, 0px) + 34px + env(safe-area-inset-bottom, 0px));
  /* when the End scrolls (.is-scroll): the band of fixed chrome along the bottom edge (notch,
     chapter counter, sound button) where content is fully faded out, and the fade above it */
  --se-chrome: calc(var(--frame, 0px) + 32px + env(safe-area-inset-bottom, 0px));
  --se-fade: 48px;
  --arch-h: 560px;
  --u: calc(var(--arch-h) / 640);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--se-ivory);
  font-family: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  z-index: 0;
}
.se *, .se *::before, .se *::after { box-sizing: border-box; }
.se p, .se h2, .se address { margin: 0; }
.se address { font-style: normal; }
.se button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.se :focus-visible { outline: 1px solid var(--se-ivory); outline-offset: 4px; }
.se-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* vault rim: a solid ivory sheet under the clipped .se (a sibling in the #end container); end.js clips
   it to an ellipse a few px larger than the rising dome, so only a thin leading edge shows */
.se-rim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #F7F1E6;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- background: terracotta, soft light, paper grain ---------- */
.se-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 52% at 50% 40%, rgba(247, 241, 230, .05), rgba(247, 241, 230, 0) 72%),
    radial-gradient(ellipse 120% 95% at 50% 46%, rgba(60, 18, 4, 0) 58%, rgba(60, 18, 4, .24) 100%),
    var(--se-bg);
}
.se-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/paper.webp') repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .32;
  pointer-events: none;
}

/* ---------- scroll container (only scrolls on very short screens) ---------- */
.se-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 241, 230, .32) transparent;
}
/* portrait chrome (the app's .mode-portrait: phones and tablets held upright): the language pill and
   the sound button (top at frame + 60px) sit along the bottom edge, with the chapter rail when it is
   shown. The credits rest above that band and a scrolling footer is fully faded before it. */
.mode-portrait .se {
  --se-bottom: calc(var(--frame, 0px) + 66px + env(safe-area-inset-bottom, 0px));
  --se-chrome: calc(var(--frame, 0px) + 60px + env(safe-area-inset-bottom, 0px));
  --se-fade: 40px;
}
/* taller than the screen (phones, short tablets, phones on their side): the footer starts below the
   fold and would otherwise rest under the fixed bottom chrome on first view. The scroller fades out
   across that band, so text dissolves into the terracotta before it reaches the notch, the language
   pill or the rail, and the end of the scroll is padded so the credits come to rest fully clear of it.
   The top edge is cut just below the nav row (its text ends 13-16px above --se-top), so scrolled copy
   never runs under the nav links; all flow content starts at --se-top, so nothing is lost at the top
   of the scroll. end.js sets .is-scroll only while the content overflows. */
.se.is-scroll { --se-bottom: calc(var(--se-chrome) + var(--se-fade) + 2px); }
.se.is-scroll .se-scroll {
  --se-mask: linear-gradient(to bottom,
    transparent calc(var(--se-top) - 12px), #000 var(--se-top),
    #000 calc(100% - var(--se-chrome) - var(--se-fade)),
    rgba(0, 0, 0, .88) calc(100% - var(--se-chrome) - var(--se-fade) * .8),
    rgba(0, 0, 0, .55) calc(100% - var(--se-chrome) - var(--se-fade) * .55),
    rgba(0, 0, 0, .16) calc(100% - var(--se-chrome) - var(--se-fade) * .3),
    transparent calc(100% - var(--se-chrome)));
  -webkit-mask-image: var(--se-mask);
  mask-image: var(--se-mask);
}
.se-scroll::-webkit-scrollbar { width: 6px; }
.se-scroll::-webkit-scrollbar-thumb { background: rgba(247, 241, 230, .3); border-radius: 6px; }
.se-inner {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--se-top) var(--se-side) 0;
}
.se-stars { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; display: block; }

/* ---------- stage + portal ---------- */
.se-stage {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.se-portal {
  position: relative;
  flex: none;
  height: var(--arch-h);
  width: calc(var(--arch-h) * 472 / 640);
}
/* engraved line work: two clear weights (contour / detail), hatched tone under it (end.js) and a hard
   offset shadow so the ivory reads as a relief cut into the terracotta, not a flat stroke */
.se-arch {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block;
  filter: drop-shadow(1px 1.5px 0 rgba(60, 16, 4, .5));
}
.se-arch path {
  fill: none;
  stroke: var(--se-ivory);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
}
.se-arch path.f { stroke-width: 1.2; stroke-opacity: .92; }
.se-arch path.fill { fill: var(--se-ivory); stroke: none; stroke-dasharray: none; }
.se-arch path.h { stroke: none; stroke-dasharray: none; fill-rule: evenodd; }
.se-arch pattern path { stroke: var(--se-ivory); stroke-opacity: .62; stroke-dasharray: none; stroke-linecap: butt; }
.se-rays { transform-box: view-box; transform-origin: 270px 40px; }
.se.is-live .se-rays { animation: se-spin 90s linear infinite; }

/* copy inside the arch opening */
.se-copy {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 22.6%;
  bottom: 2.2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.se-title {
  position: relative;
  display: block;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 400;
  font-size: calc(var(--u) * 118 * var(--fit, 1));
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--se-ivory);
  padding-top: .26em;
}
.se-end { display: block; line-height: .9; white-space: nowrap; font-feature-settings: 'lnum' 1; }
.se-l { display: inline-block; will-change: transform, opacity; }
.se-the {
  position: absolute;
  top: .02em;
  left: 50%;
  margin-left: -.06em;
  font-style: italic;
  font-size: .38em;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}
.se-subtitle {
  margin-top: calc(var(--u) * 8 * var(--fit, 1)) !important;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-size: max(15px, calc(var(--u) * 21));
  line-height: 1.35;
  letter-spacing: .01em;
}
.se-subtitle[hidden] { display: none; }
.se-para {
  margin-top: calc(var(--u) * 20 * var(--fit, 1)) !important;
  max-width: calc(var(--u) * 320);
  font-size: clamp(12px, calc(var(--u) * 19.5 * var(--fit, 1)), 15.5px);
  line-height: 1.58;
  font-weight: 300;
  letter-spacing: .005em;
  text-wrap: pretty;
}
.se-lead { font-weight: 500; }
.se[data-lang="vi"] .se-para { line-height: 1.55; }

/* rotating stamp */
.se-stamp {
  position: relative;
  flex: none;
  margin-top: auto !important;
  width: clamp(66px, calc(var(--u) * 98), 110px);
  height: clamp(66px, calc(var(--u) * 98), 110px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}
.se-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.se-ring text {
  fill: var(--se-ivory);
  font-family: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.6px;
  font-weight: 500;
}
.se.is-live .se-ring { animation: se-spin 26s linear infinite; }
.se-stamp:hover .se-ring, .se-stamp:focus-visible .se-ring { animation-play-state: paused; }
.se-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--se-ivory);
  transition: transform .6s var(--se-ease), box-shadow .6s var(--se-ease);
}
.se-stamp:hover .se-dot, .se-stamp:focus-visible .se-dot { transform: scale(1.7); box-shadow: 0 0 0 6px rgba(247, 241, 230, .14); }
.se-stamp:focus-visible { outline-offset: 2px; }
@keyframes se-spin { to { transform: rotate(360deg); } }

/* compact (narrow arch): the paragraph moves under the portal */
.se-after { display: none; }
.se.is-compact .se-after { display: block; width: min(34em, 100%); padding: 26px 4px 30px; text-align: center; }
.se.is-compact .se-after .se-para { margin: 0 auto !important; max-width: 31em; font-size: 15px; line-height: 1.62; }
.se.is-compact .se-copy { top: 24%; justify-content: center; padding-bottom: 7%; }
.se.is-compact .se-stamp { margin-top: calc(var(--u) * 52) !important; }

/* ---------- footer ---------- */
.se-foot {
  position: relative;
  flex: none;
  margin: 0 calc(-1 * var(--se-side));
  padding: 0 var(--se-side);
}
.se-hair { height: 1px; background: var(--se-line); transform-origin: 50% 50%; }
.se-cols {
  display: grid;
  grid-template-columns: 1.15fr .95fr .95fr 1.2fr;
  gap: 18px clamp(24px, 3.4vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(12px, 2.1vh, 26px) 0 clamp(8px, 1.3vh, 16px);
  font-size: clamp(13px, .95vw, 14.5px);
  line-height: 1.55;
}
.se-col { min-width: 0; will-change: transform, opacity; }
.se-col-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.se-word {
  display: block;
  width: clamp(128px, 11vw, 168px);
  height: auto;
  filter: brightness(0) invert(.96) sepia(.18);
  margin-bottom: 4px;
}
.se-cafe { font-size: 13px; letter-spacing: .26em; text-transform: uppercase; }
.se-tag { font-family: 'Playfair Display', 'Times New Roman', serif; font-style: italic; font-size: 14.5px; letter-spacing: .02em; white-space: nowrap; }
.se-k { font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .9; margin-bottom: 6px !important; }
.se[data-lang="vi"] .se-k { text-transform: none; letter-spacing: .1em; font-size: 13px; }
.se-v strong, .se-addr strong { font-weight: 500; }
.se-date { font-weight: 500; letter-spacing: .06em; }
.se-hours { opacity: .95; }
.se-contact .se-v { margin-top: 2px; }
.se-inline { color: inherit; text-decoration: underline; text-decoration-color: rgba(247, 241, 230, .45); text-underline-offset: 3px; }
.se-col-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.se .se-link {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  color: var(--se-ivory);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: left;
}
.se[data-lang="vi"] .se-link { text-transform: none; letter-spacing: .08em; font-size: 14px; }
.se-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 20px;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--se-ease);
  opacity: .7;
}
.se-link:hover::after, .se-link:focus-visible::after { transform: scaleX(1); }
.se-arr { display: inline-block; width: 11px; height: 11px; margin-left: 9px; vertical-align: -1px; overflow: visible; transition: transform .5s var(--se-ease); }
.se-arr path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.se-link:hover .se-arr, .se-link:focus-visible .se-arr { transform: translateX(3px); }
.se-link[data-goto]:hover .se-arr, .se-link[data-goto]:focus-visible .se-arr { transform: translateY(-3px); }
.se-link[target]:hover .se-arr, .se-link[target]:focus-visible .se-arr { transform: translate(2px, -2px); }
.se-credits {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 0 var(--se-bottom);
  border-top: 1px solid rgba(247, 241, 230, .14);
  font-size: 13px;
  letter-spacing: .12em;
  text-align: center;
  opacity: .92;
}

/* 1x laptop screens: keep the small arch copy a touch heavier for legibility */
@media (max-width: 1366px) and (min-width: 561px) {
  .se-para { font-weight: 400; }
}
/* short laptop screens (1366x768 / 1280x720 minus browser chrome, ~650px tall): a tighter
   footer so the arch, its copy and the footer share one viewport without scrolling.
   Credits keep ~7px clear of the bottom notch; link rows stay 24px tall (target size). */
@media (min-width: 901px) and (max-height: 760px) {
  .se { --se-bottom: calc(var(--frame, 0px) + 26px + env(safe-area-inset-bottom, 0px)); }
  .se-cols { padding: clamp(8px, 1.4vh, 12px) 0 4px; }
  .se-col-brand { gap: 3px; }
  .se-word { width: clamp(120px, 10vw, 150px); margin-bottom: 3px; }
  .se-k { margin-bottom: 3px !important; }
  .se-col-links { gap: 0; }
  .se .se-link { padding: 2.25px 0; }
  .se-credits { padding-top: 6px; }
}
/* tablet: 2 x 2 footer */
@media (max-width: 900px) {
  .se-cols { grid-template-columns: 1fr 1fr; gap: 20px 28px; }
}
/* phones */
@media (max-width: 560px) {
  .se { --se-top: calc(var(--frame, 0px) + 50px); }   /* bottom clearance: .mode-portrait .se above */
  .se-cols { grid-template-columns: 1fr 1fr; gap: 22px 20px; padding-top: 24px; text-align: left; }
  .se-col-brand { grid-column: 1 / -1; align-items: center; text-align: center; }
  .se-col-links { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .se .se-link { font-size: 12.5px; letter-spacing: .14em; }
  .se[data-lang="vi"] .se-link { font-size: 13.5px; }
  .se-credits { text-align: center; }
}
/* short landscape screens (phones on their side) */
@media (max-height: 480px) and (orientation: landscape) {
  .se { --se-top: calc(var(--frame, 0px) + 44px); --se-bottom: calc(var(--frame, 0px) + 44px); --se-fade: 36px; }
}
@media (max-height: 480px) and (orientation: landscape) and (min-width: 700px) {
  .se-cols { grid-template-columns: 1.35fr .95fr .95fr 1.15fr; gap: 16px 22px; }
  .se-tag { font-size: 13.5px; }
}

/* reduced motion: no rotation, no drawing — a simple fade (handled in end.js) */
.se.is-still .se-ring, .se.is-still .se-rays { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .se.is-live .se-ring, .se.is-live .se-rays { animation: none; }
  .se-dot, .se-link::after, .se-arr { transition: none; }
}