/* ==== Brand tokens (SweetBun : rose + violet) ==== */
:root{
  --brand:#d6246e;        /* rose principal — texte blanc OK (4.8:1) */
  --brand-deep:#a3175a;   /* rose profond, survol */
  --brand-bright:#ff5fa8; /* rose vif, éclats sur fond sombre */
  --brand-soft:#fde7f3;   /* teinte rose claire */
  --violet:#7c3aed;       /* violet principal — texte blanc OK (5.7:1) */
  --violet-deep:#4c1d95;  /* violet profond */
  --violet-bright:#a78bfa;/* violet vif, éclats sur fond sombre */
  --violet-soft:#efe9ff;  /* teinte violette claire */
  --accent:#a855f7;       /* accent (violet-mauve), avec parcimonie */
  --ink:#1d1030;          /* texte sur clair (violet très sombre) */
  --night:#130a22;        /* surfaces sombres (nuit violette) */
  --paper:#fcf8ff;        /* surfaces claires (blanc lavande) */
  --white:#ffffff;
  --muted:#6b5a80;        /* texte secondaire */
  --gradient:linear-gradient(135deg,#d6246e 0%,#a033c8 52%,#7c3aed 100%); /* dégradé signature rose → violet */
}
/* ==== fin des tokens ==== */

/* ==========================================================================
   SweetBun AI — "Love-story diary" (sweetbun-ai.com)
   Every colour below is derived from the tokens above.
   ========================================================================== */

/* ---- Theme: semantic aliases (light reading body, dark romantic night) ---- */
:root{
  color-scheme: light;

  /* light surfaces */
  --bg: var(--paper);
  --bg-blush: color-mix(in srgb, var(--brand-soft) 60%, var(--paper));
  --bg-lavender: color-mix(in srgb, var(--violet-soft) 75%, var(--paper));
  --surface: var(--white);
  --surface-tint: color-mix(in srgb, var(--violet-soft) 60%, var(--white));
  --surface-blush: color-mix(in srgb, var(--brand-soft) 65%, var(--white));

  /* dark surfaces */
  --surface-dark: var(--night);
  --glass-dark: color-mix(in srgb, var(--night) 90%, transparent);
  --glass-light: color-mix(in srgb, var(--paper) 8%, transparent);
  --glass-light-strong: color-mix(in srgb, var(--paper) 15%, transparent);
  --panel-bg: color-mix(in srgb, var(--night) 94%, var(--violet-deep));

  /* text */
  --text: var(--ink);
  --text-body: color-mix(in srgb, var(--ink) 90%, var(--violet-deep));
  --text-soft: var(--muted);
  --text-pink: var(--brand-deep);
  --text-violet: var(--violet);
  --text-on-dark: var(--paper);
  --text-on-dark-soft: color-mix(in srgb, var(--paper) 82%, var(--violet-bright));
  --text-on-dark-muted: color-mix(in srgb, var(--paper) 70%, var(--night));
  --text-on-brand: var(--white);

  /* lines */
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 20%, transparent);
  --line-brand: color-mix(in srgb, var(--brand) 26%, transparent);
  --line-violet: color-mix(in srgb, var(--violet) 18%, transparent);
  --line-on-dark: color-mix(in srgb, var(--paper) 14%, transparent);
  --line-on-dark-strong: color-mix(in srgb, var(--paper) 30%, transparent);

  /* gradients, glows, highlights */
  --gradient-light: linear-gradient(135deg, var(--brand-bright), var(--violet-bright));
  --gradient-soft: linear-gradient(135deg, var(--brand-soft), var(--violet-soft));
  --highlight: color-mix(in srgb, var(--brand-bright) 24%, transparent);
  --highlight-dark: color-mix(in srgb, var(--brand) 55%, transparent);
  --glow-pink: color-mix(in srgb, var(--brand-bright) 55%, transparent);
  --glow-violet: color-mix(in srgb, var(--violet) 55%, transparent);
  --focus: var(--violet);

  /* shadows */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--violet-deep) 8%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--violet-deep) 14%, transparent);
  --shadow-md: 0 14px 34px -14px color-mix(in srgb, var(--violet-deep) 30%, transparent);
  --shadow-page: 0 24px 60px -30px color-mix(in srgb, var(--violet-deep) 38%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--brand) 18%, transparent);
  --shadow-lg: 0 30px 70px -24px color-mix(in srgb, var(--night) 70%, transparent);
  --shadow-cta: 0 10px 26px -10px color-mix(in srgb, var(--brand) 75%, transparent);
  --shadow-cta-hover: 0 0 0 4px color-mix(in srgb, var(--brand-bright) 20%, transparent), 0 16px 40px -10px var(--glow-pink), 0 10px 50px -12px var(--glow-violet);
  --shadow-portrait: 0 28px 60px -22px color-mix(in srgb, var(--night) 90%, transparent), 0 0 46px -10px var(--glow-violet);
  --shadow-portrait-star: 0 34px 70px -24px color-mix(in srgb, var(--night) 95%, transparent), 0 0 70px -6px var(--glow-pink), 0 0 0 1px color-mix(in srgb, var(--paper) 18%, transparent);

  /* type */
  --font-display: "Playfair Display", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Playfair Display", Georgia, "Times New Roman", serif;
  --caps: uppercase;
  --track-caps: .16em;
  --track-display: -.012em;
  --lh-body: 1.75;
  --lh-head: 1.14;
  --italic: italic;

  /* shape & rhythm */
  --radius-sm: .6rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: clamp(1.25rem, 3vw, 2rem);
  --radius-pill: 999px;
  --hero-curve: clamp(1.75rem, 5vw, 3.5rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 4rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Per-script typography: no tracking, no uppercase, roomier lines ---- */
:lang(ar), :lang(fa){
  --font-display: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, serif;
  --font-body: "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, sans-serif;
}
:lang(he){
  --font-display: "Noto Serif Hebrew", "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI", Tahoma, serif;
  --font-body: "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI", Tahoma, sans-serif;
}
:lang(ja){
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}
:lang(ko){
  --font-display: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
:lang(zh-Hans){
  --font-display: "Songti SC", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
:lang(zh-Hant){
  --font-display: "Songti TC", "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", serif;
  --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
:lang(th){
  --font-display: Thonburi, "Noto Sans Thai", Tahoma, sans-serif;
  --font-body: Thonburi, "Noto Sans Thai", Tahoma, sans-serif;
}
:lang(ar), :lang(fa), :lang(he), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant), :lang(th){
  --caps: none;
  --track-caps: 0;
  --track-display: 0;
  --lh-body: 1.95;
  --lh-head: 1.4;
  --italic: normal;
}
/* the stack is applied on every element that declares a language (page + language links) */
[lang]{ font-family: var(--font-body); }

/* ---- Base ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}
body{
  margin: 0;
  min-block-size: 100vh;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-blush) 0%, var(--bg) 35%, var(--bg-lavender) 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-inline-size: 100%; }
img{ block-size: auto; }
a{ color: var(--text-violet); text-underline-offset: .2em; }
button{ font: inherit; color: inherit; }
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--track-display);
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}
p, li{ overflow-wrap: break-word; }

.visually-hidden{
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark{ --focus: var(--brand-bright); }

.skip{
  position: absolute;
  z-index: 100;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  padding: .75rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(-300%);
  transition: transform .2s var(--ease);
}
.skip:focus{ transform: none; }

/* ---- Shared label ---- */
.kicker{
  margin: 0 0 .6rem;
  color: var(--text-pink);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-caps);
  text-transform: var(--caps);
}

/* ==========================================================================
   CTAs — gradient pills with a soft glow
   ========================================================================== */
.cta{ cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cta--gradient,
.cta--ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  max-inline-size: 100%;
  min-block-size: 2.875rem;
  padding-block: .7rem;
  padding-inline: 1.35rem .7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .975rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: translate .25s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.cta--gradient{
  border: 0;
  background: var(--gradient);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-cta);
}
.cta--gradient:hover{ translate: 0 -2px; box-shadow: var(--shadow-cta-hover); }
.cta--gradient:active{ translate: 0 0; }
.cta--ghost{
  border: 1.5px solid var(--line-on-dark-strong);
  background: var(--glass-light);
  color: var(--text-on-dark);
}
.cta--ghost:hover{
  translate: 0 -2px;
  border-color: var(--brand-bright);
  background: var(--glass-light-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-bright) 16%, transparent), 0 14px 36px -12px var(--glow-violet);
}
.cta__icon{
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 22%, transparent);
  font-size: .85rem;
  line-height: 1;
}
.cta--gradient:hover .cta__icon:not(.arrow){ animation: beat .9s var(--ease); }
.cta--lg{ min-block-size: 3.25rem; padding-block: .85rem; padding-inline: 1.6rem .8rem; font-size: 1rem; }
.cta--xl{ min-block-size: 3.75rem; padding-block: 1rem; padding-inline: 2rem 1rem; font-size: 1.075rem; }
.cta--xl .cta__icon{ inline-size: 2.1rem; block-size: 2.1rem; font-size: 1rem; }
[dir="rtl"] .arrow{ transform: scaleX(-1); }

/* ==========================================================================
   Header (sticky, dark violet glass)
   ========================================================================== */
.site-header{
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-block-end: 1px solid var(--line-on-dark);
  color: var(--text-on-dark);
}
.site-header__inner{
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-inline-size: 84rem;
  min-block-size: var(--header-h);
  margin-inline: auto;
  padding-block: .55rem;
  padding-inline: var(--gutter);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  margin-inline-end: auto;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  text-decoration: none;
}
.brand img{
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border-radius: .65rem;
  box-shadow: 0 0 0 1px var(--line-on-dark), 0 6px 18px -6px var(--glow-pink);
}
.brand__word{
  font-family: var(--font-brand);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.brand__word span{
  background: var(--gradient-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* menu toggle (#MenuOpen) */
.menu-key{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-shrink: 0;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: .8rem;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: var(--radius-pill);
  background: var(--glass-light);
  color: var(--text-on-dark);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.menu-key:hover{ background: var(--glass-light-strong); border-color: var(--brand-bright); }
.menu-key__bars{ display: grid; gap: 4px; inline-size: 1.1rem; }
.menu-key__bars i{
  display: block;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s var(--ease), opacity .2s;
}
.menu-key[aria-expanded="true"]{ border-color: var(--brand-bright); }
.menu-key[aria-expanded="true"] .menu-key__bars i:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-key[aria-expanded="true"] .menu-key__bars i:nth-child(2){ opacity: 0; }
.menu-key[aria-expanded="true"] .menu-key__bars i:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* chapter links (#JournalNav) */
.journal-nav__links{
  margin: 0;
  padding: 0;
  list-style: none;
}
.journal-nav__links a{
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .8rem .35rem;
  border-block-end: 1px solid var(--line-on-dark);
  color: var(--text-on-dark);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s;
}
.journal-nav__links li:last-child a{ border-block-end: 0; }
.journal-nav__links a:hover{ color: var(--brand-bright); }
.journal-nav__num{
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: var(--italic);
  font-weight: 600;
  color: var(--brand-bright);
}
.journal-nav .cta--nav{ font-size: .9rem; }

/* language switcher */
.lang-switch{ min-inline-size: 0; }
.lang-switch summary{
  display: flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 2.75rem;
  padding-inline: .75rem;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 1.4rem;
  background: var(--glass-light);
  color: var(--text-on-dark);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.15;
  list-style: none;
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background-color .2s, border-color .2s;
}
.lang-switch__current{ min-inline-size: 0; }
.lang-switch summary::-webkit-details-marker{ display: none; }
.lang-switch summary::marker{ content: ""; }
.lang-switch summary:hover,
.lang-switch[open] summary{ background: var(--glass-light-strong); border-color: var(--brand-bright); }
.lang-switch svg{
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lang-switch__chevron{ transition: rotate .2s var(--ease); }
.lang-switch[open] .lang-switch__chevron{ rotate: 180deg; }
.lang-switch__list{
  position: absolute;
  z-index: 60;
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr));
  gap: .2rem;
  inline-size: min(32rem, calc(100% - 2 * var(--gutter)));
  max-block-size: min(70vh, 30rem);
  margin: 0;
  padding: .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--panel-bg);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 60px -20px var(--glow-violet);
}
.lang-switch__list a{
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-soft);
  font-size: .875rem;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.lang-switch__list a:hover{ background: color-mix(in srgb, var(--violet) 30%, transparent); color: var(--text-on-dark); }
.lang-switch__list a[aria-current="page"]{ background: var(--gradient); color: var(--text-on-brand); font-weight: 700; }

/* mobile: the whole nav is a drop-down panel */
@media (max-width: 47.99rem){
  .menu-key__label{
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .journal-nav{
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    gap: 1rem;
    max-block-size: calc(100vh - var(--header-h));
    max-block-size: calc(100dvh - var(--header-h));
    padding: .75rem var(--gutter) 1.5rem;
    overflow-y: auto;
    background: var(--panel-bg);
    border-block-end: 1px solid var(--line-on-dark);
    box-shadow: var(--shadow-lg);
  }
  .journal-nav.open{ display: flex; }
  .journal-nav .cta--nav{ min-block-size: 3.25rem; font-size: 1rem; }
}
@media (max-width: 24rem){
  .site-header__inner{ gap: .5rem; }
  .brand{ gap: .45rem; }
  .brand img{ inline-size: 1.9rem; block-size: 1.9rem; }
  .brand__word{ font-size: 1.15rem; }
  .lang-switch summary{ gap: .3rem; padding-inline: .6rem; }
}
@media (min-width: 30rem) and (max-width: 47.99rem){
  .menu-key__label{ position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip-path: none; }
}

/* tablet & desktop: the CTA sits in the bar, chapters open from the menu */
@media (min-width: 48rem){
  :root{ --header-h: 4.5rem; }
  .brand img{ inline-size: 2.4rem; block-size: 2.4rem; }
  .brand__word{ font-size: 1.45rem; }
  .site-header__inner{ gap: .85rem; }
  .journal-nav{ display: flex; align-items: center; }
  .journal-nav__links{
    position: absolute;
    z-index: 55;
    inset-block-start: calc(100% + .5rem);
    inset-inline-end: var(--gutter);
    display: none;
    inline-size: min(27rem, calc(100% - 2 * var(--gutter)));
    max-block-size: calc(100vh - var(--header-h) - 2rem);
    padding: .5rem 1rem;
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 60px -20px var(--glow-violet);
  }
  .journal-nav.open .journal-nav__links{ display: block; }
  .journal-nav .cta--nav{ min-block-size: 2.75rem; padding-inline: 1.15rem .5rem; }
  .journal-nav .cta--nav .cta__icon{ inline-size: 1.6rem; block-size: 1.6rem; }
}

/* ==========================================================================
   Hero — violet night, bokeh, the three companions as the stars
   ========================================================================== */
.hero{
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2.25rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  background: var(--night);
  color: var(--text-on-dark);
  border-end-start-radius: var(--hero-curve);
  border-end-end-radius: var(--hero-curve);
}
.hero__bokeh,
.closing__bokeh{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__bokeh{
  background:
    radial-gradient(36rem 30rem at 80% 34%, color-mix(in srgb, var(--violet) 52%, transparent), transparent 70%),
    radial-gradient(30rem 26rem at 8% 12%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
    radial-gradient(24rem 20rem at 46% 104%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(22rem 20rem at 100% 96%, color-mix(in srgb, var(--brand-bright) 30%, transparent), transparent 70%);
}
.hero__bokeh::before,
.closing__bokeh::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2.4rem 2.4rem at 14% 78%, color-mix(in srgb, var(--brand-bright) 45%, transparent), transparent 70%),
    radial-gradient(1.4rem 1.4rem at 30% 18%, color-mix(in srgb, var(--violet-bright) 55%, transparent), transparent 70%),
    radial-gradient(3.4rem 3.4rem at 58% 10%, color-mix(in srgb, var(--brand-bright) 28%, transparent), transparent 70%),
    radial-gradient(1.8rem 1.8rem at 88% 14%, color-mix(in srgb, var(--violet-bright) 50%, transparent), transparent 70%),
    radial-gradient(2.8rem 2.8rem at 94% 58%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
    radial-gradient(1.2rem 1.2rem at 44% 62%, color-mix(in srgb, var(--brand-bright) 50%, transparent), transparent 70%),
    radial-gradient(4.2rem 4.2rem at 70% 88%, color-mix(in srgb, var(--violet-bright) 26%, transparent), transparent 70%);
  filter: blur(3px);
  animation: drift 16s ease-in-out infinite alternate;
}
.hero__bokeh::after,
.closing__bokeh::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1rem 1rem at 22% 40%, color-mix(in srgb, var(--paper) 30%, transparent), transparent 70%),
    radial-gradient(.8rem .8rem at 76% 72%, color-mix(in srgb, var(--paper) 26%, transparent), transparent 70%),
    radial-gradient(1.6rem 1.6rem at 8% 46%, color-mix(in srgb, var(--violet-bright) 34%, transparent), transparent 70%),
    radial-gradient(1.1rem 1.1rem at 64% 30%, color-mix(in srgb, var(--brand-bright) 40%, transparent), transparent 70%);
  filter: blur(2px);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
.hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "collage" "more";
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
  max-inline-size: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__copy{ grid-area: copy; min-inline-size: 0; }
.hero__more{ grid-area: more; min-inline-size: 0; }
.collage{ grid-area: collage; }
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
  padding: .45rem .95rem;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 1.25rem;
  background: var(--glass-light);
  color: var(--text-on-dark-soft);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: var(--track-caps);
  text-transform: var(--caps);
}
.eyebrow::before{
  content: "";
  flex-shrink: 0;
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  background: var(--brand-bright);
  animation: pulse 2.2s ease-out infinite;
}
.hero h1{
  margin: 0 0 1.75rem;
  color: var(--text-on-dark);
  font-size: clamp(2.3rem, 1.45rem + 3.4vw, 4.35rem);
  line-height: 1.05;
  text-shadow: 0 0 2.5rem color-mix(in srgb, var(--brand-bright) 35%, transparent);
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__actions .cta{ flex: 1 1 14rem; }
.hero__intro{
  max-inline-size: 38rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--brand-bright);
  color: var(--text-on-dark-soft);
  font-size: 1.0625rem;
}
.hero__intro p{ margin: 0 0 1rem; text-wrap: pretty; }
.hero__intro p:last-child{ margin-block-end: 0; }
.hero__intro strong{
  color: var(--text-on-dark);
  font-weight: 700;
  background-image: linear-gradient(transparent 62%, var(--highlight-dark) 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.badges{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.badges li{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-pill);
  background: var(--glass-light);
  color: var(--text-on-dark-soft);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
}
.badges li::before{ content: "♥"; color: var(--brand-bright); font-size: .8em; }

@media (min-width: 64rem){
  .hero__inner{
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas: "copy collage" "more collage";
    grid-template-rows: auto auto;
    row-gap: 2rem;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .hero__copy{ align-self: end; }
  .hero__more{ align-self: start; }
  .hero__actions .cta{ flex: 0 1 auto; }
}

/* portrait collage: Lauren in front, Sophie & Avery tucked behind */
.collage{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  inline-size: 100%;
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block-start: .25rem;
}
.collage::before{
  content: "";
  position: absolute;
  inset: 12% 6% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-bright) 38%, transparent), color-mix(in srgb, var(--violet) 22%, transparent) 60%, transparent);
  filter: blur(24px);
}
.portrait{
  --tilt: 0deg;
  position: relative;
  flex: 0 0 40%;
  min-inline-size: 0;
  margin: 0;
  container-type: inline-size;
  overflow: hidden;
  border-radius: clamp(1.1rem, 3vw, 1.9rem);
  background: var(--violet-deep);
  box-shadow: var(--shadow-portrait);
  rotate: var(--tilt);
  cursor: pointer;
  transition: translate .45s var(--ease), rotate .45s var(--ease), box-shadow .45s var(--ease);
}
.portrait:nth-of-type(1),
.portrait:nth-of-type(3){ margin-block-start: calc(14.5% + 8rem); }
.portrait:nth-of-type(1){ --tilt: -5deg; }
.portrait:nth-of-type(3){ --tilt: 5deg; }
[dir="rtl"] .portrait:nth-of-type(1){ --tilt: 5deg; }
[dir="rtl"] .portrait:nth-of-type(3){ --tilt: -5deg; }
.portrait:nth-of-type(2){
  z-index: 2;
  flex-basis: 50%;
  margin-inline: -15%;
  box-shadow: var(--shadow-portrait-star);
}
.portrait:hover,
.portrait:focus-visible{
  z-index: 4;
  translate: 0 -.5rem;
  rotate: 0deg;
  box-shadow: var(--shadow-portrait-star), 0 0 0 2px var(--brand-bright);
}
.portrait:focus-visible{ outline-offset: 5px; }
.portrait img{
  inline-size: 100%;
  aspect-ratio: 421 / 600;
  object-fit: cover;
  transition: scale .7s var(--ease);
}
.portrait:hover img{ scale: 1.04; }
.portrait__status{
  position: relative;
  flex-shrink: 0;
  inline-size: .6rem;
  block-size: .6rem;
  border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--white) 85%, transparent), 0 0 14px 2px var(--glow-pink);
}
.portrait__status::after{
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--brand-bright);
  border-radius: 50%;
  animation: ring 1.8s ease-out infinite;
}
.portrait__heart{
  position: absolute;
  inset-block-start: clamp(.45rem, 4.5cqi, .8rem);
  inset-inline-end: clamp(.45rem, 4.5cqi, .8rem);
  display: grid;
  place-items: center;
  inline-size: clamp(1.6rem, 13cqi, 2.3rem);
  block-size: clamp(1.6rem, 13cqi, 2.3rem);
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  font-size: clamp(.75rem, 6cqi, 1rem);
  line-height: 1;
  box-shadow: 0 6px 16px -4px var(--glow-pink), 0 0 0 2px color-mix(in srgb, var(--white) 35%, transparent);
}
.portrait figcaption{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  justify-items: start;
  gap: .4rem;
  padding: 2.75rem clamp(.55rem, 6cqi, 1rem) clamp(.6rem, 6cqi, 1rem);
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 92%, transparent) 0%, color-mix(in srgb, var(--night) 78%, transparent) 55%, transparent 100%);
  text-align: start;
}
.portrait__name{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: clamp(1rem, 9cqi, 1.6rem);
  font-style: var(--italic);
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 2px 12px var(--night);
  overflow-wrap: anywhere;
}
.portrait__bubble{
  max-inline-size: 100%;
  padding: .4rem .7rem;
  border-radius: 1rem;
  border-end-start-radius: .25rem;
  background: color-mix(in srgb, var(--white) 95%, transparent);
  color: var(--ink);
  font-size: clamp(.72rem, 5.2cqi, .875rem);
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 8px 20px -10px var(--night);
  overflow-wrap: anywhere;
}
.memory-note{
  position: absolute;
  z-index: 3;
  inset-block-start: .25rem;
  inset-inline-start: 0;
  display: grid;
  gap: .15rem;
  max-inline-size: min(44%, 15rem);
  margin: 0;
  padding: .7rem 1rem .75rem;
  border-radius: 1.2rem;
  border-end-start-radius: .3rem;
  background: var(--gradient);
  color: var(--text-on-brand);
  font-size: .8125rem;
  line-height: 1.35;
  rotate: -3deg;
  box-shadow: 0 14px 30px -12px var(--glow-pink), 0 0 0 1px color-mix(in srgb, var(--white) 18%, transparent);
}
[dir="rtl"] .memory-note{ rotate: 3deg; }
.memory-note strong{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: var(--italic);
  line-height: 1.2;
}

/* typing dots (decorative chat motif) */
.typing{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  padding: .7rem .9rem;
  border-radius: 1.2rem;
  border-end-start-radius: .3rem;
  background: var(--surface-tint);
  box-shadow: var(--shadow-sm);
}
.typing i{
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: 50%;
  background: var(--violet);
  opacity: .4;
  animation: typing 1.3s ease-in-out infinite;
}
.typing i:nth-child(2){ background: var(--accent); animation-delay: .16s; }
.typing i:nth-child(3){ background: var(--brand); animation-delay: .32s; }
.typing--float{
  position: absolute;
  z-index: 3;
  inset-block-start: 2.25rem;
  inset-inline-end: 4%;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  rotate: 4deg;
  box-shadow: 0 12px 26px -12px var(--night), 0 0 30px -8px var(--glow-violet);
}
.typing--glass{
  background: var(--glass-light-strong);
  border: 1px solid var(--line-on-dark);
  box-shadow: none;
}
.typing--glass i{ background: var(--brand-bright); }
.typing--glass i:nth-child(2){ background: var(--violet-bright); }
.typing--glass i:nth-child(3){ background: var(--paper); }

/* ==========================================================================
   Journal: sticky contents + diary pages
   ========================================================================== */
.journal{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  max-inline-size: 80rem;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
}
.journal__aside{ display: grid; gap: 1.25rem; align-content: start; min-inline-size: 0; }
.toc{
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.4rem 1.1rem;
  border: 1px solid var(--line-violet);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.toc::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: var(--gradient);
}
.toc__title{
  margin: 0 0 1rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: var(--italic);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.toc__list{ display: grid; margin: 0; padding: 0; list-style: none; }
.toc__list a{
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
  gap: .4rem;
  padding: .7rem .3rem;
  border-block-start: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: .925rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.toc__list a:hover{ background: var(--surface-blush); color: var(--text-pink); }
.toc__num{
  color: var(--text-violet);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: var(--italic);
  font-weight: 700;
}
.toc__list a:hover .toc__num{ color: var(--brand); }
.toc__text{ overflow-wrap: anywhere; }
.rail{
  position: relative;
  padding: 1.25rem 1.4rem;
  padding-inline-end: 3rem;
  border: 1px solid var(--line-brand);
  border-radius: var(--radius-lg);
  background: var(--gradient-soft);
}
.rail::after{
  content: "♥";
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1.15rem;
  color: var(--brand);
  font-size: 1.15rem;
  line-height: 1;
}
.rail__title{
  margin: 0 0 .3rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: var(--italic);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rail__text{ margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.55; }

@media (min-width: 64rem){
  .journal{ grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); align-items: start; }
  .journal__aside{
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
    max-block-size: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: .25rem;
    margin: -.25rem;
  }
}

/* diary pages */
.chapters{ display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.chapter{
  position: relative;
  min-inline-size: 0;
  padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
  padding-inline: clamp(1.6rem, 5.5vw, 4.25rem) clamp(1.15rem, 4.5vw, 3.5rem);
  border: 1px solid var(--line-violet);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-page);
}
/* notebook margin rule */
.chapter::before{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: clamp(.7rem, 2.6vw, 2.1rem);
  inline-size: 5px;
  border-inline: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
/* ribbon bookmark */
.chapter::after{
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: clamp(1.1rem, 4vw, 2.5rem);
  inline-size: 1.2rem;
  block-size: 2.9rem;
  background: var(--gradient);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.chapter__kicker{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  margin: 0 0 .9rem;
  padding-inline-end: 2.25rem;
  color: var(--text-pink);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-caps);
  text-transform: var(--caps);
}
.chapter__num{
  order: -1;
  padding-inline-end: .08em;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-style: var(--italic);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chapter__kicker::after{
  content: "";
  flex: 1 1 2.5rem;
  min-inline-size: 2.5rem;
  block-size: 1px;
  background: var(--line-brand);
}
.chapter h2{
  margin: 0 0 1.75rem;
  color: var(--text);
  font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.9rem);
  scroll-margin-block-start: calc(var(--header-h) + clamp(4.5rem, 8vw, 7rem));
}

/* prose */
.prose{ color: var(--text-body); }
.prose > :first-child{ margin-block-start: 0; }
.prose p{ margin: 0 0 1.15em; text-wrap: pretty; }
.prose > p:first-child{
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.4rem);
  font-style: var(--italic);
  line-height: 1.6;
}
:root:not(:lang(ar), :lang(fa), :lang(he), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant), :lang(th)) .prose > p:first-child::first-letter{
  float: inline-start;
  margin-block-start: .06em;
  margin-inline-end: .1em;
  color: var(--brand);
  font-size: 3.15em;
  font-style: normal;
  font-weight: 700;
  line-height: .86;
}
.prose strong{
  color: var(--text);
  font-weight: 700;
  background-image: linear-gradient(transparent 60%, var(--highlight) 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prose h3{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 2.4rem 0 .85rem;
  color: var(--violet-deep);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  font-style: var(--italic);
  font-weight: 600;
  line-height: 1.28;
}
.prose h3::before{
  content: "♥";
  flex-shrink: 0;
  color: var(--brand);
  font-size: .7em;
  font-style: normal;
}
.prose ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .6rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.prose li{
  position: relative;
  padding-block: .85rem;
  padding-inline: 2.5rem 1rem;
  border: 1px solid var(--line-brand);
  border-radius: var(--radius);
  background: var(--surface-blush);
  line-height: 1.5;
}
.prose li::before{
  content: "♥";
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-start: 1rem;
  color: var(--brand);
  font-size: .85rem;
  line-height: 1.6rem;
}
.table-scroll{
  max-inline-size: 100%;
  margin-block: 1.75rem;
  overflow-x: auto;
  border: 1px solid var(--line-violet);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.prose table{
  inline-size: 100%;
  min-inline-size: 32rem;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.45;
}
.prose th{
  padding: .85rem 1rem;
  border-block-end: 1px solid var(--line-violet);
  background: var(--surface-tint);
  color: var(--violet-deep);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-align: start;
  text-transform: var(--caps);
}
.prose td{
  padding: .85rem 1rem;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.prose tbody tr:last-child td{ border-block-end: 0; }
.prose tbody tr:nth-child(even) td{ background: color-mix(in srgb, var(--brand-soft) 40%, var(--white)); }
.prose tbody td:first-child{ color: var(--text); font-weight: 700; }

/* FAQ as a chat: questions are sent bubbles, answers are received bubbles */
.prose--faq h3{
  display: block;
  inline-size: fit-content;
  max-inline-size: min(100%, 36rem);
  margin-block: 2.1rem .7rem;
  margin-inline: auto 0;
  padding: .85rem 1.2rem;
  border-radius: 1.4rem;
  border-end-end-radius: .35rem;
  background: var(--gradient);
  color: var(--text-on-brand);
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  font-style: normal;
  line-height: 1.35;
  text-wrap: pretty;
  box-shadow: var(--shadow-cta);
}
.prose--faq h3::before{
  margin-inline-end: .5rem;
  color: color-mix(in srgb, var(--white) 85%, transparent);
}
.prose--faq > h3:first-child{ margin-block-start: 0; }
.prose--faq p{
  max-inline-size: min(95%, 42rem);
  margin: 0 0 .5rem;
  padding: .9rem 1.2rem;
  border: 1px solid var(--line-violet);
  border-radius: 1.4rem;
  border-end-start-radius: .35rem;
  background: var(--surface-tint);
  font-size: 1rem;
  line-height: 1.68;
}
.prose--faq p + p{ border-start-start-radius: .35rem; }

/* ornaments & chapter CTA row */
.ornament{
  margin: clamp(1.4rem, 3vw, 2.2rem) 0;
  padding-inline-start: .6em;
  color: var(--brand);
  font-size: 1rem;
  letter-spacing: .6em;
  line-height: 1;
  text-align: center;
}
.chapter__cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1rem;
  margin-block-start: 2.25rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px dashed var(--line-brand);
}

/* ==========================================================================
   Closing — "she's waiting for you" night band
   ========================================================================== */
.closing{
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  padding-inline: var(--gutter);
  background: var(--night);
  color: var(--text-on-dark);
  text-align: center;
  border-start-start-radius: var(--hero-curve);
  border-start-end-radius: var(--hero-curve);
}
.closing__bokeh{
  background:
    radial-gradient(34rem 26rem at 50% 0%, color-mix(in srgb, var(--violet) 48%, transparent), transparent 70%),
    radial-gradient(26rem 22rem at 6% 90%, color-mix(in srgb, var(--brand) 36%, transparent), transparent 70%),
    radial-gradient(24rem 22rem at 96% 70%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}
.closing__inner{
  display: grid;
  justify-items: center;
  max-inline-size: 50rem;
  margin-inline: auto;
}
.closing__avatars{
  position: relative;
  display: flex;
  align-items: center;
  margin-block-end: 1.75rem;
}
.closing__avatars img{
  inline-size: 4.25rem;
  block-size: 4.25rem;
  border: 3px solid var(--night);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-bright) 70%, transparent), 0 10px 30px -8px var(--glow-pink);
}
.closing__avatars img + img{ margin-inline-start: -1rem; }
.closing__avatars img:nth-child(2){
  position: relative;
  z-index: 1;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  box-shadow: 0 0 0 2px var(--brand-bright), 0 0 40px -4px var(--glow-pink);
}
.closing__avatars .typing{
  position: absolute;
  inset-block-start: -.6rem;
  inset-inline-start: calc(100% - 1.25rem);
  z-index: 2;
}
.closing .kicker{ color: var(--brand-bright); }
.closing h2{
  margin: .2rem 0 1.25rem;
  color: var(--text-on-dark);
  font-size: clamp(2.05rem, 1.3rem + 3.3vw, 4rem);
  font-style: var(--italic);
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 0 2.5rem color-mix(in srgb, var(--brand-bright) 30%, transparent);
}
.closing__text{
  max-inline-size: 36rem;
  margin: 0 0 2.25rem;
  color: var(--text-on-dark-soft);
  font-size: 1.125rem;
  line-height: 1.65;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  padding-block: clamp(2.75rem, 5vw, 4rem) 2rem;
  border-block-start: 1px solid var(--line-on-dark);
  background: var(--night);
  color: var(--text-on-dark-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.site-footer__inner{
  display: grid;
  gap: 2.25rem;
  max-inline-size: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-footer .brand{ margin-block-end: 1rem; }
.site-footer__independent{ max-inline-size: 30rem; margin: 0; }
.footer-langs__title{
  margin: 0 0 .9rem;
  color: var(--text-on-dark);
  font-size: 1.15rem;
  font-style: var(--italic);
  font-weight: 600;
  letter-spacing: 0;
}
.footer-langs ul{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-langs a{
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark-muted);
  font-size: .8125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.footer-langs a:hover{ border-color: var(--brand-bright); color: var(--text-on-dark); }
.footer-langs a[aria-current="page"]{
  border-color: transparent;
  background: var(--gradient);
  color: var(--text-on-brand);
  font-weight: 700;
}
.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line-on-dark);
}
.site-footer__bottom p{ margin: 0; }
.to-top{
  color: var(--text-on-dark-soft);
  font-weight: 600;
  text-decoration: none;
}
.to-top:hover{ color: var(--brand-bright); }
@media (min-width: 64rem){
  .site-footer__inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 4rem; }
  .site-footer__bottom{ grid-column: 1 / -1; }
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes drift{ from{ translate: 0 0; } to{ translate: 0 -1.25rem; } }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 var(--glow-pink); }
  70%{ box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--brand-bright) 0%, transparent); }
  100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-bright) 0%, transparent); }
}
@keyframes ring{ from{ scale: 1; opacity: .9; } to{ scale: 2.6; opacity: 0; } }
@keyframes typing{
  0%, 60%, 100%{ opacity: .4; translate: 0 0; }
  30%{ opacity: 1; translate: 0 -.22rem; }
}
@keyframes beat{
  0%, 100%{ scale: 1; }
  30%{ scale: 1.25; }
  60%{ scale: .95; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .typing i{ opacity: .85; }
  .portrait:hover, .portrait:focus-visible, .cta--gradient:hover, .cta--ghost:hover{ translate: none; }
  .portrait:hover img{ scale: 1; }
}

/* phrase-aware line breaking for Japanese display text */
:lang(ja) :is(h1, h2, h3, .toc__title, .rail__title, .memory-note strong){ word-break: auto-phrase; }