/* ==========================================================================
   MARVEL Ecotourism Knowledge Hub — public site
   Modern Eco Editorial: forest green, emerald, warm white, sea blue, sand.
   ========================================================================== */

:root {
  --forest: #164B3B;
  --forest-deep: #0E3529;
  --emerald: #2F8064;
  --emerald-soft: #4E9E80;
  --warm: #F8FAF7;
  --warm-2: #F1F5EF;
  --sea: #287B91;
  --sea-soft: #E4EFF1;
  --sand: #E9E3D5;
  --sand-soft: #F3EEE4;
  --ink: #13241E;
  --muted: #586B63;
  --line: rgba(22, 75, 59, 0.12);
  --line-strong: rgba(22, 75, 59, 0.22);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px rgba(19, 36, 30, 0.05);
  --shadow: 0 2px 6px rgba(19, 36, 30, 0.05), 0 14px 34px -22px rgba(19, 36, 30, 0.4);
  --shadow-lg: 0 4px 10px rgba(19, 36, 30, 0.06), 0 30px 60px -30px rgba(19, 36, 30, 0.45);
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--warm);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--forest); text-decoration-color: rgba(22, 75, 59, 0.3); text-underline-offset: 3px; }
a:hover { color: var(--emerald); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--forest); line-height: 1.22; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.22rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: rgba(47, 128, 100, 0.2); }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--forest); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.hide-sm { display: inline-flex; }
[hidden] { display: none !important; }

/* ---------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.94rem;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--forest); color: #fff; cursor: pointer; text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  line-height: 1.3;
}
.btn:hover { background: var(--emerald); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(135deg, var(--forest) 0%, var(--emerald) 100%); box-shadow: 0 10px 24px -14px rgba(22, 75, 59, 0.8); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--line-strong); }
.btn--ghost:hover { background: rgba(22, 75, 59, 0.06); color: var(--forest); }
.btn--lg { padding: 14px 26px; font-size: 1rem; }
.btn--sm { padding: 8px 14px; font-size: 0.85rem; }
.btn--block { width: 100%; }
.btn svg { flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--emerald); }
.link-arrow:hover { color: var(--forest); gap: 9px; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.7);
  color: var(--forest); cursor: pointer; transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.iconbtn:hover { background: #fff; border-color: var(--line-strong); }

/* ---------------------------------- chips ---------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; border: 1px solid transparent;
}
.chip--draft { background: #FBF0DF; color: #8A5A16; border-color: #EFDCBC; }
.chip--review { background: var(--sea-soft); color: #1C5E71; border-color: #CFE3E8; }
.chip--approved { background: #E4EFE7; color: #235C41; border-color: #CBE1D2; }
.chip--neutral { background: var(--sand-soft); color: #5E5140; border-color: #E3DAC9; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------- topbar --------------------------------- */
.topbar { background: var(--forest-deep); color: rgba(255, 255, 255, 0.82); font-size: 0.78rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; flex-wrap: wrap; }
.topbar__note { display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.01em; }
.topbar__links { display: flex; align-items: center; gap: 16px; }
.topbar__prog { color: rgba(255, 255, 255, 0.6); }
.topbar__admin { color: rgba(255, 255, 255, 0.75); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.topbar__admin:hover { color: #fff; }

/* ---------------------------------- header --------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 60; background: rgba(248, 250, 247, 0.88);
  backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand__svg { flex: none; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt strong { font-family: var(--font-head); font-size: 1.18rem; font-weight: 800; letter-spacing: 0.06em; color: var(--forest); }
.brand__sub { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: nowrap; position: relative; }
.navitem { position: static; }
.navitem__link {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 11px; border-radius: 999px;
  font-family: var(--font-head); font-size: 0.86rem; font-weight: 600; color: var(--forest);
  text-decoration: none; white-space: nowrap; transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.navitem__link:hover, .navitem.is-active .navitem__link { background: rgba(22, 75, 59, 0.08); }
.navitem__caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.55; margin-top: 2px; }
.navpanel {
  position: absolute; top: calc(100% + 8px); left: auto; right: 0; transform: translateY(6px);
  width: min(560px, calc(100vw - 56px)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 20px 22px; opacity: 0; visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px;
}
.navitem.has-sub:hover .navpanel, .navitem.has-sub:focus-within .navpanel, .navitem.is-open .navpanel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.navpanel__kicker { display: block; font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald); margin-bottom: 8px; }
.navpanel__head p { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }
.navpanel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.navpanel__list a { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 0.92rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.navpanel__list a:hover { background: var(--warm-2); color: var(--forest); }
.hdr__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr__burger { display: none; }
.searchbar { border-top: 1px solid var(--line); background: #fff; padding: 14px 0; }
.searchform { display: flex; align-items: center; gap: 10px; background: var(--warm-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 16px; max-width: 720px; }
.searchform svg { flex: none; color: var(--muted); }
.searchform input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 0.95rem; color: var(--ink); padding: 8px 0; outline: none; }
.searchform--page { max-width: 760px; margin-top: 22px; background: #fff; }

/* ---------------------------------- drawer --------------------------------- */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 92vw); background: #fff; z-index: 110;
  padding: 18px 20px 30px; overflow-y: auto; box-shadow: var(--shadow-lg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__title { font-family: var(--font-head); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; color: var(--emerald); }
.drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.drawer__group summary { font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; color: var(--forest); padding: 12px 8px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; border-radius: var(--r-sm); }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary::after { content: '＋'; color: var(--emerald); font-weight: 600; }
.drawer__group[open] summary::after { content: '－'; }
.drawer__group[open] summary { background: var(--warm-2); }
.drawer__sublink { display: block; padding: 10px 12px 10px 20px; font-size: 0.9rem; color: var(--muted); text-decoration: none; border-radius: var(--r-sm); }
.drawer__sublink:hover { background: var(--warm-2); color: var(--forest); }
.drawer__link { display: block; padding: 13px 8px; font-family: var(--font-head); font-weight: 700; color: var(--forest); text-decoration: none; border-bottom: 1px solid var(--line); }
.scrim { position: fixed; inset: 0; background: rgba(14, 53, 41, 0.42); backdrop-filter: blur(2px); z-index: 100; }

/* ----------------------------------- hero ---------------------------------- */
.hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; overflow: clip; background: var(--forest-deep); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 53, 41, 0.55) 0%, rgba(14, 53, 41, 0.25) 32%, rgba(9, 38, 29, 0.82) 100%),
    linear-gradient(90deg, rgba(9, 38, 29, 0.7) 0%, rgba(9, 38, 29, 0.1) 62%);
}
.hero__in { position: relative; z-index: 2; padding: clamp(56px, 9vw, 110px) 28px clamp(40px, 6vw, 72px); color: #fff; max-width: 820px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #CFE7DA; margin-bottom: 18px; }
.hero__kicker::before { content: ''; width: 30px; height: 1px; background: currentColor; display: block; }
.hero__title { color: #fff; font-size: clamp(2.1rem, 5.2vw, 4rem); font-weight: 800; line-height: 1.06; margin-bottom: 14px; letter-spacing: -0.03em; text-wrap: balance; }
.hero__sub { font-family: var(--font-head); font-size: clamp(1.02rem, 1.8vw, 1.42rem); font-weight: 600; color: #E7F1EA; margin-bottom: 16px; max-width: 40ch; }
.hero__desc { color: rgba(255, 255, 255, 0.88); font-size: clamp(0.95rem, 1.2vw, 1.06rem); max-width: 62ch; margin-bottom: 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero .btn--primary { background: #fff; color: var(--forest); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6); }
.hero .btn--primary:hover { background: var(--sand); color: var(--forest-deep); }
.hero .btn--ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero__meta { list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); }
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------- sections -------------------------------- */
.sec { padding: clamp(52px, 6.5vw, 88px) 0; }
.sec--pad { padding-top: clamp(40px, 5vw, 64px); }
.sec--sand { background: var(--sand-soft); border-top: 1px solid #E6DECE; border-bottom: 1px solid #E6DECE; }
.sec--forest { background: var(--forest); color: rgba(255, 255, 255, 0.86); }
.sec--forest h2, .sec--forest h3, .sec--forest .sec__title { color: #fff; }
.sec--forest .sec__intro { color: rgba(255, 255, 255, 0.76); }
.sec--forest .kicker { color: #9ED3B8; }
.sec--forest .link-arrow { color: #C6E6D6; }
.sec--forest .link-arrow:hover { color: #fff; }
.sec--tight { padding-top: 0; }
.sec__head { max-width: 720px; margin-bottom: clamp(26px, 3.4vw, 44px); }
.kicker { display: inline-block; font-family: var(--font-head); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--emerald); margin-bottom: 10px; }
.sec__title { margin-bottom: 12px; text-wrap: balance; }
.sec__intro { color: var(--muted); font-size: 1rem; margin: 0; max-width: 68ch; }
.sec__foot { margin-top: clamp(24px, 3vw, 36px); display: flex; gap: 12px; flex-wrap: wrap; }
.sec__gap { height: clamp(22px, 3vw, 34px); }
.subhead { font-size: 1.15rem; margin: 34px 0 16px; }

/* ------------------------------- stat cards -------------------------------- */
.statgrid { display: grid; gap: 20px; }
.statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.statcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: var(--shadow-sm);
}
.statcard--lg { padding: 28px 30px; position: relative; overflow: clip; }
.statcard--lg::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 128, 100, 0.14), transparent 70%); }
.statcard__value { font-family: var(--font-head); font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 800; color: var(--forest); line-height: 1; letter-spacing: -0.03em; }
.statcard__label { font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; color: var(--forest); }
.statcard__note { font-size: 0.84rem; color: var(--muted); }

/* ---------------------------------- about ---------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.about__text .prose { max-width: 62ch; }
.about__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.about__fig { margin: 0; border-radius: var(--r-lg); overflow: clip; background: var(--warm-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.about__fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__fig figcaption { font-size: 0.74rem; color: var(--muted); padding: 9px 14px; background: #fff; border-top: 1px solid var(--line); }
.ticks { list-style: none; margin: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ticks li { display: flex; gap: 11px; font-size: 0.93rem; line-height: 1.55; color: var(--ink); }
.ticks svg { flex: none; color: var(--emerald); margin-top: 3px; }

/* -------------------------------- timeline --------------------------------- */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.tl--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.tl__item { min-width: 0; }
.tl__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; height: 100%; box-shadow: var(--shadow-sm); position: relative; overflow: clip; }
.tl__card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--emerald), var(--sea)); }
.tl__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.tl__date { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--emerald); }
.tl__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--warm-2); padding: 3px 8px; border-radius: 999px; }
.tl__title { font-size: 1.08rem; margin-bottom: 8px; }
.tl__card p { font-size: 0.92rem; color: var(--muted); margin-bottom: 14px; }
.tl__body { min-width: 0; }

/* ---------------------------------- cards ---------------------------------- */
.cards { display: grid; gap: 22px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); overflow: clip; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card__media { aspect-ratio: 16 / 10; overflow: clip; background: var(--warm-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card--session .card__body { padding-top: 24px; }
.card__num { font-family: var(--font-head); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; color: var(--emerald); }
.card__kicker { font-family: var(--font-head); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea); }
.card__title { font-size: 1.1rem; margin: 0; color: var(--forest); line-height: 1.3; }
.card__sub { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--emerald); margin: 0; }
.card__text { font-size: 0.9rem; color: var(--muted); margin: 4px 0 0; }
.card__facts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.card__facts div { display: flex; gap: 8px; font-size: 0.82rem; }
.card__facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 700; min-width: 62px; padding-top: 2px; }
.card__facts dd { margin: 0; color: var(--ink); }
.card__cta { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--emerald); }
.card:hover .card__cta { color: var(--forest); gap: 9px; }
.card--out .card__body { gap: 10px; }

/* ------------------------------- destinations ------------------------------ */
.dest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dest__card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-xl); overflow: clip; display: flex; flex-direction: column; min-width: 0; }
.dest__media { display: block; aspect-ratio: 16 / 9; overflow: clip; }
.dest__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.dest__card:hover .dest__media img { transform: scale(1.03); }
.dest__body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dest__kicker { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9ED3B8; font-weight: 700; }
.dest__body h3 { font-size: 1.4rem; margin: 0; }
.dest__body h3 a { color: #fff; text-decoration: none; }
.dest__body h3 a:hover { text-decoration: underline; }
.dest__body p { color: rgba(255, 255, 255, 0.78); font-size: 0.94rem; margin: 0; }
.dest__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: auto; padding-top: 12px; }

/* --------------------------- featured SOP & maps --------------------------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.feature__col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px 26px; min-width: 0; box-shadow: var(--shadow-sm); }
.feature__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.feature__head h3 { margin: 0; font-size: 1.05rem; }
.soplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.soplist__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.soplist__item:last-child { border-bottom: 0; }
.soplist__main { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; flex: 1; }
.soplist__num { font-family: var(--font-head); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--emerald); background: var(--warm-2); border: 1px solid var(--line); padding: 5px 9px; border-radius: 8px; flex: none; }
.soplist__text { display: flex; flex-direction: column; min-width: 0; }
.soplist__text strong { font-size: 0.93rem; color: var(--forest); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soplist__text small { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soplist__meta { display: flex; align-items: center; gap: 10px; flex: none; }
.soplist__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; color: var(--emerald); text-decoration: none; }
.mapcards { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mapcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mapcard { border: 1px solid var(--line); border-radius: var(--r); overflow: clip; background: var(--warm); min-width: 0; display: flex; flex-direction: column; }
.mapcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--warm-2); overflow: clip; }
.mapcard__media img { width: 100%; height: 100%; object-fit: cover; }
.mapcard__badge { position: absolute; left: 10px; top: 10px; }
.mapcard__body { padding: 14px 16px 16px; }
.mapcard__body h3, .mapcard__body h4 { font-size: 0.95rem; margin: 0 0 4px; }
.mapcard__body a { text-decoration: none; color: var(--forest); }
.mapcard__body p { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* ------------------------------ download cards ----------------------------- */
.dlcards { display: flex; flex-direction: column; gap: 14px; }
.dlcard { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; min-width: 0; box-shadow: var(--shadow-sm); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.dlcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.dlcard__ico { flex: none; width: 44px; height: 52px; border-radius: 8px; background: linear-gradient(160deg, #F3DED5, #E9C9BB); color: #8C3B2A; font-family: var(--font-head); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(140, 59, 42, 0.18); }
.dlcard__main { flex: 1; min-width: 0; }
.dlcard__title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--forest); text-decoration: none; display: block; }
.dlcard__title:hover { text-decoration: underline; }
.dlcard__meta { font-size: 0.78rem; color: var(--muted); margin: 3px 0 0; }
.dlcard__desc { font-size: 0.86rem; color: var(--muted); margin: 6px 0 0; }
.dlcard__actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.dlcards .dlcard:only-child { max-width: 100%; }

/* ----------------------------------- band ---------------------------------- */
.band { background: linear-gradient(135deg, var(--forest-deep), var(--forest) 55%, var(--emerald)); color: #fff; padding: clamp(38px, 5vw, 62px) 0; }
.band__in { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.band h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.band p { margin: 0; color: rgba(255, 255, 255, 0.8); max-width: 60ch; font-size: 0.95rem; }
.band .btn--primary { background: #fff; color: var(--forest); }
.band .btn--primary:hover { background: var(--sand); }

/* ---------------------------------- footer --------------------------------- */
.ftr { background: #0B2A21; color: rgba(255, 255, 255, 0.72); padding: clamp(44px, 5vw, 68px) 0 26px; font-size: 0.9rem; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 32px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ftr__brand { min-width: 0; }
.brand--ftr .brand__txt strong { color: #fff; }
.brand--ftr .brand__sub { color: rgba(255, 255, 255, 0.55); }
.ftr__about { margin: 16px 0 10px; color: rgba(255, 255, 255, 0.66); max-width: 46ch; font-size: 0.87rem; }
.ftr__prog { font-family: var(--font-head); font-weight: 700; color: #9ED3B8; font-size: 0.8rem; letter-spacing: 0.04em; }
.ftr__col { min-width: 0; }
.ftr__col h3 { color: #fff; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ftr__col a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.88rem; }
.ftr__col a:hover { color: #fff; text-decoration: underline; }
.ftr__facts li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); }
.ftr__facts svg { flex: none; margin-top: 3px; color: #9ED3B8; }
.ftr__muted { color: rgba(255, 255, 255, 0.45); font-style: italic; font-size: 0.84rem; }
.ftr__bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-top: 22px; flex-wrap: wrap; }
.ftr__copy, .ftr__note { margin: 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.ftr__note { max-width: 60ch; }

/* ------------------------------- page header ------------------------------- */
.phead { background: linear-gradient(170deg, var(--sand-soft) 0%, var(--warm) 78%); border-bottom: 1px solid var(--line); padding: clamp(26px, 3.4vw, 44px) 0 clamp(30px, 4vw, 46px); position: relative; overflow: clip; }
.phead::after { content: ''; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 128, 100, 0.12), transparent 68%); pointer-events: none; }
.phead__title { font-size: clamp(1.9rem, 4vw, 3rem); margin: 6px 0 10px; text-wrap: balance; max-width: 22ch; }
.phead--detail .phead__title { max-width: 30ch; }
.phead__sub { font-family: var(--font-head); font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--muted); font-weight: 500; max-width: 62ch; margin: 0 0 16px; }
.phead__body { max-width: 70ch; margin-top: 18px; }
.phead .share { margin-top: 18px; }
.crumbs { margin-bottom: 14px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 0.8rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li:not(:last-child)::after { content: '/'; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; }
.crumbs li[aria-current] span { color: var(--forest); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.pg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.82rem; color: var(--muted); }
.pg__meta span { display: inline-flex; align-items: center; gap: 5px; }
.pg__kind { font-family: var(--font-head); font-weight: 700; color: var(--sea); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.pg__hero { margin: 0 auto; max-width: var(--wrap); padding: 0 28px; transform: translateY(-14px); }
.pg__hero img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); display: block; }
.pg__hero figcaption { font-size: 0.76rem; color: var(--muted); padding-top: 8px; }

/* -------------------------------- detail grid ------------------------------ */
.pg__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: clamp(30px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 84px); }
.pg__main { min-width: 0; }
.pg__aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sidecard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.sidecard__title { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald); margin: 0 0 12px; }
.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.toc__title { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald); margin: 0 0 12px; }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.toc__item a { display: block; padding: 5px 0 5px 10px; font-size: 0.84rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; line-height: 1.45; }
.toc__item a:hover { color: var(--forest); border-left-color: var(--emerald); background: var(--warm-2); }
.toc__item--h3 a { padding-left: 22px; font-size: 0.8rem; }
.toc__item--h4 a { padding-left: 32px; font-size: 0.78rem; }
.toc__item.is-active a { color: var(--forest); border-left-color: var(--emerald); font-weight: 600; }
.sidelist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sidelist li { display: flex; flex-direction: column; min-width: 0; font-size: 0.85rem; }
.sidelist a { color: var(--forest); text-decoration: none; font-weight: 500; }
.sidelist a:hover { text-decoration: underline; }
.sidelist small { color: var(--muted); font-size: 0.74rem; }
.facts { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.facts__row { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facts dd { margin: 0; font-size: 0.88rem; color: var(--ink); }
.facts--inline { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }

/* ---------------------------------- prose ---------------------------------- */
.prose { font-size: 1.015rem; line-height: 1.78; color: #20332C; max-width: 74ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 2.1em 0 0.6em; font-size: clamp(1.35rem, 2vw, 1.7rem); scroll-margin-top: 96px; position: relative; }
.prose h3 { margin: 1.7em 0 0.5em; font-size: 1.18rem; scroll-margin-top: 96px; }
.prose h4 { margin: 1.5em 0 0.4em; font-size: 1.02rem; scroll-margin-top: 96px; }
.prose p { margin: 0 0 1.15em; }
.prose .lead { font-family: var(--font-head); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; color: var(--forest); font-weight: 500; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--emerald); }
.prose blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 3px solid var(--emerald); background: var(--warm-2); border-radius: 0 var(--r) var(--r) 0; font-style: italic; color: var(--forest); }
.prose blockquote p:last-child { margin: 0; }
.prose img { border-radius: var(--r); display: block; margin: 1.4em 0; box-shadow: var(--shadow-sm); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prose th, .prose td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--warm-2); font-family: var(--font-head); font-weight: 700; color: var(--forest); font-size: 0.82rem; letter-spacing: 0.02em; }
.prose td.strong { font-weight: 600; color: var(--forest); }
.prose a { color: var(--emerald); }
.prose hr { margin: 2em 0; }
.h-anchor { margin-left: 8px; opacity: 0; font-size: 0.7em; color: var(--emerald); text-decoration: none; transition: opacity 0.15s var(--ease); }
h2:hover .h-anchor, h3:hover .h-anchor, h4:hover .h-anchor, .h-anchor:focus { opacity: 1; }
.tbl { overflow-x: auto; max-width: 100%; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.tbl table { min-width: 520px; }
.tbl:focus-visible { outline: 2px solid var(--emerald); }

/* callouts */
.callout { border-radius: var(--r); padding: 18px 22px; margin: 1.5em 0; border: 1px solid var(--line); background: var(--warm-2); }
.callout p:last-child { margin-bottom: 0; }
.callout__title { font-family: var(--font-head); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; }
.callout--info { background: var(--sea-soft); border-color: #CFE3E8; }
.callout--info .callout__title { color: #1C5E71; }
.callout--pending { background: #FDF6E7; border-color: #EEDFBE; }
.callout--pending .callout__title { color: #8A5A16; }
.callout--warn { background: #FBEEE8; border-color: #EFD3C5; }
.callout--warn .callout__title { color: #8C3B2A; }
.callout--success { background: #E8F2EA; border-color: #CBE1D2; }
.callout--success .callout__title { color: #235C41; }

/* kind sections */
.ksec { margin: 2.2em 0; padding-top: 0.2em; }
.ksec__title { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 0.6em; scroll-margin-top: 96px; }
.ksec--status, .ksec--map { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.statusbar { display: flex; flex-direction: column; gap: 12px; }
.statusbar__label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.statusbar__note { margin: 0; font-size: 0.9rem; color: var(--muted); }
.statusbar .facts { margin-top: 6px; }
.note-line { font-size: 0.85rem; color: var(--muted); font-style: italic; margin: 1em 0 0; }
.steps { counter-reset: s; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding: 12px 16px 12px 48px; background: var(--warm-2); border-radius: var(--r-sm); font-size: 0.94rem; }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--forest); color: #fff; font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mapstatus { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.mapstatus__note { margin: 0; font-size: 0.9rem; color: var(--muted); }
.mapstatus__foot { margin: 12px 0 0; font-size: 0.78rem; color: var(--muted); }
.fig { margin: 1.4em 0; }
.fig__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: var(--r); overflow: clip; }
.fig__zoom img { width: 100%; display: block; margin: 0; border-radius: var(--r); }
.fig__hint { position: absolute; right: 10px; bottom: 10px; background: rgba(11, 42, 33, 0.78); color: #fff; font-size: 0.7rem; font-family: var(--font-head); font-weight: 600; padding: 5px 10px; border-radius: 999px; opacity: 0; transition: opacity 0.18s var(--ease); }
.fig__zoom:hover .fig__hint, .fig__zoom:focus-visible .fig__hint { opacity: 1; }
.pdf-embed { border: 1px solid var(--line); border-radius: var(--r); overflow: clip; background: #fff; }
.pdf-embed iframe { width: 100%; height: 620px; border: 0; display: block; }
.alloc { display: flex; flex-direction: column; gap: 16px; }
.alloc__row { display: flex; flex-direction: column; gap: 6px; }
.alloc__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.alloc__name { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--forest); }
.alloc__pct { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--emerald); }
.alloc__bar { height: 9px; border-radius: 999px; background: var(--warm-2); overflow: clip; border: 1px solid var(--line); }
.alloc__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--forest), var(--emerald)); border-radius: 999px; }
.alloc__note { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* blocks */
.blk { margin: 1.8em 0; }
.blk--text { max-width: 74ch; }
.blk--image.is-wide { margin-left: calc(-1 * clamp(0px, 4vw, 60px)); margin-right: calc(-1 * clamp(0px, 4vw, 60px)); }
.blk__caption { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 8px; }
.blk__caption--top { text-align: left; font-weight: 600; color: var(--forest); margin-bottom: 8px; }
.blk__title { font-size: 1.05rem; margin-bottom: 6px; }
.blk__intro { color: var(--muted); font-size: 0.92rem; }
.blk--empty { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 18px 20px; background: var(--sand-soft); color: #7A6A55; font-size: 0.88rem; }
.blk--empty p { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery--lg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery__item { padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: clip; background: var(--warm-2); cursor: zoom-in; aspect-ratio: 4 / 3; position: relative; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 0.72rem; color: #fff; background: linear-gradient(transparent, rgba(11, 42, 33, 0.8)); }
.statgrid.blk--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.statcard__value { overflow-wrap: anywhere; }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: clip; background: var(--forest-deep); }
.vid__poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.vid__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.94); color: var(--forest); font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding-left: 4px; transition: transform 0.18s var(--ease); }
.vid__play:hover { transform: scale(1.06); }
.vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.cols__col { min-width: 0; }
.acc { border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; margin-bottom: 10px; overflow: clip; }
.acc summary { padding: 14px 18px; font-family: var(--font-head); font-weight: 600; cursor: pointer; font-size: 0.95rem; color: var(--forest); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '＋'; color: var(--emerald); font-weight: 700; }
.acc[open] summary::after { content: '−'; }
.acc__body { padding: 0 18px 16px; font-size: 0.94rem; color: var(--muted); }
.acc__body p:last-child { margin-bottom: 0; }
.blk--quote { margin: 2em 0; padding: 24px 28px; border-left: 3px solid var(--emerald); background: var(--sand-soft); border-radius: 0 var(--r) var(--r) 0; font-family: var(--font-head); font-size: 1.1rem; line-height: 1.6; color: var(--forest); }
.blk--quote p { margin: 0 0 8px; }
.blk--quote cite { font-size: 0.82rem; font-style: normal; color: var(--muted); }
.blk--divider { margin: 2.4em 0; position: relative; }
.blk--divider hr { margin: 0; }
.blk__divider-label { display: block; text-align: center; font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: var(--warm); padding: 0 14px; margin: -9px auto 0; width: fit-content; }
.dlcards .blk { margin: 0; }

/* attachments / related */
.attach { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.attach__head h2 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); display: flex; align-items: center; gap: 10px; }
.attach__head p { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }
.count { font-family: var(--font-head); font-size: 0.72rem; background: var(--warm-2); border: 1px solid var(--line); color: var(--emerald); padding: 2px 9px; border-radius: 999px; }
.related { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.related h2 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 20px; }

/* ---------------------------------- share ---------------------------------- */
.share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.share__label { font-family: var(--font-head); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.share__inline { display: flex; gap: 6px; flex-wrap: wrap; }
.share__item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--forest); font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.16s var(--ease); }
.share__item:hover { background: var(--warm-2); border-color: var(--line-strong); transform: translateY(-1px); color: var(--forest); }
.share__item svg { flex: none; }
.share--full .share__more { display: none; }
.share--compact { position: absolute; right: 10px; top: 10px; z-index: 5; }
.share--compact .share__trigger { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.94); color: var(--forest); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.share--compact .share__trigger:hover { background: #fff; }
.share__menu { display: none; }
.share.is-open .share__menu {
  display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 130;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 196px;
}
.share.is-open .share__menu .share__item { border: 0; border-radius: var(--r-sm); padding: 10px 12px; justify-content: flex-start; width: 100%; background: transparent; font-size: 0.88rem; }
.share.is-open .share__menu .share__item:hover { background: var(--warm-2); }
.share.is-open .share__inline { display: none; }
.share--compact.is-open .share__trigger { background: var(--forest); color: #fff; }

/* ---------------------------------- search --------------------------------- */
.search__count { margin: 14px 0 0; font-size: 0.9rem; color: var(--muted); }
.results { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.results li { padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.results a { font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; color: var(--forest); text-decoration: none; }
.results a:hover { text-decoration: underline; }
.results__sub { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--emerald); margin-top: 2px; }
.results p { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }

/* -------------------------------- documents -------------------------------- */
.dochead { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: start; }
.dochead__main { min-width: 0; }
.dochead__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 16px; }
.dochead__cover img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); display: block; }
.docview { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; background: #fff; box-shadow: var(--shadow-sm); }
.docview__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.docview__head h2 { margin: 0; font-size: 1.02rem; }
.docview__head .muted { font-size: 0.8rem; }
.docview__frame { background: var(--warm-2); }
.docview__frame iframe { width: 100%; height: min(78vh, 860px); border: 0; display: block; }
.docview__fallback { margin: 0; padding: 12px 22px; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); }
.vernlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vernlist li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.88rem; }
.vernlist__tag { font-family: var(--font-head); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); background: var(--warm-2); padding: 3px 8px; border-radius: 999px; }

/* ---------------------------------- empty ---------------------------------- */
.empty { text-align: center; padding: clamp(32px, 5vw, 56px) 24px; background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); max-width: 620px; margin: 0 auto; }
.empty--wide { max-width: none; }
.empty__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--warm-2); color: var(--emerald); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--muted); font-size: 0.93rem; margin: 0 auto 18px; max-width: 56ch; }

/* ---------------------------------- zoom ---------------------------------- */
.zoom { position: fixed; inset: 0; z-index: 200; background: rgba(6, 24, 18, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3vh 3vw; }
.zoom__close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zoom__img { max-width: 96vw; max-height: 86vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.zoom__cap { color: rgba(255, 255, 255, 0.76); font-size: 0.84rem; margin: 14px 0 0; text-align: center; max-width: 70ch; }

/* ---------------------------------- toast ---------------------------------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: var(--forest-deep); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 0.88rem; box-shadow: var(--shadow-lg); z-index: 300; opacity: 0; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); max-width: 90vw; text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------ share guidance ----------------------------- */
.share-guide { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(11, 42, 33, 0.55); }
.share-guide__panel { background: #fff; border-radius: var(--r-lg); padding: 26px 28px; max-width: 460px; box-shadow: var(--shadow-lg); }
.share-guide__panel h2 { font-size: 1.15rem; margin-bottom: 8px; }
.share-guide__panel p { font-size: 0.92rem; color: var(--muted); }
.share-guide__panel ol { font-size: 0.92rem; color: var(--muted); padding-left: 1.1em; }
.share-guide__panel .btn { margin-top: 12px; }

/* -------------------------------- responsive ------------------------------- */
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
  .hdr__in { justify-content: space-between; }
}
@media (max-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg__grid { grid-template-columns: minmax(0, 1fr); }
  .pg__aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pg__aside .toc { grid-column: 1 / -1; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .dochead { grid-template-columns: minmax(0, 1fr); }
  .dochead__cover { max-width: 280px; }
  .gallery--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .ftr__brand { grid-column: 1 / -1; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .tl--cards { grid-template-columns: minmax(0, 1fr); }
  .statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .statgrid.blk--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__meta { font-size: 0.82rem; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 18px; }
  .hero__in { padding-left: 18px; padding-right: 18px; }
  .topbar__prog { display: none; }
  .topbar__in { min-height: 34px; font-size: 0.72rem; }
  .hero { min-height: 0; }
  .hero__title { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .hero__sub { font-size: 1rem; }
  .hero__desc { font-size: 0.94rem; }
  .hero__cta .btn { width: 100%; }
  .hero__meta { flex-direction: column; gap: 8px; padding-top: 14px; }
  .statgrid--3 { grid-template-columns: minmax(0, 1fr); }
  .cards--2, .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); }
  .mapcards, .mapcards--2 { grid-template-columns: minmax(0, 1fr); }
  .pg__aside { grid-template-columns: minmax(0, 1fr); }
  .gallery, .gallery--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery--lg .gallery__item:nth-child(n+7) { display: none; }
  .gallery--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__top { grid-template-columns: minmax(0, 1fr); }
  .dlcard { flex-wrap: wrap; }
  .dlcard__actions { width: 100%; }
  .dlcard__actions .btn { flex: 1; }
  .feature__col { padding: 20px 18px; }
  .soplist__item { flex-wrap: wrap; }
  .soplist__text strong, .soplist__text small { white-space: normal; }
  .phead__title { max-width: none; }
  .pg__hero { padding: 0 18px; }
  .pg__hero img { max-height: 300px; }
  .share--full .share__inline { width: 100%; }
  .share--full .share__item { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .share--full .share__more { display: none; }
  .prose { font-size: 0.99rem; }
  .pdf-embed iframe { height: 420px; }
  .docview__frame iframe { height: 62vh; }
  .sec { padding: 44px 0; }
  .blk--image.is-wide { margin-left: 0; margin-right: 0; }
  .band__in { flex-direction: column; align-items: flex-start; }
  .band .btn { width: 100%; }
  .searchform { flex-wrap: nowrap; padding-left: 12px; }
  .searchform input { font-size: 16px; }
  .toc__list { max-height: none; }
  .vernlist li { gap: 8px; }
  .ftr__bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 420px) {
  .brand__sub { display: none; }
  .gallery, .gallery--lg { grid-template-columns: minmax(0, 1fr); }
  .share__item span { display: none; }
  .share--full .share__item span, .share.is-open .share__menu .share__item span { display: inline; }
  .share--full .share__item { flex: 1 1 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .hdr, .topbar, .ftr, .share, .pg__aside, .band, .drawer, .scrim { display: none !important; }
  body { background: #fff; }
  .pg__grid { grid-template-columns: 1fr; }
  a { text-decoration: none; color: #000; }
}

/* floating share menu (moved to <body> while open so sticky/overflow containers cannot clip it) */
.share__menu--floating {
  display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 130;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 8px;
}
.share__menu--floating .share__item {
  border: 0; border-radius: var(--r-sm); padding: 10px 12px; justify-content: flex-start;
  width: 100%; background: transparent; font-size: 0.88rem;
}
.share__menu--floating .share__item:hover { background: var(--warm-2); }

/* ==========================================================================
   PHASE 02 — report components (editorial reading experience)
   ========================================================================== */

/* -------------------------- editorial status chips ------------------------ */
.chip--status { text-transform: none; letter-spacing: 0.01em; font-size: 0.72rem; font-weight: 700; }
.chip--status-documented_activity { background: #E4EFE7; color: #235C41; border-color: #CBE1D2; }
.chip--status-workshop_discussion { background: var(--sea-soft); color: #1C5E71; border-color: #CFE3E8; }
.chip--status-workshop_result { background: #EDF3E7; color: #3C5A2C; border-color: #D9E6CD; }
.chip--status-proposed_framework { background: #FBF0DF; color: #8A5A16; border-color: #EFDCBC; }
.chip--status-expected_outcome { background: #EEEAF7; color: #4B3B78; border-color: #DCD4EE; }
.chip--status-approved_document { background: #E4EFE7; color: #1F5136; border-color: #BFDCC8; }

/* ------------------------------- sources --------------------------------- */
.sources { margin-top: clamp(30px, 4vw, 48px); padding: 20px 22px; background: var(--sand-soft); border: 1px solid #E6DECE; border-radius: var(--r); }
.sources h2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6B5B44; margin-bottom: 8px; }
.sources p { font-size: 0.86rem; color: #5E5140; margin: 0 0 6px; }
.sources a { color: #6B5B44; }

/* --------------------------- sticky TOC (collapsible) -------------------- */
.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; cursor: default; list-style: none; }
.toc__summary::-webkit-details-marker { display: none; }
.toc__title { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald); margin: 0; }
.toc__count { font-size: 0.72rem; color: var(--muted); }
.toc nav { padding: 0 20px 18px; }
.toc__list { max-height: 54vh; overflow-y: auto; }

/* --------------------------- timeline (phase 02) -------------------------- */
.wtl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.wtl__day { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; position: relative; padding-bottom: 6px; }
.wtl__day::before { content: ''; position: absolute; left: 176px; top: 8px; bottom: -26px; width: 2px; background: linear-gradient(180deg, var(--emerald), rgba(47,128,100,0.08)); }
.wtl__day:last-child::before { display: none; }
.wtl__date { position: sticky; top: 104px; align-self: start; }
.wtl__date span { display: inline-block; font-family: var(--font-head); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.03em; color: var(--forest); background: var(--warm-2); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px; }
.wtl__items { display: flex; flex-direction: column; gap: 14px; }
.wtl__item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.wtl__item::before { content: ''; position: absolute; left: -24px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(47,128,100,0.14); }
.wtl__title { font-size: 1.02rem; margin: 0 0 6px; }
.wtl__title a { color: var(--forest); text-decoration: none; }
.wtl__title a:hover { text-decoration: underline; }
.wtl__text { font-size: 0.9rem; color: var(--muted); margin: 0 0 8px; }
.wtl__more { font-size: 0.8rem; }
.wtl__item:last-child .wtl__more { margin-bottom: 0; }

/* ------------------------------ flow steps ------------------------------- */
.flow .blk__title, .matrix.blk__title { margin-bottom: 14px; }
.flow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flow--numbered .flow__list { counter-reset: step; }
.flow__step { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.flow--pill .flow__step { border-radius: 999px; padding: 12px 22px; align-items: center; }
.flow__mark { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, var(--forest), var(--emerald)); color: #fff; font-family: var(--font-head); font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.flow--pill .flow__mark { width: 34px; border-radius: 999px; background: var(--warm-2); color: var(--forest); border: 1px solid var(--line-strong); }
.flow__body { min-width: 0; }
.flow__title { margin: 0 0 2px; font-size: 0.96rem; }
.flow__text { margin: 0; font-size: 0.87rem; color: var(--muted); }
.flow__step:not(:last-child) { position: relative; }
.flow--numbered .flow__step:not(:last-child)::after { content: ''; position: absolute; left: 33px; bottom: -12px; width: 2px; height: 12px; background: rgba(47,128,100,0.28); }

/* ------------------------------- matrices -------------------------------- */
.matrix th, .matrix td { font-size: 0.86rem; }
.matrix tbody tr:nth-child(even) { background: #FBFCFA; }
.compare th:nth-child(2), .compare td:nth-child(2) { background: rgba(47,128,100,0.055); }
.compare th:nth-child(3), .compare td:nth-child(3) { background: rgba(40,123,145,0.055); }

/* --------------------------- highlight cards ----------------------------- */
.hlgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hlcard { position: relative; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: var(--r); padding: 18px 20px 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.hlcard__num { font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: var(--emerald); }
.hlcard__title { font-size: 1rem; margin: 4px 0 6px; }
.hlcard__text { font-size: 0.89rem; color: var(--muted); margin: 0; }

/* ----------------------------- profile cards ----------------------------- */
.profgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profcard { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.profcard__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: clip; background: linear-gradient(160deg, var(--forest), var(--emerald)); display: flex; align-items: center; justify-content: center; }
.profcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.profcard__initials { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 1.3rem; letter-spacing: 0.02em; }
.profcard__body { min-width: 0; }
.profcard__name { font-size: 1.02rem; margin: 0 0 3px; }
.profcard__role { font-size: 0.83rem; color: var(--emerald); font-weight: 600; margin: 0 0 2px; }
.profcard__org { font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; }
.profcard__focus { font-size: 0.83rem; color: var(--ink); margin: 0; }

/* -------------------------------- hub diagram ---------------------------- */
.hub { position: relative; display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.6fr); gap: 26px; align-items: center; background: radial-gradient(circle at 22% 50%, rgba(47,128,100,0.1), transparent 62%), var(--warm-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.hub__center { position: relative; text-align: center; background: linear-gradient(140deg, var(--forest), var(--emerald)); color: #fff; border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 22px; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; line-height: 1.35; box-shadow: 0 18px 38px -22px rgba(22,75,59,0.85); max-width: 230px; margin: 0 auto; }
.hub__center::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(22,75,59,0.28); }
.hub__nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub__node { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px 11px 34px; font-size: 0.85rem; color: var(--muted); min-width: 0; }
.hub__node strong { display: block; color: var(--forest); font-family: var(--font-head); font-size: 0.88rem; }
.hub__dot { position: absolute; left: 14px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 3px rgba(47,128,100,0.15); }

/* -------------------------------- checklist ------------------------------ */
.checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.checkcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.checkcard__title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--emerald); margin: 0 0 10px; }
.checkcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checkcard__list li { display: flex; gap: 9px; font-size: 0.87rem; align-items: flex-start; }
.checkcard__box { flex: none; width: 18px; height: 18px; border-radius: 5px; background: #E4EFE7; color: #235C41; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

/* ------------------------------ photo gallery ---------------------------- */
.gtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.gtab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--forest); text-decoration: none; font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; }
.gtab:hover { border-color: var(--line-strong); background: var(--warm-2); }
.gtab.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
.gtab__n { font-size: 0.72rem; opacity: 0.7; }
.gallery--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.gallery__figure .gallery__item { display: block; width: 100%; flex: none; aspect-ratio: 4 / 3; }
.gallery__figure .gallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* phase-02 caption: a real figcaption under the photo (the old rule below it was an overlay) */
.gallery__figure .gallery__cap { position: static; left: auto; right: auto; bottom: auto; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 4px 8px; padding: 7px 2px 0; font-size: 0.75rem; color: var(--muted); background: none; }
.gallery__title { color: var(--ink); }
.gallery__credit { font-style: italic; }
.gallery__dl { color: var(--emerald); font-weight: 600; text-decoration: none; }
.gallery__dl:hover { text-decoration: underline; }
.gallery__note { margin-top: 22px; font-size: 0.8rem; color: var(--muted); }

/* -------------------------------- zoom bar ------------------------------- */
.zoom__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: 14px; max-width: 90vw; }
.zoom__cap { margin: 0; }
.zoom__credit { margin: 0; color: rgba(255,255,255,0.56); font-size: 0.78rem; font-style: italic; }
.zoom__acts { display: flex; gap: 8px; }
.zoom__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; font: inherit; font-size: 0.8rem; text-decoration: none; cursor: pointer; }
.zoom__btn:hover { background: rgba(255,255,255,0.22); }

/* ------------------------------ empty attachments ------------------------ */
.attach__empty { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--sand-soft); }
.attach__empty p { margin: 0; font-size: 0.9rem; color: #6B5B44; }
.attach__ico { flex: none; width: 46px; height: 54px; border-radius: 8px; background: linear-gradient(160deg, #F3DED5, #E9C9BB); color: #8C3B2A; font-family: var(--font-head); font-size: 0.64rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(140,59,42,0.16); }

/* ---------------------------- scroll reveal ------------------------------ */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.22,0.68,0.24,1), transform 0.5s cubic-bezier(0.22,0.68,0.24,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------- responsive ----------------------------- */
@media (max-width: 1024px) {
  .hlgrid, .profgrid, .checkgrid, .gallery--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub { grid-template-columns: minmax(0, 1fr); }
  .hub__center { max-width: 200px; }
  .wtl__day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wtl__day::before { display: none; }
  .wtl__item::before { display: none; }
  .wtl__date { position: static; }
  /* the table of contents becomes a collapsible panel on small screens */
  .toc__summary { cursor: pointer; }
  .toc__summary::after { content: '▾'; color: var(--emerald); font-size: 0.8rem; transition: transform 0.2s; }
  .toc[open] .toc__summary::after { transform: rotate(180deg); }
  .toc nav { padding-top: 0; }
  .toc__list { max-height: none; }
}
@media (max-width: 680px) {
  .hlgrid, .profgrid, .checkgrid, .gallery--lg { grid-template-columns: minmax(0, 1fr); }
  .flow--pill .flow__step { border-radius: var(--r); align-items: flex-start; }
  .profcard { gap: 12px; padding: 15px; }
  .profcard__photo { width: 56px; height: 56px; }
  .attach__empty { flex-direction: column; align-items: flex-start; text-align: left; }
  .gtabs { gap: 6px; }
  .gtab { padding: 7px 11px; font-size: 0.78rem; }
  .zoom__bar { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   PHASE 03 — digital SOP, operational management & conservation maps
   ========================================================================== */

/* ------------------------------- SOP header ------------------------------ */
.sophead { display: flex; flex-direction: column; gap: 12px; }
.sophead__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sophead__dest { font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.sophead__note { margin: 0; font-size: 0.82rem; color: #8A5A16; background: #FDF6E7; border: 1px solid #EEDFBE; border-radius: var(--r-sm); padding: 8px 12px; }
.subhead-in { font-size: 0.95rem; margin: 1.2em 0 0.4em; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.06em; }
.equip { margin-top: 18px; }

/* ---------------------------- typed flowchart ---------------------------- */
.chart__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.chart__node { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 0 0 26px 0; }
.chart__node:last-child { padding-bottom: 0; }
.chart__badge { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 0.9rem; color: #fff; background: var(--emerald); z-index: 1; }
.chart__body { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--emerald);
  border-radius: var(--r); padding: 12px 16px; box-shadow: var(--shadow-sm); }
.chart__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.chart__step { font-family: var(--font-head); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: var(--emerald); }
.chart__title { font-family: var(--font-head); font-size: 0.95rem; color: var(--forest); flex: 1; min-width: 0; }
.chart__type { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; padding: 2px 7px; border-radius: 999px; background: var(--warm-2); color: var(--muted); }
.chart__detail { margin: 6px 0 0; font-size: 0.87rem; color: var(--muted); }
.chart__branch { display: block; font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--forest); }
.chart__pic { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
.chart__pic span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); margin-right: 4px; }
.chart__arrow { position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(47,128,100,0.5), rgba(47,128,100,0.12)); }
.chart__arrow::after { content: ''; position: absolute; left: -3px; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid rgba(47,128,100,0.45); }
/* node types */
.chart__node--start .chart__badge { background: var(--forest); }
.chart__node--start .chart__body { border-left-color: var(--forest); background: linear-gradient(180deg, rgba(22,75,59,0.05), #fff); }
.chart__node--end .chart__badge { background: #0E3529; }
.chart__node--end .chart__body { border-left-color: #0E3529; background: linear-gradient(180deg, rgba(14,53,41,0.06), #fff); }
.chart__node--decision .chart__badge { background: var(--sea); border-radius: 50%; }
.chart__node--decision .chart__body { border-left-color: var(--sea); background: linear-gradient(180deg, rgba(40,123,145,0.06), #fff); }
.chart__node--decision .chart__type { background: var(--sea-soft); color: #1C5E71; }
.chart__node--document .chart__badge { background: #A9743F; border-radius: 6px; }
.chart__node--document .chart__body { border-left-color: #C08A52; }
.chart__node--document .chart__type { background: #F3E6D6; color: #7A4B18; }
.chart__node--warning .chart__badge { background: #B5462F; }
.chart__node--warning .chart__body { border-left-color: #C4553C; background: linear-gradient(180deg, rgba(181,70,47,0.06), #fff); }
.chart__node--warning .chart__type { background: #FBEDE9; color: #9B3B2E; }

/* --------------------------- map viewer (image) -------------------------- */
.blk--mapview { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; box-shadow: var(--shadow-sm); }
.mapview__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mapview__meta { min-width: 0; }
.mapview__cap { display: block; font-family: var(--font-head); font-size: 0.92rem; color: var(--forest); }
.mapview__sub { font-size: 0.76rem; color: var(--muted); }
.mapview__ctl { display: flex; gap: 6px; flex-wrap: wrap; }
.mapbtn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-strong); background: #fff; color: var(--forest);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mapbtn:hover { background: var(--warm-2); }
.mapview__stage { position: relative; overflow: hidden; background:
  repeating-conic-gradient(from 0deg, #F2F5F0 0% 25%, #E8EDE6 0% 50%) 50% / 24px 24px;
  aspect-ratio: 4 / 3; max-height: 72vh; cursor: grab; touch-action: pan-y; }
.mapview__stage.is-dragging { cursor: grabbing; }
.mapview__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; user-select: none; }
.mapview__hint { position: absolute; left: 12px; bottom: 12px; background: rgba(11,42,33,0.74); color: #fff; font-size: 0.7rem;
  padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.mapview.is-zoomed .mapview__hint { display: none; }
.mapview__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: #FAFBF8; }
.mapview__note { font-size: 0.74rem; color: var(--muted); }
.mapview:fullscreen { background: #0B2A21; border-radius: 0; display: flex; flex-direction: column; }
.mapview:fullscreen .mapview__stage { flex: 1; max-height: none; aspect-ratio: auto; }
.mapview:fullscreen .mapview__bar, .mapview:fullscreen .mapview__foot { background: #fff; }

/* ------------------------------ zone cards ------------------------------- */
.zonegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zonecard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 16px 20px; box-shadow: var(--shadow-sm); min-width: 0; overflow: clip; }
.zonecard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--zone, var(--emerald)); }
.zonecard__code { font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: var(--emerald); }
.zonecard__name { font-size: 0.98rem; margin: 2px 0 6px; }
.zonecard__fn { font-size: 0.86rem; color: var(--muted); margin: 0; }
.zonecard__status { margin: 8px 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8A5A16; }

/* -------------------------------- legend --------------------------------- */
.legendgrid { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); overflow: clip; background: #fff; }
.legendrow { display: grid; grid-template-columns: 26px 180px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.legendrow:last-child { border-bottom: 0; }
.legendrow__swatch { width: 22px; height: 22px; border-radius: 6px; background: var(--emerald); border: 1px solid rgba(0,0,0,0.12); }
.legendrow__zone { font-family: var(--font-head); font-weight: 700; color: var(--forest); }
.legendrow__fn { color: var(--muted); }

/* ------------------------------- services -------------------------------- */
.svcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svccard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.svccard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.svccard__name { font-size: 0.96rem; margin: 0; }
.svccard__text { font-size: 0.85rem; color: var(--muted); margin: 8px 0 0; }
.svccard__pic { margin: 8px 0 0; font-size: 0.76rem; color: var(--muted); }
.svccard__pic span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); margin-right: 4px; }

/* --------------------------- conservation rules -------------------------- */
.rulesbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FDF6E7; border: 1px solid #EEDFBE; border-radius: var(--r); padding: 12px 16px; }
.rulesbar__note { font-size: 0.84rem; color: #7A5A16; }
.rulegroup { margin-top: 26px; }
.rulegroup__code { display: inline-block; margin-right: 10px; font-family: var(--font-head); font-size: 0.8rem; font-weight: 800; color: #fff; background: var(--emerald); border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.rulelist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ruleitem { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--shadow-sm); }
.ruleitem__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ruleitem__head strong { font-family: var(--font-head); font-size: 0.96rem; color: var(--forest); }
.ruleitem__text { font-size: 0.88rem; color: var(--muted); margin: 6px 0 0; }
.ruleitem__facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0; }
.ruleitem__facts div { display: flex; gap: 6px; font-size: 0.76rem; }
.ruleitem__facts dt { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.64rem; padding-top: 2px; }
.ruleitem__facts dd { margin: 0; color: var(--ink); }
.rulegroup__empty { font-size: 0.86rem; }

/* --------------------------- verification table -------------------------- */
table.verify { min-width: 980px; }
table.verify td, table.verify th { font-size: 0.82rem; vertical-align: top; }
table.verify td:first-child { font-weight: 600; color: var(--forest); }
table.resp { width: 100%; }
.refpoints { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0; font-size: 0.86rem; color: var(--muted); }
.refpoints strong { color: var(--forest); }

/* ------------------------ destination hub (SOP home) --------------------- */
.desthub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.destcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: clip; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.destcard__media { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--forest-deep); }
.destcard__media img { width: 100%; height: 100%; object-fit: cover; }
.destcard__overlay { position: absolute; inset: auto 0 0 0; padding: 22px 24px; background: linear-gradient(0deg, rgba(9,38,29,0.92), rgba(9,38,29,0.05)); }
.destcard__kicker { display: block; font-family: var(--font-head); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9ED3B8; }
.destcard__title { color: #fff; font-size: 1.35rem; margin: 4px 0 4px; }
.destcard__sub { color: rgba(255,255,255,0.82); font-size: 0.86rem; margin: 0; }
.destcard__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.destcard__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.destlink { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--warm); text-decoration: none; color: var(--forest); min-width: 0; transition: border-color .16s, background .16s; }
.destlink:hover { border-color: var(--line-strong); background: #fff; }
.destlink__label { font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; }
.destlink__meta { font-size: 0.74rem; color: var(--muted); }
.destcard__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }

/* ------------------------------ SOP catalog ------------------------------ */
.catbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.catbar__label { font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.sopcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sopcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sopcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sopcard__num { font-family: var(--font-head); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; color: var(--emerald); background: var(--warm-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 6px; }
.sopcard__title { font-size: 1.02rem; margin: 0; }
.sopcard__title a { color: var(--forest); text-decoration: none; }
.sopcard__title a:hover { text-decoration: underline; }
.sopcard__text { font-size: 0.86rem; color: var(--muted); margin: 0; }
.sopcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.76rem; color: var(--muted); }
.sopcard__foot { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* -------------------------------- responsive ----------------------------- */
@media (max-width: 1024px) {
  .zonegrid, .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sopcards { grid-template-columns: minmax(0, 1fr); }
  .desthub { grid-template-columns: minmax(0, 1fr); }
  .mapview__stage { aspect-ratio: 4 / 3; }
}
@media (max-width: 680px) {
  .zonegrid, .svcgrid { grid-template-columns: minmax(0, 1fr); }
  .legendrow { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
  .legendrow__fn { grid-column: 2; }
  .mapbtn { width: 38px; height: 38px; }
  .mapview__stage { aspect-ratio: 3 / 4; max-height: 60vh; }
  .destcard__links { grid-template-columns: minmax(0, 1fr); }
  .chart__badge { width: 30px; height: 30px; border-radius: 8px; }
  .chart__arrow { left: 14px; }
  .rulesbar { flex-direction: column; align-items: flex-start; }
  .mapview__bar { flex-direction: column; align-items: flex-start; }
}

/* zone cards: optional location line + board tagline (Phase 04) */
.zonecard__loc { margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8A7B63; }
.board-tagline { margin: 18px 0 0; padding: 14px 18px; border-left: 3px solid var(--emerald); background: var(--warm-2);
  font-family: var(--font-head); font-size: 1.02rem; font-style: italic; color: var(--forest); border-radius: 0 var(--r) var(--r) 0; }

/* ==========================================================================
   PHASE 04 (FINAL) — financial governance module
   ========================================================================== */

/* ------------------------------ hub cards -------------------------------- */
.fincards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fincard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fincard__head { display: flex; flex-direction: column; gap: 6px; }
.fincard__head h3 { font-size: 1.02rem; margin: 0; }
.fincard__note { margin: 0; font-size: 0.82rem; color: var(--muted); }
.fincard__bars { display: flex; flex-direction: column; gap: 8px; }
.finlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.finlink { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; min-width: 0; transition: border-color .16s, box-shadow .16s, transform .16s; }
.finlink:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.finlink__title { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--forest); }
.finlink__note { font-size: 0.78rem; color: var(--muted); }

/* -------------------------------- charts --------------------------------- */
.finchart__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.donut { position: relative; margin: 0; max-width: 240px; }
.donut svg { width: 100%; height: auto; transform: rotate(0deg); display: block; }
.donut__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--forest); pointer-events: none; }
.donut--sm { max-width: 150px; }
.donut--sm .donut__center { font-size: 0.92rem; }
.finchart__bars, .scenario__bars { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.chartbar { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 2.4fr) 52px; gap: 12px; align-items: center; min-width: 0; }
.chartbar__label { font-size: 0.82rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.chartbar__track { height: 10px; border-radius: 999px; background: var(--warm-2); border: 1px solid var(--line); overflow: clip; }
.chartbar__fill { display: block; height: 100%; border-radius: 999px; }
.chartbar__value { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; color: var(--forest); text-align: right; }

/* ---------------------------- scenario compare --------------------------- */
.scenario__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.scenario__tab { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--forest); font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.scenario__tab:hover { background: var(--warm-2); }
.scenario__tab.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
.scenario__panel { display: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.scenario__panel.is-active { display: block; }
.scenario__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.scenario__name { font-size: 1.06rem; margin: 0 0 4px; }
.scenario__note { margin: 0; font-size: 0.84rem; color: var(--muted); }
.scenario__body { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 20px; }
.scenario__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.scenario__table th, .scenario__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.scenario__table th { font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.scenario__table tfoot th, .scenario__table tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }

/* ------------------------------ income flow ------------------------------ */
.ifl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ifl__step { display: flex; gap: 14px; align-items: flex-start; padding: 0 0 18px 0; position: relative; }
.ifl__step::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(47,128,100,.45), rgba(47,128,100,.1)); }
.ifl__step:last-child { padding-bottom: 0; }
.ifl__step:last-child::before { display: none; }
.ifl__num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 0.78rem; font-weight: 800; z-index: 1; }
.ifl__step--document .ifl__num { background: #A9743F; border-radius: 8px; }
.ifl__step--decision .ifl__num { background: var(--sea); }
.ifl__step--start .ifl__num { background: #0E3529; }
.ifl__step--end .ifl__num { background: #0E3529; }
.ifl__body { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; flex: 1; }
.ifl__body strong { font-family: var(--font-head); font-size: 0.92rem; color: var(--forest); }
.ifl__body span { font-size: 0.84rem; color: var(--muted); }
.formula { margin-top: 18px; background: var(--forest-deep); border-radius: var(--r); padding: 16px 20px; }
.formula__label { display: block; font-family: var(--font-head); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9ED3B8; margin-bottom: 8px; }
.formula__body { margin: 0; font-family: var(--mono, ui-monospace), monospace; font-size: 0.84rem; line-height: 1.7; color: #EAF4EE; white-space: pre-wrap; }

/* ------------------------------- simulator ------------------------------- */
.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.sim__form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sim__field { display: flex; flex-direction: column; gap: 4px; }
.sim__field span { font-family: var(--font-head); font-size: 0.76rem; font-weight: 700; color: var(--forest); }
.sim__field input, .sim__field select { font: inherit; font-size: 0.9rem; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; width: 100%; min-width: 0; }
.sim__check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8rem; color: var(--muted); }
.sim__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sim__out { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sim__hint { color: var(--muted); font-size: 0.86rem; }
.sim__kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sim__kpi div { background: var(--warm-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.sim__kpi span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.sim__kpi strong { font-family: var(--font-head); font-size: 1.02rem; color: var(--forest); }
.sim__kpi .is-neg strong { color: #9B3B2E; }
.sim__result { border-radius: var(--r-sm); padding: 12px 14px; font-size: 0.88rem; }
.sim__result--ok { background: #E4EFE7; color: #235C41; border: 1px solid #CBE1D2; }
.sim__result--neg { background: #FBEDE9; color: #9B3B2E; border: 1px solid #EFD3C5; }
.sim__label { margin: 14px 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: #8A5A16; background: #FDF6E7; border: 1px solid #EEDFBE; border-radius: var(--r-sm); padding: 8px 12px; display: inline-block; }
.sim__warn { margin-top: 12px; border-radius: var(--r-sm); padding: 12px 16px; background: #FDF6E7; border: 1px solid #EEDFBE; color: #7A5A16; font-size: 0.85rem; }
.sim__warn strong { display: block; font-family: var(--font-head); margin-bottom: 4px; }

/* -------------------------------- network -------------------------------- */
.net { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.8fr); gap: 26px; align-items: center; background: radial-gradient(circle at 20% 50%, rgba(47,128,100,.1), transparent 62%), var(--warm-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.net__center { position: relative; text-align: center; background: linear-gradient(140deg, var(--forest), var(--emerald)); color: #fff; border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 22px; font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; max-width: 220px; margin: 0 auto; box-shadow: 0 18px 38px -22px rgba(22,75,59,.85); }
.net__center::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(22,75,59,.28); }
.net__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.net__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 13px; min-width: 0; }
.net__item strong { display: block; font-family: var(--font-head); font-size: 0.86rem; color: var(--forest); }
.net__rel { display: block; font-size: 0.72rem; color: var(--emerald); font-weight: 600; }
.net__note { display: block; font-size: 0.76rem; color: var(--muted); }

/* -------------------------------- registers ------------------------------ */
table.register, table.rkat { min-width: 900px; }
table.register td, table.register th, table.rkat td, table.rkat th { font-size: 0.82rem; vertical-align: top; }
table.rkat td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rkat tfoot th, table.rkat tfoot td { border-top: 2px solid var(--line-strong); background: var(--warm-2); }
table.assessment { min-width: 900px; }
table.assessment td { font-size: 0.82rem; }

/* -------------------------------- mind map ------------------------------- */
.mm { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.mm__root { text-align: center; background: linear-gradient(140deg, var(--forest), var(--emerald)); color: #fff; border-radius: 999px; padding: 12px 22px; font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; width: fit-content; margin: 0 auto 22px; }
.mm__branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mm__branch { border: 1px solid var(--line); border-left: 4px solid var(--c, var(--emerald)); border-radius: var(--r); padding: 14px 16px; background: var(--warm); min-width: 0; }
.mm__title { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; margin: 0 0 8px; }
.mm__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--emerald)); flex: none; }
.mm__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mm__items li { font-size: 0.82rem; color: var(--muted); padding-left: 12px; position: relative; }
.mm__items li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--emerald)); opacity: .6; }

/* ------------------------------ UMKM banner ------------------------------ */
.statusbar--umkm { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.umkm__value { display: block; font-family: var(--font-head); font-size: 1.2rem; color: var(--forest); }

/* -------------------------------- responsive ----------------------------- */
@media (max-width: 1024px) {
  .fincards, .finlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finchart__grid { grid-template-columns: 180px minmax(0, 1fr); }
  .sim { grid-template-columns: minmax(0, 1fr); }
  .net { grid-template-columns: minmax(0, 1fr); }
  .net__center { max-width: 180px; }
  .mm__branches { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .fincards, .finlinks { grid-template-columns: minmax(0, 1fr); }
  .finchart__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .donut { max-width: 180px; margin: 0 auto; }
  .chartbar { grid-template-columns: minmax(0, 1fr) 46px; grid-template-areas: 'label value' 'track track'; row-gap: 4px; }
  .chartbar__label { grid-area: label; }
  .chartbar__value { grid-area: value; }
  .chartbar__track { grid-area: track; }
  .scenario__body { grid-template-columns: minmax(0, 1fr); }
  .donut--sm { margin: 0 auto; }
  .net__list { grid-template-columns: minmax(0, 1fr); }
  .sim__kpi { grid-template-columns: minmax(0, 1fr); }
  .sim { padding: 16px; }
  .mm { padding: 16px; }
}
@media print {
  .scenario__panel { display: block !important; page-break-inside: avoid; }
  .scenario__tabs, .sim__actions, .finlinks { display: none !important; }
}

/* scenario table must never widen the page */
.scenario__scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.scenario__table { min-width: 420px; }
.scenario__head .chip, .fincard__head .chip, .scenario__panel .chip { white-space: normal; max-width: 100%; }
@media (max-width: 680px) {
  .scenario__table { min-width: 340px; font-size: 0.8rem; }
  .scenario__head .chip { white-space: normal; text-align: left; }
}

/* ==========================================================================
   VISUAL REVISION — documentation photography
   ========================================================================== */

/* ------------------------------ hero photo ------------------------------- */
.hero { height: clamp(520px, 78vh, 880px); min-height: 0; align-items: flex-end; }
.hero__bg img { object-fit: cover; }
.hero__veil {
  background:
    linear-gradient(180deg, rgba(9, 38, 29, 0.35) 0%, rgba(9, 38, 29, calc(var(--hero-overlay, 45) * 0.01 * 0.6)) 38%, rgba(9, 38, 29, 0.86) 100%),
    linear-gradient(90deg, rgba(9, 38, 29, calc(var(--hero-overlay, 45) * 0.012)) 0%, rgba(9, 38, 29, 0.05) 62%);
}
.hero__line { margin: 14px 0 0; font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); }
.hero__line span { opacity: 0.5; margin: 0 6px; }
.hero__meta { border-top: 0; padding-top: 0; margin-top: 4px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.62); }
.hero__in { padding-bottom: clamp(34px, 5vw, 58px); }

/* -------------------------------- figures -------------------------------- */
.photo { margin: 0; position: relative; min-width: 0; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: 0.78rem; color: var(--muted); }
.photo__text { color: var(--ink); }
.photo__credit { font-style: italic; }

/* about: photo replaces the illustration */
.about__photo { border-radius: var(--r-lg); overflow: clip; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--warm-2); }
.about__photo img { aspect-ratio: 4 / 3; }
.about__photo .photo__cap { padding: 8px 12px 0; }

/* ------------------------------ photo bands ------------------------------ */
.pband { border-top: 1px solid var(--line); }
.pband__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.pband__grid.is-single { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pband__grid.is-pair { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pband__photos { display: grid; gap: 14px; min-width: 0; }
.pband__grid.is-pair .pband__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.pband__grid.is-grid .pband__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo--band { border-radius: var(--r-lg); overflow: clip; background: var(--warm-2); border: 1px solid var(--line); }
.photo--band img { aspect-ratio: 3 / 2; }
.pband__grid.is-pair .photo--band:last-child img { aspect-ratio: 3 / 2; }
.pband__side { min-width: 0; }
.pband__title { font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 6px 0 10px; }
.pband__text { color: var(--muted); font-size: 0.98rem; margin: 0 0 14px; max-width: 52ch; }
.pband__more { margin-top: 4px; }
.pband--tint { background: var(--warm-2); }
.pband--sand { background: var(--sand-soft); }

/* -------------------------- gallery masonry grid ------------------------- */
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mgrid__item { position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: clip; background: var(--warm-2); cursor: zoom-in; min-width: 0; aspect-ratio: 4 / 3; }
.mgrid__item--wide { grid-column: span 2; aspect-ratio: 8 / 5; }
.mgrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.mgrid__item:hover img { transform: scale(1.04); }
.mgrid--gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------- closing ------------------------------- */
.closing { position: relative; overflow: clip; background: var(--forest-deep); color: #fff; }
.closing__bg { position: absolute; inset: 0; }
.closing__bg .photo, .closing__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing__bg img { object-fit: cover; opacity: 0.55; }
.closing__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 38, 29, 0.92) 0%, rgba(9, 38, 29, 0.55) 60%, rgba(9, 38, 29, 0.35) 100%); }
.closing__in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding-top: clamp(46px, 7vw, 90px); padding-bottom: clamp(46px, 7vw, 90px); flex-wrap: wrap; }
.closing__title { color: #fff; margin: 0 0 8px; font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.closing__text { margin: 0; color: rgba(255, 255, 255, 0.8); max-width: 60ch; font-size: 0.95rem; }
.closing .photo__cap { display: none; }
.closing .btn--primary { background: #fff; color: var(--forest); }

/* ------------------------- page photo bands ------------------------------ */
.pgband { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.pgband--banner { margin-top: -14px; }
.pgband__photos { display: grid; gap: 14px; }
.pgband__photos.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo--page { border-radius: var(--r-lg); overflow: clip; border: 1px solid var(--line); background: var(--warm-2); }
.photo--page img { aspect-ratio: 21 / 9; }
.pgband + .pg__grid { padding-top: clamp(22px, 3vw, 34px); }

/* -------------------------------- lightbox ------------------------------- */
.lb { position: fixed; inset: 0; z-index: 300; background: rgba(6, 24, 18, 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3vh 3vw 0; }
.lb__img { max-width: 94vw; max-height: 80vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.lb__close { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb__nav:hover, .lb__close:hover { background: rgba(255, 255, 255, 0.24); }
.lb__nav--prev { left: 14px; }
.lb__nav--next { right: 14px; }
.lb__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 14px 16px 20px; color: rgba(255, 255, 255, 0.86); font-size: 0.84rem; max-width: 92vw; text-align: center; }
.lb__count { font-family: var(--font-head); font-weight: 700; color: #9ED3B8; }
.lb__credit { font-style: italic; color: rgba(255, 255, 255, 0.56); }
.lb__dl, .lb__share { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 0.8rem; text-decoration: none; cursor: pointer; }
.lb__dl:hover, .lb__share:hover { background: rgba(255, 255, 255, 0.22); }

/* --------------------------- broken image fallback ----------------------- */
.img-failed { position: relative; background: linear-gradient(135deg, var(--warm-2), var(--sand-soft)); }
.img-failed img { opacity: 0; }
.img-failed__note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; text-align: center;
  font-family: var(--font-head); font-size: 0.78rem; color: #7A6A55; }
.hero.img-failed .img-failed__note { display: none; }

/* -------------------------------- responsive ----------------------------- */
@media (max-width: 1024px) {
  .pband__grid, .pband__grid.is-single, .pband__grid.is-pair { grid-template-columns: minmax(0, 1fr); }
  .pband__side { order: -1; }
  .mgrid, .mgrid--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .hero { height: clamp(440px, 72vh, 620px); }
  .hero__line { font-size: 0.76rem; }
  .hero__meta { display: none; }
  .pband__grid.is-pair .pband__photos, .pband__grid.is-grid .pband__photos { grid-template-columns: minmax(0, 1fr); }
  .mgrid, .mgrid--gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mgrid__item--wide { grid-column: span 2; }
  .photo--page img { aspect-ratio: 16 / 9; }
  .pgband { padding: 0 18px; }
  .pgband__photos.is-pair { grid-template-columns: minmax(0, 1fr); }
  .lb__nav { width: 42px; height: 42px; font-size: 1.3rem; }
  .lb__img { max-height: 70vh; }
  .closing__in { flex-direction: column; align-items: flex-start; }
  .closing .btn--primary { width: 100%; }
}