/* ==========================================================================
   Sandhya Infocity — Campus Access
   Design system: design-system/tokens/{colors,typography,spacing}.css
   Deep green #16482F · lime rule #97D700 · paper #FDFDFB
   Near-square corners, hairline rules, barely-there shadow.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
    /* Brand greens */
    --green-950: #0A2618;
    --green-900: #103524;
    --green-800: #16482F;
    --green-700: #1D5F3B;
    --green-600: #2C7A43;
    --green-500: #3FA23F;
    --lime-500: #97D700;
    --lime-100: #F2F9DC;

    /* Warm-neutral foundation */
    --n-0:   #FDFDFB;
    --n-50:  #F7F8F4;
    --n-100: #EFF1EA;
    --n-200: #E1E4DA;
    --n-300: #C8CCC0;
    --n-500: #8A9083;
    --n-600: #6B7264;
    --n-700: #4B5245;
    --n-900: #1E231B;

    /* Semantic */
    --paper: var(--n-0);
    --subtle: var(--n-50);
    --card: #FFFFFF;
    --ink: var(--n-900);
    --body: var(--n-700);
    --muted: var(--n-600);
    --line: var(--n-200);
    --line-strong: var(--n-300);
    --link: var(--green-700);
    --on-dark: #F4F7F0;
    --on-dark-muted: #A9BCA8;

    --positive: #2C7A43;
    --warning:  #A97B1E;
    --negative: #A8432F;
    --info:     #3E5C6B;
    --wa:       #128C4A;

    /* Type */
    --f-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --f-body: 'IBM Plex Sans', 'Noto Sans Tamil', 'Helvetica Neue', Arial, sans-serif;
    --f-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
    --tracking-caps: 0.14em;

    /* Space (8px grid) */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    /* Geometry */
    --r-sm: 2px;
    --r-md: 4px;
    --r-pill: 999px;
    --sh-card: 0 1px 2px rgba(20, 35, 24, 0.06);
    --sh-raised: 0 4px 16px rgba(20, 35, 24, 0.10);

    --bar-h: 56px;
    --gutter: 20px;
}

/* --- Tamil ---------------------------------------------------------------
   Tamil has no letter case and its combining marks break apart under wide
   tracking, so the uppercase mono eyebrow treatment is dropped wholesale and
   the display face swaps to one that actually carries the glyphs.
   -------------------------------------------------------------------------- */
html[lang="ta"] {
    --f-display: 'Noto Serif Tamil', 'Source Serif 4', Georgia, serif;
    --f-mono: 'Noto Sans Tamil', 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}
html[lang="ta"] .eyebrow,
html[lang="ta"] .board-state,
html[lang="ta"] .pill,
html[lang="ta"] .doc-meta,
html[lang="ta"] .fact dt,
html[lang="ta"] .sos-label,
html[lang="ta"] .event-when,
html[lang="ta"] .callout .signoff,
html[lang="ta"] .zoom-hint {
    font-family: var(--f-body);
    text-transform: none;
    letter-spacing: 0.005em;
    font-weight: 600;
}
html[lang="ta"] .eyebrow { font-size: 12.5px; }
html[lang="ta"] h1,
html[lang="ta"] h2,
html[lang="ta"] h3 { line-height: 1.3; letter-spacing: 0; }
html[lang="ta"] .hero-copy h1 { font-size: clamp(1.2rem, 5.4vw, 2.125rem); }
html[lang="ta"] .hero-panel h1 { font-size: clamp(1.35rem, 5.9vw, 2.375rem); }
html[lang="ta"] .fact dd { font-size: 19px; letter-spacing: 0; }
html[lang="ta"] .jump a { font-size: 12.5px; padding: 0 8px; }
html[lang="ta"] .jump a::after { left: 8px; right: 8px; }

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    color-scheme: light;
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-h) + 12px);
}

body {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--body);
    background: var(--paper);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--lime-100); color: var(--green-900); }

:focus-visible {
    outline: 2px solid var(--green-700);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; top: -100px; left: 12px; z-index: 200;
    padding: 10px 16px; background: var(--green-800); color: var(--on-dark);
    font-size: 13px; font-weight: 600; border-radius: 0 0 var(--r-md) var(--r-md);
    transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}
@media (max-width: 359px) { :root { --gutter: 14px; } }
.wrap--narrow { max-width: 780px; }

/* --- Sticky bar ----------------------------------------------------------- */
.bar {
    position: sticky; top: 0; z-index: 60;
    height: var(--bar-h);
    background: rgba(253, 253, 251, 0.94);
    border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
    .bar { backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
}
.bar-in {
    height: 100%; display: flex; align-items: center; gap: var(--s4);
    max-width: 1080px; margin: 0 auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.brand { display: flex; align-items: center; min-height: 44px; gap: 9px; flex-shrink: 0; }
.brand-mark {
    width: 28px; height: 28px; border-radius: var(--r-sm);
    object-fit: cover; background: #fff;
}
.brand-name {
    font-family: var(--f-display); font-size: 16px; font-weight: 600;
    color: var(--ink); letter-spacing: -0.01em; white-space: nowrap;
}
/* The section nav is the useful control on a phone, so on narrow screens the
   wordmark is dropped and the language switch shrinks to give it room. */
.lang-short { display: none; }
@media (max-width: 559px) {
    .brand-name { display: none; }
    .bar-in { gap: var(--s3); }
}
@media (max-width: 399px) {
    .brand-mark { width: 26px; height: 26px; }
    .jump a { font-size: 13px; padding: 0 8px; }
    .jump a::after { left: 8px; right: 8px; }
    .jump { mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 10px), transparent 100%); }
    .bar-in { gap: 10px; }
}
/* Compact switch where the full word will not fit. In English that is only the
   very narrow end; in Tamil the nav labels themselves are longer, so it kicks
   in sooner — and a reader already in Tamil does not need it spelled out. */
@media (max-width: 339px) {
    .lang-full { display: none; }
    .lang-short { display: inline; }
    .lang button { font-size: 11.5px; padding: 0 10px; }
}
@media (max-width: 439px) {
    html[lang="ta"] .lang-full { display: none; }
    html[lang="ta"] .lang-short { display: inline; }
    html[lang="ta"] .lang button { font-size: 11.5px; padding: 0 10px; }
    html[lang="ta"] .jump a { padding: 0 7px; }
    html[lang="ta"] .jump a::after { left: 7px; right: 7px; }
}

.jump {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 2px;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 10px;
    font-size: 13.5px; font-weight: 500; color: var(--muted);
    white-space: nowrap; border-radius: var(--r-sm);
    transition: color 0.15s ease;
}
.jump a::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
    height: 2px; background: var(--lime-500); border-radius: 1px;
    transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.jump a:hover { color: var(--ink); }
.jump a.is-active { color: var(--green-800); font-weight: 600; }
.jump a.is-active::after { transform: scaleX(1); }

.lang {
    display: inline-flex; flex-shrink: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden;
}
.lang button {
    min-height: 36px; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--muted);
    transition: background 0.15s ease, color 0.15s ease;
}
.lang button + button { border-left: 1px solid var(--line-strong); }
.lang button[aria-pressed="true"] { background: var(--green-800); color: var(--on-dark); }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: var(--s5); }
.hero-frame {
    position: relative; overflow: hidden;
    border-radius: var(--r-md); background: var(--n-100);
    aspect-ratio: 4 / 3; max-height: min(300px, 62svh);
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(10, 38, 24, 0.30) 0%,
        rgba(10, 38, 24, 0.04) 26%,
        rgba(10, 38, 24, 0.46) 55%,
        rgba(10, 38, 24, 0.80) 78%,
        rgba(10, 38, 24, 0.94) 100%);
}
/* The copy block carries its own darkening so legibility does not depend on
   how many lines the headline runs to in a given language. */
.hero-copy {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: clamp(1.75rem, 9vw, 3rem) var(--s4) var(--s4);
    background: linear-gradient(to bottom, rgba(10, 38, 24, 0) 0%, rgba(10, 38, 24, 0.62) 32%, rgba(10, 38, 24, 0.9) 100%);
}
.hero-copy .eyebrow { color: var(--lime-500); text-shadow: 0 1px 8px rgba(10, 38, 24, 0.8); }

/* Panel hero — no photograph, used where an image would fight the copy */
.hero-panel {
    position: relative; overflow: hidden;
    background: var(--green-800); border-radius: var(--r-md);
    border-top: 2px solid var(--lime-500);
    padding: var(--s7) var(--s4) var(--s6);
}
.hero-panel::after {
    content: ''; position: absolute; right: -60px; top: -70px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(151, 215, 0, 0.18) 0%, rgba(151, 215, 0, 0) 68%);
    pointer-events: none;
}
.hero-panel .eyebrow { color: var(--lime-500); }
.hero-panel h1 {
    font-family: var(--f-display); font-weight: 600; color: #fff;
    font-size: clamp(1.5rem, 6.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.022em; margin-top: 9px;
    text-wrap: balance;
}
.hero-panel p { color: var(--on-dark-muted); font-size: 15px; margin-top: 11px; max-width: 52ch; }
.hero-panel .event-when { margin-top: var(--s4); }
@media (min-width: 720px) { .hero-panel { padding: var(--s8) var(--s7) var(--s7); } }
.hero-copy h1 {
    font-family: var(--f-display); font-weight: 600; color: #fff;
    font-size: clamp(1.3rem, 6.1vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em;
    text-wrap: balance;
    margin-top: 7px; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.hero-copy p {
    color: rgba(244, 247, 240, 0.92); font-size: clamp(0.8rem, 3.3vw, 0.94rem);
    margin-top: 6px; max-width: 46ch; text-wrap: pretty;
}

@media (min-width: 720px) {
    .hero-frame { aspect-ratio: 16 / 9; max-height: min(420px, 72svh); }
    .hero-copy { padding: var(--s6); }
}
@media (min-width: 1000px) {
    .hero-frame { aspect-ratio: 21 / 8; max-height: min(380px, 72svh); }
}

/* --- Status board --------------------------------------------------------- */
.board {
    display: grid; grid-template-columns: 1fr; gap: 0;
    margin-top: var(--s4);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    border-top: 2px solid var(--lime-500);
    overflow: hidden;
}
.board-item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px var(--s4);
}
.board-item + .board-item { border-top: 1px solid var(--line); }
.board-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.board-dot--open { background: var(--positive); box-shadow: 0 0 0 3px rgba(44, 122, 67, 0.14); }
.board-dot--closed { background: var(--negative); box-shadow: 0 0 0 3px rgba(168, 67, 47, 0.13); }
.board-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.board-state {
    margin-left: auto; font-family: var(--f-mono); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.board-state--open { color: var(--positive); }
.board-state--closed { color: var(--negative); }

@media (min-width: 640px) {
    .board { grid-template-columns: repeat(3, 1fr); }
    .board-item + .board-item { border-top: 0; border-left: 1px solid var(--line); }
}

/* --- Sections ------------------------------------------------------------- */
.section { padding-top: var(--s7); }
.section-head { border-top: 2px solid var(--lime-500); padding-top: var(--s3); margin-bottom: var(--s5); }
.eyebrow {
    font-family: var(--f-mono); font-size: clamp(0.6rem, 2.5vw, 0.69rem); font-weight: 500;
    text-transform: uppercase; letter-spacing: clamp(0.08em, 0.5vw, 0.14em); color: var(--muted);
}
.section-head h2 {
    font-family: var(--f-display); font-weight: 600; color: var(--ink);
    font-size: clamp(1.24rem, 4.2vw, 1.875rem); line-height: 1.18; letter-spacing: -0.015em;
    text-wrap: balance;
    margin-top: 5px;
}
.section-head p { font-size: 14.5px; color: var(--muted); margin-top: 7px; max-width: 62ch; text-wrap: pretty; }

/* --- Grid ----------------------------------------------------------------- */
.grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Event card ----------------------------------------------------------- */
.event {
    display: block; position: relative; overflow: hidden;
    margin-top: var(--s6);
    background: var(--green-800); color: var(--on-dark);
    border-radius: var(--r-md); border-top: 2px solid var(--lime-500);
    padding: var(--s5) var(--s4);
    transition: background 0.2s ease, transform 0.18s ease;
}
.event:hover { background: var(--green-900); }
.event:active { transform: scale(0.995); }
.event::after {
    content: ''; position: absolute; right: -46px; bottom: -46px;
    width: 172px; height: 172px; border-radius: 50%;
    background: radial-gradient(circle, rgba(151, 215, 0, 0.16) 0%, rgba(151, 215, 0, 0) 68%);
    pointer-events: none;
}
.event .eyebrow { color: var(--lime-500); }
.event h3 {
    font-family: var(--f-display); font-size: clamp(1.16rem, 4.4vw, 1.7rem); font-weight: 600; text-wrap: balance;
    color: #fff; line-height: 1.18; margin-top: 7px; letter-spacing: -0.015em;
}
.event p { color: var(--on-dark-muted); font-size: 14.5px; margin-top: 8px; max-width: 52ch; }
.event-go {
    display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s4);
    font-size: 13.5px; font-weight: 600; color: var(--lime-500);
}
.event-go svg { width: 15px; height: 15px; stroke: currentColor; }
.event-when {
    display: inline-block; margin-top: var(--s3);
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(244, 247, 240, 0.2);
    border-radius: var(--r-pill); padding: 4px 11px;
}
@media (min-width: 700px) { .event { padding: var(--s6); } }

/* --- Chips (arrive-by filter) --------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--s5); }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 8px 13px; font-size: 13.5px; font-weight: 500;
    color: var(--body); background: var(--card);
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }
.chip:hover { border-color: var(--n-500); }
.chip[aria-pressed="true"] {
    background: var(--green-800); border-color: var(--green-800); color: var(--on-dark);
}
.chip:active { transform: scale(0.97); }

/* --- Gate cards ----------------------------------------------------------- */
.gate {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.gate[hidden] { display: none; }
a.gate:hover { box-shadow: var(--sh-raised); transform: translateY(-2px); border-color: var(--line-strong); }
a.gate:active { transform: translateY(0); box-shadow: var(--sh-card); }

.gate-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--n-100); }
.gate-media img { width: 100%; height: 100%; object-fit: cover; }

.pill {
    position: absolute; top: 11px; left: 11px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--r-pill);
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--open { background: var(--green-800); color: #fff; }
.pill--quiet { background: rgba(255, 255, 255, 0.94); color: var(--green-800); border: 1px solid var(--line); }
.pill--closed { background: var(--negative); color: #fff; }

.gate-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.gate-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.gate-name {
    font-family: var(--f-display); font-size: 19px; font-weight: 600;
    color: var(--ink); line-height: 1.2; letter-spacing: -0.01em;
}
.gate-go {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 13px; font-weight: 600; color: var(--link);
}
.gate-go svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.gate-desc { font-size: 14px; color: var(--muted); margin-top: 6px; }
.gate-alt { font-size: 13.5px; font-weight: 600; color: var(--negative); margin-top: 7px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: var(--s3); }
.tag {
    font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
    padding: 3px 7px; border-radius: var(--r-sm);
    background: var(--subtle); color: var(--muted); border: 1px solid var(--line);
}
.tag--hcl { background: #EDF2FB; color: #2C5CC4; border-color: #DBE4F7; }
.tag--fujitsu { background: #FBEDEB; color: #B23A28; border-color: #F3D8D3; }
.tag--tds { background: #FDF3E7; color: #A97B1E; border-color: #F4E3C9; }

.gate--closed { background: var(--subtle); }
.gate--closed .gate-media img { filter: grayscale(0.92); opacity: 0.62; }
.gate--closed .gate-name { color: var(--muted); }

/* --- Document cards ------------------------------------------------------- */
.doc {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-card);
}
.doc-media {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--n-100); border-bottom: 1px solid var(--line);
    cursor: zoom-in; width: 100%;
}
.doc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.24, 1); }
.doc-media:hover img { transform: scale(1.025); }

/* Map variant: show the whole drawing rather than a crop, and keep it in proportion */
.doc-media--map { aspect-ratio: 4 / 3; max-height: 560px; background: var(--n-100); cursor: zoom-in; }
.doc-media--map img { object-fit: contain; object-position: center; }
.doc-media--map:hover img { transform: none; }
.doc-media .zoom-hint {
    position: absolute; right: 11px; bottom: 11px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--r-pill);
    background: rgba(10, 38, 24, 0.82); color: #fff;
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.doc-media .zoom-hint svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

.doc-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.doc-title {
    font-family: var(--f-display); font-size: 18.5px; font-weight: 600;
    color: var(--ink); line-height: 1.25; letter-spacing: -0.01em;
}
.doc-desc { font-size: 14px; color: var(--muted); margin-top: 7px; }
.doc-meta {
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--n-500); margin-top: 10px;
}
.doc-actions { display: flex; gap: var(--s2); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.doc-desc + .doc-meta, .doc-title + .doc-meta { margin-bottom: var(--s4); }

/* --- QR cards ------------------------------------------------------------- */
.subhead { margin: var(--s7) 0 var(--s4); }
.subhead h3 {
    font-family: var(--f-display); font-weight: 600; color: var(--ink);
    font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; margin-top: 5px;
}
.subhead p { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 62ch; }

.qrcard {
    display: flex; align-items: center; gap: var(--s4);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s4); box-shadow: var(--sh-card);
}
.qrcard-code {
    width: clamp(72px, 24vw, 104px); aspect-ratio: 1; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; overflow: hidden;
}
.qrcard-code img { width: 100%; height: 100%; }
.qrcard-body { min-width: 0; }
.qrcard-title {
    font-family: var(--f-display); font-size: 16.5px; font-weight: 600;
    color: var(--ink); line-height: 1.25; letter-spacing: -0.01em;
}
.qrcard-url {
    font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
    font-size: 10.5px; letter-spacing: 0.02em; color: var(--n-500);
    margin-top: 5px; overflow-wrap: break-word;
}
.qrcard-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.qrlink {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 12px; border-radius: var(--r-md);
    border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
    font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
    font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.qrlink:hover { background: var(--subtle); border-color: var(--n-500); }
/* Below ~340px the code and the text can no longer sit side by side */
@media (max-width: 339px) {
    .qrcard { flex-direction: column; align-items: flex-start; gap: var(--s3); }
    .qrcard-code { width: 92px; }
    .qrcard-links { width: 100%; }
    .qrlink { flex: 1; justify-content: center; }
}
.qrlink:active { transform: scale(0.97); }
.qrlink svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; padding: 11px 14px; border-radius: var(--r-md);
    font-size: 13.5px; font-weight: 600; text-align: center;
    border: 1px solid transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--green-800); color: var(--on-dark); }
.btn--primary:hover { background: var(--green-900); }
.btn--primary svg { stroke: currentColor; fill: none; }
.btn--ghost { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--n-500); background: var(--subtle); }
.btn--ghost svg { stroke: currentColor; fill: none; }
.btn--call { background: var(--lime-100); color: var(--green-800); }
.btn--call:hover { background: #E9F4CE; }
.btn--call svg { stroke: currentColor; fill: none; }
.btn--wa { background: #E7F3EA; color: var(--wa); }
.btn--wa:hover { background: #DBEDE0; }
.btn--wa svg { fill: currentColor; stroke: none; }

/* --- People --------------------------------------------------------------- */
.person {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s4); box-shadow: var(--sh-card);
}
.person--primary { border-color: rgba(22, 72, 47, 0.3); border-top: 2px solid var(--lime-500); }
.person-top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s4); }
.mono-badge {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-family: var(--f-display); font-size: 18px; font-weight: 600;
    background: var(--lime-100); color: var(--green-800);
}
.person--primary .mono-badge { background: var(--green-800); color: var(--on-dark); }
.person-id { min-width: 0; flex: 1; }
.person-name { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.person-role { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.person-langs { display: flex; gap: 4px; flex-shrink: 0; }
.person-langs span {
    font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.05em;
    color: var(--muted); background: var(--subtle);
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 5px;
}
.person-actions { display: flex; gap: var(--s2); }

/* --- Callout / notice ----------------------------------------------------- */
.callout {
    background: var(--card); border: 1px solid var(--line);
    border-left: 2px solid var(--lime-500); border-radius: var(--r-md);
    padding: var(--s5) var(--s4);
}
.callout .eyebrow { color: var(--green-700); }
.callout p { font-size: 15px; color: var(--body); margin-top: var(--s3); }
.callout p + p { margin-top: var(--s2); }
.callout .signoff {
    margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}

/* --- Facts list (walk page) ----------------------------------------------- */
.facts {
    display: grid; grid-template-columns: 1fr; gap: 0;
    background: var(--card); border: 1px solid var(--line);
    border-top: 2px solid var(--lime-500); border-radius: var(--r-md); overflow: hidden;
}
.fact { padding: var(--s4); }
.fact + .fact { border-top: 1px solid var(--line); }
.fact dt {
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--muted);
}
.fact dd {
    font-family: var(--f-display); font-size: 22px; font-weight: 600;
    color: var(--ink); margin-top: 5px; line-height: 1.2; letter-spacing: -0.015em;
}
.fact dd small { display: block; font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; letter-spacing: 0; }
@media (min-width: 640px) {
    .facts { grid-template-columns: repeat(3, 1fr); }
    .fact + .fact { border-top: 0; border-left: 1px solid var(--line); }
}

/* --- Rules list (safety) -------------------------------------------------- */
.rules { list-style: none; counter-reset: r; }
.rules li {
    counter-increment: r; position: relative;
    padding: var(--s4) 0 var(--s4) 42px;
    border-bottom: 1px solid var(--line);
    font-size: 15px; color: var(--body);
}
.rules li:first-child { border-top: 1px solid var(--line); }
.rules li::before {
    content: counter(r, decimal-leading-zero);
    position: absolute; left: 0; top: calc(var(--s4) + 2px);
    font-family: var(--f-mono); font-size: 11px; font-weight: 500;
    color: var(--green-700); letter-spacing: 0.06em;
}
.rules strong { color: var(--ink); font-weight: 600; }

/* --- Emergency ------------------------------------------------------------ */
.sos {
    background: var(--green-950); border-radius: var(--r-md);
    border-top: 2px solid var(--lime-500);
    padding: var(--s5) var(--s4); color: var(--on-dark);
}
.sos .eyebrow { color: var(--lime-500); }
.sos h3 {
    font-family: var(--f-display); font-size: 22px; font-weight: 600; color: #fff;
    margin-top: 6px; letter-spacing: -0.015em;
}
.sos p { color: var(--on-dark-muted); font-size: 14px; margin-top: 7px; }
.sos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.sos-btn {
    display: flex; flex-direction: column; gap: 3px;
    padding: 13px 14px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(244, 247, 240, 0.16);
    transition: background 0.16s ease;
}
.sos-btn:hover { background: rgba(255, 255, 255, 0.13); }
.sos-btn:active { transform: scale(0.98); }
.sos-label {
    font-family: var(--f-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--on-dark-muted);
}
.sos-value { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }

/* --- Footer --------------------------------------------------------------- */
.footer { margin-top: var(--s8); border-top: 1px solid var(--line); background: var(--subtle); }
.footer-in { padding-block: var(--s6) var(--s7); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 30px; height: 30px; border-radius: var(--r-sm); }
.footer-brand span { font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.footer-legal { margin-top: var(--s4); font-size: 13px; color: var(--muted); max-width: 62ch; }
.footer-legal strong { color: var(--body); font-weight: 600; }
.footer-meta {
    margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--n-500);
    text-transform: uppercase;
}
.footer-meta a { display: inline-flex; align-items: center; min-height: 40px; }
.footer-meta a:hover { color: var(--green-700); }

/* --- Viewer overlay ------------------------------------------------------- */
/* Native <dialog> opened with showModal(): the browser supplies the top layer,
   the focus trap, the inert background and Esc-to-close. Only the chrome
   defaults need resetting. */
.viewer {
    position: fixed; inset: 0;
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    margin: 0; padding: 0; border: 0;
    background: var(--green-950); color: var(--body);
    overflow: hidden; overscroll-behavior: contain;
}
.viewer[open] { display: flex; flex-direction: column; animation: fade 0.2s ease; }
.viewer::backdrop { background: var(--green-950); }
/* Track the dynamic viewport so the stage is not clipped by mobile toolbars */
@supports (height: 100dvh) { .viewer { height: 100dvh; max-height: 100dvh; } }
/* These carry a display value, so the plain [hidden] default is not enough */
.viewer-nav[hidden], .thumbs[hidden], .viewer-foot[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.viewer-bar {
    display: flex; align-items: center; gap: var(--s3);
    padding: max(12px, env(safe-area-inset-top)) max(var(--s4), env(safe-area-inset-right)) 12px max(var(--s4), env(safe-area-inset-left));
    border-bottom: 1px solid rgba(244, 247, 240, 0.14);
    flex-shrink: 0;
}
.viewer-title {
    font-size: 14px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
}
.viewer-count {
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em;
    color: var(--on-dark-muted); flex-shrink: 0;
}
.viewer-icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm);
    display: grid; place-items: center; color: var(--on-dark);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}
.viewer-icon:hover { background: rgba(255, 255, 255, 0.18); }
.viewer-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }

.viewer-stage {
    flex: 1; min-height: 0; position: relative;
    display: grid; place-items: center;
    overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: var(--s4);
    touch-action: pan-x pan-y pinch-zoom;
}
.viewer-stage img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--r-sm); background: #fff;
    cursor: zoom-in;
}
.viewer-stage.is-zoomed { place-items: start; }
.viewer-stage.is-zoomed img { max-width: none; max-height: none; width: var(--zoomw, 1600px); cursor: zoom-out; }

.viewer-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 56px; border-radius: var(--r-md);
    display: grid; place-items: center; color: #fff;
    background: rgba(10, 38, 24, 0.55);
    border: 1px solid rgba(244, 247, 240, 0.18);
    transition: background 0.15s ease;
}
.viewer-nav:hover { background: rgba(10, 38, 24, 0.8); }
.viewer-nav[disabled] { opacity: 0.28; pointer-events: none; }
.viewer-nav svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }

.viewer-foot {
    flex-shrink: 0;
    padding: var(--s3) max(var(--s4), env(safe-area-inset-right)) calc(var(--s3) + env(safe-area-inset-bottom, 0px)) max(var(--s4), env(safe-area-inset-left));
    border-top: 1px solid rgba(244, 247, 240, 0.14);
    display: flex; align-items: center; gap: var(--s3);
}
.thumbs {
    flex: 1; min-width: 0; display: flex; gap: 7px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button {
    flex-shrink: 0; width: 72px; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--r-sm); border: 1px solid rgba(244, 247, 240, 0.2);
    opacity: 0.5; transition: opacity 0.16s ease, border-color 0.16s ease;
}
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button[aria-current="true"] { opacity: 1; border-color: var(--lime-500); }
.viewer-dl {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 9px 14px; border-radius: var(--r-md);
    background: var(--lime-500); color: var(--green-950);
    font-size: 13px; font-weight: 600;
}
.viewer-dl svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.viewer-dl:hover { background: #A6E610; }

/* iOS Safari ignores overflow:hidden on body; the offset is restored in JS. */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* --- Back link ------------------------------------------------------------ */
.backlink {
    display: inline-flex; align-items: center; min-height: 44px; gap: 7px; margin-top: var(--s6);
    font-size: 13.5px; font-weight: 600; color: var(--link);
}
.backlink svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.backlink:hover { color: var(--green-900); }

/* --- Reveal --------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    .bar, .chips, .viewer, .event-go, .skip-link { display: none !important; }
    body { background: #fff; }
    .reveal { opacity: 1; animation: none; }
    .gate, .doc, .person, .callout, .facts { break-inside: avoid; box-shadow: none; }
    .sos { background: #fff; color: #000; border: 1px solid #000; }
    .sos h3, .sos-value { color: #000; }
}