/* Studio Horim
   Layout: an editorial grid with a left rail that carries each section's name set vertically.
   One framed minhwa painting is the only loud element; everything around it stays quiet.
   Single committed look (night indigo + hanji paper bands); no light/dark switch by design. */

:root {
  /* Color: named after the materials they come from */
  --jjok: #14203d;        /* 쪽빛, indigo dye: the night ground */
  --jjok-deep: #0d162c;
  --sosaek: #e5e1d4;      /* 소색, unbleached hanji: the paper ground */
  --meok: #11131a;        /* 먹, ink */
  --inju: #c9391f;        /* 인주, seal paste: the only accent, used for the seal and the live marker */
  --inju-soft: #ee7b60;   /* same hue, legible as small text on indigo */
  --chija: #d2ad5a;       /* 치자, gardenia yellow: focus ring only */

  /* Type */
  --font-display: 'Hahmlet', 'Noto Serif KR', Georgia, serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans KR', system-ui, sans-serif;
  --font-ko: 'Hahmlet', 'Noto Serif KR', 'Batang', serif;
  --t-small: 0.8125rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.35vw, 1.25rem);
  --t-h3: clamp(1.25rem, 1.7vw, 1.5rem);
  --t-h2: clamp(2rem, 4.4vw, 3.5rem);
  --t-hero: clamp(5rem, 13vw, 11.5rem);

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --rail: 104px;
  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--jjok-deep);
  color: var(--sosaek);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--chija); outline-offset: 3px; }
::selection { background: var(--inju); color: var(--sosaek); }
:lang(ko) { word-break: keep-all; }
:lang(ja), :lang(zh) { line-break: strict; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--sosaek); color: var(--meok); padding: 10px 16px; z-index: 100; }
.skip:focus { top: 12px; }

/* Seal (낙관): the brand mark */
.seal { display: inline-grid; grid-template-rows: 1fr 1fr; place-items: center; width: 2em; height: 2em; padding: 0.14em 0; background: var(--inju); color: var(--sosaek); font-family: var(--font-ko); font-weight: 800; font-size: 15px; line-height: 1; flex: none; box-shadow: inset 0 0 0 1.5px var(--inju), inset 0 0 0 2.5px rgba(229, 225, 212, 0.55); }
.seal i { font-style: normal; font-size: 0.74em; }

.arrow { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.25s var(--ease); }

/* ── Header ── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); border-bottom: 1px solid transparent; transition: background 0.3s, border-color 0.3s; }
.site-header.scrolled { background: rgba(13, 22, 44, 0.97); border-color: rgba(229, 225, 212, 0.14); }
.bar { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.01em; white-space: nowrap; }
.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.site-nav a { display: block; padding: 8px 0; font-size: 0.9375rem; color: #b3b9c9; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.site-nav a:hover, .site-nav a.active { color: var(--sosaek); border-color: currentColor; }
.bar-tools { display: flex; align-items: center; gap: 8px; }

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.875rem; border: 1px solid rgba(229, 225, 212, 0.3); user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { border-color: var(--sosaek); }
.lang summary svg { width: 10px; height: 10px; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 170px; padding: 6px; background: var(--jjok-deep); border: 1px solid rgba(229, 225, 212, 0.3); }
.lang li a { display: block; padding: 9px 12px; font-size: 0.9375rem; color: #b3b9c9; }
.lang li a:hover { background: rgba(229, 225, 212, 0.08); color: var(--sosaek); }
.lang li a[aria-current] { color: var(--sosaek); box-shadow: inset 2px 0 0 var(--inju); }

.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid rgba(229, 225, 212, 0.3); background: none; cursor: pointer; padding: 0; place-content: center; gap: 6px; }
.menu-btn i { display: block; width: 16px; height: 1.5px; background: var(--sosaek); transition: transform 0.25s var(--ease); }
.menu-btn[aria-expanded='true'] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded='true'] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ── Hero ── */
.hero { background: var(--jjok-deep); padding-block: calc(var(--header-h) + clamp(20px, 4vw, 44px)) clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.hero-copy { padding-bottom: clamp(0px, 2vw, 24px); min-width: 0; }
.hero-meta { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: #b3b9c9; margin-bottom: clamp(20px, 3vw, 36px); }
.dot { width: 9px; height: 9px; background: var(--inju); flex: none; }
.hero h1 { display: grid; gap: clamp(8px, 1.2vw, 16px); }
.t-main { font-size: var(--t-hero); line-height: 0.92; font-weight: 800; letter-spacing: -0.02em; margin-inline-start: -0.04em; }
:lang(ko) .t-main, :lang(ja) .t-main { letter-spacing: -0.04em; line-height: 1; }
.t-sub { font-size: clamp(1.375rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.2; color: #d3d2cb; }
.tagline { margin-top: clamp(22px, 3vw, 36px); max-width: 30em; font-size: var(--t-lead); color: #c3c7d2; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(26px, 3.4vw, 40px); }

.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; background: var(--sosaek); color: var(--meok); font-weight: 600; font-size: 1rem; border: 1px solid var(--sosaek); transition: background 0.2s, color 0.2s; }
.btn:hover { background: transparent; color: var(--sosaek); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.text-link:hover .arrow { transform: translateX(4px); }

.painting { position: relative; aspect-ratio: 1 / 1; padding: 10px; border: 1px solid rgba(229, 225, 212, 0.4); outline: 1px solid rgba(229, 225, 212, 0.16); outline-offset: 6px; background: var(--jjok-deep); min-width: 0; }
.painting-view { position: relative; width: 100%; height: 100%; overflow: hidden; }
/* Depth layers added by main.js over the single picture (see "Depth" there) */
.painting-view .painting-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s, transform 0.9s var(--ease); }
.painting.layered .painting-layer { opacity: 1; }
.painting-svg, .painting-img { width: 100%; height: 100%; }
.painting-img { object-fit: cover; }
/* 제첨: the title slip pasted on a book cover, here carrying the original Korean title */
.title-slip { position: absolute; top: 28px; inset-inline-start: 28px; writing-mode: vertical-rl; background: var(--sosaek); color: var(--meok); font-family: var(--font-ko); font-weight: 700; font-size: clamp(0.9375rem, 1.3vw, 1.125rem); letter-spacing: 0.2em; padding: 14px 7px 10px; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 0 1px var(--meok); }
.title-slip i { width: 12px; height: 12px; background: var(--inju); }

/* The one orchestrated moment: sun and moon rise once, the sea keeps moving */
.rise { animation: rise 1.8s var(--ease) both; }
.rise.late { animation-delay: 0.25s; }
@keyframes rise { from { transform: translateY(70px); opacity: 0; } }
.wave { animation: drift 26s linear infinite; }
.wave.rev { animation-direction: reverse; animation-duration: 34s; }
@keyframes drift { to { transform: translateX(calc(var(--p) * -1)); } }
.soulfire { animation: bob 5.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes bob { from { transform: translateY(5px); } to { transform: translateY(-7px); } }

/* ── Sections ── */
.section { --fg: var(--sosaek); --muted: #aab1c2; --line: rgba(229, 225, 212, 0.2); --ground: var(--jjok); background: var(--ground); color: var(--fg); padding-block: clamp(72px, 10vw, 136px); }
.section.paper { --fg: var(--meok); --muted: #4d5059; --line: rgba(17, 19, 26, 0.22); --ground: var(--sosaek); position: relative; }
.section.paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .4 0 0 0 0 .34 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section.paper > .wrap { position: relative; }
/* The gardenia focus ring is too faint on paper; use ink there */
.paper :focus-visible { outline-color: var(--meok); outline-width: 3px; }

.railed { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.rail { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; writing-mode: vertical-rl; display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; }
.rail::before { content: ''; width: 1px; height: 44px; background: currentColor; }
.col { min-width: 0; }

.kicker { font-size: 0.9375rem; color: var(--muted); margin-bottom: 14px; }
h2 { font-size: var(--t-h2); line-height: 1.16; letter-spacing: -0.015em; max-width: 17em; }
:lang(ko) h2, :lang(ja) h2, :lang(zh) h2 { line-height: 1.28; letter-spacing: -0.02em; }
.lead { font-size: var(--t-lead); max-width: 36em; margin-top: 24px; color: color-mix(in srgb, var(--fg) 82%, var(--ground)); }
.subhead { font-size: var(--t-h3); font-weight: 600; margin: clamp(56px, 7vw, 88px) 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--fg); }

/* Studio */
.manifesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.prose { display: grid; gap: 1.1em; font-size: var(--t-lead); padding-top: calc(0.9375rem * 1.7 + 14px); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-top: clamp(56px, 7vw, 88px); border-top: 2px solid var(--fg); }
.fact { padding: 18px 0 4px; }
.fact dt { font-size: var(--t-small); color: var(--muted); margin-bottom: 6px; }
.fact dd { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.4; }

.thirds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.thirds li { padding-top: 22px; }
.thirds h3, .thirds h4 { font-size: var(--t-h3); line-height: 1.3; margin-bottom: 10px; }
.thirds p { color: var(--muted); font-size: 1rem; }
.thirds.roomy { margin-top: clamp(48px, 6vw, 72px); }
.thirds.roomy li { border-top: 1px solid var(--line); }

/* Game */
/* 횡권: an optional wide handscroll image, shown only when media/scroll-archipelago exists */
.scroll-band { margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 2 / 1; padding: 8px; border: 1px solid var(--line); }
.scroll-band img { width: 100%; height: 100%; object-fit: cover; }
#game h2 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.pillar { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: 8px; padding: 30px 0 32px; border-top: 1px solid var(--line); align-items: start; }
.mark { display: grid; gap: 6px; }
.mark b { font-family: var(--font-ko); font-weight: 800; font-size: 2.375rem; line-height: 1; letter-spacing: -0.02em; }
.mark span { font-size: var(--t-small); letter-spacing: 0.08em; color: var(--muted); }
.pillar h3 { font-size: var(--t-h3); line-height: 1.3; margin-bottom: 8px; }
.pillar p:not(.mark) { color: var(--muted); font-size: 1rem; }
.note { margin-top: 22px; font-size: var(--t-small); color: var(--muted); }

/* Heritage */
.palette-block { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 64px); align-items: end; }
.palette-head h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.25; margin-bottom: 10px; }
.palette-head p { color: var(--muted); font-size: 1rem; }
/* The four elemental forces: pigment panels, each with its sign. A row of flex items so the one
   under the pointer can take more room. Artwork (media/element-*) fills the panel when present. */
.palette { display: flex; height: clamp(280px, 32vw, 400px); border: 1px solid var(--meok); }
.swatch { position: relative; flex: 1 1 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 14px; background: var(--c); color: var(--sosaek); min-width: 0; }
.swatch + .swatch { border-inline-start: 1px solid var(--meok); }
.swatch.on-light { color: var(--meok); }
/* Anchored to the foot: when a wide panel crops the picture it loses sky above the motif, and the
   plain ground under the name stays where the name is. */
.swatch-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.swatch > span { position: relative; }
.hanja { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; transform-origin: 0 0; }
.swatch-name { margin-top: auto; font-weight: 600; font-size: 0.9375rem; }
.swatch-dir { font-size: var(--t-small); opacity: 0.8; }
/* Paper-coloured small text on the red ground falls under 4.5:1 when dimmed */
.swatch:not(.on-light) .swatch-dir { opacity: 1; }
/* The painted pine sits on the paper: white or transparent ground, so multiply leaves only pigment. */
.horim-pine-img { width: clamp(180px, 20vw, 260px); height: auto; margin: 0 0 24px -12px; mix-blend-mode: multiply; transform-origin: 50% 100%; }

/* IP: four panels of a folding screen (병풍) */
.screen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 72px); border: 1px solid var(--line); }
.panel { display: flex; flex-direction: column; min-height: 17rem; padding: 26px 22px 28px; }
.panel + .panel { border-inline-start: 1px solid var(--line); }
.panel:nth-child(odd) { background: rgba(229, 225, 212, 0.045); }
.panel-tag { font-size: var(--t-small); letter-spacing: 0.14em; color: var(--muted); }
.panel h3 { font-size: var(--t-h3); line-height: 1.3; margin-top: 14px; }
.panel p { margin-top: auto; padding-top: 28px; color: var(--muted); font-size: 1rem; }

.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.stage { padding-top: 20px; border-top: 3px solid transparent; margin-top: -1px; }
.stage.now { border-top-color: var(--inju); }
.stage-label { display: block; font-size: var(--t-small); color: var(--muted); margin-bottom: 8px; }
.stage.now .stage-label { color: var(--inju-soft); font-weight: 600; }
.stage h4 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 8px; }
.stage p { color: var(--muted); font-size: 0.9688rem; }

/* Contact */
.rows { margin-top: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--fg); }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 8px clamp(20px, 4vw, 56px); align-items: baseline; padding: 26px 0; border-top: 1px solid var(--fg); transition: padding 0.25s var(--ease); }
.row h3 { font-size: var(--t-h3); line-height: 1.3; }
.row p { color: var(--muted); font-size: 1rem; }
.row-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
a.row:hover { padding-inline: 12px; }
a.row:hover .arrow { transform: translateX(4px); }

/* Footer */
.site-footer { background: var(--jjok-deep); padding-block: 56px 48px; }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; }
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand > span { display: grid; }
.foot-brand b { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.foot-brand span span { font-size: var(--t-small); color: #aab1c2; }
.foot-langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 24px; padding-block: 20px; border-block: 1px solid rgba(229, 225, 212, 0.2); }
.foot-langs a { font-size: 0.9375rem; color: #aab1c2; padding: 4px 0; }
.foot-langs a:hover, .foot-langs a[aria-current] { color: var(--sosaek); }
.fine { font-size: var(--t-small); color: #8b93a6; }
.to-top { justify-self: end; font-size: 0.9375rem; }

/* Language gate (root index) */
.gate .hero { min-height: 100svh; display: grid; align-items: center; padding-block: 48px; }
.gate-brand .seal { font-size: 24px; }
.t-gate { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 1; font-weight: 800; letter-spacing: -0.02em; margin-top: 22px; display: block; }
.gate-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 36px; max-width: 30rem; border-bottom: 1px solid rgba(229, 225, 212, 0.2); }
.gate-langs a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(229, 225, 212, 0.2); }
.gate-langs a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.gate-langs small { font-size: var(--t-small); color: #8b93a6; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 12px; }
  .screen, .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { min-height: 15rem; }
  .panel:nth-child(3) { border-inline-start: 0; }
  .panel:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .panel:nth-child(odd) { background: none; }
  .panel:nth-child(1), .panel:nth-child(4) { background: rgba(229, 225, 212, 0.045); }
  .stage:nth-child(n + 3) { margin-top: 36px; }
  .stages { border-top: 0; }
}
@media (max-width: 900px) {
  :root { --rail: 0px; }
  .railed { display: block; }
  .rail { position: static; writing-mode: horizontal-tb; margin-bottom: 28px; font-size: 0.9375rem; }
  .rail::before { width: 32px; height: 1px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .painting { order: -1; aspect-ratio: 5 / 4; }
  /* The 5:4 crop would trim the sky down to the sun and moon; keep more sky and lose foreground instead. */
  .painting-img { object-position: 50% 25%; }
  .manifesto, .palette-block { grid-template-columns: minmax(0, 1fr); }
  .prose { padding-top: 0; }
  .thirds { grid-template-columns: minmax(0, 1fr); }
  .thirds li + li { margin-top: 12px; border-top: 1px solid var(--line); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: grid; }
  .bar { gap: 12px; }
  .bar-tools { margin-inline-start: auto; }
  .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; background: var(--jjok-deep); border-bottom: 1px solid rgba(229, 225, 212, 0.2); padding: 4px var(--gutter) 20px; display: none; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 15px 0; font-size: 1.0625rem; border-bottom: 1px solid rgba(229, 225, 212, 0.14); }
  .site-header.menu-open { background: var(--jjok-deep); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .pillar { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .mark b { font-size: 1.875rem; }
  .facts, .screen, .stages { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact { border-top: 1px solid var(--line); margin-top: 12px; }
  .panel { min-height: 0; background: none !important; }
  .panel + .panel { border-inline-start: 0; border-top: 1px solid var(--line); }
  .stage + .stage { margin-top: 32px; }
  .palette { height: 280px; }
  /* Narrow panels: two lines under the motif, not three, or the name sits on the picture */
  .swatch-dir [lang='ko'] { display: none; }
  .swatch { padding: 12px 8px; }
  .swatch-name { font-size: 0.875rem; }
  .horim-pine-img { margin-inline-start: 0; }
  .title-slip { top: 20px; inset-inline-start: 20px; font-size: 0.8125rem; padding: 10px 5px 8px; gap: 8px; }
  .title-slip i { width: 9px; height: 9px; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot-tools { justify-self: start; }
  .swatch-name { font-size: 0.8125rem; }
  .soul-tally { margin-inline-start: -4px; }
  .gate-langs { grid-template-columns: minmax(0, 1fr); }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .wave, .soulfire { animation: none; }
  * { transition-duration: 0.001ms !important; }
}

/* Elements drawn from the approved painting: static, decorative, never interactive. */
.horim-element { display: block; pointer-events: none; color: var(--fg); max-width: 100%; }
.horim-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 병풍: one landscape runs through the four folds. Each fold shows its slice edge to edge, and the
   folds share their rows so the picture sits at the same height in every one. */
.horim-screen-art { width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 2 / 1; margin: 22px -22px 0; }
@supports (grid-template-rows: subgrid) {
  .screen { grid-template-rows: auto auto auto 1fr; }
  .panel { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  .panel p { margin-top: 0; align-self: end; }
}
/* With a painted screen (media/screen-painting) each fold is a window onto its quarter of the one
   3:1 image: the whole quarter, a tall leaf, when the four folds stand in a row. Where the folds
   stack, the window is square and drops the spare sky above and sea below (9.4% and 15.6%). */
.horim-screen-leaf { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.horim-screen-leaf img { position: absolute; top: 0; left: calc(var(--fold) * -100%); width: 400%; max-width: none; height: auto; }
@media (max-width: 1080px) {
  .horim-screen-leaf { aspect-ratio: 1 / 1; }
  .horim-screen-leaf img { transform: translateY(-9.4%); }
}
/* In a row and under a mouse, the whole painting slides a little with the pointer (--pan, set by
   main.js on the screen). All four windows carry the same image with the same transform, so the
   picture stays continuous across the folds. The 3% enlargement is the room it slides in. */
@media (min-width: 1081px) and (hover: hover) and (pointer: fine) {
  .horim-screen-leaf img { transform: translateX(calc(var(--pan, 0) * -1.1%)) scale(1.03); transition: transform 0.9s var(--ease); }
}

/* Two line studies on the paper, large screens only: islands under the studio headline and a pine
   beside the colour swatches. */
.horim-studio-ridge { width: 340px; height: auto; margin: 24px 0 0 -25px; opacity: .5; }
.horim-heritage-pine { width: 240px; height: 140px; margin: 0 0 24px -26px; opacity: .5; }
@media (max-width: 900px) { .horim-studio-ridge, .horim-heritage-pine { display: none; } }

/* The sea at the foot of the game section, where the night ground meets the paper */
#game { padding-bottom: 0; }
/* --h is the height of the water. It follows the width (124:1440, the drawing's own ratio) so the
   drawing is never cropped from the top and the first row of water stays 58% up from the foot.
   The band keeps headroom above the water for the fires, inside its own box so nothing spills. */
.tide { --h: clamp(84px, 8.62vw, 200px); position: relative; padding-top: calc(var(--h) * 0.34); margin-top: calc(clamp(40px, 5vw, 72px) - var(--h) * 0.34); overflow: hidden; }
.horim-game-tide { width: 100%; height: var(--h); }
/* The water sways: alternate rows lean opposite ways, the nearer rows more slowly */
.tide-row { animation: tide-sway calc(9s + var(--r) * 1.7s) ease-in-out infinite alternate; }
.tide-row:nth-of-type(even) { animation-direction: alternate-reverse; }
@keyframes tide-sway { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
.tide-bob { animation: tide-bob calc(3.6s + var(--i) * 0.5s) ease-in-out infinite alternate; }
@keyframes tide-bob { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
/* The fires stand just above the first row of water, sized with the band */
.tide-fire { position: absolute; bottom: calc(var(--h) * 0.6); width: calc(var(--h) * 0.19 * var(--k)); margin-left: calc(var(--h) * -0.095 * var(--k)); cursor: pointer; }
.tide-bob { display: block; }
.tide-fire svg, .tide-fire img { display: block; width: 100%; height: auto; max-width: none; }
/* A sailboat (media/sailboat) crosses the band slowly, riding the first row of water. The span
   carries it across, the image inside rocks. */
/* It passes in front of the fires (a fire drawn over a sail reads as a fire on board) and lets
   clicks through to the fire it is covering. */
.tide-boat { position: absolute; z-index: 1; bottom: calc(var(--h) * 0.46); left: 0; width: clamp(64px, 7.5vw, 110px); pointer-events: none; animation: boat-cross 120s linear -30s infinite; }
.tide-boat img { width: 100%; height: auto; transform-origin: 50% 90%; animation: boat-rock 5s ease-in-out infinite alternate; }
@keyframes boat-cross { from { transform: translateX(-140%); } to { transform: translateX(calc(100vw + 40%)); } }
@keyframes boat-rock { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* ── The living night ──
   Night sections move, paper sections stay still. Stars twinkle behind the text; soul fires rise
   through each night section in lanes at its edges and between its columns. */
.hero, .section:not(.paper), .site-footer { position: relative; }
.hero > .wrap, .section:not(.paper) > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }
.sky, .drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sky { z-index: 0; }
.drift { z-index: 2; container-type: size; --edge: 24px; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--sosaek); opacity: 0.4; animation: twinkle var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes twinkle { from { opacity: 0.1; } to { opacity: 0.75; } }
/* At rest a fire is invisible below the section; the animation carries it up and out the top.
   Without animation (reduced motion) it therefore never shows. */
.soul { position: absolute; bottom: -56px; width: var(--w); margin-left: calc(var(--w) / -2); opacity: 0; pointer-events: auto; cursor: pointer; animation: soul-rise var(--t) linear var(--d) infinite; }
@keyframes soul-rise {
  0% { transform: translateY(0); opacity: 0; }
  5% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(calc(-100cqh - 70px)); opacity: 0; }
}
.soul-sway { display: block; animation: soul-sway var(--sway) ease-in-out infinite alternate; }
@keyframes soul-sway { from { transform: translateX(-8px) rotate(-5deg); } to { transform: translateX(8px) rotate(5deg); } }
.soul svg, .soul img { display: block; width: 100%; height: auto; max-width: none; transition: transform 0.3s var(--ease); }
.soul.gone { visibility: hidden; }
/* A fire is a small target, smaller still on a phone: the area that catches it is wider than the picture */
.soul::after, .tide-fire::after { content: ''; position: absolute; inset: -10px; }
.soul-flying { position: fixed; z-index: 60; margin: 0; pointer-events: none; }
@media (max-width: 900px) { .soul.mid { display: none; } }
/* On a phone the only free lanes are the gutters, so the fires are smaller and hug the edges */
@media (max-width: 560px) {
  .drift { --edge: 10px; }
  .soul { width: calc(var(--w) * 0.7); margin-left: calc(var(--w) * -0.35); }
}

/* The seal keeps count of the fires it has taken in */
.soul-tally { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: -14px; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: #c6e8dc; }
.soul-tally svg, .soul-tally img { width: 13px; height: auto; }
.seal.stamp { animation: seal-stamp 0.45s var(--ease); }
@keyframes seal-stamp { 40% { transform: rotate(-8deg) scale(1.22); } }

/* Reading progress: a seal-red line along the foot of the header */
.progress { position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--inju); transform: scaleX(0); transform-origin: 0 50%; }

/* Contact address and its copy button */
.mail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.mail-addr { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); overflow-wrap: anywhere; user-select: all; }
.copy-btn, .motion-btn { font: inherit; font-size: 0.9375rem; color: inherit; background: none; border: 1px solid currentColor; padding: 8px 14px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.copy-btn:hover, .copy-btn.done { background: var(--fg); color: var(--ground); }
.motion-btn { color: #aab1c2; border-color: rgba(229, 225, 212, 0.3); font-size: var(--t-small); padding: 6px 10px; }
.motion-btn:hover { color: var(--sosaek); border-color: var(--sosaek); }
.foot-tools { justify-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Back to the top, once the first screen is behind */
.top-float { position: fixed; z-index: 40; inset: auto calc(env(safe-area-inset-right, 0px) + 20px) calc(env(safe-area-inset-bottom, 0px) + 20px) auto; display: grid; place-items: center; width: 44px; height: 44px; background: var(--jjok-deep); color: var(--sosaek); border: 1px solid rgba(229, 225, 212, 0.45); transition: background 0.2s, color 0.2s; }
.top-float svg { width: 20px; height: 20px; }
.top-float:hover { background: var(--sosaek); color: var(--meok); }

/* ── Response: what answers a pointer on desktop also answers a tap ──
   main.js marks the tapped item .on and its set .has-on; the same rules serve :hover below. */
.fact dd, .thirds h3, .thirds h4, .stage h4, .panel h3, .mark b { transform-origin: 0 60%; transition: transform 0.3s var(--ease); }
.pillar { transition: opacity 0.3s, border-color 0.3s; }
.swatch { transition: flex-grow 0.45s var(--ease); }
.hanja { transition: transform 0.45s var(--ease); }
.panel { transition: opacity 0.35s, background-color 0.35s; }
.pillars.has-on .pillar:not(.on) { opacity: 0.5; }
.pillar.on { border-top-color: var(--fg); }
.pillar.on .mark b { transform: scale(1.18); }
.swatch.on { flex-grow: 1.5; }
.swatch.on .hanja { transform: scale(1.3); }
.screen.has-on .panel:not(.on) { opacity: 0.45; }
.panel.on h3 { transform: scale(1.06); }

/* The switch in the footer, and the visitor's own setting, stop everything that moves by itself */
[data-motion='off'] .star, [data-motion='off'] .soul, [data-motion='off'] .soul-sway, [data-motion='off'] .tide-row, [data-motion='off'] .tide-bob, [data-motion='off'] .tide-boat, [data-motion='off'] .tide-boat img,
[data-motion='off'] .rise, [data-motion='off'] .wave, [data-motion='off'] .soulfire { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .star, .soul, .soul-sway, .tide-row, .tide-bob, .tide-boat, .tide-boat img, .seal.stamp { animation: none; }
  .tide-boat { display: none; }
}
@media (max-width: 900px) { .soul-tally { margin-inline-start: -2px; } }

/* ── Hover: an answer to the pointer, for devices that have one ──
   The vocabulary is small. Headwords grow from their left edge, rules darken to ink, pictures move
   a little inside their frames, and in a set the one pointed at stays while the others step back.
   Nothing is hidden behind hover and nothing gains a shadow or a glow. */
@media (hover: hover) and (pointer: fine) {
  .seal { transition: transform 0.3s var(--ease); }
  .brand:hover .seal { transform: rotate(-6deg) scale(1.12); }

  /* The painting grows a little and leans away from the pointer; its title slip leans the other
     way, so the slip seems to float above the picture (--px, --py from main.js, -1 to 1). */
  .painting { transition: outline-offset 0.5s var(--ease); }
  .painting-svg, .painting-img { transform: translate(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -9px)) scale(var(--zoom, 1)); transition: transform 0.9s var(--ease); }
  .title-slip { transform: translate(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 5px)); transition: transform 0.9s var(--ease); }
  .painting:hover { outline-offset: 11px; --zoom: 1.05; }
  /* In two layers the view behind moves less and the pines in front move more. At rest the two
     sit exactly on each other and on the single picture below, so nothing changes until the
     pointer arrives. The extra enlargement is the room the front layer needs to travel. */
  .painting-layer.back { transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -5px)) scale(var(--zoom, 1)); }
  .painting-layer.fore { transform: translate(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -14px)) scale(var(--zoom, 1)); }
  .painting.layered:hover { --zoom: 1.07; }

  .soul:hover svg, .soul:hover img { transform: scale(1.45); }

  .btn { transition: background 0.2s, color 0.2s, transform 0.25s var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .gate-langs a { transition: padding 0.25s var(--ease); }
  .gate-langs a:hover { padding-inline-start: 10px; }

  .fact:hover dd { transform: scale(1.06); }
  .thirds li:hover h3, .thirds li:hover h4 { transform: scale(1.06); }
  .thirds.roomy li { transition: border-color 0.3s; }
  .thirds.roomy li:hover { border-top-color: var(--fg); }

  .pillars:hover .pillar:not(:hover) { opacity: 0.5; }
  .pillar:hover { border-top-color: var(--fg); }
  .pillar:hover .mark b { transform: scale(1.18); }

  .swatch:hover { flex-grow: 1.8; }
  .swatch:hover .hanja { transform: scale(1.3); }
  .horim-pine-img { transition: transform 0.6s var(--ease); }
  .horim-pine-img:hover { transform: scale(1.05) rotate(-1.2deg); }

  .screen:hover .panel:not(:hover) { opacity: 0.45; }
  .panel:hover h3 { transform: scale(1.06); }

  .stage { transition: border-color 0.3s; }
  .stage:not(.now):hover { border-top-color: var(--fg); }
  .stage:hover h4 { transform: scale(1.06); }

  a.row { transition: padding 0.25s var(--ease), background-color 0.25s; }
  a.row:hover { background-color: rgba(17, 19, 26, 0.045); }

  /* The soul fires on the water lift, one after another */
  .tide-fire { transition: transform 0.7s var(--ease); transition-delay: calc(var(--i) * 70ms); }
  .tide:hover .tide-fire { transform: translateY(-12px); }
}