:root {
  --md-ink: #142b29;
  --md-paper: #fffdf7;
  --md-ground: #edf3ed;
  --md-accent: #17735d;
  --md-accent-2: #bd6d35;
  --md-line: rgba(20, 60, 53, .2);
  --md-dark: #102f2a;
}

body[data-country="malaysia"][data-depth-family="capital-lines"] { --md-ink:#17243c; --md-paper:#fff9ec; --md-ground:#e8edf4; --md-accent:#bd3359; --md-accent-2:#d0a03c; --md-line:rgba(27,55,90,.22); --md-dark:#142842; }
body[data-country="malaysia"][data-depth-family="five-foot-way"] { --md-ink:#262241; --md-paper:#fffaf2; --md-ground:#eee9df; --md-accent:#d45746; --md-accent-2:#14776c; --md-line:rgba(60,48,79,.21); --md-dark:#29234a; }
body[data-country="malaysia"][data-depth-family="river-ledger"] { --md-ink:#38251f; --md-paper:#fff9ec; --md-ground:#f2e5d3; --md-accent:#b84d38; --md-accent-2:#177b82; --md-line:rgba(104,63,43,.22); --md-dark:#4b2923; }
body[data-country="malaysia"][data-depth-family="limestone-section"] { --md-ink:#27322f; --md-paper:#fcfff1; --md-ground:#e8edde; --md-accent:#607826; --md-accent-2:#a65844; --md-line:rgba(60,76,65,.22); --md-dark:#2d3937; }
body[data-country="malaysia"][data-depth-family="geoforest-compass"] { --md-ink:#123d40; --md-paper:#f6fffa; --md-ground:#dcefeb; --md-accent:#087d75; --md-accent-2:#d68831; --md-line:rgba(10,89,85,.22); --md-dark:#073e42; }
body[data-country="malaysia"][data-depth-family="contour-book"] { --md-ink:#303622; --md-paper:#fffdf0; --md-ground:#e9ecd9; --md-accent:#6c7d2d; --md-accent-2:#745273; --md-line:rgba(70,83,48,.23); --md-dark:#313b27; }
body[data-country="malaysia"][data-depth-family="river-canopy-transect"] { --md-ink:#163629; --md-paper:#fbfff1; --md-ground:#dcead4; --md-accent:#317842; --md-accent-2:#c28a2a; --md-line:rgba(35,86,55,.23); --md-dark:#123724; }
body[data-country="malaysia"][data-depth-family="seasonal-semaphore"] { --md-ink:#17334c; --md-paper:#fff9ee; --md-ground:#e0eef0; --md-accent:#d75f48; --md-accent-2:#16738b; --md-line:rgba(31,83,103,.22); --md-dark:#11394e; }
body[data-country="malaysia"][data-depth-family="sunset-harbour"] { --md-ink:#253148; --md-paper:#fff9ef; --md-ground:#ece7ed; --md-accent:#e16c42; --md-accent-2:#426e92; --md-line:rgba(57,65,98,.22); --md-dark:#232d4d; }
body[data-country="malaysia"][data-depth-family="granite-ledger"] { --md-ink:#2c3236; --md-paper:#f8fbf8; --md-ground:#e2e9e7; --md-accent:#a4443e; --md-accent-2:#487579; --md-line:rgba(61,72,77,.24); --md-dark:#2a3337; }
body[data-country="malaysia"][data-depth-family="conservation-log"] { --md-ink:#243527; --md-paper:#fffbee; --md-ground:#e6ead8; --md-accent:#4d7634; --md-accent-2:#b7772f; --md-line:rgba(61,79,49,.23); --md-dark:#273c2a; }
body[data-country="malaysia"][data-depth-family="reef-permit"] { --md-ink:#123944; --md-paper:#f4fffd; --md-ground:#d9edef; --md-accent:#00858c; --md-accent-2:#db6a53; --md-line:rgba(8,93,103,.22); --md-dark:#073b47; }
body[data-country="malaysia"][data-depth-family="river-coast-cabinet"] { --md-ink:#19392f; --md-paper:#fffaf0; --md-ground:#e2ece2; --md-accent:#1f7358; --md-accent-2:#b96e3b; --md-line:rgba(40,91,70,.23); --md-dark:#143a31; }
body[data-country="malaysia"][data-depth-family="karst-underworld"] { --md-ink:#202925; --md-paper:#faf8ec; --md-ground:#e1e3d9; --md-accent:#67773c; --md-accent-2:#b57e31; --md-line:rgba(53,68,56,.26); --md-dark:#18231f; }

body[data-depth-family] {
  color: var(--md-ink);
  background:
    radial-gradient(circle at 84% 7%, color-mix(in srgb, var(--md-accent) 12%, transparent), transparent 24rem),
    linear-gradient(180deg, var(--md-ground), #f8faf5 46rem, var(--md-paper));
}

.md-guide { overflow: clip; }
.md-guide h1, .md-guide h2, .md-guide h3, .md-hub-section h2, .md-hub-section h3 { text-wrap: balance; }
.md-hero {
  position: relative;
  min-height: 38rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .82fr);
  overflow: hidden;
  color: #fffdf4;
  background: var(--md-dark);
  border: 1px solid color-mix(in srgb, var(--md-accent-2) 65%, transparent);
  border-radius: 2.4rem .5rem 2.4rem .5rem;
  box-shadow: 0 2.2rem 5rem color-mix(in srgb, var(--md-dark) 24%, transparent);
  isolation: isolate;
}
.md-hero::before {
  content:"";
  position:absolute;
  inset:0 46% 0 0;
  z-index:-1;
  opacity:.22;
  background: repeating-linear-gradient(115deg, transparent 0 2.6rem, var(--md-accent-2) 2.7rem 2.82rem);
  mask-image:linear-gradient(90deg,#000,transparent);
}
.md-hero-copy { align-self:center; padding:clamp(2rem,5vw,5.2rem); }
.md-breadcrumb { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:2rem; color:rgba(255,255,255,.7); font-size:.77rem; font-weight:750; }
.md-breadcrumb a:hover { color:#fff; }
.md-breadcrumb strong { color:color-mix(in srgb, var(--md-accent-2) 65%, #fff); }
.md-kicker, .md-section-label { display:block; color:color-mix(in srgb, var(--md-accent-2) 66%, #fff); font-size:.7rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.md-hero h1 { max-width:13ch; margin:.8rem 0 1.15rem; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.65rem,5.4vw,5.7rem); line-height:.91; letter-spacing:-.055em; }
.md-hero h1 span { display:block; margin-top:.55rem; color:color-mix(in srgb, var(--md-accent-2) 62%, #fff); font-size:.42em; font-style:italic; line-height:1.04; letter-spacing:-.03em; }
.md-hero-copy > p { max-width:43rem; color:rgba(255,255,255,.78); font-size:1.05rem; }
.md-hero .button.primary { color:var(--md-dark); background:color-mix(in srgb, var(--md-accent-2) 55%, #fff); }
.md-hero .button.secondary { color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); }
.md-hero-image { position:relative; min-height:38rem; margin:0; overflow:hidden; }
.md-hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--md-dark),transparent 28%),linear-gradient(0deg,rgba(0,0,0,.38),transparent 38%); pointer-events:none; }
.md-hero-image img { width:100%; height:100%; object-fit:cover; }
.md-hero-image figcaption { position:absolute; z-index:2; right:1.2rem; bottom:1rem; left:1.2rem; color:rgba(255,255,255,.8); font-size:.67rem; text-align:right; }
.md-instrument { position:absolute; z-index:3; top:1.1rem; right:1.1rem; width:7.2rem; min-height:7.2rem; padding:1rem; display:grid; align-content:space-between; color:#fff; border:1px solid rgba(255,255,255,.45); background:rgba(10,25,23,.54); backdrop-filter:blur(10px); }
.md-instrument span, .md-instrument em { font-size:.59rem; font-style:normal; letter-spacing:.12em; text-transform:uppercase; }
.md-instrument strong { font-family:Georgia,serif; font-size:2.1rem; }

.md-decision-strip { margin:1.4rem 0 clamp(3rem,7vw,6rem); display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--md-line); background:var(--md-paper); box-shadow:0 1rem 2.7rem color-mix(in srgb,var(--md-dark) 8%,transparent); }
.md-decision-strip article { min-width:0; padding:1.4rem 1.6rem; border-right:1px solid var(--md-line); }
.md-decision-strip article:last-child { border-right:0; }
.md-decision-strip small { color:var(--md-accent); font-size:.69rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.md-decision-strip p { margin:.5rem 0 0; color:color-mix(in srgb,var(--md-ink) 78%,#fff); font-size:.9rem; line-height:1.6; }

.md-section { margin:clamp(3.5rem,8vw,7.5rem) 0; }
.md-section-head, .md-orientation { display:grid; grid-template-columns:minmax(0,.82fr) minmax(18rem,.48fr); gap:clamp(2rem,7vw,7rem); align-items:end; margin-bottom:2.1rem; }
.md-section-head h2, .md-orientation h2 { max-width:15ch; margin:.5rem 0 0; color:var(--md-dark); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.15rem,4.1vw,4.25rem); line-height:.98; letter-spacing:-.045em; }
.md-section-head > p, .md-orientation aside p { margin:0; color:color-mix(in srgb,var(--md-ink) 68%,#fff); }
.md-section-label { color:var(--md-accent); }
.md-lead { max-width:46rem; margin:1.25rem 0 0; font-size:1.08rem; }
.md-orientation aside { padding:1.5rem 0 1.5rem 1.6rem; border-left:.34rem solid var(--md-accent-2); }
.md-orientation aside small { color:var(--md-accent); font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.md-orientation aside p { margin-top:.6rem; }

.md-route { display:grid; grid-template-columns:repeat(4,1fr); counter-reset:route; }
.md-route-step { position:relative; min-height:19rem; padding:4.5rem 1.4rem 1.5rem; color:#fff; background:var(--md-dark); border-right:1px solid rgba(255,255,255,.16); }
.md-route-step:nth-child(even) { color:var(--md-ink); background:color-mix(in srgb,var(--md-accent-2) 26%,var(--md-paper)); }
.md-route-step > span { position:absolute; top:1rem; right:1rem; color:color-mix(in srgb,var(--md-accent-2) 75%,#fff); font:700 2.4rem/1 Georgia,serif; }
.md-route-step small { color:inherit; opacity:.62; font-size:.64rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.md-route-step h3 { margin:2.6rem 0 .7rem; font-family:Georgia,serif; font-size:1.45rem; line-height:1.05; }
.md-route-step p { margin:0; color:inherit; opacity:.76; font-size:.88rem; }

.md-check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.md-check { position:relative; min-height:15rem; padding:2rem; overflow:hidden; border:1px solid var(--md-line); background:var(--md-paper); box-shadow:0 .8rem 2.4rem color-mix(in srgb,var(--md-dark) 7%,transparent); }
.md-check > span { position:absolute; right:1rem; bottom:-.4rem; color:color-mix(in srgb,var(--md-accent) 12%,transparent); font:700 7rem/1 Georgia,serif; }
.md-check h3 { position:relative; margin:3rem 0 .6rem; color:var(--md-dark); font:700 1.5rem/1.05 Georgia,serif; }
.md-check p { position:relative; margin:0; color:color-mix(in srgb,var(--md-ink) 68%,#fff); }
.md-boundary { margin-top:1rem; display:grid; grid-template-columns:auto minmax(10rem,.3fr) minmax(0,1fr); gap:1rem 1.5rem; align-items:center; padding:1.3rem 1.6rem; color:#fff; background:var(--md-accent); }
.md-boundary small { padding:.35rem .6rem; color:var(--md-dark); background:color-mix(in srgb,var(--md-accent-2) 55%,#fff); font-weight:900; text-transform:uppercase; }
.md-boundary strong { font-family:Georgia,serif; font-size:1.2rem; }
.md-boundary p { margin:0; color:rgba(255,255,255,.82); }

.md-faq .faq-list details { background:var(--md-paper); border-color:var(--md-line); }
.md-related { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.md-related-card { position:relative; min-height:19rem; overflow:hidden; color:#fff; background:var(--md-dark); }
.md-related-card img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.md-related-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,22,20,.94),transparent 70%); }
.md-related-card span { position:absolute; z-index:2; right:1.2rem; bottom:1.1rem; left:1.2rem; display:grid; gap:.25rem; }
.md-related-card small { color:color-mix(in srgb,var(--md-accent-2) 65%,#fff); font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.md-related-card strong { font:700 1.35rem/1.05 Georgia,serif; }
.md-related-card em { color:rgba(255,255,255,.68); font-size:.75rem; font-style:normal; }
.md-related-card:hover img { transform:scale(1.045); }
.md-back { margin-top:1.4rem; color:var(--md-accent); font-weight:850; }

.md-hub-section { position:relative; margin:clamp(3.5rem,7vw,6.5rem) 0; padding:clamp(1.5rem,4vw,3.5rem); color:var(--md-ink); background:color-mix(in srgb,var(--md-paper) 92%,transparent); border:1px solid var(--md-line); box-shadow:0 1.4rem 4rem color-mix(in srgb,var(--md-dark) 9%,transparent); }
.md-hub-heading { display:grid; grid-template-columns:minmax(0,.72fr) minmax(16rem,.45fr); gap:2rem; align-items:end; margin-bottom:2rem; }
.md-hub-heading span { color:var(--md-accent); font-size:.69rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.md-hub-heading h2 { max-width:14ch; margin:.45rem 0 0; color:var(--md-dark); font:700 clamp(2rem,3.8vw,4rem)/.98 Georgia,serif; letter-spacing:-.045em; }
.md-hub-heading p { margin:0; color:color-mix(in srgb,var(--md-ink) 70%,#fff); }
.md-hub-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.md-hub-card { position:relative; grid-column:span 5; min-height:26rem; display:flex; align-items:end; overflow:hidden; color:#fff; background:var(--md-dark); }
.md-hub-card:nth-child(2), .md-hub-card:nth-child(3) { grid-column:span 7; }
.md-hub-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.md-hub-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,25,22,.96),rgba(7,25,22,.05) 76%); }
.md-hub-card > div { position:relative; z-index:2; width:100%; padding:1.5rem; }
.md-hub-card small { color:color-mix(in srgb,var(--md-accent-2) 65%,#fff); font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.md-hub-card h3 { margin:.45rem 0 .65rem; font:700 clamp(1.55rem,2.4vw,2.35rem)/1 Georgia,serif; }
.md-hub-card p { max-width:42rem; margin:0 0 1rem; color:rgba(255,255,255,.72); font-size:.88rem; }
.md-hub-card strong { color:#fff; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.md-hub-number { position:absolute; z-index:3; top:1rem; right:1rem; display:grid; width:3.5rem; height:3.5rem; place-items:center; border:1px solid rgba(255,255,255,.55); background:rgba(8,28,24,.5); font:700 1.25rem Georgia,serif; backdrop-filter:blur(8px); }
.md-hub-card:hover img { transform:scale(1.04); }

/* Instruments alter silhouette and reading rhythm, not only palette. */
body[data-depth-instrument="axis"] .md-hero { border-radius:.25rem; }
body[data-depth-instrument="axis"] .md-hero::before { background:linear-gradient(90deg,transparent 49.6%,var(--md-accent-2) 49.6% 50.4%,transparent 50.4%),repeating-linear-gradient(0deg,transparent 0 4rem,rgba(255,255,255,.2) 4rem 4.08rem); }
body[data-depth-instrument="fold"] .md-hero { grid-template-columns:minmax(20rem,.78fr) minmax(0,1fr); border-radius:0 4rem 0 4rem; }
body[data-depth-instrument="fold"] .md-hero-copy { order:2; }
body[data-depth-instrument="fold"] .md-hero-image { order:1; }
body[data-depth-instrument="ledger"] .md-route { gap:.55rem; padding:.75rem; background:var(--md-dark); }
body[data-depth-instrument="ledger"] .md-route-step { min-height:20rem; border:1px solid rgba(255,255,255,.16); }
body[data-depth-instrument="atlas"] .md-hero { border-radius:50% 50% 1.25rem 1.25rem / 4rem 4rem 1.25rem 1.25rem; }
body[data-depth-instrument="atlas"] .md-check { border-radius:50% 50% .5rem .5rem / 2.3rem 2.3rem .5rem .5rem; }
body[data-depth-instrument="zine"] .md-hero { transform:rotate(-.25deg); border-radius:.4rem; box-shadow:1rem 1rem 0 color-mix(in srgb,var(--md-accent-2) 34%,transparent); }
body[data-depth-instrument="zine"] .md-check:nth-child(2) { transform:translateY(1.5rem) rotate(.55deg); }
body[data-depth-instrument="zine"] .md-related-card:nth-child(2) { transform:rotate(-1deg); }
body[data-depth-instrument="tide"] .md-route-step:nth-child(1), body[data-depth-instrument="tide"] .md-route-step:nth-child(3) { transform:translateY(1.35rem); }
body[data-depth-instrument="tide"] .md-hero { border-radius:4rem .4rem 4rem .4rem; }
body[data-depth-instrument="transect"] .md-route { grid-template-columns:1fr; border-left:.4rem solid var(--md-accent-2); }
body[data-depth-instrument="transect"] .md-route-step { min-height:0; padding:1.5rem 2rem 1.5rem 7rem; border-right:0; border-bottom:1px solid var(--md-line); }
body[data-depth-instrument="transect"] .md-route-step > span { right:auto; left:1.5rem; top:1.25rem; }
body[data-depth-instrument="transect"] .md-route-step h3 { margin:.35rem 0 .55rem; }
body[data-depth-instrument="field"] .md-hero { grid-template-columns:minmax(0,.72fr) minmax(20rem,1fr); border-radius:.3rem; }
body[data-depth-instrument="field"] .md-instrument { border-radius:50%; text-align:center; }
body[data-depth-instrument="strata"] .md-hero::before { inset:0; background:repeating-linear-gradient(0deg,transparent 0 3rem,rgba(255,255,255,.16) 3rem 3.08rem); mask-image:none; }
body[data-depth-instrument="strata"] .md-check:nth-child(2) { margin-top:2rem; }
body[data-depth-instrument="docket"] .md-hero { border:1rem solid var(--md-paper); outline:1px solid var(--md-line); border-radius:0; }
body[data-depth-instrument="docket"] .md-decision-strip article { border-top:.35rem solid var(--md-accent); }

@media (max-width: 900px) {
  .md-hero { min-height:0; grid-template-columns:1fr; }
  .md-hero-copy, body[data-depth-instrument="fold"] .md-hero-copy { order:1; padding:2rem 1.35rem 2.4rem; }
  .md-hero-image, body[data-depth-instrument="fold"] .md-hero-image { order:2; min-height:24rem; }
  .md-instrument { top:auto; right:.8rem; bottom:.8rem; }
  .md-decision-strip, .md-section-head, .md-orientation { grid-template-columns:1fr; }
  .md-decision-strip article { border-right:0; border-bottom:1px solid var(--md-line); }
  .md-decision-strip article:last-child { border-bottom:0; }
  .md-route { grid-template-columns:repeat(2,1fr); }
  .md-check-grid { grid-template-columns:1fr; }
  .md-check { min-height:12rem; }
  .md-boundary { grid-template-columns:1fr; }
  .md-related { grid-template-columns:1fr; }
  .md-related-card { min-height:16rem; }
  .md-hub-heading { grid-template-columns:1fr; }
  .md-hub-card, .md-hub-card:nth-child(2), .md-hub-card:nth-child(3) { grid-column:span 6; }
  body[data-depth-instrument="fold"] .md-hero, body[data-depth-instrument="field"] .md-hero { grid-template-columns:1fr; }
  body[data-depth-instrument="zine"] .md-hero { transform:none; box-shadow:none; }
}

@media (max-width: 620px) {
  .md-hero { border-radius:1.4rem .25rem 1.4rem .25rem; }
  .md-hero h1 { font-size:clamp(2.35rem,13vw,4rem); }
  .md-hero-image { min-height:19rem; }
  .md-instrument { width:5.6rem; min-height:5.6rem; padding:.7rem; }
  .md-instrument strong { font-size:1.5rem; }
  .md-route { grid-template-columns:1fr; }
  .md-route-step { min-height:14rem; }
  .md-hub-section { margin-right:-.35rem; margin-left:-.35rem; padding:1.2rem; }
  .md-hub-grid { display:grid; grid-template-columns:1fr; }
  .md-hub-card, .md-hub-card:nth-child(2), .md-hub-card:nth-child(3) { grid-column:auto; min-height:23rem; }
  .md-hub-card p { font-size:.83rem; }
  body[data-depth-instrument="transect"] .md-route-step { padding:4.8rem 1.2rem 1.3rem; }
  body[data-depth-instrument="transect"] .md-route-step > span { left:1.2rem; }
  body[data-depth-instrument="tide"] .md-route-step:nth-child(1), body[data-depth-instrument="tide"] .md-route-step:nth-child(3), body[data-depth-instrument="strata"] .md-check:nth-child(2), body[data-depth-instrument="zine"] .md-check:nth-child(2) { transform:none; margin-top:0; }
}