/* Indo-Japan Kai — one stylesheet, shared by every page.
 *
 * ★ WHY THIS IS A FILE AND NOT A <style> BLOCK. The site was one page and the
 *   CSS lived inside it. It is two pages now (home + /resources/), and a
 *   duplicated <style> block is a guarantee that the two will drift: the first
 *   colour or spacing fix that lands on one page and not the other is invisible
 *   until someone opens both side by side. Same argument as the icon sprite —
 *   define once, use everywhere.
 *
 * There is still no build step. This is a plain stylesheet on a static host,
 * served from the same origin, and nothing loads from a CDN.
 */

:root {
    /* One red across the whole site, sampled from the logo file (#FE0303)
       rather than eyeballed. The palette previously mixed #E63946, #D62839 and
       #F13A59 beside a mark that is none of them. Brand marks that are NOT ours
       keep their own colour: WhatsApp green, the Instagram gradient, YouTube
       red, LinkedIn blue, X black. */
    --red: #fe0303;
    --red-dark: #d40202;
    --red-tint: rgba(254, 3, 3, 0.08);

    --ink: #1c1c1c;
    --ink-muted: #4a4a4a;
    --ink-soft: #777;
    --line: #e8e6e4;
    --bg: #ffffff;
    --bg-elev: #faf9f8;

    --maxw: 1080px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
        "Noto Sans CJK JP", sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--red);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--red-dark);
}

:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Language switching ───────────────────────────────────────────────────
 * Every translatable element carries .lang-en or .lang-ja and sits directly
 * beside its twin, so a missing translation is visible in the source rather
 * than at runtime. The old design wrapped each language in one giant section,
 * which worked for two paragraphs and stops working at this length.
 * The visible language is a single attribute on <html>, set before first paint
 * by the inline script in each page's <head> — see site.js. */
html[data-lang="en"] .lang-ja,
html[data-lang="ja"] .lang-en {
    display: none !important;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

/* Three tracks, not a flex row: the nav is centred against the PAGE, not
   against whatever is left over after the wordmark and the toggle. A flex
   row with margin-auto centres it against the gap, so it drifts every time
   the wordmark changes language — and it does, on every JP switch. */
.site-header .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* The mark alone — the wordmark beside it was removed on 2026-09-02, since the
   logo already spells the name out. */
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    justify-self: start;
}

/* The only place the logo appears. The hero used to repeat it at 210px
   directly below this one, which is the same mark twice in one viewport.
   64px of actual mark, not 64px of mark-plus-margin — see the comment on the
   <picture> in index.html for why this points at images/logo-mark.* rather
   than the file in the root. Still fits the 92px bar with room either side. */
.brand img {
    width: 64px;
    height: 64px;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    font-size: 15px;
}

.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

.site-nav a:hover {
    color: var(--red);
}

.language-toggle {
    justify-self: end;
    display: flex;
    gap: 4px;
    align-items: center;
    background-color: var(--bg-elev);
    border: 1px solid var(--line);
    padding: 3px;
    border-radius: 22px;
}

.lang-btn {
    padding: 5px 14px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    border-radius: 18px;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background-color: var(--red-tint);
    color: var(--red);
}

.lang-btn.active {
    background-color: var(--red);
    color: #fff;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* ── Hero ─────────────────────────────────────────────────────────────────
 * Sized against the common guidance rather than by eye, after the first
 * version came out visibly out of proportion — a 33.6px headline floating in
 * a short band, with the sub-copy running wider than the headline.
 *
 *   height    60-100vh on desktop, 500-700px, headline + sub + CTA above fold
 *   h1        48-72px desktop, tight leading, ~2x the body size at minimum
 *   sub-copy  18-22px, max-width ~540px, line-height ~1.6
 *   buttons   >= 44px tall for a comfortable tap target
 *
 * min-height is capped in px as well as vh so a very tall desktop window does
 * not stretch four lines of text down an empty screen. */
.hero {
    min-height: min(66vh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 0 64px;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    border: 1px solid var(--line);
    background-color: var(--bg-elev);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 22px;
}

h1 {
    font-size: clamp(2.5rem, 5.2vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    max-width: 16ch;
    margin: 0 auto;
    /* Stops the last word stranding on a line of its own, which is what the
       first version did to "Japan." on every wide screen. */
    text-wrap: balance;
}

.lede {
    font-size: 1.1875rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 18px auto 0;
    color: var(--ink-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.cta-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 28px;
    background-color: var(--red);
    color: #fff;
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 700;
    border-radius: 25px;
    border: 1px solid transparent;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.cta-button:hover {
    background-color: var(--red-dark);
    color: #fff;
}

/* Icons are inline SVG, not an icon font or a CDN sprite: the site is a set of
   static files and a webfont request just to draw a few glyphs is a
   render-blocking dependency on someone else's uptime. `currentColor` makes
   each icon inherit its button's text colour. */
.cta-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

.cta-button.meetup {
    background-color: var(--red);
}

.cta-button.meetup:hover {
    background-color: var(--red-dark);
}

.cta-button.whatsapp {
    background-color: #25d366;
}

.cta-button.whatsapp:hover {
    background-color: #1da851;
}

.cta-button.outline {
    background-color: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.cta-button.outline:hover {
    background-color: var(--bg-elev);
    color: var(--red);
    border-color: var(--red);
}

/* ── Following: a quieter row than joining ────────────────────────────── */
/* Sits at the bottom of the hero, under the two buttons. Following is a
   smaller commitment than joining, so it reads as a quieter second row rather
   than a third and fourth button. */
.social-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.social-link svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.social-link:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    color: #fff;
}

.social-link.instagram {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}

.social-link.youtube {
    background-color: #ff0000;
}

.social-link.linkedin {
    background-color: #0a66c2;
}

.social-link.x {
    background-color: #000000;
}

.social-link.meetup {
    background-color: var(--red);
}

/* ── Sections ─────────────────────────────────────────────────────────── */
section.band {
    padding: 56px 0;
    border-top: 1px solid var(--line);
}

section.band.tint {
    background-color: var(--bg-elev);
}

h2 {
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 800;
}

h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-intro {
    max-width: 720px;
    margin-top: 14px;
    color: var(--ink-muted);
    font-size: 1rem;
}

p + p {
    margin-top: 14px;
}

.cols {
    display: grid;
    gap: 32px;
    margin-top: 32px;
}

@media (min-width: 860px) {
    .cols.two {
        grid-template-columns: 1fr 1fr;
    }

    .cols.three {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    border: 1px solid var(--line);
    background-color: var(--bg);
    border-radius: 14px;
    padding: 20px 22px;
}

section.band.tint .card {
    background-color: var(--bg);
}

.card p,
.card .card-body {
    margin-top: 8px;
    font-size: 14.5px;
    color: var(--ink-muted);
}

/* ── Host tiles ───────────────────────────────────────────────────────────
 * One row of three, and it stays one row because there are three of them and
 * that is not a number that grows — guests are invited, not added here.
 * Vertical rather than photo-beside-text: at a third of the width a horizontal
 * card gives the bio about twelve characters a line. */
.host {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 22px 24px;
}

/* The whole portrait is the link to that person's LinkedIn. One link per
   tile, not a photo plus a separate icon pointing at the same URL — the badge
   in the corner is inside this anchor, it is a marker rather than a second
   target. */
.host-photo-link {
    position: relative;
    display: inline-block;
    line-height: 0;
    border-radius: 20px;
    text-decoration: none;
}

.host-photo {
    width: 116px;
    height: 116px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    background-color: var(--bg-elev);
    border: 3px solid var(--red);
    transition: transform 0.2s ease;
}

.host-photo-link:hover .host-photo {
    transform: translateY(-2px);
}

.host-photo-link:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}

/* ⚠ The badge needs its own width/height, in CSS AND on the <svg>. An <svg>
   with neither renders at the CSS default of 300x150 — which is exactly what
   shipped when this stylesheet was cached stale: a black rectangle the size of
   the card. Belt and braces on purpose. */
.host-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: #0a66c2;
    border: 2px solid var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

section.band.tint .host-badge {
    border-color: var(--bg);
}

.host-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.host-name {
    margin-top: 18px;
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: -0.01em;
}

.host .card-body {
    margin-top: 8px;
}

/* Numbered steps — how a session comes together */
ol.steps {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

ol.steps > li {
    display: flex;
    gap: 16px;
    border: 1px solid var(--line);
    background-color: var(--bg);
    border-radius: 12px;
    padding: 16px 18px;
}

ol.steps .n {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--red);
    padding-top: 3px;
}

ol.steps .t {
    font-weight: 700;
    font-size: 15.5px;
}

ol.steps .b {
    font-size: 14.5px;
    color: var(--ink-muted);
    margin-top: 3px;
}

/* Session archive */
.sessions {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.session {
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 12px;
    background-color: var(--bg);
    padding: 16px 20px;
}

.session .when {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.session .what {
    font-weight: 700;
    font-size: 16px;
    margin-top: 2px;
}

.session .desc {
    font-size: 14.5px;
    color: var(--ink-muted);
    margin-top: 6px;
}

.session.upcoming {
    border-left-color: #25d366;
    background-color: var(--bg-elev);
}

/* ── Resources page ───────────────────────────────────────────────────── */
.res-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.res-nav a {
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink-muted);
    border: 1px solid var(--line);
    background-color: var(--bg-elev);
    border-radius: 999px;
    padding: 7px 15px;
}

.res-nav a:hover {
    color: var(--red);
    border-color: var(--red);
}

.res-list {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.res {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    background-color: var(--bg);
}

.res-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.res-head .name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.res-head .name a {
    text-decoration: none;
}

.res-head .name a:hover {
    text-decoration: underline;
}

.tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

.tag.free {
    color: #17803d;
    border-color: #bce3c9;
    background-color: #f1fbf4;
}

.res .why {
    margin-top: 8px;
    font-size: 14.5px;
    color: var(--ink-muted);
}

.res .src {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.res .url {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    word-break: break-all;
}

.note {
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    background-color: var(--bg-elev);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 26px;
    font-size: 14.5px;
    color: var(--ink-muted);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer.site-footer {
    border-top: 1px solid var(--line);
    padding: 34px 0 44px;
    color: var(--ink-soft);
    font-size: 13.5px;
}

footer.site-footer .foot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

footer.site-footer nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

footer.site-footer nav a {
    color: var(--ink-muted);
    text-decoration: none;
    font-weight: 600;
}

footer.site-footer nav a:hover {
    color: var(--red);
}

footer.site-footer .disclaimer {
    margin-top: 18px;
    max-width: 700px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    .lede {
        font-size: 1rem;
    }

    .hero {
        padding: 36px 0 34px;
    }

    section.band {
        padding: 42px 0;
    }

    .site-header .wrap {
        grid-template-columns: auto 1fr;
        row-gap: 10px;
        min-height: 0;
    }

    .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 18px;
        font-size: 14px;
    }

    .brand img {
        width: 48px;
        height: 48px;
    }

    .hero {
        min-height: 0;
        padding: 44px 0 40px;
    }

    h1 {
        max-width: 100%;
    }
}
