/* ==================== Self-hosted fonts ====================
   Replaces the Google Fonts CDN (fonts.googleapis.com/fonts.gstatic.com):
   no external request is made to Google when a visitor loads the page —
   the files live in /fonts/ on this same server. See the site owner's
   notes on this decision in the footer's "Aviso sobre contenido externo".
   File naming: {family}-{weight}[-italic].woff2, placed in /fonts/. */

  @font-face{
    font-family:'Noto Serif JP'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/noto-serif-jp-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Noto Serif JP'; font-style:normal; font-weight:500;
    font-display:swap; src:url('/fonts/noto-serif-jp-500.woff2') format('woff2');
  }
  @font-face{
    font-family:'Noto Serif JP'; font-style:normal; font-weight:600;
    font-display:swap; src:url('/fonts/noto-serif-jp-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Noto Serif JP'; font-style:normal; font-weight:700;
    font-display:swap; src:url('/fonts/noto-serif-jp-700.woff2') format('woff2');
  }

  @font-face{
    font-family:'Noto Sans JP'; font-style:normal; font-weight:300;
    font-display:swap; src:url('/fonts/noto-sans-jp-300.woff2') format('woff2');
  }
  @font-face{
    font-family:'Noto Sans JP'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/noto-sans-jp-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Noto Sans JP'; font-style:normal; font-weight:500;
    font-display:swap; src:url('/fonts/noto-sans-jp-500.woff2') format('woff2');
  }
  @font-face{
    font-family:'Noto Sans JP'; font-style:normal; font-weight:700;
    font-display:swap; src:url('/fonts/noto-sans-jp-700.woff2') format('woff2');
  }

  @font-face{
    font-family:'Caveat'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/caveat-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Caveat'; font-style:normal; font-weight:500;
    font-display:swap; src:url('/fonts/caveat-500.woff2') format('woff2');
  }

  @font-face{
    font-family:'Zen Kurenaido'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/zen-kurenaido-400.woff2') format('woff2');
  }

  @font-face{
    font-family:'Cinzel Decorative'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/cinzel-decorative-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cinzel Decorative'; font-style:normal; font-weight:700;
    font-display:swap; src:url('/fonts/cinzel-decorative-700.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cinzel Decorative'; font-style:normal; font-weight:900;
    font-display:swap; src:url('/fonts/cinzel-decorative-900.woff2') format('woff2');
  }

  @font-face{
    font-family:'Cinzel'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/cinzel-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cinzel'; font-style:normal; font-weight:600;
    font-display:swap; src:url('/fonts/cinzel-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cinzel'; font-style:normal; font-weight:700;
    font-display:swap; src:url('/fonts/cinzel-700.woff2') format('woff2');
  }

  @font-face{
    font-family:'EB Garamond'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/fonts/eb-garamond-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'EB Garamond'; font-style:italic; font-weight:400;
    font-display:swap; src:url('/fonts/eb-garamond-400-italic.woff2') format('woff2');
  }
  @font-face{
    font-family:'EB Garamond'; font-style:normal; font-weight:600;
    font-display:swap; src:url('/fonts/eb-garamond-600.woff2') format('woff2');
  }

/* ==================== Core site styles ==================== */
  :root{
    color-scheme: dark;
    --ink:#FBF7EE;
    --ink-soft:#F3EDDD;
    --paper:#2B2520;
    --paper-dim:#4A423A;
    --gold:#A8392B;
    --gold-soft:#8C2E22;
    --gold-dark:#70251B;
    /* Same hue as --gold-dark (≈7°), lifted to a pale, muted tint for
       sections that want the ember family as a tenue accent rather than
       a saturated block (WBU background). */
    --gold-pastel:#EFD8D5;
    --moss:#5B6B4A;
    --moss-deep:#3A4530;
    --stone:#8C8074;
    --washi:#FBF7EE;
    /* Warm sand/gravel neutral — a deliberately distinct flat tone (not
       another washi-cream) for the #training-itineraries/#teaching seam,
       where both sides previously resolved to visually different versions
       of "no real background" (one a flat --ink cream, the other body{}'s
       tinted washi gradient) that could never be made to match by reusing
       an existing token. */
    --gravel:#E9E7E1;
    --hairline: rgba(168,57,43,0.25);
    /* Warm "dawn light" accent (Publications → Shunkaen divider, and any other
       spot that needs a break from the site's dominant red so it doesn't pile
       up against the ink-scroll's red rule and other red accents nearby) */
    --dawn:#E8B84B;
    /* Shared between body{}'s own ambient tint (top-left radial-gradient)
       and .mon-trio::before's band, which is tuned to match it exactly —
       declared once so both stay in sync automatically if the tone is
       ever retuned, instead of two independently drifting literals. */
    --tint-warm: rgba(168,57,43,0.04);
    --serif:'Noto Serif JP', serif;
    --sans:'Noto Sans JP', sans-serif;
    /* Shared with .panorama-botanical-sep (its min-height) AND .hero (its ::before
       fade reach, which invades 40% of this height). Declared once here so both
       stay in sync automatically if this height is ever tuned — no duplicated
       magic number to keep manually aligned in two places. */
    --botanica-height:calc(clamp(80px, 11vw, 150px) + 2cm);
    /* Gap between the botanical/season-koh band and .hero, now applied as
       .panorama-to-hero-band's own padding-bottom (see that rule) — declared
       once here so the phone override below stays the single source. */
    --hero-gap-above:4cm;
  }

  /* ==================== Comment / reflection component ====================
     Replaces the old note-style watermark system entirely (fixed-height card,
     single static quote mark) with a fully adaptable component:
       - height is always automatic — no aspect-ratio, so it never crops text
       - two quote marks instead of one, anchored with fixed clamp() offsets
         (never percentages of the box height, so they never drift when the
         text block grows or shrinks):
           .kb-comment-mark-crop  -> large, bleeds off the bottom-left corner,
                                     low opacity, purely atmospheric
           .kb-comment-mark-echo  -> small, fully visible, near the top-right,
                                     slightly more opaque. Opposite corner from
                                     the crop mark on purpose, so the two marks
                                     balance the box instead of stacking on one edge
       - a soft irregular glow behind the text
       - a red dropcap on the opening letter
     All sizing reacts to the CONTAINER width via CSS container queries, not
     the viewport, so the same markup adapts correctly whether it sits in a
     3-column row, a 2-column row, a single wide column, or a fixed-width
     sidebar. Pure CSS — no JavaScript, no browser-specific concerns. */
  .kb-comment{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    /* Standardized vertical rhythm — SINGLE SOURCE OF TRUTH for the space
       above and below every .kb-comment instance on the site, whatever
       section it sits in, on every device. Reuses the same 42px already
       used by .section-head's own margin-bottom, so the comment box's
       rhythm matches the site's existing heading rhythm instead of
       inventing a new number. No wrapper is allowed to declare its own
       margin-top/margin-bottom to compensate or override this — the
       documented exceptions are .suiseki-essay-epigraph-wrap, which sits
       as a direct CSS Grid child (margins never collapse against a
       grid's own row gap) and carries a compensation at its own selector
       to keep the REAL rendered gap at exactly 42px, and
       .form-closing-note-wrap, which — once .form-grid stacks to one
       column — is also a Grid item immediately followed by a
       .kb-divider--diamond that already supplies its own spacing; see
       each rule for the explanation. */
    margin-top:42px;
    margin-bottom:42px;
    /* Single source of truth for the echo mark's footprint (top-right quote
       icon). .kb-comment-mark-echo and .kb-comment-inner's right padding
       both read from these two variables, so the text reserve area is
       ALWAYS exactly as wide as the icon actually is, at any container
       width, in any language. This is what previously caused the quote
       icon to collide with text (Japanese, English, occasionally Spanish):
       the icon's position/size and the text's right padding were two
       independent, unlinked clamp() formulas that only coincidentally
       matched at some widths. */
    --kb-echo-right: clamp(14px, 4cqw, 26px);
    --kb-echo-w: clamp(16px, 6cqw, 30px);
  }
  .kb-comment-inner{
    position:relative;
    z-index:3;
    /* Interior spacing is now padding + flex gap instead of "padding plus
       whatever margins the children happen to bring". This is the single
       source of truth for every .kb-comment instance, sitewide, at every
       breakpoint — no wrapper below may declare its own margin-top,
       margin-bottom, padding-top or padding-bottom on .kb-comment,
       .kb-comment-inner, or any element inside it. */
    display:flex;
    flex-direction:column;
    gap:14px;
    font-size:16px; /* single unified interior text size — was 15/16/17/18/19px depending on section */
    --kb-comment-pad-v: clamp(16px, 4vw, 30px);
    --kb-comment-pad-h: clamp(16px, 4.5vw, 34px);
    padding-top: var(--kb-comment-pad-v);
    padding-bottom: var(--kb-comment-pad-v);
    padding-left: var(--kb-comment-pad-h);
    /* Right padding is whichever is larger: the normal aesthetic padding,
       or the exact clearance the echo mark needs (its offset from the edge
       + its own width + a small breathing gap). Text can never render
       under the icon again, regardless of column width or script. */
    padding-right: max(var(--kb-comment-pad-h), calc(var(--kb-echo-right) + var(--kb-echo-w) + 8px));
  }
  /* Portrait phones only (matches the site's existing "mobile portrait"
     breakpoint, e.g. .traditional-school-motto-icon above) — NOT iPad in
     any orientation, where the comment box already reads correctly.
     At phone widths the clamp()'s 4vw term collapses toward its 16px
     floor, so the text sits almost flush against the decorative
     background with barely any breathing room. Doubling the single
     source-of-truth variable here is enough on its own: padding-top and
     padding-bottom of a normal comment both read from it directly, and
     the 85%-reduced padding-bottom of a signed comment (below) is a
     percentage OF this same variable — so doubling it here doubles the
     signed comment's top padding exactly like the unsigned case, while
     automatically preserving the already-correct 85% ratio on its
     bottom. No separate override needed for the signed variant. */
  @media (max-width:600px) and (orientation:portrait){
    .kb-comment-inner{
      --kb-comment-pad-v: clamp(32px, 8vw, 60px);
    }
  }
  /* Firewall: neutralizes ANY margin a child brings from another class
     (a stray p{margin-bottom}, a -6px line-height compensation, a 64px
     margin left over from an unrelated rule...). With flex+gap providing
     all interior spacing, a child's own margin is never the source of
     truth again — !important is deliberate here, so no future
     higher-specificity selector can silently reopen the exact bugs this
     firewall exists to close. */
  .kb-comment-inner > *{
    margin:0 !important;
  }
  /* Half-leading trim: browsers reserve extra invisible space above the
     first line and below the last line of text (the "half-leading" that
     comes from line-height), and that reserve is almost never symmetric
     relative to the actual glyphs — which is why padding-top and
     padding-bottom above can be numerically identical yet look wildly
     unequal (thin gap above the text, thick gap below it). This is a
     font-metrics issue, not a viewport issue, so it is fixed once here
     and applies identically on every device and breakpoint — no
     per-screen override needed.
     text-box-trim/text-box-edge (Safari 18.2+, Chrome/Edge 133+; no
     Firefox support as of mid-2026) removes exactly that phantom space,
     trimming flush to the font's own cap-height/baseline, so the
     --kb-comment-pad-v value above finally IS the real visual gap on
     both edges. Unsupported browsers simply keep today's slightly
     uneven-but-harmless spacing — graceful degradation, no breakage. */
  .kb-comment-inner > *:first-child{
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
  }
  .kb-comment-inner > *:last-child:not(.kb-comment-sign){
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
  }
  /* Signed comments: the box's last CHILD is .kb-comment-sign, but that's
     a wrapper around two block lines (kanji + name) — it holds no text
     of its own, so trimming it does nothing. The actual last line of
     text is .kb-comment-sign-name, and it's exactly the mismatched-font
     line (Latin, different size/line-height than the kanji above it)
     that was doubling the visual bottom gap on signed notes. Trimming
     it here, at the source, means the same --kb-comment-pad-v now reads
     as the same visual gap whether or not the note is signed — no
     separate "reduce it 50% by eye" value needed for the signed case. */
  .kb-comment-signed .kb-comment-sign .kb-comment-sign-name{
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
  }
  /* Signed comments, forced correction: text-box-trim above narrows the
     gap but doesn't close it — the kanji signature's own font/line-height
     still reads as visibly more bottom space than an unsigned note at the
     same nominal padding, confirmed on-screen against the unsigned
     baseline. Rather than keep chasing this through font metrics, the
     container's padding-bottom is force-reduced by 85% specifically for
     .kb-comment-signed. This is a deliberate, documented exception —
     the one case where a fixed number beats the general rule — not a
     silent override; nothing outside .kb-comment-signed is affected. */
  .kb-comment-signed .kb-comment-inner{
    padding-bottom: calc(var(--kb-comment-pad-v) * 0.15);
  }
  .kb-comment-glow{
    position:absolute; z-index:0; pointer-events:none;
    inset:0;
    background:radial-gradient(58% 70% at 62% 38%, rgba(224,122,95,0.16), transparent 72%);
    filter:blur(6px);
  }
  .kb-comment-mark-crop{
    position:absolute; z-index:1; pointer-events:none;
    width:clamp(90px, 46cqw, 260px); height:auto;
    aspect-ratio:512/379.51;
    color:var(--paper-dim);
    fill:currentColor;
    opacity:0.07;
    left:clamp(-30px, -8cqw, -10px);
    bottom:clamp(-26px, -7cqw, -8px);
    transform:rotate(180deg) scaleX(-1);
  }
  .kb-comment-mark-echo{
    position:absolute; z-index:1; pointer-events:none;
    width:var(--kb-echo-w); height:auto;
    aspect-ratio:512/379.51;
    color:var(--gold);
    fill:currentColor;
    opacity:0.32;
    top:clamp(10px, 3cqw, 20px);
    right:var(--kb-echo-right);
  }
  .kb-comment-dropcap{
    font-family:var(--serif);
    font-style:normal; font-weight:600;
    float:left; line-height:0.82;
    padding-right:6px; padding-top:3px;
    font-size:clamp(26px, 10cqw, 42px);
    color:var(--gold);
  }
  @container kb-comment-host (min-width: 620px){
    .kb-comment-dropcap{ font-size:clamp(32px, 5.5cqw, 46px); }
  }
  /* ---------- Japanese-language override: the enlarged illuminated-style
     drop cap is a Latin/Western convention tied to the concept of a capital
     letter — kanji and kana have no case distinction, and Japanese
     typesetting relies on a fixed-width character grid (zenkaku) that an
     enlarged first character breaks with no traditional precedent. Rather
     than removing the accent entirely, the first character keeps the
     site's gold emphasis colour (consistent with how the kanji signature
     is always rendered) but at normal size and inline, with no float and
     no capitular scale — this is what a Japanese reader would recognise
     as a legitimate accent rather than a foreign typographic import. */
  :lang(ja) .kb-comment-dropcap{
    float:none;
    display:inline;
    font-size:inherit;
    line-height:inherit;
    padding-right:0;
    padding-top:0;
  }

  /* ---------- Personal signature variant: .kb-comment-signed is the marker,
     placed on the .kb-comment wrapper itself, that identifies a note as a
     personal reflection/opinion of the author (as opposed to a quote,
     institutional text, or didactic explanation). Only a .kb-comment carrying
     this modifier class renders its .kb-comment-sign block — the modifier is
     not just a label, it's what gates the signature from appearing. The kanji
     always render in the site's soft red (var(--gold)), per the sitewide rule
     that the author's four kanji are always shown in that color wherever they
     appear as a signature.
     Note on spacing: the sign block is simply the last child inside the
     flex column .kb-comment-inner, positioned by the same gap as any other
     child — it never touches padding-bottom, so a signed note has EXACTLY
     the same real bottom padding as an unsigned one. Its own border-top +
     padding-top (below) provide the visual "closing" separator; that's
     internal to the sign block itself, not exterior spacing. ---------- */
  .kb-comment-signed .kb-comment-sign{
    position:relative; z-index:3;
    padding-top:10px;
    border-top:1px solid var(--hairline);
    font-family:var(--serif);
    font-size:15px;
    letter-spacing:0.04em;
    color:var(--ink);
  }
  .kb-comment-signed .kb-comment-sign .kb-comment-sign-kanji{
    display:block; font-size:18px; margin-bottom:4px; color:var(--gold);
  }
  .kb-comment-signed .kb-comment-sign .kb-comment-sign-name{
    display:block; font-family:var(--sans); font-size:11.5px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--ink-soft); opacity:0.7;
  }
  /* ---------- Dark-background variant: on sections with an opaque dark
     background (Bashō's --paper, Escuela's --moss-deep), the default
     .kb-comment-mark-echo colour (--gold, a dark red) reads almost as black
     and the quote mark all but disappears. .kb-comment-on-dark lightens it
     via --kb-comment-echo-on-dark, which defaults to --stone (the tone this
     site already uses for muted text on dark backgrounds, e.g. Bashō's
     figure captions) but can be retuned per section — see .traditional-school
     below, which sets it to a pastel green to sit better against its moss
     background. Never pure white. ---------- */
  .kb-comment-on-dark .kb-comment-mark-echo{
    color: var(--kb-comment-echo-on-dark, var(--stone));
    opacity: 0.45;
  }
  /* Feature modifier: kanji shown large/prominent as the block's focal point
     (used for the A-Un pair in Okukiyō) — not a signature, just emphasis. */
  .kb-comment-kanji-feature{
    display:block;
    font-family:var(--serif);
    font-size:clamp(34px, 8cqw, 52px);
    color:var(--gold);
    letter-spacing:0.08em;
    /* Spacing to the paragraph below is the flex gap on .kb-comment-inner,
       not a margin (the firewall neutralizes this anyway) — the manual
       -6px line-height compensation that used to live on the following
       paragraph is gone: with flex+gap, the distance from the last line
       to the box edge is exactly the padding, not padding plus leftover
       line-height, so no compensation is needed. */
  }

  .ext-arrow{
    display:inline-block;
    font-style:normal;
    font-size:0.7em;
    width:1em;
    height:1em;
    margin-left:0.2em;
    transform:translateY(-0.05em);
    vertical-align:middle;
    flex-shrink:0;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:clip; width:100%;}

  body{ overflow-x:clip; width:100%; }

  img{display:block; max-width:100%; height:auto;}

  body{
    /* Pure washi base + noise texture, PLUS two faint warm/green radial tints. Correction:
       these radial tints are NOT confined to .hero — they are declared here, on body, and
       are visible through ANY section that doesn't paint its own opaque background over them.
       .hero itself paints nothing (fully transparent), so it shows this body tint in full —
       that's the look everyone associates with "the Hero gradient". Most other sections
       (.notebook-intro, .hero-divider, etc.) deliberately paint a flat background:var(--ink)
       on top, which fully covers this tint, keeping their paper clean and untinted.
       .mon-trio no longer relies on this leak — see its own isolated gradient below. */
    background-color:var(--ink);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.66 0 0 0 0 0.59 0 0 0 0 0.47 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(ellipse at top left, var(--tint-warm), transparent 60%),
      radial-gradient(ellipse at bottom right, rgba(91,107,74,0.04), transparent 60%);
    color:var(--paper-dim);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  a{color:var(--gold); text-decoration:none;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}

  .wrap{max-width:1080px; margin:0 auto; padding:0 32px;}

  .eyebrow{
    font-family:var(--sans);
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:600;
    color:var(--paper);
    letter-spacing:0.01em;
  }

  .h2-bamboo::before{
    content:"";
    display:inline-block;
    height:calc(0.73em + 4mm);
    width:calc((0.73em + 4mm) * 0.598);
    background:url(/img/bambu-titulos.svg) no-repeat center / contain;
    vertical-align:baseline;
    margin-right:0.28em;
  }


  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(251,247,238,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline);
    transform:translateY(0);
    transition:transform 0.28s ease, box-shadow 0.28s ease;
    /* FIX (WebKit cold-layer flash on nav open): nav's backdrop-filter
       forces WebKit to build a GPU composited layer, but WebKit was only
       building it "cold" the first time it was needed (menu open, or first
       paint) — causing a one-frame mispositioned repaint. will-change tells
       WebKit to build that layer up front, at page load, before any
       interaction, so there's no "cold" moment left to glitch on. */
    will-change:transform;
  }
  nav.nav-hidden{
    transform:translateY(-100%);
  }
  nav.nav-hidden .nav-sub{
    display:none !important;
  }
  /* Non-hamburger layouts only: this !important reset is meant purely to snap
     the dropdown chevron back to its closed angle when the nav bar slides away
     on scroll-down, so it isn't caught mid-rotation when the bar reappears. It
     must NOT reach the hamburger accordion below the breakpoint: that chevron
     uses the same base class combo (.nav-has-sub > a::after) with equal CSS
     specificity, so this !important used to win there too — forcing every
     closed (pointing-right) accordion chevron into its "open/pointing-down"
     angle every time nav-hidden toggled on scroll. Condition is the exact
     complement of the hamburger breakpoint below, so the two can never
     disagree about which mode is active. */
  @media (min-width:1024px){
    nav.nav-hidden .nav-has-sub > a::after{
      transform:rotate(45deg) translateY(-2px) !important;
    }
  }
  .nav-inner{
    max-width:1300px; margin:0 auto; padding:14px 32px 0;
  }
  .nav-top-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
    padding-bottom:14px;
  }
  .nav-top-right{
    display:flex; align-items:center; gap:16px;
  }
  .nav-mark{
    font-family:var(--serif); color:var(--paper); font-size:18px; letter-spacing:0.05em;
    white-space:nowrap;
  }
  .nav-mark-kanji, .nav-mark-dot{color:var(--gold);}
  .nav-mark-hanko{
    height:25px; width:auto; margin-left:2px; vertical-align:baseline;
    display:inline-block; position:relative; top:2px;
  }
  .nav-menu-row{
    border-top:1px solid var(--hairline);
  }
  .nav-links{
    display:flex; gap:18px 20px; list-style:none;
    flex-wrap:nowrap;
    justify-content:center;
  }
  .nav-links a{
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--stone); font-family:var(--sans); font-weight:500;
    transition:color 0.3s ease;
    white-space:nowrap;
  }
  .nav-links a:hover{color:var(--paper);}

  /* "You-are-here" underline on top-level menu items: driven EXCLUSIVELY by
     scroll position (.nav-active, set by the IntersectionObserver scrollspy
     further down this file) — never by hover or click. It used to also
     reveal on :hover, as a plain link affordance, but on iPad Pro with a
     trackpad/Magic Keyboard the cursor genuinely hovers (real pointer, not
     touch), so tapping a dropdown trigger like "Education" to open its
     panel left the cursor sitting on top of it — and since hover and
     .nav-active shared the same visual reveal, that read as a false
     positive: the bar appeared to claim you were in that section when you
     were still at Inicio. Color-on-hover (.nav-links a:hover further down)
     still gives hover feedback; this underline no longer does. Uses
     ::before, not ::after, because .nav-has-sub > a::after is already the
     dropdown chevron. Scoped to ">li >a" (direct children only) so it
     never reaches into the dropdown submenu or the mobile language pills
     nested further inside. */
  .nav-links > li > a{position:relative;}
  .nav-links > li > a::before{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:-4px;
    height:1px;
    background:var(--gold);
    transition:right 0.35s cubic-bezier(.55,0,.35,1);
  }
  .nav-links > li > a.nav-active::before{
    right:0;
  }
  .nav-links > li > a.nav-active{color:var(--paper);}
  .nav-sub li a.nav-active{color:var(--paper);}

  /* Give the top-level link itself the full vertical extent of the menu
     row — ported from v5-elegant-borderless.html's height:var(--nav-h)
     approach — instead of relying on .nav-menu-row's own padding to create
     that space. This makes .nav-sub's top:100% (anchored to the <li>, whose
     height now equals the <a>'s own padded box) land flush against the
     bar's bottom edge, a natural continuation of the bar, rather than right
     under the link text with the row's padding hidden underneath the panel.
     Desktop-only, and placed AFTER the base .nav-menu-row/.nav-links > li >
     a rules above so it actually wins the cascade at equal specificity; the
     mobile accordion drawer sets its own display/padding on these same
     selectors inside the max-width:1023px query below, which still wins
     there regardless of this rule. */
  @media (min-width:1024px){
    .nav-menu-row{ padding:0; }
    .nav-links > li > a{
      display:flex; align-items:center;
      padding:13px 0;
      line-height:1;
    }
    /* Underline offset recalculated for the new padded box: it used to sit
       4px below the bare text (bottom:-4px on a box with no padding); the
       box now extends 13px past the text on each side, so bottom:9px
       (13px padding-bottom minus that same 4px gap) keeps the underline in
       the same visual spot relative to the text itself. */
    .nav-links > li > a::before{ bottom:9px; }
  }

  @media (max-width:1023px){
    /* No real hover on touch, and items go full-width inside the drawer —
       a growing underline reads oddly there, and the red background wash
       already shown on tap/open is enough feedback. Keep only the color. */
    .nav-links > li > a::before{display:none;}
  }
  .nav-toggle{display:none; background:none; border:none; color:var(--paper); font-size:22px; cursor:pointer;}

  /* Mobile-drawer language block: hidden entirely outside the hamburger,
     revealed only inside the hamburger menu below the breakpoint (see NAV
     media query further down). Must sit BEFORE that media query in source
     order — same specificity, so a later unconditional rule would win the
     cascade even in hamburger mode and silently override the media query's
     display:block. */
  .nav-mobile-lang{display:none;}

  /* Dropdown submenu — School */
  .nav-has-sub{
    position:relative;
  }
  .nav-has-sub > a{
    display:inline-flex; align-items:center; gap:5px;
  }
  .nav-has-sub > a::after{
    content:"";
    display:inline-block;
    width:5px;
    height:5px;
    border-right:1.2px solid currentColor;
    border-bottom:1.2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    opacity:0.55;
    flex-shrink:0;
    transition:transform 0.2s ease, opacity 0.2s ease;
    margin-top:1px;
  }
  .nav-has-sub.sub-open > a::after{
    transform:rotate(-135deg) translateY(-2px);
    opacity:0.85;
  }
  /* Desktop dropdown: ported directly from v5-elegant-borderless.html's
     .panel. Single element (the old .nav-sub::before split-layer trick is
     gone) — same position, same open/close animation, same shadow, same
     spacing as v5's code:
     - left:0 + min-width:100% (not centered under the trigger, like v5's
       .panel left:0 + min-width:100%).
     - top:100%, flush against the bar when closed — matches v5's .panel
       top:100% against its own <li>.
     - transform-origin:top; scaleY(0) translateY(-3px) → scaleY(1)
       translateY(0) on .sub-open, same values and same easing
       (cubic-bezier(.22,.85,.32,1)) as v5's .panel / li.open .panel.
     - padding:10px 0 8px, same as v5's .panel padding.
     One consequence of merging the two layers: the panel box and its text
     now animate together in one pass (transform + opacity together, like
     v5), instead of the previous behaviour where the text faded in on a
     0.1s delay after the box had mostly unfurled. */
  .nav-sub{
    position:absolute;
    top:100%;
    left:0;
    min-width:100%;
    list-style:none;
    z-index:200;
    padding:10px 0 8px;
    /* Same color and blur as nav's own bar — an exact clone, so the panel
       reads as an indistinguishable continuation of the bar rather than a
       separate surface. NOTE: this reintroduces a two-independent-
       blur-layers seam risk (WebKit can render a visible line where nav's
       blur and this panel's blur meet, since each backdrop-filter is
       computed as its own layer), which the previous solid/no-blur choice
       existed specifically to avoid. Kept here on explicit instruction; if
       a seam appears in Safari, this is the tradeoff that caused it. */
    background:rgba(251,247,238,0.88);
    backdrop-filter:blur(8px);
    border-radius:0 0 2px 2px;
    /* Soft, wide dual shadow — exact values from v5-elegant-borderless.html's
       .panel — instead of a hard-edged border/single shadow: no crisp line
       to misalign with the bar above it, and the panel genuinely reads as
       lifted off the page. */
    box-shadow:
      0 26px 46px -22px rgba(43,37,32,0.30),
      0 6px 16px -8px rgba(43,37,32,0.14);
    transform-origin:top;
    transform:scaleY(0) translateY(-3px);
    opacity:0;
    pointer-events:none;
    transition:transform 0.26s cubic-bezier(.22,.85,.32,1), opacity 0.18s ease;
  }
  .nav-has-sub.sub-open .nav-sub{
    transform:scaleY(1) translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-sub li a{
    display:block;
    padding:13px 22px;
    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--stone);
    font-family:var(--sans);
    font-weight:500;
    white-space:nowrap;
    transition:color 0.2s ease;
  }
  .nav-sub li a:hover, .nav-sub li a:focus-visible{
    color:var(--paper);
  }

  @media (min-width:1301px){
    .nav-inner{max-width:1500px;}
  }

  @media (max-width:1023px){
    /* Collapsed bar shows only the mark + hamburger; language pills move
       into the drawer itself (.nav-mobile-lang below). */
    .nav-top-right > .lang-switcher{display:none;}

    .nav-mobile-lang{
      display:block;
      text-align:center;
      padding:18px 32px 24px;
    }
    .nav-mobile-langs{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
    }
    .nav-mobile-langs a{
      font-family:var(--sans);
      font-size:11px;
      letter-spacing:0.1em;
      color:var(--ink-soft);
      opacity:0.75;
      text-transform:uppercase;
      transition:color 0.25s ease, opacity 0.25s ease;
    }
    .nav-mobile-langs a:hover{color:var(--ink); opacity:1;}
    .nav-mobile-langs a.lang-active{color:var(--gold); opacity:1; font-weight:500;}
    .nav-mobile-langs .lang-sep{
      color:var(--hairline);
      font-size:11px;
      line-height:1;
    }

    .nav-menu-row{border-top:none; padding:0;}
    .nav-links{
      position:absolute; top:100%; right:0; left:0;
      /* Translucent panel over .hero: what looked, at times, like the
         drawer sinking behind .hero was never a real stacking bug — the
         panel always painted above .hero. It only looked that way because
         the panel is translucent (92% opacity) over .hero's solid dark
         background, so .hero shows through exactly as intended. Confirmed
         optical illusion, not a bug — backdrop-filter is safe to use here.
         The one real problem in this drawer was the menu text visibly
         flying sideways for a few frames on open, fixed below (see the
         max-height/reflow note) — a separate issue with a separate fix. */
      background:rgba(43,37,32,0.92);
      backdrop-filter:blur(8px);
      /* GPU layer promoted only for the ~0.28s the drawer is actually
         transitioning (open or close), then demoted back to 'auto' once
         the transition ends — shared.js toggles will-change right before
         the transition starts and removes it when it finishes, so the
         layer never sits allocated while the drawer is just sitting idle,
         open or closed. */
      box-shadow:0 12px 24px -8px rgba(43,37,32,0.14);
      flex-direction:column; gap:0;
      /* nowrap, not wrap: this is a column flex container capped by
         max-height + overflow-y:auto below, which is what's supposed to
         handle overflow (internal scroll). flex-wrap:wrap on a column
         container does NOT scroll on overflow — it opens a second column
         instead, squeezing every column narrower and repositioning
         whatever sits after the overflow point (e.g. the language row)
         up into that new column. That's exactly what showed up as
         Identity/Education's longer submenus (6-7 items) pushing total
         content past 80svh: the drawer visibly narrowed and the ES|EN|日
         row jumped to the top-right instead of staying pinned at the
         bottom. Outreach (2 items) never got tall enough to cross that
         threshold, so it looked "fine" by accident, not by design. nowrap
         lets overflow-y:auto do its job — the drawer just scrolls. */
      flex-wrap:nowrap;
      border-bottom:1px solid var(--hairline);
      justify-content:flex-start;
      /* 80vh alone gets miscalculated by iOS Safari at the very top of the
         page: vh is sized against the "large" viewport (address bar collapsed),
         but the address bar is actually still expanded there, so the real
         visible area is smaller and the drawer gets clipped right at the
         language row. svh always sizes against the smallest possible viewport
         (bar expanded), so it never overflows regardless of scroll position.
         vh stays first as a fallback for browsers without svh support. Height
         is static now (see below), not itself animated, so this applies at
         all times, open or closed — not just while .open. */
      max-height:80vh; max-height:80svh; overflow-y:auto;
      /* Open/close via opacity + transform, NOT max-height. Animating
         max-height forces WebKit to reflow every line of menu text on every
         frame of the transition (re-measuring what now fits in the
         growing/shrinking box) — that reflow is what showed up on iPhone as
         the menu text visibly flying sideways for a few frames before
         settling, in both Safari and Edge (same WebKit engine on iOS).
         opacity/transform never triggers that reflow: the box is always at
         its final size, only its visibility and position animate.
         visibility is delayed on close and instant on open, so the drawer
         stops accepting taps the moment it's invisible, without needing a
         separate display:none that would itself block the transition. */
      opacity:0;
      visibility:hidden;
      transform:translateY(-8px);
      transition:opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
    }
    .nav-links.open{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      transition:opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0s;
    }
    .nav-links > li > a{display:block; padding:11px 32px; border-top:none; white-space:normal;}
    .nav-toggle{display:block;}

    /* Light-on-dark text, matching the drawer's new dark background above.
       Overrides the base .nav-links a rule (var(--stone) / var(--paper) on
       hover), which was tuned for the drawer's old solid light background
       and would render near-invisible — especially the active/hover state —
       against the new dark, translucent one. */
    .nav-links a{color:var(--ink-soft); opacity:0.82;}
    .nav-links a:hover{color:var(--ink); opacity:1;}
    .nav-links > li > a.nav-active{color:var(--gold); opacity:1;}

    /* Submenu toggles on mobile: chevron indicator, accordion open/close.
       Selector specificity bumped (.nav-links > li.nav-has-sub > a) so this
       beats ".nav-links > li > a" above and display:flex actually applies —
       otherwise the chevron collapses back next to the text instead of
       sitting flush against the right edge. */
    .nav-links > li.nav-has-sub > a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-left:32px;
      padding-right:5mm; /* fixed gap to the right edge, per spec */
    }
    /* Bumped specificity (.nav-links > li.nav-has-sub > a::after) so this can
       never lose to the desktop dropdown chevron rule above, which uses
       a different rotation pattern (down/up) and shares the same base
       specificity — that tie was the cause of the chevron ending up pointing
       up instead of returning to the right on close. */
    .nav-links > li.nav-has-sub > a::after{
      display:inline-block;
      width:5px; height:5px;
      border-right:1px solid currentColor;
      border-bottom:1px solid currentColor;
      transform:rotate(-45deg); /* closed: pointing right */
      flex-shrink:0;
      transition:transform 0.22s ease;
    }
    .nav-links > li.nav-has-sub.sub-open > a{
      background:color-mix(in srgb, var(--gold) 12%, transparent);
      color:var(--ink);
      opacity:1;
    }
    .nav-links > li.nav-has-sub.sub-open > a::after{
      transform:rotate(45deg); /* open: pointing down */
    }
    .nav-sub{
      display:block;
      position:static;
      transform:none;
      background:transparent;
      border:none;
      box-shadow:none;
      padding:0;
      min-width:0;
      max-height:0;
      overflow:hidden;
      transition:max-height 0.35s ease;
    }
    .nav-has-sub.sub-open .nav-sub{
      max-height:500px;
    }
    .nav-sub li + li{border-top:none;}
    .nav-sub li a{
      padding:10px 32px 10px 48px;
      font-size:10px;
      color:var(--ink-soft);
      border-top:none;
      opacity:0.65;
    }
    .nav-sub li a:hover,
    .nav-sub li a.nav-active{
      background:transparent;
      color:var(--gold);
      opacity:1;
    }
  }

  /* ==================== READING PATH — ink stroke + orientation labels ====================
     "Reading path / ink stroke": a single continuous reading-progress line
     + three vertical labels (previous · current · next), running the full
     height of the page — from the first pixel to the last. It is always
     present; nothing hides it, pins it, or cuts it short partway down the
     page.

     - .timeline-tracker: invisible, in normal document flow. Exists only
       to generate a native view-timeline — it's never seen or painted.
       Its height spans the entire document and is set once by JS, on
       load/resize, never on scroll.
     - .rail-fixed: the visible line, position:fixed, same coordinate
       system as .path-system (avoids rail/label misalignment).
     - The fill (.fill) is painted by the compositor itself via
       animation-timeline: view() — never JS on each scroll frame. It's
       the only thing that resolves iOS's elastic bounce without lag.
     - Each label's gap is cut out with a real CSS mask (mask-image),
       rebuilt by JS only when the active label changes — never on every
       frame.
     - The line sits in its own z-index tier, ABOVE ordinary section
       backgrounds but BELOW the site's true full-bleed photographs
       (.panorama-strip, .almond-strip, .fuji-strip) and the panorama's
       own mirrored reflection (.panorama-botanical-sep — see each of
       their own rules). Those are given a higher z-index than the line
       for exactly this reason: it's a stacking-order guarantee, not a
       runtime calculation, so the line (and its label + label-gap, which
       share the same tier) can never paint over them at any scroll speed.
       If a future full-bleed photo (or photo-derived background, like
       the reflection) is added to the site, give it the same z-index
       (see --ink-line-z below) to keep it clear of the line too. Also
       give it the same permanent translateZ(0) GPU-layer promotion as
       the others (see next paragraph) or the fix below won't cover it.
     - iPad Safari rubber-band fix: z-index guarantees paint order only
       once every layer involved is settled. During the elastic
       overscroll bounce, Safari's tiled compositor can repaint
       position:fixed layers (.path-system/.rail-fixed) on a slightly
       different cycle than the full-bleed photos, letting the line/
       label flash above a photo for a single frame despite the z-index.
       Fix: every layer on both sides of that comparison — .path-system,
       .rail-fixed, .panorama-strip, .panorama-botanical-sep,
       .almond-strip, .fuji-strip — is promoted to its OWN permanent GPU
       layer (translateZ(0), always on, never toggled by JS or state
       classes). With nothing left to promote mid-gesture, there's
       nothing for Safari to resynchronize during the bounce.
     See shared.js, "READING PATH" section, for the remaining trigger
     logic (IntersectionObserver: active label only). */
  :root{
    --path-line-x: 14px;
    --path-line-width: 2px;
    --path-label-width: 16px;
    --gold-pale: #C98A7E;
    /* Stacking tier for the ink-scroll line + labels. Full-bleed photos
       use --ink-line-bleed-z (defined right after), one step above this. */
    --ink-line-z: 44;
    --ink-line-bleed-z: 45;
    timeline-scope: --path-fill;
  }

  @keyframes path-fill-grow{
    from{ transform:scaleY(0); }
    to{ transform:scaleY(1); }
  }

  .path-system{
    position:fixed; inset:0; pointer-events:none; z-index:var(--ink-line-z);
    opacity:0;
    transition:opacity 0.5s ease;
    /* iPad Safari rubber-band FIX: position:fixed alone doesn't guarantee
       a stable, permanent compositing layer — Safari's tiled compositor
       can still repaint this on its own cycle relative to the four
       full-bleed photo layers (.panorama-strip, .panorama-botanical-sep,
       .almond-strip, .fuji-strip — all now on their own permanent
       translateZ(0) layers, see each). During the elastic overscroll
       bounce that mismatch could let this briefly paint above one of
       them despite the lower z-index. Same fix, same reasoning, applied
       here so BOTH sides of every one of those stacking comparisons are
       now stable, permanently-promoted layers. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .path-system.path-revealed{ opacity:1; }
  .path-system.path-revealed.path-idle{ opacity:0.32; }

  .path-third{
    position:absolute; left:0; right:0; height:33.334vh;
    display:flex; align-items:center;
  }
  .path-third-top{ top:0; }
  .path-third-mid{ top:33.333vh; }
  .path-third-bottom{ top:66.666vh; }

  .path-label-shield{
    position:absolute;
    left:calc(var(--path-line-x) + (var(--path-line-width)/2) - (var(--path-label-width)/2));
    width:var(--path-label-width);
    display:flex; align-items:center; justify-content:center;
    background:transparent;
  }
  .path-label{
    text-align:center;
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:11px;
    line-height:var(--path-label-width);
    letter-spacing:0.24em;
    white-space:nowrap;
    color:var(--gold);
    font-weight:600;
  }
  /* Previous: the site's muted gray, dimmed to half — just a faint
     reminder of where you've been, shouldn't compete with the current one. */
  .path-prev{ color:var(--paper-dim); opacity:0.5; }
  /* Next: pale rust with its OWN TOKEN (--gold-pale), not --gold at
     reduced opacity — on dark backgrounds, --gold at low opacity visually
     blurs into gray. Also opacity:0.7 — a subtle hint of what's coming;
     it doesn't match the previous label's 0.5 because --gold-pale is
     already more muted than --gold to start with, and stacking both
     dimming effects would leave it nearly illegible. */
  .path-next{ color:var(--gold-pale); opacity:0.7; }

  .timeline-tracker{
    position:absolute;
    left:0; top:0; width:1px; height:0; /* real height set by JS */
    view-timeline-name: --path-fill;
    view-timeline-axis: block;
    visibility:hidden;
  }

  .rail-fixed{
    position:fixed;
    top:0; left:var(--path-line-x);
    width:var(--path-line-width); height:100vh;
    z-index:var(--ink-line-z);
    background:var(--hairline);
    opacity:0;
    transition:opacity 0.5s ease;
    /* iPad Safari rubber-band FIX — same reasoning as .path-system just
       above: a permanent GPU layer here too, so this element's repaint
       cycle can't drift from the full-bleed photos' during the elastic
       bounce. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /* Starting value, before JS computes each active label's real gap
       (recomputeGaps in shared.js) */
    -webkit-mask-image: linear-gradient(to bottom,
      black 0, black calc(16.667vh - 40px),
      transparent calc(16.667vh - 40px), transparent calc(16.667vh + 40px),
      black calc(16.667vh + 40px), black calc(50vh - 40px),
      transparent calc(50vh - 40px), transparent calc(50vh + 40px),
      black calc(50vh + 40px), black calc(83.333vh - 40px),
      transparent calc(83.333vh - 40px), transparent calc(83.333vh + 40px),
      black calc(83.333vh + 40px), black 100%);
    mask-image: linear-gradient(to bottom,
      black 0, black calc(16.667vh - 40px),
      transparent calc(16.667vh - 40px), transparent calc(16.667vh + 40px),
      black calc(16.667vh + 40px), black calc(50vh - 40px),
      transparent calc(50vh - 40px), transparent calc(50vh + 40px),
      black calc(50vh + 40px), black calc(83.333vh - 40px),
      transparent calc(83.333vh - 40px), transparent calc(83.333vh + 40px),
      black calc(83.333vh + 40px), black 100%);
  }
  .rail-fixed .fill{
    position:absolute; top:0; left:0; width:100%; height:100%;
    transform-origin:top; transform:scaleY(0);
    background:var(--gold);
    animation-name: path-fill-grow;
    animation-timeline: --path-fill;
    animation-fill-mode: both;
    animation-timing-function: linear;
    /* animation-range defaults to cover (full path) */
  }
  .rail-fixed.path-revealed{ opacity:1; }
  .rail-fixed.path-revealed.path-idle{ opacity:0.32; }

  /* Deliberate degradation: without animation-timeline: view(), the line
     exists as a fixed hairline but doesn't fill. There's no JS fallback. */
  @supports not (animation-timeline: view()){
    .rail-fixed .fill{ animation:none !important; }
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:auto;
    display:flex; flex-direction:column; align-items:center;
    position:relative;
    /* z-index:1 — NOT --ink-line-bleed-z. .hero and .panorama-botanical-sep
       never actually overlap in the box (normal document flow, with
       .botanical-svg-strip/.season-koh/.field-photo and the band's own
       padding-bottom sitting between them), so raising .hero to the photo
       tier was never needed for that reason and only had the side effect
       of pushing .hero's own flat background ABOVE the fixed ink-scroll
       rail/labels/mask-gap (--ink-line-z) wherever .hero is in view —
       hiding them behind .hero's background instead of letting them paint
       over it like every ordinary section. Kept at 1 (not 0/auto) purely
       to preserve the local stacking context the watermark ::after's
       negative z-index relies on (see that rule) — .panorama-botanical-sep's
       own reflection/gradient is untouched and stays at --ink-line-bleed-z. */
    z-index:1;
    /* Gap above is now .panorama-to-hero-band's own padding-bottom (see that
       rule) — no margin-top here anymore; see the comment there for why. */
    /* Padding unified with the generic section/footer/.hero rule below —
       .hero no longer carries its own padding declaration or breakpoints,
       so it now also picks up the 68px tablet value that section/footer
       already had (previously .hero stayed at 78px through tablet). */
    /* FIX: isolation:isolate removed — it was 100% redundant. position:relative
       + z-index:1 above already creates the stacking context needed to scope
       the watermark ::after's z-index:-1 to .hero, with zero visual change. */
    /* Deliberate hard cut into a new section with its own solid background —
       no fade, no blur, no transitional element of any kind between this and
       whatever sits above. */
    background:rgba(43,37,32,1);
  }


  /* Watermark "景道" — moved from ::before to ::after purely to free up ::before for the
     mist above; visual result is unchanged (still faint, still behind the Hero's own
     text: negative z-index + .hero's own stacking context — from position:relative +
     z-index:1 above — keeps it scoped locally). */
  .hero::after{
    content:"景道";
    position:absolute;
    font-family:var(--serif);
    font-size:min(46vw, 620px);
    color:rgba(168,57,43,0.05);
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    pointer-events:none;
    line-height:1;
    z-index:-1;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.3fr 0.7fr;
    gap:60px;
    align-items:center;
    width:100%;
    margin-top:1cm;
  }
  /* .hero-eyebrow: intentionally NOT the generic .eyebrow — this is the one
     place on the site where the section kicker is a decorative gold
     wordmark rather than a plain small-caps label, so it gets its own
     class (same pattern as .shunkaen-video-eyebrow / .inst-detail-eyebrow),
     leaving .eyebrow itself untouched everywhere else. It's still matched
     by shared.js's `[class*="eyebrow"]` fallback, so it keeps serving as
     the reading path's first label marker (markers[0]) with no JS changes. */
  .hero-eyebrow{
    display:block;
    margin-bottom:22px;
    font-family:'Cinzel Decorative', serif;
    font-weight:700;
    font-size:12.4px; /* was 13.8px, -10% per composition adjustment */
    letter-spacing:0.28em;
    text-transform:uppercase;
    /* Literal values, not var(--gold-deep/--gold-bright/--gold-pale):
       those tokens only exist scoped inside .lineage-poster-section, not
       at :root, so they'd resolve to nothing out here. --gold-pale in
       particular also collides with an UNRELATED :root value (#C98A7E,
       used by .path-next) — same name, two different colors depending on
       scope. Copied verbatim from .lineage-poster-section's local values
       (shared.css ~4883) to reproduce the identical gradient. */
    background:linear-gradient(135deg, #8B6914 0%, #E8B84B 35%, #FDF0C5 50%, #E8B84B 65%, #8B6914 100%);
    background-size:300% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer 5s linear infinite;
  }
  .hero-text h1{
    font-size:clamp(34px, 5vw, 58px);
    line-height:1.15;
    margin-bottom:24px;
    color:var(--ink); /* default h1 color (var(--paper)) is dark-on-light; the Hero now
                          sits on the same dark background as .basho, so it needs the same
                          light override .basho-body h2 already uses */
  }
  /* Rotating gold logo, relocated here from the old notebook-intro position, in the exact
     spot the four removed kanji used to occupy. Rotation/size/behaviour are untouched
     (same .gold3d-stage/.gold3d-object/.gold3d-face rules); only alignment is adapted so
     it sits left-aligned like the rest of the h1, since it now lives in a left-aligned
     column instead of the centered notebook-intro section. */
  .hero-text .gold-band{
    justify-content:flex-start;
    margin-bottom:10px;
  }
  .hero-text .jp-name-romaji{
    font-size:0.29em; /* was 0.575em, -50% per composition adjustment */
    display:block;
    margin-bottom:10px;
    letter-spacing:0.06em;
    font-family:'Cinzel Decorative', serif;
    font-weight:900;
    /* Same literal-value reasoning as .hero-eyebrow above: these gold
       tokens only exist scoped inside .lineage-poster-section, not at
       :root, so var() would fail silently out here. */
    background:linear-gradient(135deg, #8B6914 0%, #E8B84B 35%, #FDF0C5 50%, #E8B84B 65%, #8B6914 100%);
    background-size:300% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer 5s linear infinite;
    /* SAFARI/iPad COMPOSITING FIX: unlike .hero-eyebrow, this element sits
       inside the same <h1> as .gold-band > .gold3d-stage, whose
       perspective + transform-style:preserve-3d (continuously updated by
       JS for the rotating gold seal) forces the whole h1 into a shared
       3D compositing context. On iPad Safari (tiled compositor, not
       triggered on iPhone at this viewport/pixel-density), a masked
       (-webkit-background-clip:text) element with its OWN infinite
       animation, sharing that context with the seal's continuously
       updating 3D layer, intermittently drops a full repaint of the
       masked-text layer — read as a complete hide/show blink. Promoting
       this element to its own isolated compositing layer stops Safari
       from tying its repaint cycle to the rotating seal's, eliminating
       the blink. Does not touch .lineage-poster-section's identical
       shimmer usage there, which has no 3D-context sibling. */
    isolation:isolate;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .hero-text .full-name{
    font-size:0.27em; /* was 0.32em, -15% per composition adjustment */
    display:block;
    font-weight:600;
    font-style:italic;
  }
  .hero-text .lineage-line{
    font-size:0.27em; /* was 0.32em, -15% per composition adjustment */
    display:block;
    font-weight:600;
    font-style:italic;
    color:var(--ink-soft);
    opacity:0.75;
    letter-spacing:0.03em;
    margin-top:4px;
  }
  /* IMPORTANT: this block must stay AFTER the four base rules above
     (.hero-eyebrow, .jp-name-romaji, .full-name, .lineage-line). All
     selectors here have identical specificity to their base counterparts
     (one class each), so with equal specificity CSS resolves ties by
     source order, NOT by which one is wrapped in a @media query. A
     conditional media query does not "win" over an unconditional rule
     just for being conditional — if this block were placed BEFORE the
     base rules (as it was until now), the base rules would always win on
     every device, mobile included, silently discarding every value set
     here. That's exactly what was happening: none of the mobile-only
     size changes from prior rounds were ever actually rendering. */
  @media (max-width:480px) and (orientation:portrait){
    .hero-eyebrow{font-size:12.4px;} /* 13.8px -10% */
    .hero-text .jp-name-romaji{font-size:0.50em;} /* 0.48em +5% */
    .hero-text .full-name,
    .hero-text .lineage-line{font-size:0.37em;} /* 0.35em +5% */
  }

  /* Institutional band — distinctive header element */
  /* Simple left-to-right gradient over the block itself: starts
     losing intensity almost from the beginning and ends transparent at
     the right edge. No edge blurring, no extra bleed. */
  .hero-lineage-band{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin:26px 0 30px;
    padding:11px 26px;
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.06em;
    background:linear-gradient(90deg,
      rgba(168,57,43,0.55) 0%,
      rgba(168,57,43,0.48) 25%,
      rgba(168,57,43,0.38) 50%,
      rgba(168,57,43,0.22) 75%,
      rgba(168,57,43,0.08) 100%);
    border-radius:2px;
    position:relative;
  }
  .hero-lineage-band span.hlb-text{
    color:var(--ink-soft);
    line-height:1.8; /* standard paragraph line-height used site-wide (see body{}); the
                       .hlb-reveal wrapper is an inline-flex that centers hlb-text/hlb-cursor
                       as a unit, so the text's own (now taller) box height is what gets
                       centered — no leading asymmetry above/below the glyphs */
  }
  .hero-lineage-band::before{
    content:"印";
    font-family:var(--serif);
    font-size:14px;
    line-height:1;
    color:var(--ink-soft);
    opacity:0.75;
    border-right:1px solid rgba(251,247,238,0.30);
    padding-right:12px;
  }
  /* ---------- HERO · brush-writing reveal for the "Primer occidental…" band ----------
     Replaces the old ink-smoke blur/dissolve on this element. The band's own gradient
     background is untouched and fully visible from the start; only the text itself is
     revealed left→right, as if being brushed on, using a clip-path wipe instead of a
     character-count typewriter — this works correctly with the wrapped, multi-line text
     at any width instead of forcing a single fixed line. Triggered by the same
     .hero.smoke-play class/JS already used for the hero reveal group.
     .hlb-reveal is an inline-flex (not inline-block) so hlb-text and hlb-cursor are
     centered against one another as a single unit; combined with .hero-lineage-band's own
     align-items:center, the visible text is centered with zero optical compensation up
     or down. */
  .hlb-reveal{ position:relative; display:inline-flex; align-items:center; }
  .hlb-reveal .hlb-text{ display:inline-block; }
  .hero.smoke-play .smoke-hero-band .hlb-text{
    clip-path:inset(0 100% 0 0);
    animation:hlbBrushReveal 1.7s cubic-bezier(.65,0,.35,1) 0.6s forwards;
  }
  @keyframes hlbBrushReveal{
    to{ clip-path:inset(0 0% 0 0); }
  }
  /* Vertical writing line: appears only once the text's own brush reveal has fully
     finished (delay = the text's 0.6s start-delay + its 1.7s duration = 2.3s), painted in
     with the very same clip-path brush-stroke technique as the text above (top→bottom
     instead of left→right) — not a typing-cursor blink. */
  .hlb-cursor{
    display:inline-block;
    width:1px;
    height:1.8em; /* matches .hlb-text's line-height so this becomes the tallest element
                     in the row; the band's own 11px top/bottom padding then guarantees
                     ~3mm of clearance above and below inside the gradient, never touching
                     its edges, while reading clearly longer than the left-hand divider */
    margin-left:2px;
    background:currentColor;
    color:inherit;
    clip-path:inset(100% 0 0 0);
  }
  .hero.smoke-play .smoke-hero-band .hlb-cursor{
    animation:hlbCursorBrush 0.35s cubic-bezier(.65,0,.35,1) 2.3s forwards;
  }
  @keyframes hlbCursorBrush{
    to{ clip-path:inset(0 0 0 0); }
  }
  @media (max-width:840px){
    .hero-lineage-band{
      font-size:11.5px;
      padding:10px 18px;
      text-align:left;
      white-space:normal;
    }
  }
  @media (max-width:480px){
    .hero-lineage-band{display:flex;}
  }

  /* ---------- HERO · ink-blot mark ----------
     Ink-splash accent placed in its own row below the whole hero-grid
     (spans neither column), centered. Explicitly stripped of any
     background/shadow/filter — .hero-portrait img's sepia+shadow rule
     was previously leaking onto it when it lived inside that column. */
  .hero-ink-blot-wrap{
    display:flex;
    justify-content:center;
    margin-top:8px;
  }
  .hero-ink-blot{
    display:block;
    width:clamp(80px, 16vw, 107px);
    height:auto;
    margin:0;
    background:none;
    box-shadow:none;
    filter:none;
    pointer-events:none;
    user-select:none;
    opacity:0.9;
  }
  .hero-text p.lead{
    font-size:17px;
    color:var(--ink-soft);
    opacity:0.82;
    max-width:540px;
    margin-bottom:34px;
    font-weight:300;
  }
  .hero-cta{display:flex; gap:18px; flex-wrap:wrap;}
  /* Minimalist link-style CTA: kanji marker (red) + label + arrow (both in ink, bold when active) */
  .link-cta{
    display:inline-flex;
    align-items:baseline;
    gap:0.4em;
    font-family:var(--sans);
    font-size:14px;
    letter-spacing:0.04em;
    text-decoration:none;
    cursor:pointer;
    position:relative;
  }
  /* Ink-stroke underline growing left → right beneath the whole CTA
     (kanji + label + arrow), same brush language as the nav links. */
  .link-cta::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:-3px;
    height:1px;
    background:var(--gold-soft);
    transition:right 0.35s cubic-bezier(.55,0,.35,1);
  }
  .link-cta:hover::after,
  .link-cta.active::after{
    right:0;
  }
  .link-cta-kanji{
    font-family:var(--serif);
    font-size:1.35em;
    color:var(--gold-soft);
    line-height:1;
    margin-right:3px;
    transition:color 0.15s ease;
  }
  .link-cta-text{
    color:var(--paper);
    font-weight:500;
    transition:font-weight 0.15s ease;
  }
  .link-cta-arrow{
    display:inline-block;
    font-style:normal;
    color:var(--paper);
    font-size:0.95em;
    font-weight:400;
    transform:translateY(-0.05em);
    transition:font-weight 0.15s ease;
  }
  /* Hero sits on the same dark background as .basho now, so its two CTAs need the
     light-on-dark override (default .link-cta-text/-arrow color is dark-on-light,
     correct for every other place .link-cta is used on the page). */
  .hero-text .link-cta-text,
  .hero-text .link-cta-arrow{
    color:var(--ink-soft);
  }
  .link-cta:hover .link-cta-text,
  .link-cta:hover .link-cta-arrow{
    color:var(--gold-soft);
  }
  .link-cta.active .link-cta-kanji{
    color:var(--gold-dark);
  }
  .link-cta.active .link-cta-text,
  .link-cta.active .link-cta-arrow{
    font-weight:700;
  }

  /* Kakejiku signature element */
  .kakejiku-caption{
    text-align:left;
    font-size:11px;
    letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    margin-top:10px;
    font-family:var(--sans);
  }

  @media (max-width:840px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero-text p.lead{margin-left:auto; margin-right:auto;}
    .hero-cta{justify-content:center;}
    /* .hero-text .gold-band's justify-content:flex-start (declared above)
       only makes sense next to the two-column desktop grid, where it lines
       the rotating logo up flush with the left edge of the h1 text below
       it. Once the grid collapses to one full-width centered column here,
       that same flex-start instead pins the logo to the left edge of that
       now-wide column — off-center on the screen, not flush with anything
       anymore, since the text above/below it is centered, not left-aligned.
       Overriding to justify-content:center puts it back on the screen's
       true vertical axis, matching every centered element around it. */
    .hero-text .gold-band{justify-content:center;}
  }

  /* ---------- SECTION GENERIC ---------- */
  section, footer, .hero{padding:78px 0;}
  @media (max-width:640px){
    section, footer, .hero{padding:64px 0;}
  }
  /* Mobile-vertical only: top/bottom padding reduced a further 25% from the
     48px mobile-portrait value this used to carry (48px → 36px). Scoped to
     orientation:portrait so landscape phones, tablets, and iPad Pro (any
     orientation) keep the 78px/68px/64px values untouched. .hero included
     so it stays unified with section/footer at every breakpoint. */
  @media (max-width:640px) and (orientation:portrait){
    section, .hero{padding:36px 0;}
  }

  /* ---------- Section-boundary spacing parity (no divider present) ----------
     Where two top-level sections meet WITH a .kb-divider--icon between them,
     the total visual gap is: section padding-bottom (78px) + the divider's
     own box height (56px pad-top + 30px icon + 56px pad-bottom = 142px) +
     section padding-top (78px).
     Where two sections meet with NO divider (same body tone, no colour seam
     needed), the gap was only 78px + 78px — visibly tighter than every
     divider boundary, since it's missing the divider's 142px contribution.
     Fix: at boundaries with no divider, add half that divider box height
     (71px) to each side, so every section-to-section gap on the page reads
     the same regardless of whether a divider sits in it.
     :has()/adjacent-sibling scoping means this only ever matches a section
     whose very next (or previous) sibling is another <section> directly —
     i.e. exactly the no-divider case. Sections with their own explicit
     padding override (e.g. .lineage-poster-section) win on specificity and
     are unaffected. */
  section:has(+ section){
    padding-bottom:calc(78px + 71px);
  }
  section + section{
    padding-top:calc(78px + 71px);
  }
  @media (max-width:640px){
    section:has(+ section){
      padding-bottom:calc(64px + 71px);
    }
    section + section{
      padding-top:calc(64px + 71px);
    }
  }
  /* Mobile-vertical override — this rule previously had no portrait-specific
     version, so at portrait widths it fell back to the plain max-width:640px
     values above (135px/135px) via higher selector specificity, ignoring the
     36px portrait base entirely. That made every no-divider boundary far
     taller than every divider boundary in mobile-vertical. Fixed to the same
     base+71px formula used at the other breakpoints (36px + 71px = 107px).
     Later reduced a further 33% in mobile-vertical only (107px → 71.69px):
     the divider-parity math above still holds at every other breakpoint,
     this just tightens the no-divider seam specifically on phones held
     upright, where 107px read as noticeably more air than intended. */
  @media (max-width:640px) and (orientation:portrait){
    section:has(+ section){
      padding-bottom:71.69px; /* calc(36px + 71px) = 107px, -33% */
    }
    section + section{
      padding-top:71.69px; /* calc(36px + 71px) = 107px, -33% */
    }
  }
  .section-head{margin-bottom:42px; max-width:680px; container-type:inline-size; container-name:kb-comment-host;}
  .section-head .eyebrow{margin-bottom:14px; display:block;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:18px; text-wrap:balance;}
  .section-head p{color:var(--stone); font-size:17px; max-width:600px;}

  /* ---------- COLLECTION · header with decorative sugata-ishi portrait ---------- */
  /* Previously transparent, matching #teaching/#conferences-institutional
     by coincidence (all three let body{}'s washi gradient show through).
     Now shares the same flat --gravel as both, keeping the run consistent
     end to end. */
  #collection{
    background:var(--gravel);
  }
  .collection-head-grid{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:48px;
    align-items:start;
    margin-bottom:42px;
  }
  .collection-head-grid .section-head{margin-bottom:0;}
  .collection-head-grid .gallery-intro-note{
    margin-bottom:0;
    max-width:none;
  }
  .collection-head-image{
    margin:0;
    justify-self:end;
    cursor:pointer;
  }
  .collection-head-image img{
    width:100%;
    height:auto;
    display:block;
  }
  .collection-head-image figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:center;
  }
  @media (max-width:840px){
    .collection-head-grid{grid-template-columns:1fr; gap:28px;}
    .collection-head-image{justify-self:center; width:100%; max-width:280px;}
  }
  /* Mobile portrait (iPhone/Android held vertically) · sugata-ishi with a spectral, ethereal quality, 10% larger than the previous mobile size */
  @media (max-width:480px) and (orientation:portrait){
    .collection-head-image{max-width:154px;}
  }

  /* ---------- PATH (timeline) ---------- */
  /* #path never painted its own background, so at its position on the page
     the body's ambient tint (radial-gradient anchored at top-left, see
     body{} above) still showed through faintly — most visible near the
     left edge, fading toward the center — while #who-i-am right above it
     paints an opaque background:var(--ink) and reads perfectly flat. That
     mismatch was the "distant"/inconsistent look at the Identidad→Camino
     divider. Giving #path the same opaque background used throughout the
     site closes the seam, matching the established pattern. */
  #path{
    background:var(--ink);
  }

  /* #lineage never painted its own background either, so at its position
     on the page the body's ambient washi gradient still showed through —
     while #path right above it (see comment above) paints an opaque
     background:var(--ink) and reads perfectly flat. That mismatch was
     the "The Lineage" divider seam. Giving #lineage the same var(--ink)
     used by #path closes the seam, matching the established pattern. */
  #lineage{
    background:var(--ink);
  }
  .path-item h3{font-size:19px; margin-bottom:10px; font-weight:600;}
  .path-item p{font-size:17px; color:var(--paper-dim); max-width:620px;}
  .path-item p + p{margin-top:14px;}
  .path-item .when{
    font-family:var(--sans);
    font-size:13px;
    letter-spacing:0.1em;
    color:var(--gold);
    padding-top:4px;
    margin-bottom:6px;
  }

  /* ---------- LINEAGE ---------- */
  .lineage-block{
    display:grid;
    grid-template-columns:1.7fr 1.1fr 1.4fr;
    grid-template-rows:auto auto;
    gap:52px;
    align-items:start;
  }
  /* The section-head spans the first two columns, row 1 */
  .lineage-block .section-head{
    grid-column: 1 / 3;
    grid-row: 1;
    margin-bottom:0;
    max-width:none;
  }
  .lineage-intro-bridge{
    margin:0 0 22px;
    padding-left:24px;
    border-left:2px solid var(--gold-soft);
    font-style:italic;
    color:var(--stone);
  }
  .lineage-block .section-head p + p{margin-top:20px;}
  /* The photo column spans col 3, from row 1 to row 2 */
  .lineage-photo-col{
    grid-column: 3;
    grid-row: 1 / 3;
    position:sticky;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:28px;
    align-self:start;
  }
  /* The text+table spans col 1, row 2 */
  .lineage-text{
    grid-column: 1;
    grid-row: 2;
  }
  /* The chain spans col 2, row 2 */
  .lineage-chains-col{
    grid-column: 2;
    grid-row: 2;
    padding-left:20px;
    border-left:1px solid var(--hairline);
  }

  .kanji-table{width:100%; border-collapse:collapse; margin-top:8px;}
  .kanji-table th{
    text-align:left; font-family:var(--sans); font-size:11px;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);
    font-weight:500; padding-bottom:14px; border-bottom:1px solid var(--hairline);
  }
  .kanji-table td{
    padding:16px 0; border-bottom:1px solid var(--hairline);
    vertical-align:top; font-size:14px; color:var(--paper-dim);
  }
  .kanji-table .glyph{
    font-family:var(--serif); font-size:26px; color:var(--paper); width:54px;
  }
  .kanji-table .reading{color:var(--paper-dim); font-size:12px; display:block; margin-top:2px;}

  /* Left column: text + table */
  .lineage-text p{font-size:17px; color:var(--paper-dim); margin-bottom:18px;}
  .lineage-text strong{color:var(--paper); font-weight:500;}
  .lineage-chain{
    margin-top:0;
    margin-bottom:32px;
    padding-bottom:28px;
    border-bottom:1px solid var(--hairline);
  }
  .lineage-chain:last-child{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
  }
  .lineage-chain .eyebrow{display:block; margin-bottom:16px;}
  .chain-row{
    display:flex; align-items:flex-start; gap:10px;
    font-family:var(--serif); color:var(--paper); font-size:14px;
    margin-bottom:8px;
    flex-wrap:wrap;
  }
  .chain-row .dim{color:var(--paper-dim); font-family:var(--sans); font-size:11.5px; line-height:1.5;}
  .chain-row .arrow{color:var(--gold-soft); font-size:16px;}

  /* Right column: sliding stack — three-generation photo + noh figures */
  /* sticky from the start of the #lineage section to the end */
  .lineage-photo-col figure{
    margin:0;
    cursor:pointer;
  }
  .lineage-photo-col figure img{
    width:100%;
    height:auto;
    display:block;
    /* Light vignette to blend the photo into the overall tone */
    filter:sepia(0.06) saturate(0.95) brightness(1.02);
  }
  .lineage-photo-col figure figcaption{
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--stone);
    margin-top:10px;
    line-height:1.5;
    text-align:left;
  }
  .lineage-photo-col figure figcaption .lineage-photo-kanji{
    display:block;
    font-family:var(--serif);
    font-size:22px;
    font-weight:700;
    color:var(--gold-soft);
    letter-spacing:0.04em;
    margin-bottom:6px;
  }
  .lineage-photo-col figure figcaption .lineage-photo-kanji-tr{
    display:block;
    font-family:var(--sans);
    font-size:12.5px;
    font-style:italic;
    letter-spacing:0.02em;
    color:var(--paper-dim);
    margin-bottom:10px;
  }

  /* Noh figures: now part of the sliding stack, same visual treatment */
  .lineage-photo-col .noh-figure{
    margin:0;
  }
  .lineage-photo-col .noh-figure img{
    width:100%;
    height:auto;
    display:block;
    opacity:0.82;
    filter:sepia(0.1) saturate(0.95);
  }
  .lineage-photo-col .noh-figure figcaption{
    text-align:center;
  }

  @media (max-width:1040px){
    .lineage-block{grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto auto;}
    .lineage-block .section-head{grid-column:1 / 3; grid-row:1;}
    .lineage-text{grid-column:1; grid-row:2;}
    .lineage-chains-col{display:none;}
    .lineage-photo-col{grid-column:2; grid-row:2;}
  }
  @media (max-width:840px){
    .lineage-block{grid-template-columns:1fr; grid-template-rows:auto;}
    .lineage-block .section-head{grid-column:1; grid-row:auto;}
    .lineage-text{grid-column:1; grid-row:auto;}
    .lineage-chains-col{display:block; grid-column:1; grid-row:auto; border-left:none; padding-left:0; border-top:1px solid var(--hairline); padding-top:28px;}
    .lineage-photo-col{grid-column:1; grid-row:auto; position:static; flex-direction:row; flex-wrap:wrap;}
    .lineage-photo-col figure{flex:1 1 100%;}
  }

  /* Closing mon trio — libélula / mon / mantis, below the Lineage block
     (outside the grid, so the photo-column's sticky scroll has already
     finished before reaching this point). Links to the lineage research.

     Full-bleed 3-column grid: breaks out of .wrap (max-width:1080px) to
     span the true physical viewport edge to edge, using the same proven
     100vw + margin:calc(50% - 50vw) technique already used elsewhere on
     this site (see .panorama-to-hero-band, .botanical-svg-strip.contact-
     signature-grid) — vw units anchor to the real viewport regardless of
     any ancestor's box model, so this works nested inside .wrap exactly
     as it does at the body level. Each column centers its own figure
     both horizontally (justify-items) and vertically (align-items). */
  .lineage-mon-block{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    justify-items:center;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-top:0;
    /* padding-top removed — was stacking on top of the preceding
       .kb-divider--diamond's own 84px/63px padding-bottom, making this
       gap taller than the divider's gap to the element above it. Now
       matches every other .kb-divider--diamond instance (e.g. Rokkon
       Shōjō), where the divider's own padding is the only spacer. */
    position:relative;
    text-align:center;
    padding:0 32px;
  }
  /* Libélula / mantis flanking photos. No dedicated width previously
     existed for these — the <img> rendered at its native intrinsic size
     (1599px / 1147px), which is the "gigantic, everyone piled up"
     breakage. Capped here at the same 320px desktop width already used
     for the other standalone collection photo on this page (the Noble
     de la corte Heian figure, .shunkaen-closing-figure), so all three
     "collection piece" photos read as the same visual weight.
     align-self:end (overriding the block's align-items:center just for
     these two) bottom-aligns each flank — image + figcaption together —
     against the other flank, so both captions sit on the same baseline
     regardless of the two photos' different heights. The mon link in the
     center column keeps the block's default vertical centering. */
  .lineage-mon-flank{
    display:flex;
    flex-direction:column;
    align-items:center;
    align-self:end;
    cursor:pointer;
    margin:0;
  }
  .lineage-mon-flank img{
    width:100%;
    max-width:320px;
    height:auto;
    display:block;
  }
  /* Mantis: 160px (50% of the base 320px) increased 10% to 176px. */
  .lineage-mon-flank--mantis img{
    max-width:176px;
  }
  /* Caption styling matches the site-standard collection-photo figcaption
     used throughout (e.g. .lineage-photo, .path-photo, .okukyo-bamboo-box)
     — font-family:var(--sans), 11px, 0.06em tracking, var(--stone), 1.5
     line-height, 10px top margin — centered here since the figure itself
     is centered in its column (the left-aligned variant used in the
     two-column .lineage-photo-col layout doesn't apply in this centered,
     full-bleed row). */
  .lineage-mon-flank figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }
  .lineage-mon-link{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-decoration:none;
    cursor:pointer;
  }
  .lineage-mon-img{
    width:3cm;
    height:3cm;
    transition:transform 0.3s ease;
  }
  .lineage-mon-link:hover .lineage-mon-img{
    transform:scale(1.06);
  }
  .lineage-mon-caption{
    display:inline-flex;
    align-items:baseline;
    gap:0.3em;
    font-family:var(--sans);
    font-size:11.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--stone);
    transition:color 0.2s ease;
  }
  .lineage-mon-link:hover .lineage-mon-caption{
    color:var(--gold-soft);
  }
  /* Mobile (phones): mon shrinks from 3cm to 2cm.
     600px matches the breakpoint already used on the site for "phone"
     (see the contact section pair); tablets like iPad Pro and
     laptops/desktop stay at the base 3cm size. */
  @media (max-width:600px){
    .lineage-mon-img{
      width:2cm;
      height:2cm;
    }
  }
  /* Portrait phones (and other narrow screens): three columns side by
     side has no room. Stack into a single centered column instead —
     mon emblem first (it's the anchor of the trio), then libélula, then
     mantis, each centered and each below the previous one. The DOM order
     is libélula → mon → mantis (so the mon sits visually between its two
     flanking photos on desktop's 3-column row); `order` re-sequences the
     stack for mobile without touching that desktop-meaningful markup
     order. */
  @media (max-width:840px){
    .lineage-mon-block{
      grid-template-columns:1fr;
      row-gap:40px;
    }
    .lineage-mon-link{order:-1;}
    .lineage-mon-flank--libelula{order:1;}
    .lineage-mon-flank--mantis{order:2;}
    .lineage-mon-flank img{max-width:240px;}
    .lineage-mon-flank--mantis img{max-width:132px;}
  }

  /* ---------- PHILOSOPHY ---------- */
  .philosophy{
    background:var(--ink-soft);
  }

  /* Section title spans the full width */
  #philosophy .section-head{
    max-width:none;
    margin-bottom:40px;
  }

  /* Main text: continuous newspaper-style flow.
     SITEWIDE COLUMN-GAP STANDARD — the only three text-flow multi-column
     blocks on the site (.philosophy-text-grid here, .philosophy-expand-single
     below, and .suiseki-text-grid in the Suiseki essay) share these exact
     values: 48px gap at 3 columns, 56px gap once it collapses to 2 columns
     at 1200px (56 rather than a plain scale-down of 48, since the same gap
     reads noticeably tighter next to only two, wider columns of text). Keep
     all three in sync if either value ever changes. */
  .philosophy-text-grid{
    column-count:3;
    column-gap:48px;
    column-fill:balance;
  }
  .philosophy-text-grid p{
    font-size:16px;
    color:var(--paper-dim);
    margin-bottom:18px;
    line-height:1.8;
  }
  @media (max-width:1200px){
    .philosophy-text-grid{column-count:2; column-gap:56px;}
  }
  @media (max-width:680px){
    .philosophy-text-grid{column-count:1;}
  }

  /* Kanji quote as typographic separator — central visual anchor */
  .philosophy-kanji-anchor{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin:52px 0 44px;
    position:relative;
  }
  .philosophy-kanji-anchor::before,
  .philosophy-kanji-anchor::after{
    content:'';
    display:block;
    width:1px;
    height:36px;
    background:linear-gradient(to bottom, transparent, var(--hairline));
    margin:0 auto;
  }
  .philosophy-kanji-anchor::after{
    background:linear-gradient(to bottom, var(--hairline), transparent);
  }
  .philosophy-kanji-glyph{
    font-family:var(--serif);
    font-size:clamp(48px, 7vw, 80px);
    color:var(--paper);
    letter-spacing:0.12em;
    line-height:1;
    margin:16px 0 14px;
    opacity:0.88;
  }
  .philosophy-kanji-reading{
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
    margin-bottom:6px;
  }
  .philosophy-kanji-gloss{
    font-family:var(--sans);
    font-size:13.5px;
    color:var(--stone);
    font-style:italic;
    max-width:440px;
    line-height:1.6;
  }

  /* Row of three kanji sentences, same design as philosophy-kanji-anchor, aligned to page width */
  .philosophy-kanji-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    align-items:start;
    margin-top:64px;
    margin-bottom:48px;
  }
  .philosophy-kanji-row .philosophy-kanji-anchor{
    margin:0;
  }
  .philosophy-kanji-row .philosophy-kanji-gloss{
    max-width:none;
  }
  /* CSS letter-spacing adds trailing space AFTER every character, including
     the last one — that trailing space is counted in the element's centered
     box, so a single-character glyph (Kei) visually sits half a
     letter-spacing left of true center. The two multi-character sentences
     don't show this (the extra space is proportionally tiny next to a whole
     sentence), so the negative counter-margin below is scoped to the
     single-glyph case only. */
  .philosophy-kanji-row .philosophy-kanji-glyph:not(.is-sentence){
    margin-right:-0.12em;
  }
  @media (max-width:1040px){
    .philosophy-kanji-row{grid-template-columns:1fr; gap:48px;}
  }
  /* Modifier for long kanji sentences (several characters) within the row — the base single-character glyph (Kei) is unaffected */
  .philosophy-kanji-row .philosophy-kanji-glyph.is-sentence{
    font-size:clamp(22px, 2.6vw, 30px);
    letter-spacing:0.06em;
    line-height:1.4;
  }

  /* Expandable block: same continuous newspaper-style flow */
  .philosophy-expand{
    margin-top:0;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .philosophy-expand > summary{
    margin-top:0;
    margin-bottom:0;
  }
  /* Same sitewide column-gap standard as .philosophy-text-grid above: 48px
     at 3 columns, 56px once collapsed to 2 (see that comment for why). */
  .philosophy-expand-single{
    margin-top:20px;
    margin-bottom:0;
    column-count:3;
    column-gap:48px;
    column-fill:balance;
  }
  .philosophy-expand-single p{
    font-size:17px;
    color:var(--paper-dim);
    margin-bottom:18px;
    line-height:1.85;
  }
  /* The col divs must not break the flow */
  .philosophy-expand-single > div{
    display:contents;
  }
  @media (max-width:1040px){
    .philosophy-expand-single{column-count:2; column-gap:56px;}
  }
  @media (max-width:760px){
    .philosophy-expand-single{column-count:1;}
  }

  /* Philosophy images: stacked one below the other, full width */
  .philosophy-cinematic-row{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-top:60px;
  }
  .philosophy-cinema-col{
    display:flex;
    flex-direction:column;
  }
  .philosophy-cinema-item{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    background:var(--paper-dim);
    width:100%;
  }
  .philosophy-cinema-item img{
    width:100%;
    height:auto;
    display:block;
    transition:transform 0.6s ease, opacity 0.4s ease;
    opacity:0.92;
  }
  .philosophy-cinema-item:hover img{
    transform:scale(1.015);
    opacity:1;
  }
  .philosophy-cinema-caption{
    margin-top:10px;
    background:transparent;
    position:static;
  }
  .philosophy-cinema-caption .cinema-gloss{
    display:block;
    font-family:var(--sans);
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.05em;
    opacity:0.85;
    line-height:1.5;
  }
  @media (max-width:840px){
    .philosophy-cinema-item img{
      width:100%;
      height:auto;
    }
  }
  @media (max-width:640px){
    .philosophy-kanji-glyph{font-size:52px;}
  }


  /* ---------- BASHO ---------- */
  .basho{
    background:var(--paper);
    position:relative;
    isolation:isolate;
  }
  /* Subtle warm vignette so the Bashō aside reads as its own quiet pocket of tone
     (echoing the landscape thread from Suiseki) without a hard section break */
  .basho::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 88% 82% at 50% 45%, rgba(168,57,43,0.08), transparent 78%);
    pointer-events:none;
    z-index:0;
  }
  .basho-grid{
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:end;
    position:relative;
    z-index:1;
  }
  .basho-grid + .basho-haiku-grid{
    margin-top:56px;
  }
  .basho-figure{
    text-align:center;
    /* Nudges the figure down so its top edge reads level with the h2 title
       in .basho-body, rather than with the small eyebrow label above it. */
    margin-top:clamp(30px,3.4vw,36px);
  }
  .basho-figure img{
    width:100%; max-width:391px; height:auto;
    margin:0 auto;
    filter:sepia(0.15) saturate(0.9) brightness(1.18);
  }
  .basho-figure figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5; text-align:center;
    color:var(--stone);
  }
  /* Haiku row: comment block (haiku + attribution) on the left, carved frog
     netsuke on the right, both bottom-aligned so the two blocks read as a
     single balanced unit. Now a sibling row of .basho-grid (its own .wrap),
     not nested inside .basho-body, so it spans the full section width on
     its own instead of needing a cqi-based width/margin correction. */
  .basho-haiku-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:end;
    position:relative;
    z-index:1;
  }
  .basho-haiku-col{
    min-width:0;
    /* container-query host for the .kb-comment instance placed inside this column */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .basho-frog-figure{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .basho-frog-figure img{
    width:100%; max-width:150px; height:auto;
    margin:0 auto;
    filter:sepia(0.12) saturate(0.92) brightness(1.1);
  }
  .basho-frog-figure figcaption{
    margin-top:10px;
    max-width:360px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5; text-align:center;
    color:var(--stone);
  }
  .basho-body .eyebrow{display:block; margin-bottom:14px;}
  .basho-body h2{font-family:var(--serif); color:var(--ink); font-size:clamp(26px,3.4vw,38px); margin-bottom:22px; letter-spacing:0.01em;}
  .basho-jp{
    font-family:var(--serif); font-weight:400; color:var(--gold-soft);
    font-size:0.62em; letter-spacing:0.06em; margin-left:4px;
  }
  .basho-body p{font-size:17px; color:var(--ink-soft); opacity:0.82; margin-bottom:16px;}
  .basho-haiku{
    font-family:var(--serif);
    line-height:1.9;
    color:var(--ink);
  }
  .basho-haiku .jp{display:block; font-size:19px; margin-bottom:6px;}
  .basho-haiku .romaji{display:block; font-family:var(--sans); font-size:12.5px; font-style:italic; color:var(--stone); letter-spacing:0.02em; margin-bottom:4px;}
  .basho-haiku .gloss-translation{display:block; font-family:var(--sans); font-size:14px; color:var(--stone); font-weight:300;}
  .basho-attr{
    font-family:var(--sans); font-size:12px; letter-spacing:0.06em; color:var(--stone); opacity:0.75;
  }
  @media (max-width:840px){
    .basho-grid{grid-template-columns:1fr;}
    .basho-figure{order:2; margin-top:0;}
    .basho-body{order:1;}
    .basho-grid + .basho-haiku-grid{margin-top:36px;}
    .basho-haiku-grid{grid-template-columns:1fr;}
    .basho-frog-figure{margin:32px auto 0;}
  }
  /* Large screens (iPad Pro 12.9" portrait and up): figure enlarged 25%
     over the base 340px, plus the 15% bump above (340 * 1.25 * 1.15 ≈ 489px).
     Bottom-alignment itself now comes from the base .basho-grid rule above,
     since .basho-grid contains only the figure + text columns (the haiku
     row was moved out to its own sibling grid) — the figure's caption lands
     exactly on the last line of the paragraph text at every width ≥841px. */
  @media (min-width:1024px){
    .basho-figure img{
      max-width:489px;
    }
  }
  /* Mobile portrait: enlarge the Bashō ceramic figure 25% beyond its normal
     100%-of-container width by bleeding past the .wrap side padding, kept
     centered via matching negative margins. Frog netsuke figure and caption
     are untouched here. */
  @media (max-width:640px) and (orientation:portrait){
    .basho-figure img{
      width:125%;
      max-width:125%;
      margin-left:-12.5%;
      margin-right:-12.5%;
    }
  }

  /* ---------- BCI ---------- */
  .bci{
    background:#E1EDF2;
  }
  .bci-head-row{
    display:grid;
    grid-template-columns:1fr 240px;
    gap:50px;
    align-items:start;
  }
  .bci-head-row .bci-head{margin-bottom:0;}
  .bci-logo-col img{
    width:100%; max-width:240px; height:auto; display:block;
  }
  @media (max-width:840px){
    .bci-head-row{grid-template-columns:1fr;}
    .bci-logo-col{order:-1; max-width:160px; margin:0 0 8px;}
    .bci-logo-col img{max-width:160px;}
  }
  .bci-head{max-width:760px;}
  .bci-head .bci-dateline{
    font-family:var(--sans); font-size:12px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--gold); font-weight:500;
    margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline);
    max-width:460px;
  }
  .bci-head .bci-lead{
    font-family:var(--serif); font-style:italic; font-size:19px;
    color:var(--gold-soft); max-width:none; margin-top:16px; margin-bottom:16px;
  }
  .bci-body{max-width:760px;}
  .bci-body p{font-size:17px; color:var(--paper-dim); margin-bottom:18px;}
  .bci-body h3{
    font-family:var(--serif); color:var(--paper); font-weight:600;
    font-size:clamp(20px,2.4vw,26px); letter-spacing:0.01em;
    margin:40px 0 18px;
  }
  .bci-diploma{
    margin:48px auto 0; max-width:820px; text-align:center;
  }
  .bci-diploma img{
    width:100%; height:auto;
    border:1px solid var(--hairline);
  }
  .bci-diploma figcaption{
    margin-top:10px; font-family:var(--sans); font-size:11px;
    letter-spacing:0.06em; line-height:1.5; color:var(--stone); text-align:left;
  }
  .bci-cta{margin-top:38px; display:flex; flex-direction:column; align-items:flex-start; gap:18px;}

  /* ---------- WBU ---------- */
  /* Pastel ember tint — same hue family as --gold-dark, but lifted to a pale,
     tenue tone so it reads as a soft accent rather than a saturated block
     between the two darker sections around it (BCI's ambient washi,
     Traditional School's --moss-deep). Because the surface is pale again,
     text/accents return to the site's default light-background palette
     (--paper, --paper-dim, --gold, var(--hairline)) instead of the --ink
     family used for dark hosts. */
  .wbu{
    background:#F2E3E1;
  }
  /* Logo row: exact clone of .bci-head-row so the WBU logo sits in the
     same position, relative to the title, as the BCI logo does above. */
  .wbu-head-row{
    display:grid;
    grid-template-columns:1fr 293px;
    gap:50px;
    align-items:start;
  }
  .wbu-head-row .wbu-head{margin-bottom:0;}
  .wbu-logo-col img{
    width:100%; max-width:293px; height:auto; display:block;
  }
  @media (max-width:840px){
    .wbu-head-row{grid-template-columns:1fr;}
    .wbu-logo-col{order:-1; max-width:200px; margin:0 0 8px;}
    .wbu-logo-col img{max-width:200px;}
  }
  /* Body row: paragraphs (left) + course gallery (right), one photo per
     row. align-items:start puts both columns' first line at the exact
     same y — the top edge of the first photo lines up with the top edge
     of the first paragraph's first line. */
  .wbu-body-row{
    display:grid;
    grid-template-columns:1fr 293px;
    gap:50px;
    align-items:start;
  }
  .wbu-gallery{
    display:flex; flex-direction:column; gap:32px;
  }
  .wbu-gallery figure{margin:0;}
  .wbu-gallery img{
    width:100%; max-width:293px; height:auto; display:block;
    border:1px solid var(--hairline);
  }
  .wbu-gallery figcaption{
    margin-top:10px; font-family:var(--sans); font-size:11px;
    letter-spacing:0.06em; line-height:1.5; color:var(--paper-dim); text-align:left;
  }
  @media (max-width:840px){
    .wbu-body-row{grid-template-columns:1fr;}
    .wbu-gallery{max-width:200px; margin-top:28px;}
    .wbu-gallery img{max-width:200px;}
  }
  /* Mobile portrait (iPhone/Android held vertically) · the four course
     photos go full page width and center themselves, instead of staying
     capped at the 200px tablet size above. */
  @media (max-width:480px) and (orientation:portrait){
    .wbu-gallery{max-width:100%; width:100%; margin-left:auto; margin-right:auto;}
    .wbu-gallery img{max-width:100%; margin:0 auto;}
  }
  .wbu-head{max-width:760px;}
  .wbu-head .eyebrow{color:var(--gold);}
  .wbu-head h2{color:var(--paper);}
  .wbu-head .wbu-dateline{
    font-family:var(--sans); font-size:12px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--gold); font-weight:500;
    margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline);
    max-width:460px;
  }
  .wbu-head .wbu-lead{
    font-family:var(--serif); font-style:italic; font-size:19px;
    color:var(--gold-soft); max-width:none; margin-top:16px; margin-bottom:16px;
  }
  .wbu-body{max-width:760px;}
  .wbu-body p{font-size:17px; color:var(--paper-dim); margin-bottom:18px;}
  .wbu-body h3{
    font-family:var(--serif); color:var(--paper); font-weight:600;
    font-size:clamp(20px,2.4vw,26px); letter-spacing:0.01em;
    margin:40px 0 18px;
  }
  .wbu-photo{
    margin:48px auto 44px; max-width:820px; text-align:center;
  }
  .wbu-photo img{
    width:100%; height:auto;
    border:1px solid var(--hairline);
  }
  .wbu-photo figcaption{
    margin-top:10px; font-family:var(--sans); font-size:11px;
    letter-spacing:0.06em; line-height:1.5; color:var(--paper-dim); text-align:left;
  }
  /* The closing certificate sits directly before .wbu-cta, which already
     supplies its own margin-top — no extra bottom gap needed here. */
  .wbu-photo-close{margin-bottom:0;}
  .wbu-cta{margin-top:38px;}

  /* Accordion reused from .form-topics (Training section). On this pale
     background the shared base rules (--paper-dim / --gold / --hairline)
     already apply correctly, so no dark-mode recolouring is needed here. */

  /* ---------- TEACHING: photo on top + grids below ---------- */
  /* Previously painted no background of its own (transparent, letting
     body{}'s tinted washi gradient show through). Now matches
     #training-itineraries's flat --gravel so the new divider between them
     has a real, consistent seam to sit on instead of two backgrounds that
     could never be made identical (one flat, one gradient). */
  #teaching{
    background:var(--gravel);
  }
  .teaching-photo-header{
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:start;
    margin-bottom:40px;
  }
  .teaching-photos-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.5cm;
    align-items:start;
    justify-items:center;
  }
  .teaching-photos-col figure{
    margin:0;
    width:100%;
    max-width:240px;
    cursor:pointer;
  }
  .teaching-photo{
    width:100%;
    height:auto;
    display:block;
  }
  .teaching-photos-col figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  .teaching-header-text .section-head{margin-bottom:0;}
  @media (max-width:840px){
    .teaching-photo-header{grid-template-columns:1fr; gap:28px;}
    .teaching-photos-col{grid-template-columns:1fr 1fr;}
    .teaching-photos-col figure{max-width:none;}
    .teaching-photo{width:100%; max-width:none;}
  }
  @media (max-width:480px){
    .teaching-photos-col{grid-template-columns:1fr;}
  }

  /* ---------- SCHOOL / CREDENTIALS ---------- */
  .cred-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:40px;
    row-gap:36px;
    margin-top:10px;
  }
  .cred-cell .num{
    font-family:var(--serif); color:var(--gold); font-size:28px; display:block; margin-bottom:10px;
  }
  .cred-cell h4{font-family:var(--sans); color:var(--paper); font-size:14.5px; font-weight:500; margin-bottom:8px; letter-spacing:0.01em;}
  .cred-cell p{font-size:13.5px; color:var(--stone); line-height:1.6;}
  @media (max-width:900px){
    .cred-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:500px){
    .cred-grid{grid-template-columns:1fr; row-gap:0;}
    .cred-cell{padding:28px 0;}
    .cred-cell:first-child{padding-top:0;}
    .cred-cell:not(:first-child){border-top:1px solid var(--hairline);}
  }

  .instructor-list{
    margin-top:42px;
    margin-bottom:22px;
    display:flex; flex-direction:column;
    border-top:1px solid var(--hairline);
  }
  .instructor-item{ border-bottom:1px solid var(--hairline); }
  .instructor-summary{
    display:flex; align-items:center; gap:16px;
    padding:16px 0;
    cursor:pointer;
    list-style:none;
    transition:opacity .2s;
  }
  .instructor-summary::-webkit-details-marker{ display:none; }
  .instructor-summary:hover{ opacity:.78; }
  .instructor-summary-top{ display:flex; align-items:flex-start; gap:16px; flex:1; }
  .instructor-num{
    font-family:var(--serif); font-size:13px; color:var(--gold);
    letter-spacing:0.1em; flex-shrink:0; min-width:20px; padding-top:2px;
  }
  .instructor-text{display:flex; flex-direction:column;}
  .instructor-role{
    display:block;
    font-family:var(--sans); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--gold); margin-bottom:4px;
  }
  .instructor-name{
    font-family:var(--sans); font-size:14px; color:var(--paper);
  }
  .instructor-toggle{
    align-self:center; flex-shrink:0;
    font-family:var(--sans); font-size:17px; color:var(--gold);
    width:16px; text-align:center; line-height:1;
  }
  .instructor-toggle::before{ content:"+"; }
  details.instructor-item[open] .instructor-toggle::before{ content:"−"; }
  .instructor-body{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
  }
  details.instructor-item[open] .instructor-body{
    max-height:900px;
  }
  .instructor-detail{
    padding:0 0 26px 36px;
  }
  .instructor-detail::after{ content:""; display:table; clear:both; }
  .instructor-logo{
    float:left;
    width:60px; height:42px;
    object-fit:contain; object-position:left center;
    margin:2px 20px 12px 0;
  }
  .instructor-detail-title{
    font-family:var(--serif); font-size:16px; font-weight:600;
    color:var(--paper); margin-bottom:12px; letter-spacing:0.01em;
  }
  @media (max-width:600px){
    .instructor-detail{ padding-left:0; }
    .instructor-logo{ width:48px; height:34px; margin:2px 14px 10px 0; }
  }

  /* ---------- CONFERENCES AND INSTITUTIONAL ACTIVITY ---------- */

  .inst-timeline{
    position:relative;
    max-width:760px;
    margin:0 0 64px;
    padding-left:28px;
    border-left:1px solid var(--hairline);
  }

  .inst-item{ position:relative; margin-bottom:2px; }
  .inst-item::before{
    content:"";
    position:absolute;
    left:-33px; top:26px;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold);
  }

  .inst-item summary{
    list-style:none;
    cursor:pointer;
    padding:20px 0;
    border-bottom:1px solid var(--hairline);
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
  }
  .inst-item summary::-webkit-details-marker{ display:none; }

  .inst-item summary .inst-heading{ flex:1; min-width:0; }
  .inst-item summary .inst-date{
    font-family:var(--sans); font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--gold); font-weight:500;
    display:block; margin-bottom:6px;
  }
  .inst-item summary .inst-title{
    font-family:var(--serif); font-size:17px; color:var(--paper);
    font-weight:600; line-height:1.45;
  }
  .inst-item summary .inst-toggle{
    font-family:var(--sans); font-size:20px; color:var(--stone);
    line-height:1; flex-shrink:0; transition:transform .25s ease;
    margin-top:4px;
  }
  .inst-item[open] summary .inst-toggle{ transform:rotate(45deg); }

  .inst-item .inst-body{
    display:block;
    max-height:0;
    overflow:hidden;
    padding:0 0 26px;
    max-width:600px;
    transition:max-height 0.4s ease;
  }
  .inst-item[open] .inst-body{
    max-height:900px;
  }
  .inst-item .inst-body p{
    font-size:15px; color:var(--paper-dim); line-height:1.75;
  }
  /* Reuses .instructor-detail / .instructor-logo (see Teaching and Career)
     so any accordion item with a logo gets identical size, alignment and
     text-wrap behaviour without redefining anything here. */
  .inst-item .instructor-detail{ padding-top:18px; padding-left:0; }
  .inst-item .inst-body a{
    color:var(--gold); text-decoration:none; border-bottom:1px solid var(--hairline);
  }
  .inst-item .inst-body a:hover{ border-bottom-color:var(--gold); }

  /* ---------- Detail sub-block (expanded Rokkon Shōjō, reached via "Continue reading") ---------- */
  .inst-detail{
    max-width:none;
    margin:0 0 64px;
  }
  /* #rokkon-shojo-detail (the only .inst-detail instance) is followed
     directly by a .kb-divider--diamond. Its own 64px margin-bottom was
     stacking on top of the divider's padding, making that specific
     diamond sit in a much taller gap than the other diamond dividers on
     the page (which have no margin from their preceding element). Zeroed
     out here so the divider's own padding is the only spacer, matching
     every other .kb-divider--diamond instance. */
  #rokkon-shojo-detail{
    margin-bottom:0;
  }
  .inst-detail-eyebrow{
    font-family:var(--sans); font-size:12px; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--gold); font-weight:500;
    display:block; margin-bottom:14px;
  }
  .inst-detail-title{
    font-size:clamp(22px,2.8vw,30px);
    margin-bottom:12px;
  }
  .inst-detail-lead{
    font-family:var(--serif); font-style:italic; font-size:17px;
    color:var(--gold-soft); margin-bottom:8px;
  }

  /* ---------- Rich sub-entry (Rokkon Shōjō expanded detail) ---------- */
  .inst-body-rich{ max-width:none; margin-top:28px; }
  .inst-body-rich > p{ max-width:720px; }
  .inst-body-rich h4{
    font-family:var(--serif); color:var(--paper); font-weight:600;
    font-size:17px; letter-spacing:0.01em;
    margin:32px 0 14px;
  }
  .inst-body-rich h4:first-child{ margin-top:0; }

  .rokkon-masters-note{ font-size:13px; color:var(--stone); margin-bottom:18px; }
  .rokkon-masters-grid{
    list-style:none; margin:0; padding:0;
    columns:2; column-gap:40px;
    border-top:1px solid var(--hairline);
  }
  .rokkon-masters-grid li{
    display:flex; justify-content:space-between; gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--hairline);
    break-inside:avoid;
    font-family:var(--sans); font-size:14px;
  }
  .rokkon-master-name{ color:var(--paper); }
  .rokkon-master-role{ color:var(--gold); font-size:11.5px; letter-spacing:0.04em; text-align:right; white-space:nowrap; }
  @media (max-width:640px){
    .rokkon-masters-grid{ columns:1; }
  }

  /* ---------- Ongoing collaborations (undated, no timeline dot) ---------- */
  .inst-subhead{
    font-family:var(--sans); font-size:12px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--stone); font-weight:500;
    margin:0 0 24px;
  }
  .inst-ongoing{ max-width:760px; }
  .inst-ongoing .inst-item::before{ display:none; }

  @media (max-width:640px){
    .inst-timeline{ padding-left:20px; }
    .inst-item::before{ left:-25px; }
    .inst-item summary{ gap:12px; }
  }

  /* ---------- Timeline + side photo column ---------- */
  /* #conferences-institutional previously painted no background of its
     own (transparent, same "let body{}'s washi gradient show through"
     approach as #teaching and #collection). Now matches --gravel so the
     whole #teaching → #conferences-institutional → #collection run shares
     one real, consistent flat tone instead of three sections that only
     ever matched each other by coincidentally all being transparent. */
  .inst-section{
    background:var(--gravel);
  }
  .inst-section-head{ margin-bottom:28px; }

  .inst-layout{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:72px;
    align-items:start;
    max-width:none;
  }
  .inst-layout .inst-timeline{ max-width:none; margin-bottom:0; }

  .inst-main{ min-width:0; }
  .inst-intro{
    color:var(--stone); font-size:17px; max-width:600px;
    margin:0 0 36px;
  }

  .inst-side-photos{
    display:flex;
    flex-direction:column;
    gap:20px;
    position:sticky;
    top:110px;
  }
  .inst-badges{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .inst-badge{ margin:0; }
  .inst-badge img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
  .inst-badge figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:center;
  }
  .inst-vertical-photo{ margin:0; cursor:pointer; }
  .inst-vertical-photo img{
    width:100%; height:auto; display:block;
    border:1px solid var(--hairline);
  }
  .inst-vertical-photo figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  @media (max-width:860px){
    .inst-layout{ grid-template-columns:1fr; gap:0; }
    .inst-side-photos{
      flex-direction:row;
      flex-wrap:wrap;
      position:static;
      max-width:400px;
      margin:32px auto 0;
    }
    .inst-badges{ flex-direction:row; flex-wrap:wrap; width:100%; }
    .inst-badge{ width:calc(50% - 10px); }
    .inst-vertical-photo{ width:calc(50% - 10px); }
  }
  @media (max-width:600px){
    /* Phones only (not tablets): the workshop photo breaks out of the
       400px badges column and matches the full width of the horizontal
       photo strip below it, centered. */
    .inst-side-photos{ max-width:none; }
    .inst-badges{ max-width:340px; margin:0 auto; }
    .inst-vertical-photo{ width:100%; }
  }

  /* ---------- Horizontal photo strip (between timeline and Rokkon Shōjō) ---------- */
  .inst-horizontal-photos{
    margin:56px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .inst-horizontal-photos figure{ margin:0; cursor:pointer; }
  .inst-horizontal-photos img{
    width:100%; height:auto; display:block;
    border:1px solid var(--hairline);
  }
  .inst-horizontal-photos figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  @media (max-width:600px){
    .inst-horizontal-photos{ grid-template-columns:1fr; }
  }

  /* ---------- Club Amigos del Bonsái de Fuenlabrada: 3-photo row ---------- */
  .inst-fuenlabrada-detail{ margin-top:8px; }
  .inst-fuenlabrada-photos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    margin-top:24px;
  }
  .inst-fuenlabrada-photos figure{ margin:0; cursor:pointer; }
  .inst-fuenlabrada-photos img{
    width:100%; height:auto; display:block;
    border:1px solid var(--hairline);
  }
  .inst-fuenlabrada-photos figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  @media (max-width:600px){
    .inst-fuenlabrada-photos{ grid-template-columns:1fr; }
  }

  /* ---------- Rokkon Shōjō: text beside stacked vertical photos ---------- */
  .inst-rokkon-layout{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:40px;
    align-items:start;
  }
  .inst-rokkon-vertical-photos{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .inst-rokkon-vertical-photos figure{ margin:0; cursor:pointer; }
  .inst-rokkon-vertical-photos img{
    width:100%; height:auto; display:block;
    border:1px solid var(--hairline);
  }
  .inst-rokkon-vertical-photos figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  .inst-rokkon-horizontal{
    margin:28px 0 0;
    cursor:pointer;
  }
  .inst-rokkon-horizontal img{
    width:100%; height:auto; display:block;
    border:1px solid var(--hairline);
  }
  .inst-rokkon-horizontal figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  .inst-rokkon-accreditation{
    margin:52px auto 26px; max-width:169px; cursor:pointer;
  }
  .inst-rokkon-accreditation img{
    width:100%; height:auto; display:block;
  }
  .inst-rokkon-accreditation figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:center;
  }
  @media (max-width:640px){
    .inst-rokkon-layout{ grid-template-columns:1fr; }
    .inst-rokkon-vertical-photos{ flex-direction:row; }
    .inst-rokkon-vertical-photos figure{ width:calc(50% - 8px); }
    .inst-rokkon-accreditation{ max-width:133px; }
  }
  @media (max-width:640px) and (orientation:portrait){
    .inst-rokkon-vertical-photos{ flex-direction:column; }
    .inst-rokkon-vertical-photos figure{ width:100%; }
  }

  /* ---------- PUBLICATIONS ---------- */
  .publications{
    background:var(--paper);
  }
  .publications .section-head h2{color:var(--ink);}
  .publications .section-head p{color:var(--ink-soft); opacity:0.82; font-size:17px;}

  .publications-grid{
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:70px;
    align-items:start;
  }
  .publications-col-left, .publications-col-right{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .publications-hand-icon{
    flex:0 0 auto;
    width:24px;
    height:24px;
    margin-top:2px;
  }
  .publications-hand-icon svg{
    width:100%;
    height:100%;
    display:block;
  }

  .publications-quotes{
    list-style:none;
    margin:0; padding:0;
  }
  .publications-quotes li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-family:var(--serif);
    font-size:15.5px;
    line-height:1.85;
    color:var(--ink-soft);
    padding:0 0 26px;
    margin-bottom:26px;
  }
  .publications-quotes li:last-child{margin-bottom:0; padding-bottom:0;}
  .publications-quote-text{
    text-align:left;
    min-width:0;
  }
  .publications-quotes li em{
    font-style:italic;
    color:var(--ink);
  }

  .publications-mosaic{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:22px;
    position:relative;
  }
  .publications-mosaic figure{
    margin:0;
    cursor:pointer;
  }
  .publications-mosaic img{
    width:100%;
    height:auto;
    display:block;
    filter:sepia(0.06) saturate(0.95) brightness(1.02);
  }
  .publications-mosaic-caption{
    margin:18px auto 0;
    max-width:280px;
    text-align:center;
    background:var(--paper);
    border:1px solid var(--hairline);
    box-shadow:0 6px 18px rgba(0,0,0,0.10);
    padding:9px 14px;
    font-family:var(--sans);
    font-size:10px;
    letter-spacing:0.05em;
    line-height:1.45;
    color:var(--stone);
  }

  .publications-online{
    margin-top:0;
  }
  .publications-online-eyebrow{
    display:block;
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--stone);
    opacity:0.85;
    margin-bottom:18px;
  }
  .publications-print-eyebrow{
    display:block;
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--stone);
    opacity:0.85;
    margin-bottom:18px;
  }
  .publications-online-icon svg{
    width:100%;
    height:100%;
    display:block;
  }
  .publications-quote-text a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  .publications-quote-text a:hover,
  .publications-quote-text a:focus-visible{
    border-bottom-color:currentColor;
  }

  /* ---------- Standard section-break divider system ----------
     Two reusable variants for marking chapter/section transitions in
     flowing content, both built on the same line-based skeleton:
       .kb-divider.kb-divider--diamond → line – diamond – line
       .kb-divider.kb-divider--icon    → line – Japanese line-art symbol – line
     The dot variant (.kb-divider--dots) formerly used here has been
     retired site-wide: every dot-divider instance was converted to
     .kb-divider--diamond, so this is the only two-variant system in use.
     Markup:
       <div class="kb-divider kb-divider--diamond" aria-hidden="true">
         <span class="kb-divider-line"></span>
         <span class="kb-divider-mark"></span>
         <span class="kb-divider-line"></span>
       </div>
       <div class="kb-divider kb-divider--icon" aria-hidden="true">
         <span class="kb-divider-line"></span>
         <svg class="kb-divider-icon" viewBox="0 0 48 48" fill="none">…</svg>
         <span class="kb-divider-line"></span>
       </div>
     .kb-divider--icon is reserved for section breaks that occur where the
     background colour does NOT change (so no visual seam already exists);
     each instance carries a distinct hand-drawn symbol chosen for the
     content it sits between — never reused elsewhere on the page. */
  .kb-divider{
    /* Same solid flat color as every section it sits between (var(--ink)),
       so the seam reads as a continuous flat paper surface instead of
       leaking the body's washi noise/gradient tint. Uses padding instead
       of margin (identical 56px spacing, sections carry no margin of
       their own to collapse with) so the background actually paints the
       full gap edge-to-edge, not just the icon/line row. */
    background:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding-top:56px;
    padding-bottom:56px;
  }
  .kb-divider-line{
    height:1px;
    width:4cm;
    max-width:15vw;
    background:linear-gradient(to right, transparent, var(--gold));
  }
  .kb-divider-line:last-child{
    background:linear-gradient(to left, transparent, var(--gold));
  }
  .kb-divider--diamond .kb-divider-mark{
    width:7px;
    height:7px;
    flex:0 0 auto;
    background:var(--gold);
    transform:rotate(45deg);
  }
  /* Diamond dividers (rhombus + fading lines) mark a subsection break INSIDE
     a section that already has its own background — they must never paint
     a fill of their own, or they'd punch a flat var(--ink) rectangle over
     whatever tone/texture the parent section carries.
     Spacing is 50% taller than the base .kb-divider (84px vs 56px) since
     these subsection breaks read as cramped at the base rhythm. */
  .kb-divider--diamond{
    background:none;
    padding-top:84px;
    padding-bottom:84px;
  }
  @media (max-width:640px) and (orientation:portrait){
    .kb-divider--diamond{padding-top:63px; padding-bottom:63px;}
  }

  /* ---------- kb-divider--icon tone corrections ----------
     .kb-divider defaults to background:var(--ink), which is correct for
     most instances (both flanking sections are var(--ink)). Where the two
     sections actually flanking a specific divider use a different tone,
     the divider must match that tone instead, or a hairline-flat seam
     shows against the section's real texture/tint. */
  /* "Path of the Lineage" divider: between #path-lineage (ink-soft) and
     #philosophy (ink-soft). */
  #path-lineage + .kb-divider{
    background:var(--ink-soft);
  }
  /* Divider between #training-itineraries and #teaching: both now paint
     the same flat --gravel background (see --gravel definition), closing
     out the run that starts here and continues through #teaching,
     #conferences-institutional and #collection. */
  #training-itineraries + .kb-divider{
    background:var(--gravel);
  }

  /* Divider between #teaching and #conferences-institutional: both now
     paint a flat --gravel background (previously both were transparent;
     see --gravel definition), so the divider matches that same tone. */
  #teaching + .kb-divider{
    background:var(--gravel);
  }
  /* Divider between #conferences-institutional and #collection: same
     shared --gravel tone as above. */
  #conferences-institutional + .kb-divider{
    background:var(--gravel);
  }
  /* Divider before the Shunkaen video: between #publications (paper) and
     #shunkaen (paper). */
  #publications + .kb-divider{
    background:var(--paper);
  }
  .kb-divider--icon .kb-divider-icon{
    width:30px;
    height:30px;
    flex:0 0 auto;
    stroke:var(--gold);
    color:var(--gold);
  }

  .publications-collaborate{
    /* Top spacing matches .kb-divider--diamond's own padding-top/bottom
       (84px desktop, 63px mobile) so this closing note reads at the same
       vertical rhythm as the diamond subsection breaks used elsewhere on
       the page, rather than the tighter 40px it used before. */
    font-family:var(--sans);
    font-size:12.5px;
    letter-spacing:0.03em;
    line-height:1.6;
    color:var(--ink-soft);
    opacity:0.85;
    margin:84px 0 0;
    padding-top:18px;
    border-top:1px solid var(--hairline);
  }
  @media (max-width:640px) and (orientation:portrait){
    .publications-collaborate{margin-top:63px;}
  }

  @media (max-width:840px){
    .publications-grid{grid-template-columns:1fr; gap:44px;}
  }
  @media (max-width:480px){
    .publications-mosaic{gap:14px;}
    .publications-mosaic-caption{max-width:220px; font-size:9px; padding:7px 9px;}
  }

  /* ---------- TRADITIONAL SCHOOL (teaching philosophy) ---------- */
  .traditional-school{
    background:var(--moss-deep);
    --kb-comment-echo-on-dark: color-mix(in srgb, var(--moss) 42%, white 58%);
  }
  .traditional-school-head{
    display:flex;
    align-items:flex-start;
    gap:24px;
    margin-bottom:18px;
  }
  .traditional-school-mottos{
    margin-bottom:32px;
    display:flex;
    flex-direction:column;
    gap:16px;
    /* container-query host for the .kb-comment instances placed inside */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .traditional-school-head img{
    width:64px; height:64px; object-fit:contain; flex-shrink:0;
    margin-top:0.15em;
  }
  .traditional-school-head h2{
    font-family:var(--serif); color:var(--ink); font-size:clamp(22px,2.8vw,32px);
    letter-spacing:0.01em; line-height:1.3;
  }
  .traditional-school-motto{
    margin:0 0 18px;
    align-self:flex-start;
    max-width:100%;
  }
  /* The brush and the kanji line live in their OWN flex row, nothing else.
     align-items:flex-end pins both bottom edges to the same line — this is
     an exact, engine-computed alignment, not a guessed offset. romaji/es
     sit in a separate block underneath at full width, so the reference
     look (brush left, kanji to its right, rest of the quote below) holds
     without relying on float-wrap math. */
  .traditional-school-motto-head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:12px;
    /* font-size set here (matching .jp) so the icon's "1em" below is tied
       to the actual kanji type size, not an inherited body size. */
    font-size:19px;
    margin-bottom:6px;
  }
  .traditional-school-motto-icon{
    display:block;
    flex-shrink:0;
    /* Height = one em (≈ the kanji's own em-box, which is what CJK glyphs
       are drawn to fill) + a real 3mm overshoot above it — an absolute
       physical unit, so it's exact on screen regardless of font metrics,
       not a pixel value reverse-engineered from a render we can't see.
       Width is intentionally omitted: the image's own intrinsic ratio
       (viewBox 1617.86 x 2675.33, ~0.6047 — cropped tight to the ink,
       ~1-2px bleed margin, transparent background) sets it automatically
       from the height. Because the crop is tight to the ink, the image's
       own bottom edge IS the brush tip, so align-items:flex-end on the
       row above lines the brush tip up with the kanji baseline exactly —
       no fudge factor. */
    height:calc(1em + 3mm);
    width:auto;
  }
  /* Mobile portrait only: brush reads oversized next to the smaller wrapped
     kanji line at phone widths, so scale it down 15% (same reduction pattern
     as .enso-divider img below) while keeping the flex-end/em-based formula
     that pins the brush tip to the kanji baseline. */
  @media (max-width:600px) and (orientation:portrait){
    .traditional-school-motto-icon{
      height:calc((1em + 3mm) * 0.85);
    }
  }
  .traditional-school-motto-head .jp{
    display:block; font-family:var(--serif); font-size:1em; line-height:1; color:var(--ink);
  }
  .traditional-school-motto-text{
    min-width:0;
  }
  .traditional-school-motto-text .romaji{
    display:block; font-family:var(--sans); font-size:12.5px; font-style:italic;
    letter-spacing:0.02em; color:var(--ink-soft); opacity:0.65; margin-bottom:4px;
  }
  .traditional-school-motto-text .gloss-translation{
    display:block; font-family:var(--sans); font-size:14px; color:var(--ink-soft); opacity:0.85; font-weight:300;
  }

  .traditional-school-grid{
    display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; align-items:start;
  }
  .traditional-school-body, .traditional-school-side{min-width:0;}
  .traditional-school-body{
    /* container-query host for the closing .kb-comment note placed inside */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .traditional-school-body p{
    font-size:17px; line-height:1.8; color:var(--ink-soft); opacity:0.92; margin-bottom:18px;
  }
  /* typography modifier for the closing .kb-comment instance — the base
     component (marks, glow, dropcap) lives in the shared block above */
  .traditional-school-closing-note p{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    color:var(--ink-soft);
    opacity:0.92;
    line-height:1.85;
    letter-spacing:0.015em;
    /* Spacing between paragraphs is the flex gap on .kb-comment-inner now
       — no per-paragraph margin-bottom / :last-of-type reset needed. */
  }
  .traditional-school-side{
    display:flex; flex-direction:column; align-items:center; gap:28px;
  }
  .traditional-school-side .logo-big{
    width:100%; max-width:220px; height:auto; display:block;
    will-change:opacity;
  }
  .traditional-school-portrait{
    text-align:center; width:100%;
  }
  .traditional-school-portrait img{
    width:100%; max-width:320px; height:auto; display:block; margin:0 auto;
  }
  #school-logo-portrait{
    display:flex; flex-direction:column; align-items:center; gap:28px; width:100%;
  }
  .traditional-school-shikishi{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .traditional-school-shikishi img{
    width:100%; max-width:220px; height:auto;
    display:block;
  }
  .traditional-school-shikishi figcaption{
    width:100%; max-width:220px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5; color:var(--ink-soft); margin-top:10px; text-align:left;
  }
  @media (max-width:840px){
    .traditional-school-grid{grid-template-columns:1fr; gap:36px;}
    /* Source order already puts .traditional-school-body (title + text)
       before .traditional-school-side (images) in the HTML — no `order`
       override here, so the stacked mobile layout follows that same
       order: title and text first, images below. */
    .traditional-school-side{align-items:center; margin:0 auto;}
    .traditional-school-head{gap:16px;}
    .traditional-school-head img{width:48px; height:48px;}
    .traditional-school-side .logo-big{max-width:300px;}
    #school-logo-portrait .logo-big{max-width:300px;}
  }


  .gallery-tabs{display:flex; gap:10px 34px; margin-bottom:44px; flex-wrap:wrap;}
  .gallery-tab{
    position:relative;
    font-family:var(--sans); font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
    font-weight:500;
    color:var(--stone); padding:8px 0 11px; border:none;
    background:none; cursor:pointer; transition:color 0.3s ease;
  }
  .gallery-tab::after{
    content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:0; height:2px; background:var(--gold); transition:width 0.3s ease;
  }
  .gallery-tab .tab-count{
    color:var(--stone); font-size:10.5px; margin-left:9px; opacity:0.6;
  }
  .gallery-tab.active{color:var(--gold); font-weight:600;}
  .gallery-tab.active .tab-count{color:var(--gold); opacity:0.75;}
  .gallery-tab.active::after{width:85%;}
  .gallery-tab:hover:not(.active){color:var(--paper);}
  .gallery-tab:hover:not(.active)::after{width:85%; background:var(--hairline);}

  .gallery-subfilters{
    display:flex; gap:10px 26px; flex-wrap:wrap;
    margin:0 0 28px;
    padding-top:24px;
    border-top:1px solid var(--hairline);
  }
  .gallery-subfilters.is-hidden{display:none;}
  .subfilter{
    position:relative;
    font-family:var(--sans); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
    font-weight:400;
    color:var(--stone); padding:5px 0 8px; border:none;
    background:none; cursor:pointer; transition:color 0.25s ease; opacity:0.62;
  }
  .subfilter::after{
    content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:0; height:1.5px; background:var(--moss); transition:width 0.25s ease;
  }
  .subfilter .sf-count{font-size:9.5px; margin-left:7px; opacity:0.6;}
  .subfilter.active{color:var(--moss); font-weight:600; opacity:1;}
  .subfilter.active .sf-count{opacity:0.7;}
  .subfilter.active::after{width:80%;}
  .subfilter:hover:not(.active){color:var(--paper); opacity:0.9;}
  .subfilter:hover:not(.active)::after{width:80%; background:var(--hairline);}
  .gallery-item.sf-hidden{display:none;}

  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
  }
  .gallery-grid.is-hidden{display:none;}

  .gallery-item{
    overflow:hidden;
    border:1px solid var(--hairline);
    position:relative;
    cursor:pointer;
    background:#0A0A0A;
  }
  .gallery-grid[data-grid="bonsai"] .gallery-item{ aspect-ratio:4/3; }
  .gallery-grid[data-grid="suiseki-landscape"] .gallery-item{ aspect-ratio:3/2; }
  .gallery-grid[data-grid="suiseki-figure"] .gallery-item{ aspect-ratio:3/2; }
  .gallery-grid[data-grid="suiseki-pattern"] .gallery-item{ aspect-ratio:1648/954; }
  .gallery-grid[data-grid="suiseki-scenic"] .gallery-item{ aspect-ratio:1648/954; }
  .gallery-item img{
    width:100%; height:100%; object-fit:cover; display:block; object-position:center center;
  }
  .gallery-item:hover img,
  .gallery-item:focus-visible img{filter:sepia(0.02) saturate(1.05);}
  .gallery-item::after{
    content:"";
    position:absolute; inset:0;
    border:1px solid transparent;
    transition:border-color 0.3s ease;
    pointer-events:none;
  }
  .gallery-item:hover::after,
  .gallery-item:focus-visible::after{border-color:var(--gold);}
  .gallery-item .item-num{
    position:absolute; left:0; bottom:0; right:0;
    background:linear-gradient(0deg, rgba(43,37,32,0.82), transparent);
    color:var(--ink);
    font-family:var(--sans); font-size:10.5px; letter-spacing:0.1em;
    padding:16px 10px 8px;
    opacity:0; transition:opacity 0.3s ease;
  }
  .gallery-item:hover .item-num{opacity:1;}

  @media (max-width:900px){
    .gallery-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:640px){
    .gallery-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  }

  /* ---------- LIGHTBOX ---------- */
  /* Fixed washi/ivory backdrop: intentionally NOT tied to color-scheme or
     prefers-color-scheme. The lightbox must always read as a continuation
     of the site's own paper/washi surface — a gallery room, not a generic
     dark viewer — regardless of the visitor's OS or browser theme. */
  .lightbox{
    position:fixed; inset:0; z-index:200;
    background-color:rgba(251,247,238,0.97);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.66 0 0 0 0 0.59 0 0 0 0 0.47 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    display:flex;
    align-items:center; justify-content:center;
    padding:40px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .lightbox.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity 0.35s ease, visibility 0s linear 0s;
  }
  .lightbox-figure{
    max-width:min(900px, 92vw);
    max-height:88vh;
    display:flex; flex-direction:column; align-items:center;
    gap:16px;
    transform:scale(0.96);
    transition:transform 0.35s ease;
  }
  .lightbox.open .lightbox-figure{ transform:scale(1); }
  .lightbox-figure img{
    max-width:100%; max-height:78vh;
    object-fit:contain;
    border:1px solid var(--hairline);
    background:var(--washi);
    box-shadow:0 24px 60px rgba(43,37,32,0.18);
    /* Paired with the .is-loaded toggle in shared.js: the browser keeps
       showing an <img>'s previous pixels on screen until its new src has
       finished loading/decoding, so without this the last photo stayed
       visible for a beat when switching to a different one (close, scroll,
       open another). Hidden by default and revealed only once the new
       image has actually loaded. */
    opacity:0;
    transition:opacity 0.2s ease;
  }
  .lightbox-figure img.is-loaded{
    opacity:1;
  }
  .lightbox-caption{
    font-family:var(--sans); font-size:12px; letter-spacing:0.1em;
    color:var(--paper-dim); text-align:center;
  }
  .lightbox-counter{
    font-family:var(--sans); font-size:11px; letter-spacing:0.14em;
    color:var(--paper-dim); opacity:0.7;
    text-align:center;
  }
  .lightbox-close{
    position:absolute; top:24px; right:28px;
    /* z-index required: .lightbox-figure is a flex item of .lightbox, and
       per the flexbox spec flex items paint in the same stacking layer as
       z-index:auto positioned elements, ordered by DOM position. Since this
       button precedes <figure> in the markup, without an explicit z-index
       the figure — and the potentially near-full-viewport image inside it
       on narrow screens — would paint on top of it. */
    z-index:2;
    background:rgba(251,247,238,0.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    border:1px solid var(--hairline);
    color:var(--paper); width:42px; height:42px;
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(43,37,32,0.08);
    transition:border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  }
  .lightbox-close:hover{border-color:var(--gold); color:var(--gold);}
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    /* Same reasoning as .lightbox-close above: without this, the prev/next
       buttons sit behind .lightbox-figure once the image is wide enough to
       reach under them — which on portrait mobile (image up to 92vw) it
       routinely is, making the arrows nearly unclickable. */
    z-index:2;
    background:rgba(251,247,238,0.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    border:1px solid var(--hairline);
    color:var(--paper); width:46px; height:46px;
    font-size:20px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(43,37,32,0.08);
    transition:border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  }
  .lightbox-nav:hover{border-color:var(--gold); color:var(--gold);}
  .lightbox-prev{left:24px;}
  .lightbox-next{right:24px;}
  @media (max-width:640px){
    .lightbox{padding:20px;}
    .lightbox-nav{width:38px; height:38px; font-size:16px;}
    .lightbox-prev{left:8px;}
    .lightbox-next{right:8px;}
    .lightbox-close{top:14px; right:14px; width:36px; height:36px;}
  }

  /* ---------- INLINE PHOTOS ---------- */
  .hero-portrait{
    justify-self:center;
    width:100%;
    max-width:320px;
    position:relative;
  }
  .hero-portrait img{
    width:100%; display:block;
    filter:sepia(0.12) saturate(0.9);
    box-shadow:0 18px 50px rgba(0,0,0,0.45);
  }
  .path-photo{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .path-photo.three{grid-template-columns:repeat(3, minmax(0,1fr));}
  .path-photo figure{margin:0;}
  .path-photo .photo-frame{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--ink-soft);
  }
  .path-photo img{
    width:100%; height:100%; object-fit:contain;
    display:block;
  }
  .path-photo figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  @media (max-width:640px){
    .path-photo{grid-template-columns:1fr;}
    .path-photo.three{grid-template-columns:1fr;}
  }

  .lineage-photo{margin-top:40px;}
  .lineage-photo img{
    width:100%; display:block;
  }
  .lineage-photo figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }

  /* ---------- PATH OF THE LINEAGE (Oku no Kyomatsu) ---------- */
  .okukyo{
    background:var(--ink-soft);
  }
  .okukyo-head-with-bamboo{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:60px;
    margin-bottom:0;
    max-width:none;
  }
  .okukyo-head-text{min-width:0;}
  .okukyo-bamboo-box{
    width:320px;
    max-width:100%;
    margin:0 auto;
  }
  .okukyo-bamboo-frame{
    height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .okukyo-bamboo-frame img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .okukyo-bamboo-box figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }
  @media (max-width:840px){
    .okukyo-head-with-bamboo{grid-template-columns:1fr;}
    .okukyo-bamboo-box{width:240px; margin:0 auto;}
    .okukyo-bamboo-frame{height:285px;}
  }
  .okukyo-virtues{
    display:flex; gap:34px; flex-wrap:wrap;
    margin:22px 0 8px;
  }
  .okukyo-virtues span{
    font-family:var(--sans); font-size:12px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--gold-soft); font-weight:500;
  }
  .okukyo-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
    margin-top:50px; align-items:stretch;
  }
  .okukyo-body{
    display:flex; flex-direction:column;
    /* container-query host for the A-Un .kb-comment note placed inside */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .okukyo-body p{font-size:17px; color:var(--paper-dim); margin-bottom:18px;}
  /* .okukyo-body is a flex column, so its children's margins never collapse
     the way they do in normal block flow elsewhere on the site — the last
     paragraph's margin-bottom would simply add to .aun-note's new
     margin-top instead of yielding to it. Zeroing it here reproduces the
     same 42px gap every other .kb-comment instance gets for free, so this
     note follows the sitewide rule exactly rather than ending up with its
     own one-off spacing. */
  .okukyo-body > p:last-of-type{ margin-bottom:0; }
  /* typography modifier for the A-Un .kb-comment instance */
  .aun-note p{
    font-family:var(--serif);
    font-style:italic;
    font-size:16px;
    color:var(--stone);
    letter-spacing:0.015em;
    font-weight:400;
    line-height:1.85;
  }
  .okukyo-photos{
    display:flex; flex-direction:column; gap:32px;
    margin-top:48px;
  }
  .okukyo-photo-vertical{
    max-width:340px; margin:0 auto;
  }
  .okukyo-photo-vertical img{
    width:100%; display:block;
  }
  .okukyo-photo-horizontal img{
    width:100%; display:block;
  }
  .okukyo-photos figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  @media (max-width:840px){
    .okukyo-grid{grid-template-columns:1fr; gap:40px;}
    .okukyo-virtues{gap:22px;}
  }

  /* ---------- CONTACT / FOOTER ---------- */
  footer{text-align:center;}
  .contact-signature-grid{
    display:grid;
    grid-template-columns:auto auto;
    column-gap:22px;
    row-gap:16px;
    align-items:center;
    justify-content:center;
    margin:10px auto 22px;
  }
  .contact-signature-img{
    display:block;
    height:104px;
    width:auto;
    justify-self:start;
  }
  @media (max-width:600px){
    .contact-signature-grid{column-gap:14px; row-gap:12px;}
    .contact-signature-img{height:72px;}
  }
  footer p{color:var(--stone); max-width:480px; margin:0 auto 32px;}
  .footer-meta{
    margin-top:80px; padding-top:30px; border-top:1px solid var(--hairline);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
    font-size:12px; color:var(--stone); letter-spacing:0.04em;
  }
  .footer-social{
    display:flex; align-items:center; gap:14px;
  }
  .footer-social a{
    color:var(--stone); opacity:0.7; transition:opacity 0.25s, color 0.25s;
    display:flex; align-items:center;
  }
  .footer-social a:hover{color:var(--gold); opacity:1;}

  /* ---------- Footer notice: informational disclosure about Vimeo,
     collapsed by default, native <details> so no JS is needed. Kept
     visually minimal — a footnote, not a banner. ---------- */
  .footer-notice{
    max-width:480px;
    margin:20px auto 0;
    text-align:center;
    font-size:11px;
    color:var(--stone);
  }
  .footer-notice summary{
    cursor:pointer;
    letter-spacing:0.04em;
    opacity:0.7;
    transition:opacity 0.25s;
    list-style:none; /* hide default marker so ::before below is the only one */
  }
  .footer-notice summary::-webkit-details-marker{ display:none; }
  .footer-notice summary::before{
    content:'+ ';
    color:var(--gold);
    display:inline-block;
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  .footer-notice summary:hover::before{ transform:scale(1.15); }
  .footer-notice[open] summary::before{ content:'– '; }
  .footer-notice summary:hover{ opacity:1; }
  .footer-notice p{
    margin:10px auto 0;
    max-width:440px;
    line-height:1.7;
    color:var(--stone);
    opacity:0.85;
  }
  .footer-notice a{ color:var(--stone); text-decoration:underline; }
  .footer-notice a:hover{ color:var(--gold); }

  .footer-credit{
    text-align:center;
    margin-top:0.5em;
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.02em;
  }
  @media (max-width:600px){
    .footer-meta{
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:10px;
    }
    .footer-social{ margin-top:4px; }
    /* Final credit: on narrow screens it splits into two lines —
       "Created by..." on top, "With the assistance of..." below. The dot
       separator only existed to join both parts on a single line, so it
       disappears as soon as they become independent lines. */
    .footer-credit-dot{ display:none; }
    .footer-credit-assist{ display:block; margin-top:0.35em; }
  }
  /* ---------- CLOSING / EPILOGUE ---------- */
  .epilogue{
    background:var(--ink);
    overflow:hidden;
  }
  .epilogue .wrap{
    max-width:760px;
    text-align:center;
  }
  .epilogue-mark{
    font-family:var(--serif);
    color:var(--gold-soft);
    font-size:20px;
    margin-bottom:46px;
    opacity:0.7;
  }
  .epilogue-quote{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    color:var(--paper);
    line-height:1.85;
    letter-spacing:0.015em;
  }
  .epilogue-image{
    margin:0 auto 64px;
    max-width:400px;
  }
  .epilogue-image img{
    width:100%; height:auto; display:block;
  }
  .epilogue-image.small{
    max-width:min(660px, 92vw);
    margin-bottom:0;
  }
  .epilogue-whisper{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:12px;
    text-align:left;
    font-family:var(--serif);
    font-style:italic;
    color:var(--paper-dim);
    font-size:18px;
    letter-spacing:0.02em;
    margin-bottom:10px;
  }
  /* Brush icon set beside the phrase as a single graphic unit: a flex row with
     align-items:flex-end keeps the icon to the left and the text immediately to its
     right, both bottom-aligned so the brush tip (the crop is tight to the ink, so its
     own bottom edge is the tip) lands on the text's baseline. height = 1em (tied to
     .epilogue-whisper's own font-size) + a real 3mm overshoot, same formula as
     .traditional-school-motto-icon. width is omitted so the image's own intrinsic ratio
     sets it from the height. */
  .epilogue-whisper-icon{
    flex:0 0 auto;
    height:calc(1em + 3mm);
    width:auto;
  }
  /* Mobile portrait only: the phrase wraps to two lines here, and
     align-items:flex-end above (correct for the single-line case) would
     drag the brush down to sit beside the *second* line instead. Since the
     icon's height is only ~1 line + a small overshoot, flipping to
     flex-start lands its bottom edge on the first line instead — i.e. the
     brush stays with the line it was drawn for, and the wrapped second
     line simply continues underneath it. */
  @media (max-width:600px) and (orientation:portrait){
    .epilogue-whisper{
      align-items:flex-start;
    }
  }
  .epilogue-path{
    width:100vw;
    margin:64px calc(50% - 50vw) 0;
    aspect-ratio:80/29;
    overflow:hidden;
  }
  .epilogue-path img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  @media (max-width:600px){
    .epilogue-path{
      margin-top:48px;
    }
  }

  /* ---------- PILGRIM — closing image above "Contact" ---------- */
  .footer-pilgrim{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:flex-end;
    gap:16px;
    margin:0 auto 0.9cm;
    cursor:pointer;
  }
  .footer-pilgrim img{
    grid-column:2;
    width:160px;
    height:auto;
    display:block;
  }
  .footer-pilgrim figcaption{
    grid-column:3;
    justify-self:start;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone);
    text-align:left;
    max-width:260px;
    padding-bottom:6px;
    line-height:1.5;
  }
  @media (max-width:600px){
    .footer-pilgrim img{ width:90px; grid-row:1; }
    .footer-pilgrim{ gap:10px; }
    .footer-pilgrim figcaption{
      grid-column:1;
      grid-row:1;
      justify-self:end;
      align-self:end;
      min-width:0;
      text-align:right;
      font-size:11px;
      max-width:230px;
    }
  }

  /* ---------- SHUNKAEN VIDEO ---------- */
  .shunkaen-video-section{
    background:var(--paper);
  }
  .shunkaen-video-wrap{
    max-width:820px;
    margin:0 auto;
    padding:0 32px;
    text-align:center;
  }
  .shunkaen-video-eyebrow{
    display:block;
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
    margin-bottom:36px;
  }
  .shunkaen-video-kanji{
    font-family:var(--serif);
    font-size:clamp(34px, 5vw, 50px);
    color:var(--ink-soft);
    letter-spacing:0.14em;
    opacity:0.55;
    display:block;
    margin-bottom:60px;
    line-height:1;
  }
  .shunkaen-video-figure{
    margin:0;
  }
  .shunkaen-video-figure.is-revealing{
    opacity:0;
    transition:opacity 0.6s ease;
  }
  .shunkaen-video-figure.is-revealing.is-visible{
    opacity:1;
  }
  .shunkaen-video-figure + .shunkaen-video-figure{
    margin-top:84px;
    padding-top:64px;
    border-top:1px solid rgba(168,57,43,0.1);
  }
  /* Closing "Noble de la corte Heian" photo — the only .shunkaen-video-figure
     that holds a plain <img> instead of a video, and had no sizing rule of
     its own, so it rendered at its native intrinsic width (972px) instead
     of the 320px desktop / 60vw mobile already declared in its `sizes`
     attribute — reduced here to actually match that intended size (roughly
     half its previous rendered width). Figcaption also had no rule at all
     (plain browser-default text); now matches the site-standard collection-
     photo caption used everywhere else (e.g. .lineage-mon-flank, .lineage-
     photo, .okukyo-bamboo-box): var(--sans), 11px, 0.06em tracking,
     var(--stone), 1.5 line-height, 10px top margin — centered, since this
     figure is a standalone centered photo like those others. */
  .shunkaen-closing-figure{
    text-align:center;
    cursor:pointer;
  }
  .shunkaen-closing-figure img{
    width:100%;
    max-width:320px;
    height:auto;
    display:block;
    margin:0 auto;
  }
  @media (max-width:700px){
    .shunkaen-closing-figure img{
      max-width:60vw;
    }
  }
  /* Portrait phones only: 10% smaller still than the general mobile 60vw
     (60vw × 0.9 = 54vw) — landscape phones/tablets stay at 60vw. Same
     max-width:640px and orientation:portrait breakpoint used site-wide
     for phone-portrait-specific rules. */
  @media (max-width:640px) and (orientation:portrait){
    .shunkaen-closing-figure img{
      max-width:54vw;
    }
  }
  .shunkaen-closing-figure figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }
  .shunkaen-video-player{
    width:100%;
    aspect-ratio:16/9;
    display:block;
    border:none;
    background:transparent;
  }
  .shunkaen-video-caption{
    margin-top:32px;
    font-family:var(--serif);
    font-style:italic;
    color:var(--ink-soft);
    opacity:0.82;
    font-size:15px;
    line-height:1.95;
    letter-spacing:0.015em;
    text-align:left;
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
  }
  .shunkaen-video-caption .caption-title{
    display:block;
    font-family:var(--sans);
    font-style:normal;
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
    margin-bottom:14px;
  }
  @media (max-width:600px){
    .shunkaen-video-wrap{padding:0 20px;}
    .shunkaen-video-caption{font-size:14px;}
    .shunkaen-video-figure + .shunkaen-video-figure{margin-top:60px; padding-top:48px;}
  }
  /* Portrait phones only: the ink-scroll line runs through this section,
     so it needs the site-standard 32px side margin here (see the same
     fix on .lineage-poster-section .content and .contact-notes-pair).
     Landscape/tablet keep the 20px above — there the ink line doesn't
     reach this content and 20px already looked correct. */
  @media (max-width:600px) and (orientation:portrait){
    .shunkaen-video-wrap{padding:0 32px;}
  }

  /* ---------- GOLD BAND — physical 3D mon, between Hero and the samurai separator ----------
     Two PNGs (front / back) form a single solid-looking object rotating on the Y axis. They are
     real opposing 3D planes (rotateY 180° apart), so they foreshorten naturally as they turn and
     backface-visibility hides each one once it's edge-on. Rotation, a soft opacity crossfade near
     the edge-on moments, and dynamic lighting (brightness/contrast/saturate) + drop-shadow are all
     driven together, frame by frame, from JS (see closing script block) so every property stays in
     sync with the current angle.
     No background box at all — the dark "halo" around the gold mon is produced entirely by
     stacked drop-shadow() layers on the element itself (see the JS engine below), which hug the
     PNG's real alpha silhouette and update every frame in sync with the rotation. This avoids any
     rectangular edge and reads as smoke/mist dissolving into the washi, not a panel. */
  .gold-band{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1cm;
  }
  .gold3d-stage{
    position:relative;
    height:2cm;
    width:calc(2cm * 1326 / 358); /* matches the logos' real rendered footprint now that both
                                      oro.png (1327×358) and oro-trasera.png (1325×358) are
                                      cropped to bleed — 1326 is their average; the 2px
                                      difference between the two is ~0.02mm on screen, well
                                      below anything visible. This keeps the stage/object
                                      box — and therefore its default 50%/50% rotation
                                      origin — centered on each face's true visual center,
                                      instead of the old 1417px pre-crop width, which left
                                      the axis sitting ~2.5mm right of the actual glyph. */
    max-width:60vw;
    perspective:1400px;
    perspective-origin:50% 50%;
  }
  .gold3d-object{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    will-change:transform;
    transform:rotateY(0deg);
  }
  .gold3d-face{
    position:absolute;
    inset:0;
    height:100%;
    width:auto;
    max-width:none;
    left:0; /* left-aligned to the stage/object box's own left edge — the stage is now sized
               to the logos' real rendered width (see .gold3d-stage), so this edge is also the
               images' true left edge, and .gold-band's justify-content:flex-start puts that
               same edge flush with the text column's left edge. As the object rotates around
               the box's centered transform-origin, the visible width only ever shrinks
               symmetrically inward toward that center, so the left edge never moves further
               left than this resting position — it never overshoots the text column. */
    display:block;
    pointer-events:none;
    will-change:transform,opacity,filter;
    backface-visibility:hidden;
  }
  .gold3d-front{
    transform:translateZ(0.6px);
  }
  .gold3d-back{
    transform:rotateY(180deg) translateZ(0.6px);
  }

  /* ---------- DECORATIVE SEPARATOR (samurai) — aria-hidden, purely decorative ---------- */
  .hero-divider{
    background:var(--ink);
    padding:4cm 0; /* top and bottom padding are equal (both 4cm), so the gap from the Hero
                       above down to the Okina figure is exactly the same as the gap from the
                       Okina caption down to the mon trio below */
    text-align:center;
  }
  .hero-divider .glow{
    position:relative;
    display:inline-block;
    margin:0;
    cursor:pointer;
  }
  .hero-divider figcaption{
    position:relative;
    z-index:1;
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }
  .hero-divider .glow::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:760px; height:760px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(168,123,58,0.16) 0%, rgba(168,123,58,0) 70%);
    z-index:0;
    pointer-events:none;
  }
  .hero-divider img{
    position:relative;
    z-index:1;
    width:510px;
    max-width:90vw;
    height:auto;
    display:block;
  }

  /* ---------- TRAVEL JOURNAL — calligraphic epigraph ---------- */
  .notebook-intro{
    background:var(--ink);
    text-align:center;
    padding:4cm 24px 80px;
  }
  .notebook-intro-row{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .notebook-intro-inner{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  /* Tenkei figure (pilgrim's hat and staff) — sits centered below the three lines
     of epigraph text, same stacked treatment used site-wide for a single
     standalone figure following a text block. */
  .notebook-intro-flank{
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    margin:42px auto 0;
  }
  .notebook-intro-flank img{
    height:4.67cm;
    width:auto;
    display:block;
  }
  /* Caption styling copied verbatim from .hero-divider figcaption (the
     Okina caption) so this standalone Tenkei figure reads as the same
     standardized caption treatment used site-wide. No max-width: at this
     width the caption comfortably balances across its natural line count
     without the narrow column that used to force an orphaned word. */
  .notebook-intro-flank figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }
  .notebook-intro .notebook-intro-label{
    font-family:'Caveat', cursive;
    font-size:1.58rem;
    font-weight:400;
    color:var(--moss);
    letter-spacing:0.04em;
    line-height:1.3;
  }
  .notebook-intro .notebook-intro-sub{
    font-family:'Caveat', cursive;
    font-size:1.5rem;
    font-weight:400;
    color:var(--moss);
    opacity:0.78;
    letter-spacing:0.03em;
    line-height:1.3;
  }
  .notebook-intro .notebook-intro-desc{
    font-family:'Caveat', cursive;
    font-size:1.43rem;
    font-weight:400;
    color:var(--moss);
    opacity:0.62;
    letter-spacing:0.02em;
    line-height:1.5;
    max-width:900px;
  }

  /* ---------- WILDLIFE PAIR — ciervos & lince, a standalone full-bleed
     2-column grid, entirely independent of the suiseki photo above it
     and the two signed comments below it (not nested with either).
     Single stacked column by default (phones, tablet-portrait): ciervos
     photo+caption, then lince photo+caption. Full-bleed 2-column grid
     from tablet-landscape/desktop up (840px reuses the breakpoint
     already used elsewhere on the page for the same row/stack switch,
     and comfortably covers iPad Pro 12.9" in both orientations): ciervos
     column on the left, lince on the right. Each photo sits inside a
     .wildlife-pair-frame of a shared, fixed height — the portrait lince
     photo and the wide ciervos photo have very different aspect ratios,
     so scaling both to the same box height (rather than the same column
     width) is what makes their two captions land at the same vertical
     position: the caption always follows a box of identical height,
     regardless of how wide or narrow the photo inside it ends up. */
  .wildlife-pair{
    display:grid;
    grid-template-columns:1fr;
    row-gap:2.4cm;
    width:100%;
    /* 32px side clearance at every breakpoint, not just mobile: this block
       lives outside .wrap (see note below) so nothing constrains it from
       the viewport edge — on wide/landscape screens the ciervos photo was
       running edge-to-edge into the fixed ink-scroll rail (--path-line-x,
       14px from the left). 32px is the same site-standard clearance value
       already used for that exact problem elsewhere (see
       .lineage-poster-section's mobile-portrait padding). */
    padding:0 32px;
    /* Bottom gap: 84px, the site's large-screen standard for this chain
       (.suiseki-decor's bottom margin, this, and .almond-strip's top
       margin all match). The two comments below are a separate, unrelated
       block (see .contact-notes-pair), so this needs its own closing gap
       rather than relying on the comments' own spacing. This value only
       applies at breakpoints where .wildlife-pair keeps its own box (see
       the mobile-portrait display:contents override below, where 63px
       row-gap on .wildlife-section takes over instead). */
    margin-bottom:84px;
  }
  @media (min-width:840px){
    .wildlife-pair{
      /* Ciervos (2048×676, ~3:1) and lince (1571×2315, ~0.68:1) are scaled
         to the same frame height (.wildlife-pair-frame), so at equal
         column widths the wide ciervos photo was width-capped well below
         that shared height. Skewing the columns lets it use more of the
         horizontal room; re-check live and adjust the ratio if it needs
         to go further. */
      grid-template-columns:1.6fr 1fr;
      column-gap:32px;
    }
  }
  .wildlife-pair-item{
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .wildlife-pair-frame{
    width:100%;
    height:clamp(240px, 34vw, 560px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .wildlife-pair-frame img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
  }
  .wildlife-pair-caption{
    text-align:center;
    font-family:var(--sans);
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.06em;
    line-height:1.5;
    margin-top:10px;
  }
  /* This section sits outside the footer's .wrap (it lives between the
     enso divider and the almond strip, not inside the standard contact
     grid), so it never inherited the site's 32px side margin — now set
     unconditionally on the base rule above instead of only here, since
     the same clearance was missing at ≥840px too. */

  /* ---------- CONTACT · closing notes (personal reflections, signed) ---------- */
  /* Each note is its own .kb-comment instance, wrapped in a container-query
     host so the shared component sizes its marks/dropcap correctly. */
  .contact-note-wrap{
    /* No max-width here: below 840px this note is a plain stacked block
       like every other .kb-comment instance, full-width within .wrap.
       The 65% cap only makes sense once the two-column layout kicks in —
       it now lives in that media query below, alongside width:520px. */
    margin-left:auto;
    margin-right:auto;
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  /* Layout-only wrapper around the two notes above: stacked (default,
     phones and tablet-portrait) or side by side in two columns
     (tablet-landscape and desktop). 840px reuses the breakpoint already
     used elsewhere on the page for the same row/stack switch. */
  @media (min-width:840px){
    .contact-notes-pair{
      display:flex;
      align-items:flex-start;
      justify-content:center;
      gap:32px;
      max-width:1080px;
      margin:0 auto;
    }
    .contact-notes-pair .contact-note-wrap{
      width:520px; /* explicit width, not just max-width: needed because
                       container-type:inline-size (set above, for the kb-comment
                       component's own container queries) strips this element's
                       ability to size itself from its content, so as a flex item
                       with only max-width it was collapsing to 0 width and
                       disappearing on wide/landscape screens, even though it
                       rendered fine as a plain stacked block on narrow ones */
      max-width:520px;
      margin:0;
    }
  }
  .contact-note{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:16px;
    color:var(--moss);
    opacity:0.85;
    letter-spacing:0.015em;
    line-height:1.85;
    text-align:left;
    text-wrap:balance;
  }
  .contact-note-wrap .kb-comment-sign{
    text-align:left;
  }
  /* Mobile-portrait side clearance for these two notes now comes from
     .wildlife-section (below), which interleaves them with the ciervos/
     lince photos in a single stacked column — see that rule for why. */

  /* ---------- WILDLIFE SECTION — grouping wrapper around .wildlife-pair
     and .contact-notes-pair, purely so mobile portrait can interleave
     their children into one stacked order (ciervos → comment N → lince →
     comment S) without duplicating markup. At every other breakpoint this
     wrapper is inert: .wildlife-pair and .contact-notes-pair keep their
     own separate layouts exactly as defined above. The comments are NOT
     part of the photo pair (they're a deliberately independent block —
     the photos are just there for a bit of levity), so the two must stay
     visually separated even when interleaved: above 600px that's 84px,
     the standard already set by .wildlife-pair's own margin-bottom and
     matched by .suiseki-decor's bottom margin / .almond-strip's top
     margin for this exact chain (suiseki → ciervos/lince → comments →
     almendros) — NOT the unrelated 3cm value, which belongs to a
     different transition (.suiseki-decor's own top margin, .fuji-strip's
     margin-top). At mobile portrait it drops to 63px instead — see the
     row-gap below, which also happens to equal the diamond divider's own
     mobile value, purely by coincidence of the site's shared px scale.

     .wildlife-note-slot: a plain, unstyled wrapper placed around each
     .contact-note-wrap purely so THIS div — not the comment itself — is
     the thing that becomes a direct grid item here. .contact-note-wrap
     carries container-type:inline-size for the kb-comment component's own
     sizing; a container-type element that becomes a direct child of a
     display:contents ancestor inside a grid has a known WebKit sizing bug
     (confirmed here: the comment's width was resolving against something
     far larger than its column, pushing the rendered text off-screen
     while its box still claimed a large blank area in the stack). Giving
     it this ordinary in-between parent means the grid only ever measures
     a plain, uncontained box, and .contact-note-wrap in turn measures its
     container query against that same ordinary box — sidestepping the
     bug instead of fighting it. */
  @media (max-width:600px) and (orientation:portrait){
    .wildlife-section{
      display:grid;
      /* 63px, not 3cm: on mobile portrait every gap in this chain (suiseki
         → ciervos → comment N → lince → comment S → almond strip) must
         match the diamond divider's own mobile-portrait padding-top/bottom
         (.kb-divider--diamond, 63px) exactly — the one standard for this
         breakpoint, overriding the 3cm used everywhere above 600px. */
      row-gap:63px;
      padding:0 32px;
    }
    .wildlife-pair,
    .contact-notes-pair{
      display:contents; /* unwrap: children become direct grid items of
                            .wildlife-section so `order` below can
                            interleave them */
    }
    .wildlife-pair-item:nth-of-type(1){ order:1; } /* ciervos */
    .wildlife-note-slot:nth-of-type(1){ order:2; } /* comment N */
    .wildlife-pair-item:nth-of-type(2){ order:3; } /* lince */
    .wildlife-note-slot:nth-of-type(2){ order:4; } /* comment S */

    /* .wildlife-pair-frame's fixed clamp() height (set above) exists only
       to match the ciervos and lince photos to a shared row height in the
       ≥840px two-column layout. In the single-column mobile-portrait stack
       that shared height is only a problem for ciervos: its ~3:1 aspect
       ratio, width-capped to this narrow column, renders far shorter than
       240px, so align-items:flex-end left a blank gap above the image
       inside the frame's own box, on top of .suiseki-decor's real 63px
       margin-bottom. Lince's ~0.68 (portrait) aspect ratio fills that same
       240px frame correctly, so it must keep the fixed height — scoping
       this override to the ciervos frame only (nth-of-type(1), see the
       order list above) removes just the ciervos-side dead space, so the
       total suiseki→ciervos gap completes to the intended flat 63px
       without inflating lince's rendered size. */
    .wildlife-pair-item:nth-of-type(1) .wildlife-pair-frame{
      height:auto;
    }

    /* .wildlife-note-slot's child is a .contact-note-wrap.kb-comment, which
       carries the sitewide standard 42px margin-top/margin-bottom (see the
       single-source-of-truth comment on .kb-comment itself). Once unwrapped
       into this grid (display:contents above), that 42px does NOT collapse
       against the grid's own 63px row-gap — grid items never collapse
       margins, same documented exception already used at
       .suiseki-essay-epigraph-wrap and .form-closing-note-wrap — so without
       this override every gap touching a comment box was rendering at
       63+42=105px instead of the intended flat 63px. Zeroing both sides
       here leaves the row-gap as the sole source of spacing, matching the
       ciervos→lince gap (which has no comment adjacent) exactly. */
    .wildlife-note-slot .contact-note-wrap{
      margin-top:0;
      margin-bottom:0;
    }
  }

  /* ---------- T-DIVIDER — closes the contact section, before the enso ---------- */
  .t-divider{
    --t-v: clamp(90px, 14vw, 189px); /* vertical bar length, ~5cm at desktop */
    position:relative;
    width:calc(var(--t-v) * 3);
    height:var(--t-v);
    max-width:90%;
    margin:64px auto 0;
  }
  .t-divider-h{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:1px;
    background:linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  }
  .t-divider-v{
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:1px;
    height:100%;
    background:linear-gradient(to bottom, var(--gold), transparent);
  }

  /* ---------- ENSO DIVIDER — between closing note and almond strip ---------- */
  .enso-divider{
    text-align:center;
    margin:56px auto 0;
  }
  .enso-divider img{
    width:100%;
    max-width:267px;
    height:auto;
    display:block;
    margin:0 auto;
    opacity:0.85;
  }
  /* Mobile portrait only, single-column stack: reduce enso circle 20% */
  @media (max-width:600px) and (orientation:portrait){
    .enso-divider img{ max-width:182px; }
  }

  /* ---------- SUISEKI DECORATIVE PHOTO — between enso divider and almond strip ---------- */
  .suiseki-decor{
    width:66.666%;
    max-width:900px;
    /* Top keeps the 3cm flat value shared with .fuji-strip's margin-top
       (gap from the enso divider above). Bottom is 84px: the site's
       large-screen standard for the suiseki→ciervos/lince→comments→almendros
       chain that follows this photo (see .wildlife-pair, .almond-strip). */
    margin:3cm auto 84px;
  }
  .suiseki-decor img{
    display:block;
    width:100%; height:auto;
  }
  .suiseki-decor-caption{
    text-align:center;
    font-family:var(--sans);
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.06em;
    line-height:1.5;
    margin-top:10px;
  }
  /* Mobile portrait only: enlarge to 96% (20% larger than the previous mobile size);
     margin normalized to 63px, the same mobile-portrait value the diamond
     divider (.kb-divider--diamond) uses for its own top/bottom padding —
     the one standard for this gap on mobile, superseding the 3cm used on
     every larger breakpoint. */
  @media (max-width:600px) and (orientation:portrait){
    .suiseki-decor{ width:96%; margin:63px auto; }
  }

  /* ---------- WHO I AM ---------- */
  .who-i-am{
    background:var(--ink);
  }
  .who-i-am-body{
    max-width:720px;
    margin:0 auto;
    /* container-query host for the .kb-comment instance placed inside this section */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .who-i-am-float{
    float:right;
    width:265px;
    margin:4px 0 18px 32px;
    cursor:pointer;
  }
  .who-i-am-float img{
    width:100%; height:auto; display:block;
    filter:sepia(0.06) saturate(0.95);
  }
  .who-i-am-float figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone); text-align:left;
  }
  /* Deliberate typographic voice for this section only: this is the most
     personal, first-person passage on the site, so its body copy switches
     from the sitewide sans body font to the site's serif (the same family
     used for headings and the .kb-comment quotes) — a warmer, more literary
     register. Font-size stays at the standardized 17px on purpose, so the
     distinction reads as "a different voice", not "a different scale". */
  .who-i-am-body p{
    font-family:var(--serif);
    font-size:17px; line-height:1.85; color:var(--paper-dim); margin-bottom:18px;
  }
  /* typography modifier for the .kb-comment instance inside Identidad — the
     base component (marks, glow, dropcap) lives in the shared block above */
  .who-i-am-note{
    clear:both;
  }
  .who-i-am-note p{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    line-height:1.85;
    letter-spacing:0.015em;
    color:var(--paper-dim);
    opacity:0.88;
    /* Spacing between paragraphs is the flex gap on .kb-comment-inner now
       — no per-paragraph margin-bottom / :last-child reset needed. */
  }
  .who-i-am-photo{
    margin:42px 0 38px;
  }
  /* Modifier: roughly one third of the column width (720px column → ~240px),
     centered. Used for the closing peregrino-lluvia image so it reads as a
     small visual coda rather than a full-width photo. */
  .who-i-am-photo--compact{
    width:29.3%;
    min-width:160px;
    max-width:213px;
    margin-left:auto;
    margin-right:auto;
  }
  @media (max-width:600px){
    .who-i-am-photo--compact{
      width:49.3%;
      max-width:177px;
    }
  }
  .who-i-am-photo img{
    width:100%; height:auto; display:block;
    filter:sepia(0.06) saturate(0.95);
  }
  .who-i-am-photo figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone); text-align:left;
  }
  .who-i-am-photo.who-i-am-photo--compact figcaption{
    text-align:center;
  }
  @media (max-width:700px){
    .who-i-am-photo{margin:32px 0 28px;}
    .who-i-am-float{float:none; width:230px; margin:0 auto 24px; display:block;}
  }

  /* ---------- WHO I AM · Origin video ---------- */
  .who-i-am-video-figure{
    margin-top:52px;
    clear:both;
  }
  .who-i-am-video-ratio{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:transparent;
  }
  .who-i-am-video-player{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
    background:transparent;
  }
  .who-i-am-video-caption{
    margin-top:32px;
    font-family:var(--serif);
    font-style:italic;
    color:var(--paper-dim);
    opacity:0.82;
    font-size:15px;
    line-height:1.95;
    letter-spacing:0.015em;
    text-align:left;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  @media (max-width:600px){
    .who-i-am-video-figure{margin-top:38px;}
    .who-i-am-video-caption{font-size:14px;}
  }
  /* ---------- WHO I AM · Origin video, closing personal reflection note ---------- */
  .video-note-wrap{
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .video-note-wrap p{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    color:var(--paper-dim);
    opacity:0.88;
    font-size:16px;
    line-height:1.85;
    letter-spacing:0.015em;
  }
  .video-note-wrap .kb-comment-sign{
    font-style:normal;
  }
  /* Instance-specific correction, NOT a change to the .kb-comment single
     source of truth above. This is the last element inside #who-i-am
     before the section closes, so its margin-bottom:42px does not collapse
     with the section's own padding-bottom:78px (padding blocks margin
     collapse) — the two simply add up, making the gap above the torii
     divider that follows (176px) 42px larger than the matching gap below
     it (134px). Zeroing the margin here only, on this one signed instance,
     restores the 134px/134px symmetry without touching any other
     .kb-comment on the site. */
  .video-note-wrap.kb-comment{
    margin-bottom:0;
  }

  /* ---------- BEFORE THE PATH ---------- */
  .before-the-path{
    background:var(--ink);
  }
  /* Tenkei del indio norteamericano: floated inline within .before-path-body
     so the paragraph text wraps around it, same behavior as the biface
     photo below it (.who-i-am-float) rather than sitting in a separate
     head column. */
  .before-path-portrait-float{
    float:left;
    width:265px;
    margin:4px 32px 18px 0;
    cursor:pointer;
  }
  .before-path-portrait-float img{
    width:100%; height:auto; display:block;
    filter:sepia(0.06) saturate(0.95);
  }
  .before-path-portrait-float figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone); text-align:center;
  }
  @media (max-width:700px){
    .before-path-portrait-float{float:none; width:230px; margin:0 auto 24px; display:block;}
  }

  /* Biface photo (formerly floated inline, reusing .who-i-am-float): pulled
     out of the text flow and standardized as a full-width image placed
     between two paragraphs — same pattern as .who-i-am-photo (the site's
     standard for this), same vertical rhythm (42px/38px), same figcaption
     treatment. Sits within .before-path-body, so it's already 720px wide,
     matching the paragraph column exactly. */
  .before-path-photo{
    margin:42px 0 38px;
  }
  .before-path-photo img{
    width:100%; height:auto; display:block;
    filter:sepia(0.06) saturate(0.95);
  }
  .before-path-photo figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone); text-align:left;
  }
  @media (max-width:700px){
    .before-path-photo{margin:32px 0 28px;}
  }

  /* Body text: same single-column reading width and same serif "personal
     voice" treatment as .who-i-am-body, since this section continues that
     same first-person register. */
  .before-path-body{
    max-width:720px;
    margin:0 auto;
    /* container-query host for the .kb-comment instances placed inside this
       section (same pattern as .who-i-am-body / .section-head sitewide):
       establishes kb-comment-host at the real 720px reading width, so the
       echo-mark and dropcap's cqw-based sizing reads from that column
       instead of falling back to the viewport. */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  /* Clearfix: contains the floated .who-i-am-float biface image so this
     container's height is never miscalculated regardless of how much text
     follows it. */
  .before-path-body::after{
    content:"";
    display:table;
    clear:both;
  }
  .before-path-body p{
    font-family:var(--serif);
    font-size:17px; line-height:1.85; color:var(--paper-dim); margin-bottom:18px;
  }
  /* Unsigned quote inserted mid-flow right after the Chief Seattle paragraph
     — same unsigned, italic-serif treatment as .who-i-am-note /
     .video-note-wrap (a reflection/quote, not a personal signed statement,
     so it carries no .kb-comment-signed / .kb-comment-sign block). No
     max-width/margin override needed: it already sits inside
     .before-path-body, which is itself the 720px centered column, so it
     naturally fills that column exactly like every plain <p> around it.
     The kb-comment-host container context now comes from .before-path-body
     itself (see above), not from this selector — matching the sitewide
     pattern (.who-i-am-body / .section-head establish it on the parent,
     never on the individual .kb-comment instance). */
  .before-path-seattle-note p{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    line-height:1.85;
    letter-spacing:0.015em;
    color:var(--paper-dim);
    opacity:0.88;
  }
  .before-path-body-closing{
    margin-top:38px;
  }
  /* Last element before the section ends — zeroed for the same reason as
     .video-note-wrap.kb-comment above: padding blocks margin-collapse, so
     leaving the base margin-bottom would add unevenly to the section's own
     padding-bottom and break divider-gap symmetry. */
  .before-path-closing.kb-comment{
    margin-bottom:0;
  }

  /* Gallery of biface pieces: deliberately wider than the 720px reading
     column (up to 960px) since these are full, self-contained photographs
     rather than inline illustrations — matches the "impressive enough to
     earn more room" brief. 3 columns on desktop, 2 on tablet/mobile. */
  .before-path-gallery{
    max-width:960px;
    margin:44px auto 0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .before-path-gallery figure{
    position:relative;
    cursor:pointer;
  }
  .before-path-gallery figure::after{
    content:"";
    position:absolute; inset:0;
    border:1px solid transparent;
    transition:border-color 0.3s ease;
    pointer-events:none;
  }
  .before-path-gallery figure:hover::after,
  .before-path-gallery figure:focus-visible::after{border-color:var(--gold);}
  .before-path-gallery img{
    width:100%; height:auto; display:block;
    aspect-ratio:1 / 1;
    object-fit:cover;
    filter:sepia(0.06) saturate(0.95);
  }
  .before-path-gallery figure:hover img,
  .before-path-gallery figure:focus-visible img{filter:sepia(0.02) saturate(1.05);}
  .before-path-gallery figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone); text-align:left;
  }
  @media (max-width:700px){
    .before-path-gallery{grid-template-columns:repeat(2, 1fr); gap:18px;}
  }
  /* typography modifier for the .kb-comment instance introducing the
     biface gallery — same voice as .gallery-intro-note in #collection */
  .before-path-gallery-intro{
    color:var(--stone);
    font-style:italic;
    line-height:1.75;
  }
  /* Matches the paragraph's own reading width (720px, same as
     .before-path-body) instead of the wider 960px gallery below, so the
     comment's background hugs the text the same way every other
     .kb-comment instance on the site does — it must not stretch to the
     width of the section/column. Sits directly in .wrap (960px/1080px),
     not inside .before-path-body, so it needs its own kb-comment-host
     container context — without it, the echo-mark/dropcap's cqw-based
     sizing has no local container to read from and silently falls back to
     the viewport, same bug this exact fix addresses for .before-path-body
     above. */
  .before-path-gallery-intro-wrap{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  /* Small provenance/acquisition metadata block — plain label:value pairs,
     styled at the same scale/tone as figcaptions sitewide (sans, small,
     letter-spaced, stone label) rather than introducing a new component. */
  .before-path-provenance-meta{
    max-width:960px;
    margin:20px auto 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 40px;
  }
  .before-path-provenance-meta > div{
    display:flex;
    gap:8px;
  }
  .before-path-provenance-meta dt{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--stone);
    flex-shrink:0;
  }
  .before-path-provenance-meta dd{
    font-family:var(--sans); font-size:13px; line-height:1.5;
    color:var(--paper-dim);
    margin:0;
  }
  @media (max-width:700px){
    .before-path-provenance-meta{flex-direction:column; gap:10px;}
    .before-path-provenance-meta > div{flex-direction:column; gap:2px;}
  }

  /* ---------- CONTACT — symmetric two-column grid system (Ma / empty-space layout) ---------- */
  .contact-grid{
    position:relative;
    display:grid;
    grid-template-columns:max-content max-content;
    column-gap:110px;
    row-gap:48px;
    width:max-content;
    max-width:100%;
    flex:0 0 auto;
    margin:56px 0 0;
    text-align:left;
  }
  /* ---------- CONTACT · background wrapper for the transmission-kanji watermarks ----------
     Breaks out of .wrap to span the full viewport width, so the two kanji
     columns sit exactly halfway between the real screen edge and the
     centered contact text — not just halfway within .wrap's padded box. */
  .contact-hero-bg{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:100vw;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
  }
  .contact-hero-content{
    position:relative;
    z-index:1;
  }

  /* ---------- CONTACT · transmission-kanji watermarks (勝讓武古) ----------
     Two flanking columns, one either side of the contact grid, laid out
     with flexbox so the empty space is split equally: the distance from
     the screen/wrap edge to each kanji box exactly equals the distance
     from that box to the central contact text (both boxes share the
     grid's own width, so they scale symmetrically with it). Read
     traditional Japanese-style: right column first (first two
     characters, top to bottom), then left column (last two characters,
     top to bottom). Same treatment as the Hero glyph: font-family,
     weight 300, color/opacity rgba(168,57,43,0.05). */
  .contact-flex-row{
    display:grid;
    grid-template-columns:1fr max-content 1fr;
    align-items:center;
    width:100%;
  }
  .contact-kanji-watermark{
    --wm-size: clamp(64px, 9vw, 160px);
    justify-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1cm;
    font-family:var(--serif);
    font-weight:300;
    line-height:1;
    color:rgba(168,57,43,0.05);
    font-size:var(--wm-size);
    pointer-events:none;
    user-select:none;
    z-index:0;
  }
  .contact-kanji-watermark span{display:block;}
  @media (max-width:640px){
    .contact-kanji-watermark{display:none;}
    /* Without this, only .contact-grid survives as a grid item inside
       .contact-flex-row's 1fr/max-content/1fr tracks and auto-places into
       the first 1fr track instead of centering, pushing everything to the
       left with empty space on the right. */
    .contact-flex-row{grid-template-columns:1fr;}
  }
  /* ---------- CONTACT · mobile-only ink-drop divider ----------
     On narrow screens the two flanking vertical watermark columns above
     have nowhere to sit, so a small ink-drop mark fills the gap that
     naturally appears between the "Contact" and "Where & How" blocks
     once they stack, instead. Hidden above 640px. */
  .contact-drop-mobile{
    display:none;
  }
  @media (max-width:640px){
    .contact-drop-mobile{
      display:block;
      width:clamp(48px, 12vw, 64px);
      height:auto;
      margin:20px auto;
      pointer-events:none;
      user-select:none;
    }
  }
  .contact-col{box-sizing:border-box; position:relative; z-index:1;}
  .contact-col-title{
    font-family:var(--sans);
    font-size:12px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--stone);
    font-weight:500;
    text-align:left;
    margin-bottom:30px;
    position:relative;
  }
  .contact-col-title::after{
    content:"";
    display:block;
    width:36px;
    height:1px;
    background-color:var(--stone);
    opacity:0.5;
    margin-top:14px;
  }
  .contact-block + .contact-block{margin-top:30px;}
  .contact-block-label{
    font-family:var(--sans);
    font-size:12px;
    letter-spacing:0.04em;
    color:var(--stone);
    margin-bottom:11px;
  }
  .contact-line{
    display:flex;
    align-items:center;
    gap:11px;
  }
  .contact-line + .contact-line{margin-top:9px;}
  .contact-icon{
    flex:0 0 15px;
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:var(--stone);
    opacity:0.85;
  }
  .contact-line-text{
    font-family:var(--sans);
    font-size:14px;
    font-weight:300;
    letter-spacing:0.01em;
    color:var(--paper);
  }
  a.contact-line-text{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--paper);
    text-decoration:none;
    transition:color 0.3s ease;
  }
  a.contact-line-text:hover{color:var(--gold);}
  .contact-line-text .ext-arrow{font-size:11px;}
  @media (max-width:640px){
    .contact-grid{grid-template-columns:1fr; width:100%; row-gap:44px;}
    .contact-col{text-align:center;}
    .contact-col-title{text-align:center; margin-bottom:22px;}
    .contact-col-title::after{margin:14px auto 0;}
    .contact-col-body{width:fit-content; max-width:100%; margin:0 auto; text-align:left;}
  }

  /* ---------- LANGUAGE SELECTOR ---------- */
  .lang-switcher{
    display:flex;
    align-items:center;
    gap:0;
    border:1px solid var(--hairline);
    flex-shrink:0;
  }
  .lang-btn{
    background:none;
    border:none;
    border-right:1px solid var(--hairline);
    color:var(--stone);
    font-family:var(--sans);
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:6px 10px;
    cursor:pointer;
    transition:color 0.25s ease, background 0.25s ease;
    line-height:1;
  }
  .lang-btn:last-child{border-right:none;}
  .lang-btn:hover{color:var(--paper); background:rgba(168,57,43,0.05);}
  .lang-btn.lang-active{color:var(--gold); font-weight:500;}
  /* ---------- INSTITUTIONAL SUBTITLE ---------- */
  .institutional-subtitle{
    font-size:.92rem;
    letter-spacing:.08em;
    opacity:.82;
    margin-top:8px;
    margin-bottom:28px;
    font-style:italic;
    font-family:var(--sans);
    color:var(--stone);
    font-weight:300;
  }

  /* ---------- DOCUMENTARY PATH INTRO — now a .kb-comment note ---------- */
  .path-documentary-wrap{
    max-width:680px;
    /* container-query host for the .kb-comment instance placed inside */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .path-documentary-intro{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:16px;
    color:var(--stone);
    letter-spacing:0.015em;
    line-height:1.85;
  }

  /* ---------- EPILOGUE — both reflections are now .kb-comment notes.
     .epilogue .wrap sets text-align:center for the section's other
     elements (mark, whisper, images); the comment component assumes a
     left-aligned paragraph with a floated dropcap, so both wrappers
     override that back to left. Kept narrower than the wrap's 760px so
     the box doesn't stretch edge-to-edge for a short passage. ---------- */
  .epilogue-quote-note-wrap{
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    /* container-query host for the .kb-comment instance placed inside */
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  /* Widened from the old 480px comment-card width to 640px (reusing the
     cap already used elsewhere, e.g. .contact-note-wrap) so the phrase
     plus icon has room to sit on a single line on tablet-landscape and
     desktop widths. On phones the actual viewport is narrower than this
     cap anyway, so the phrase still wraps there when it needs to. */
  .epilogue-whisper-block{
    max-width:640px;
    width:fit-content; /* shrink-wraps to the widest child (the icon+quote line) instead of
                          stretching to the 640px cap, so the block's own edges — and anything
                          sized off them, like the signature's border-top below — track the
                          actual rendered content width, not empty leftover space */
    margin:0 auto 26px;
    text-align:left;
  }
  .epilogue-whisper-sign{
    width:100%; /* border-top spans the full .epilogue-whisper-block width — which now equals
                          the icon+quote line's own width above it, so the rule starts at the
                          brush icon's left edge and ends at the quote's right edge */
    margin-top:2px;
    padding-top:10px;
    border-top:1px solid var(--hairline);
    font-family:var(--serif);
    font-size:15px;
    letter-spacing:0.04em;
    color:var(--paper);
    text-align:right; /* kanji and name both align to the same right edge */
  }
  .epilogue-whisper-sign-kanji{
    display:block; font-size:18px; margin-bottom:4px; color:var(--gold);
  }
  .epilogue-whisper-sign-name{
    display:block; font-family:var(--sans); font-size:11.5px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--paper-dim); opacity:0.7;
  }

  /* ---------- NATURALIST EXPANDABLE ----------
     Uses the same .expandable/.read-more-btn mechanism as the rest of
     the site: smooth grid-based reveal instead of native <details>
     abrupt show/hide, and a label that toggles text on open/close.
     The arrow is CSS-injected via ::before, never markup, so the icon
     is a single source of truth site-wide. ---------- */
  .naturalist{
    margin-top:14px;
  }
  .naturalist p{ font-size:17px; color:var(--paper-dim); margin-top:14px; max-width:620px; }

  .expandable .more-content{
    display:grid; grid-template-rows:0fr; opacity:0; margin-top:0;
    transition:grid-template-rows 500ms ease, opacity 400ms ease, margin-top 500ms ease;
  }
  .expandable .more-content > div{overflow:hidden; min-height:0;}
  .expandable.is-expanded .more-content{grid-template-rows:1fr; opacity:1; margin-top:14px;}
  .expandable .more-content p:first-child{margin-top:0;}
  .read-more-btn{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:8px; background:none; border:none;
    color:var(--gold); font-family:var(--sans); font-weight:500;
    font-size:13px; letter-spacing:0.06em;
    padding:9px 0; border-radius:2px; cursor:pointer;
    transition:opacity 200ms ease;
  }
  .read-more-btn:hover{background:none; opacity:.75;}
  .read-more-btn::before{
    content:"→";
    display:inline-block; font-size:12px; transition:transform 300ms ease; line-height:1;
  }
  .expandable.is-expanded .read-more-btn::before{transform:rotate(90deg);}

  /* ---------- GALLERY INTRO NOTE ---------- */
  /* typography modifier for the .kb-comment instance inside Archivo
     Personal — the base component (marks, glow, dropcap) lives in the
     shared block near the top of this file */
  .gallery-intro-note{
    color:var(--stone);
    font-style:italic;
    line-height:1.75;
    max-width:760px;
  }

  /* ---------- BREATHING / SPACING ---------- */
  p{ line-height:1.85; }
  h2{ margin-bottom:35px; }
  h3{ margin-bottom:22px; }

  /* ---------- GALLERY TRANSITIONS (desktop only) ---------- */
  @media (hover:hover){
    .gallery-item{
      transition: transform .25s ease;
    }
    .gallery-item:hover{
      transform:scale(1.015);
    }
  }

  /* ---------- TIMELINE VISUAL STYLE ---------- */
  .path-list{
    border-top:none;
    border-left:1px solid rgba(0,0,0,.12);
    padding-left:28px;
    margin-left:12px;
  }
  .path-item{
    position:relative;
    border-bottom:none;
    padding:0 0 45px;
  }
  .path-item::before{
    content:"";
    position:absolute;
    left:-35px;
    top:10px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--stone);
    opacity:.6;
  }
  @media (max-width:640px){
    .path-list{ margin-left:8px; padding-left:20px; }
    .path-item::before{ left:-27px; }
  }

  /* ---------- PATH: decorative boxes with transparent PNG image ---------- */

  /* The path section wrap needs position relative for basho's absolute positioning */
  #path > .wrap{
    position:relative;
  }

  /* basho: absolute float, takes no space in the flow */
  .path-deco-img--basho{
    position:absolute;
    top:200px;
    right:0;
    pointer-events:none;
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    gap:14px;
  }
  .path-deco-img--basho img{
    max-width:140px;
    width:auto;
    height:auto;
    display:block;
    margin:0;
    filter:drop-shadow(0 4px 18px rgba(43,37,32,0.10));
    pointer-events:auto;
  }
  .path-deco-img--basho figcaption{
    order:-1;
    margin-top:0;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone);
    text-align:center;
    max-width:170px;
    line-height:1.5;
  }

  /* The basho grid is no longer used on desktop: we hide it */
  .path-deco-grid{
    display:block;
  }

  /* Geisha: two-column grid inside path-item */
  .path-item-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:32px;
    align-items:center;
  }
  .path-deco-img--geisha{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .path-deco-img--geisha img{
    /* 345 * 0.95 = ~328px */
    max-width:328px;
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 4px 18px rgba(43,37,32,0.10));
  }
  .path-deco-img--geisha figcaption{
    margin-top:10px;
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }

  /* Sibling slot right after .path-list closes (see shared.js, geisha
     placement IIFE). On mobile portrait the geisha figure is moved here
     instead of appended inside .path-list, so .path-list's border-left
     (the timeline rail) ends at the last real .path-item and never runs
     into the decorative figure. Empty on desktop — no size of its own. */
  .path-list-closing-deco:empty{
    display:none;
  }

  /* Mobile/vertical */
  @media (max-width:768px){
    .path-documentary-intro{
      max-width:none;
    }
    .path-deco-img--basho{
      position:static;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      margin-top:16px;
      margin-bottom:calc(16px + 1cm);
    }
    .path-deco-img--basho img{
      max-width:130px;
    }
    .path-deco-img--basho figcaption{
      order:1;
      text-align:center;
      max-width:230px;
      margin-top:10px;
    }
    .path-item-grid{
      grid-template-columns:1fr;
      gap:20px;
    }
    .path-deco-img--geisha{
      align-items:center;
    }
    .path-deco-img--geisha img{
      max-width:220px;
      width:50%;
    }
    .path-deco-img--geisha figcaption{
      text-align:center;
    }
  }

  /* Mobile phones in landscape (e.g. iPhone rotated) · short viewport height,
     width still above the 768px breakpoint. The right-floating text-avoidance
     approach still felt too tight against the "Naturalista..." heading, so we
     go back to dropping the figure below, centered — the behaviour that reads
     best across devices for this particular figure. */
  @media (orientation:landscape) and (max-height:500px){
    .path-deco-img--basho{
      position:static;
      display:flex;
      justify-content:center;
      margin-top:16px;
      margin-bottom:8px;
    }
    .path-deco-img--basho img{
      max-width:110px;
    }

    /* Second Basho figure (Matsuo Bashō ceramic piece): already stacks below
       the text correctly on this device, just needs to be centered. */
    .basho-grid{
      grid-template-columns:1fr;
    }
    .basho-figure{
      order:2;
      text-align:left;
      margin-top:0;
    }
    .basho-body{
      order:1;
    }
    .basho-figure img{
      margin:0 auto;
    }
    .basho-grid + .basho-haiku-grid{
      margin-top:24px;
    }
    .basho-frog-figure{
      margin:32px auto 0;
    }
  }

  /* ---------- SCROLL REVEAL ---------- */
  .gallery-item img{
    opacity:0;
    filter:sepia(0.08) saturate(0.95);
    transition: opacity .45s ease, filter .6s ease;
  }
  .gallery-item img.img-loaded{
    opacity:1;
  }
  .gallery-item:hover img.img-loaded{
    filter:sepia(0.02) saturate(1.05);
  }

/* ---------- UTILITIES (training / expand) ---------- */
  .expand-block{margin-top:10px;}
  .training-in-person{
    background:var(--ink-soft);
  }
  .training-in-person .wrap{max-width:1080px;}
  .training-in-person-inner{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:start;
  }
  .training-in-person-photos{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .training-in-person-photos figure{margin:0;}
  .training-in-person-photos img{
    width:100%; display:block;
  }
  .training-in-person-photos figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
  }
  .training-in-person-text .section-head{margin-bottom:26px; max-width:none;}
  .training-in-person-text p{
    font-size:17px;
    color:var(--paper-dim);
    text-align:left;
    margin-bottom:18px;
  }
  .training-in-person-motto{
    display:block;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--hairline);
    color:var(--gold-soft);
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:11.5px;
    font-family:var(--sans);
    font-weight:500;
    text-align:center;
  }
  @media (max-width:840px){
    .training-in-person-inner{grid-template-columns:1fr;}
  }

  /* ---------- TRAINING · Pathways (Advanced Course / Master) ---------- */
  .form-itineraries{
    /* Was var(--ink): a flat cream that, next to #teaching's transparent
       body-tint gradient, could never read as the "same" background — see
       --gravel definition above. */
    background:var(--gravel);
  }
  .form-itineraries .wrap{max-width:1080px;}

  .form-head{
    /* No margin-bottom: .form-grid's first child is always a
       .kb-divider--diamond (it "opens" the Curso Avanzado block), so any
       margin here would stack on top of that divider's own padding-top —
       making the gap above the divider taller than the gap below it. This
       applies in every layout: side-by-side on desktop (both dividers sit
       directly under .form-head) and stacked on mobile (only the first
       divider does). The divider's own padding is meant to be the only
       spacer, as elsewhere on the site. */
    margin-bottom:0;
  }
  .form-head-grid{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:48px;
    align-items:start;
  }
  .form-head-text{max-width:760px;}
  .form-head .eyebrow{display:block; margin-bottom:14px;}
  .form-head h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:18px;}
  .form-head p{color:var(--stone); font-size:17px;}
  .form-head .form-head-note{
    margin-top:18px; font-size:15px; color:var(--stone); line-height:1.8;
  }

  /* Decorative sugata-ishi image · desktop/horizontal (portrait) */
  .form-head-image{
    margin:0;
    justify-self:end;
    cursor:pointer;
  }
  .form-head-image img{
    width:100%;
    height:auto;
    display:block;
  }
  .form-head-image figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:center;
  }

  /* Decorative sugata-ishi image · mobile/vertical (landscape) */
  .form-head-image-mobile{
    display:none;
    margin:32px 0 0;
    cursor:pointer;
  }
  .form-head-image-mobile img{
    width:100%;
    height:auto;
    display:block;
  }
  .form-head-image-mobile figcaption{
    font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
    color:var(--stone); margin-top:10px; line-height:1.5; text-align:center;
  }

  /* The two syllabus blocks */
  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:52px;
    align-items:start;
  }
  .form-block-head{
    display:flex;
    align-items:baseline;
    gap:16px;
    margin-bottom:28px;
  }
  .form-block-kanji{
    font-family:var(--serif);
    font-size:36px;
    color:var(--gold-soft);
    opacity:0.6;
    line-height:1;
    flex-shrink:0;
  }
  .form-block-label{
    font-family:var(--sans);
    font-size:10px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--stone);
    display:block;
    margin-bottom:6px;
  }
  .form-block-title{
    font-family:var(--serif);
    font-size:19px;
    font-weight:600;
    color:var(--paper);
    line-height:1.3;
  }
  .form-block-desc{
    font-size:14px;
    color:var(--stone);
    margin-top:4px;
    font-weight:300;
  }

  /* Topic list with accordion */
  .form-topics{
    list-style:none;
    border-top:1px solid var(--hairline);
  }
  .form-topic{
    border-bottom:1px solid var(--hairline);
  }
  .form-topic-btn{
    width:100%;
    background:none;
    border:none;
    cursor:pointer;
    padding:14px 0;
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    font-family:var(--sans);
    font-size:13px;
    font-weight:500;
    color:var(--paper-dim);
    letter-spacing:0.03em;
    transition:color 0.25s ease;
  }
  .form-topic-btn:hover{color:var(--paper);}
  .topic-num{
    font-family:var(--serif);
    font-size:11px;
    color:var(--gold);
    letter-spacing:0.1em;
    flex-shrink:0;
    min-width:22px;
    opacity:0.9;
  }
  .topic-text{flex:1;}
  .topic-toggle{
    font-family:var(--sans);
    font-size:17px;
    color:var(--gold);
    flex-shrink:0;
    line-height:1;
    opacity:1;
  }
  .topic-toggle::before{ content:"+"; }
  .form-topic.open .topic-toggle::before{
    content:"−";
  }
  .form-topic-body{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease, padding 0.3s ease;
  }
  .form-topic.open .form-topic-body{
    max-height:400px;
  }
  .form-topic-body-inner{
    padding:0 0 16px 36px;
    font-size:14px;
    color:var(--stone);
    line-height:1.7;
    font-weight:300;
  }

  /* container-query host for the .kb-comment instance placed inside a form-block */
  .form-block{
    container-type:inline-size;
    container-name:kb-comment-host;
  }

  /* Master note — typography + background tint modifier for the
     .kb-comment instance inside Education. The base component (marks,
     glow, dropcap, spacing) lives in the shared block near the top of
     this file. */
  .form-master-note{
    background:rgba(168,57,43,0.04);
  }
  .form-master-note .kb-comment-inner{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:16px;
    color:var(--paper-dim);
    line-height:1.85;
    letter-spacing:0.015em;
  }
  .form-master-note strong{
    display:block;
    font-family:var(--serif);
    font-style:normal;
    font-size:14px;
    color:var(--paper);
    margin-bottom:6px;
    font-weight:600;
  }

  /* Contact CTA — now lives inside the Master column, right after
     form-master-note, right-aligned within that column (not centered,
     not spanning both columns). The comment's own margin-bottom:42px
     (from the standardized .kb-comment rhythm) already provides the
     breathing room above it. */
  .form-master-cta{
    display:flex;
    justify-content:flex-end;
  }
  /* No container-type/container-name declared here on purpose: .form-block
     (its direct parent) already establishes the "kb-comment-host" named
     container. Declaring it again here would nest two containers with the
     identical name inside one another — WebKit/Safari can fail to resolve
     that self-referential container-query chain and collapses the element
     to zero size (this is what made the comment disappear entirely on
     iPad/Safari). form-master-note works correctly for the same reason:
     it never declares its own container either. */
  .form-closing-note-wrap p{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:16px;
    color:var(--paper-dim);
    line-height:1.85;
    letter-spacing:0.015em;
  }

  @media (max-width:840px){
    /* gap:0, not 48px: once the grid collapses to a single column, this
       becomes a row-gap sitting above the second .kb-divider--diamond
       (Master), stacking on top of that divider's own padding-top the
       same way .form-head's margin-bottom used to stack on the first
       one. Zeroing it here — at the same breakpoint where the columns
       actually collapse — keeps both dividers' top/bottom padding equal
       at every width where they're stacked, not just narrow portrait
       phones. */
    .form-grid{grid-template-columns:1fr; gap:0;}

    /* .form-closing-note-wrap (the "Would you like to begin..." kb-comment) is the
       LAST child inside the Advanced Course .form-block — a CSS Grid item
       once .form-grid stacks to one column above. Its standard 42px
       margin-bottom (see the single-source-of-truth comment on .kb-comment
       itself) does NOT collapse against the grid's own gap — grid items
       never collapse margins, same rule already noted at
       .suiseki-essay-epigraph-wrap — so with gap:0 above, that 42px simply
       adds on top of the Master divider's own padding-top, exactly like
       .form-head's margin-bottom used to. Documented, targeted exception
       (two classes, so it wins over the base .kb-comment rule regardless
       of source order): only THIS instance loses its margin-bottom, only
       once stacked, only because a .kb-divider--diamond — which already
       provides its own spacing — follows immediately after. */
    .form-closing-note-wrap.kb-comment{margin-bottom:0;}

    /* Stack header text; swap the portrait sugata-ishi image for the
       landscape one, placed below the header text and before the
       hairline that opens the two syllabus columns. */
    .form-head-grid{grid-template-columns:1fr;}
    .form-head-image{display:none;}
    .form-head-image-mobile{display:block;}

    /* When stacked into a single column, each header (kanji + title +
       subtitle) is centered above its own syllabus, rather than
       left-aligned. */
    .form-block-head{
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:10px;
    }
    .form-block-kanji{margin:0 auto;}
  }

  @media (min-width:768px) and (max-width:1180px){
    .wrap{padding:0 24px;}
    section, footer, .hero{padding:68px 0;}
  }

  /* ---------- SKIP LINK (accessibility) ---------- */
  .skip-link{position:absolute;left:-9999px;top:auto}
  .skip-link:focus{left:12px;top:12px;z-index:9999;background:#fff;padding:10px 14px;border:1px solid #000}

  /* ---------- PANORAMA STRIP ---------- */
  /*
   * The nav is position:fixed, so the strip sits in normal flow
   * and needs a top margin equal to the nav height.
   * Full nav (1024px and up): ~88px (top-row ~52px + menu-row ~36px).
   * Hamburger nav (below 1024px): ~60px (single row, no menu-row).
   * The strip itself is 70px tall on the full nav, 48px on the hamburger nav.
   * All dropdowns (desktop z-index:200, mobile absolute) float above.
   */
  .panorama-strip{
    position:relative;
    margin-top:88px;
    width:100%;
    height:clamp(180px, 28vw, 420px);
    overflow:hidden;
    /* One of the site's three true full-bleed photos — always painted
       above the ink-scroll line (see --ink-line-bleed-z, shared.css
       "READING PATH" section), never the other way around. */
    z-index:var(--ink-line-bleed-z);
    line-height:0;
    /* iPad Safari rubber-band FIX: z-index alone only guarantees paint
       order once both layers are settled. During the elastic overscroll
       bounce, Safari's tiled compositor can repaint position:fixed layers
       (.rail-fixed/.path-system) on a slightly different cycle than this
       photo, letting the rail flash above it for a single frame even
       though z-index says otherwise. Forcing this element onto its own
       PERMANENT GPU layer (translateZ(0), never toggled) removes the
       ambiguity: both sides of the stacking order are now stable,
       independently-composited layers instead of one being promoted
       only mid-gesture, so there's nothing left for Safari to
       resynchronize during the bounce. See .rail-fixed/.path-system,
       .panorama-botanical-sep, .almond-strip, .fuji-strip for the
       matching fix on the other three full-bleed layers + the rail. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .panorama-strip img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
    max-width:none;
    /* iPad/iPhone Safari rubber-band FIX (same reasoning as .panorama-
       botanical-sep::before, shared.css "PANORAMA → HERO BAND" section):
       mask-image below forces WebKit to give this <img> its own implicit
       compositing layer, separate from its parent .panorama-strip's
       (which already has translateZ(0)). Making the promotion explicit
       and permanent here too closes the same potential gap against the
       rail's layer, on scroll in general — not only during the bounce. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /* Sumi-e fade: the photo dissolves smoothly into the washi at its bottom edge.
       Much less fade in the contact zone (85-100%) so the seam with the reflection looks less transparent. */
    -webkit-mask-image:linear-gradient(to bottom,
      black 0%,
      black 80%,
      rgba(0,0,0,0.97) 88%,
      rgba(0,0,0,0.90) 94%,
      rgba(0,0,0,0.75) 98%,
      rgba(0,0,0,0.55) 100%);
    mask-image:linear-gradient(to bottom,
      black 0%,
      black 80%,
      rgba(0,0,0,0.97) 88%,
      rgba(0,0,0,0.90) 94%,
      rgba(0,0,0,0.75) 98%,
      rgba(0,0,0,0.55) 100%);
  }
  @media (max-width:1023px){
    .panorama-strip{
      margin-top:60px;
      height:clamp(140px, 32vw, 280px);
    }
  }
  /* The fixed-height clamp() just above (140–280px) still leaves a phone
     wide enough to crop the photo unevenly: at a given fixed height, the
     photo's real 3:1 shape (2172×724 — the exact intrinsic size of
     panoramica.jpg) only fills a strip that shape without cropping; any
     phone narrower or wider than that ratio at that height forces cover to
     stretch the photo past the viewport and crop the surplus off both
     edges (e.g. at 390px width with a 156px-tall strip, that's ~39px
     sliced off each side). Fixing a single pixel height for "phones"
     doesn't solve this either — phones range from ~320px to ~480px wide,
     so any one number is already wrong for most of them.
     aspect-ratio sidesteps the problem structurally instead of guessing a
     number: locking the box to the photo's own 2172/724 ratio means, by
     construction, the box is never a different shape than the photo — so
     cover has nothing left over to crop, from either axis, at any phone
     width, automatically. The only thing ever trimmed is a hair of sky if
     a given phone's rendering rounds a subpixel high — never a side.
     object-position:center 30% is kept as that safety margin, not as a
     working crop. */
  @media (max-width:700px){
    .panorama-strip{
      height:auto;
      aspect-ratio:2172 / 724;
    }
  }

  /* ---------- PANORAMA → HERO BAND ---------- */
  /* Single continuous-background wrapper around .panorama-strip,
     .panorama-botanical-sep and .botanical-svg-strip. Root-cause fix for a
     hairline seam that could appear at the join between the last two: each
     paints its own solid background, and two independently-laid-out boxes
     can round their subpixel heights slightly differently, occasionally
     leaving a sliver where body{}'s ambient tint peeks through. Painting the
     background ONCE here, on their shared parent, removes that possibility
     structurally — there is no seam left to leak through.
     Uses the same proven full-bleed breakout as .botanical-svg-strip.contact-
     signature-grid below (width:100vw + margin calc(50% - 50vw)) rather than
     relying on this being a body-level element and therefore "naturally"
     full width — vw units anchor to the true physical viewport edge
     regardless of any ancestor's box model, which is the one guarantee that
     actually matters here. The children keep their own full-bleed rules too;
     nesting the same vw-based technique twice is redundant, not conflicting,
     since each level resolves independently against the viewport. */
  .panorama-to-hero-band{
    position:relative;
    background:var(--ink);
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Root-cause fix (replaces the old .season-koh::after patch): the gap
       before .hero used to be .hero's own margin-top — space OUTSIDE any
       painted box, patched by a z-index:-1 pseudo-element that depended on
       stacking-context behavior that differs by browser/viewport (worked on
       iPad, leaked a sliver of body{}'s tinted background on phones in
       portrait). Moving the same gap here, as padding-bottom on the one box
       that already carries background:var(--ink), guarantees it's always
       painted — no pseudo-element, no z-index, nothing that can leak. */
    padding-bottom:var(--hero-gap-above);
  }

  /* ---------- BOTANICAL TRIO between panorama and hero: pine · sakura · palmatum ---------- */
  /* The transition is handled by the panorama with its own bottom gradient.
     This section is pure washi, deliberately untinted — no leak-through from
     body{}'s ambient tint reaches it (opaque background), and unlike
     .mon-trio it gets no tint of its own either: flat, clean paper is the
     intended look for this specific zone. */
  .panorama-botanical-sep{
    position:relative;
    /* Height of the previous third + 2cm more — DO NOT TOUCH.
       Now sourced from --botanica-height (declared in :root) so .hero's fade
       reach, which invades 40% of this same height, always stays in sync. */
    min-height:var(--botanica-height);
    padding:0;
    background:var(--ink);
    overflow:hidden;
    /* GPU compositing-seam FIX: this element and .panorama-strip sit at the
       same z-index tier (--ink-line-bleed-z) but each carries its own
       PERMANENT translateZ(0) (see both elements' comments — required for
       the iPad Safari rubber-band fix, so neither can be removed). That
       means each is rasterized into its own independent GPU layer with its
       own device-pixel-rounded bounds. Where two such layers merely touch
       edge-to-edge without overlapping, the compositor can leave a
       sub-to-few-pixel row that NEITHER layer paints — and the fixed
       .rail-fixed/.path-system layer one tier below (--ink-line-z) shows
       through that gap: exactly a hairline of the ink-scroll rail + its
       label + the label's mask-gap, visible ONLY at this seam, nowhere else
       on either photo. A negative margin-top forces a real few-px overlap
       so full coverage no longer depends on subpixel rounding lining up.
       Safe visually: this exact contact zone is already the site's softest,
       most translucent stretch on both sides (.panorama-strip img fades
       94–100%; this element's own ::before reflection starts transparent at
       0–22%), so the overlap lands entirely inside already-faded pixels —
       no hard double-edge. If a hairline still shows on some device/zoom,
       increase further; there is no upper bound risk here.
       MEASURED, not guessed: at -5px the leftover sliver was traced to the
       ink-scroll rail's own current-section label (.path-label, vertical-rl,
       font-size:11px, letter-spacing:0.24em) — its top glyph is what showed
       through ("C" of "Cabecera"), because in vertical-rl+upright text each
       character's own block-direction advance is ~1em plus the letter-
       spacing added after it: 11px + (0.24 × 11px) ≈ 13.6px. -5px was
       therefore short by roughly one full glyph-advance. Bumped to -19px
       (-5px + ~14px, rounded up for device-pixel-ratio rounding headroom)
       so the overlap clears that glyph's entire footprint, not just its
       visible cap-height. */
    margin-top:-19px;
    /* This holds the panorama's mirrored reflection (::before below) — a
       photo-derived background, same as the site's three true full-bleed
       photos. Given the same tier (--ink-line-bleed-z) so the reflection is
       always painted above the ink-scroll rail, its label, and the label's
       mask-cut gap, never the other way around (see "READING PATH" comment,
       above .path-system). .hero, right after this in the DOM, sits at its
       own lower tier (z-index:1, see .hero) — the two never overlap in the
       box, so there's no tie to win here.
       FIX: z-index moved here from ::before below — z-index on ::before
       alone did nothing useful, because this element had position:relative
       + z-index:auto and therefore created NO local stacking context; an
       absolutely-positioned ::before with its own z-index then compares
       against whatever IS the nearest real stacking context ancestor
       (further up the tree), not against this element's own siblings —
       so it couldn't reliably clear the ink-scroll rail at all. Setting
       z-index here, on the element itself, is what actually establishes the
       stacking context this rule needs.
       iPad Safari rubber-band FIX (same reasoning as .panorama-strip,
       above): a permanent GPU layer here too, so the rail never has to
       resynchronize against this box during the elastic bounce. */
    z-index:var(--ink-line-bleed-z);
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* Mirror background: EXACT inverted reflection of the panorama.
     IMPORTANT: the scaleY(-1) transform flips the ENTIRE box, including the anchor point of the
     background-position: what is anchored "bottom" in the code ends up appearing at the top on
     screen once flipped, and vice versa. That's why we anchor on "bottom" (the base of the photo:
     mountain + fields) so that stretch —and not the sky— is what appears at the top on screen,
     in contact with the real photo; if anything must be cropped, it's always the sky. */
  .panorama-botanical-sep::before{
    content:'';
    position:absolute;
    inset:0;
    background-image: url('/img/panoramica.jpg');
    background-size: cover;
    background-position: center 70%;
    background-repeat: no-repeat;
    transform: scaleY(-1) translateZ(0);
    -webkit-transform: scaleY(-1) translateZ(0);
    /* iPad/iPhone Safari rubber-band FIX (same reasoning as .panorama-
       botanical-sep, .rail-fixed, .path-system above): mask-image alone
       already forces WebKit to give this ::before its own independent
       compositing layer, separate from its parent's. Without an explicit,
       PERMANENT translateZ(0) here too, that implicit layer can still be
       resolved by Safari's tiled compositor on a different cycle than the
       rail's own layer during scroll, letting the rail flash through for
       a single frame even though it's one full stacking tier below. This
       makes the promotion explicit and permanent instead of implicit and
       toggle-prone, closing that gap the same way as the other three. */
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.08) 22%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.60) 75%,
      rgba(0,0,0,0.80) 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.08) 22%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.60) 75%,
      rgba(0,0,0,0.80) 100%);
  }

  /* ---------- BOTANICAL SVG STRIP: own section, independent, between the botanical background and season-koh (72 kō) ---------- */
  .botanical-svg-strip{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    /* Exact height of the SVGs, nothing extra */
    height:52px;
    background:var(--ink);
  }
  .botanical-svg-strip .botanical-svg{
    display:block;
    width:52px;
    height:52px;
    object-fit:contain;
    opacity:0.88;
    filter:
      drop-shadow(0 0  6px rgba(251,247,238,0.95))
      drop-shadow(0 0 14px rgba(251,247,238,0.55));
  }
  /* ---------- BOTANICAL SVG STRIP: three-column composition ----------
     The strip now also carries the reused .contact-signature-grid class
     (kept only so the existing smoke-play observer/CSS keeps targeting
     these exact <img> elements — see comment in the HTML). The rule below
     is deliberately written with the two-class selector so it always wins
     over the older single-class .contact-signature-grid rule regardless
     of source order, letting this section fully own its own layout.

     Grid, not flex, on purpose: grid-template-columns: 1fr auto 1fr makes
     the CENTER column exactly as wide as the icon trio (auto), and the two
     OUTER columns automatically split whatever width is left over equally
     between them. That "leftover" on each side is precisely the space from
     the screen edge to the trio — so each signature group, centered inside
     its own outer column, ends up centered in that edge-to-trio space, not
     centered in some arbitrary fixed third of the total width. Never wraps,
     on tablet/iPad or desktop — phones (≤700px) get their own exact-fit
     flex layout further below instead, see that block's comment. The strip's own height
     is no longer a fixed 52px/40px, since it must now fit the taller
     signature groups too; it stays exactly as tall as its content —
     everything else about the section (background, panorama-to-hero
     transition, gradient) is untouched. */
  .botanical-svg-strip.contact-signature-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:clamp(14px,4vw,40px);
    row-gap:0;
    /* Full-bleed breakout: guarantees this element spans the true, physical
       viewport edge to edge — not whatever width it would otherwise inherit
       from its parent — so the two 1fr side columns always measure their
       "available space" from the real screen edge to the icon trio, exactly
       as requested, on every device (iPad Pro landscape included). */
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    height:auto;
    min-height:52px;
    padding:10px 20px;
  }
  .botanical-strip-col{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }
  .botanical-strip-col--sig{
    gap:clamp(4px,1.4vw,10px);
  }
  .botanical-strip-col--icons{
    gap:28px;
  }
  /* Signature images reduced 33% from their original Contact-section size
     (104px → ~70px desktop, 72px → ~48px mobile), then left fluid between
     those two values so the three columns keep sharing one line on every
     screen width without ever wrapping. */
  .botanical-svg-strip .botanical-signature-img{
    display:block;
    height:clamp(48px,7vw,70px);
    width:auto;
  }

  /* ---------- BOTANICAL SVG STRIP: exact-fit mobile rescale (phones only) ----------
     Below 700px (safely under every iPad portrait width, 744px+, so the iPad
     layout above is never touched) the desktop grid's "1fr auto 1fr" centering
     stops being appropriate: it leaves large empty side columns and centers
     each signature group inside them, instead of placing every element flush
     to the screen edge. Phones need the opposite: all seven logos in one row,
     touching neither the screen edge nor each other beyond a fixed, exact gap.

     Rather than a fixed pixel size (which overflows on narrow phones and
     wastes space on wide ones) this solves the row algebraically: given that
     every gap and both edge margins are fixed physical lengths (independent
     of screen size), the ONE unknown is the common height every logo is drawn
     at. Every logo already carries its true width/height from the HTML
     attributes, so the browser derives its own aspect-ratio automatically —
     we only ever set `height`; `width:auto` follows the ratio unassisted.

     The equation, solved once, for a row of 100vw width:
       100vw = 2×edge + 2×inter-group gap + sig1-internal + sig2-internal
               + 2×icon-internal + H × Σ(aspect ratios of the 7 logos)
     Fixed part  = 2(0.5cm) + 2(0.9cm) + 0.2cm + 0.2cm + 2(0.2cm) = 3.6cm
     (inter-group gap raised from 0.5cm to 0.9cm — +4mm each side — once
     the two signature PNGs were re-exported cropped to their true pixel
     bounds instead of carrying their old transparent margin)
     Σ(aspects)  = buko 1536/499 + hanko 1788/1691 + aciculas 423/378
                 + sakura 163/141 + palmatum 215/207 + caligrafia 1536/499
                 + hanko-1 2048/2048 ≈ 11.527397
     ⇒ H = (100vw - 3.6cm) / 11.527397

     This is exact and self-adjusting: any phone width plugged into the same
     formula reproduces precisely 0.5cm at both screen edges and 0.5cm
     between the three visual groups (sig1 · icon trio · sig2), with no
     device-specific tuning and nothing to re-check by eye. */
  @media (max-width:700px){
    :root{
      --logo-row-h: calc((100vw - 3.6cm) / 11.527397);
      /* Two-thirds reduction of the 4cm desktop/iPad gap (kept there
         untouched — see --hero-gap-above in :root above). On a phone the
         panorama's sense of depth is already lost to the narrow crop, so
         the same wide pause before the Hero reads as a stall rather than
         a breath. Feeds .panorama-to-hero-band's padding-bottom automatically,
         since it reads this same variable. */
      --hero-gap-above: calc(4cm / 3);
    }
    .botanical-svg-strip.contact-signature-grid{
      display:flex;
      justify-content:center;
      align-items:center;
      flex-wrap:nowrap;
      column-gap:0.9cm;
      row-gap:0;
      padding:10px 0.5cm;
      min-height:0;
    }
    .botanical-strip-col--sig{ gap:0.2cm; }
    .botanical-strip-col--icons{ gap:0.2cm; }
    .botanical-svg-strip .botanical-signature-img,
    .botanical-svg-strip .botanical-svg{
      height:var(--logo-row-h);
      width:auto;
    }
  }


  /* ---------- ALMOND TREES STRIP — strip before contact ---------- */
  .almond-strip{
    width:100%;
    line-height:0;
    position:relative;
    /* One of the site's three true full-bleed photos — always painted
       above the ink-scroll line (see --ink-line-bleed-z, shared.css
       "READING PATH" section), never the other way around. */
    z-index:var(--ink-line-bleed-z);
    margin-top:84px; /* large-screen standard for the suiseki→ciervos/lince→
                         comments chain above (see .suiseki-decor, .wildlife-pair);
                         overridden to 63px on mobile portrait below */
    /* iPad Safari rubber-band FIX (same reasoning as .panorama-strip,
       shared.css "PANORAMA STRIP" section): permanent GPU layer, so
       the fixed rail never has to resynchronize against this box
       during the elastic bounce. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .almond-strip img{
    display:block;
    width:100%; height:auto;
  }
  .almond-caption{
    text-align:center;
    font-family:var(--sans);
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.06em;
    line-height:1.5;
    margin-top:10px;
  }
  @media (max-width:600px) and (orientation:portrait){
    /* Closes the wildlife-section chain: comment S → almond strip must
       match the same 63px mobile-portrait standard as every other gap in
       that chain (see .wildlife-section), overriding the 3cm base above. */
    .almond-strip{ margin-top:63px; }
  }

  /* ---------- FUJI FULL-BLEED PHOTO — closing strip, after almond strip ---------- */
  .fuji-strip{
    width:100%;
    line-height:0;
    position:relative;
    /* One of the site's three true full-bleed photos — always painted
       above the ink-scroll line (see --ink-line-bleed-z, shared.css
       "READING PATH" section), never the other way around. */
    z-index:var(--ink-line-bleed-z);
    margin-top:3cm;
    /* iPad Safari rubber-band FIX (same reasoning as .panorama-strip,
       shared.css "PANORAMA STRIP" section): permanent GPU layer, so
       the fixed rail never has to resynchronize against this box
       during the elastic bounce. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  @media (max-width:600px) and (orientation:portrait){
    /* Missing override, added for consistency: every other 3cm/84px gap on
       the site drops to 63px in mobile portrait (see .suiseki-decor,
       .almond-strip). .fuji-strip was the one exception, left at ~113px
       on phones while every adjacent gap on the same page collapses to
       63px — restoring the site-wide mobile-portrait standard here. */
    .fuji-strip{ margin-top:63px; }
  }
  .fuji-strip img{
    display:block;
    width:100%; height:auto;
  }
  .fuji-caption{
    text-align:center;
    font-family:var(--sans);
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.06em;
    line-height:1.5;
    margin-top:10px;
  }
  @media (max-width:600px){
  }

  /* ---------- GLOSSARY ---------- */
  .glossary{
    background:var(--ink);
  }
  .glossary .section-head{ max-width:720px; }
  .glossary-groups{
    margin-top:44px;
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--hairline);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .glossary-group{ background:var(--ink); }
  .glossary-group summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 0;
    transition:opacity .2s;
  }
  .glossary-group summary::-webkit-details-marker{ display:none; }
  .glossary-group summary:hover{ opacity:.72; }
  .glossary-group-kanji{
    font-family:var(--serif);
    font-size:11px;
    color:var(--gold);
    letter-spacing:0.1em;
    flex-shrink:0;
    min-width:22px;
    opacity:0.9;
  }
  .glossary-group-label{
    font-family:var(--sans);
    font-size:13px;
    font-weight:500;
    color:var(--paper-dim);
    letter-spacing:0.03em;
    flex:1;
  }
  .glossary-group-count{
    font-family:var(--sans);
    font-size:11.5px;
    letter-spacing:0.06em;
    color:var(--stone);
    white-space:nowrap;
  }
  .glossary-group-toggle{
    font-family:var(--sans);
    font-size:17px;
    color:var(--gold);
    width:16px;
    text-align:center;
    line-height:1;
    flex-shrink:0;
  }
  .glossary-group-toggle::before{ content:"+"; }
  details.glossary-group[open] summary .glossary-group-toggle::before{ content:"−"; }
  .glossary-body{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
  }
  details.glossary-group[open] .glossary-body{
    max-height:1600px;
  }
  .glossary-list{
    padding:2px 4px 34px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px 40px;
  }
  .glossary-term dt{
    font-family:var(--serif);
    font-size:15.5px;
    color:var(--paper);
    margin-bottom:6px;
    letter-spacing:0.01em;
  }
  .glossary-kanji{
    color:var(--gold);
    font-size:13.5px;
    margin-left:8px;
    opacity:0.9;
  }
  .glossary-term dd{
    font-size:14px;
    line-height:1.7;
    color:var(--stone);
  }
  @media (max-width:760px){
    .glossary-list{ grid-template-columns:1fr; gap:22px; padding-bottom:28px; }
    .glossary-group-count{ display:none; }
  }

  /* ---------- SCROLL OFFSET for fixed nav ---------- */
  /*
   * Increased by the panorama strip height so anchor links
   * still land with the section title visible below the strip.
   */
  section[id], footer[id], header[id]{
    scroll-margin-top: 170px;   /* 100px original + 70px strip (full nav) */
  }
  @media (max-width:1023px){
    section[id], footer[id], header[id]{
      scroll-margin-top: 120px; /* 72px original + 48px strip (hamburger nav) */
    }
  }

  /* ---------- GLOSSARY TERM FOOTNOTES (auto-numbered popups) ---------- */
  .term-sup{
    font-size:0.66em;
    line-height:0;
    vertical-align:super;
  }
  .term-trigger{
    font:inherit;
    color:var(--gold);
    background:none;
    border:none;
    padding:0 1px;
    margin:0;
    cursor:pointer;
    font-weight:700;
  }
  .term-trigger:hover, .term-trigger:focus-visible{
    text-decoration:underline;
    outline:none;
  }
  .term-popup{
    position:fixed;
    z-index:2000;
    max-width:320px;
    width:max-content;
    background:var(--ink);
    border:1px solid var(--hairline);
    border-radius:16px;
    box-shadow:0 16px 40px rgba(43,37,32,0.24), 0 3px 10px rgba(43,37,32,0.14);
    padding:16px 19px;
    opacity:0;
    transform:translateY(4px);
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .term-popup.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .term-popup::after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    background:var(--ink);
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    transform:rotate(45deg);
    left:var(--tail-x, 50%);
    margin-left:-7px;
  }
  .term-popup[data-placement="above"]::after{ bottom:-8px; }
  .term-popup[data-placement="below"]::after{ top:-8px; transform:rotate(225deg); }
  .term-popup-title{
    font-family:var(--serif);
    font-size:15.5px;
    font-weight:600;
    color:var(--gold);
    margin-bottom:6px;
    letter-spacing:0.01em;
  }
  .term-popup-kanji{
    font-weight:400;
    opacity:0.9;
  }
  .term-popup-def{
    font-family:var(--sans);
    font-size:13.5px;
    line-height:1.65;
    color:var(--paper-dim);
  }
  .term-popup-link{
    display:inline-block;
    position:relative;
    margin-top:10px;
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--gold);
  }
  .term-popup-link::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:-2px;
    height:1px;
    background:var(--gold);
    transition:right 0.3s cubic-bezier(.55,0,.35,1);
  }
  .term-popup-link:hover::after, .term-popup-link:focus-visible::after{
    right:0;
  }
  @media (max-width:480px){
    .term-popup{ max-width:calc(100vw - 32px); }
  }

/* ==================== Mon trio isolated tint ==================== */
  /* ---------- MON TRIO — isolated symmetric tint ----------
     This band used to have no background of its own, so it was the one gap
     left uncovered by the body's global radial tints (see body{} above),
     which leaked through asymmetrically (warm on one side, green on the
     other, depending on how close each edge sat to the two radial origins).
     This replaces that accidental leak with a deliberate, self-contained
     gradient: full at the exact center (behind the three icons), fading out
     symmetrically toward both edges, fully transparent by 80% of the way
     from center to edge (10%→50%→90% stops) — identical fade left and right.
     Same warm institutional red as the rest of the site's watermarks/hairline —
     shared as --tint-warm (declared in :root) with body{}'s own top-left
     ambient tint, tuned so this band reads as the same tone the ambient
     tint itself would show at this spot, not an independent color choice. */
  .mon-trio{
    position:relative; /* anchor for the ::before band below */
    isolation:isolate; /* creates its own stacking context so the ::before's
      z-index:-1 stays scoped to .mon-trio itself instead of risking being
      painted behind unrelated ancestor content further up the page */
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1cm;
    padding:12px 0; /* symmetric top/bottom, works together with .hero-divider's matching
                        bottom padding to make the gap above Triomon equal the gap below it */
  }
  /* The gradient band now lives on its own pseudo-element, separate from the
     icons, so it can be revealed once — expanding from the center outward —
     without being tied to the icons' own repeatable pulse. z-index:-1 keeps
     it behind the three <img> siblings (which stay at the default stacking
     level), no extra markup needed. */
  .mon-trio::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background-color:var(--ink);
    background-image:linear-gradient(90deg,
      transparent 0%,
      transparent 10%,
      var(--tint-warm) 50%,
      transparent 90%,
      transparent 100%);
  }
  .mon-svg{
    width:45px;
    height:45px;
    transition:transform 0.3s ease;
    will-change:opacity;
  }
  .mon-svg:hover{
    transform:scale(1.06);
  }
  @media (max-width:480px){
    .mon-svg{ width:64px; height:64px; }
  }

/* ==================== Mobile-portrait-only adjustments (base) ==================== */
  @media (max-width:480px) and (orientation:portrait){
    /* Rotating gold kanji logo above "Travel Journal" — 10% smaller */
    .gold3d-stage{ height:1.8cm; width:calc(1.8cm * 1326 / 358); }

    /* Mon trio (sakura / chrysanthemum / mitsudomoe) — one third smaller */
    .mon-svg{ width:29px; height:29px; }
    .mon-trio{ padding:12px 0; }

    /* Matsuo Bashō carving (path-deco figure) — 10% smaller */
    .path-deco-img--basho img{ max-width:117px; }

    /* Geisha ceramic figure, Shunkaen museum — 20% larger, then a further 10% (net ~32%) */
    .path-deco-img--geisha img{ max-width:290px; width:66%; }

    /* Noh actor ceramic — male figure 20% smaller; female figure 10% smaller */
    .lineage-photo-col .noh-figure img[src="/img/noh-1.png"]{ max-width:80%; margin:0 auto; }
    .lineage-photo-col .noh-figure img[src="/img/noh-2.png"]{ max-width:90%; margin:0 auto; }

    /* The two more enigmatic sugata-ishi — 10% larger */
    .form-head-image-mobile img{ width:110%; max-width:110%; margin-left:-5%; }

    /* Peregrino-lluvia (Tenkei, "Who I Am" closing figure) — was reading
       left-aligned instead of centered; force centering explicitly. */
    .who-i-am-photo--compact{
      display:block;
      margin-left:auto;
      margin-right:auto;
    }

    /* Pilgrim's hat and staff (Tenkei, "Travel Journal" epigraph figure) —
       one third smaller than its current size on mobile portrait only. */
    .notebook-intro-flank img{ height:3.11cm; }
  }

  /* Basho caption text swap: alternate wording only on mobile portrait,
     default wording preserved everywhere else */
  .basho-cap-mobile-portrait{ display:none; }
  @media (max-width:480px) and (orientation:portrait){
    .basho-cap-default{ display:none; }
    .basho-cap-mobile-portrait{ display:inline; }
  }

/* ==================== Linaje poster / lineage document styles ==================== */
  .lineage-poster-section {
    --gold-deep:    #8B6914;
    --gold-mid:     #C9922A;
    --gold-bright:  #E8B84B;
    --gold-light:   #F5D98A;
    --gold-pale:    #FDF0C5;
  }

  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 18px rgba(201,146,42,0.4), 0 0 40px rgba(201,146,42,0.15); }
    50%       { text-shadow: 0 0 28px rgba(232,184,75,0.7), 0 0 60px rgba(232,184,75,0.3); }
  }
  @keyframes border-glow {
    0%, 100% { box-shadow: inset 0 0 30px rgba(201,146,42,0.08), 0 0 60px rgba(201,146,42,0.05); }
    50%       { box-shadow: inset 0 0 50px rgba(201,146,42,0.15), 0 0 100px rgba(201,146,42,0.12); }
  }

  .lineage-poster-section {
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Top/bottom padding matches the standardized no-divider boundary
       value used everywhere else on the page (see "Section-boundary
       spacing parity" above), not the plain 78/64/36px section base —
       #glossary sits right before this section with no .kb-divider
       between them, same situation as #lineage→#path-lineage,
       #wbu→.traditional-school, etc. This section is also the last
       top-level <section> on the page (no next sibling), so the generic
       section:has(+ section)/section + section selectors can only ever
       reach its padding-top from #glossary's side, never its own
       padding-bottom — so both edges are set explicitly here to the same
       parity figures, keeping the section visually symmetric and
       consistent with every other no-divider section. Only the
       horizontal padding is this section's own — the poster needs
       breathing room from the screen edge that other sections don't. */
    padding-top:calc(78px + 71px); padding-bottom:calc(78px + 71px);
    padding-left:20px; padding-right:20px;
    font-family: 'EB Garamond', Georgia, serif;
  }
  @media (max-width:640px){
    .lineage-poster-section{ padding-top:calc(64px + 71px); padding-bottom:calc(64px + 71px); }
  }
  @media (max-width:640px) and (orientation:portrait){
    .lineage-poster-section{ padding-top:71.69px; padding-bottom:71.69px; } /* calc(36px + 71px) = 107px, -33% */
  }
  /* Portrait phones only: this 20px is the real gap between the screen
     edge and the poster card — the ink-scroll line runs right along
     that edge, so it needs the site-standard 32px here too. (The
     .content padding below is a different, inner gap — between the
     card's gold border and the text inside it — and was never the
     source of the "pegado" look, so it's left untouched.) */
  @media (max-width:600px) and (orientation:portrait){
    .lineage-poster-section{ padding-left:32px; padding-right:32px; }
  }

  .lineage-poster-section .poster {
    position: relative;
    width: 780px;
    max-width: 100%;
    background: linear-gradient(160deg, #0e0a04 0%, #080604 40%, #060402 70%, #0b0704 100%);
    border: 1px solid var(--gold-deep);
    padding: 0;
    overflow: hidden;
    animation: border-glow 6s ease-in-out infinite;
  }

  /* Decorative corner pieces */
  .lineage-poster-section .corner { position: absolute; width: 70px; height: 70px; }
  .lineage-poster-section .corner svg { width: 100%; height: 100%; }
  .lineage-poster-section .corner-tl { top: 14px; left: 14px; }
  .lineage-poster-section .corner-tr { top: 14px; right: 14px; transform: scaleX(-1); }
  .lineage-poster-section .corner-bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
  .lineage-poster-section .corner-br { bottom: 14px; right: 14px; transform: scale(-1,-1); }

  /* Outer border lines */
  .lineage-poster-section .poster::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201,146,42,0.3);
    pointer-events: none;
    z-index: 0;
  }
  .lineage-poster-section .poster::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(201,146,42,0.1);
    pointer-events: none;
    z-index: 0;
  }

  /* Subtle radial glow center */
  .lineage-poster-section .bg-glow {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(180,120,20,0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  .lineage-poster-section .content {
    position: relative;
    z-index: 1;
    padding: 60px 70px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* ── TOP KANJI ── */
  .lineage-poster-section .kanji-top {
    font-size: 13px;
    letter-spacing: 0.35em;
    color: var(--gold-mid);
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0;
    font-family: 'Cinzel', serif;
    line-height: 1.85;
  }

  .lineage-poster-section .school-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5em;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0;
    line-height: 1.85;
  }

  /* ── DIVIDER ── */
  .lineage-poster-section .divider {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    margin-bottom: 34px;
    opacity: 0;
  }
  .lineage-poster-section .divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  }
  .lineage-poster-section .divider-diamond {
    width: 7px;
    height: 7px;
    background: var(--gold-bright);
    transform: rotate(45deg);
    flex-shrink: 0;
  }

  /* ── MAIN HEADLINE ── */
  .lineage-poster-section .headline-block {
    text-align: center;
    margin-bottom: 10px;
    opacity: 0;
  }
  .lineage-poster-section .headline-pre {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.6em;
    color: var(--gold-deep);
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
  }
  .lineage-poster-section .headline-main {
    font-family: 'Cinzel Decorative', serif;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.08;
    background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-bright) 35%, var(--gold-pale) 50%, var(--gold-bright) 65%, var(--gold-deep) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 5s linear infinite;
    display: block;
    margin-bottom: 6px;
  }
  .lineage-poster-section .headline-sub {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.55em;
    color: var(--gold-mid);
    text-transform: uppercase;
    display: block;
  }

  /* ── YEAR TAG ── */
  .lineage-poster-section .year-tag {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: rgba(201,146,42,0.55);
    margin-bottom: 36px;
    opacity: 0;
    line-height: 1.85;
  }

  /* ── BODY BLOCKS ── */
  .lineage-poster-section .body-section {
    width: 100%;
    margin-bottom: 22px;
    opacity: 0;
  }

  .lineage-poster-section .year-label {
    font-family: 'Cinzel', serif;
    font-size: 9.5px;
    letter-spacing: 0.5em;
    color: var(--gold-deep);
    text-transform: uppercase;
    display: block;
    margin-bottom: 7px;
  }

  .lineage-poster-section .body-text {
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--gold-light);
    font-weight: 400;
    text-align: center;
  }
  .lineage-poster-section .body-text em {
    color: var(--gold-pale);
    font-style: italic;
  }
  .lineage-poster-section .body-text strong {
    color: var(--gold-bright);
    font-style: normal;
    font-weight: 600;
  }

  /* ── ACCENT STATEMENT ── */
  .lineage-poster-section .accent-statement {
    text-align: center;
    font-family: 'Cinzel Decorative', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: 0.08em;
    line-height: 1.4;
    padding: 16px 0;
    animation: glow-pulse 4s ease-in-out infinite;
  }

  /* ── BIG KANJI NAME ── */
  .lineage-poster-section .kanji-name-block {
    text-align: center;
    margin: 8px 0 4px;
    opacity: 0;
  }
  .lineage-poster-section .kanji-name {
    font-size: 52px;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-pale) 45%, var(--gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glow-pulse 4s ease-in-out infinite;
    display: block;
    letter-spacing: 0.12em;
  }
  .lineage-poster-section .kanji-romaji {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.6em;
    color: var(--gold-mid);
    text-transform: uppercase;
    display: block;
    margin-top: 4px;
  }

  /* ── DIVIDER MID ── */
  .lineage-poster-section .mid-ornament {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 70%;
    margin: 6px auto;
    opacity: 0;
  }
  .lineage-poster-section .mid-ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,146,42,0.4), transparent);
  }
  .lineage-poster-section .mid-ornament-dot {
    width: 4px;
    height: 4px;
    background: var(--gold-mid);
    border-radius: 50%;
  }

  /* ── FINAL KANJI VERSE ── */
  .lineage-poster-section .verse-block {
    text-align: center;
    padding: 28px 40px;
    border: 1px solid rgba(201,146,42,0.25);
    position: relative;
    margin: 10px 0;
    opacity: 0;
    width: 100%;
  }
  .lineage-poster-section .verse-block::before,
  .lineage-poster-section .verse-block::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-deep);
    font-size: 10px;
  }
  .lineage-poster-section .verse-block::before { left: -6px; }
  .lineage-poster-section .verse-block::after { right: -6px; }

  .lineage-poster-section .verse-kanji {
    font-size: 22px;
    letter-spacing: 0.18em;
    color: var(--gold-bright);
    display: block;
    margin-bottom: 12px;
    animation: glow-pulse 5s ease-in-out infinite;
  }
  .lineage-poster-section .verse-translation {
    font-size: 15px;
    color: var(--gold-light);
    font-style: italic;
    line-height: 1.6;
    display: block;
  }
  .lineage-poster-section .verse-translation strong {
    color: var(--gold-pale);
    font-style: normal;
  }

  /* ── CLOSING ── */
  .lineage-poster-section .closing-block {
    text-align: center;
    margin-top: 6px;
    opacity: 0;
  }
  .lineage-poster-section .closing-main {
    font-family: 'Cinzel Decorative', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--gold-bright);
    display: block;
    margin-bottom: 8px;
  }
  .lineage-poster-section .closing-sub {
    font-size: 14px;
    color: var(--gold-mid);
    font-style: italic;
    display: block;
  }

  /* ── BOTTOM SEAL ── */
  .lineage-poster-section .bottom-seal {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
  }
  .lineage-poster-section .seal-line {
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  }
  .lineage-poster-section .seal-text {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 0.55em;
    color: rgba(201,146,42,0.45);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.85;
  }

  /* Animation delays for body sections — only applied once the section is visible on screen */
  .lineage-poster-section.in-view .s1 { animation: fadeUp 1s 1.0s forwards; }
  .lineage-poster-section.in-view .s2 { animation: fadeUp 1s 1.25s forwards; }
  .lineage-poster-section.in-view .s3 { animation: fadeUp 1s 1.5s forwards; }
  .lineage-poster-section.in-view .s4 { animation: fadeUp 1s 1.75s forwards; }
  .lineage-poster-section.in-view .s5 { animation: fadeUp 1s 2.0s forwards; }
  .lineage-poster-section.in-view .s6 { animation: fadeUp 1s 2.25s forwards; }
  .lineage-poster-section.in-view .s7 { animation: fadeUp 1s 2.5s forwards; }
  .lineage-poster-section.in-view .s8 { animation: fadeUp 1s 2.75s forwards; }
  .lineage-poster-section.in-view .s9 { animation: fadeUp 1s 3.0s forwards; }

  /* Remaining fadeUp entrance elements — also repeatable, triggered by .in-view */
  .lineage-poster-section.in-view .kanji-top { animation: fadeUp 1s 0.2s forwards; }
  .lineage-poster-section.in-view .school-name { animation: fadeUp 1s 0.4s forwards; }
  .lineage-poster-section.in-view .divider { animation: fadeUp 1s 0.5s forwards; }
  .lineage-poster-section.in-view .headline-block { animation: fadeUp 1.1s 0.7s forwards; }
  .lineage-poster-section.in-view .headline-main { animation: shimmer 5s linear infinite, fadeUp 1.1s 0.7s forwards; }
  .lineage-poster-section.in-view .year-tag { animation: fadeUp 1s 0.9s forwards; }
  .lineage-poster-section.in-view .body-section:nth-child(5) { animation: fadeUp 1s 1.1s forwards; }
  .lineage-poster-section.in-view .body-section:nth-child(6) { animation: fadeUp 1s 1.3s forwards; }
  .lineage-poster-section.in-view .body-section:nth-child(7) { animation: fadeUp 1s 1.5s forwards; }
  .lineage-poster-section.in-view .body-section:nth-child(8) { animation: fadeUp 1s 1.7s forwards; }
  .lineage-poster-section.in-view .body-section:nth-child(9) { animation: fadeUp 1s 1.9s forwards; }
  .lineage-poster-section.in-view .body-section:nth-child(10) { animation: fadeUp 1s 2.1s forwards; }
  .lineage-poster-section.in-view .kanji-name-block:nth-child(5) { animation: fadeUp 1s 1.1s forwards; }

  @media (max-width: 600px) {
    .lineage-poster-section .content { padding: 44px 28px 40px; }
    .lineage-poster-section .headline-main { font-size: 28px; }
    .lineage-poster-section .kanji-name { font-size: 38px; }
    .lineage-poster-section .verse-block { padding: 20px 18px; }
    .lineage-poster-section .accent-statement { font-size: 14px; }
  }

  /* ============================================================
     INK SMOKE EFFECT — single-cycle "dissolve and restore" animation
     applied to key ceremonial marks (hero name/lineage, philosophy
     kanji row, epilogue images, enso divider, contact seals).

     Pure dissolve (Variant B1, "minimal pure dissolve"): opacity and
     blur only, symmetric ease-in-out through a fully blurred, fully
     transparent midpoint. No mask-image, no clip-path, no animated
     edge of any shape — nothing here can ever read as a circle or a
     rectangle opening or closing.

     Text targets (kanji/glyph spans) are wrapped in an extra inline
     span carrying .ink-smoke + .ink-smoke-text-wrap so the effect
     never touches the real element's own classes, sizing, or
     flex/grid role. Image/SVG targets (already their own box) get
     .ink-smoke applied directly on the <img>.
     ============================================================ */

  .ink-smoke-text-wrap{
    display:inline-block;
  }

  @keyframes inkSmokeBreath{
    0%{ opacity:1; filter:blur(0px); }
    50%{ opacity:0; filter:blur(18px); }
    100%{ opacity:1; filter:blur(0px); }
  }

  /* ---- Trigger classes: the animation only runs while .smoke-play is
     present on the relevant ancestor.
     · Hero: shortly after page load, once (shared.js adds .smoke-play
       to .hero and never removes it — a single cycle, per spec).
     · The other four groups replay every single time they enter the
       viewport (shared.js toggles .smoke-play via IntersectionObserver,
       forcing a reflow so the animation restarts from 0% each time). ---- */

  /* 1. Hero — lineage band (brush-writing reveal, see .hlb-reveal rules above;
     the old four-kanji block and its ink-smoke blur have been removed) */

  /* 2. Philosophy — row of 3 kanji, staggered */
  .philosophy-kanji-row.smoke-play .smoke-phil-1{ animation: inkSmokeBreath 7.36s ease-in-out 0.7s forwards; }
  .philosophy-kanji-row.smoke-play .smoke-phil-2{ animation: inkSmokeBreath 7.36s ease-in-out 0.9s forwards; }
  .philosophy-kanji-row.smoke-play .smoke-phil-3{ animation: inkSmokeBreath 7.36s ease-in-out 1.1s forwards; }

  /* 3. Epilogue — A-un (normal) + closing calligraphy (small) */
  .epilogue .wrap.smoke-play .smoke-epi-main{ animation: inkSmokeBreath 8.32s ease-in-out 0.7s forwards; }
  .epilogue .wrap.smoke-play .smoke-epi-small{ animation: inkSmokeBreath 8.32s ease-in-out 1.2s forwards; }

  /* 4. Enso divider */
  .enso-divider.smoke-play .smoke-enso{ animation: inkSmokeBreath 8.96s ease-in-out 0.7s forwards; }

  /* 5. Contact signature seals — buko, hanko, calligraphy, hanko-1 */
  .contact-signature-grid.smoke-play .smoke-seal-1{ animation: inkSmokeBreath 10.24s ease-in-out 0.7s forwards; }
  .contact-signature-grid.smoke-play .smoke-seal-2{ animation: inkSmokeBreath 10.24s ease-in-out 0.95s forwards; }
  .contact-signature-grid.smoke-play .smoke-seal-3{ animation: inkSmokeBreath 10.24s ease-in-out 1.2s forwards; }
  .contact-signature-grid.smoke-play .smoke-seal-4{ animation: inkSmokeBreath 10.24s ease-in-out 1.45s forwards; }

  @media (prefers-reduced-motion: reduce){
    .smoke-hero-band,
    .smoke-phil-1, .smoke-phil-2, .smoke-phil-3,
    .smoke-epi-main, .smoke-epi-small,
    .smoke-enso,
    .smoke-seal-1, .smoke-seal-2, .smoke-seal-3, .smoke-seal-4,
    .season-koh{
      animation:none !important;
      opacity:1 !important;
      transform:none !important;
    }
    .hlb-text{ clip-path:none !important; animation:none !important; }
    .hlb-cursor{ display:none !important; }
  }

/* ---------- PIEZA ESTACIONAL — 72 kō (七十二候) ---------- */
.season-koh{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--ink);
  /* Top: standard intra-section element spacing (matches .basho-body p and
     .path-deco-img--basho's text-to-image gap elsewhere on the site) — this
     is NOT a section-to-section gap, since botanical + season-koh are two
     halves of the same portada band, not separate sections.
     Bottom: 0 — the gap to .hero is not this element's padding at all; it's
     .panorama-to-hero-band's own padding-bottom (see that rule). */
  padding:16px 24px 0;
}
/* Warm halo behind the icon/date/kanji/phrase group only — NOT a background
   for the whole section (that stays the plain --ink of the botanical strip
   above it). Three overlapping, off-centre radial gradients + blur give it
   an irregular, diffused edge rather than a clean circle/ellipse. Very low
   opacity: a faint pastel-orange warmth, not a visible shape. */
.season-koh::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:440px;
  height:320px;
  max-width:92%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 55% 60% at 42% 38%, rgba(224,142,84,0.16), transparent 70%),
    radial-gradient(ellipse 48% 55% at 60% 64%, rgba(206,110,64,0.13), transparent 72%),
    radial-gradient(ellipse 62% 46% at 52% 50%, rgba(236,168,112,0.11), transparent 75%);
  filter:blur(30px);
  pointer-events:none;
  z-index:0;
}
/* The gap below season-koh, before .hero, used to need a ::after patch here
   to cover .hero's margin-top (empty space, painted by nothing — leaked
   body{}'s tint on phones in portrait). Removed: that gap is now
   .panorama-to-hero-band's own padding-bottom, inside its own painted box —
   see the comment on that rule. Nothing left here to patch. */
.season-koh-icon,
.season-koh-date,
.season-koh-kanji,
.season-koh-desc{
  position:relative;
  z-index:1;
}
/* Fundido gradual de opacidad + leve balanceo HORIZONTAL de amplitud
   decreciente hasta asentarse (no rotación; no el barrido de tinta ni
   el tecleo del Hero, reservados para la banda dorada). */
.season-koh{
  opacity:0;
  animation: seasonKohSettle 1.6s cubic-bezier(.22,.68,0,1) 0.15s forwards;
}
@keyframes seasonKohSettle{
  0%   { opacity:0;    transform: translateY(6px) translateX(0); }
  20%  { opacity:0.3;  transform: translateY(2px) translateX(-9px); }
  35%  { opacity:0.55; transform: translateY(0)    translateX(6px); }
  50%  { opacity:0.75; transform: translateX(-4px); }
  65%  { opacity:0.9;  transform: translateX(2px); }
  80%  { opacity:1;    transform: translateX(-1px); }
  100% { opacity:1;    transform: translateX(0); }
}
/* Remate de seguridad: el JS añade esta clase al terminar la animación
   para fijar el estado final de forma permanente. */
.season-koh.is-settled{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
/* Belt-and-braces for the icon and date specifically: their content is
   injected via JS (innerHTML/textContent) after the container's animation
   has already started, unlike the kanji/desc which sit in static markup.
   On some WebKit builds that mid-animation content injection can cause
   just these two to drop the parent's "forwards" fill after the animation
   ends. Force them visible too, independent of the container's own state. */
.season-koh.is-settled .season-koh-icon,
.season-koh.is-settled .season-koh-date{
  opacity:1 !important;
}
.season-koh-icon{
  /* +25% test (was 34px) — see kō size-experiment note below */
  width:42.5px;
  height:42.5px;
  color:var(--gold);
  margin-bottom:20px;
}
.season-koh-icon svg{ width:100%; height:100%; display:block; }
.season-koh-date{
  font-family:var(--sans);
  /* +25% test (was 11px) */
  font-size:13.75px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:16px;
}
.season-koh-kanji{
  font-family:var(--serif);
  font-weight:500;
  /* +25% test (was 23px) */
  font-size:28.75px;
  letter-spacing:0.1em;
  color:var(--paper);
  margin-bottom:14px;
}
/* Furigana (JA only): the <rt> reading sits tight above the kanji, smaller
   and in the site's moss accent so it reads as a gloss, not a second line
   of body text. ruby-align keeps it centered over irregular-length kanji
   compounds (jukujikun-style whole-word readings, not per-character). */
.season-koh-kanji ruby{ ruby-align:center; }
/* JA has no fourth line (see shared.js) — drop the kanji's trailing
   margin so the piece doesn't end with a dangling gap before the
   container's own bottom padding. */
.season-koh-kanji:has(+ .season-koh-desc[hidden]){ margin-bottom:0; }
.season-koh-kanji rt{
  font-family:var(--sans);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--moss);
  text-transform:none;
}
/* Rōmaji gloss (ES/EN only): the Hepburn transcription sits in parentheses
   right after the kanji, same role as the JA <rt> furigana above but
   inline instead of stacked, since there's no ruby reading to attach it
   to. Small and in the site's moss accent, matching rt's treatment as a
   gloss rather than body text.
   display:block below (all breakpoints, not just mobile portrait): kanji +
   romaji together often don't fit on one line at ANY viewport width once
   the kanji compound runs long, so the browser mid-wraps the romaji and it
   ends up sitting flush against .season-koh-desc right underneath — reading
   as if the phrase sat beside the kanji instead of below it. Forcing the
   romaji onto its own line removes that wrap point everywhere (phone,
   tablet portrait/landscape, and desktop), so kanji / romaji / phrase always
   render as three clearly separated lines. */
.season-koh-romaji{
  display:block;
  margin-top:4px;
  font-family:var(--sans);
  font-weight:400;
  font-size:14px;
  letter-spacing:0.01em;
  color:var(--moss);
  text-transform:none;
}
.season-koh-desc{
  font-family:'Caveat', cursive;
  font-weight:500;
  /* +25% test (was 1.05rem) */
  font-size:1.3125rem;
  letter-spacing:0.02em;
  color:var(--moss);
  line-height:1.4;
  max-width:340px;
}
/* Vertical mobile only: icon/date/kanji/phrase reduced by 25% from the
   desktop values above (i.e. 75% of original size). Desktop/tablet/
   landscape sizing is untouched. */
@media (max-width:600px) and (orientation:portrait){
  .season-koh-icon{
    width:31.875px;
    height:31.875px;
  }
  .season-koh-date{
    font-size:10.3125px;
  }
  .season-koh-kanji{
    font-size:21.5625px;
  }
  .season-koh-romaji{
    font-size:10.5px;
  }
  .season-koh-desc{
    font-size:0.984375rem;
  }
}


  /* ============================================================
     INK PULSE EFFECT (inkPulse10) — completely independent system,
     unrelated to the INK SMOKE block above. Different class names
     (.ink-pulse-10 / .pulse-play vs .ink-smoke / .smoke-play),
     different keyframes (inkPulse10 vs inkSmokeBreath), different
     selectors, different JS observer. Editing one block must never
     change the behaviour of the other.

     Applies to: the large school seal in the "Traditional School of
     Bonsai and Suiseki" section (#school-logo-portrait .logo-big),
     the lineage mon (.lineage-mon-img), and the mon trio (sakura,
     chrysanthemum, mitsudomoe — .mon-svg). All share the exact same
     rule, trigger class (.pulse-play) and animation, applied as a
     single group — no per-icon rules or trigger classes.

     Simple opacity breathing, 3 full cycles then stops:
     100% -> 10% (mid-cycle) -> 100% (cycle end).
     ============================================================ */

  @keyframes inkPulse10{
    0%   { opacity: 1; }
    50%  { opacity: 0.1; }
    100% { opacity: 1; }
  }

  #school-logo-portrait .logo-big.pulse-play,
  .lineage-mon-img.pulse-play,
  .mon-svg.pulse-play{
    animation: inkPulse10 4.16s ease-in-out 0.7s 3;
  }

  @media (prefers-reduced-motion: reduce){
    #school-logo-portrait .logo-big.pulse-play,
    .lineage-mon-img.pulse-play,
    .mon-svg.pulse-play{
      animation:none !important;
    }
  }

/* ---------- SUISEKI ESSAY · header grid — title/epigraph left,
   decorative "luna" photo in its own controlled box on the right.
   Structurally identical to .collection-head-grid: the photo column
   is fixed-width and self-contained, so it never touches or reflows
   .suiseki-text-grid (a separate sibling element below). ---------- */
.suiseki-head-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:48px;
  align-items:start;
}
.suiseki-head-grid .section-head{
  grid-column:1; grid-row:1;
  margin-bottom:0;
  max-width:none;
}
.suiseki-head-grid .suiseki-essay-epigraph-wrap{
  grid-column:1; grid-row:2;
  /* Sole documented exception to "never override .kb-comment's own
     margin-top/bottom" (see the single-source-of-truth rule on .kb-comment
     itself): margins never collapse against CSS Grid's own row gap, so the
     component's standard 42px margin-top would simply ADD to this grid's
     48px row gap here, producing 90px instead of the sitewide 42px. This
     compensates so the REAL rendered gap still equals 42px, exactly like
     every other .kb-comment instance — same convention applied for the
     840px stacked layout below, where the grid's gap changes to 28px. */
  margin-top:calc(42px - 48px);
}
.suiseki-head-photo{
  grid-column:2; grid-row:1 / 3;
  /* Centered against the combined height of the title + epigraph column,
     so it sits with breathing room both above (away from the title) and
     below (away from .suiseki-text-grid, the separate sibling element
     that follows) instead of being pushed flush against whichever edge
     it was pinned to. */
  align-self:center;
  justify-self:end;
  margin:0;
  cursor:pointer;
}
.suiseki-head-photo img{
  width:100%; height:auto; display:block;
}
.suiseki-head-photo figcaption{
  font-family:var(--sans); font-size:11px; letter-spacing:0.06em;
  color:var(--stone); margin-top:10px; line-height:1.5; text-align:left;
}
@media (max-width:840px){
  .suiseki-head-grid{grid-template-columns:1fr; gap:28px;}
  .suiseki-head-grid .section-head{grid-column:1; grid-row:1;}
  .suiseki-head-grid .suiseki-essay-epigraph-wrap{grid-column:1; grid-row:2; margin-top:calc(42px - 28px);}
  /* Once stacked, this photo sits in normal document flow like the other
     suiseki photos (.suiseki-decor) below it, so it needs the same
     margin-bottom rhythm — margin:0 (correct for the desktop side-by-side
     layout) otherwise leaves it pinned flush against the text-grid below. */
  .suiseki-head-photo{grid-column:1; grid-row:3; justify-self:center; width:100%; max-width:420px; margin:0 auto 2.2cm;}
}
/* Mobile portrait: match the width AND vertical-margin behaviour of the
   other suiseki photos in this section (.suiseki-decor), which sit at 96%
   width with 1.4cm top/bottom margin instead of a fixed max-width cap. */
@media (max-width:600px) and (orientation:portrait){
  .suiseki-head-photo{width:96%; max-width:none; margin:0 auto 1.4cm;}
}

/* ==================== SUISEKI ESSAY SECTION ====================
   "The Way of Suiseki" — full contemplative essay, originally written
   for the BCI International Instructors article and reused here as its
   own dedicated section (dark background, alternating with the light
   Philosophy section before it and echoing Bashō's dark tone after it). */
  .suiseki-essay{
    background:var(--paper);
  }
  .suiseki-essay .section-head{
    max-width:680px;
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .suiseki-essay .section-head h2{
    color:var(--ink);
  }
  .suiseki-essay .section-head p{
    color:var(--ink-soft);
    opacity:0.82;
  }

  .suiseki-essay-epigraph-wrap{
    container-type:inline-size;
    container-name:kb-comment-host;
  }
  .suiseki-epigraph{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:16px;
    line-height:1.85;
    letter-spacing:0.015em;
    color:var(--ink);
    opacity:0.92;
  }

  /* Same sitewide column-gap standard as .philosophy-text-grid: 48px at 3
     columns, 56px once collapsed to 2 (see that comment for why).

     ARCHITECTURE — 6 fixed, independent blocks, one grid per block:
     the essay's full text was split, once, at paragraph boundaries into
     6 groups of roughly equal length (measured in characters — the essay
     is finite and known in advance, so this is a fixed authorial choice,
     not something recomputed at runtime). Each group is one
     .suiseki-text-grid; each is followed by its own .suiseki-decor photo,
     as plain siblings in source order, ending with the 6th photo after
     the 6th (and last) block. No wrapper, no duplicated markup, no
     runtime reflow of which paragraph belongs to which block.

     column-fill:balance (not auto+fixed height): a fixed height was tried
     and reverted (2026-08-08). column-fill:auto with a hand-tuned height
     produced a reproducible WebKit/Safari bug — a phantom blank line at
     the very top of the *middle* column regardless of whether the break
     fell mid-paragraph or on a clean paragraph boundary, i.e. tied to the
     fixed-height auto-fill calculation itself, not to the text content.
     balance has no such fixed-height rounding step; it derives the ideal
     column height from the actual content. balance's known downside — it
     re-balances all 3 columns' break points on every text edit — no
     longer applies, since this text is final and will not be edited
     again. Column depths are allowed to end unevenly; with prose
     alternating with centered verse, uneven column endings read as
     organic composition rather than a defect (this was a deliberate
     decision, not a fallback). */
  .suiseki-text-grid{
    column-count:3;
    column-gap:48px;
    column-fill:balance;
    margin-bottom:8px;
  }
  .suiseki-text-grid p{
    font-size:16px;
    color:var(--ink-soft);
    opacity:0.82;
    margin-bottom:18px;
    line-height:1.8;
    orphans:1;
    widows:1;
  }
  .suiseki-text-grid p.essay-verse{
    font-family:var(--serif);
    font-style:italic;
    color:var(--stone);
    opacity:1;
    text-align:center;
    line-height:1.8;
    orphans:1;
    widows:1;
  }
  @media (max-width:1200px){
    .suiseki-text-grid{column-count:2; column-gap:56px;}
  }
  @media (max-width:820px){
    .suiseki-text-grid{column-count:1;}
  }

  /* Full-size photo slots reuse .suiseki-decor (defined above, used by the
     standalone decorative suiseki photo between the enso divider and the
     almond strip) so the essay photos share its exact sizing and caption
     styling. They're now plain siblings between .suiseki-text-grid boxes
     (see architecture note above), so no column-span is needed — a figure
     is a block element and already spans the full content width on its
     own. Margin keeps its own vertical rhythm on both sides so the
     surrounding paragraphs never crowd it. */
  .suiseki-essay .suiseki-decor{
    margin:2.2cm auto;
  }
  .suiseki-essay .suiseki-decor:first-of-type{
    margin-top:0.4cm;
  }
  .suiseki-essay .suiseki-decor:last-of-type{
    margin-bottom:0.4cm;
  }
  @media (max-width:600px) and (orientation:portrait){
    .suiseki-essay .suiseki-decor{ margin:1.4cm auto; }
  }

/* ---------- GO SUMMARY (lineage closing abstract) ---------- */
.go-summary{
  margin-top:56px;
  padding:40px 0 0;
  border-top:1px solid var(--hairline);
  text-align:center;
}
.go-summary-eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
}
.go-summary-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:28px; margin:28px 0 40px;
}
.go-summary-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.go-summary-glyph{
  font-family:var(--serif); font-size:clamp(34px, 4vw, 44px);
  color:var(--paper); line-height:1;
}
.go-summary-reading{
  font-family:var(--sans); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
}
.go-summary-gloss{
  font-family:var(--sans); font-size:12.5px; color:var(--stone);
  font-style:italic; max-width:140px;
}
.go-summary-mission{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:28px 0; border-top:1px solid var(--hairline);
  max-width:520px; margin:0 auto;
}
.go-summary-mission-jp{
  font-family:var(--serif); font-size:clamp(18px, 2.2vw, 22px);
  color:var(--paper); letter-spacing:0.04em;
}
.go-summary-mission-tr{
  font-family:var(--sans); font-size:13.5px; color:var(--stone);
  font-style:italic; line-height:1.6;
}
.go-summary-mission-source{
  font-family:var(--sans); font-size:11px; letter-spacing:0.1em;
  color:var(--gold-soft);
}
.go-summary-provenance{
  font-family:var(--sans); font-size:12px; color:var(--stone);
  max-width:480px; margin:24px auto 0; line-height:1.7;
}
@media (max-width:700px){
  .go-summary-grid{grid-template-columns:repeat(2, 1fr); row-gap:32px;}
}

/* ---------- NAME ETYMOLOGY (why 勝讓武古 reads Masaru Buko) ----------
   Deliberate rhythm, not a stack of subheads: 1 column (intro) → 2 real
   columns (sound/meaning) → full-width quote → 2 real columns (pronunciation/
   kanji function) → 1 column (synthesis) → full-width diagram → narrow
   colophon. Each .etym-grid instance is a genuine CSS grid with two
   independent panels, never collapsed into stacked paragraphs. */
.etym{
  margin-top:64px;
  padding-top:48px;
  border-top:1px solid var(--hairline);
}
.etym-title{
  font-family:var(--serif); font-size:clamp(22px, 2.6vw, 28px);
  font-weight:500; color:var(--paper);
  text-align:center; margin:0 0 40px;
}

/* 1-column blocks: intro + synthesis, narrow and centered */
.etym-col-1{
  max-width:640px; margin:0 auto 44px;
}
.etym-col-1 p{
  font-family:var(--sans); font-size:15.5px; line-height:1.85;
  color:var(--paper-dim);
}
.etym-col-1 p + p{ margin-top:18px; }

/* 2-column blocks: real CSS grid, no vertical rule between panels */
.etym-grid{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:56px; row-gap:28px;
  margin:0 0 48px;
}
.etym-panel{
  display:flex; flex-direction:column; gap:10px;
}
.etym-eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
}
.etym-panel p{
  font-family:var(--sans); font-size:14.5px; line-height:1.8;
  color:var(--paper-dim);
}

/* Full-width quote: pulled out of the column flow entirely */
.etym-quote{
  margin:0 0 48px; padding:44px 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
}
.etym-quote-jp{
  font-family:var(--serif); font-size:clamp(19px, 2.4vw, 25px);
  color:var(--paper); letter-spacing:0.03em; max-width:640px;
}
.etym-quote-source{
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.12em;
  color:var(--gold-soft);
}

/* Full-width diagram: graphic centerpiece, same visual dignity as
   .go-summary-grid above it — not a plain stack of left-aligned lines. */
.etym-diagram{
  position:relative;
  margin:0 0 48px; padding:48px 32px;
  border:none; /* the border is now painted by .etym-diagram-frame (SVG) */
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.etym-diagram-frame{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:visible;
}
.etym-diagram-frame path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
}
.etym-diagram-eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
  margin-bottom:16px;
}
.etym-diagram-row span{
  font-family:var(--sans); font-size:14.5px; letter-spacing:0.02em;
  color:var(--paper-dim);
}
.etym-diagram-row--gold span{
  font-family:var(--serif); font-size:clamp(30px, 4vw, 42px);
  color:var(--paper); letter-spacing:0.05em; line-height:1;
}
.etym-diagram-row--mission span{
  font-family:var(--serif); font-size:clamp(15px, 1.9vw, 19px);
  color:var(--gold-soft); font-style:italic;
}
.etym-diagram-arrow{
  font-family:var(--sans); font-size:16px; color:var(--gold);
  opacity:0.55; line-height:1;
}
.etym-diagram-note{
  font-family:var(--sans); font-size:11px; font-style:italic;
  letter-spacing:0.04em; color:var(--stone); margin:-4px 0 0;
}

/* Colophon: very narrow, closing-line treatment */
.etym-colophon{
  max-width:440px; margin:0 auto; padding-top:4px;
  font-family:var(--serif); font-size:15px; font-style:italic;
  line-height:1.7; color:var(--stone); text-align:center;
}

/* Closing CTA — same margin-top:38px pattern as .bci-cta / .wbu-cta,
   the standardized spacing used site-wide for a section's closing link-cta. */
.etym-cta{margin-top:38px;}

/* Closing CTA for "Before the Path" — same margin-top:38px pattern as
   .bci-cta / .wbu-cta / .etym-cta, the standardized spacing used
   site-wide for a section's closing link-cta. */
.before-path-cta{margin-top:38px;}

/* Local glossary scoped to "Before the Path": archaeological/lithic
   vocabulary, deliberately styled apart from the site-wide #glossary
   (no dark --ink background, no collapsible .glossary-group, no
   auto-numbering) — a flat reference list that lives and dies with
   this single section. Sits inside .before-path-body-closing, so it
   inherits the 720px reading column. */
.before-path-glossary{
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--hairline);
}
.before-path-glossary-label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:20px;
}
.before-path-glossary-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px 40px;
}
.before-path-glossary-term dt{
  font-family:var(--serif);
  font-size:15px;
  color:var(--paper);
  margin-bottom:5px;
  letter-spacing:0.01em;
}
.before-path-glossary-term dd{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.65;
  color:var(--stone);
}
@media (max-width:700px){
  .before-path-glossary-list{ grid-template-columns:1fr; gap:20px; }
}

@media (max-width:700px){
  .etym-col-1{ max-width:100%; }
  .etym-grid{ grid-template-columns:1fr; row-gap:32px; }
  .etym-diagram{ padding:36px 20px; }
  .etym-colophon{ max-width:100%; }
}

/* ---------- UN INSTANTE DE NATURALEZA — Field photo (Blob-fed) ---------- */
.field-photo{
  background:var(--ink);
  text-align:center;
  /* Top: standard text-block-to-figure spacing within a section (40px) —
     matches .lineage-photo's margin-top, the sitewide pattern for a photo
     that follows a text block as its own distinct apartado inside the same
     section (not a section-to-section gap, and not the tighter
     paragraph-to-paragraph rhythm). season-koh and field-photo are two
     apartados of the same portada band, so this is the right analogue.
     Bottom: 0 — same pattern as .season-koh: the gap to .hero is NOT this
     element's own padding, it's .panorama-to-hero-band's own padding-bottom
     (var(--hero-gap-above)). Giving this section its own bottom padding
     on top of that doubles the gap before Hero. */
  padding:40px 0 0;
  /* Hidden until the field-photo loader (shared.js) reveals it, in the
     same synchronous pass that also populates #seasonKoh just above it.
     Without this, the browser can paint this section — and its already-
     parsed <img>, which starts loading the moment the HTML is parsed,
     independent of any script — on its very first pass, before the
     script tag near the end of body has run and while #seasonKoh is
     still visually empty. That let this section flash into view inside
     the initial fold, then get shoved back out of it once #seasonKoh's
     JS-injected content landed a moment later. Hiding it up front closes
     that window: whatever paints first already matches the final,
     fully-populated layout. */
  opacity:0;
  visibility:hidden;
}
.field-photo.is-ready{
  opacity:1;
  visibility:visible;
  transition:opacity 500ms ease;
}
.field-photo-title{
  text-align:center;
  margin:0 0 6px;
}
.field-photo-subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  letter-spacing:0.01em;
  color:var(--stone);
  text-align:center;
  margin:0 0 20px;
}
.field-photo-frame{
  /* Shrink-wraps to the image's actual rendered size instead of forcing a
     fixed box that the image then had to be stretched (width:100%) and
     letterboxed (object-fit:contain) into — that fixed-box approach is
     what caused wide empty side margins on vertical photos. One rule
     now covers both orientations: the binding constraint is whichever
     the photo's own aspect ratio hits first — the available width inside
     .wrap, or the img's max-height below. Horizontal photos hit the
     width ceiling and fill it. Vertical photos hit the img's max-height
     instead. No side gaps either way. Note: the field-photo loader
     (shared.js) now also sets this frame's width as an explicit inline
     pixel value, matching the img's computed width — added after a long
     figcaption caption was found able to stretch this inline-block frame
     wider than the photo itself; see the comment on sizeFieldPhoto()
     there. That inline width always wins over max-width below, so the
     "shrink-wraps"/"fit-content" description here now only describes the
     fallback behavior before that inline width is applied (e.g. very
     briefly on load, or if JS fails). No hardcoded max-width here beyond
     the 100% cap below: this frame lives inside .wrap (see index.html),
     so it's naturally capped at .wrap's own content width — the same
     measure every other full-width element on the site uses — with
     nothing to duplicate or fall out of sync.
     display:inline-block instead of width:fit-content: WebKit/Safari has
     a shrink-to-fit bug where a block box sized with width:fit-content,
     containing a replaced element constrained only by max-height (no
     width of its own), fails to compute the child's aspect-ratio-derived
     width and falls back to the full available width instead — exactly
     the wide-frame-with-dark-margins symptom this caused in Safari.
     inline-block sizes to content reliably across engines, and centers
     via .field-photo's inherited text-align:center instead of margin:auto,
     which needs the same width calculation this was built to avoid. */
  display:inline-block;
  max-width:100%;
  background:var(--ink-soft);
  overflow:hidden;
  border-radius:2px;
  margin:0;
}
.field-photo-frame img{
  /* No max-width / max-height / width:auto / height:auto here on purpose:
     the field-photo loader (shared.js) sets this image's width and height
     as explicit inline pixel values — computed from the photo's real
     aspect ratio and the frame's real available width — before the section
     is ever revealed to the user (see sizeFieldPhoto() there). Those
     inline pixel values always win over any stylesheet rule, so a
     percentage max-width mixed with a pixel max-height here would never
     take effect; it would just be dead, duplicated sizing logic sitting
     next to the one place (FIELD_PHOTO_MAX_HEIGHT in shared.js) that
     actually governs the cap. That same percentage+pixel mix, incidentally,
     is the exact pattern that caused the original WebKit shrink-to-fit
     bug this component was built to avoid — one more reason not to
     reintroduce it here even as a "just in case" fallback. */
  display:block;
  margin:0 auto;
}
.field-photo-caption{
  /* Vertical padding matches the sitewide photo->caption standard
     (margin-top:10px, repeated in .bci-diploma, .wbu-photo, .path-photo,
     .lineage-photo, .who-i-am-photo, .before-path-photo, .hero-divider).
     Here it's padding rather than margin because of the grey box, but the
     value stays the same top and bottom, and matches the rest of the site.
     Lateral stays at 20px: this is the only caption sitting inside a boxed
     frame, so the side inset is necessarily its own case. */
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.06em;
  line-height:1.5;
  color:var(--stone);
  text-align:left;
  padding:10px 20px;
}
.field-photo-caption em{
  font-style:italic;
}