/* Bliss homepage prototype. Palette variables come from assets/site-palette.css; wordmark from assets/brand-typography.css.
   Font rule: <= 700px system gothic only (no font CSS requested); >= 701px adds self-hosted Klee One 400 (loaded by app.mjs).
   Navigation switch (1100px) is independent of the font switch (700/701px). All interactive targets >= 48px. */

:root {
  --navy: #17324d;
  --pale: #edf6fa;
  --muted: #536a7c;
  --line: #d2dee7;
  --mark-blue: #2f6fdc;
  --mark-lavender: #9a7fcf;
  --focus: #1f5fd1;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", Meiryo, "IPAexGothic", "IPAPGothic", system-ui, sans-serif;
  --font-body: var(--gothic);
  --gutter: 1.25rem;
  --section-gap: 2rem;
  --target: 3rem; /* 48px at the default size; grows with text zoom */
}

@media (min-width: 701px) {
  :root {
    --font-body: "Klee One", var(--gothic);
    --gutter: 1.5rem;
    --section-gap: 4.5rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
html body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  font-synthesis: none;
  overflow-wrap: break-word;
  word-break: auto-phrase; /* phrase-aware Japanese line breaks (ignored where unsupported) */
}
@media (min-width: 701px) { html body { font-size: 1.0625rem; } }

h1, h2, p, ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }

.container { width: min(100% - var(--gutter) * 2, 70rem); margin-inline: auto; }

.preview-context {
  padding: .35rem var(--gutter);
  background: #fff;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.6;
  text-align: center;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 60; display: inline-flex; align-items: center;
  min-height: var(--target); padding: 0 1rem; background: #fff; color: var(--navy); border: 1px solid var(--line);
}
.skip-link:focus { top: .5rem; }

/* ------------------------------------------------------------------ header */

.site-header { position: relative; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.header-bar { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; }

.brand, .footer-brand { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; min-height: var(--target); color: var(--navy); }
/* The logo follows text zoom but is capped by the viewport so it never forces horizontal scroll. */
.brand__name { font-size: min(1.5rem, 7vw); line-height: 1.25; letter-spacing: .07em; white-space: nowrap; }
.brand__tag { font-size: min(.6875rem, 3.3vw); line-height: 1.4; letter-spacing: .1em; color: var(--muted); }

.menu-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-width: 3.5rem; min-height: 3.5rem; margin-right: -.5rem; padding: .25rem .5rem;
  border: 0; background: none; color: var(--navy); font: inherit; font-size: .6875rem; line-height: 1.2; cursor: pointer;
}
.menu-toggle__icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close { display: block; }

/* Navigation list shared by the header menu and the footer */
.nav-list { display: block; }
.nav-link {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .5rem .25rem; border-bottom: 1px solid var(--line); color: var(--navy);
}
.nav-item--session > .nav-link, .nav-item--rainbow > .nav-link { padding-left: 1.1rem; }
.nav-item--session > .nav-link::before, .nav-item--rainbow > .nav-link::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 1.6rem; transform: translateY(-50%);
}
.nav-item--session > .nav-link::before { background: var(--mark-blue); }
.nav-item--rainbow > .nav-link::before { background: var(--mark-lavender); }
.arrow { flex: none; color: var(--navy); }

/* Mobile / tablet menu panel (< 1100px) */
@media (max-width: 68.74em) {
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 4.25rem); overflow-y: auto;
    padding: .75rem var(--gutter) 1.25rem; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(23, 50, 77, .1);
  }
  .site-header.is-open .site-nav { display: block; }
  .nav-caption { font-size: .75rem; line-height: 2; color: var(--muted); }
  .nav-top {
    display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0 .25rem; color: var(--navy);
  }
  .nav-top .arrow { transform: scaleX(-1); }
  .site-nav .nav-list { max-width: 40rem; }
  .nav-top { max-width: 40rem; }
}

/* Desktop navigation (>= 1100px) */
@media (min-width: 68.75em) {
  .header-bar { min-height: 6.25rem; }
  .brand__name { font-size: 2.2rem; }
  .brand__tag { font-size: .8125rem; }
  .menu-toggle, .nav-caption, .nav-top, .site-nav .arrow, .footer-nav .arrow { display: none; }
  .site-nav { display: block; }
  .site-nav .nav-list, .footer-nav .nav-list { display: flex; align-items: center; }
  .site-nav .nav-link, .footer-nav .nav-link {
    min-height: var(--target); padding: 0 1rem; border: 0; font-size: 1rem; letter-spacing: .04em; white-space: nowrap;
  }
  .site-nav .nav-item--session > .nav-link, .site-nav .nav-item--rainbow > .nav-link,
  .footer-nav .nav-item--session > .nav-link, .footer-nav .nav-item--rainbow > .nav-link { padding-left: 1.2rem; }
  .site-nav .nav-item--session > .nav-link::before, .site-nav .nav-item--rainbow > .nav-link::before,
  .footer-nav .nav-item--session > .nav-link::before, .footer-nav .nav-item--rainbow > .nav-link::before {
    width: 2px; height: 1.5rem; left: .25rem;
  }
  .site-nav .nav-link:hover .nav-link__label, .footer-nav .nav-link:hover .nav-link__label { text-decoration: underline; text-underline-offset: .35em; }
}

/* ------------------------------------------------------------------ hero
   Mobile (<= 700px): photo full-bleed, then eyebrow / H1 / complete copy / signature (mobile board).
   PC (>= 701px): adopted board composition — vertical photo on the LEFT; eyebrow, two-line H1, complete copy,
   the two entrances and the signature on the RIGHT. Dimensions are responsive approximations of the board. */

.hero-photo { position: relative; height: clamp(170px, 55vw, 260px); overflow: hidden; background: #dfeaf0; }
.hero-photo picture, .rainbow__photo picture { display: block; }
.hero-photo img, .rainbow__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo img { object-position: 50% 30%; }
@media (max-width: 700.98px) { .hero > .container { width: 100%; } }

.hero-copy { padding: 1.25rem var(--gutter) 1.25rem; }
.hero-rule, .hero-links { display: none; }
.eyebrow {
  /* Script-style English tagline from system fonts only (no font file, no request): Snell Roundhand / Apple Chancery (macOS),
     Segoe Script (Windows), URW Chancery / Z003 (Linux); italic serif where none exists. */
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Lucida Handwriting", "URW Chancery L", "Z003", Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 1.25rem; line-height: 1.5; letter-spacing: .02em; color: var(--navy); margin-bottom: .1rem;
}
.home-title { color: var(--navy); font-weight: 500; font-size: clamp(1.9rem, 10.4vw, 2.75rem); line-height: 1.3; letter-spacing: .04em; }
.home-title__line { display: block; }
.lead { margin-top: .85rem; color: var(--navy); font-size: 1rem; line-height: 1.8; }
.description { margin-top: .6rem; color: var(--site-ink); font-size: .9375rem; line-height: 1.8; }
.signature { margin-top: .6rem; text-align: right; font-size: .9375rem; color: var(--navy); letter-spacing: .08em; }

/* PC frame (>= 900px): the adopted board fills its whole panel, so content uses an 80rem frame with a ~4.7% inset; the hero and the
   rainbow band are flush (photo at the left edge, band edge to edge) exactly like the board. */
@media (min-width: 900px) {
  .container { width: min(100%, 80rem); padding-inline: 4.7%; }
  .hero > .container, .rainbow > .container { padding-inline: 0; }
}

/* >= 701px only changes type (Klee One zone). It does NOT decide the left/right layout. */
@media (min-width: 701px) {
  .eyebrow { font-size: 1.5rem; margin-bottom: .25rem; }
  .home-title { font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 1.32; }
  .lead { margin-top: 0; font-size: 1.0625rem; line-height: 1.9; }
  .description { margin-top: .55rem; font-size: 1rem; line-height: 1.8; }
  .signature { margin-top: .6rem; font-size: 1rem; }
  .hero-link {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: var(--target);
    padding: 0 .25rem; border-bottom: 1px solid #6f8aa3; color: var(--navy); font-size: 1.0625rem; letter-spacing: .05em;
  }
}

/* Narrow tablet widths (701-899px): natural responsive stacking, shallow photo above the complete copy. */
@media (min-width: 701px) and (max-width: 899.98px) {
  .hero-photo { height: clamp(220px, 34vw, 300px); margin-top: 1.5rem; }
  .hero-copy { padding: 1.75rem 0 0; }
  .home-title { font-size: clamp(2.4rem, 6.4vw, 3.25rem); }
}

/* Adopted PC composition (board left panel): from 900px up — vertical photo LEFT, copy + entrances RIGHT. */
@media (min-width: 900px) {
  .hero__grid {
    display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    background:
      radial-gradient(120% 90% at 6% 6%, #d6e8f3 0%, rgba(214, 232, 243, 0) 58%),
      radial-gradient(90% 80% at 96% 96%, #fff 0%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(160deg, #e1eff7 0%, #edf6fa 52%, #f6fafc 100%);
  }
  .hero-photo { height: auto; width: 100%; aspect-ratio: 3 / 4; align-self: stretch; justify-self: stretch; min-width: 0; margin-top: 0; }
  .hero-photo img { object-position: 50% 42%; }
  .hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 5vw, 4rem); }
  .hero-rule { display: block; width: 3.25rem; height: 1px; margin: 1.25rem 0 1.1rem; background: #7f9bb3; }
  .hero-links { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: 1.1rem; }
  /* Reserve the copy column's height before app.mjs renders so the photo does not grow afterwards (CLS). */
  .hero-copy:empty { min-height: 45rem; }
}

/* ------------------------------------------------------------------ notice (placeholder, thin full border, no accent bar) */

.notice {
  margin-top: 1.25rem; padding: .8rem 1rem; background: var(--pale); border: 1px solid #b8cfdd; border-radius: 4px;
  color: var(--site-ink); font-size: .875rem; line-height: 1.7;
}
@media (min-width: 701px) { .notice { margin-top: 1rem; font-size: .9375rem; padding: .85rem 1.25rem; } }

/* ------------------------------------------------------------------ entrances */

.entrance-list { border-bottom: 1px solid var(--line); }
.entrance {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: 5rem; padding: .85rem .25rem; border-top: 1px solid var(--line); color: var(--navy);
}
.entrance__no {
  padding-right: 1rem; border-right: 1px solid var(--line); font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  font-size: 2.4rem; line-height: 1; color: #86a2bd; letter-spacing: .02em;
}
.entrance__text { display: block; min-width: 0; }
.entrance__title { display: block; font-size: 1.125rem; line-height: 1.5; font-weight: 500; letter-spacing: .04em; }
.entrance__desc { display: block; margin-top: .1rem; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
@media (min-width: 701px) {
  .entrance { min-height: 6rem; gap: 1.5rem; }
  .entrance__no { font-size: 3.75rem; padding-right: 1.75rem; }
  .entrance__text { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1.75rem; }
  .entrance__title { font-size: 1.6rem; font-weight: 400; }
  .entrance__desc { margin-top: 0; font-size: 1rem; }
}
@media (min-width: 900px) {
  /* Board: hairline only BETWEEN the two rows; big light-slate numerals, short vertical rule, large title + small description inline. */
  .entrance-list { border-bottom: 0; }
  .entrance-list li + li .entrance { border-top: 1px solid var(--line); }
  .entrance { border-top: 0; min-height: 7.25rem; gap: 3.25rem; padding-block: 1rem; }
  .entrance__no { padding-right: 3.25rem; font-size: 4rem; color: #aebfcf; font-weight: 300; }
  .entrance__text { gap: .25rem 2.5rem; }
  .entrance__title { font-size: 2.4rem; letter-spacing: .06em; }
}

/* ------------------------------------------------------------------ themes */

.themes { padding-block: var(--section-gap) 0; }
.section-title { display: block; color: var(--navy); font-size: 1.1875rem; line-height: 1.6; font-weight: 500; letter-spacing: .04em; }
.section-sub { margin-top: .1rem; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.section-head { margin-bottom: 1rem; }
@media (min-width: 701px) {
  .section-title { font-size: 1.75rem; font-weight: 400; }
  .section-sub { font-size: .9375rem; }
}

.theme-list { border-bottom: 1px solid var(--line); }
.theme {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .7rem .25rem; border-top: 1px solid var(--line); color: var(--navy);
}
.theme__text { display: block; min-width: 0; }
.theme__title { display: block; font-size: 1rem; line-height: 1.6; font-weight: 500; letter-spacing: .03em; }
.theme__desc { display: block; font-size: .8125rem; line-height: 1.65; color: var(--muted); }
@media (min-width: 701px) {
  .theme-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; column-gap: 2.5rem; }
  .theme { align-items: flex-end; min-height: 5.5rem; padding: 1rem .25rem; }
  .theme-list li:nth-last-child(-n+2) .theme { border-bottom: 1px solid var(--line); }
  .theme__title { font-size: 1.3125rem; font-weight: 400; }
  .theme__desc { font-size: .9375rem; }
}
@media (min-width: 900px) {
  /* Board: heading with a hairline running to the right; four themes across, short vertical dividers, arrow at the lower right of each. */
  .themes { padding-top: 2.5rem; }
  .themes .section-head { display: flex; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: 1rem; padding-inline: .25rem; }
  .themes .section-title { font-size: 2rem; }
  .themes .section-head::after { content: ""; flex: 1 1 4rem; align-self: center; border-top: 1px solid var(--line); }
  .theme-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-bottom: 0; }
  .theme-list li { display: flex; border-left: 1px solid var(--line); }
  .theme-list li:first-child { border-left: 0; }
  .theme-list li .theme { flex: 1; border: 0; padding: 1rem 1.25rem; }
  .theme-list li:first-child .theme { padding-left: .25rem; }
  .theme { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: .75rem; min-height: 6.5rem; }
  .theme__title { font-size: 1.5rem; }
  .theme-list li:nth-last-child(-n+2) .theme { border-bottom: 0; }
}

/* ------------------------------------------------------------------ latest posts */

.latest { padding-block: var(--section-gap) 0; }
.latest .section-title { margin-bottom: .5rem; }
.post-list { border-bottom: 1px solid var(--line); }
.post {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.5rem; padding: .7rem .25rem; border-top: 1px solid var(--line); color: var(--navy);
}
.post__text { display: block; min-width: 0; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.post__title { display: block; font-size: .9375rem; line-height: 1.7; }
.new-badge {
  display: inline-block; padding: 0 .5em; border: 1px solid #8fb0c8; border-radius: 2px; background: #fff;
  color: var(--navy); font-size: .6875rem; line-height: 1.55; letter-spacing: .1em;
}
.text-link {
  display: inline-flex; align-items: center; gap: .75rem; min-height: var(--target); margin-top: .5rem; padding: 0 .25rem;
  color: var(--navy); font-size: .9375rem;
}
.list-links { display: flex; flex-direction: column; align-items: flex-start; }
.list-links .text-link { margin-top: 0; }
.text-link--unconnected { cursor: default; color: var(--muted); }
.text-link--unconnected small { font-size: .75rem; }
.text-link > span:first-child { text-decoration: underline; text-decoration-color: #9db4c6; text-underline-offset: .45em; }
@media (min-width: 701px) {
  .post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; border-bottom: 0; }
  .post-list li:nth-last-child(-n+2) .post { border-bottom: 1px solid var(--line); }
  .post { min-height: 5.5rem; }
  .post__title { font-size: 1.0625rem; }
  .post__meta { font-size: .875rem; }
}

/* ------------------------------------------------------------------ profile / rainbow / contact */

.profile { padding-block: var(--section-gap) 0; }
.row-section { display: block; }
.row-section__desc { display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.75; color: var(--site-ink); }
.profile .text-link { margin-top: .6rem; }
@media (min-width: 701px) {
  .row-section { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1rem; border-block: 1px solid var(--line); }
  .profile .text-link { margin-top: 0; flex: none; }
  .row-section__desc { font-size: 1rem; }
}

.rainbow { padding-top: var(--section-gap); }
.rainbow__link { display: block; background: #fff; color: var(--navy); }
.rainbow__photo { position: relative; display: block; height: 7.5rem; overflow: hidden; background: #cfdde4; }
.rainbow__photo img { object-position: 50% 50%; }
/* Restrained rainbow light: a faint spectrum band plus a soft highlight; no panel, no animation. */
.rainbow__light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 26% 150% at 50% 50%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 74%),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 6%),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, 0) 5%),
    linear-gradient(102deg, rgba(255, 255, 255, 0) 22%, rgba(255, 120, 120, .45) 37%, rgba(255, 205, 90, .5) 46%,
      rgba(110, 215, 160, .45) 54%, rgba(100, 170, 255, .5) 62%, rgba(185, 145, 240, .45) 71%, rgba(255, 255, 255, 0) 86%);
}
.rainbow__text { display: block; padding: 1.25rem .25rem .25rem; }
.rainbow__title { display: flex; align-items: center; gap: .9rem; min-height: var(--target); font-size: 1.1875rem; line-height: 1.5; font-weight: 500; letter-spacing: .04em; }
.rainbow__desc { display: block; margin-top: .15rem; font-size: .9375rem; line-height: 1.8; color: var(--muted); }
@media (min-width: 701px) {
  /* Adopted board: the photo band is NOT cut by a white box; navy title + arrow + thin line sit directly on the bright water. */
  .rainbow__link { position: relative; display: block; background: transparent; }
  .rainbow__photo { height: clamp(7.5rem, 14vw, 10rem); }
  .rainbow__photo img { filter: brightness(1.1) saturate(1.05); }
  .rainbow__text { padding: .75rem .25rem .25rem; text-align: center; }
  .rainbow__title {
    position: absolute; top: calc(clamp(7.5rem, 14vw, 10rem) / 2); left: 50%; transform: translate(-50%, -50%);
    justify-content: center; width: max-content; max-width: calc(100% - 2rem); min-height: 0; padding: .2rem .25rem .3rem;
    border-bottom: 1px solid var(--navy); color: var(--navy); background: none; font-size: 1.75rem; font-weight: 400; letter-spacing: .06em;
  }
  .rainbow__desc { font-size: 1rem; }
}
@media (min-width: 900px) {
  .rainbow { padding-top: 1.25rem; }
  .rainbow__photo { height: auto; aspect-ratio: 860 / 115; }
  .rainbow__title { top: 50%; font-size: 2.1rem; }
}

.contact { padding-block: var(--section-gap); }
.contact__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; padding: 1rem .25rem;
  border-block: 1px solid var(--line); color: var(--navy);
}
.contact__text { display: block; min-width: 0; }
.contact__text .row-section__desc { color: var(--muted); font-size: .875rem; }
@media (min-width: 701px) { .contact__link { min-height: 6.5rem; } .contact__text .row-section__desc { font-size: 1rem; } }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--pale); border-top: 1px solid var(--line); padding-block: 2rem 1.25rem; }
.footer-inner { display: block; }
.footer-brand { margin-bottom: .75rem; }
.footer-brand .brand__name { font-size: min(1.6rem, 7.4vw); }
.footer-brand .brand__tag { font-size: min(.75rem, 3.4vw); }
@media (min-width: 68.75em) { .footer-brand .brand__name { font-size: 2rem; } .footer-brand .brand__tag { font-size: .8125rem; } }
.footer-legal { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--line); }
html body footer .bliss-footer-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--target); padding: 0 .25rem; color: var(--navy); text-decoration: none; text-underline-offset: .25em;
}
.bliss-copyright { color: var(--muted); }
html body footer .bliss-copyright { margin-top: 1rem; }
.preview-note {
  margin-top: 1.25rem; padding-top: .9rem; border-top: 1px dashed #b4c6d3; font-size: .75rem; line-height: 1.7; color: var(--muted);
}
.footer-nav .nav-link { border-bottom-color: #c5d6e1; }
@media (min-width: 68.75em) {
  .site-footer { padding-block: 2.5rem 1.5rem; }
  .footer-inner { display: grid; grid-template-columns: auto 1fr; column-gap: 2rem; align-items: start; }
  .footer-brand { grid-column: 1; grid-row: 1 / span 3; }
  .footer-nav { grid-column: 2; justify-self: end; }
  .footer-legal { grid-column: 2; justify-self: end; display: flex; margin-top: .25rem; padding-top: 0; border-top: 0; }
  html body footer .bliss-footer-links a { display: inline-flex; padding: 0 1rem; text-decoration: underline; }
  html body footer .bliss-footer-links a .arrow { display: none; }
  .footer-legal .legal-link + .legal-link { border-left: 1px solid #b4c6d3; }
  .bliss-copyright { grid-column: 2; justify-self: end; margin-top: .25rem; }
  .preview-note { grid-column: 1 / -1; }
}
@media (min-width: 701px) and (max-width: 68.74em) {
  .footer-nav, .footer-legal { max-width: 40rem; }
}

@media (hover: hover) {
  .entrance:hover, .theme:hover, .post:hover, .contact__link:hover { background: rgba(237, 246, 250, .7); }
  .text-link:hover > span:first-child, .legal-link:hover { text-decoration-color: var(--navy); }
  .nav-link:hover { background: rgba(237, 246, 250, .6); }
}

/* With phrase-aware wrapping a long label can be one unbreakable phrase; let it break rather than overflow under large text. */
.nav-link__label, .entrance__text, .theme__text, .post__text, .rainbow__text, .contact__text, .row-section__text, .intro__body, .intro__head,
.legal-link > span, .text-link > span:first-child, .rainbow__title > span { overflow-wrap: anywhere; min-width: 0; }

/* Before app.mjs renders, keep the page body tall and the footer hidden so nothing visible shifts (CLS). */
#home-sections:empty { min-height: 100vh; }
.site-footer:empty { display: none; }
.noscript { padding-block: 1rem; }

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