/* ==========================================================================
   GameNobility 遊戲貴族 — Design system v4 "The Studio Tavern, refined"
   保留：酒館場景與燭光明暗、貴族犬標誌翻面、六種需求卡、奶油底 × 深森林綠 × 金。
   精簡：一個主色、一種標題字（明體）、一種圓角；每段只講一件事，動態只放在會被注意的地方。
   ========================================================================== */

:root {
  /* color */
  --cream: #faf7ef;          /* page */
  --ivory: #faf7ef;          /* legacy name */
  --paper: #f2ecdf;          /* quiet band */
  --card: #fffdf8;
  --white: #ffffff;
  --green: #183327;          /* primary */
  --deep: #10271e;           /* night / footer */
  --ink: #183327;            /* legacy name: the darkest brand color */
  --ink-2: #1f3a2d;
  --ink-3: #2c4d3b;
  --text: #24291f;
  --muted: #6a6b5f;
  --line: #e4dccb;
  --line-2: #d6ccb6;
  --gold: #dab567;           /* light gold, on green */
  --gold-hi: #f3e3bd;
  --gold-lo: #94692a;        /* readable gold on cream */
  --on-ink: #f6f0e1;
  --on-ink-muted: #b9c2b1;
  --line-green: #06c755;
  --dk-forest: #263a2d;
  --dk-sand: #e4c66f;

  /* type */
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --latin: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --head: var(--serif);
  --display: var(--latin);
  --mono: var(--sans);       /* legacy name: small labels */
  --serif-latin: var(--latin);
  --serif-tc: var(--serif);

  /* shape & motion */
  --r: 16px;
  --r-sm: 10px;
  --r-lg: 24px;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 84px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 24px 48px -32px rgba(16, 39, 30, 0.45);
}

*, *::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; font-family: var(--sans); font-size: 1rem; line-height: 1.85; letter-spacing: 0.02em;
  color: var(--text); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background 0.8s var(--ease);
}
html[lang="en"] body { letter-spacing: 0; line-height: 1.7; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
em { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: var(--gold-hi); color: var(--green); }
:focus-visible { outline: 2px solid var(--gold-lo); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--green); color: var(--cream); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- type helpers */
.kicker, .eyebrow, .label {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lo);
}
.h2 { font-family: var(--head); font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: var(--green); text-wrap: balance; }
.h2 em, h1 em, h2 em { color: var(--gold-lo); }
html[lang="en"] .h2 { font-family: var(--latin); font-weight: 600; font-size: clamp(2.1rem, 3.8vw, 3.1rem); letter-spacing: 0; line-height: 1.12; }
.lede { font-size: 1rem; line-height: 1.95; color: var(--muted); max-width: 36em; }
html[lang="en"] .lede { line-height: 1.7; }
.num { font-family: var(--latin); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.s-ink .lede { color: var(--on-ink-muted); }

/* ---------------------------------------------------------------- sections (shared with inner pages) */
.section { padding-block: clamp(80px, 10vw, 140px); position: relative; }
.s-ivory { background: var(--cream); }
.s-paper { background: var(--paper); }
.s-ink { background: var(--green); color: var(--on-ink); }
.s-ink .h2 { color: var(--on-ink); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 60px); max-width: 860px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head > div { display: grid; gap: 14px; }
.sec-side { display: grid; gap: 14px; justify-items: start; max-width: 26em; }

/* ---------------------------------------------------------------- buttons: pills */
.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 30px; border-radius: 999px; border: 1px solid var(--green); background: var(--green); color: var(--cream);
  font-weight: 700; font-size: 0.97rem; letter-spacing: 0.06em; line-height: 1.2; white-space: nowrap;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.3s var(--ease);
}
html[lang="en"] .btn { letter-spacing: 0.01em; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: translateY(101%); border-radius: inherit; transition: transform 0.5s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--green); border-color: var(--gold); }
.btn:active { transform: scale(0.98); }
.btn-ink { background: var(--green); color: var(--cream); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--green); }
.btn-gold::before { background: var(--cream); }
.btn-gold:hover, .btn-gold:focus-visible { border-color: var(--cream); }
.btn-outline, .btn-ghost { background: transparent; color: var(--green); }
.s-ink .btn-outline, .btn-ghost { color: var(--on-ink); border-color: rgba(246, 240, 225, 0.5); }
.btn-sm { min-height: 44px; padding: 0 22px; font-size: 0.9rem; }

/* text link: a fine underline that redraws on hover */
.tlink, .arrow, .alt, .more, .go {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--green);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px;
  transition: background-size 0.45s var(--ease), color 0.3s;
}
.tlink:hover, .arrow:hover, .alt:hover, a:hover > .more, a:hover > .go { background-size: 0 1px; background-position: 100% 100%; color: var(--gold-lo); }

.chip { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.9rem; font-weight: 500; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.chip:hover { border-color: var(--green); }
.chip[aria-pressed="true"] { background: var(--green); color: var(--cream); border-color: var(--green); }

/* ---------------------------------------------------------------- Nobility mark: dog <-> game face, flips on hover/focus */
.mk { position: relative; display: inline-block; width: 44px; height: 38px; perspective: 600px; color: var(--gold-lo); flex: none; }
.mk-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1); }
.mk-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mk-face.nobility-game { transform: rotateY(180deg); }
/* only the header logo reacts: touch / hover flips it to the game face and turns it a quarter */
.site-header .brand .mk { transition: rotate 0.6s cubic-bezier(0.2, 0.65, 0.3, 1), color 0.4s; }
.site-header .brand:hover .mk, .site-header .brand:focus-visible .mk, .site-header .brand:active .mk { rotate: 90deg; color: var(--gold-lo); }
.site-header .brand:hover .mk-flip, .site-header .brand:focus-visible .mk-flip, .site-header .brand:active .mk-flip { transform: rotateY(180deg); }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 239, 0.88); backdrop-filter: blur(14px); transition: background 0.8s var(--ease), box-shadow 0.4s, transform 0.5s var(--ease); }
.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.bar { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--green); }
.brand .mk { width: 46px; height: 42px; color: var(--gold); }
.brand-name { display: flex; flex-direction: column; font-family: Georgia, "Times New Roman", "Noto Serif TC", serif; font-weight: 700; font-size: 28px; line-height: 0.95; letter-spacing: -1.2px; }
.brand-name > span { display: flex; align-items: center; gap: 7px; font-size: 17px; line-height: 1.1; letter-spacing: -0.5px; }
.brand-name small { writing-mode: vertical-rl; height: 30px; font-family: var(--sans); font-size: 7px; font-weight: 500; letter-spacing: 1px; line-height: 1.1; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.nav a { position: relative; font-size: 0.95rem; font-weight: 500; white-space: nowrap; padding: 6px 0; color: var(--green); }
.nav a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateX(-50%) scale(0); transition: transform 0.35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.nav .lang { display: flex; gap: 12px; padding-left: 20px; border-left: 1px solid var(--line-2); }
.nav .lang a { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.nav .lang a[aria-current="true"] { color: var(--green); }
.nav .lang a::after { display: none; }
.nav .nav-cta { display: none; }
.bar-right { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; width: 48px; height: 48px; position: relative; z-index: 2; }
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { position: absolute; left: 13px; width: 22px; height: 1.5px; background: var(--green); transition: transform 0.4s var(--ease), background 0.2s; }
.nav-toggle i { top: 23px; }
.nav-toggle i::before { content: ""; left: 0; top: -7px; }
.nav-toggle i::after { content: ""; left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero: copy + the studio tavern (candle switches day / night) */
.hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(72px, 9vw, 120px); transition: background 0.8s var(--ease), color 0.8s var(--ease); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 5.2vw, 4.7rem); line-height: 1.3; letter-spacing: 0.04em; color: var(--green); transition: color 0.8s var(--ease); }
html[lang="en"] .hero h1 { font-family: var(--latin); font-weight: 600; font-size: clamp(2.9rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.01em; }
.hero h1 em { color: var(--gold-lo); transition: color 0.8s var(--ease); }
.hero-sub { font-size: 1.06rem; color: var(--text); max-width: 26em; transition: color 0.8s var(--ease); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.hero-note { font-size: 0.86rem; color: var(--muted); transition: color 0.8s var(--ease); }

.tavern { display: grid; gap: 14px; }
.tavern-label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--green); transition: color 0.8s var(--ease); }
.tavern-label .mk { width: 30px; height: 26px; }
.tavern-label small { margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.scene { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #2b2118; box-shadow: 0 40px 80px -40px rgba(16, 39, 30, 0.55), 0 0 0 1px rgba(16, 39, 30, 0.06); }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease), filter 0.8s var(--ease); }
.scene:hover > img { transform: scale(1.04); }
/* night: everything dims except the lamps and the candle (holes in a dark layer) */
.scene-night { position: absolute; inset: 0; background: #07120d; opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 8% 12% at 55.7% 76.5%, transparent 0 30%, #000 100%), radial-gradient(ellipse 13% 15% at 21.6% 23%, transparent 0 25%, #000 100%), radial-gradient(ellipse 13% 15% at 60.6% 47%, transparent 0 25%, #000 100%), radial-gradient(ellipse 8% 9% at 32% 11%, transparent 0 20%, #000 100%), radial-gradient(ellipse 8% 9% at 47% 11%, transparent 0 20%, #000 100%);
  -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 8% 12% at 55.7% 76.5%, transparent 0 30%, #000 100%), radial-gradient(ellipse 13% 15% at 21.6% 23%, transparent 0 25%, #000 100%), radial-gradient(ellipse 13% 15% at 60.6% 47%, transparent 0 25%, #000 100%), radial-gradient(ellipse 8% 9% at 32% 11%, transparent 0 20%, #000 100%), radial-gradient(ellipse 8% 9% at 47% 11%, transparent 0 20%, #000 100%);
  mask-composite: intersect; }
.tavern-cap { font-size: 0.82rem; color: var(--muted); text-align: right; transition: color 0.8s var(--ease); }

.spot { position: absolute; left: var(--x); top: var(--y); z-index: 3; }
.spot-dot { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.spot-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff1cf; box-shadow: 0 0 10px 3px rgba(240, 205, 125, 0.6); transition: transform 0.3s var(--ease); }
.spot-dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid rgba(255, 236, 196, 0.8); animation: breathe 3.2s ease-in-out infinite; }
.spot-dot:hover::before, .spot-dot[aria-expanded="true"]::before { transform: scale(1.4); }
@keyframes breathe { 0%, 100% { transform: scale(0.8); opacity: 0.9; } 50% { transform: scale(1.5); opacity: 0; } }
.spot-card { position: absolute; left: 26px; top: -18px; width: min(300px, 70vw); display: grid; gap: 8px; padding: 18px 20px 20px; border-radius: var(--r); background: rgba(255, 253, 248, 0.97); color: var(--text); box-shadow: 0 24px 48px -20px rgba(7, 18, 13, 0.6); animation: card-in 0.45s var(--ease); }
.spot.left .spot-card { left: auto; right: 26px; }
.spot-card .kicker { font-size: 0.66rem; }
.spot-t { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--green); line-height: 1.5; }
.spot-card p:not(.kicker):not(.spot-t) { font-size: 0.88rem; color: var(--muted); line-height: 1.75; }
.spot-card .tlink { justify-self: start; margin-top: 4px; font-size: 0.88rem; }
.spot-x { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; color: var(--muted); }
.spot-x:hover { background: var(--paper); color: var(--green); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.candle { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 56px; height: 64px; margin: -40px 0 0 -28px; border-radius: 50%; }
.candle::before { content: ""; position: absolute; left: 50%; top: 46%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1px dashed rgba(255, 236, 196, 0.75); animation: spin 14s linear infinite; }
.candle-hint { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 0); white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: rgba(16, 39, 30, 0.82); color: #f6e7c4; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; animation: hint 3.6s ease-in-out infinite; }
.candle:hover .candle-hint, .candle:focus-visible .candle-hint { animation: none; opacity: 1; }
@keyframes hint { 0%, 100% { opacity: 0.55; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, -3px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* night ambience (candle off): the page around the scene goes dark too */
html[data-ambience="night"] body { background: var(--deep); }
html[data-ambience="night"] .site-header { background: rgba(16, 39, 30, 0.9); }
html[data-ambience="night"] .site-header .brand, html[data-ambience="night"] .site-header .nav a { color: var(--on-ink); }
html[data-ambience="night"] .site-header .mk { color: var(--gold); }
html[data-ambience="night"] .site-header .nav-toggle i, html[data-ambience="night"] .site-header .nav-toggle i::before, html[data-ambience="night"] .site-header .nav-toggle i::after { background: var(--on-ink); }
html[data-ambience="night"] .site-header .btn-ink { background: var(--gold); border-color: var(--gold); color: var(--green); }
html[data-ambience="night"] .hero { background: var(--deep); }
html[data-ambience="night"] .hero h1, html[data-ambience="night"] .tavern-label { color: var(--on-ink); }
html[data-ambience="night"] .hero h1 em { color: var(--gold); }
html[data-ambience="night"] .hero-sub { color: #e2e5d8; }
html[data-ambience="night"] .hero-note, html[data-ambience="night"] .tavern-cap { color: var(--on-ink-muted); }
html[data-ambience="night"] .hero .kicker, html[data-ambience="night"] .tavern-label .mk { color: var(--gold); }
html[data-ambience="night"] .hero .tlink { color: var(--on-ink); }
html[data-ambience="night"] .hero .btn-ink { background: var(--gold); border-color: var(--gold); color: var(--green); }
html[data-ambience="night"] .hero .btn-ink::before { background: var(--cream); }
html[data-ambience="night"] .scene-night { opacity: 0.74; }
html[data-ambience="night"] .scene > img { filter: saturate(1.1); }
html[data-ambience="night"] .spot-dot::before { box-shadow: 0 0 16px 6px rgba(240, 205, 125, 0.75); }

/* ---------------------------------------------------------------- six needs: cards that open a tabbed panel */
.needs-sec { background: var(--paper); }
.need-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.need {
  position: relative; width: 100%; height: 100%; min-height: 200px; display: grid; align-content: start; gap: 12px; text-align: left;
  padding: 20px 18px 52px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), border-color 0.3s, background 0.3s, box-shadow 0.45s var(--ease);
}
.need:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.need[aria-expanded="true"] { background: color-mix(in srgb, var(--bg) 34%, var(--card)); border-color: var(--green); }
.need-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--green); transition: transform 0.5s var(--ease); }
.need:hover .need-ic { transform: rotate(-6deg) scale(1.06); }
.need-ic .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.need-t { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.45; color: var(--green); }
.need-tags { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.need-plus { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.45s var(--ease), background 0.3s, border-color 0.3s; }
.need-plus::before, .need-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; background: var(--green); }
.need-plus::after { transform: rotate(90deg); }
.need[aria-expanded="true"] .need-plus { transform: rotate(45deg); background: var(--green); border-color: var(--green); }
.need[aria-expanded="true"] .need-plus::before, .need[aria-expanded="true"] .need-plus::after { background: var(--cream); }
.need-grid.deal li { animation: deal 0.8s var(--ease) both; animation-delay: calc(var(--k, 0) * 70ms); }
.need-grid li:nth-child(1) { --k: 0; } .need-grid li:nth-child(2) { --k: 1; } .need-grid li:nth-child(3) { --k: 2; }
.need-grid li:nth-child(4) { --k: 3; } .need-grid li:nth-child(5) { --k: 4; } .need-grid li:nth-child(6) { --k: 5; }
@keyframes deal { from { opacity: 0; transform: translateY(26px) rotate(-1.5deg); } }

.need-panels { margin-top: 16px; }
.need-panel { position: relative; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; animation: panel-in 0.55s var(--ease); }
.need-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--bg); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }
.need-panel header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 32px; padding: clamp(26px, 3vw, 40px) clamp(22px, 3.4vw, 48px) 22px; }
.need-panel header .kicker { grid-column: 1 / -1; }
.need-panel h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; color: var(--green); line-height: 1.4; }
.np-cta { display: flex; align-items: center; gap: 22px; }
.np-close { position: absolute; right: 18px; top: 16px; font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 6px 12px; border-radius: 999px; }
.np-close:hover { background: var(--paper); color: var(--green); }
.np-body { padding: 0 clamp(22px, 3.4vw, 48px) clamp(26px, 3vw, 40px); }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); margin-bottom: 28px; }
.tabs [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; font-size: 0.92rem; font-weight: 700; color: var(--muted); transition: background 0.35s var(--ease), color 0.35s; }
.tabs [role="tab"] .num { font-size: 0.82rem; color: var(--gold-lo); }
.tabs [role="tab"]:hover { color: var(--green); }
.tabs [role="tab"][aria-selected="true"] { background: var(--green); color: var(--cream); }
.tabs [role="tab"][aria-selected="true"] .num { color: var(--gold); }
.pane { animation: card-in 0.4s var(--ease); }
.pane h4 { font-size: 0.92rem; font-weight: 700; color: var(--green); margin-bottom: 8px; }
.pane p + h4 { margin-top: 18px; }
.pane p { color: var(--muted); font-size: 0.95rem; }
.pane-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.starts { display: grid; gap: 10px; }
.starts div { padding: 10px 0 10px 16px; border-left: 2px solid var(--gold); }
.starts dt { font-size: 0.78rem; font-weight: 700; color: var(--gold-lo); }
.starts dd { font-size: 0.95rem; }
.how { display: grid; gap: 10px; }
.how li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; font-size: 0.95rem; }
.how .num { color: var(--gold-lo); font-size: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border-radius: 999px; background: var(--paper); font-size: 0.86rem; }
.pane-case { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.pane-case img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); transition: transform 0.8s var(--ease); }
.pane-case:hover img { transform: scale(1.02); }
.pane-case > span { display: grid; gap: 8px; justify-items: start; }
.pane-case small { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-lo); }
.pane-case b { font-family: var(--serif); font-size: 1.4rem; color: var(--green); }
.pane-case em { color: var(--muted); }

/* ---------------------------------------------------------------- works rail */
.works-sec { overflow: hidden; }
.rail-track { display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px max(var(--gutter), (100vw - var(--wrap)) / 2) 12px; scroll-padding-inline: max(var(--gutter), (100vw - var(--wrap)) / 2); cursor: grab; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail-track.is-dragging a { pointer-events: none; }
.wcard { flex: 0 0 clamp(270px, 30vw, 400px); scroll-snap-align: start; }
.wcard a { display: grid; gap: 16px; }
.wimg { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.wimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); -webkit-user-drag: none; }
.wcard a:hover .wimg img { transform: scale(1.05); }
.wtype { position: absolute; left: 14px; top: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 253, 248, 0.92); font-size: 0.74rem; font-weight: 700; color: var(--green); }
.wmeta { display: grid; gap: 4px; }
.wmeta small { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-lo); text-transform: uppercase; }
.wmeta b { font-family: var(--serif); font-size: 1.25rem; color: var(--green); line-height: 1.5; }
.wmeta span { font-size: 0.9rem; color: var(--muted); }
.rail-ui { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px; margin-top: 28px; }
.rail-hint { font-size: 0.82rem; color: var(--muted); }
.rail-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: var(--thumb, 30%); background: var(--green); border-radius: 2px; transform: translateX(var(--pos, 0%)); transition: transform 0.2s linear; }
.rail-count { font-size: 1rem; color: var(--muted); }
.rail-count b { color: var(--green); }
.rail-btns { display: flex; gap: 8px; }
.rail-btns button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: background 0.3s, border-color 0.3s; }
.rail-btns button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid var(--green); border-left: 1.5px solid var(--green); }
.rail-prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.rail-next::before { transform: translate(-70%, -50%) rotate(135deg); }
.rail-btns button:hover:not(:disabled) { background: var(--green); border-color: var(--green); }
.rail-btns button:hover:not(:disabled)::before { border-color: var(--cream); }
.rail-btns button:disabled { opacity: 0.35; cursor: default; }


/* trust ticker */
.ticker { border-block: 1px solid var(--line); background: var(--cream); overflow: hidden; }
.ticker-in { display: flex; align-items: center; gap: 28px; }
.ticker-label { flex: none; font-size: 0.8rem; color: var(--muted); padding-right: 24px; border-right: 1px solid var(--line); }
.marquee { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.marquee ul { display: flex; align-items: center; }
.marquee li { display: flex; align-items: center; gap: 34px; padding-right: 34px; height: 76px; font-weight: 700; font-size: 1.05rem; color: var(--ink-3); white-space: nowrap; }
.marquee li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- process + budget */
.proc { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.proc::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line-2); }
.proc::after { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--gold-lo); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) 0.2s; }
.proc.in::after { transform: scaleX(1); }
.proc li { position: relative; display: grid; gap: 10px; align-content: start; }
.proc .num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); border: 1px solid var(--line-2); font-size: 1.25rem; color: var(--gold-lo); margin-bottom: 8px; transition: background 0.5s, color 0.5s, border-color 0.5s; transition-delay: calc(0.35s * var(--k) + 0.3s); }
.proc.in .num { background: var(--green); color: var(--gold); border-color: var(--green); }
.proc h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--green); }
.proc p { color: var(--muted); font-size: 0.94rem; line-height: 1.8; }
.budget { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; margin-top: clamp(48px, 6vw, 72px); padding: clamp(28px, 3.6vw, 44px); border-radius: var(--r-lg); background: var(--paper); }
.budget > div { display: grid; gap: 8px; }
.budget h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; color: var(--green); }
.budget p:not(.kicker) { color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; counter-reset: s; }
.step { counter-increment: s; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.step::before { content: counter(s, decimal-leading-zero); font-family: var(--latin); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--gold-lo); }
.step h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--green); }
.step p { color: var(--muted); font-size: 0.94rem; }

/* ---------------------------------------------------------------- DreamKeeper band */
.dkband { position: relative; overflow: hidden; background: var(--green); color: var(--on-ink); padding-block: clamp(80px, 10vw, 130px); }
.dkband-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dkband .kicker { color: var(--gold); }
.dkband h2 { margin: 18px 0 20px; font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.45; letter-spacing: 0.04em; }
html[lang="en"] .dkband h2 { font-family: var(--latin); font-weight: 600; letter-spacing: 0; line-height: 1.12; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.dkband p { color: #dfe3d3; max-width: 32em; }
.dkband-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.dkband .tlink { color: var(--on-ink); }
.dkband .note { margin-top: 18px; font-size: 0.8rem; color: var(--on-ink-muted); }
.dkband-art { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; display: grid; place-items: center; }
.dkband-art .halo { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(218, 181, 103, 0.45); animation: halo 3.6s var(--ease) infinite; }
.dkband-art .halo:nth-child(3) { animation-delay: 1.2s; }
.dkband-art .halo:nth-child(4) { animation-delay: 2.4s; }
.dkband-art img { position: relative; width: 74%; animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.28)); }
@keyframes halo { from { transform: scale(0.82); opacity: 0.9; } to { transform: scale(1.18); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-14px) rotate(-2deg); } }

/* ---------------------------------------------------------------- faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); }
.faq-wrap > header, .faq-wrap > .section-head { display: grid; gap: 14px; align-content: start; }
.faq { border-top: 1px solid var(--green); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 700; font-size: 1.06rem; line-height: 1.6; color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; font-family: var(--sans); font-weight: 400; font-size: 1.1rem; color: var(--gold-lo); }
.faq details[open] summary::after { content: "－"; }
.faq .ans { padding: 0 48px 26px 0; color: var(--muted); animation: card-in 0.35s var(--ease); }

/* ---------------------------------------------------------------- closing CTA */
.endcta { position: relative; overflow: hidden; background: var(--deep); color: var(--on-ink); padding-block: clamp(96px, 12vw, 160px); text-align: center; }
.endcta::before { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -62%); border-radius: 50%; background: radial-gradient(closest-side, rgba(218, 181, 103, 0.22), transparent); pointer-events: none; }
.end-in { position: relative; display: grid; justify-items: center; gap: 20px; }
.end-mark { width: 64px; height: 56px; color: var(--gold); }
.endcta .kicker { color: var(--gold); }
.endcta h2 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.35; letter-spacing: 0.04em; }
html[lang="en"] .endcta h2 { font-family: var(--latin); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.endcta h2 em { color: var(--gold); }
.end-p { color: var(--on-ink-muted); max-width: 30em; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.end-direct { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-top: 18px; font-size: 0.9rem; color: var(--on-ink-muted); }
.end-direct a { color: var(--on-ink); font-weight: 700; }

/* LINE button with a soft looping ripple */
.line-card { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 24px 0 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--green); font-weight: 700; }
.line-card b { display: block; font-size: 0.95rem; line-height: 1.3; }
.line-card small { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.ico { position: relative; width: 38px; height: 38px; display: grid; place-items: center; flex: none; }
.line-ic { width: 38px; height: 38px; position: relative; z-index: 1; }
.rip { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line-green); opacity: 0; animation: ripple 2.6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.85s); }
@keyframes ripple { from { transform: scale(0.9); opacity: 0.7; } to { transform: scale(2.1); opacity: 0; } }
.line-fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 58px; height: 58px; display: grid; place-items: center; }
.line-fab .line-ic { width: 58px; height: 58px; filter: drop-shadow(0 10px 18px rgba(6, 100, 50, 0.3)); }
.line-fab .tip { position: absolute; right: 70px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--green); color: var(--cream); font-size: 0.82rem; font-weight: 700; opacity: 0; transform: translateX(8px); transition: 0.3s var(--ease); pointer-events: none; }
.line-fab:hover .tip, .line-fab:focus-visible .tip { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #0c1f17; color: var(--on-ink); padding: clamp(72px, 8vw, 100px) 0 30px; }
.site-footer .brand { color: var(--on-ink); }
.site-footer .mk { color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand { display: grid; gap: 22px; align-content: start; }
.foot-brand p { color: var(--on-ink-muted); font-size: 0.92rem; max-width: 26em; }
.site-footer h2 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.site-footer li + li { margin-top: 8px; }
.site-footer ul a, .site-footer address a { transition: color 0.2s; }
.site-footer ul a:hover, .site-footer address a:hover { color: var(--gold); }
.site-footer address { font-style: normal; font-size: 0.92rem; line-height: 1.9; }
.foot-word { margin-top: clamp(56px, 7vw, 96px); font-family: var(--latin); font-weight: 600; font-style: italic; font-size: clamp(3.2rem, 11vw, 10rem); line-height: 0.85; letter-spacing: -0.02em; color: #183327; white-space: nowrap; user-select: none; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #1e3328; font-size: 0.8rem; color: var(--on-ink-muted); }
.foot-bottom button { text-decoration: underline; text-underline-offset: 3px; color: inherit; font-size: inherit; }

/* easter egg */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 250; overflow: hidden; }
#fx img { position: absolute; top: -120px; width: 72px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(120vh) rotate(var(--r, 360deg)); } }
.toast { position: fixed; left: 50%; top: 100px; z-index: 260; padding: 12px 22px; border-radius: 999px; background: var(--green); color: var(--cream); font-weight: 700; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: 0.4s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- contact page */
.ct { padding: clamp(40px, 6vw, 88px) 0 clamp(80px, 10vw, 130px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.ct-side { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 26px; }
.ct-side h1 { font-family: var(--serif); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; color: var(--green); }
html[lang="en"] .ct-side h1 { font-family: var(--latin); font-weight: 600; letter-spacing: 0; line-height: 1.05; }
.ct-points { border-top: 1px solid var(--green); }
.ct-points li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 0.95rem; }
.ct-points .num { font-size: 1rem; color: var(--gold-lo); }
.ct-alt { display: grid; gap: 12px; padding: 22px 24px; border-radius: var(--r); background: var(--paper); }
.ct-alt p { font-weight: 700; color: var(--green); }
.ct-alt .row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.ct-direct { font-size: 0.9rem; color: var(--muted); line-height: 2; }
.ct-direct a { color: var(--green); font-weight: 700; }

.wizard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(24px, 3.6vw, 48px); }
.wz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 34px; }
.wz-steps li { display: grid; gap: 8px; font-size: 0.84rem; font-weight: 700; color: var(--muted); }
.wz-steps li::before { content: ""; height: 4px; border-radius: 4px; background: var(--line); transition: background 0.5s var(--ease); }
.wz-steps li .num { font-size: 0.86rem; color: var(--gold-lo); }
.wz-steps li.on, .wz-steps li.done { color: var(--green); }
.wz-steps li.on::before { background: var(--green); }
.wz-steps li.done::before { background: var(--gold); }
.fstep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 28px; }
.fstep.enter { animation: step-in 0.55s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(20px); } }
.q { display: grid; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.q > legend { padding: 0; font-family: var(--serif); font-weight: 700; font-size: 1.08rem; color: var(--green); margin-bottom: 4px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--cream); font-weight: 500; font-size: 0.95rem; line-height: 1.45; transition: border-color 0.25s, background 0.25s; }
.opt span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--green); background: var(--card) center / 12px no-repeat; transition: background-color 0.2s; }
.opt input[type="radio"] + span::before { border-radius: 50%; }
.opt input:checked + span { border-color: var(--green); background: var(--gold-hi); }
.opt input:checked + span::before { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23dab567' stroke-width='2'/%3E%3C/svg%3E"); }
.opt input:focus-visible + span { outline: 2px solid var(--gold-lo); outline-offset: 2px; }
.opt:hover span { border-color: var(--green); }
.opts.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.opts.small span { min-height: 48px; font-size: 0.9rem; }
.opt.wide { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; font-size: 0.92rem; color: var(--green); }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--cream); transition: border-color 0.25s, background 0.25s; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); background: var(--card); }
.field.bad input, .field.bad textarea { border-color: #b4532a; background: #fdf3ec; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.wz-back { font-weight: 700; font-size: 0.92rem; color: var(--muted); }
.wz-back:hover { color: var(--green); }
.wz-err { color: #b4532a; font-size: 0.9rem; font-weight: 500; min-height: 1.5em; }
.consent { font-size: 0.8rem; color: var(--muted); }
.wz-done { display: grid; gap: 12px; justify-items: start; padding: 20px 0; }
.wz-done h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--green); }
.wz-done p { color: var(--muted); }

/* ---------------------------------------------------------------- shared inner-page parts */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svc { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px 26px 30px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; line-height: 1.5; color: var(--green); }
.svc h3 a::after { content: ""; position: absolute; inset: 0; }
.svc p { color: var(--muted); font-size: 0.94rem; }
.badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-hi); color: var(--green); }
.ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 0.76rem; padding: 2px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); }
.svc .go { justify-self: start; margin-top: 4px; }
.work-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.count { font-size: 0.86rem; font-weight: 700; color: var(--muted); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 26px); }
.case { position: relative; display: grid; gap: 14px; align-content: start; }
.case[hidden] { display: none; }
.case .art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--c1, #ddd), var(--c2, #bbb)); display: grid; place-items: center; color: rgba(255, 255, 255, 0.85); }
.case .art .ic { width: 56px; height: 56px; }
.case .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.case:hover .art img { transform: scale(1.05); }
.genre { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 3px 11px; border-radius: 999px; background: rgba(255, 253, 248, 0.92); color: var(--green); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; }
.case-body { display: grid; gap: 6px; }
.case-body h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; line-height: 1.5; color: var(--green); }
.case-body h3 a::after { content: ""; position: absolute; inset: 0; }
.case-body p { color: var(--muted); font-size: 0.92rem; }
.case-body .more { justify-self: start; font-size: 0.86rem; }
.tag { justify-self: start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tag.original { color: var(--gold-lo); }
.tag.codev { color: #2f6b8a; }
.tag.commission { color: var(--ink-3); }
.reel { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 520px; overflow: hidden; border-radius: var(--r-lg); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.reel-col { display: grid; gap: 12px; align-content: start; animation: reel var(--dur, 90s) linear infinite; animation-direction: var(--dir, normal); }
.reel-col img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
@keyframes reel { to { transform: translateY(-50%); } }

/* ---------------------------------------------------------------- reveal */
[data-reveal].pre { opacity: 0; transform: translateY(24px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .need-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {             /* seven menu items need the full bar; below this they live in the menu panel */
  .nav { position: fixed; inset: 0; z-index: 1; margin: 0; background: var(--cream); padding: calc(var(--header-h) + 24px) var(--gutter) 40px; display: grid; align-content: start; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
  .nav.open { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--line-2); }
  .nav a { display: block; padding: 16px 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--green) !important; }
  .nav a::after { display: none; }
  .nav .lang { border: 0; padding: 20px 0 0; gap: 20px; }
  .nav .lang a { font-family: var(--sans); font-size: 0.95rem; padding: 0; }
  .nav .nav-cta { display: block; border: 0; padding-top: 26px; }
  .nav .nav-cta .btn { display: flex; font-family: var(--sans); font-size: 1rem; color: var(--green) !important; }
  .nav-toggle { display: block; }
  .brand, .bar-right { position: relative; z-index: 2; }
  .bar-right { margin-left: auto; }
}
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .proc::before, .proc::after { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .work-grid, .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-side { position: static; display: contents; }
  .ct-points, .ct-alt, .ct-direct { order: 2; }
  .wizard { order: 1; }
  .faq-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --header-h: 68px; }
  .brand .mk { width: 36px; height: 33px; }
  .brand-name { font-size: 22px; }
  .brand-name > span { font-size: 13px; }
  .brand-name small { height: 24px; font-size: 6px; }
  .bar-right .btn { display: none; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero-cta .btn { flex: 1 1 100%; }
  .tavern-label small { display: none; }
  .tavern-cap { text-align: left; }
  .spot-card { position: fixed; left: 12px !important; right: 12px !important; top: auto; bottom: 12px; width: auto; z-index: 120; }
  .candle-hint { font-size: 0.64rem; padding: 4px 9px; }
  .sec-head { grid-template-columns: 1fr; }
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .need { min-height: 170px; padding: 16px 14px 46px; }
  .need-tags { font-size: 0.74rem; gap: 0 8px; }
  .need-panel header { grid-template-columns: 1fr; padding-top: 44px; }
  .np-cta { flex-wrap: wrap; }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  .tabs [role="tab"] { font-size: 0.84rem; }
  .pane-2, .pane-case { grid-template-columns: 1fr; }
  .wcard { flex-basis: 78vw; }
  .rail-ui { grid-template-columns: minmax(0, 1fr) auto; }
  .rail-hint, .rail-count { display: none; }
  .ticker-label { display: none; }
  .marquee li { height: 60px; font-size: 0.95rem; }
  .proc { grid-template-columns: 1fr; }
  .budget { grid-template-columns: 1fr; }
  .dkband-grid { grid-template-columns: 1fr; }
  .dkband-art { width: min(80%, 320px); order: -1; }
  .end-actions .btn, .end-actions .line-card { flex: 1 1 100%; justify-content: center; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .work-grid, .svc-grid { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .wizard { padding: 22px 18px; }
  .line-fab { right: 14px; bottom: 14px; }
}

/* ---------------------------------------------------------------- reduced motion + static renders */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  .marquee-track, .reel-col { animation: none !important; }
}
.static .marquee-track, .static .reel-col, .static .need-grid li { animation: none; }
.static .proc::after { transform: scaleX(1); transition: none; }
.static .proc .num { background: var(--green); color: var(--gold); border-color: var(--green); }

/* ==========================================================================
   v4.1 — opening, entrance, guide and small ornaments
   ========================================================================== */

/* ---------------------------------------------------------------- opening (first visit per tab; html.intro is set by an inline head script) */
.loader { display: none; }
html.intro .loader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 400; color: var(--on-ink); --st: 0.05s; }
html.intro[lang="en"] .loader { --st: 0.018s; }
html.intro:not(.ld-gone) body { overflow: hidden; }
.ld-panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--deep); transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1); }
.ld-top { top: 0; background: linear-gradient(var(--deep), #12291f); }
.ld-bot { bottom: 0; background: linear-gradient(#12291f, var(--deep)); }
.ld-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.5s var(--ease), opacity 0.4s 0.6s; z-index: 2; }
.ld-logo { position: absolute; display: grid; justify-items: center; gap: 14px; z-index: 3; animation: ld-logo-out 0.7s var(--ease) 1.65s forwards; }
.ld-mark { width: 92px; height: 80px; color: var(--gold); opacity: 0; transform: scale(0.7); animation: ld-pop 0.8s var(--ease) 0.1s forwards; }
.ld-mark .mk-flip { animation: ld-flip 1.1s cubic-bezier(0.22, 0.7, 0.25, 1) 0.75s; }
.ld-word { display: flex; overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: 0.12em; }
.ld-word span { display: inline-block; min-width: 0.3em; transform: translateY(110%); animation: rise 0.8s var(--ease) forwards; animation-delay: calc(0.35s + 0.04s * var(--i)); }
.ld-sub { font-size: 0.8rem; letter-spacing: 0.6em; padding-left: 0.6em; color: var(--gold); opacity: 0; animation: ld-fade 0.8s var(--ease) 0.95s forwards; }
.ld-quote { position: relative; z-index: 3; display: block; writing-mode: vertical-rl; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: 0.32em; line-height: 1; color: #f3e6c4; }
html[lang="en"] .ld-quote { writing-mode: horizontal-tb; font-family: var(--latin); font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.6rem); letter-spacing: 0.01em; text-align: center; }
.q-ln { display: block; }
.q-ln + .q-ln { margin-right: 1.15em; }
html[lang="en"] .q-ln + .q-ln { margin: 0.35em 0 0; }
.ld-quote .q-ln:nth-child(2) { padding-top: 2.2em; }
.ld-quote .q-ln:nth-child(3) { padding-top: 4.4em; }
html[lang="en"] .ld-quote .q-ln { padding-top: 0 !important; }
.ld-quote .q-ln span { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(0.35em); animation: ld-char-in 0.9s var(--ease) forwards, ld-char-out 0.7s var(--ease) forwards; animation-delay: calc(1.9s + var(--st) * var(--i)), calc(1.9s + var(--st) * var(--n) + 1.5s + 0.012s * var(--i)); }
html[lang="en"] .ld-quote .q-ln span { transform: translateY(0.25em); white-space: pre; }
.ld-sign { position: absolute; bottom: 4.5vh; z-index: 3; font-size: 0.72rem; letter-spacing: 0.4em; color: var(--gold); opacity: 0; animation: ld-fade 1s var(--ease) 2.6s forwards; }
.ld-skip { position: absolute; right: 24px; bottom: 22px; z-index: 4; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(218, 181, 103, 0.4); color: var(--on-ink-muted); font-size: 0.78rem; letter-spacing: 0.1em; transition: color 0.3s, border-color 0.3s; }
.ld-skip:hover { color: var(--gold); border-color: var(--gold); }
html.ld-open .ld-logo, html.ld-open .ld-quote, html.ld-open .ld-sign, html.ld-open .ld-skip { opacity: 0 !important; transition: opacity 0.35s; }
html.ld-open .ld-line { transform: scaleX(1); opacity: 0; }
html.ld-open .ld-top { transform: translateY(-101%); transition-delay: 0.45s; }
html.ld-open .ld-bot { transform: translateY(101%); transition-delay: 0.45s; }
html.ld-gone .loader { display: none; }
@keyframes ld-pop { to { opacity: 1; transform: none; } }
@keyframes ld-flip { 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes ld-fade { to { opacity: 1; } }
@keyframes ld-logo-out { to { opacity: 0; transform: translateY(-18px); filter: blur(4px); } }
@keyframes ld-char-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ld-char-out { from { opacity: 1; filter: blur(0); transform: none; } to { opacity: 0; filter: blur(8px); transform: translateY(-0.3em); } }
@keyframes rise { to { transform: none; } }

/* ---------------------------------------------------------------- hero entrance (plays after the opening, or right away on later visits) */
html.js:not(.entered) .home .rise { opacity: 0; transform: translateY(22px); }
html.js:not(.entered) .home .hero h1 .ln > span { transform: translateY(108%); }
html.js:not(.entered) .home .scene { clip-path: inset(0 0 100% 0 round 24px); }
html.js:not(.entered) .home .scene > img { transform: scale(1.18); }
.home .rise { transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: calc(0.12s * var(--r, 0) + 0.15s); }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .ln > span { display: block; transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s; }
.hero h1 .ln:nth-child(2) > span { transition-delay: 0.24s; }
.home .scene { clip-path: inset(0 0 0 0 round 24px); transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1) 0.2s, transform 0.6s var(--ease); }
.home .scene > img { transition: transform 2.2s var(--ease) 0.2s, filter 0.8s var(--ease); }

/* gold swash under the highlighted word, drawn once the hero has entered */
.hero h1 em { position: relative; display: inline-block; }
.swash { position: absolute; left: -2%; bottom: -0.1em; width: 104%; height: 0.3em; overflow: visible; }
.swash path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 210; stroke-dashoffset: 210; transition: stroke-dashoffset 1.1s var(--ease) 1s; }
html.entered .swash path, html:not(.js) .swash path { stroke-dashoffset: 0; }

/* twinkling sparks around the headline */
.hero-copy { position: relative; }
.spark { position: absolute; left: var(--x); top: var(--y); width: calc(16px * var(--s)); height: calc(16px * var(--s)); background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: twinkle 3.6s ease-in-out infinite; animation-delay: var(--d); pointer-events: none; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 45% { opacity: 0.9; transform: scale(1) rotate(45deg); } 70% { opacity: 0.2; } }

/* reading progress */
.progress { position: fixed; left: 0; top: 0; z-index: 120; width: 100%; height: 2px; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }

/* drifting light dust inside the scene */
.scene-dust { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background-image: radial-gradient(2px 2px at 20% 80%, #ffe9b8, transparent), radial-gradient(1.5px 1.5px at 62% 70%, #ffe9b8, transparent), radial-gradient(2px 2px at 48% 90%, #fff3d6, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #ffe9b8, transparent), radial-gradient(2px 2px at 34% 66%, #fff3d6, transparent), radial-gradient(1.5px 1.5px at 12% 50%, #fff3d6, transparent);
  animation: dust 12s linear infinite; }
@keyframes dust { from { transform: translateY(8%); opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.6; } to { transform: translateY(-16%); opacity: 0; } }

/* the scene leans gently toward the mouse */
html.entered .home .scene { transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }

/* spots: numbered, checked once seen */
.spot-n { position: absolute; left: 28px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(16, 39, 30, 0.82); color: var(--gold-hi); font-size: 0.66rem; font-weight: 700; line-height: 18px; text-align: center; white-space: nowrap; opacity: 0; transform: scale(0.6); transition: opacity 0.4s, transform 0.4s var(--ease); }
html[data-ambience="night"] .spot-n, .scene:hover .spot-n, .spot.seen .spot-n { opacity: 1; transform: none; }
.spot.seen .spot-n { background: var(--gold); color: var(--green); }
.spot.seen .spot-n::before { content: "✓ "; }
.spot-step { display: inline-block; margin-right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--paper); color: var(--green); letter-spacing: 0.04em; }
.spot-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.spot-next { padding: 6px 14px; border-radius: 999px; background: var(--green); color: var(--cream); font-size: 0.78rem; font-weight: 700; transition: background 0.3s, color 0.3s; }
.spot-next:hover { background: var(--gold); color: var(--green); }


/* guide under the scene: three small steps that turn into a reward */
.guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -24px rgba(16, 39, 30, 0.6); transition: background 0.8s var(--ease), border-color 0.8s var(--ease), border-radius 0.4s; }
.g-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.84rem; color: var(--muted); }
.g-steps li { display: inline-flex; align-items: center; gap: 8px; transition: color 0.4s; }
.g-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 0.72rem; font-weight: 700; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.g-steps li.now { color: var(--green); font-weight: 700; }
.g-steps li.now .g-n { border-color: var(--gold-lo); animation: pulse 1.8s ease-in-out infinite; }
.g-steps li.ok { color: var(--green); }
.g-steps li.ok .g-n { background: var(--green); border-color: var(--green); color: var(--gold); font-size: 0; }
.g-steps li.ok .g-n::before { content: "✓"; font-size: 0.72rem; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(218, 181, 103, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(218, 181, 103, 0); } }
.g-count { font-size: 0.8rem; font-weight: 700; color: var(--gold-lo); }
/* the result: which tavern type you are (decided by the first lamp you lit, or by a lot of exploring first) */
.g-result { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 18px 36px; padding: 16px 4px 6px; border-top: 1px dashed var(--line-2); color: var(--green); animation: card-in 0.5s var(--ease); }
.g-result[hidden] { display: none; }
.g-result template { display: none; }
.r-body { display: grid; gap: 8px; justify-items: start; }
.r-k { margin: 0; }
.r-t { margin: 0; font-family: var(--head); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.3; }
.r-d { margin: 0; max-width: 40em; color: var(--text); line-height: 1.9; text-wrap: pretty; }
.r-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.r-tags li { padding: 3px 12px; border-radius: 999px; background: rgba(218, 181, 103, 0.18); color: var(--gold-lo); font-size: 0.8rem; font-weight: 700; }
.r-tags li::before { content: "#"; }
.g-result[data-kind="explorer"] .r-k { color: var(--gold-lo); }
.r-foot { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 14px 16px; border-radius: var(--r); background: rgba(218, 181, 103, 0.1); border: 1px solid var(--line); }
.r-dex { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-lo); }
.r-slots { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: slot; }
.r-slots li { counter-increment: slot; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 0.88rem; }
.r-slots li::before { content: counter(slot); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.72rem; font-weight: 700; }
.r-slots li.got { border-style: solid; color: var(--green); background: var(--card); font-weight: 700; }
.r-slots li.now { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(218, 181, 103, 0.35); }
.r-slots li.secret:not(.got) { font-style: italic; }
.r-tease { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 760px) { .g-result { grid-template-columns: 1fr; } }
.guide.complete { border-radius: var(--r); }
html[data-ambience="night"] .guide { background: rgba(255, 253, 248, 0.06); border-color: rgba(218, 181, 103, 0.3); }
html[data-ambience="night"] .g-steps, html[data-ambience="night"] .g-result { color: var(--on-ink-muted); }
html[data-ambience="night"] .g-steps li.now, html[data-ambience="night"] .g-steps li.ok, html[data-ambience="night"] .g-result, html[data-ambience="night"] .r-d, html[data-ambience="night"] .r-slots li.got { color: var(--on-ink); }
html[data-ambience="night"] .r-slots li.got { background: rgba(255, 253, 248, 0.06); }
html[data-ambience="night"] .g-count { color: var(--gold); }

/* small ornaments: a turning diamond before every kicker, a thin rule with a diamond between sections */
.sec-head .kicker, .faq-wrap .kicker, .budget .kicker { display: inline-flex; align-items: center; gap: 10px; }
.sec-head .kicker::before, .faq-wrap .kicker::before, .budget .kicker::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); transition: transform 0.8s var(--ease); }
.sec-head:hover .kicker::before { transform: rotate(225deg); }
.needs-sec::before, .process-sec::before { content: ""; position: absolute; left: 50%; top: 0; width: min(560px, 70vw); height: 13px; transform: translate(-50%, -50%); opacity: 0.85;
  background: linear-gradient(var(--gold), var(--gold)) 0 50% / calc(50% - 14px) 1px no-repeat, linear-gradient(var(--gold), var(--gold)) 100% 50% / calc(50% - 14px) 1px no-repeat,
  linear-gradient(45deg, transparent 30%, var(--gold) 30% 70%, transparent 70%) 50% 50% / 9px 9px no-repeat; }
.wcard { transition: transform 0.6s var(--ease); }
.wcard:hover { transform: translateY(-6px); }

@media (max-width: 720px) {
  .ld-quote { font-size: 1.2rem; letter-spacing: 0.26em; }
  .ld-skip { right: 14px; bottom: 14px; }
  .guide { border-radius: var(--r); }
  .g-steps { font-size: 0.78rem; gap: 6px 12px; }
  .spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.intro .loader { display: none; }
  html.js:not(.entered) .home .rise, html.js:not(.entered) .home .hero h1 .ln > span, html.js:not(.entered) .home .scene, html.js:not(.entered) .home .scene > img { opacity: 1; transform: none; clip-path: none; }
  .spark, .scene-dust { display: none; }
}
.spot:has(.spot-card:not([hidden])) { z-index: 6; }
.spot-card .tlink, html[data-ambience="night"] .hero .spot-card .tlink { color: var(--green); }

/* ==========================================================================
   v5 — roomier layout, the candle mini game, DreamKeeper dialogue
   ========================================================================== */

/* ---------------------------------------------------------------- roomier, centred composition */
:root { --wrap: 1200px; --gutter: clamp(20px, 6vw, 120px); }
.home .hero { padding-top: clamp(40px, 7vw, 96px); }
.home .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }   /* headline + works reel on top, the tavern full width below */
.home .hero-copy { gap: 26px; }
.home .sec-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; margin-bottom: clamp(44px, 6vw, 72px); }
.home .sec-head > div { justify-items: center; }
.home .sec-head .lede { margin-inline: auto; }
.home .sec-side { justify-items: center; max-width: 34em; }
.home .faq-wrap { max-width: 980px; margin-inline: auto; }

/* ---------------------------------------------------------------- the tavern starts dark: pick up the candle, carry its light to three lamps */
@property --rc { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --r1 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --r2 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --r3 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.home .scene { transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1) 0.2s, transform 0.6s var(--ease), --rc 1.4s var(--ease), --r1 1.4s var(--ease), --r2 1.4s var(--ease), --r3 1.4s var(--ease), box-shadow 0.8s; }
.tavern[data-state="lit"] .scene, .tavern[data-state="done"] .scene { --rc: 14%; }
.scene-dark { position: absolute; inset: 0; z-index: 1; background: #06100b; opacity: 0.84; pointer-events: none; transition: opacity 1.6s var(--ease);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--rc), #000 calc(var(--rc) * 1.9)), radial-gradient(circle at var(--x1) var(--y1), transparent var(--r1), #000 calc(var(--r1) * 1.9)), radial-gradient(circle at var(--x2) var(--y2), transparent var(--r2), #000 calc(var(--r2) * 1.9)), radial-gradient(circle at var(--x3) var(--y3), transparent var(--r3), #000 calc(var(--r3) * 1.9));
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--rc), #000 calc(var(--rc) * 1.9)), radial-gradient(circle at var(--x1) var(--y1), transparent var(--r1), #000 calc(var(--r1) * 1.9)), radial-gradient(circle at var(--x2) var(--y2), transparent var(--r2), #000 calc(var(--r2) * 1.9)), radial-gradient(circle at var(--x3) var(--y3), transparent var(--r3), #000 calc(var(--r3) * 1.9));
  mask-composite: intersect; }
.tavern[data-state="done"] .scene-dark { opacity: 0; }
.tavern[data-state="done"] .scene { box-shadow: 0 40px 80px -40px rgba(16, 39, 30, 0.55), 0 0 0 2px var(--gold), 0 0 60px -10px rgba(218, 181, 103, 0.7); }
.scene-dust { z-index: 2; }

/* candle: a breathing ring invites the first tap (the button sits on the painted candle, just under its flame) */
.candle { z-index: 4; width: 64px; height: 64px; margin: -9px 0 0 -32px; border-radius: 50%; }
.candle::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 236, 196, 0.85); animation: breathe 2.4s ease-in-out infinite; }
.tavern:not([data-state="dark"]) .candle::before { display: none; }


/* lamps (hidden while the tavern is dark) */
.spot { z-index: 5; }
.tavern[data-state="dark"] .spot { visibility: hidden; }
.lamp { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.lamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(255, 236, 196, 0.8); animation: spin 10s linear infinite; transition: border-color 0.4s, transform 0.4s var(--ease), inset 0.4s; }
.lamp i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 241, 207, 0.45); transition: background 0.4s, box-shadow 0.5s, transform 0.4s var(--ease); animation: breathe-dot 2.2s ease-in-out infinite; }
@keyframes breathe-dot { 50% { transform: scale(0.7); opacity: 0.6; } }
.spot.near .lamp::before { inset: 0; border-color: var(--gold); border-style: solid; }
.spot.on .lamp::before { border: 1.5px solid var(--gold); animation: none; inset: 10px; }
.spot.on .lamp i { background: #fff3d0; box-shadow: 0 0 14px 6px rgba(255, 210, 120, 0.75); animation: none; transform: scale(1.2); }
.spot.on .lamp::after { content: "✓"; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--green); font-size: 0.66rem; font-weight: 700; line-height: 18px; text-align: center; }
.spot.pop .lamp { animation: lamp-pop 0.7s var(--ease); }
@keyframes lamp-pop { 40% { transform: scale(1.5); } }
.spot-card { z-index: 8; }

/* hint line inside the scene */
.scene-hint { position: absolute; left: 50%; bottom: 14px; z-index: 6; transform: translateX(-50%); max-width: calc(100% - 28px); padding: 7px 16px; border-radius: 999px; background: rgba(10, 24, 18, 0.78); color: #f6e7c4; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity 0.4s; }
.scene-hint.swap { animation: hint-swap 0.5s var(--ease); }
@keyframes hint-swap { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------------------------------------------------------------- DreamKeeper: back to the dialogue window with answer options */
.dlg { position: relative; justify-self: stretch; max-width: 520px; margin-left: auto; border-radius: 20px; background: var(--card); color: var(--text); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(218, 181, 103, 0.25); }
.dlg-peek { position: absolute; right: -26px; top: -84px; width: 150px; animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.3)); pointer-events: none; }
.dlg-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 20px 20px 0 0; background: var(--deep); color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; }
.dlg-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(218, 181, 103, 0.5); }
.dlg-bar i:first-child { background: var(--gold); }
.dlg-bar span { margin-left: 8px; }
.dlg-body { display: grid; gap: 14px; padding: 22px 22px 24px; min-height: 340px; align-content: start; }
.msg { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; animation: card-in 0.45s var(--ease); }
.msg b { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-lo); margin-bottom: 4px; }
.msg .say { padding: 12px 15px; border-radius: 4px 16px 16px 16px; background: var(--paper); font-size: 0.95rem; line-height: 1.7; color: var(--green); }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--deep); padding: 4px; }
.msg.me { grid-template-columns: 1fr; justify-items: end; text-align: right; }
.msg.me .say { border-radius: 16px 4px 16px 16px; background: var(--gold-hi); }
.dlg-opts { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 60px; }
.dlg-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.9rem; font-weight: 700; color: var(--green); transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.dlg-opt .num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); font-size: 0.86rem; color: var(--gold-lo); }
.dlg-opt:hover { border-color: var(--green); transform: translateY(-2px); }
.dlg-opt[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--cream); }
.dlg-opt[aria-pressed="true"] .num { background: var(--gold); color: var(--green); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--gold-lo); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dlg-go { justify-self: end; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: var(--green); font-size: 0.88rem; font-weight: 700; animation: card-in 0.45s var(--ease); }
.dlg-go:hover { background: var(--green); color: var(--cream); }

@media (max-width: 1100px) {
  .home .hero-grid { grid-template-columns: 1fr; }
  .dlg { margin: 70px auto 0; }
}
@media (max-width: 720px) {
  .scene-hint { font-size: 0.7rem; padding: 5px 12px; bottom: 8px; }
  .dlg-opts { padding-left: 0; }
  .dlg-peek { width: 110px; top: -62px; right: -6px; }
  .dlg-body { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lamp::before, .lamp i { animation: none !important; }
}
@media (max-width: 720px) {
  .spot-card { position: absolute; left: 8px !important; right: 8px !important; top: auto; bottom: 8px; width: auto; padding: 10px 40px 12px 14px; gap: 4px; position: fixed; }
  .scene .spot-card { position: absolute; }
  .spot { position: static; }
  .spot .lamp { position: absolute; left: calc(var(--x) - 22px); top: calc(var(--y) - 22px); width: 44px; height: 44px; }
  .spot-card .kicker, .spot-card p:not(.kicker):not(.spot-t) { display: none; }
  .spot-t { font-size: 1rem; }
  .spot:has(.spot-card:not([hidden])) ~ .scene-hint, .scene:has(.spot-card:not([hidden])) .scene-hint { opacity: 0; }
}

/* ---------------------------------------------------------------- v5.1 corporate touch: company strip under the hero */
.corp { margin-top: clamp(40px, 5vw, 64px); }
.corp dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.corp div { display: grid; gap: 2px; padding: 16px 20px; }
.corp div + div { border-left: 1px solid var(--line-2); }
.corp dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lo); }
.corp dd { font-family: Georgia, "Times New Roman", var(--serif); font-weight: 700; font-size: 1rem; color: var(--green); letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .corp dl { grid-template-columns: 1fr 1fr; }
  .corp div:nth-child(3) { border-left: 0; }
  .corp div:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .corp div { padding: 12px 14px; }
  .corp dd { font-size: 0.88rem; }
}

/* ---------------------------------------------------------------- v7 hero stage: the supplied key art, cut out, stands in front of a slanted band and giant type
   (layered like a poster: band -> word -> characters, so the letters pass behind them) */
.home .hero { overflow-x: clip; }
.home .hero-copy { grid-row: 1; grid-column: 1; z-index: 1; }
/* beside the stage the copy may only use the room left of the art (the band's lower-left corner), so long headlines
   and button rows wrap instead of running into it -- English and Japanese are longer than Chinese */
@media (min-width: 1181px) {
  .home .hero-copy { max-width: calc(100vw - min(50vw, 860px) * 0.86 - (100vw - min(var(--wrap), 100vw - 2 * var(--gutter))) / 2 - 40px); }
}
.hero-stage { --bleed: clamp(24px, 4vw, 56px); grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: stretch; position: relative; z-index: 0;
  width: min(50vw, 860px); min-height: clamp(440px, 40vw, 620px); margin: calc(-1 * var(--bleed)) calc(50% - 50vw) calc(-1 * var(--bleed)) 0; pointer-events: none; }
.stage-band { position: absolute; inset: 16% 0 12% 0; overflow: hidden; background: linear-gradient(120deg, var(--deep) 0%, var(--green) 55%, var(--ink-3) 100%); clip-path: polygon(24% 0, 100% 0, 100% 100%, 14% 100%); }
.stage-band::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(120deg, var(--gold-hi), var(--gold)); clip-path: polygon(21.6% 0, 23% 0, 13% 100%, 11.6% 100%); }   /* a gold edge along the slant */
/* the band is a window: works stills and clips cross-fade inside it, under a green veil that keeps the type and characters forward */
.stage-slides { position: absolute; inset: 0; }
.stage-slides > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease), transform 6s linear; }
.stage-slides > .on { opacity: 1; transform: scale(1); }
.stage-band::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(120deg, rgba(16, 39, 30, 0.92) 0%, rgba(24, 51, 39, 0.8) 50%, rgba(16, 39, 30, 0.66) 100%); }
.stage-word { position: absolute; z-index: 1; right: clamp(8px, 2vw, 32px); top: 2%; display: grid; justify-items: end; margin: 0;
  font-family: "Noto Sans TC", var(--sans); font-weight: 900; font-size: clamp(3.6rem, 9.4vw, 10rem); line-height: 0.82; letter-spacing: -0.045em; color: var(--green); white-space: nowrap; }   /* GAME sits above the band (out of the frame), NOBILITY runs across it */
.stage-word span + span { color: var(--cream); -webkit-text-stroke: 1.5px var(--gold); paint-order: stroke fill; }   /* the gold edge keeps the letters that run past the band legible */
/* the characters in two layers: the whole picture clipped at the band's lower edge (so the art's straight frame cut never shows),
   and just the dog's fist and the rabbit's hem on top, which break out below the band as drawn */
.stage-clip { position: absolute; z-index: 2; left: 0; right: 0; top: -40%; bottom: 12%; overflow: hidden; pointer-events: none; }
.stage-pair { position: absolute; z-index: 2; right: 10%; bottom: 0; width: 66%; height: auto; object-fit: contain; object-position: right bottom;
  transform: translateY(14.1%); }   /* at rest the frame line (89.9% of the art's height) sits 4% below the band's edge, hidden */
.stage-out { z-index: 3; bottom: 12%; }
.stage-tag { position: absolute; z-index: 3; left: 15%; bottom: 3%; margin: 0; font-family: var(--serif-latin, "Cormorant Garamond", serif); font-style: italic; font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.35rem); color: var(--gold-lo); rotate: -3deg; }   /* under the band's left end, clear of the hand and the hem */
/* depth on scroll: the word drifts slower than the characters (scroll-driven, nothing runs on load) */
@supports (animation-timeline: view()) {
  .stage-word { animation: stage-word linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  .stage-pair { animation: stage-pair linear both; animation-timeline: scroll(root block); animation-range: 0 60vh; }   /* rises as the page scrolls; by 60vh the frame line is exactly on the edge */
  @keyframes stage-word { to { translate: 0 22%; } }
  @keyframes stage-pair { to { translate: 0 -4%; } }
}
@media (max-width: 1180px) {   /* not enough room beside the headline: the stage moves under it */
  .hero-stage { grid-row: 2; justify-self: center; width: min(100%, 820px); min-height: 0; aspect-ratio: 1 / 0.74; margin: 12px auto 0; }
}
@media (max-width: 720px) {
  .hero-stage { grid-row: 2; width: 100vw; min-height: 0; aspect-ratio: 1 / 0.98; margin: 8px calc(50% - 50vw) 0; }
  .stage-band { inset: 15% 0 12% 0; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
  .stage-band::after { clip-path: polygon(8% 0, 9.6% 0, 1.6% 100%, 0 100%); }
  .stage-word { font-size: clamp(2.8rem, 15vw, 5rem); top: 3%; right: 16px; }
  .stage-pair { right: 4%; width: 90%; }
  .stage-tag { left: 16px; top: -6%; bottom: auto; }   /* the fist and the hem take the space under the band here */
}
@media (prefers-reduced-motion: reduce) {
  .stage-word, .stage-pair { animation: none !important; }
  .stage-slides > * { transition: opacity 0.6s; transform: none; }
}

/* ---------------------------------------------------------------- v6 header menu: the home sections; News opens the blog categories */
@media (min-width: 1241px) {
  .nav ul { gap: clamp(14px, 1.6vw, 28px); }
  .nav a { font-size: 0.92rem; }
}
.nav a.is-here { color: var(--gold-lo); }
.nav a.is-here::after { transform: translateX(-50%) scale(1); }
.nav .has-sub { position: relative; }
.nav .sub { position: absolute; left: 50%; top: calc(100% + 12px); min-width: 132px; display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: var(--card); box-shadow: 0 18px 40px -18px rgba(16, 39, 30, 0.35), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s; }
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* keeps the hover alive across the gap */
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .sub a { display: block; padding: 8px 12px; border-radius: 9px; font-size: 0.88rem; text-align: center; }
.nav .sub a::after { display: none; }
.nav .sub a:hover, .nav .sub a:focus-visible { background: var(--paper); }
@media (max-width: 1240px) {
  .nav .sub { position: static; display: flex; flex-direction: row; align-items: center; gap: 22px; min-width: 0; padding: 0 0 14px 2px; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav .sub::before { display: none; }
  .nav .sub a { padding: 2px 0; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; }
  .nav .sub li { border: 0; }
  .nav { height: 100vh; height: 100dvh; overflow-y: auto; }   /* the header's backdrop blur makes it the containing block, so size the panel to the screen */
}

/* back to the top: a quiet chip above the LINE button once the reader is past the first screen */
.to-top { position: fixed; right: 27px; bottom: 94px; z-index: 80; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 3px; padding: 0 0 0 0.14em; background: var(--card); color: var(--green); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; box-shadow: 0 10px 24px -10px rgba(16, 39, 30, 0.4), 0 0 0 1px var(--line-2); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.35s, transform 0.4s var(--ease), background 0.3s, color 0.3s; }
.to-top i { width: 14px; height: 2px; border-radius: 2px; background: var(--gold); }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { background: var(--green); color: var(--gold); }
@media (max-width: 720px) {
  .to-top { right: 21px; bottom: 84px; width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------- v6 hero: a third way in, straight to the brief-as-a-game */
.hero-cta { gap: 14px 22px; }
.btn-dk { gap: 10px; padding: 0 16px 0 7px; background: var(--card); color: var(--green); border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px rgba(218, 181, 103, 0.16); }
.btn-dk img { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--deep); padding: 2px; animation: badge-glow 2.6s ease-in-out infinite; }   /* stays centred: a soft glow, no movement */
@keyframes badge-glow { 50% { box-shadow: 0 0 0 4px rgba(218, 181, 103, 0.28); } }
.btn-dk small { padding: 3px 9px; border-radius: 999px; background: var(--gold); color: var(--green); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; transition: background 0.3s; }
.btn-dk:hover small, .btn-dk:focus-visible small { background: var(--card); }
@media (max-width: 720px) {
  .hero-cta .btn-dk { flex: 1 1 100%; }
}

/* the first lamp's card also points at DreamKeeper */
.spot-dk { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 1px 10px; margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: var(--deep); color: var(--on-ink); font-size: 0.8rem; font-weight: 700; line-height: 1.45; transition: background 0.3s; }
.spot-dk img { grid-row: span 2; width: 32px; height: 32px; }
.spot-dk small { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.spot-dk:hover, .spot-dk:focus-visible { background: var(--green); }
.tavern .spot:has(.spot-card:not([hidden])) { z-index: 9; }
.spot.up .spot-card { top: auto; bottom: -18px; }   /* an open card sits above the carried candle, so its glow never covers the text */

/* ---------------------------------------------------------------- v6 tavern: pick the candle up and carry its light */
@property --cx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --cy { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.home .scene.glide { transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1) 0.2s, transform 0.6s var(--ease), --rc 1.4s var(--ease), --r1 1.4s var(--ease), --r2 1.4s var(--ease), --r3 1.4s var(--ease), box-shadow 0.8s, --cx 0.5s var(--ease), --cy 0.5s var(--ease); }
.carry { position: absolute; z-index: 7; width: 100%; height: 0; pointer-events: none; }
.carry.glide { transition: left 0.5s var(--ease), top 0.5s var(--ease); }
.carry i { position: absolute; display: block; }
.c-glow { left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 140, 0.42), rgba(255, 180, 80, 0.12) 45%, rgba(255, 180, 80, 0) 70%); animation: c-glow 2.2s ease-in-out infinite; }
@keyframes c-glow { 50% { transform: scale(1.12); opacity: 0.8; } }
.c-art { position: absolute; left: 0; top: 0; z-index: 1; display: block; max-width: none; height: auto;
  width: calc(100% * 125 / 1920 * var(--z, 1.02));                           /* the supplied candle at exactly its size in the scene (.carry is scene-wide) */
  translate: -46.3% -43.1%;                                                   /* its flame sits on the carry point, where the light is */
  transform-origin: 56% 80%; rotate: var(--tilt, 0deg); transition: rotate 0.35s var(--ease), scale 0.35s var(--ease); will-change: transform; }
.tavern.holding .c-art { scale: 1.06; }                                       /* lifted a little off the table */
.c-ember { z-index: 2; left: -2px; top: -14px; width: 4px; height: 4px; border-radius: 50%; background: #ffd77a; box-shadow: 0 0 6px 2px rgba(255, 200, 100, 0.8); opacity: 0; animation: ember 1.8s ease-out infinite; }
.c-ember:nth-child(3) { --dx: -11px; animation-delay: 0.6s; }
.c-ember:nth-child(4) { --dx: 9px; animation-delay: 1.2s; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 3px), -40px) scale(0.4); } }
/* while the candle is away from the table (picked up, or still gliding home) the painted one is covered by a frame-sized patch of empty table,
   so it takes every zoom of the scene photo with it; the script reads that zoom so the carried candle leaves and lands exactly on its painting */
.scene > .candle-gap { z-index: 0; opacity: 0; pointer-events: none; }
.tavern.away .scene > .candle-gap { opacity: 1; }
.tavern.holding .candle::before { display: block; inset: 14px; border: 1.5px dashed rgba(255, 236, 196, 0.6); animation: spin 12s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .tavern.holding .scene { cursor: none; }
  .tavern.holding .spot-card { cursor: auto; }
  .tavern.holding .spot-card a, .tavern.holding .spot-card button { cursor: pointer; }
}
@media (max-width: 720px) {
  .carry i { scale: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .c-glow, .c-ember, .btn-dk img { animation: none !important; }
  .c-art { transition: none; }
}

/* ---------------------------------------------------------------- v6 journey: a standalone five-stage map; hover, tap or autoplay moves the highlight */
.journey { --node: clamp(104px, 10.5vw, 148px); --jr-head: 96px; --gap: clamp(12px, 2vw, 28px); --at: 0; position: relative; }
.jr-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
.jr-step { display: grid; grid-template-rows: var(--jr-head) auto auto 1fr; justify-items: center; align-content: start; gap: 14px; text-align: center; }
.jr-head { display: grid; justify-items: center; align-content: end; gap: 3px; transition: opacity 0.4s; }
.jr-n { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-lo); }
.jr-head b { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.4; color: var(--green); }
.jr-head small { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted); }
.jr-node { position: relative; width: var(--node); height: var(--node); padding: 12px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--green); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 6px var(--cream), 0 0 0 7px color-mix(in srgb, var(--c) 70%, #b98a3c); transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.jr-node:hover { transform: translateY(-3px); }
.jr-time { font-family: var(--serif); font-size: clamp(0.92rem, 1.25vw, 1.16rem); font-weight: 700; line-height: 1.35; word-break: keep-all; text-wrap: balance; }
.jr-time .nw, .nw { white-space: nowrap; }
.jr-step.on .jr-node { transform: scale(1.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 6px var(--cream), 0 0 0 8px var(--gold-lo), 0 26px 40px -18px rgba(150, 100, 30, 0.55); }
.jr-step.on .jr-node::after { content: ""; position: absolute; inset: -17px; border-radius: 50%; border: 1px dashed var(--gold); animation: spin 14s linear infinite; }
.jr-out { font-size: 0.95rem; font-weight: 700; color: #c4862c; }
.jr-d { max-width: 15em; font-size: 0.88rem; line-height: 1.75; color: var(--text); transition: opacity 0.4s; }
.jr-step:not(.on) .jr-d { opacity: 0.5; }
.jr-step:not(.on) .jr-head { opacity: 0.72; }
.jr-track { position: absolute; z-index: 0; top: calc(var(--jr-head) + 14px + var(--node) / 2 - 1px); left: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n))); right: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n))); height: 2px; border-radius: 2px; background: var(--line-2); }
.jr-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #f1cc98, var(--gold)); transform-origin: left; transform: scaleX(calc(var(--at) / (var(--n) - 1))); transition: transform 0.8s var(--ease); }
.jr-walker { position: absolute; top: 50%; left: calc(var(--at) / (var(--n) - 1) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(218, 181, 103, 0.25); transition: left 0.8s var(--ease); }
.jr-note { margin-top: 30px; text-align: center; font-size: 0.82rem; color: var(--muted); }
.journey + .budget { margin-top: clamp(48px, 6vw, 72px); }
@media (max-width: 720px) {
  .journey { --node: 78px; --gap: 26px; }
  .jr-steps { grid-template-columns: 1fr; }
  .jr-step { grid-template-columns: var(--node) minmax(0, 1fr); grid-template-rows: none; justify-items: start; column-gap: 18px; row-gap: 4px; text-align: left; }
  .jr-node { grid-column: 1; grid-row: 1 / span 3; padding: 6px; }
  .jr-time { font-size: 0.72rem; }
  .jr-head, .jr-out, .jr-d { grid-column: 2; }
  .jr-head { justify-items: start; }
  .jr-d { max-width: none; }
  .jr-step:not(.on) .jr-d, .jr-step:not(.on) .jr-head { opacity: 1; }
  .jr-step.on .jr-node::after { inset: -9px; }
  .jr-track { top: calc(var(--node) / 2); bottom: calc(var(--node) / 2 + 40px); left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .jr-fill, .jr-walker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-step.on .jr-node::after { animation: none; }
}

/* ---------------------------------------------------------------- v6.1 section navbar as a second row wherever the full menu folds away */
.secbar { display: none; }
@media (max-width: 1240px) {
  :root { --secbar-h: 46px; }
  html { scroll-padding-top: calc(var(--header-h) + var(--secbar-h) + 12px); }
  .secbar { display: block; border-top: 1px solid var(--line); }
  .secbar ul { display: flex; align-items: center; gap: 4px; height: var(--secbar-h); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); }
  .secbar ul::-webkit-scrollbar { display: none; }
  .secbar li:last-child { padding-right: 20px; }
  .secbar a { display: block; padding: 6px 13px; border-radius: 999px; font-size: 0.86rem; font-weight: 500; white-space: nowrap; color: var(--green); transition: background 0.3s, color 0.3s; }
  .secbar a:hover, .secbar a:focus-visible { background: var(--paper); }
  .secbar a.is-here, .secbar a[aria-current="page"] { background: var(--green); color: var(--gold); }
}

/* the Keeper's caret blinks only at the end of the newest line */
.dlg-body:has(.msg.reply:not([hidden])) .msg.npc:not(.reply) .caret { display: none; }

/* an open lamp card takes over from the hint line */
.scene:has(.spot-card:not([hidden])) .scene-hint { opacity: 0; }

/* ================================================================ v7 inner pages: shared masthead, About, inquiries, forms, Steam, 404, blog */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 0.84rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.crumbs a { border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
.crumbs a:hover { color: var(--green); border-color: var(--gold-lo); }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }
.pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pn a { display: grid; gap: 4px; padding: 34px 28px; transition: background 0.3s; }
.pn a:hover { background: var(--paper); }
.pn a.r { text-align: right; border-left: 1px solid var(--line); }
.pn small { font-size: 0.74rem; letter-spacing: 0.14em; color: var(--gold-lo); }
.pn b { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--green); }

/* masthead: crumbs, kicker, serif title with a swash, a drifting mark and three twinkles */
.phero { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(60% 120% at 92% 0%, rgba(218, 181, 103, 0.16), transparent 60%); border-bottom: 1px solid var(--line); }
.phero-in { display: grid; gap: 18px; justify-items: start; max-width: 860px; margin-top: clamp(36px, 5vw, 64px); }
.phero .kicker { display: inline-flex; align-items: center; gap: 10px; }
.phero .kicker::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.phero h1 { font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; color: var(--green); }
html[lang="en"] .phero h1 { font-family: var(--latin); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.phero h1 em { position: relative; display: inline-block; color: var(--gold-lo); font-style: normal; }
.phero .lede { font-size: 1.05rem; max-width: 38em; }
.phero-mark { position: absolute; right: clamp(-40px, 2vw, 60px); bottom: -34px; width: clamp(150px, 20vw, 260px); height: auto; aspect-ratio: 46 / 42; color: var(--green); opacity: 0.06; transform: rotate(-12deg); animation: drift 9s ease-in-out infinite; pointer-events: none; }
@keyframes drift { 50% { transform: rotate(-6deg) translateY(-12px); } }
.phero-dot { position: absolute; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); opacity: 0; animation: twinkle 4.2s ease-in-out infinite; pointer-events: none; }
.phero-dot.d1 { right: 26%; top: 30%; }
.phero-dot.d2 { right: 12%; top: 62%; width: 6px; height: 6px; animation-delay: 1.4s; }
.phero-dot.d3 { right: 38%; top: 74%; width: 5px; height: 5px; animation-delay: 2.6s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: rotate(45deg) scale(0.4); } 45% { opacity: 0.9; transform: rotate(45deg) scale(1); } }
.blog-count { font-size: 0.86rem; letter-spacing: 0.08em; color: var(--gold-lo); font-weight: 700; }

/* ---------------------------------------------------------------- About */
.approach-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(40px, 7vw, 110px); align-items: start; }
.approach-in .kicker { grid-column: 1 / -1; }
.statement { text-wrap: balance; font-family: var(--serif); font-size: clamp(1.7rem, 3.1vw, 2.6rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; color: var(--green); }
html[lang="en"] .statement { font-family: var(--latin); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.statement em { white-space: nowrap; font-style: normal; color: var(--gold-lo); background: linear-gradient(transparent 70%, rgba(218, 181, 103, 0.35) 70%); }
.approach-p { display: grid; gap: 16px; color: var(--text); line-height: 1.95; padding-top: 10px; }
.scope { display: flex; flex-wrap: wrap; gap: 8px; }
.scope li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--gold); background: var(--card); font-size: 0.88rem; font-weight: 700; color: var(--green); }
.skills-sec { background: var(--paper); }
.skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: sk; }
.skill a { position: relative; display: grid; align-content: start; gap: 14px; height: 100%; padding: 28px 24px 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease); }
.skill a::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); transform: scaleX(0); transition: transform 0.45s var(--ease); }
.skill a:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 30px 50px -30px rgba(16, 39, 30, 0.35); }
.skill a:hover::after { transform: scaleX(1); }
.skill-no { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-lo); }
.skill-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--deep); color: var(--gold); transition: transform 0.6s var(--ease); }
.skill-ic svg { width: 26px; height: 26px; }
.skill a:hover .skill-ic { transform: rotate(-8deg) scale(1.06); }
.skill h3 { font-family: var(--serif); font-size: 1.16rem; line-height: 1.5; color: var(--green); }
.skill p { font-size: 0.9rem; line-height: 1.85; color: var(--muted); }
.skill .tlink { margin-top: auto; justify-self: start; font-size: 0.86rem; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rule { position: relative; display: grid; gap: 10px; padding: 34px 28px 30px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--card); overflow: hidden; transition: transform 0.5s var(--ease); }
.rule:hover { transform: rotate(-1deg) translateY(-4px); }
.rule-no { position: absolute; right: 18px; top: 4px; font-family: var(--serif); font-size: 5.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); opacity: 0.7; }
.rule h3 { font-family: var(--serif); font-size: 1.3rem; color: var(--green); }
.rule p { color: var(--muted); line-height: 1.85; max-width: 18em; }
.facts-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px clamp(40px, 6vw, 96px); align-items: center; }
.facts-in > div { display: grid; gap: 14px; }
.facts-in address { font-style: normal; line-height: 2; color: var(--muted); }
.facts-in address a { color: var(--green); font-weight: 700; }
.corp-card { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--card); overflow: hidden; }
.corp-card div { display: grid; gap: 4px; padding: 22px 24px; }
.corp-card div:nth-child(even) { border-left: 1px solid var(--line); }
.corp-card div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.corp-card dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lo); }
.corp-card dd { font-family: Georgia, "Times New Roman", var(--serif); font-weight: 700; color: var(--green); }
.btn-ghost { background: transparent; color: var(--green); }
.endcta .btn-ghost { color: var(--on-ink); border-color: rgba(246, 240, 225, 0.5); }

/* ---------------------------------------------------------------- other inquiries */
.routes-sec { padding-top: clamp(64px, 8vw, 110px); }
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.route { position: relative; display: grid; align-content: start; gap: 12px; height: 100%; padding: 26px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); transition: border-color 0.3s, transform 0.45s var(--ease); }
.route:hover { border-color: var(--green); transform: translateY(-4px); }
.route-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--green); transition: background 0.3s, color 0.3s; }
.route-ic svg { width: 22px; height: 22px; }
.route:hover .route-ic { background: var(--green); color: var(--gold); }
.route-t { display: grid; gap: 2px; }
.route-t b { font-family: var(--serif); font-size: 1.15rem; color: var(--green); }
.route-t small { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gold-lo); }
.route-d { font-size: 0.88rem; line-height: 1.8; color: var(--muted); }
.route .tlink { margin-top: auto; justify-self: start; font-size: 0.86rem; }

/* ---------------------------------------------------------------- form pages */
.form-sec { padding-top: clamp(48px, 6vw, 80px); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 60px); align-items: start; }
.embed-card { border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(16, 39, 30, 0.35); }
.embed-card iframe { display: block; width: 100%; height: 1500px; border: 0; }
.embed-note { padding: 14px 20px; font-size: 0.84rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--card); }
.embed-note a { color: var(--green); font-weight: 700; border-bottom: 1px solid var(--gold); }
.form-side { display: grid; gap: 18px; padding: 26px 24px; border-radius: var(--r-lg); background: var(--paper); }
.form-side.sticky, .embed-card + .form-side { position: sticky; top: calc(var(--header-h) + 24px); }
.form-side h2 { font-family: var(--serif); font-size: 1.2rem; color: var(--green); }
.form-side p { line-height: 2; font-size: 0.92rem; }
.form-side p a { color: var(--green); font-weight: 700; }
.side-routes { display: grid; gap: 6px; }
.side-routes a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); font-size: 0.9rem; font-weight: 700; color: var(--green); transition: background 0.3s; }
.side-routes a:hover { background: var(--gold-hi); }
.side-routes svg { width: 18px; height: 18px; color: var(--gold-lo); }
.side-steps { display: grid; gap: 12px; counter-reset: s; }
.side-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 6px; font-size: 0.9rem; line-height: 1.8; }
.side-steps .num { color: var(--gold-lo); font-weight: 700; }
.form-side .btn-dk { justify-self: start; min-height: 48px; }
.inquiry { display: grid; gap: 34px; padding: clamp(24px, 3.6vw, 44px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.inquiry legend { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--green); }
.q-no { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--gold-lo); }
.req { color: #b4452f; font-weight: 700; }
.inquiry .opts { grid-template-columns: 1fr; }
.inquiry .opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inquiry .opt span { min-height: 50px; font-size: 0.92rem; }
.form-row3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.inquiry input:not([type="radio"]):not([type="checkbox"]), .inquiry textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--cream); font: inherit; color: var(--text); }
.inquiry textarea { min-height: 130px; resize: vertical; }
.inquiry input:focus, .inquiry textarea:focus { outline: 2px solid var(--gold-lo); outline-offset: 1px; }
.inquiry .bad, .inquiry .opts.bad .opt span { border-color: #b4452f !important; }
.inq-err { min-height: 1em; color: #b4452f; font-weight: 700; font-size: 0.9rem; }
.inq-ok { padding: 16px 18px; border-radius: 12px; background: var(--gold-hi); color: var(--green); font-weight: 700; }

/* ---------------------------------------------------------------- Steam guide */
.st-steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); }
.st-steps::before { content: ""; position: absolute; left: 25%; right: 25%; top: 46px; border-top: 2px dashed var(--gold); }
.st-step { position: relative; display: grid; gap: 14px; justify-items: start; padding: 34px 30px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.st-no { padding: 4px 12px; border-radius: 999px; background: var(--deep); color: var(--gold); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; }
.st-step h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--green); }
.st-step p { color: var(--muted); line-height: 1.9; }
.st-help { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; margin-top: 40px; color: var(--muted); }

/* ---------------------------------------------------------------- 404: game over */
.over { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 80px 0; background: radial-gradient(70% 60% at 50% 40%, #1c3a2c, var(--deep)); color: var(--on-ink); text-align: center; }
.over-in { display: grid; justify-items: center; gap: 18px; }
.over-tag { font-family: "Courier New", ui-monospace, monospace; font-size: clamp(2.4rem, 9vw, 6rem); font-weight: 700; letter-spacing: 0.18em; color: var(--gold); text-shadow: 0 0 24px rgba(218, 181, 103, 0.45), 3px 3px 0 #0a1a13; animation: glitch 3.2s steps(1) infinite; }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-3px, 1px); } 95% { transform: translate(3px, -1px); } 97% { transform: translate(-1px, 0); } }
.over-mark { width: 74px; height: 64px; color: var(--gold); animation: bob 3.4s ease-in-out infinite; }
.over h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.over-p { max-width: 30em; color: var(--on-ink-muted); line-height: 1.9; }
.over-count { display: flex; align-items: baseline; gap: 14px; font-family: "Courier New", ui-monospace, monospace; font-weight: 700; letter-spacing: 0.12em; }
.over-count b { font-size: 2.6rem; color: var(--gold); min-width: 1.2em; }
.over-count i { display: none; font-style: normal; color: var(--gold); animation: blink 1s steps(1) infinite; }
.over-count.coin b, .over-count.coin span { display: none; }
.over-count.coin i { display: inline; }
.over-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 8px; }
.over .btn-ink { background: var(--gold); border-color: var(--gold); color: var(--green); }
.over .btn-ghost { color: var(--on-ink); border-color: rgba(246, 240, 225, 0.5); }
.over .tlink { color: var(--on-ink); }
.over-en { font-size: 0.86rem; color: var(--on-ink-muted); }
.over-en a { color: var(--on-ink); border-bottom: 1px solid rgba(218, 181, 103, 0.5); }

/* ---------------------------------------------------------------- blog list */
.blog-sec { padding-top: clamp(40px, 5vw, 64px); }
.cat-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 18px; margin-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.88rem; font-weight: 700; color: var(--green); transition: background 0.3s, border-color 0.3s; }
.cat-bar a small { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.cat-bar a.cat { background: color-mix(in srgb, var(--t) 40%, var(--card)); }
.cat-bar a:hover { border-color: var(--green); }
.cat-bar a.on { background: var(--green); border-color: var(--green); color: var(--gold); }
.cat-bar a.on small { color: var(--gold-hi); }
.cat { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--t, var(--paper)); font-size: 0.74rem; font-weight: 700; color: var(--green); }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.pc > a { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s; }
.pc > a:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 30px 50px -34px rgba(16, 39, 30, 0.4); }
.pc-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pc > a:hover .pc-img img { transform: scale(1.05); }
.pc-blank { display: grid; place-items: center; background: linear-gradient(135deg, var(--paper), var(--gold-hi)); }
.pc-blank .mk { width: 56px; height: 50px; color: var(--green); opacity: 0.4; }
.pc-body { display: grid; align-content: start; gap: 10px; padding: 20px 22px 22px; }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); }
.pc-meta time { letter-spacing: 0.06em; }
.pc-t { font-family: var(--serif); font-size: 1.08rem; font-weight: 700; line-height: 1.6; color: var(--green); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-x { font-size: 0.86rem; line-height: 1.8; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 0.8rem; color: var(--muted); }
.pc-foot .tlink { font-size: 0.82rem; }
.pc-feat { grid-column: 1 / -1; }
.pc-feat > a { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: none; }
.pc-feat .pc-img { aspect-ratio: auto; min-height: 340px; }
.pc-feat .pc-body { align-content: center; gap: 16px; padding: clamp(26px, 4vw, 52px); }
.pc-feat .pc-t { font-size: clamp(1.4rem, 2.4vw, 2rem); -webkit-line-clamp: 3; }
.pc-feat .pc-x { -webkit-line-clamp: 3; font-size: 0.95rem; }
.pc-feat .pc-meta::after { content: "NEW"; padding: 3px 9px; border-radius: 4px; background: var(--deep); color: var(--gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.pg-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pg-nums a, .pg-nums span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--green); }
.pg-nums a { border: 1px solid var(--line-2); background: var(--card); transition: border-color 0.3s; }
.pg-nums a:hover { border-color: var(--green); }
.pg-nums a.on { background: var(--green); border-color: var(--green); color: var(--gold); }
.pg-side { min-width: 90px; font-weight: 700; color: var(--green); }
.pg-side:last-child { text-align: right; }
a.pg-side { border-bottom: 1px solid var(--gold); justify-self: start; }

/* ---------------------------------------------------------------- article */
.post-head { padding: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 48px); background: radial-gradient(60% 140% at 50% 0%, rgba(218, 181, 103, 0.14), transparent 70%); }
.wrap.narrow { max-width: 860px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: clamp(28px, 4vw, 48px) 0 16px; font-size: 0.84rem; color: var(--muted); }
.post-meta time { letter-spacing: 0.06em; }
.post-meta span::before { content: "・"; margin-right: 6px; }
.post-head h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; color: var(--green); }
.post-grid { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 48px; padding-bottom: clamp(48px, 6vw, 80px); }
.post-grid.has-toc { grid-template-columns: 230px minmax(0, 760px); }
.toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; padding: 20px 0 20px 18px; border-left: 2px solid var(--line); }
.toc-h { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-lo); margin-bottom: 12px; }
.toc ol { display: grid; gap: 4px; max-height: 64vh; overflow: auto; }
.toc a { display: block; padding: 4px 0; font-size: 0.86rem; line-height: 1.6; color: var(--muted); transition: color 0.2s; }
.toc .t3 a { padding-left: 12px; font-size: 0.8rem; }
.toc a:hover, .toc a.on { color: var(--green); }
.toc a.on { font-weight: 700; }
.toc a.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px -26px; background: var(--gold); transform: rotate(45deg); }
.post-cover { margin-bottom: 36px; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.post-cover img { width: 100%; }
.prose { font-size: 1.04rem; line-height: 2.05; color: var(--text); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { position: relative; margin-top: 2.2em; padding-left: 22px; font-family: var(--serif); font-size: 1.55rem; line-height: 1.5; color: var(--green); scroll-margin-top: calc(var(--header-h) + 70px); }
.prose h2::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.prose h3 { margin-top: 1.8em; font-family: var(--serif); font-size: 1.25rem; color: var(--green); scroll-margin-top: calc(var(--header-h) + 70px); }
.prose h4 { margin-top: 1.4em; font-size: 1.05rem; color: var(--green); }
.prose a { color: var(--green); font-weight: 700; border-bottom: 1px solid var(--gold); transition: background 0.2s; }
.prose a:hover { background: var(--gold-hi); }
.prose strong, .prose b { color: var(--green); }
.prose mark { color: inherit; background: linear-gradient(transparent 62%, rgba(218, 181, 103, 0.45) 62%); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--gold-lo); }
.prose blockquote { padding: 18px 22px; border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; background: var(--paper); color: var(--green); }
.prose blockquote > * + * { margin-top: 0.8em; }
.prose figure { margin-inline: 0; }
.prose img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 14px; }
.prose figcaption { margin-top: 8px; text-align: center; font-size: 0.84rem; color: var(--muted); }
.prose hr { border: 0; height: 12px; background: radial-gradient(circle, var(--gold) 2px, transparent 2.5px) center / 22px 12px repeat-x; width: 90px; margin: 2.4em auto; }
.prose .embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose video { width: 100%; border-radius: 14px; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.7; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--paper); color: var(--green); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.86rem; }
.share > span { font-weight: 700; color: var(--gold-lo); letter-spacing: 0.1em; margin-right: 4px; }
.share a, .share button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font: inherit; font-weight: 700; color: var(--green); cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.share a:hover, .share button:hover { border-color: var(--green); }
.share button.done { background: var(--green); color: var(--gold); border-color: var(--green); }
.post-cta-wrap { padding-bottom: clamp(56px, 7vw, 96px); }
.post-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-lg); background: var(--deep); color: var(--on-ink); }
.post-cta .kicker { color: var(--gold); }
.post-cta h2 { margin: 8px 0 10px; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.45; }
.post-cta p { color: var(--on-ink-muted); }
.pcta-btns { display: grid; gap: 12px; justify-items: stretch; }
.pcta-mark { position: absolute; right: -20px; bottom: -26px; width: 160px; height: 140px; color: var(--gold); opacity: 0.08; transform: rotate(-14deg); }
.related-posts { padding-top: 0; }
.related-posts .h2 { margin-bottom: 32px; }
.pcards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .form-side.sticky, .embed-card + .form-side { position: static; }
  .post-grid.has-toc { grid-template-columns: minmax(0, 760px); }
  .toc { position: static; border-left: 0; border-radius: var(--r); background: var(--paper); padding: 18px 20px; }
  .toc a.on::before { display: none; }
  .pcards, .pcards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .phero-mark { width: 130px; right: -30px; }
  .approach-in, .facts-in { grid-template-columns: 1fr; }
  .skills, .rules, .routes, .st-steps, .pcards, .pcards.three { grid-template-columns: 1fr; }
  .st-steps::before { display: none; }
  .pc-feat > a { grid-template-columns: 1fr; }
  .pc-feat .pc-img { min-height: 0; aspect-ratio: 16 / 9; }
  .inquiry .opts.two, .form-row3 { grid-template-columns: 1fr; }
  .embed-card iframe { height: 1800px; }
  .post-cta { grid-template-columns: 1fr; }
  .pcta-btns .btn { white-space: normal; text-align: center; }
  .pager { flex-direction: column; }
  .pg-side { min-width: 0; }
  .pn { grid-template-columns: 1fr; }
  .pn a.r { text-align: left; border-left: 0; border-top: 1px solid var(--line); }
  .prose { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .phero-mark, .phero-dot, .over-tag, .over-mark { animation: none !important; }
  .phero-dot { opacity: 0.6; }
}

/* ---------------------------------------------------------------- v7.1 existing inner pages: same masthead light, cards that say PRESS START */
.index-body { padding-top: clamp(40px, 5vw, 64px); }
.case-hero, .svc-hero { background: radial-gradient(60% 120% at 92% 0%, rgba(218, 181, 103, 0.16), transparent 60%), var(--ivory); }
.case .art .press { position: absolute; left: 50%; top: 50%; z-index: 2; padding: 8px 16px; border-radius: 6px; background: rgba(16, 39, 30, 0.86); color: var(--gold); font-family: "Courier New", ui-monospace, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; white-space: nowrap; opacity: 0; transform: translate(-50%, -40%); transition: opacity 0.35s, transform 0.45s var(--ease); pointer-events: none; }
.case:hover .art .press, .case:focus-within .art .press { opacity: 1; transform: translate(-50%, -50%); animation: blink 1.1s steps(1) 0.4s infinite; }
.case-hero .facts { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); padding: 4px 24px; }
.case-hero .facts div { border-bottom: 0; }
.chapter { transition: background 0.4s; border-radius: var(--r); }
.chap-no { transition: color 0.4s, transform 0.5s var(--ease); }
.case-story .chapter:hover .chap-no { color: var(--gold-lo); transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .case:hover .art .press { animation: none; }
}

/* ---------------------------------------------------------------- v8 Japanese pages: Japanese glyph forms, slightly tighter tracking */
html[lang="ja"] { --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif; }
html[lang="ja"] .hero h1, html[lang="ja"] .phero h1, html[lang="ja"] .h2 { letter-spacing: 0.02em; }
html[lang="ja"] .ld-quote { font-size: 0.92em; }

/* ---------------------------------------------------------------- v9 the official wordmark: two masked layers, coloured per place */
:root { --brand-yellow: #fbca5a; --brand-copper: #d7986a; }
.logo { position: relative; display: inline-block; flex: none; height: 1em; aspect-ratio: 948 / 400; --logo-main: currentColor; --logo-acc: var(--brand-copper); }
.logo i { position: absolute; inset: 0; background: var(--logo-main); transition: background 0.4s;
  -webkit-mask: url("img/logo-main.png?ver=1f8bfea239b319f2") center / contain no-repeat; mask: url("img/logo-main.png?ver=1f8bfea239b319f2") center / contain no-repeat; }
.logo i.logo-acc { background: var(--logo-acc); -webkit-mask-image: url("img/logo-accent.png?ver=7e69c24ace7204ba"); mask-image: url("img/logo-accent.png?ver=7e69c24ace7204ba"); }
/* header: deep green letters, copper accents; the accents warm to gold with the dog flip */
.brand-name { flex-direction: row; align-items: center; gap: 7px; font-size: inherit; letter-spacing: 0; }
.brand .logo { height: 48px; }
/* deep green at rest; when the dog flips to its game face, icon and wordmark turn gold together */
:root { --gold-crest: #b0812c; }
.site-header .brand .mk { transition: rotate 0.6s cubic-bezier(0.2, 0.65, 0.3, 1), color 0.6s var(--ease); }
.site-header .brand .logo i { transition: background 0.6s var(--ease); }
.site-header .brand:hover .mk, .site-header .brand:focus-visible .mk, .site-header .brand:active .mk { color: var(--gold-crest); }
.site-header .brand:hover .logo, .site-header .brand:focus-visible .logo, .site-header .brand:active .logo { --logo-main: var(--gold-crest); --logo-acc: var(--brand-copper); }
/* on dark grounds the logo wears its own colours */
.site-footer .brand .logo, .ld-word .logo { --logo-main: var(--brand-yellow); --logo-acc: var(--brand-copper); }
.foot-word { font-size: clamp(3.4rem, 12vw, 10.5rem); line-height: 1; }
.foot-word .logo { --logo-main: #183327; --logo-acc: rgba(215, 152, 106, 0.28); }
/* opening: the wordmark wipes in from the left */
.ld-word { display: block; overflow: visible; font-size: clamp(54px, 7vw, 86px); letter-spacing: 0; }
.ld-word .logo { transform: none; min-width: 0; clip-path: inset(0 100% 0 0); animation: logo-wipe 1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
@keyframes logo-wipe { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 720px) {
  .brand .logo { height: 34px; }
}

/* ---------------------------------------------------------------- v9.2 遊戲貴族 as a small seal beside the wordmark
   vertical-rl turns each pair into a column, right to left: 遊戲 | 貴族, read like a seal */
.brand-name small.brand-seal { position: static; writing-mode: vertical-rl; display: block; height: auto; align-self: flex-end; margin: 0 0 3px 3px; padding: 3px 2px; border-radius: 4px;
  background: var(--seal-bg, var(--green)); color: var(--seal-fg, var(--cream)); font-family: var(--serif); font-size: 9.5px; font-weight: 700; line-height: 1.12; letter-spacing: 0; white-space: nowrap;
  transform: rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: background 0.6s var(--ease), color 0.6s var(--ease), transform 0.6s var(--ease); }
.brand-seal span { display: block; }
.site-header .brand:hover .brand-seal, .site-header .brand:focus-visible .brand-seal, .site-header .brand:active .brand-seal { --seal-bg: var(--gold-crest); transform: rotate(0deg) scale(1.06); }
.site-footer .brand .brand-seal { --seal-bg: var(--brand-yellow); --seal-fg: var(--deep); }
@media (max-width: 720px) {
  .brand-name small.brand-seal { font-size: 8px; padding: 2px 1.5px; margin-bottom: 2px; }
}

/* ---------------------------------------------------------------- home: now and then the dog's yellow silhouette rises inside the inquiry button and sinks again
   (header button on wide screens, the hero button on phones; pure CSS, nothing runs at load) */
.home .bar-right .btn::after, .home .hero-cta .btn-ink::after {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1; width: 74px; height: 63px; margin-left: -37px; background: var(--brand-yellow);
  -webkit-mask: url("img/dog-silhouette.svg?ver=03e3a2e804ac134f") center / contain no-repeat; mask: url("img/dog-silhouette.svg?ver=03e3a2e804ac134f") center / contain no-repeat;
  transform: translateY(105%); pointer-events: none;
}
.home .bar-right .btn::after { animation: dog-rise 11s cubic-bezier(0.45, 0, 0.25, 1) 4s infinite; }
.home .bar-right .btn { animation: dog-rise-text 11s cubic-bezier(0.45, 0, 0.25, 1) 4s infinite; }
@keyframes dog-rise { 0%, 8% { transform: translateY(105%); } 16%, 26% { transform: translateY(18%); } 21% { transform: translateY(24%); } 34%, 100% { transform: translateY(105%); } }
@keyframes dog-rise-text { 0%, 9% { color: var(--cream); } 14%, 28% { color: var(--green); } 33%, 100% { color: var(--cream); } }   /* stays readable on the yellow */
html[data-ambience="night"] .home .site-header .bar-right .btn { animation: none; }
html[data-ambience="night"] .home .site-header .bar-right .btn::after { background: var(--cream); }
.home .bar-right .btn:hover::after, .home .bar-right .btn:focus-visible::after, .home .hero-cta .btn-ink:hover::after, .home .hero-cta .btn-ink:focus-visible::after { animation-play-state: paused; opacity: 0; }
.home .bar-right .btn:hover, .home .bar-right .btn:focus-visible, .home .hero-cta .btn-ink:hover, .home .hero-cta .btn-ink:focus-visible { animation: none; }
@media (max-width: 720px) {
  .home .hero-cta .btn-ink::after { animation: dog-rise 11s cubic-bezier(0.45, 0, 0.25, 1) 4s infinite; }
  .home .hero-cta .btn-ink { animation: dog-rise-text 11s cubic-bezier(0.45, 0, 0.25, 1) 4s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .home .bar-right .btn, .home .bar-right .btn::after, .home .hero-cta .btn-ink, .home .hero-cta .btn-ink::after { animation: none !important; }
}

/* ---------------------------------------------------------------- LINE: every LINE link opens this panel first -- scan on a computer, open the app on a phone */
.line-qr { width: min(92vw, 380px); max-height: 92vh; padding: 26px 24px 20px; border: 0; border-radius: var(--r-lg); background: var(--card); color: var(--green); box-shadow: 0 40px 80px -30px rgba(7, 18, 13, 0.55); overflow: auto; }
.line-qr[open] { display: grid; gap: 16px; animation: card-in 0.35s var(--ease); }
.line-qr::backdrop { background: rgba(7, 18, 13, 0.55); backdrop-filter: blur(3px); }
.lq-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lq-x:hover, .lq-x:focus-visible { background: var(--paper); color: var(--green); }
.lq-t { order: -2; display: flex; align-items: center; gap: 10px; margin: 0; padding-right: 36px; font-family: var(--head); font-size: 1.22rem; font-weight: 700; }
.lq-ico .line-ic { display: block; width: 32px; height: 32px; }
.lq-scan { display: grid; justify-items: center; gap: 10px; text-align: center; }
.lq-scan .qr { display: block; width: 196px; height: 196px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.lq-scan p, .lq-phone p { margin: 0; font-size: 0.88rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.lq-phone { display: grid; justify-items: center; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--line-2); text-align: center; }
.lq-open { background: var(--line-green); border-color: var(--line-green); color: #fff; }
.lq-id { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 0; font-size: 0.86rem; }
.lq-id span { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; }
.lq-copy { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--green); font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.lq-copy:hover, .lq-copy:focus-visible { border-color: var(--gold); }
/* on a phone the app button comes first (you can't scan your own screen); the QR stays below for showing a friend */
@media (pointer: coarse) and (max-width: 820px) {
  .lq-phone { order: -1; padding: 0 0 16px; border-top: 0; border-bottom: 1px dashed var(--line-2); }
  .lq-scan .qr { width: 150px; height: 150px; }
}

/* ---------------------------------------------------------------- hang tag: a little label tied on like a bottle tag in the tavern (replaces the old rotating text rings) */
.hang-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 34px; background: var(--card); color: var(--green);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); rotate: -6deg; transform-origin: 12px 50%;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -3px 0 rgba(218, 181, 103, 0.35); filter: drop-shadow(0 12px 14px rgba(16, 39, 30, 0.16)); transition: rotate 0.6s var(--ease); }
.tag-eye { position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--gold), inset 0 1px 2px rgba(16, 39, 30, 0.35); }
.tag-txt { display: grid; gap: 1px; line-height: 1.25; }
.tag-txt small { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-lo); text-transform: uppercase; white-space: nowrap; }
.tag-txt b { font-family: var(--serif-latin); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.hang-tag > .ic { flex: none; width: 26px; height: 26px; stroke-width: 1.6; color: var(--ink-3); }
.hang-tag .tag-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; }
a.hang-tag:hover, a.hang-tag:focus-visible { rotate: -1deg; }       /* only a tag you can click sways, and only when touched */
@media (prefers-reduced-motion: reduce) { .hang-tag { transition: none; } }

/* Readiness gate only: supplied animation timing and design unchanged. */
html.fonts-pending:not(.ld-open) .loader *, html.fonts-pending:not(.ld-open) .loader *::before, html.fonts-pending:not(.ld-open) .loader *::after { animation-play-state: paused !important; }

/* Keep translated hero content inside its grid track at narrow widths. */
.home .hero-copy { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.home .hero-cta { min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  .home .hero-cta .btn-dk { white-space: normal; padding-block: 8px; }
}

/* Legacy form copies reuse the detailed inquiry layout. */
.legacy-inquiry { min-width: 0; }
.legacy-inquiry fieldset { min-width: 0; }
.legacy-inquiry legend { display: block; overflow-wrap: anywhere; }
.legacy-inquiry .inq-foot { display: grid; gap: 16px; }

.article-related-card { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow-wrap: anywhere; }
.article-related-card span { font-size: .9em; }

/* R11: preserve readable content around existing decorative elements. */
html[lang="ja"] .jr-time { word-break: normal; overflow-wrap: anywhere; }
.rules .rule { display: flow-root; }
.rules .rule-no { position: static; float: right; margin: -30px -10px 8px 12px; }
.rules .rule h3 { margin-bottom: 10px; }
@media (max-width: 1439px) { .site-footer { padding-bottom: 176px; } }
@media (max-width: 720px) {
  .prose .table-wrap[data-scroll-table] { max-width: 100%; overscroll-behavior-x: contain; }
  .prose .table-wrap[data-scroll-table] table { min-width: 640px; }
}

.toc .t4 a { padding-left: 24px; font-size: 0.8rem; }