/* roulang page: index */
:root {
  --ink: #14120f;
  --ink-soft: #241f18;
  --gold: #b9924a;
  --gold-2: #e7d3a1;
  --gold-deep: #8c6a2f;
  --cream: #f6f2ea;
  --paper: #fffcf7;
  --sand: #efe4d2;
  --text: #1d1914;
  --muted: #6d6458;
  --line: rgba(185, 146, 74, .38);
  --shadow: 0 22px 50px rgba(20, 18, 15, .12);
  --radius: 22px;
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Be Vietnam Pro", sans-serif;
  --bs-body-font-family: "Be Vietnam Pro", sans-serif;
  --bs-body-color: #1d1914;
  --bs-body-bg: #f6f2ea;
  --bs-primary: #b9924a;
  --bs-link-color: #8c6a2f;
  --bs-link-hover-color: #14120f;
  --bs-border-radius: 18px;
  --bs-border-color: rgba(185, 146, 74, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--cream);
  line-height: 1.75;
  font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: #e7d3a1; color: #14120f; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.container { width: min(1140px, calc(100% - 2rem)); }
h1, h2, h3, .display-serif { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0 0 1rem; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: .8rem;
}
.block-ink .kicker { color: var(--gold-2); }
h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); margin: 0 0 1rem; color: var(--ink); }
.block-ink h2, .hero h1, .band h2, .global h2, .contact h2 { color: #f7f1e6; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 68ch; }
.block-ink .lead, .global .lead, .contact .lead, .band .lead { color: rgba(247, 241, 230, .78); }
.block { padding: clamp(4rem, 7vw, 6.4rem) 0; }
.block-cream { background: var(--cream); }
.block-paper { background: var(--paper); }
.block-sand { background: linear-gradient(180deg, #f3e7d4, #f7f1e6); }
.block-ink { background: var(--ink); color: #f7f1e6; }
section { scroll-margin-top: 8.2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .88rem 1.3rem;
  font-weight: 600;
  border: 0;
  line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-gold {
  background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
  color: #1a140c !important;
  box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: #f6f1e7 !important;
  border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
  background: var(--ink);
  color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-line {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 14, 12, .94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(231, 211, 161, .18);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .7rem 0 .85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.chip {
  flex: 0 0 auto;
  color: #f3ead7;
  border: 1px solid rgba(231,211,161,.32);
  border-radius: 999px;
  padding: .48rem .95rem;
  font-size: .9rem;
  background: transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }

.hero {
  position: relative;
  isolation: isolate;
  color: #f7f1e6;
  padding: 4.2rem 0 2.2rem;
  background:
    linear-gradient(180deg, rgba(10,8,6,.82), rgba(10,8,6,.55) 42%, rgba(10,8,6,.9)),
    url("/assets/images/63d7ab2777eb680e.webp") center/cover no-repeat;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  width: 46vw; height: 46vw;
  right: -12vw; top: -16vw;
  background: radial-gradient(circle, rgba(185,146,74,.32), transparent 68%);
  z-index: -1;
}
.hero-title { font-size: clamp(2.7rem, 6vw, 5.5rem); max-width: 16ch; margin: .4rem 0 1.1rem; }
.hero-lead { max-width: 62ch; color: rgba(247,241,230,.86); font-size: 1.02rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.2rem; }
.level-badge {
  border: 1px solid rgba(231,211,161,.4);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .84rem;
  color: var(--gold-2);
  background: rgba(20,16,12,.35);
}
.level-badge.is-live { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.privilege-bar {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  padding: .4rem;
  border: 1px solid rgba(231,211,161,.28);
  border-radius: 26px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.privilege { padding: 1rem 1.05rem 1.05rem; border-radius: 20px; }
.privilege strong { display: block; font-family: var(--display); font-size: 1.55rem; font-weight: 600; color: var(--gold-2); }
.privilege span { display: block; color: rgba(247,241,230,.78); font-size: .92rem; }

.band {
  background:
    linear-gradient(100deg, rgba(20,16,12,.94), rgba(48,36,20,.9)),
    url("/assets/images/73f0fd693f8f3eb0.webp") center/cover;
  color: #f7f1e6;
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(231,211,161,.2);
}
.band-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 1.5rem; align-items: center; }
.clock { display: flex; gap: .6rem; justify-content: flex-end; }
.clock-cell {
  min-width: 84px;
  text-align: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(231,211,161,.35);
  border-radius: 18px;
  padding: .7rem .4rem;
}
.clock-cell b { display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--gold-2); }
.clock-cell span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(247,241,230,.7); }
.urgent {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
  color: #f0d7a4;
  font-weight: 600;
}
.urgent i { animation: pulse 1.6s ease infinite; }

.rail-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.4rem; }
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 78%);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  scroll-snap-type: x mandatory;
}
.slot {
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.15rem 1.2rem;
  box-shadow: var(--shadow);
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.slot:hover { transform: translateY(-4px); box-shadow: 0 24px 40px rgba(20,18,15,.16); }
.slot-kicker { color: var(--gold-deep); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.slot h3 { font-size: 2rem; margin: .35rem 0 .6rem; }
.remain {
  display: inline-flex;
  margin-bottom: .7rem;
  border-radius: 999px;
  padding: .2rem .65rem;
  background: #efe4d2;
  color: #6a501e;
  font-size: .82rem;
  font-weight: 700;
}
.remain.is-low { background: #3a241c; color: #f3d7b0; }
.slot-meta { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }

.pain-num {
  font-family: var(--display);
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  margin-bottom: 1rem;
}
.pain-item, .point, .who-item, .matrix a, .delta-box, .quote, .news-item, .region {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,252,247,.72);
}
.block-ink .pain-item, .block-ink .region { background: rgba(255,255,255,.04); color: #f7f1e6; }
.pain-item, .point, .who-item { padding: 1rem 1.05rem; margin-bottom: .75rem; }
.pain-item h3, .point h3, .who-item h3, .region h3 { font-size: 1.45rem; margin: 0 0 .35rem; }
.photo-frame {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
  background: #ddd;
}
.photo-frame img, .case-photo img, .news-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-photo, .news-photo { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.case-photo { aspect-ratio: 16/11; }
.news-photo { aspect-ratio: 4/3; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.step-index {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 1.4rem;
}
.global {
  background:
    linear-gradient(100deg, rgba(12,10,8,.92) 20%, rgba(12,10,8,.72)),
    url("/assets/images/200f67826aec0d68.webp") center/cover no-repeat;
  color: #f7f1e6;
}
.region { padding: .9rem 1rem; margin-bottom: .7rem; }
.region span { display: block; color: rgba(247,241,230,.75); }
.bento-item {
  position: relative;
  min-height: 230px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(231,211,161,.3);
  color: #fff;
}
.bento-item.tall { min-height: 100%; }
.bento-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento-cap {
  position: relative;
  z-index: 1;
  min-height: 230px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem;
  background: linear-gradient(transparent, rgba(8,6,4,.88) 70%);
}
.bento-item.tall .bento-cap { min-height: 480px; }
.bento-cap h3 { font-size: 2rem; margin-bottom: .4rem; }
.check { list-style: none; padding: 0; margin: 0; }
.check li {
  padding: .85rem 0 .85rem 2rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.check li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--gold-deep);
}
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.5rem; }
.stat {
  padding: 1.1rem;
  border-top: 1px solid rgba(231,211,161,.35);
}
.stat b { display: block; font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--gold-2); line-height: 1; }
.quote { padding: 1.3rem; height: 100%; background: var(--paper); }
.quote p { font-family: var(--display); font-size: 1.7rem; line-height: 1.25; color: var(--ink); }
.quote footer { color: var(--muted); font-size: .92rem; }
.delta-box { padding: 1.3rem; height: 100%; background: var(--paper); }
.delta-box.hot { background: var(--ink); color: #f7f1e6; }
.delta-box h3 { font-size: 2rem; }
.tier-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); }
.tier-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tier-table th, .tier-table td { padding: 1rem .9rem; text-align: left; border-bottom: 1px solid rgba(185,146,74,.2); vertical-align: top; }
.tier-table th { font-size: .92rem; color: var(--muted); font-weight: 600; }
.tier-table td:first-child { font-weight: 600; }
.tier-table .rec { background: #1a160f; color: #f7f1e6; }
.tier-table thead .rec { color: var(--gold-2); }
.pill {
  display: inline-block;
  margin-left: .35rem;
  background: var(--gold);
  color: #1a140c;
  border-radius: 999px;
  padding: .05rem .45rem;
  font-size: .72rem;
  font-weight: 700;
}
.matrix a {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem;
  height: 100%;
  background: rgba(255,252,247,.8);
  transition: transform .2s ease, border-color .2s ease;
}
.matrix a:hover { transform: translateY(-3px); border-color: var(--gold-deep); }
.matrix i {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-2);
  margin-top: .2rem;
}
.news-item { display: grid; grid-template-columns: 168px 1fr; gap: 1rem; padding: .8rem; margin-bottom: .8rem; background: var(--paper); }
.more-link { color: var(--gold-deep); font-weight: 700; }
.more-link:hover { color: var(--ink); }
.contact {
  background:
    linear-gradient(180deg, rgba(14,12,10,.92), rgba(14,12,10,.88)),
    url("/assets/images/36f58ccd76556ea6.webp") center/cover;
  color: #f7f1e6;
}
.contact-panel {
  background: rgba(255,252,247,.96);
  color: var(--text);
  border-radius: 26px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
}
.form-control, .form-select {
  border: 1px solid rgba(185,146,74,.45);
  background: #fffdf9;
  border-radius: 14px;
  padding: .85rem 1rem;
  color: var(--text);
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(185,146,74,.18);
}
.form-note { margin-top: .8rem; background: #f4ecdf; border-radius: 14px; padding: .9rem 1rem; }
.fine { color: var(--muted); font-size: .9rem; }
.site-footer { background: #0d0c0a; color: rgba(247,241,230,.78); padding: 3rem 0 1.2rem; }
.site-footer h2 { font-size: 2rem; color: #f7f1e6; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links a { display: inline-block; padding: .25rem 0; }
.foot-links a:hover { color: var(--gold-2); }
.legal { border-top: 1px solid rgba(231,211,161,.16); margin-top: 1.5rem; padding-top: 1rem; font-size: .9rem; }

@media (max-width: 1024px) {
  .privilege-bar, .stat-row { grid-template-columns: repeat(2, 1fr); }
  .band-grid { grid-template-columns: 1fr; }
  .clock { justify-content: flex-start; }
  .bento-item.tall .bento-cap { min-height: 320px; }
  .brand-name { white-space: normal; }
}
@media (min-width: 1024px) {
  .rail-track { grid-auto-flow: unset; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
}
@media (max-width: 768px) {
  .header-top { align-items: flex-start; }
  .news-item { grid-template-columns: 1fr; }
  .hero { padding-top: 2.4rem; }
  .tier-table { min-width: 0; }
  .tier-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tier-table, .tier-table tbody, .tier-table tr, .tier-table td { display: block; width: 100%; }
  .tier-table tr { margin: .8rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .tier-table td { display: flex; justify-content: space-between; gap: 1rem; }
  .tier-table td::before { content: attr(data-label); color: var(--gold-deep); font-weight: 700; }
  .tier-table .rec { background: #1a160f; }
}
@media (max-width: 520px) {
  .brand-kicker { display: none; }
  .brand-name { font-size: .92rem; }
  .header-cta { padding: .7rem .85rem; }
  .privilege-bar, .stat-row, .clock { grid-template-columns: 1fr 1fr; }
  .clock { display: grid; }
  .hero-actions .btn, .slot .btn, .contact .btn { width: 100%; }
  .hero-title { font-size: 2.35rem; }
  .pain-num { font-size: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* roulang page: category2 */
:root {
  --ink: #14120f;
  --ink-soft: #241f18;
  --gold: #b9924a;
  --gold-2: #e7d3a1;
  --gold-deep: #8c6a2f;
  --cream: #f6f2ea;
  --paper: #fffcf7;
  --sand: #efe4d2;
  --text: #1d1914;
  --muted: #6d6458;
  --line: rgba(185, 146, 74, .38);
  --shadow: 0 22px 50px rgba(20, 18, 15, .12);
  --radius: 22px;
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Be Vietnam Pro", sans-serif;
  --bs-body-font-family: "Be Vietnam Pro", sans-serif;
  --bs-body-color: #1d1914;
  --bs-body-bg: #f6f2ea;
  --bs-primary: #b9924a;
  --bs-link-color: #8c6a2f;
  --bs-link-hover-color: #14120f;
  --bs-border-radius: 18px;
  --bs-border-color: rgba(185, 146, 74, .35);
}
/* roulang page: category2 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(185,146,74,.16), transparent 60%),
    var(--cream);
  line-height: 1.75;
  font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
}
p { margin: 0 0 .8rem; }
.container { width: min(1140px, calc(100% - 2rem)); margin-inline: auto; }
.block-ink h2, .hero h1, .band h2, .global h2, .contact h2 { color: #f7f1e6; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 68ch; }
.block-ink .lead, .global .lead, .contact .lead, .band .lead { color: rgba(247, 241, 230, .78); }
section { scroll-margin-top: 8.2rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .88rem 1.3rem;
  font-weight: 600;
  border: 0;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible, .chip:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}
.btn-gold {
  background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
  color: #1a140c !important;
  box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: #f6f1e7 !important;
  border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
  background: var(--ink);
  color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-line {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 14, 12, .94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(231, 211, 161, .18);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.header-cta { flex: 0 0 auto; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .7rem 0 .85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.chip {
  flex: 0 0 auto;
  color: #f3ead7;
  border: 1px solid rgba(231,211,161,.32);
  border-radius: 999px;
  padding: .48rem .95rem;
  font-size: .9rem;
  background: transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero {
  position: relative;
  isolation: isolate;
  color: #f7f1e6;
  padding: 4.2rem 0 2.2rem;
  background:
    linear-gradient(180deg, rgba(10,8,6,.82), rgba(10,8,6,.55) 42%, rgba(10,8,6,.9)),
    url("/assets/images/63d7ab2777eb680e.webp") center/cover no-repeat;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  width: 46vw; height: 46vw;
  right: -12vw; top: -16vw;
  background: radial-gradient(circle, rgba(185,146,74,.32), transparent 68%);
  z-index: -1;
}
.hero-title { font-size: clamp(2.7rem, 6vw, 5.5rem); max-width: 16ch; margin: .4rem 0 1.1rem; }
.hero-lead { max-width: 62ch; color: rgba(247,241,230,.86); font-size: 1.02rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.2rem; }
.level-badge {
  border: 1px solid rgba(231,211,161,.4);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .84rem;
  color: var(--gold-2);
  background: rgba(20,16,12,.35);
}
.level-badge.is-live { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.band-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 1.5rem; align-items: center; }
.remain {
  display: inline-flex;
  margin-bottom: .7rem;
  border-radius: 999px;
  padding: .2rem .65rem;
  background: #efe4d2;
  color: #6a501e;
  font-size: .82rem;
  font-weight: 700;
}
.remain.is-low { background: #3a241c; color: #f3d7b0; }
.slot-meta { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.pain-item, .point, .who-item, .matrix a, .delta-box, .quote, .news-item, .region {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,252,247,.72);
}
.block-ink .pain-item, .block-ink .region, .block-ink .quote, .block-ink .delta-box { background: rgba(255,255,255,.04); color: #f7f1e6; }
.pain-item, .point, .who-item { padding: 1rem 1.05rem; margin-bottom: .75rem; }
.pain-item h3, .point h3, .who-item h3, .region h3 { font-size: 1.45rem; margin: 0 0 .35rem; }
.photo-frame img, .case-photo img, .news-photo img { width: 100%; height: 100%; object-fit: cover; }
.bento-item {
  position: relative;
  min-height: 230px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.photo-frame, .case-photo, .news-photo {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 240px;
  height: 100%;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--gold-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
}
.block-ink .kicker, .contact .kicker, .rank-mast .kicker { color: var(--gold-2); }
.section-head { max-width: 40rem; margin-bottom: 1.6rem; }
.section-head h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); margin: .35rem 0 .7rem; }
main > section { padding: 4.4rem 0; }
.tone-sand { background: linear-gradient(180deg, rgba(255,252,247,.45), rgba(239,228,210,.55)); }
.tone-ink {
  background:
    linear-gradient(180deg, rgba(12,10,8,.92), rgba(20,16,12,.88)),
    url("/assets/images/77fffdd18d18e7ea.webp") center/cover no-repeat;
  color: #f7f1e6;
}
.rank-mast {
  position: relative;
  color: #f7f1e6;
  padding: 3.2rem 0 3.4rem;
  background:
    linear-gradient(100deg, rgba(10,8,6,.92) 12%, rgba(10,8,6,.72) 58%, rgba(10,8,6,.55)),
    url("/assets/images/36f58ccd76556ea6.webp") center/cover no-repeat;
}
.rank-mast h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); max-width: 12ch; margin: .45rem 0 .8rem; color: #f7f1e6; }
.mast-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: end; }
.seal-card {
  background: rgba(16,13,10,.72);
  border: 1px solid rgba(231,211,161,.35);
  border-radius: 28px;
  padding: 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.seal-photo { height: 250px; border-radius: 18px; overflow: hidden; }
.seal-photo img { width: 100%; height: 100%; object-fit: cover; }
.seal-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: .9rem .3rem .2rem; }
.seal-meta strong { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 600; }
.seal-meta span { color: rgba(247,241,230,.72); font-size: .88rem; }
.ladder { display: grid; gap: .85rem; }
.ladder-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(20,18,15,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ladder-row:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rank-name { font-family: var(--display); font-size: 1.7rem; margin: 0; }
.rank-note { color: var(--muted); font-size: .92rem; margin: 0; }
.bar { height: 8px; border-radius: 999px; background: #efe6d6; overflow: hidden; margin: .45rem 0; }
.bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8c6a2f, #e7d3a1);
  animation: fillbar 1.1s ease forwards;
}
.w-28 { --w: 28%; } .w-52 { --w: 52%; } .w-76 { --w: 76%; } .w-100 { --w: 100%; }
@keyframes fillbar { to { width: var(--w); } }
.rank-side { text-align: right; min-width: 7.5rem; }
.rank-side b { display: block; font-size: .95rem; }
.rank-side small { color: var(--muted); }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.6rem; align-items: center; }
.split.reverse { grid-template-columns: 1.05fr .95fr; }
.stack-photo { height: 100%; min-height: 420px; }
.stack-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.caption {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .86rem;
}
.step-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; }
.step-rail::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  top: 1.35rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.step {
  position: relative;
  padding: 0 .2rem;
}
.step-no {
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 1.2rem;
  margin-bottom: .9rem;
  border: 1px solid var(--gold);
}
.step h3 { font-size: 1.55rem; margin: 0 0 .35rem; }
.step p { color: var(--muted); margin: 0; }
.metric-row { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 0; border: 1px solid rgba(231,211,161,.28); border-radius: 28px; overflow: hidden; }
.metric {
  padding: 1.5rem 1.3rem;
  border-left: 1px solid rgba(231,211,161,.22);
  background: rgba(255,255,255,.03);
}
.metric:first-child { border-left: 0; background: rgba(185,146,74,.08); }
.metric b { display: block; font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--gold-2); line-height: 1; }
.metric span { display: block; margin-top: .45rem; color: rgba(247,241,230,.78); }
.quote-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }
.quote { padding: 1.3rem 1.35rem; box-shadow: var(--shadow); }
.quote p { font-family: var(--display); font-size: 1.85rem; line-height: 1.25; color: var(--ink); margin-bottom: .8rem; }
.quote cite { font-style: normal; color: var(--muted); font-size: .92rem; }
.quote-side { display: grid; gap: .85rem; }
.quote-side .quote p { font-size: 1.25rem; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.who-item { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; margin: 0; }
.who-item i { color: var(--gold-deep); margin-top: .35rem; }
.bulletin { display: grid; grid-template-columns: .78fr 1.22fr; gap: 1.3rem; align-items: stretch; }
.news-list { display: grid; gap: .75rem; }
.news-item { display: grid; grid-template-columns: 7.2rem 1fr; gap: .9rem; padding: .85rem; align-items: center; transition: transform .2s ease, box-shadow .2s ease; }
.news-item:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.news-item img { width: 7.2rem; height: 5rem; object-fit: cover; border-radius: 12px; }
.news-item h3 { font-size: 1.35rem; margin: 0 0 .2rem; }
.news-item p { margin: 0; color: var(--muted); font-size: .92rem; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.5rem; align-items: start; }
.seat-form {
  background: rgba(255,252,247,.06);
  border: 1px solid rgba(231,211,161,.3);
  border-radius: 26px;
  padding: 1.15rem;
}
.field { margin-bottom: .75rem; }
.field label { display: block; font-size: .82rem; color: var(--gold-2); margin-bottom: .28rem; }
.field input, .field select, .field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(231,211,161,.35);
  background: rgba(10,8,6,.45);
  color: #f7f1e6;
  padding: .78rem .9rem;
}
.field textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fine { color: rgba(247,241,230,.62); font-size: .84rem; margin: .7rem 0 0; }
.site-footer {
  background: #100e0c;
  color: #f7f1e6;
  padding: 3.2rem 0 1.4rem;
  border-top: 1px solid rgba(231,211,161,.16);
}
.site-footer h2 { font-family: var(--display); font-size: 1.7rem; color: var(--gold-2); margin-bottom: .6rem; }
.site-footer p { color: rgba(247,241,230,.78); }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links li { margin: .28rem 0; }
.foot-links a { color: rgba(247,241,230,.82); border-bottom: 1px solid transparent; }
.foot-links a:hover { color: var(--gold-2); border-color: var(--gold); }
.legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(231,211,161,.18); color: rgba(247,241,230,.62); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
  .bar > span { animation: none; width: var(--w); }
  .btn, .ladder-row, .news-item, .chip { transition: none; }
}
@media (max-width: 1024px) {
  .mast-grid, .split, .split.reverse, .quote-layout, .bulletin, .contact-grid, .metric-row, .step-rail { grid-template-columns: 1fr; }
  .step-rail::before { display: none; }
  .metric { border-left: 0; border-top: 1px solid rgba(231,211,161,.22); }
  .metric:first-child { border-top: 0; }
  .stack-photo { min-height: 280px; }
}
@media (max-width: 768px) {
  main > section { padding: 3.2rem 0; }
  .ladder-row, .news-item, .who-grid, .form-row { grid-template-columns: 1fr; }
  .rank-side { text-align: left; }
  .news-item img { width: 100%; height: 160px; }
  .brand-name { white-space: normal; }
  .seal-photo { height: 200px; }
}
@media (max-width: 520px) {
  .header-top { align-items: flex-start; }
  .brand-name { font-size: .88rem; line-height: 1.3; }
  .header-cta { padding: .72rem .85rem; font-size: .8rem; }
  .rank-mast h1 { font-size: 2.45rem; }
  .hero-actions, .badge-row { gap: .45rem; }
  .btn { width: 100%; }
  .seal-meta { flex-direction: column; align-items: flex-start; }
}

/* roulang page: category1 */
:root {
 --ink: #14120f;
 --ink-soft: #241f18;
 --gold: #b9924a;
 --gold-2: #e7d3a1;
 --gold-deep: #8c6a2f;
 --cream: #f6f2ea;
 --paper: #fffcf7;
 --sand: #efe4d2;
 --text: #1d1914;
 --muted: #6d6458;
 --line: rgba(185, 146, 74, .38);
 --shadow: 0 22px 50px rgba(20, 18, 15, .12);
 --radius: 22px;
 --display: "Cormorant Garamond", Georgia, serif;
 --sans: "Be Vietnam Pro", sans-serif;
 --bs-body-font-family: "Be Vietnam Pro", sans-serif;
 --bs-body-color: #1d1914;
 --bs-body-bg: #f6f2ea;
 --bs-primary: #b9924a;
 --bs-link-color: #8c6a2f;
 --bs-link-hover-color: #14120f;
 --bs-border-radius: 18px;
 --bs-border-color: rgba(185, 146, 74, .35);
}
/* roulang page: category1 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--text);
 background:
  radial-gradient(1200px 420px at 100% -10%, rgba(185,146,74,.16), transparent 55%),
  var(--cream);
 line-height: 1.75;
 font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(1140px, calc(100% - 2rem)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.block-ink h2, .hero h1, .band h2, .global h2, .contact h2, .gate h1 { color: #f7f1e6; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 68ch; }
.block-ink .lead, .global .lead, .contact .lead, .band .lead, .gate .lead { color: rgba(247, 241, 230, .78); }
section { scroll-margin-top: 8.2rem; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: .45rem;
 margin: 0 0 .7rem;
 color: var(--gold-deep);
 font-size: .75rem;
 font-weight: 700;
 letter-spacing: .16em;
 text-transform: uppercase;
}
.eyebrow::before {
 content: "";
 width: 1.6rem;
 height: 1px;
 background: var(--gold);
}
.block-ink .eyebrow, .contact .eyebrow, .gate .eyebrow { color: var(--gold-2); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 border-radius: 999px;
 padding: .88rem 1.3rem;
 font-weight: 600;
 border: 0;
 line-height: 1.2;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn-gold {
 background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
 color: #1a140c !important;
 box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
 background: transparent;
 color: #f6f1e7 !important;
 border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
 background: var(--ink);
 color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-line {
 background: transparent;
 color: var(--ink) !important;
 border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }
.btn:focus-visible, .chip:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(16, 14, 12, .94);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(231, 211, 161, .18);
 box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
 width: 42px; height: 42px; flex: 0 0 42px;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold-2);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
 display: flex;
 gap: .55rem;
 overflow-x: auto;
 padding: .7rem 0 .85rem;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
}
.chip {
 flex: 0 0 auto;
 color: #f3ead7;
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 999px;
 padding: .48rem .95rem;
 font-size: .9rem;
 background: transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero-title, .gate h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); max-width: 14ch; margin: .2rem 0 1rem; }
.hero-lead, .gate .lead { max-width: 46ch; color: rgba(247,241,230,.86); font-size: 1.05rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.2rem; }
.level-badge {
 border: 1px solid rgba(231,211,161,.4);
 border-radius: 999px;
 padding: .4rem .8rem;
 font-size: .84rem;
 color: var(--gold-2);
 background: rgba(20,16,12,.35);
}
.level-badge.is-live { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.remain {
 display: inline-flex;
 margin-bottom: .7rem;
 border-radius: 999px;
 padding: .2rem .65rem;
 background: #efe4d2;
 color: #6a501e;
 font-size: .82rem;
 font-weight: 700;
}
.remain.is-low { background: #3a241c; color: #f3d7b0; }
.slot-meta { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.pain-item, .point, .who-item, .matrix a, .delta-box, .quote, .news-item, .region {
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255,252,247,.72);
}
.block-ink .pain-item, .block-ink .region, .contact .point { background: rgba(255,255,255,.04); color: #f7f1e6; }
.pain-item, .point, .who-item { padding: 1rem 1.05rem; }
.pain-item h3, .point h3, .who-item h3, .region h3, .quote h3 { font-size: 1.55rem; margin: 0 0 .35rem; }
.photo-frame img, .case-photo img, .news-photo img { width: 100%; height: 100%; object-fit: cover; }
.site-footer {
 background: #100e0c;
 color: #f7f1e6;
 padding: 3.2rem 0 1.4rem;
 border-top: 1px solid rgba(231,211,161,.18);
}
.site-footer h2 { font-size: 1.8rem; margin: 0 0 .6rem; color: #f7f1e6; }
.site-footer p { color: rgba(247,241,230,.74); }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links a { color: #f3ead7; display: inline-flex; padding: .22rem 0; border-bottom: 1px solid transparent; }
.foot-links a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
.legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(231,211,161,.16); color: rgba(247,241,230,.55); font-size: .88rem; }
.gate {
 position: relative;
 isolation: isolate;
 color: #f7f1e6;
 padding: 3.4rem 0 3rem;
 background:
  linear-gradient(105deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.78) 48%, rgba(10,8,6,.55) 100%),
  url("/assets/images/77fffdd18d18e7ea.webp") center/cover no-repeat;
 overflow: hidden;
}
.gate::after {
 content: "";
 position: absolute;
 width: 38vw; height: 38vw;
 left: -12vw; bottom: -18vw;
 background: radial-gradient(circle, rgba(185,146,74,.28), transparent 68%);
 z-index: -1;
}
.gate-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: center; }
.gate-visual { position: relative; min-height: 420px; }
.gate-visual img {
 width: 100%;
 height: 460px;
 object-fit: cover;
 border-radius: 28px;
 border: 1px solid rgba(231,211,161,.35);
 box-shadow: var(--shadow);
}
.burst {
 position: absolute;
 z-index: 2;
 top: -8px;
 right: -6px;
 width: 108px;
 height: 108px;
 display: grid;
 place-items: center;
 padding: 1rem;
 text-align: center;
 color: #1a140c;
 font-size: .78rem;
 font-weight: 700;
 line-height: 1.2;
 background: radial-gradient(circle at 30% 30%, #fff8ea, #e7d3a1 42%, #c6a15b 80%);
 clip-path: polygon(50% 0%, 61% 16%, 80% 8%, 76% 28%, 98% 38%, 80% 50%, 90% 72%, 68% 68%, 50% 96%, 32% 68%, 10% 72%, 20% 50%, 2% 38%, 24% 28%, 20% 8%, 39% 16%);
 animation: seal 3.2s ease-in-out infinite;
}
.ticket {
 position: absolute;
 left: -1.4rem;
 bottom: 1.2rem;
 width: min(320px, 86%);
 padding: 1rem 1.05rem 1.05rem;
 border-radius: 20px;
 background: rgba(255,252,247,.94);
 color: var(--text);
 border: 1px solid rgba(185,146,74,.45);
 box-shadow: var(--shadow);
}
.ticket strong { display: block; font-family: var(--display); font-size: 1.55rem; line-height: 1.15; margin-bottom: .35rem; }
.ticket p { margin: 0; color: var(--muted); font-size: .92rem; }
.sheet { padding: 4.4rem 0; }
.sheet-paper { background: var(--paper); border-block: 1px solid rgba(185,146,74,.18); }
.sheet h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); margin: 0 0 .8rem; max-width: 16ch; }
.pain-row {
 display: grid;
 grid-template-columns: 92px 1fr 1.1fr;
 gap: 1.2rem;
 align-items: center;
 padding: 1.25rem 0;
 border-bottom: 1px solid var(--line);
}
.pain-row:first-of-type { border-top: 1px solid var(--line); }
.pain-index {
 font-family: var(--display);
 font-size: 2.4rem;
 color: var(--gold-deep);
 line-height: 1;
}
.pain-row h3 { margin: 0 0 .25rem; font-size: 1.8rem; }
.pain-row p { margin: 0; color: var(--muted); }
.solve-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.6rem; align-items: stretch; }
.solve-photo { position: relative; min-height: 460px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); }
.solve-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.solve-photo figcaption {
 position: absolute;
 left: 1rem; right: 1rem; bottom: 1rem;
 padding: .8rem 1rem;
 border-radius: 16px;
 background: rgba(16,14,12,.72);
 color: #f7f1e6;
 backdrop-filter: blur(8px);
}
.point + .point { margin-top: .75rem; }
.point i { color: var(--gold-deep); margin-right: .35rem; }
.timeline { position: relative; margin-top: 1.6rem; display: grid; gap: 0; }
.timeline::before {
 content: "";
 position: absolute;
 left: 21px; top: 8px; bottom: 8px;
 width: 1px;
 background: linear-gradient(var(--gold), transparent);
}
.step {
 display: grid;
 grid-template-columns: 44px 1fr;
 gap: 1rem;
 padding: .35rem 0 1.15rem;
}
.step-dot {
 width: 44px; height: 44px;
 display: grid; place-items: center;
 border-radius: 50%;
 background: var(--ink);
 color: var(--gold-2);
 font-weight: 700;
 position: relative;
 z-index: 1;
 border: 1px solid var(--gold-2);
}
.step h3 { margin: 0; font-size: 1.7rem; }
.step p { margin: .2rem 0 0; color: var(--muted); max-width: 68ch; }
.block-ink, .contact {
 position: relative;
 color: #f7f1e6;
 background: #14120f center/cover no-repeat;
}
.block-ink { background-image: linear-gradient(180deg, rgba(12,10,8,.9), rgba(12,10,8,.82)), url("/assets/images/36f58ccd76556ea6.webp"); }
.contact { background-image: linear-gradient(180deg, rgba(12,10,8,.92), rgba(12,10,8,.86)), url("/assets/images/200f67826aec0d68.webp"); }
.stat-row { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.stat {
 padding: 1.1rem 1rem 1rem;
 border-radius: 20px;
 border: 1px solid rgba(231,211,161,.28);
 background: rgba(255,255,255,.04);
}
.stat b {
 display: block;
 font-family: var(--display);
 font-size: clamp(2.4rem, 4vw, 3.6rem);
 line-height: .95;
 color: var(--gold-2);
}
.stat span { display: block; margin-top: .45rem; color: rgba(247,241,230,.76); }
.voice-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 1rem; }
.quote { padding: 1.3rem 1.25rem; }
.quote.featured {
 background:
  linear-gradient(180deg, rgba(20,16,12,.2), rgba(20,16,12,.55)),
  url("/assets/images/7c0590f49d228040.webp") center/cover;
 color: #f7f1e6;
 min-height: 100%;
}
.quote.featured p, .quote .who { color: rgba(247,241,230,.86); }
.quote p { font-size: 1.16rem; margin: 0 0 .9rem; }
.quote .who { color: var(--muted); font-size: .92rem; }
.stack { display: grid; gap: 1rem; }
.tier {
 display: grid;
 grid-template-columns: 180px 1fr auto;
 gap: 1rem;
 align-items: center;
 padding: 1rem 0;
 border-bottom: 1px solid var(--line);
}
.tier h3 { margin: 0; font-size: 1.7rem; }
.tier p { margin: .15rem 0 0; color: var(--muted); }
.meter { height: 8px; border-radius: 999px; background: #efe4d2; overflow: hidden; margin-top: .55rem; }
.meter span {
 display: block;
 height: 100%;
 width: 0;
 border-radius: inherit;
 background: linear-gradient(90deg, var(--gold-deep), var(--gold-2));
 animation: fill 1.2s ease forwards;
}
.tier-note { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold-deep); }
.news-list { display: grid; gap: .9rem; margin-top: 1.2rem; }
.news-item {
 display: grid;
 grid-template-columns: 168px 1fr;
 gap: 1rem;
 overflow: hidden;
 padding: 0;
 transition: transform .2s ease, box-shadow .2s ease;
}
.news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.news-photo { min-height: 132px; }
.news-copy { padding: .95rem 1rem .95rem 0; }
.news-copy time { color: var(--gold-deep); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.news-copy h3 { margin: .2rem 0 .3rem; font-size: 1.55rem; }
.news-copy p { margin: 0; color: var(--muted); }
.close-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.4rem; align-items: start; }
.field { display: flex; flex-direction: column; gap: .32rem; margin-bottom: .8rem; }
.field span { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); }
.field input, .field select, .field textarea {
 width: 100%;
 background: rgba(255,252,247,.96);
 color: var(--text);
 border: 1px solid transparent;
 border-radius: 14px;
 padding: .82rem .9rem;
}
.field textarea { min-height: 110px; resize: vertical; }
.note {
 display: none;
 padding: 1rem 1.05rem;
 border-radius: 18px;
 border: 1px solid rgba(231,211,161,.4);
 background: rgba(255,255,255,.06);
}
.note.is-on { display: block; }
@keyframes fill { to { width: var(--p); } }
@keyframes seal {
 0%, 100% { transform: rotate(8deg) scale(1); }
 50% { transform: rotate(8deg) scale(1.04); }
}
@media (max-width: 1024px) {
 .gate-grid, .solve-grid, .voice-layout, .close-grid, .stat-row { grid-template-columns: 1fr; }
 .stat-row { grid-template-columns: 1fr 1fr; }
 .gate-visual img { height: 380px; }
 .ticket { left: 1rem; }
 .pain-row { grid-template-columns: 64px 1fr; }
 .pain-row p { grid-column: 2; }
}
@media (max-width: 768px) {
 .sheet { padding: 3.2rem 0; }
 .brand-kicker { display: none; }
 .header-cta { padding: .72rem .9rem; font-size: .82rem; }
 .gate { padding: 2.4rem 0 2rem; }
 .gate h1 { max-width: none; }
 .tier { grid-template-columns: 1fr; gap: .35rem; }
 .news-item { grid-template-columns: 120px 1fr; }
 .stat-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 1.2rem)); }
 .header-top { align-items: flex-start; }
 .brand-name { white-space: normal; font-size: .92rem; line-height: 1.25; }
 .header-cta span { display: none; }
 .burst { width: 86px; height: 86px; font-size: .68rem; }
 .gate-visual { min-height: 0; }
 .gate-visual img { height: 280px; }
 .ticket { position: static; width: auto; margin-top: .8rem; }
 .pain-row { grid-template-columns: 1fr; gap: .25rem; }
 .news-item { grid-template-columns: 1fr; }
 .news-photo { height: 180px; }
 .news-copy { padding: .9rem 1rem 1rem; }
 .hero-actions .btn, .close-grid .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .burst, .meter span { animation: none; }
 .meter span { width: var(--p); }
 .btn, .chip, .news-item { transition: none; }
}

/* roulang page: category3 */
:root {
 --ink: #14120f;
 --ink-soft: #241f18;
 --gold: #b9924a;
 --gold-2: #e7d3a1;
 --gold-deep: #8c6a2f;
 --cream: #f6f2ea;
 --paper: #fffcf7;
 --sand: #efe4d2;
 --text: #1d1914;
 --muted: #6d6458;
 --line: rgba(185, 146, 74, .38);
 --shadow: 0 22px 50px rgba(20, 18, 15, .12);
 --radius: 22px;
 --display: "Cormorant Garamond", Georgia, serif;
 --sans: "Be Vietnam Pro", sans-serif;
 --bs-body-font-family: "Be Vietnam Pro", sans-serif;
 --bs-body-color: #1d1914;
 --bs-body-bg: #f6f2ea;
 --bs-primary: #b9924a;
 --bs-link-color: #8c6a2f;
 --bs-link-hover-color: #14120f;
 --bs-border-radius: 18px;
 --bs-border-color: rgba(185, 146, 74, .35);
}
/* roulang page: category3 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--text);
 background: var(--cream);
 line-height: 1.75;
 font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
.container { width: min(1140px, calc(100% - 2rem)); margin-inline: auto; }
.block-ink h2, .coverage-open h1, .desk-close h2 { color: #f7f1e6; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 68ch; }
.block-ink .lead, .coverage-open .lead, .desk-close .lead { color: rgba(247, 241, 230, .78); }
section { scroll-margin-top: 8.2rem; padding: 4.6rem 0; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 border-radius: 999px;
 padding: .88rem 1.3rem;
 font-weight: 600;
 border: 0;
 line-height: 1.2;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn-gold {
 background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
 color: #1a140c !important;
 box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
 background: transparent;
 color: #f6f1e7 !important;
 border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
 background: var(--ink);
 color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-line {
 background: transparent;
 color: var(--ink) !important;
 border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }
.btn:focus-visible, .chip:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
 outline: 2px solid var(--gold-2);
 outline-offset: 3px;
}
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(16, 14, 12, .94);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(231, 211, 161, .18);
 box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
 width: 42px; height: 42px; flex: 0 0 42px;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold-2);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.site-footer .brand-name { font-family: var(--display); font-size: 1.55rem; font-weight: 600; white-space: normal; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
 display: flex;
 gap: .55rem;
 overflow-x: auto;
 padding: .7rem 0 .85rem;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
}
.chip {
 flex: 0 0 auto;
 color: #f3ead7;
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 999px;
 padding: .48rem .95rem;
 font-size: .9rem;
 background: transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.kicker {
 display: inline-block;
 letter-spacing: .16em;
 text-transform: uppercase;
 font-size: .74rem;
 font-weight: 700;
 color: var(--gold-2);
 margin-bottom: .7rem;
}
.kicker.on-light { color: var(--gold-deep); }
.display-title, .section-title {
 font-family: var(--display);
 font-weight: 600;
 letter-spacing: -.02em;
 line-height: 1.05;
}
.display-title { font-size: clamp(2.6rem, 5.4vw, 4.8rem); max-width: 14ch; margin: 0 0 1rem; }
.section-title { font-size: clamp(2rem, 4vw, 3.3rem); margin: 0 0 .8rem; }
.coverage-open {
 position: relative;
 isolation: isolate;
 color: #f7f1e6;
 padding: 4.4rem 0 3.4rem;
 background:
  linear-gradient(100deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.72) 48%, rgba(10,8,6,.42) 100%),
  url("/assets/images/77fffdd18d18e7ea.webp") center/cover no-repeat;
 overflow: hidden;
}
.coverage-open::after {
 content: "";
 position: absolute;
 width: 38vw; height: 38vw;
 left: -10vw; bottom: -16vw;
 background: radial-gradient(circle, rgba(185,146,74,.28), transparent 68%);
 z-index: -1;
}
.coverage-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem; align-items: end; }
.coverage-lead { max-width: 58ch; color: rgba(247,241,230,.86); font-size: 1.05rem; }
.region-live {
 background: rgba(20,16,12,.62);
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 28px;
 padding: 1.1rem;
 backdrop-filter: blur(10px);
 box-shadow: var(--shadow);
}
.live-row {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: .75rem;
 align-items: center;
 padding: .85rem .7rem;
 border-bottom: 1px solid rgba(231,211,161,.16);
}
.live-row:last-child { border-bottom: 0; }
.live-dot {
 width: 34px; height: 34px;
 display: grid; place-items: center;
 border-radius: 50%;
 background: rgba(231,211,161,.14);
 color: var(--gold-2);
}
.live-row strong { display: block; font-size: .98rem; }
.live-row span { color: rgba(247,241,230,.7); font-size: .84rem; }
.live-meta { color: var(--gold-2); font-weight: 700; font-size: .86rem; }
.block-paper { background: var(--paper); }
.block-sand { background: linear-gradient(180deg, #f3eadc, var(--sand)); }
.block-ink { background: var(--ink); color: #f7f1e6; }
.rank-head, .bulletin-head, .desk-head {
 display: flex;
 justify-content: space-between;
 gap: 1.5rem;
 align-items: end;
 margin-bottom: 1.6rem;
}
.rank-list { display: grid; gap: .85rem; }
.rank-line {
 display: grid;
 grid-template-columns: 210px 1fr 64px;
 gap: 1rem;
 align-items: center;
 padding: .95rem 1rem;
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255,252,247,.78);
 transition: transform .2s ease, box-shadow .2s ease;
}
.rank-line:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.rank-label { font-weight: 600; }
.rank-label small { display: block; color: var(--muted); font-weight: 500; }
.rank-track { height: 8px; border-radius: 999px; background: rgba(20,18,15,.08); overflow: hidden; }
.rank-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }
.rank-num { font-family: var(--display); font-size: 1.6rem; text-align: right; color: var(--gold-deep); }
.shift-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 2.5rem; align-items: start; }
.shift-list { margin: 0; padding: 0; list-style: none; }
.shift-item {
 display: grid;
 grid-template-columns: 108px 1fr;
 gap: 1rem;
 padding: 1.05rem 0;
 border-bottom: 1px solid rgba(231,211,161,.2);
}
.shift-time { font-family: var(--display); font-size: 1.8rem; color: var(--gold-2); line-height: 1; }
.shift-item h3 { font-size: 1.25rem; margin: 0 0 .25rem; color: #f7f1e6; }
.shift-item p { margin: 0; color: rgba(247,241,230,.74); }
.twin-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.6rem; align-items: stretch; }
.photo-frame, .news-photo {
 border-radius: 24px;
 overflow: hidden;
 border: 1px solid var(--line);
 min-height: 100%;
 background: #ddd4c4;
}
.photo-frame img, .news-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.photo-frame { box-shadow: var(--shadow); }
.twin-copy { padding: .4rem .2rem .4rem .4rem; }
.point, .seal, .news-item, .who-note {
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255,252,247,.72);
}
.point { padding: 1rem 1.05rem; margin-top: .75rem; transition: border-color .2s ease, transform .2s ease; }
.point:hover { border-color: var(--gold); transform: translateX(4px); }
.point h3 { font-family: var(--display); font-size: 1.55rem; margin: 0 0 .3rem; }
.point p, .seal p, .news-body p, .who-note p { margin: 0; color: var(--muted); }
.seal-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr; grid-template-rows: auto auto; gap: .9rem; }
.seal { padding: 1.2rem 1.15rem; min-height: 180px; }
.seal-lg { grid-row: span 2; min-height: 380px; background:
 linear-gradient(180deg, rgba(20,16,12,.15), rgba(20,16,12,.72)),
 url("/assets/images/0347554211a7f87e.webp") center/cover no-repeat;
 color: #f7f1e6;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}
.seal-lg p { color: rgba(247,241,230,.82); }
.seal-mark {
 width: 46px; height: 46px; margin-bottom: .8rem;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold);
 color: var(--gold-deep);
 font-family: var(--display);
 font-size: 1.3rem;
 background: #fffaf2;
}
.seal-lg .seal-mark { color: var(--gold-2); border-color: var(--gold-2); background: rgba(20,16,12,.45); }
.seal h3 { font-family: var(--display); font-size: 1.7rem; margin: 0 0 .35rem; }
.metric-strip { padding-top: 0; padding-bottom: 0; margin-top: -1.2rem; position: relative; z-index: 2; }
.metric-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 background: var(--ink-soft);
 color: #f7f1e6;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.metric { padding: 1.5rem 1.2rem; border-right: 1px solid rgba(231,211,161,.16); }
.metric:last-child { border-right: 0; }
.metric-num { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.3rem); color: var(--gold-2); line-height: 1; }
.metric-label { margin: .35rem 0 0; color: rgba(247,241,230,.74); }
.news-list { display: grid; gap: .9rem; }
.news-item {
 display: grid;
 grid-template-columns: 220px 1fr;
 gap: 1rem;
 padding: .7rem;
 align-items: center;
 transition: transform .2s ease, box-shadow .2s ease;
}
.news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.news-photo { min-height: 140px; border-radius: 16px; }
.news-photo img { min-height: 140px; }
.news-body { padding: .4rem .5rem .4rem 0; }
.news-tag {
 display: inline-block;
 margin-bottom: .35rem;
 border-radius: 999px;
 padding: .15rem .65rem;
 background: #efe4d2;
 color: #6a501e;
 font-size: .78rem;
 font-weight: 700;
}
.news-body h3 { font-size: 1.35rem; margin: 0 0 .3rem; font-family: var(--display); }
.who-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.2rem; }
.who-note { padding: 1.1rem 1.15rem; }
.who-note h3 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 .3rem; }
.desk-close {
 background:
  linear-gradient(180deg, rgba(12,10,8,.92), rgba(12,10,8,.88)),
  url("/assets/images/3a8285495615b9a2.jpg") center/cover no-repeat;
 color: #f7f1e6;
}
.desk-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.6rem; align-items: start; }
.desk-form {
 background: var(--paper);
 color: var(--text);
 border-radius: 28px;
 padding: 1.3rem;
 box-shadow: var(--shadow);
}
.field { margin-bottom: .85rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }
.field input, .field select, .field textarea {
 width: 100%;
 border: 1px solid var(--line);
 background: #fff;
 color: var(--text);
 border-radius: 14px;
 padding: .78rem .9rem;
 transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold); }
.field textarea { min-height: 110px; resize: vertical; }
.form-note { color: var(--muted); font-size: .88rem; margin: .75rem 0 0; }
.site-footer {
 background: #100e0c;
 color: #f3eadc;
 padding: 3.2rem 0 1.4rem;
}
.site-footer h2 { font-family: var(--display); font-size: 1.7rem; color: var(--gold-2); margin-bottom: .6rem; }
.site-footer p { color: rgba(243,234,220,.78); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links a { display: inline-block; padding: .2rem 0; color: #f3eadc; border-bottom: 1px solid transparent; }
.foot-links a:hover { color: var(--gold-2); border-color: var(--gold-2); }
.legal { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid rgba(231,211,161,.18); color: rgba(243,234,220,.62); font-size: .92rem; }
@media (max-width: 1024px) {
 .coverage-grid, .shift-layout, .twin-grid, .desk-grid { grid-template-columns: 1fr; }
 .seal-grid { grid-template-columns: 1fr 1fr; }
 .seal-lg { grid-row: auto; min-height: 280px; }
 .rank-line { grid-template-columns: 1fr auto; }
 .rank-track { grid-column: 1 / -1; }
 .metric-row { grid-template-columns: 1fr 1fr; }
 .metric:nth-child(odd) { border-right: 1px solid rgba(231,211,161,.16); }
 .metric:nth-child(2) { border-right: 0; }
}
@media (max-width: 768px) {
 section { padding: 3.3rem 0; }
 .header-top { align-items: flex-start; }
 .brand-name { white-space: normal; line-height: 1.25; }
 .header-cta { padding: .7rem .85rem; font-size: .84rem; }
 .rank-head, .bulletin-head, .desk-head, .who-row { display: grid; grid-template-columns: 1fr; }
 .news-item { grid-template-columns: 1fr; }
 .news-photo img { min-height: 190px; }
 .display-title { max-width: none; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 1.2rem)); }
 .seal-grid, .metric-row { grid-template-columns: 1fr; }
 .metric { border-right: 0; border-bottom: 1px solid rgba(231,211,161,.16); }
 .shift-item, .live-row { grid-template-columns: 1fr; }
 .live-meta { justify-self: start; }
 .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
 .chip { font-size: .84rem; }
}

/* roulang page: category4 */
:root {
 --ink: #14120f;
 --ink-soft: #241f18;
 --gold: #b9924a;
 --gold-2: #e7d3a1;
 --gold-deep: #8c6a2f;
 --cream: #f6f2ea;
 --paper: #fffcf7;
 --sand: #efe4d2;
 --text: #1d1914;
 --muted: #6d6458;
 --line: rgba(185, 146, 74, .38);
 --shadow: 0 22px 50px rgba(20, 18, 15, .12);
 --radius: 22px;
 --display: "Cormorant Garamond", Georgia, serif;
 --sans: "Be Vietnam Pro", sans-serif;
 --bs-body-font-family: "Be Vietnam Pro", sans-serif;
 --bs-body-color: #1d1914;
 --bs-body-bg: #f6f2ea;
 --bs-primary: #b9924a;
 --bs-link-color: #8c6a2f;
 --bs-link-hover-color: #14120f;
 --bs-border-radius: 18px;
 --bs-border-color: rgba(185, 146, 74, .35);
}
/* roulang page: category4 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--text);
 background: var(--cream);
 line-height: 1.75;
 font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: #e7d3a1; color: #1a140c; }
.container {
 width: min(1140px, calc(100% - 2rem));
 max-width: 1140px;
 margin-inline: auto;
 padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
 padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); margin: .35rem 0 1rem; color: var(--ink); }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin: 0 0 .8rem; color: var(--ink); }
h3 { margin: 0 0 .35rem; color: inherit; }
p { margin: 0 0 .85rem; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 68ch; }
.block-ink h2, .hero h1, .band h2, .global h2, .contact h2, .on-ink h2 { color: #f7f1e6; }
.block-ink .lead, .global .lead, .contact .lead, .band .lead, .on-ink .lead { color: rgba(247, 241, 230, .78); }
section { scroll-margin-top: 8.2rem; }
.section { padding: 4.6rem 0; }
.eyebrow {
 display: inline-block;
 margin-bottom: .7rem;
 color: var(--gold-deep);
 letter-spacing: .16em;
 text-transform: uppercase;
 font-size: .74rem;
 font-weight: 700;
}
.on-ink .eyebrow { color: var(--gold-2); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 border-radius: 999px;
 padding: .88rem 1.3rem;
 font-weight: 600;
 border: 0;
 line-height: 1.2;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn:focus-visible, .chip:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.btn-gold {
 background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
 color: #1a140c !important;
 box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
 background: transparent;
 color: #f6f1e7 !important;
 border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
 background: var(--ink);
 color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-ink:active { transform: translateY(1px); }
.btn-line {
 background: transparent;
 color: var(--ink) !important;
 border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(16, 14, 12, .94);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(231, 211, 161, .18);
 box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
 width: 42px; height: 42px; flex: 0 0 42px;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold-2);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.header-cta { white-space: nowrap; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
 display: flex;
 gap: .55rem;
 overflow-x: auto;
 padding: .7rem 0 .85rem;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
}
.chip {
 flex: 0 0 auto;
 color: #f3ead7;
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 999px;
 padding: .48rem .95rem;
 font-size: .9rem;
 background: transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero {
 position: relative;
 isolation: isolate;
 color: #f7f1e6;
 padding: 4.2rem 0 2.2rem;
 background:
 linear-gradient(180deg, rgba(10,8,6,.82), rgba(10,8,6,.55) 42%, rgba(10,8,6,.9)),
 url("/assets/images/63d7ab2777eb680e.webp") center/cover no-repeat;
 overflow: hidden;
}
.hero-title { font-size: clamp(2.7rem, 6vw, 5.5rem); max-width: 16ch; margin: .4rem 0 1.1rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.2rem; }
.level-badge {
 border: 1px solid rgba(185,146,74,.45);
 border-radius: 999px;
 padding: .4rem .8rem;
 font-size: .84rem;
 color: var(--gold-deep);
 background: rgba(255,252,247,.7);
}
.on-ink .level-badge, .brief-shade .level-badge {
 color: var(--gold-2);
 background: rgba(20,16,12,.35);
 border-color: rgba(231,211,161,.4);
}
.level-badge.is-live { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero-actions, .action-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.remain {
 display: inline-flex;
 margin-bottom: .7rem;
 border-radius: 999px;
 padding: .2rem .65rem;
 background: #efe4d2;
 color: #6a501e;
 font-size: .82rem;
 font-weight: 700;
}
.remain.is-low { background: #3a241c; color: #f3d7b0; }
.slot-meta { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.pain-item, .point, .who-item, .matrix a, .delta-box, .quote, .news-item, .region {
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255,252,247,.72);
}
.block-ink .pain-item, .block-ink .region { background: rgba(255,255,255,.04); color: #f7f1e6; }
.pain-item, .point, .who-item { padding: 1rem 1.05rem; margin-bottom: .75rem; }
.pain-item h3, .point h3, .who-item h3, .region h3 { font-size: 1.45rem; margin: 0 0 .35rem; }
.photo-frame img, .case-photo img, .news-photo img { width: 100%; height: 100%; object-fit: cover; }
.bento-item {
 position: relative;
 min-height: 230px;
 border-radius: 24px;
 overflow: hidden;
 border: 1px solid var(--line);
 background: var(--paper);
 box-shadow: var(--shadow);
}
.dossier { padding-top: 2.6rem; }
.dossier-grid, .split-2, .rhythm-layout, .voice-grid, .contact-grid {
 display: grid;
 gap: 1.5rem;
 align-items: stretch;
}
.dossier-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
.crumb { color: var(--muted); font-size: .88rem; margin-bottom: .8rem; }
.crumb span { color: var(--gold-deep); }
.brief-card {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 28px;
 box-shadow: var(--shadow);
 overflow: hidden;
}
.brief-visual { position: relative; min-height: 280px; }
.brief-visual img { width: 100%; height: 320px; object-fit: cover; }
.brief-shade {
 position: absolute;
 inset: auto 0 0 0;
 padding: 1.2rem 1.2rem 1rem;
 background: linear-gradient(180deg, rgba(12,10,8,0), rgba(12,10,8,.92) 42%);
 color: #f7f1e6;
}
.brief-shade strong { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 600; margin-bottom: .45rem; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li {
 display: flex;
 gap: .7rem;
 align-items: baseline;
 font-size: .92rem;
 padding: .18rem 0;
 color: rgba(247,241,230,.88);
}
.toc span { color: var(--gold-2); font-variant-numeric: tabular-nums; min-width: 1.6rem; }
.brief-form, .desk-form { padding: 1.15rem 1.2rem 1.25rem; }
.form-title { font-family: var(--display); font-size: 1.7rem; margin-bottom: .15rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field { display: flex; flex-direction: column; gap: .28rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: #4d453b; }
.control {
 width: 100%;
 border: 1px solid rgba(185,146,74,.45);
 background: #fff;
 color: var(--ink);
 border-radius: 14px;
 padding: .72rem .85rem;
 transition: border-color .2s ease, box-shadow .2s ease;
}
.control:hover { border-color: var(--gold-deep); }
.control:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(185,146,74,.16); outline: none; }
.form-note {
 margin-top: .8rem;
 padding: .75rem .9rem;
 border-radius: 14px;
 background: var(--sand);
 color: #3e3118;
 font-size: .92rem;
}
.form-note[hidden] { display: none !important; }
.shift {
 position: relative;
 color: #f7f1e6;
 background:
 linear-gradient(105deg, rgba(12,10,8,.92), rgba(12,10,8,.78)),
 url("/assets/images/36f58ccd76556ea6.webp") center/cover no-repeat;
}
.shift-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.6rem; align-items: start; }
.pull {
 font-family: var(--display);
 font-size: clamp(1.8rem, 3vw, 2.6rem);
 line-height: 1.15;
 color: #f7f1e6;
 margin: 1rem 0 0;
}
.rhythms { background: var(--paper); }
.rhythm-layout { grid-template-columns: 1.35fr .8fr; }
.rhythm-main {
 position: relative;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 color: #f7f1e6;
}
.rhythm-main img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.rhythm-copy {
 position: relative;
 z-index: 1;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 1.4rem;
 background: linear-gradient(180deg, rgba(10,8,6,.05), rgba(10,8,6,.88));
 min-height: 460px;
}
.rhythm-side { display: grid; gap: .9rem; }
.side-card {
 background: var(--cream);
 border: 1px solid var(--line);
 border-radius: 22px;
 padding: 1.15rem 1.15rem 1.05rem;
 transition: transform .2s ease, box-shadow .2s ease;
}
.side-card:hover, .who-item:hover, .news-item:hover, .quote:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow);
}
.meter { height: 7px; border-radius: 99px; background: rgba(20,18,15,.08); overflow: hidden; margin: .8rem 0 .35rem; }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }
.meter-note { font-size: .82rem; color: var(--muted); }
.marks { background: linear-gradient(180deg, var(--sand), var(--cream)); }
.trace { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .85rem; }
.trace li {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 1rem;
 align-items: start;
 background: rgba(255,252,247,.8);
 border: 1px solid var(--line);
 border-radius: 20px;
 padding: 1rem 1.1rem;
}
.trace b {
 font-family: var(--display);
 font-size: 1.8rem;
 color: var(--gold-deep);
 line-height: 1;
 min-width: 2.4rem;
}
.trace-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.region-desk { background: var(--cream); }
.split-2 { grid-template-columns: .92fr 1.08fr; align-items: center; }
.photo-frame {
 border-radius: 28px;
 overflow: hidden;
 min-height: 420px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.photo-frame img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.voices {
 background:
 radial-gradient(circle at 12% 10%, rgba(185,146,74,.2), transparent 28%),
 var(--ink);
 color: #f7f1e6;
}
.voice-grid { grid-template-columns: 1fr 1fr; }
.quote { padding: 1.3rem 1.25rem 1.15rem; background: rgba(255,255,255,.04); color: #f7f1e6; }
.quote p { font-family: var(--display); font-size: 1.65rem; line-height: 1.25; color: #f7f1e6; }
.quote cite { display: block; margin-top: .8rem; font-style: normal; color: var(--gold-2); font-size: .92rem; }
.bulletin { background: var(--paper); }
.news-list { display: grid; gap: .85rem; margin-top: 1.2rem; }
.news-item {
 display: grid;
 grid-template-columns: 168px 1fr;
 gap: 1rem;
 padding: .7rem;
 align-items: center;
 background: var(--cream);
 transition: transform .2s ease, box-shadow .2s ease;
}
.news-photo { border-radius: 14px; overflow: hidden; height: 112px; }
.news-kicker { color: var(--gold-deep); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.metrics { background: var(--cream); padding-top: 1rem; }
.metric-strip {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border: 1px solid var(--line);
 border-radius: 24px;
 background: var(--paper);
 overflow: hidden;
}
.metric {
 padding: 1.3rem 1.1rem 1.15rem;
 border-right: 1px solid var(--line);
}
.metric:last-child { border-right: 0; }
.metric strong {
 display: block;
 font-family: var(--display);
 font-size: clamp(2rem, 4vw, 3rem);
 line-height: 1;
 color: var(--gold-deep);
 margin-bottom: .35rem;
}
.metric span { color: var(--muted); font-size: .92rem; }
.contact {
 color: #f7f1e6;
 background:
 linear-gradient(110deg, rgba(12,10,8,.94), rgba(12,10,8,.82)),
 url("/assets/images/200f67826aec0d68.webp") center/cover no-repeat;
}
.contact-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.contact-panel {
 background: rgba(255,252,247,.96);
 color: var(--ink);
 border-radius: 26px;
 padding: 1.2rem;
 border: 1px solid rgba(231,211,161,.4);
}
.contact-panel .form-title, .contact-panel label { color: var(--ink); }
.desk-line { color: rgba(247,241,230,.82); margin-top: 1rem; }
.desk-line a { color: var(--gold-2); border-bottom: 1px solid rgba(231,211,161,.4); }
.desk-line a:hover { color: #fff; }
.site-footer {
 background: #100e0c;
 color: #f7f1e6;
 padding: 3.2rem 0 1.4rem;
}
.site-footer h2 { color: #f7f1e6; font-size: 1.5rem; }
.site-footer p { color: rgba(247,241,230,.78); }
.site-footer .brand-name { color: #f7f1e6; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links li { margin: .35rem 0; }
.foot-links a { color: rgba(247,241,230,.82); transition: color .2s ease; }
.foot-links a:hover { color: var(--gold-2); }
.legal {
 margin-top: 2rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(231,211,161,.18);
 color: rgba(247,241,230,.62);
 font-size: .9rem;
}
@media (max-width: 1024px) {
 .dossier-grid, .shift-grid, .rhythm-layout, .split-2, .contact-grid { grid-template-columns: 1fr; }
 .rhythm-main, .rhythm-copy, .photo-frame, .photo-frame img { min-height: 340px; }
 .metric-strip { grid-template-columns: 1fr 1fr; }
 .metric:nth-child(odd) { border-right: 1px solid var(--line); }
 .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--line); }
 .metric:nth-child(2) { border-right: 0; }
}
@media (max-width: 768px) {
 .section { padding: 3.15rem 0; }
 .header-top { align-items: flex-start; }
 .brand-name { white-space: normal; line-height: 1.25; }
 .voice-grid, .form-grid, .news-item { grid-template-columns: 1fr; }
 .news-photo { height: 180px; }
 .trace li { grid-template-columns: 1fr; gap: .3rem; }
 h1 { font-size: 2.45rem; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 1.2rem)); }
 .header-cta { padding: .72rem .85rem; font-size: .82rem; }
 .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
 .metric-strip { grid-template-columns: 1fr; }
 .metric, .metric:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
 .metric:last-child { border-bottom: 0; }
 .brief-visual img, .rhythm-copy { min-height: 280px; }
 .action-row .btn, .brief-form .btn, .contact-panel .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
}

/* roulang page: category5 */
:root {
 --ink: #14120f;
 --ink-soft: #241f18;
 --gold: #b9924a;
 --gold-2: #e7d3a1;
 --gold-deep: #8c6a2f;
 --cream: #f6f2ea;
 --paper: #fffcf7;
 --sand: #efe4d2;
 --text: #1d1914;
 --muted: #6d6458;
 --line: rgba(185, 146, 74, .38);
 --shadow: 0 22px 50px rgba(20, 18, 15, .12);
 --radius: 22px;
 --display: "Cormorant Garamond", Georgia, serif;
 --sans: "Be Vietnam Pro", sans-serif;
 --bs-body-font-family: "Be Vietnam Pro", sans-serif;
 --bs-body-color: #1d1914;
 --bs-body-bg: #f6f2ea;
 --bs-primary: #b9924a;
 --bs-link-color: #8c6a2f;
 --bs-link-hover-color: #14120f;
 --bs-border-radius: 18px;
 --bs-border-color: rgba(185, 146, 74, .35);
}
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--text);
 background: var(--cream);
 line-height: 1.75;
 font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(1140px, calc(100% - 2rem)); margin-inline: auto; }
h1, h2, h3, .display-name { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
.block-ink h2, .hero h1, .band h2, .global h2, .contact h2 { color: #f7f1e6; }
.lead { font-size: 1.02rem; color: var(--muted); max-width: 68ch; }
.block-ink .lead, .global .lead, .contact .lead, .band .lead { color: rgba(247, 241, 230, .78); }
section { scroll-margin-top: 8.2rem; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 border-radius: 999px;
 padding: .88rem 1.3rem;
 font-weight: 600;
 border: 0;
 line-height: 1.2;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn:focus-visible, .chip:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
 outline: 2px solid var(--gold-2);
 outline-offset: 3px;
}
.btn-gold {
 background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
 color: #1a140c !important;
 box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
 background: transparent;
 color: #f6f1e7 !important;
 border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
 background: var(--ink);
 color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-line {
 background: transparent;
 color: var(--ink) !important;
 border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(16, 14, 12, .94);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(231, 211, 161, .18);
 box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
 width: 42px; height: 42px; flex: 0 0 42px;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold-2);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
 display: flex;
 gap: .55rem;
 overflow-x: auto;
 padding: .7rem 0 .85rem;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
}
.chip {
 flex: 0 0 auto;
 color: #f3ead7;
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 999px;
 padding: .48rem .95rem;
 font-size: .9rem;
 background: transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero {
 position: relative;
 isolation: isolate;
 color: #f7f1e6;
 padding: 4.2rem 0 2.2rem;
 background:
 linear-gradient(180deg, rgba(10,8,6,.82), rgba(10,8,6,.55) 42%, rgba(10,8,6,.9)),
 url("/assets/images/63d7ab2777eb680e.webp") center/cover no-repeat;
 overflow: hidden;
}
.hero::after {
 content: "";
 position: absolute;
 width: 46vw; height: 46vw;
 right: -12vw; top: -16vw;
 background: radial-gradient(circle, rgba(185,146,74,.32), transparent 68%);
 z-index: -1;
}
.hero-title { font-size: clamp(2.7rem, 6vw, 5.5rem); max-width: 16ch; margin: .4rem 0 1.1rem; }
.hero-lead { max-width: 62ch; color: rgba(247,241,230,.86); font-size: 1.02rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.2rem; }
.level-badge {
 border: 1px solid rgba(231,211,161,.4);
 border-radius: 999px;
 padding: .4rem .8rem;
 font-size: .84rem;
 color: var(--gold-2);
 background: rgba(20,16,12,.35);
}
.level-badge.is-live { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.pain-item, .point, .who-item, .matrix a, .delta-box, .quote, .news-item, .region {
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255,252,247,.72);
}
.block-ink .pain-item, .block-ink .region { background: rgba(255,255,255,.04); color: #f7f1e6; }
.pain-item, .point, .who-item { padding: 1rem 1.05rem; margin-bottom: .75rem; }
.pain-item h3, .point h3, .who-item h3, .region h3 { font-size: 1.45rem; margin: 0 0 .35rem; }
.photo-frame img, .case-photo img, .news-photo img { width: 100%; height: 100%; object-fit: cover; }
.site-footer {
 background: #100e0c;
 color: #f3eadc;
 padding: 3.2rem 0 1.4rem;
 margin-top: 0;
}
.site-footer .brand-name, .site-footer h2 { color: #f7f1e6; }
.site-footer h2 { font-size: 1.7rem; margin-bottom: .6rem; }
.site-footer p { color: rgba(243,234,220,.74); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links a { color: var(--gold-2); display: inline-block; padding: .2rem 0; border-bottom: 1px solid transparent; }
.foot-links a:hover { border-bottom-color: var(--gold-2); }
.legal { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(231,211,161,.18); color: rgba(243,234,220,.62); font-size: .92rem; }
.kicker {
 display: inline-block;
 color: var(--gold-deep);
 letter-spacing: .16em;
 text-transform: uppercase;
 font-size: .74rem;
 font-weight: 700;
 margin-bottom: .55rem;
}
.loc-mast { padding: 4.2rem 0 2.4rem; background: radial-gradient(circle at 90% 0%, rgba(185,146,74,.18), transparent 32%), var(--cream); }
.mast-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: end; }
.loc-mast h1 { font-size: clamp(3rem, 6vw, 5.4rem); margin: .2rem 0 1rem; max-width: 11ch; color: var(--ink); }
.mast-copy { font-size: 1.05rem; color: var(--muted); max-width: 46ch; }
.gold-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.gold-pills li {
 border: 1px solid var(--line);
 background: var(--paper);
 color: #5d4820;
 border-radius: 999px;
 padding: .38rem .78rem;
 font-size: .86rem;
}
.mast-photo {
 position: relative;
 border-radius: 28px;
 overflow: hidden;
 min-height: 420px;
 box-shadow: var(--shadow);
 border: 1px solid rgba(185,146,74,.35);
}
.mast-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; transition: transform .6s ease; }
.mast-photo:hover img { transform: scale(1.04); }
.mast-caption {
 position: absolute;
 left: 1rem; right: 1rem; bottom: 1rem;
 background: rgba(16,14,12,.72);
 color: #f7f1e6;
 border: 1px solid rgba(231,211,161,.35);
 border-radius: 16px;
 padding: .8rem 1rem;
 backdrop-filter: blur(8px);
}
.mast-caption strong { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 600; }
.loc-friction { padding: 3.4rem 0; background: var(--paper); border-top: 1px solid rgba(185,146,74,.18); }
.friction-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 2rem; }
.friction-grid h2, .method-head h2, .voice-head h2, .fit-copy h2, .desk-copy h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin: 0 0 .8rem; }
.friction-list { display: flex; flex-direction: column; gap: .8rem; }
.friction-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 1rem;
 padding: 1.05rem 1.1rem;
 border-radius: 20px;
 background: var(--cream);
 border: 1px solid var(--line);
 transition: transform .2s ease, box-shadow .2s ease;
}
.friction-item:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.friction-item span {
 font-family: var(--display);
 font-size: 1.7rem;
 color: var(--gold-deep);
 line-height: 1;
}
.friction-item h3 { font-size: 1.45rem; margin: 0 0 .2rem; }
.friction-item p { margin: 0; color: var(--muted); }
.loc-layer {
 position: relative;
 color: #f7f1e6;
 padding: 4rem 0;
 background:
 linear-gradient(100deg, rgba(12,10,8,.92) 0%, rgba(12,10,8,.78) 48%, rgba(12,10,8,.55) 100%),
 url("/assets/images/77fffdd18d18e7ea.webp") center/cover no-repeat;
}
.layer-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; align-items: center; }
.loc-layer h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 14ch; margin: 0 0 1rem; }
.layer-points { display: grid; gap: .75rem; }
.layer-points article {
 padding: 1rem 1.05rem;
 border-radius: 18px;
 border: 1px solid rgba(231,211,161,.32);
 background: rgba(255,255,255,.05);
}
.layer-points h3 { margin: 0 0 .25rem; font-size: 1.5rem; }
.layer-points p { margin: 0; color: rgba(247,241,230,.78); }
.layer-photo { border-radius: 24px; overflow: hidden; min-height: 340px; border: 1px solid rgba(231,211,161,.35); }
.layer-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.loc-method { padding: 3.6rem 0; background: var(--sand); }
.method-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }
.method-head p { max-width: 36ch; color: var(--muted); margin: 0; }
.step-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.step-rail li {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 1rem;
 padding: 1.15rem 0;
 border-top: 1px solid rgba(140,106,47,.28);
}
.step-rail li:last-child { border-bottom: 1px solid rgba(140,106,47,.28); }
.step-no { font-family: var(--display); font-size: 2.4rem; color: var(--gold-deep); line-height: 1; }
.step-rail h3 { margin: 0 0 .25rem; font-size: 1.7rem; }
.step-rail p { margin: 0; color: var(--muted); }
.loc-result { padding: 3.5rem 0; background: var(--cream); }
.result-wrap {
 display: grid;
 grid-template-columns: 1.2fr .8fr;
 gap: 1rem;
}
.result-main, .result-side {
 border-radius: 26px;
 border: 1px solid var(--line);
 background: var(--paper);
 box-shadow: var(--shadow);
}
.result-main { padding: 1.6rem 1.5rem 1.3rem; }
.result-main h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin: 0 0 .7rem; max-width: 14ch; }
.stat-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.3rem; }
.stat-line article { padding-top: .8rem; border-top: 1px solid var(--line); }
.stat-line strong { display: block; font-family: var(--display); font-size: 2.7rem; line-height: 1; color: var(--ink); }
.stat-line span { color: var(--muted); font-size: .92rem; }
.result-side { overflow: hidden; min-height: 100%; display: flex; flex-direction: column; }
.result-side img { width: 100%; height: 230px; object-fit: cover; }
.result-side div { padding: 1.1rem 1.15rem 1.3rem; }
.result-side h3 { margin: 0 0 .35rem; font-size: 1.7rem; }
.result-side p { margin: 0; color: var(--muted); }
.loc-voices { padding: 3.6rem 0; background: #17140f; color: #f7f1e6; }
.voice-head { margin-bottom: 1.3rem; }
.voice-head p { color: rgba(247,241,230,.72); max-width: 52ch; }
.voice-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: .9rem; }
.quote {
 background: rgba(255,252,247,.04);
 color: #f7f1e6;
 padding: 1.2rem;
 min-height: 100%;
 transition: transform .2s ease, border-color .2s ease;
}
.quote:hover { transform: translateY(-3px); border-color: var(--gold-2); }
.quote i { color: var(--gold-2); }
.quote p { font-size: 1.08rem; margin: .7rem 0 .9rem; }
.quote cite { font-style: normal; color: var(--gold-2); font-size: .92rem; }
.quote.is-lead p { font-family: var(--display); font-size: 2rem; line-height: 1.2; }
.loc-fit { padding: 3.5rem 0; background: var(--paper); }
.fit-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: center; }
.fit-photo { border-radius: 26px; overflow: hidden; min-height: 360px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.fit-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.meter { margin-bottom: 1rem; }
.meter header { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; margin-bottom: .35rem; }
.track { height: 8px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); border-radius: inherit; animation: fillbar 1.2s ease forwards; }
.who-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.who-list li { padding: .55rem 0; border-top: 1px solid var(--line); color: var(--text); }
.loc-desk { padding: 3.6rem 0 4rem; background: linear-gradient(180deg, #14120f, #221c15); color: #f7f1e6; }
.desk-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 1.4rem; }
.desk-copy h2 { font-size: clamp(2.4rem, 4vw, 3.8rem); margin: 0 0 .8rem; }
.news-item { padding: 1rem; margin-bottom: .75rem; background: rgba(255,255,255,.04); color: #f7f1e6; }
.news-item h3 { margin: 0 0 .25rem; font-size: 1.4rem; }
.news-item p { margin: 0; color: rgba(247,241,230,.75); }
.news-photo { border-radius: 18px; overflow: hidden; margin-bottom: .9rem; border: 1px solid rgba(231,211,161,.28); }
.news-photo img { width: 100%; height: 180px; object-fit: cover; }
.slot-card {
 background: var(--paper);
 color: var(--text);
 border-radius: 26px;
 padding: 1.3rem;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.slot-card h2 { font-size: 2.3rem; margin: .2rem 0 .4rem; }
.slot-card p { color: var(--muted); }
.field { margin-bottom: .75rem; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .25rem; }
.field input, .field select, .field textarea {
 width: 100%;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #fff;
 padding: .75rem .85rem;
 color: var(--ink);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold); }
.form-note { min-height: 1.4rem; color: var(--gold-deep); font-weight: 600; margin: .6rem 0 0; }
@keyframes fillbar { to { width: var(--w); } }
@media (max-width: 1024px) {
 .mast-grid, .friction-grid, .layer-grid, .result-wrap, .voice-grid, .fit-grid, .desk-grid, .method-head { grid-template-columns: 1fr; }
 .voice-grid { grid-template-columns: 1fr; }
 .mast-photo, .mast-photo img, .fit-photo, .fit-photo img { min-height: 280px; }
 .method-head { align-items: start; }
}
@media (max-width: 768px) {
 .loc-mast { padding-top: 2.4rem; }
 .loc-mast h1 { max-width: none; }
 .stat-line { grid-template-columns: 1fr; }
 .brand-name { font-size: .92rem; }
 .header-cta { padding: .72rem .9rem; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 1.2rem)); }
 .header-top { align-items: flex-start; }
 .brand-name { white-space: normal; font-size: .86rem; }
 .brand-kicker { letter-spacing: .08em; }
 .step-rail li { grid-template-columns: 64px 1fr; }
 .quote.is-lead p { font-size: 1.55rem; }
 .header-cta span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 * { animation: none !important; transition: none !important; }
 .track span { width: var(--w); }
}

/* roulang page: category6 */
:root {
 --ink: #14120f;
 --ink-soft: #241f18;
 --gold: #b9924a;
 --gold-2: #e7d3a1;
 --gold-deep: #8c6a2f;
 --cream: #f6f2ea;
 --paper: #fffcf7;
 --sand: #efe4d2;
 --text: #1d1914;
 --muted: #6d6458;
 --line: rgba(185, 146, 74, .38);
 --shadow: 0 22px 50px rgba(20, 18, 15, .12);
 --radius: 22px;
 --display: "Cormorant Garamond", Georgia, serif;
 --sans: "Be Vietnam Pro", sans-serif;
 --bs-body-font-family: "Be Vietnam Pro", sans-serif;
 --bs-body-color: #1d1914;
 --bs-body-bg: #f6f2ea;
 --bs-primary: #b9924a;
 --bs-link-color: #8c6a2f;
 --bs-link-hover-color: #14120f;
 --bs-border-radius: 18px;
 --bs-border-color: rgba(185, 146, 74, .35);
}
/* roulang page: category6 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--text);
 background:
  radial-gradient(980px 420px at 8% -12%, rgba(231, 211, 161, .34), transparent 55%),
  var(--cream);
 line-height: 1.75;
 font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
p { margin: 0 0 .85rem; }
h1, h2, h3, h4 {
 font-family: var(--display);
 font-weight: 600;
 letter-spacing: -.02em;
 line-height: 1.12;
 color: var(--ink);
 margin: 0 0 .7rem;
}
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3 { font-size: 1.55rem; }
.container { width: min(1140px, calc(100% - 2rem)); max-width: 1140px; }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 68ch; }
.block-ink, .block-ink h1, .block-ink h2, .block-ink h3 { color: #f7f1e6; }
.block-ink .lead, .block-ink p { color: rgba(247, 241, 230, .8); }
section { scroll-margin-top: 8.2rem; padding: 4.6rem 0; }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: .45rem;
 color: var(--gold-deep);
 font-size: .75rem;
 font-weight: 700;
 letter-spacing: .16em;
 text-transform: uppercase;
 margin-bottom: .7rem;
}
.block-ink .kicker { color: var(--gold-2); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 border-radius: 999px;
 padding: .88rem 1.3rem;
 font-weight: 600;
 border: 0;
 line-height: 1.2;
 text-decoration: none;
 box-shadow: none;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
a.btn.btn-gold, button.btn.btn-gold {
 background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d) !important;
 color: #1a140c !important;
 border: 0 !important;
 box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
a.btn.btn-gold:hover, button.btn.btn-gold:hover, a.btn.btn-gold:focus, button.btn.btn-gold:focus {
 color: #1a140c !important;
 transform: translateY(-2px);
 filter: brightness(1.04);
}
a.btn.btn-gold:active, button.btn.btn-gold:active { transform: translateY(1px); }
a.btn.btn-ghost, button.btn.btn-ghost {
 background: transparent !important;
 color: #f6f1e7 !important;
 border: 1px solid rgba(231, 211, 161, .55) !important;
}
a.btn.btn-ghost:hover, button.btn.btn-ghost:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
a.btn.btn-ink, button.btn.btn-ink { background: var(--ink) !important; color: #f6f1e7 !important; border: 0 !important; }
a.btn.btn-ink:hover, button.btn.btn-ink:hover { background: #2c261d !important; color: #fff !important; transform: translateY(-2px); }
a.btn.btn-line, button.btn.btn-line {
 background: transparent !important;
 color: var(--ink) !important;
 border: 1px solid rgba(20,18,15,.22) !important;
}
a.btn.btn-line:hover, button.btn.btn-line:hover { border-color: var(--gold-deep) !important; color: var(--gold-deep) !important; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.site-header :focus-visible, .block-ink :focus-visible { outline-color: var(--gold-2); }
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(16, 14, 12, .94);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(231, 211, 161, .18);
 box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-text { min-width: 0; }
.brand-mark {
 width: 42px; height: 42px; flex: 0 0 42px;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold-2);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.header-cta { flex: 0 0 auto; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
 display: flex;
 gap: .55rem;
 overflow-x: auto;
 padding: .7rem 0 .85rem;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
}
.chip {
 flex: 0 0 auto;
 color: #f3ead7;
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 999px;
 padding: .48rem .95rem;
 font-size: .9rem;
 background: transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); border-color: rgba(231,211,161,.7); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.dossier-hero {
 position: relative;
 isolation: isolate;
 padding: 4.4rem 0 3.2rem;
 background:
  linear-gradient(100deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.78) 46%, rgba(10,8,6,.5) 100%),
  url("/assets/images/36f58ccd76556ea6.webp") center/cover no-repeat;
 overflow: hidden;
}
.dossier-hero::after {
 content: "";
 position: absolute;
 width: 42vw; height: 42vw;
 right: -14vw; top: -18vw;
 background: radial-gradient(circle, rgba(185,146,74,.28), transparent 68%);
 z-index: -1;
 pointer-events: none;
}
.dossier-title { font-size: clamp(2.55rem, 5.4vw, 4.7rem); max-width: 14ch; margin: .2rem 0 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .2rem; }
.level-badge {
 border: 1px solid rgba(231,211,161,.4);
 border-radius: 999px;
 padding: .38rem .78rem;
 font-size: .82rem;
 color: var(--gold-2);
 background: rgba(20,16,12,.35);
}
.level-badge.is-live { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.slip {
 background: rgba(255,252,247,.95);
 color: var(--text);
 border-radius: 26px;
 padding: 1.25rem 1.25rem 1.1rem;
 box-shadow: var(--shadow);
 border: 1px solid rgba(231,211,161,.45);
 transform: translateY(0);
 transition: transform .25s ease, box-shadow .25s ease;
}
.slip:hover { transform: translateY(-4px); box-shadow: 0 28px 54px rgba(20,18,15,.18); }
.dossier-hero .slip, .dossier-hero .slip h2, .dossier-hero .slip h3, .dossier-hero .slip p, .dossier-hero .slip span { color: var(--text); }
.slip-top { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; margin-bottom: .9rem; }
.slip-kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep) !important; font-weight: 700; }
.slip h2 { font-size: 2rem; margin: 0; }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .85rem 0 1rem; }
.meter span {
 height: 7px;
 border-radius: 99px;
 background: #e7dcc8;
 position: relative;
}
.meter span.on { background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }
.meter small { display: block; margin-top: .35rem; font-size: .72rem; color: var(--muted); font-family: var(--sans); }
.slip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.slip-field {
 border: 1px solid var(--line);
 border-radius: 16px;
 padding: .7rem .8rem;
 background: #fffdf8;
}
.slip-field b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.slip-field span { display: block; font-weight: 600; line-height: 1.35; }
.rail-sec { padding-top: 2.4rem; padding-bottom: 2.4rem; }
.rail-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; margin-bottom: 1.2rem; }
.rail-head p { max-width: 42ch; margin: 0; color: var(--muted); }
.rail-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}
.rail-item { padding: 1.25rem 1.2rem 1.15rem; border-left: 1px solid var(--line); }
.rail-item:first-child { border-left: 0; }
.rail-num { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1; color: var(--gold-deep); display: block; }
.rail-label { display: block; margin-top: .35rem; color: var(--muted); font-size: .92rem; }
.split { background: var(--paper); }
.photo-frame {
 border-radius: 28px;
 overflow: hidden;
 min-height: 460px;
 height: 100%;
 position: relative;
 box-shadow: var(--shadow);
 border: 1px solid rgba(185,146,74,.28);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.photo-cap {
 position: absolute;
 left: 1rem; right: 1rem; bottom: 1rem;
 background: rgba(16,14,12,.78);
 color: #f7f1e6;
 border-radius: 16px;
 padding: .75rem .9rem;
 backdrop-filter: blur(8px);
}
.photo-cap strong { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 600; }
.photo-cap span { color: rgba(247,241,230,.78); font-size: .9rem; }
.pain-item {
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255,252,247,.9);
 padding: 1rem 1.05rem;
 margin-bottom: .75rem;
 transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pain-item:hover { transform: translateX(4px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(20,18,15,.06); }
.pain-item h3 { font-size: 1.45rem; margin-bottom: .3rem; }
.pain-item p { margin: 0; color: var(--muted); }
.pain-index { color: var(--gold-deep); font-weight: 700; font-size: .78rem; letter-spacing: .12em; }
.timeline { background: linear-gradient(180deg, var(--sand), #f8f3ea 70%); }
.time-line {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 1rem;
 padding: 1.2rem 0 0;
 margin: 0;
 position: relative;
}
.time-line::before {
 content: "";
 position: absolute;
 left: 2%; right: 2%; top: 2.55rem;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.time-step { position: relative; padding-top: .2rem; }
.time-index {
 width: 46px; height: 46px;
 display: grid; place-items: center;
 border-radius: 50%;
 background: var(--ink);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.25rem;
 margin-bottom: .8rem;
 position: relative;
 z-index: 1;
 border: 1px solid var(--gold-2);
}
.time-step h3 { font-size: 1.4rem; }
.time-step p { color: var(--muted); margin: 0; font-size: .95rem; }
.metric-band {
 background:
  linear-gradient(180deg, rgba(14,12,10,.94), rgba(20,16,12,.9)),
  url("/assets/images/7c0590f49d228040.webp") center/cover no-repeat;
}
.metric-photo {
 border-radius: 24px;
 overflow: hidden;
 min-height: 280px;
 height: 100%;
 border: 1px solid rgba(231,211,161,.3);
}
.metric-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.metric-num { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); color: var(--gold-2); line-height: .95; display: block; }
.metric-card { padding: .4rem 0 1rem; border-bottom: 1px solid rgba(231,211,161,.22); }
.metric-card p { margin: .35rem 0 0; }
.voices { background: var(--cream); }
.quote {
 border: 1px solid var(--line);
 border-radius: 24px;
 background: rgba(255,252,247,.78);
 padding: 1.4rem 1.35rem 1.2rem;
 height: 100%;
 position: relative;
 transition: transform .2s ease, box-shadow .2s ease;
}
.quote:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.quote-mark { font-family: var(--display); font-size: 3.4rem; line-height: .7; color: var(--gold); display: block; margin-bottom: .6rem; }
.quote p { font-size: 1.12rem; color: var(--ink); }
.quote.quote-lg p { font-size: 1.45rem; font-family: var(--display); line-height: 1.35; }
.who { color: var(--gold-deep); font-weight: 700; font-size: .9rem; }
.sheet-sec { background: var(--paper); }
.sheet-row {
 display: grid;
 grid-template-columns: 168px 1fr auto;
 gap: 1rem;
 align-items: center;
 padding: 1.15rem 0;
 border-bottom: 1px solid var(--line);
}
.sheet-row:first-of-type { border-top: 1px solid var(--line); }
.rank-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 999px;
 padding: .35rem .75rem;
 background: var(--ink);
 color: var(--gold-2);
 font-size: .82rem;
 font-weight: 700;
}
.sheet-row p { margin: 0; color: var(--muted); }
.sheet-meta { color: var(--ink); font-weight: 600; white-space: nowrap; }
.bulletin { background: #f3ecdf; }
.news-item {
 display: grid;
 grid-template-columns: 168px 1fr;
 gap: 1rem;
 align-items: center;
 padding: .85rem;
 margin-bottom: .8rem;
 border-radius: 20px;
 background: rgba(255,252,247,.8);
 border: 1px solid var(--line);
 transition: transform .2s ease, box-shadow .2s ease;
}
.news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.news-photo { height: 112px; border-radius: 16px; overflow: hidden; }
.news-photo img { width: 100%; height: 100%; object-fit: cover; }
.news-date { color: var(--gold-deep); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.news-body h3 { font-size: 1.45rem; margin-bottom: .25rem; }
.news-body p { margin: 0; color: var(--muted); }
.more-line { margin-top: 1rem; }
.close-seat {
 background:
  linear-gradient(115deg, rgba(12,10,8,.94), rgba(28,22,16,.88)),
  url("/assets/images/200f67826aec0d68.webp") center/cover no-repeat;
}
.contact-form {
 background: rgba(255,252,247,.96);
 color: var(--text);
 border-radius: 26px;
 padding: 1.2rem;
 border: 1px solid rgba(231,211,161,.4);
 box-shadow: var(--shadow);
}
.dossier-hero .contact-form, .close-seat .contact-form, .close-seat .contact-form h2, .close-seat .contact-form label { color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .3rem; color: var(--ink); }
.form-control, .form-select {
 background: #fffdf8;
 border: 1px solid rgba(185,146,74,.45);
 border-radius: 14px;
 color: var(--text);
 padding: .82rem .95rem;
 width: 100%;
 box-shadow: none;
}
.form-control:focus, .form-select:focus {
 border-color: var(--gold-deep);
 box-shadow: 0 0 0 .2rem rgba(185,146,74,.18);
 background: #fff;
 color: var(--text);
}
.form-note { border-radius: 14px; padding: .8rem 1rem; margin-bottom: .9rem; font-weight: 600; }
.form-note.is-ok { background: #efe4d2; color: #3e2e12; }
.form-note.is-warn { background: #3a241c; color: #f3d7b0; }
.fine { color: var(--muted); font-size: .86rem; margin: .75rem 0 0; }
.site-footer {
 background: #100e0c;
 color: rgba(247,241,230,.78);
 padding: 3.2rem 0 1.4rem;
 border-top: 1px solid rgba(231,211,161,.18);
}
.site-footer h2 {
 font-family: var(--sans);
 font-size: .82rem;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--gold-2);
 margin-bottom: .8rem;
}
.site-footer p { color: rgba(247,241,230,.74); }
.site-footer .brand-name { white-space: normal; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links li { margin: .35rem 0; }
.foot-links a { color: #f3ead7; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.foot-links a:hover { color: var(--gold-2); border-color: var(--gold); }
.legal {
 margin-top: 1.6rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(231,211,161,.16);
 color: rgba(247,241,230,.58);
 font-size: .88rem;
}
@media (max-width: 1024px) {
 .photo-frame, .photo-frame img { min-height: 340px; }
 .sheet-row { grid-template-columns: 140px 1fr; }
 .sheet-meta { grid-column: 2; white-space: normal; }
 .time-line { grid-template-columns: repeat(3, 1fr); }
 .time-line::before { display: none; }
}
@media (max-width: 768px) {
 section { padding: 3.4rem 0; }
 .dossier-hero { padding: 3rem 0 2.4rem; }
 .rail-head, .slip-top { display: block; }
 .rail-grid { grid-template-columns: 1fr 1fr; }
 .rail-item { border-left: 0; border-top: 1px solid var(--line); }
 .rail-item:nth-child(-n+2) { border-top: 0; }
 .time-line { grid-template-columns: 1fr; }
 .sheet-row { grid-template-columns: 1fr; gap: .35rem; }
 .sheet-meta { grid-column: auto; }
 .news-item { grid-template-columns: 120px 1fr; }
 .brand-name { font-size: .92rem; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 1.2rem)); }
 .brand-kicker { display: none; }
 .brand-name { white-space: normal; font-size: .82rem; line-height: 1.25; }
 .header-top { align-items: flex-start; }
 .header-cta { padding: .7rem .85rem; font-size: .82rem; }
 .chip { font-size: .82rem; padding: .42rem .75rem; }
 .slip-grid, .form-grid, .rail-grid, .meter { grid-template-columns: 1fr 1fr; }
 .rail-item:nth-child(-n+2) { border-top: 1px solid var(--line); }
 .rail-item:first-child { border-top: 0; }
 .news-item { grid-template-columns: 1fr; }
 .news-photo { height: 180px; }
 .dossier-title { max-width: none; }
 .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
}

/* roulang page: category7 */
:root {
 --ink: #14120f;
 --ink-soft: #241f18;
 --gold: #b9924a;
 --gold-2: #e7d3a1;
 --gold-deep: #8c6a2f;
 --cream: #f6f2ea;
 --paper: #fffcf7;
 --sand: #efe4d2;
 --text: #1d1914;
 --muted: #6d6458;
 --line: rgba(185, 146, 74, .38);
 --shadow: 0 22px 50px rgba(20, 18, 15, .12);
 --radius: 22px;
 --display: "Cormorant Garamond", Georgia, serif;
 --sans: "Be Vietnam Pro", sans-serif;
 --bs-body-font-family: "Be Vietnam Pro", sans-serif;
 --bs-body-color: #1d1914;
 --bs-body-bg: #f6f2ea;
 --bs-primary: #b9924a;
 --bs-link-color: #8c6a2f;
 --bs-link-hover-color: #14120f;
 --bs-border-radius: 18px;
 --bs-border-color: rgba(185, 146, 74, .35);
}
/* roulang page: category7 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--text);
 background: var(--cream);
 line-height: 1.75;
 font-size: 1rem;
 overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
 font-family: var(--display);
 font-weight: 600;
 letter-spacing: -.02em;
 line-height: 1.08;
 color: var(--ink);
}
.container {
 width: min(1140px, calc(100% - 2rem));
 max-width: 1140px;
 margin-inline: auto;
 padding-left: .75rem;
 padding-right: .75rem;
}
.lead { font-size: 1.05rem; color: var(--muted); max-width: 68ch; }
section { scroll-margin-top: 8.2rem; }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: .45rem;
 color: var(--gold-deep);
 letter-spacing: .16em;
 text-transform: uppercase;
 font-size: .72rem;
 font-weight: 700;
}
.kicker.light { color: var(--gold-2); }
.rule {
 width: 72px;
 height: 1px;
 border: 0;
 margin: .85rem 0 1rem;
 background: linear-gradient(90deg, var(--gold), transparent);
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 border-radius: 999px;
 padding: .88rem 1.3rem;
 font-weight: 600;
 border: 0;
 line-height: 1.2;
 cursor: pointer;
 text-decoration: none;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn-gold {
 background: linear-gradient(180deg, #f0e2c4, #c6a15b 55%, #a8833d);
 color: #1a140c !important;
 box-shadow: 0 12px 26px rgba(168, 131, 61, .28);
}
.btn-gold:hover, .btn-gold:focus { color: #1a140c !important; transform: translateY(-2px); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
 background: transparent;
 color: #f6f1e7 !important;
 border: 1px solid rgba(231, 211, 161, .55);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.btn-ink {
 background: var(--ink);
 color: #f6f1e7 !important;
}
.btn-ink:hover { background: #2c261d; color: #fff !important; transform: translateY(-2px); }
.btn-line {
 background: transparent;
 color: var(--ink) !important;
 border: 1px solid rgba(20,18,15,.2);
}
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep) !important; }
.btn:focus, .btn:focus-visible, .chip:focus-visible, a:focus-visible {
 outline: 2px solid var(--gold-2);
 outline-offset: 3px;
 box-shadow: none;
}
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: rgba(16, 14, 12, .94);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(231, 211, 161, .18);
 box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .85rem 0 .35rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #f7f1e6; }
.brand-mark {
 width: 42px; height: 42px; flex: 0 0 42px;
 display: grid; place-items: center;
 border-radius: 50%;
 border: 1px solid var(--gold-2);
 color: var(--gold-2);
 font-family: var(--display);
 font-size: 1.4rem;
}
.brand-kicker { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.brand-name { display: block; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.chip-nav { border-top: 1px solid rgba(231,211,161,.1); }
.chip-row {
 display: flex;
 gap: .55rem;
 overflow-x: auto;
 padding: .7rem 0 .85rem;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
}
.chip {
 flex: 0 0 auto;
 color: #f3ead7;
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 999px;
 padding: .48rem .95rem;
 font-size: .9rem;
 background: transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(185,146,74,.16); color: var(--gold-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active { background: var(--gold-2); color: #1a140c; border-color: var(--gold-2); }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.2rem; }
.level-badge {
 border: 1px solid rgba(185,146,74,.45);
 border-radius: 999px;
 padding: .4rem .8rem;
 font-size: .84rem;
 color: var(--gold-deep);
 background: rgba(255,252,247,.7);
}
.level-badge.is-live { background: var(--ink); color: var(--gold-2); border-color: var(--ink); }
.page-mast { padding: 3.6rem 0 2.4rem; background: var(--cream); }
.mast-grid {
 display: grid;
 grid-template-columns: 1.12fr .88fr;
 gap: 2.4rem;
 align-items: end;
}
.page-title {
 font-size: clamp(2.55rem, 5vw, 4.5rem);
 max-width: 11em;
 margin: .35rem 0 1rem;
}
.mast-note { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.mast-figure {
 position: relative;
 border-radius: 28px;
 overflow: hidden;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 min-height: 420px;
 background: var(--ink);
}
.mast-figure img { width: 100%; height: 460px; object-fit: cover; }
.figure-cap {
 position: absolute;
 left: 1rem; right: 1rem; bottom: 1rem;
 padding: .9rem 1rem;
 border-radius: 16px;
 background: rgba(16,14,12,.78);
 color: #f7f1e6;
 backdrop-filter: blur(8px);
 border: 1px solid rgba(231,211,161,.28);
}
.figure-cap strong { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 600; }
.figure-cap span { color: rgba(247,241,230,.75); font-size: .9rem; }
.feed { padding: 3.4rem 0 2.6rem; background: var(--paper); border-top: 1px solid rgba(185,146,74,.18); }
.feed-head {
 display: flex;
 justify-content: space-between;
 gap: 1.5rem;
 align-items: end;
 margin-bottom: 1.2rem;
}
.feed h2, .tiers h2, .wire h2, .voices h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin-bottom: .4rem; }
.story {
 display: grid;
 grid-template-columns: 72px 176px minmax(0,1fr);
 gap: 1.1rem;
 align-items: center;
 padding: 1rem;
 border-radius: 20px;
 transition: background .2s ease, transform .2s ease;
}
.story + .story { border-top: 1px solid rgba(185,146,74,.22); }
.story:hover { background: rgba(239,228,210,.55); transform: translateX(4px); }
.story-index { font-family: var(--display); font-size: 2.1rem; color: var(--gold-deep); line-height: 1; }
.story-photo { border-radius: 16px; overflow: hidden; height: 118px; border: 1px solid var(--line); }
.story-photo img { width: 100%; height: 118px; object-fit: cover; transition: transform .45s ease; }
.story:hover .story-photo img { transform: scale(1.05); }
.story h3 { font-size: 1.7rem; margin-bottom: .25rem; }
.story p { margin: 0; color: var(--muted); }
.story time { display: block; margin-bottom: .2rem; color: var(--gold-deep); font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.seal {
 position: relative;
 color: #f7f1e6;
 padding: 4.4rem 0;
 background:
  linear-gradient(105deg, rgba(12,10,8,.92) 10%, rgba(12,10,8,.74) 58%, rgba(12,10,8,.88)),
  url("/assets/images/77fffdd18d18e7ea.webp") center/cover no-repeat;
}
.seal h2 { color: #f7f1e6; font-size: clamp(2.2rem, 4vw, 3.5rem); max-width: 12em; }
.seal .lead { color: rgba(247,241,230,.78); }
.seal-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; }
.mark-panel {
 background: rgba(255,252,247,.06);
 border: 1px solid rgba(231,211,161,.32);
 border-radius: 24px;
 padding: 1.3rem 1.35rem 1rem;
 box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.mark-list { list-style: none; padding: 0; margin: 0; }
.mark-list li {
 display: flex;
 justify-content: space-between;
 gap: 1rem;
 padding: .9rem 0;
 border-bottom: 1px solid rgba(231,211,161,.22);
}
.mark-list li:last-child { border-bottom: 0; }
.mark-list span { color: rgba(247,241,230,.62); }
.mark-list b { font-weight: 600; text-align: right; }
.tiers { padding: 4rem 0; background: linear-gradient(180deg, var(--sand), #f7f1e6 70%); }
.tier-row { margin-top: 1.15rem; }
.tier-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; font-weight: 600; }
.tier-top em { font-style: normal; color: var(--gold-deep); }
.bar {
 height: 9px;
 border-radius: 999px;
 background: rgba(20,18,15,.08);
 overflow: hidden;
}
.bar i {
 display: block;
 height: 100%;
 width: var(--w);
 border-radius: inherit;
 background: linear-gradient(90deg, #8c6a2f, #e7d3a1);
 transform-origin: left center;
 animation: grow 1s ease both;
}
.tier-copy { color: var(--muted); margin: .35rem 0 0; font-size: .95rem; }
.wire { padding: 4rem 0; background: var(--cream); }
.wire-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 1.6rem; align-items: stretch; }
.wire-photo {
 position: relative;
 border-radius: 28px;
 overflow: hidden;
 min-height: 460px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.wire-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.wire-photo figcaption {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 1.3rem 1.2rem;
 background: linear-gradient(transparent, rgba(12,10,8,.88));
 color: #f7f1e6;
 font-family: var(--display);
 font-size: 1.7rem;
}
.region-stack { display: flex; flex-direction: column; gap: .8rem; }
.region-note {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 1rem;
 padding: 1rem 1.05rem;
 border-radius: 18px;
 background: rgba(255,252,247,.78);
 border: 1px solid var(--line);
 transition: transform .2s ease, box-shadow .2s ease;
}
.region-note:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.region-note b {
 font-family: var(--display);
 font-size: 1.55rem;
 color: var(--gold-deep);
 line-height: 1;
}
.region-note h3 { font-size: 1.45rem; margin-bottom: .2rem; }
.region-note p { margin: 0; color: var(--muted); }
.voices { padding: 3.8rem 0; background: var(--paper); }
.voice-grid { display: grid; grid-template-columns: 1.35fr .75fr; gap: 1rem; margin-top: 1.2rem; }
.quote-main, .quote-side article {
 border-radius: 24px;
 border: 1px solid var(--line);
 background: var(--cream);
}
.quote-main { padding: 1.6rem 1.5rem; }
.quote-main p {
 font-family: var(--display);
 font-size: clamp(1.7rem, 3vw, 2.35rem);
 line-height: 1.25;
 color: var(--ink);
 margin-bottom: .8rem;
}
.quote-side { display: flex; flex-direction: column; gap: 1rem; }
.quote-side article { padding: 1.15rem 1.1rem; transition: transform .2s ease; }
.quote-side article:hover { transform: translateY(-3px); }
.quote-side p { margin-bottom: .6rem; }
.who { color: var(--gold-deep); font-size: .88rem; font-weight: 700; }
.pulse {
 padding: 3.1rem 0;
 background: var(--ink);
 color: #f7f1e6;
}
.pulse h2 { color: #f7f1e6; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.2rem; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
 padding-top: .4rem;
 border-top: 1px solid rgba(231,211,161,.28);
}
.stat b {
 display: block;
 font-family: var(--display);
 font-size: clamp(2.3rem, 4vw, 3.5rem);
 color: var(--gold-2);
 line-height: 1;
 font-weight: 600;
 margin: .35rem 0;
}
.stat span { color: rgba(247,241,230,.72); }
.desk { padding: 4rem 0 4.4rem; background: var(--cream); }
.desk-panel {
 display: grid;
 grid-template-columns: 1.2fr .8fr;
 gap: 1.5rem;
 padding: 1.5rem;
 border-radius: 28px;
 background:
  linear-gradient(160deg, rgba(255,252,247,.92), rgba(239,228,210,.9)),
  url("/assets/images/36f58ccd76556ea6.webp") right center/cover;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.desk h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 12em; }
.desk-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.hours {
 border-radius: 22px;
 background: rgba(16,14,12,.92);
 color: #f7f1e6;
 padding: 1.3rem;
 align-self: end;
}
.hours h3 { color: var(--gold-2); font-size: 1.8rem; margin-bottom: .4rem; }
.hours p { margin: 0 0 .45rem; color: rgba(247,241,230,.8); }
.hours a { color: var(--gold-2); }
.site-footer {
 background: #100e0c;
 color: #f7f1e6;
 padding: 3.2rem 0 1.4rem;
}
.site-footer h2 { font-family: var(--display); font-size: 1.8rem; color: var(--gold-2); margin-bottom: .6rem; }
.site-footer p { color: rgba(247,241,230,.78); }
.site-footer .brand { margin-bottom: .2rem; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links li + li { margin-top: .35rem; }
.foot-links a { color: rgba(247,241,230,.82); transition: color .2s ease; }
.foot-links a:hover { color: var(--gold-2); }
.legal {
 margin-top: 2rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(231,211,161,.2);
 color: rgba(247,241,230,.62);
 font-size: .92rem;
}
@keyframes grow { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .bar i, .story, .story-photo img, .region-note, .quote-side article, .btn { animation: none; transition: none; }
}
@media (max-width: 1024px) {
 .mast-grid, .seal-grid, .wire-grid, .desk-panel { gap: 1.2rem; }
 .story { grid-template-columns: 56px 140px minmax(0,1fr); }
 .page-title { font-size: clamp(2.3rem, 5vw, 3.6rem); }
 .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
}
@media (max-width: 768px) {
 .brand-name { white-space: normal; }
 .mast-grid, .seal-grid, .wire-grid, .voice-grid, .desk-panel { grid-template-columns: 1fr; }
 .mast-figure, .mast-figure img, .wire-photo, .wire-photo img { min-height: 260px; height: 280px; }
 .feed-head { flex-direction: column; align-items: flex-start; }
 .story { grid-template-columns: 1fr; gap: .55rem; }
 .story-photo, .story-photo img { width: 100%; height: 200px; }
 .region-note { grid-template-columns: 72px 1fr; }
 .header-cta { white-space: nowrap; }
}
@media (max-width: 520px) {
 .header-top { flex-direction: column; align-items: stretch; }
 .header-cta { width: 100%; }
 .page-mast, .feed, .tiers, .wire, .voices, .desk { padding-left: 0; padding-right: 0; }
 .mark-list li, .tier-top { flex-direction: column; align-items: flex-start; }
 .mark-list b { text-align: left; }
 .stat-row { grid-template-columns: 1fr; }
 .desk-actions .btn { width: 100%; }
 .figure-cap strong { font-size: 1.25rem; }
}