/* japancatnetwork.org — site styles. Hand-written, no framework.
   Rebuilds the Squarespace design (template + the custom CSS/code injection in
   archive/squarespace/) as plain CSS. Colours and type come from that code injection. */

/* ---------------------------------------------------------------- tokens */

:root {
  --ink: #1f1d1a;
  --text: #3d3933;
  --muted: #5f584d;
  --line: #e2ded5;
  --band: #f4f2ed;
  --indigo: #253551;
  --indigo-line: #34466b;
  --accent: #b8351f;
  --accent-dark: #9a2c19;
  --on-dark: #e8e3d8;
  --on-dark-eyebrow: #f3d3c5;
  --white: #fff;

  --font-display: "JCN Punct", "Shippori Mincho", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;

  --fs-body: 1.125rem; /* 18px */
  --fs-small: 1rem;
  --fs-meta: 0.875rem;
  --fs-h1: clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem); /* 56px at desktop */
  --fs-h2: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); /* 40px */
  --fs-h3: clamp(1.5rem, 1.25rem + 0.8vw, 1.75rem); /* 28px */
  --fs-h4: 1.25rem;

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(48px, 6vw, 80px);
  --gap: clamp(24px, 4vw, 56px);
  --radius: 12px;
  --radius-card: 14px;
  --radius-btn: 6px;

  /* The seigaiha (wave) pattern behind the dark bands and the footer. */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23253551'/%3E%3Cg fill='%23253551' stroke='%2334466B' stroke-width='1.1'%3E%3Ccircle cx='30' cy='-15' r='30'/%3E%3Ccircle cx='30' cy='-15' r='21'/%3E%3Ccircle cx='30' cy='-15' r='12'/%3E%3Ccircle cx='0' cy='0' r='30'/%3E%3Ccircle cx='0' cy='0' r='21'/%3E%3Ccircle cx='0' cy='0' r='12'/%3E%3Ccircle cx='60' cy='0' r='30'/%3E%3Ccircle cx='60' cy='0' r='21'/%3E%3Ccircle cx='60' cy='0' r='12'/%3E%3Ccircle cx='30' cy='15' r='30'/%3E%3Ccircle cx='30' cy='15' r='21'/%3E%3Ccircle cx='30' cy='15' r='12'/%3E%3Ccircle cx='0' cy='30' r='30'/%3E%3Ccircle cx='0' cy='30' r='21'/%3E%3Ccircle cx='0' cy='30' r='12'/%3E%3Ccircle cx='60' cy='30' r='30'/%3E%3Ccircle cx='60' cy='30' r='21'/%3E%3Ccircle cx='60' cy='30' r='12'/%3E%3Ccircle cx='30' cy='45' r='30'/%3E%3Ccircle cx='30' cy='45' r='21'/%3E%3Ccircle cx='30' cy='45' r='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* The ellipsis comes from a system serif: Shippori Mincho's sits at mid-height. */
@font-face {
  font-family: "JCN Punct";
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("DejaVu Serif"), local("Liberation Serif");
  unicode-range: U+2026;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor links and scrollIntoView stop below the sticky header (91 px desktop, 73 px
     below 1024 px), with some room to spare. */
  scroll-padding-top: 120px;
}

@media (max-width: 1023px) {
  html {
    scroll-padding-top: 96px;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-optical-sizing: auto;
}

/* Footer at the bottom of short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  overflow-wrap: break-word; /* long bare URLs in content */
}

body.tone-band {
  background: var(--band);
}

img,
svg,
iframe,
video {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

/* No lone word (or a couple of characters) left on the last line: running text rewraps its
   last lines to even them out, short titles and labels balance all their lines. Japanese
   breaks between phrases instead of between any two characters. Browsers without support
   wrap as before; the "widows" transform in eleventy.config.js covers the lone-word case. */
p,
li,
dd,
dt,
figcaption,
blockquote,
summary,
label,
td,
th {
  text-wrap: pretty;
}

.eyebrow,
.meta,
.btn,
.button > a,
dd,
.stats li,
.team p,
.site-footer__name {
  text-wrap: balance;
}

.nowrap {
  white-space: nowrap;
}

:lang(ja) {
  word-break: auto-phrase;
}

h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p,
ul,
ol,
blockquote,
figure,
table,
details {
  margin: 0 0 1em;
}

ul,
ol {
  padding-left: 1.3em;
}

li + li {
  margin-top: 0.35em;
}

/* Squarespace wraps every list item's text in a <p>. */
li > p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--indigo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

strong,
b {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

figure img,
.figure {
  border-radius: var(--radius);
}

figcaption {
  margin-top: 0.5em;
  color: var(--muted);
  font-size: var(--fs-meta);
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--indigo);
  color: var(--white);
  border-radius: var(--radius-btn);
}

.skip-link:focus {
  top: 12px;
  color: var(--white);
}

.preview-banner {
  margin: 0;
  padding: 4px var(--gutter);
  background: #fff4cc;
  color: var(--ink);
  font-size: 13px;
  text-align: center;
}

.preview-banner p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: calc(var(--wrap-narrow) + 2 * var(--gutter));
}

.eyebrow {
  margin: 0 0 0.75em;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.meta {
  margin: 0 0 0.5em;
  color: var(--muted);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}

.meta__sep {
  margin: 0 0.6em;
}

/* Japanese label for a heading or block (decorative; aria-hidden). Where the page margin has
   room it hangs vertically in the margin, so the heading still lines up with the text below
   it; elsewhere it's a small horizontal label above the heading. */
.jp-heading,
.jp-block {
  position: relative;
}

.jp-heading > :last-child,
.jp-block > :last-child {
  margin-bottom: 0;
}

.jp-block > .jp + * > :first-child {
  margin-top: 0;
}

.jp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.35em;
  white-space: nowrap;
}

.jp::after {
  content: "";
  width: 32px;
  border-top: 1px solid currentColor;
  opacity: 0.5;
}

.dark .jp {
  color: var(--on-dark-eyebrow);
}

@media (min-width: 1340px) {
  .jp {
    position: absolute;
    top: 0.35em;
    right: calc(100% + 22px);
    display: block;
    margin: 0;
    padding-right: 12px;
    border-right: 1px solid var(--line);
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.4em;
    writing-mode: vertical-rl;
  }

  .jp::after {
    display: none;
  }

  /* Centred headings keep the horizontal label, centred above. */
  .center .jp {
    position: static;
    display: flex;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.35em;
    writing-mode: horizontal-tb;
  }

  .center .jp::after {
    display: block;
  }
}

.center .jp {
  justify-content: center;
}

.center .jp::before {
  content: "";
  width: 32px;
  border-top: 1px solid currentColor;
  opacity: 0.5;
}

@media (max-width: 1339px) {
  .center .jp:has(+ .eyebrow) {
    display: flex;
  }
}

/* With an English eyebrow already above the heading, one label is enough on narrow screens. */
@media (max-width: 1339px) {
  .jp:has(+ .eyebrow) {
    display: none;
  }
}

.jp-heading > .eyebrow {
  margin-bottom: 0.6em;
}

/* Opening paragraph under a page heading. */
.lead {
  margin-top: 0.75em;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  line-height: 1.6;
}

.jp-heading + .spaced,
.jp-heading + .lead {
  margin-top: clamp(14px, 1.6vw, 22px);
}

/* Page-opening split: heading and lead beside a photo. */
.hero h1 {
  margin-bottom: 0;
}

.hero .buttons {
  margin-top: 1.75em;
}

/* ---------------------------------------------------------------- buttons */

.btn,
.button > a {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid var(--indigo);
  border-radius: var(--radius-btn);
  background: var(--indigo);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.button > a:hover {
  background: #1a263b;
  color: var(--white);
}

.btn--accent,
.button--accent > a {
  border-color: var(--accent);
  background: var(--accent);
}

.btn--accent:hover,
.button--accent > a:hover {
  background: var(--accent-dark);
}

.btn--outline,
.button--outline > a {
  background: var(--white);
  color: var(--indigo);
}

.btn--outline:hover,
.button--outline > a:hover {
  background: var(--band);
  color: var(--indigo);
}

.btn--light,
.button--light > a {
  border-color: var(--white);
  background: var(--white);
  color: var(--indigo);
}

.btn--light:hover,
.button--light > a:hover {
  background: var(--band);
  color: var(--indigo);
}

.button {
  margin-top: 1.5em;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5em;
}

.buttons > .button {
  margin: 0;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  min-height: 90px;
  padding-block: 8px;
}

.site-logo {
  flex: none;
  line-height: 0;
}

.site-logo img {
  width: auto;
  /* As large as the header allows; between 1024 and ~1130 px it shrinks so the nav stays on
     one line. */
  height: clamp(46px, 27vw - 230px, 74px);
}

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  position: relative;
  margin: 0 clamp(4px, 0.55vw, 8px);
}

.site-nav__item > a,
.site-nav summary {
  display: block;
  padding: 4px 0;
  color: var(--ink);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Drop the global details margin: it made folder items taller than plain links, lifting the
   nav off the header's centre line and pushing the dropdown down. */
.site-nav details {
  margin: 0;
}

.site-nav summary {
  list-style: none;
}

.site-nav summary::-webkit-details-marker {
  display: none;
}

.site-nav__item > a[aria-current],
.site-nav summary.is-active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.site-nav__item > a:hover,
.site-nav summary:hover {
  color: var(--accent);
}

.site-nav details ul {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.site-nav details li + li {
  margin-top: 0;
}

.site-nav details a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav details a:hover,
.site-nav details a[aria-current] {
  background: var(--band);
  color: var(--ink);
}

.site-header__cta {
  flex: none;
  padding: 12px clamp(14px, 1.6vw, 24px);
  font-size: 16px;
}

.menu-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform 0.2s;
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before { top: -8px; }
.menu-toggle__bars::after { top: 8px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

/* Desktop: folders drop down below their title. */
@media (min-width: 1024px) {
  .site-nav details ul {
    --drop-gap: 6px;
    position: absolute;
    top: calc(100% + var(--drop-gap));
    left: -20px;
    z-index: 60;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.22);
  }

  /* An invisible bridge over the gap between the title and the menu, so the pointer doesn't
     leave the folder (and close it) on the way down. No taller than the gap, or it covers the
     bottom of the title and swallows clicks on it. */
  .site-nav details ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--drop-gap) + 1px);
  }

  .site-nav summary::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
    transform: rotate(45deg);
  }
}

/* Mobile and tablet: logo, Donate, menu button; the nav opens as a panel below the header.
   Without JS the toggle stays hidden and the nav simply wraps under the logo. */
@media (max-width: 1023px) {
  .site-header__inner {
    flex-wrap: wrap;
    min-height: 72px;
  }

  .site-logo {
    margin-right: auto;
  }

  /* Grows with the viewport, small enough on narrow phones to keep logo, Donate and the menu
     button on one row. */
  .site-logo img {
    height: clamp(38px, 31vw - 60px, 56px);
  }

  .site-header__cta {
    order: 2;
    padding: 10px 16px;
    font-size: 15px;
  }

  .js .menu-toggle {
    display: block;
    order: 3;
  }

  .site-nav {
    order: 4;
    flex-basis: 100%;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    display: block;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-bottom: 16px;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .js .site-nav__list {
    border-top: 1px solid var(--line);
  }

  .site-nav__item {
    margin: 0;
    border-bottom: 1px solid var(--line);
  }

  .site-nav__item > a,
  .site-nav summary {
    padding: 12px 0;
    font-size: 19px;
  }

  .site-nav summary::after {
    content: "+";
    float: right;
    color: var(--muted);
  }

  .site-nav details[open] summary::after {
    content: "–";
  }

  .site-nav details ul {
    padding: 0 0 10px 12px;
  }

  .site-nav details a {
    font-size: 17px;
  }

  /* No JS: a compact wrapped row under the logo, folders listed open. */
  html:not(.js) .site-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 16px;
  }

  html:not(.js) .site-nav__item {
    border: 0;
  }
}

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

.pattern {
  background-color: var(--indigo);
  background-image: var(--pattern);
  background-size: 60px 30px;
}

.site-footer {
  color: var(--on-dark);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 32px;
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: 56px;
}

.site-footer__name {
  margin-bottom: 10px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.22;
}

.site-footer__legal {
  font-size: 14px;
  opacity: 0.85;
}

.site-footer .eyebrow {
  margin: 6px 0 8px;
  color: var(--on-dark-eyebrow);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0;
}

.site-footer a:not(.btn) {
  display: inline-block;
  padding: 6px 0;
  color: var(--white);
  line-height: 1.35;
  text-decoration: none;
}

.socials a:not(.btn) {
  padding: 4px 0;
}

.site-footer a:not(.btn):hover {
  color: var(--on-dark-eyebrow);
  text-decoration: underline;
}

.site-footer .btn {
  padding: 11px 26px;
  font-size: 16px;
}

.socials {
  display: flex;
  gap: 16px;
  margin-top: 20px !important;
}

.socials a {
  display: block;
  line-height: 0;
}

.socials svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

@media (max-width: 899px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- page sections
   Standalone pages are a list of <section>s. A section is full-bleed (its background runs edge
   to edge) and its content sits in the 1200 px column. Modifiers:
     .band     beige background            .dark    indigo wave pattern, white text, centred
     .center   centred text                .narrow  760 px column
     .rule     hairline above              .tight   less vertical padding
     .split    two columns: first child text, second an image (or anything); .split--flip puts
               the second child on the left; .split--60 gives the text 60 %
     .boxed    content in a white rounded card (on .band: newsletter, contact)
     .cta      bordered card, image flush on the left, text on the right (Donate today)
   Lists: ul.cards (bordered cards with image, title, text, button), ul.team (photo grid with
   name and role), .faq (accordion of <details>). */

main > section {
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}

main > section > :last-child {
  margin-bottom: 0;
}

main > section.band { background: var(--band); }
main > section.rule { border-top: 1px solid var(--line); }
main > section.tight { padding-block: clamp(24px, 3vw, 40px); }
main > section.flush-top { padding-top: 0; }
main > section.flush-bottom { padding-bottom: 0; }

main > section.narrow {
  padding-inline: max(var(--gutter), calc((100% - var(--wrap-narrow)) / 2));
}

.center {
  text-align: center;
}

/* Space between blocks inside a section (heading → grid → button). */
.spaced {
  margin-top: clamp(28px, 3.5vw, 44px);
}

.center .buttons {
  justify-content: center;
}

main > section.dark {
  background-color: var(--indigo);
  background-image: var(--pattern);
  background-size: 60px 30px;
  color: var(--on-dark);
  text-align: center;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  color: var(--white);
}

.dark a:not(.btn, .button > a) {
  color: var(--white);
}

.dark .eyebrow {
  color: var(--on-dark-eyebrow);
}

.dark.split {
  text-align: left;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
}

.split--60 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.split--40 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.split--top { align-items: start; }

.split > * {
  margin: 0;
}

.split > div > :last-child {
  margin-bottom: 0;
}

.split--flip > :first-child {
  order: 2;
}

.split figure img {
  width: 100%;
}

@media (max-width: 767px) {
  .split,
  .split--60,
  .split--40 {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--flip > :first-child {
    order: 0;
  }
}

/* A figure that fills its column with a fixed shape (hero images). */
.fill img {
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* Studio portraits: crop from the bottom, never through the ears. */
.fill.portrait img {
  aspect-ratio: var(--ratio, 4 / 5);
  object-position: 50% 15%;
}

/* Numbered jump links to the sections of a page (planned giving). */
.option-links {
  padding-left: 1.4em;
}

.option-links li::marker {
  color: var(--accent);
  font-weight: 600;
}

/* Sample wording to copy (bequest language). */
.bequest {
  margin: 1.25em 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
  color: var(--ink);
  font-style: italic;
}

.band .bequest {
  background: var(--white);
}

.bequest p {
  margin: 0;
}

/* Label / value pairs in a card (planned giving: details for your attorney). */
.details-list {
  margin: 0;
  text-align: left;
}

.details-list > div {
  display: grid;
  grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.details-list dt {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.details-list dd {
  margin: 0;
  color: var(--ink);
}

.boxed > .box,
.box {
  padding: clamp(24px, 4vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.band .box {
  border-color: transparent;
}

.box > :last-child {
  margin-bottom: 0;
}

.box.split {
  display: grid;
}

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.cta > figure {
  margin: 0;
}

/* --focus on the figure moves the crop (e.g. "50% 8%" keeps a portrait's ears in view). */
.cta > figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  border-radius: 0;
}

.cta > div {
  align-self: center;
  padding: clamp(24px, 4vw, 40px);
}

.cta > div > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta > figure img {
    aspect-ratio: 4 / 3;
  }
}

/* Donate seal: the red 支援 stamp beside the homepage donation box. */
.seal {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.05em;
  transform: rotate(-4deg);
}

.seal-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  padding: clamp(28px, 4vw, 40px);
  background: var(--band);
  border-radius: var(--radius-card);
}

.seal-box > div > :last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .seal-box {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cards */

ul.cards,
ul.team,
.cat-grid,
.post-grid,
.gallery {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.cards > li,
ul.team > li,
.cat-grid > li,
.post-grid > li,
.gallery > li {
  margin: 0;
}

ul.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 3vw, 32px);
}

ul.cards > li {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: center;
}

ul.cards > li > figure {
  margin: 0 0 18px;
}

ul.cards > li img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

ul.cards > li h3 {
  padding-inline: 12px;
  font-size: 24px;
}

ul.cards > li p {
  padding-inline: 12px;
  font-size: var(--fs-small);
}

ul.cards > li .button {
  margin-top: auto;
  padding-top: 8px;
}

ul.cards.left > li {
  text-align: left;
}

/* Six people: rows of three (two on tablets, one on phones), never 4 + 2. */
ul.team {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(16px, 2.5vw, 32px);
}

@media (max-width: 859px) {
  ul.team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 519px) {
  ul.team {
    grid-template-columns: minmax(0, 1fr);
  }
}

ul.team figure {
  margin: 0 0 16px;
}

ul.team img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

ul.team h3 {
  margin-bottom: 6px;
  font-size: 22px;
}

ul.team p {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Grids of photos laid out by the page (about, maneki machiya). */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.photo-grid > figure {
  margin: 0;
}

.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Heading set at H1 size without being the page's H1. */
.display {
  font-size: var(--fs-h1);
}

/* A lower-level heading set at H2 size (keeps the outline right where the design is flat). */
.h2 {
  font-size: var(--fs-h2);
}

.h3 {
  font-size: var(--fs-h3);
}

/* Small print under a block of text. */
.note {
  font-size: 14px;
}

.fine-print {
  font-size: 15px;
}

/* A beige card on a white section (contact: newsletter signup). */
.box.box--band {
  background: var(--band);
  border-color: transparent;
}

/* Newsletter signup over a photo of Aki stretching across a studio backdrop (home, contact).
   The photo is pinned to the bottom left at the block's full height and its right edge fades
   into the backdrop's grey, so the cat frames the block on the left and bottom: the heading
   runs above its back, the form sits beyond its paw. All horizontal offsets are fractions
   of the block height (--h), because the photo scales with it (1.22 : 1). On phones the text
   sits above and the cat runs along the bottom. */
.signup-cat {
  --h: clamp(500px, 44vw, 580px);
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--h) * 0.8) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: var(--h);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 48px) calc(var(--h) * 0.1);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(#eef0f4, #e5e6ea 55%, #e7e9ed);
}

.signup-cat__photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: none;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent);
}

.signup-cat__text,
.signup-cat__form {
  position: relative;
}

.signup-cat__text {
  grid-column: 1 / -1;
  max-width: 34em;
}

.signup-cat__text h2 {
  margin-bottom: 0.3em;
}

.signup-cat__text p {
  margin: 0;
}

.signup-cat__form {
  grid-column: 2;
  align-self: end;
  max-width: 540px;
  width: 100%;
}

.signup-cat .form-note {
  color: var(--text);
}

@media (max-width: 759px) {
  .signup-cat {
    display: block;
    min-height: 0;
    /* Room below the form for the cat: the photo is 0.82 × the block width tall, and its top
       ~40% is backdrop the form can overlap. */
    padding: 28px 20px calc((100vw - 2 * var(--gutter)) * 0.5);
  }

  .signup-cat__photo {
    top: auto;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
    mask-image: linear-gradient(to bottom, transparent, #000 35%);
  }

  .signup-cat__text {
    margin-bottom: 20px;
  }

  .signup-cat .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* White cards on a dark band (planned giving: important information; café: Relax/Play/Learn). */
.dark .box,
.dark ul.cards > li {
  color: var(--text);
  border-color: transparent;
}

.dark .box h2,
.dark .box h3,
.dark ul.cards > li h3 {
  color: var(--ink);
}

.info-box {
  max-width: 560px;
  margin-inline: auto;
  padding-block: 24px;
}

.info-box p {
  margin-bottom: 0.6em;
}

/* Apply: the requirements in a beige card, then the application form in a matching card. */
.apply-info {
  margin-top: 16px;
}

.apply-info h2 {
  margin-bottom: 0.3em;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 12px 40px;
  margin: 1.25em 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.55;
}

.checklist li {
  position: relative;
  margin: 0;
  padding-left: 30px;
}

.checklist li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 2px;
  width: 7px;
  height: 13px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.apply-info__note {
  padding-top: 1em;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}

.form-panel__start {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.form-panel__start .button {
  margin-top: 1em;
}

/* Google lays the form out in a 640 px white card on a transparent page, so it sits on the
   beige panel like the rest of the site's cards. Height is set per form page by site.js. */
.form-embed {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
}

@media (max-width: 600px) {
  .form-panel:has(iframe) {
    padding: 8px 0;
  }
}

/* Page subtitle under the H1 (rehoming guidelines). */
.subtitle {
  margin: 0.4em 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* Short notes as white cards on a band, three across (planned giving: "Before you give"). */
ul.note-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 899px) {
  ul.note-cards { grid-template-columns: minmax(0, 1fr); }
}

ul.note-cards > li {
  margin: 0;
  padding: 24px;
  font-size: var(--fs-small);
  background: var(--white);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
}

ul.note-cards h3 {
  margin-bottom: 0.4em;
  font-size: 21px;
}

ul.note-cards li > :last-child {
  margin-bottom: 0;
}

ul.note-cards a {
  overflow-wrap: anywhere;
}

/* Rehoming guidelines: the four rules at a glance (cards linking to each rule), then each rule
   as a numbered card with its key requirement pulled out in a callout. */
ol.guideline-glance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-inline: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 999px) {
  ol.guideline-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 519px) {
  ol.guideline-glance { grid-template-columns: minmax(0, 1fr); }
}

.guideline-glance li {
  margin: 0;
}

.guideline-glance a {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding: 22px 22px 24px;
  color: var(--text);
  text-decoration: none;
  background: var(--white);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--accent);
  transition: box-shadow 0.15s, transform 0.15s;
}

.guideline-glance a:hover {
  box-shadow: 0 14px 30px -20px rgb(31 29 26 / 0.5);
  transform: translateY(-2px);
}

.guideline-glance__num {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}

.guideline-glance__title {
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.guideline-glance__text {
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 519px) {
  .guideline-glance a {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 18px;
  }

  .guideline-glance__num {
    grid-row: span 2;
    align-self: center;
  }

  .guideline-glance__title {
    margin-top: 0;
  }
}

ol.guidelines {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guideline;
}

.guideline {
  position: relative;
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  padding-top: clamp(28px, 4vw, 40px);
  font-size: var(--fs-small);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  counter-increment: guideline;
}

.guideline + .guideline {
  margin-top: 24px;
}

.guideline::before {
  content: counter(guideline);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  background: var(--indigo);
  border-radius: 50%;
}

.guideline > h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

.guideline h4 {
  margin-top: 1.6em;
  font-size: 1.2rem;
}

.guideline > :last-child,
.guideline__why > div > :last-child {
  margin-bottom: 0;
}

.guideline__key {
  font-size: 1.15rem;
}

.callout {
  padding: 14px 18px;
  background: var(--band);
  border-left: 3px solid var(--indigo);
  border-radius: 0 8px 8px 0;
}

.callout--warn {
  border-left-color: var(--accent);
  background: #fbf1ee;
}

.guideline__why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.guideline__why > div {
  padding: 20px;
  background: var(--band);
  border-radius: var(--radius);
}

.resource-links {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.resource-links li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.resource-links li > span {
  color: var(--muted);
  font-size: 14px;
}

.sample-post {
  margin: 1em 0 1.5em;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sample-post figcaption {
  padding: 8px 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--band);
  border-bottom: 1px solid var(--line);
}

.sample-post blockquote {
  margin: 0;
  padding: 18px;
}

.sample-post .checklist {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 0;
}

.sample-post__blank {
  color: var(--muted);
  letter-spacing: 0.05em;
}

ul.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

ul.tag-list li {
  margin: 0;
  padding: 6px 14px;
  font-size: 15px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Intro paragraph kept to a readable measure in a full-width section. */
.intro {
  max-width: 760px;
}

/* Impact report pages: a grid of page thumbnails, each linking to its full size. */
.report-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 180px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-pages > li {
  margin: 0;
}

.report-pages img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.report-pages a:hover img {
  box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.4);
  transform: translateY(-3px);
}

.end-align {
  justify-self: end;
  margin: 0;
}

@media (max-width: 767px) {
  .end-align {
    justify-self: start;
  }
}

/* Stat cards (impact, donate). */
ul.stats--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

ul.stats--cards > li {
  padding: 28px 20px;
  background: var(--white);
  border-radius: var(--radius-card);
}

ul.stats--cards strong {
  color: var(--accent);
}

@media (max-width: 640px) {
  ul.stats.stats--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  ul.stats--cards > li {
    padding: 20px 12px;
    font-size: 14px;
  }
}

/* Horizontal bars with the value written beside each (one series, so one colour). */
.bars {
  display: grid;
  gap: 14px;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.bars > li {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 4em;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.bars__track {
  height: 14px;
}

.bars__bar {
  display: block;
  width: calc(var(--value) * 1%);
  min-width: 4px;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--indigo);
}

.bars__value {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

@media (max-width: 480px) {
  .bars > li {
    grid-template-columns: minmax(0, 1fr) 4em;
  }

  .bars__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* A large quotation (impact: founder's letter; donate). */
.pull-quote {
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  border-left: 3px solid var(--accent);
  background: var(--band);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.pull-quote p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.4;
}

.pull-quote footer {
  color: var(--muted);
  font-size: var(--fs-small);
}

.pull-quote footer::before {
  content: "— ";
}

/* Short stories in cards (impact). */
ul.stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.stories > li {
  margin: 0;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-card);
}

ul.stories h3 {
  font-size: 22px;
}

ul.stories p {
  margin: 0;
  font-size: var(--fs-small);
}

/* Guesthouse cards on a dark band (maneki machiya stay). */
ul.rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

ul.rooms > li {
  margin: 0;
}

ul.rooms figure {
  margin: 0 0 16px;
}

ul.rooms img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

ul.rooms h3 {
  margin-bottom: 0.3em;
  font-size: 22px;
}

ul.rooms p {
  font-size: 15px;
}

ul.rooms .button {
  margin-top: 1em;
}

@media (max-width: 900px) {
  ul.rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  ul.rooms {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A full-width photo behind white text (maneki machiya stay closing band). */
main > section.photo-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  text-align: center;
}

.photo-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  border-radius: 0;
}

.photo-band > div {
  position: relative;
}

.photo-band h2,
.photo-band .h3 {
  color: var(--white);
}

.photo-band .h3 {
  font-family: var(--font-display);
  line-height: 1.25;
}

/* A form on its own in a narrow section. */
.form-column {
  max-width: 560px;
  margin-inline: auto;
}

/* In a .split, push a narrower figure to the far edge. */
.split > figure.end {
  justify-self: end;
  width: min(100%, 420px);
}

/* Two portrait photos side by side (get involved: "Other ways"). */
.photo-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-grid--pair img {
  aspect-ratio: 5 / 8;
}

/* Programs (get involved): photo, bordered text card, then the buttons. */
ul.programs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.programs > li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

ul.programs figure {
  margin: 0;
}

ul.programs img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}

ul.programs .box {
  flex: 1;
  font-size: var(--fs-small);
}

ul.programs h3 {
  font-size: 22px;
}

ul.programs .buttons {
  margin: 0;
}

/* ---------------------------------------------------------------- donate
   Hero: the case for giving and the donation card side by side, so the form is on screen
   from the start. Phones: heading and lead, then the card, then the photo.
   The card spans both rows; when it is the taller column (LGL's form grows as the visitor fills
   it in), the 1fr row takes up the difference, so the photo stays right under the intro. */

.donate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 43vw, 472px));
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro give"
    "photo give";
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: start;
}

main > section.donate-hero {
  padding-top: clamp(32px, 5vw, 64px);
}

.donate-hero__intro { grid-area: intro; }
.donate-hero__give { grid-area: give; position: sticky; top: 112px; container: give / inline-size; }
/* #give sits on this non-sticky marker at the card's top, not on the sticky card itself:
   Firefox scrolls to a stuck element's current position and leaves it under the header. */
.donate-hero__anchor { grid-area: give; align-self: start; }
.donate-hero__photo { grid-area: photo; margin: 0; }

.donate-hero__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius);
}

.donate-hero h1 {
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem);
}

@media (max-width: 899px) {
  .donate-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "give" "photo";
  }

  .donate-hero__give {
    position: static;
  }
}

.monthly-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
  margin-top: 1.5em;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
  font-size: var(--fs-small);
}

.monthly-callout p {
  margin: 0;
}

.monthly-callout__amount {
  grid-row: span 2;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.1;
  text-align: center;
}

.monthly-callout__amount strong {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 44px;
}

@media (max-width: 480px) {
  .monthly-callout {
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-callout__amount {
    grid-row: auto;
    margin-bottom: 8px !important;
    text-align: left;
  }

  .monthly-callout__amount strong {
    display: inline;
    margin-right: 6px;
  }
}

.monthly-callout__ja {
  margin-top: 6px !important;
  color: var(--muted);
  font-size: 14px;
}

.donate-card {
  --pad: clamp(24px, 3vw, 36px);
  padding: var(--pad);
  background: var(--white);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 48px -28px rgb(31 29 26 / 0.45);
}

/* Phones: the card runs edge to edge, so LGL's form (whose frame spans the card) gets the whole
   screen width, and the card's side padding equals LGL's own left margin inside the frame
   (25px + 1/12 of the frame, see .lgl-embed), so the card's text starts where the form does. */
@media (max-width: 479px) {
  .donate-hero__give {
    margin-inline: calc(-1 * var(--gutter));
  }

  .donate-card {
    --pad: calc(25px + (min(100cqi, 476px) - 20px) / 12);
    padding-block: 24px;
    border-radius: 0;
  }
}

.donate-card h2 {
  margin-bottom: 0.15em;
  font-size: var(--fs-h3);
}

.donate-card__sub {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
}

.donate-card__sub > span {
  display: block;
  font-size: 13px;
}

/* The LGL donation form (its embed script); without JS, a button to the same form on LGL's site.
   LGL lays the form out on a Bootstrap grid inside its frame: it gets 10 of 12 columns less
   padding, starting 25px + 1/12 of the frame in from the frame's left edge. Where there's room
   the frame is wider than the card, shifted left so the form lines up with the card's text, and
   the card clips the overhang (only LGL's empty margins). Measured 2026-10-28; recheck if the
   card changes:
   - A 476px frame gives a 350px form. From 340px the asterisk stays beside "Name 名前 名字"
     and the name errors don't split 名前 (LGL spaces that heading with ideographic spaces).
   - reCAPTCHA picks its puzzle's layout from the frame's width. Up to ~480px it opens the
     puzzle at the top, centred (400px wide; the full frame width below ~400px), so the shift
     can't exceed (476 - 400) / 2 = 38px or the card would clip the puzzle's left edge. Wider
     than ~480px it pins the puzzle to the frame's bottom, where the trim would hide Verify.
   - Phones (under 480px): the puzzle fills the frame, so the frame mustn't overhang the card.
     The card runs edge to edge instead and its padding matches the form (see .donate-card).
   The trim clips 96 of the 100px of empty body padding at the bottom of every LGL page (the
   form, Stripe's payment page and the thank-you page all have it; seen 2026-10-30). While the
   frame shows another page than the form (data-later, set by site.js), the shift and the
   reserved height don't apply: the frame is centred instead (the payment page is a box centred
   in the frame) and sized by LGL alone. */
.lgl-embed {
  display: flow-root; /* or the trim's negative margin collapses through instead of clipping */
  margin: 8px calc(-1 * var(--pad)) 20px;
  overflow: hidden;
  overflow: clip;
}

.lgl-embed iframe {
  display: block;
  min-width: 476px;
  max-width: 476px;
  height: calc(var(--lgl-h) + 96px);
  margin-bottom: -96px;
  margin-left: max(var(--pad) - 63px, -38px);
}

@media (min-width: 480px) {
  .lgl-embed[data-later] iframe {
    margin-left: calc((100% - 476px) / 2);
  }
}

@media (max-width: 479px) {
  .lgl-embed iframe {
    min-width: 0;
    margin-left: 0;
  }
}

/* LGL's script creates the frame 635px tall and resizes it (an inline style height, which
   overrides the one above) a few seconds later, once reCAPTCHA has loaded. So the space is
   reserved from the start: --lgl-h is the tallest the form ends up (less the trim) in Chrome,
   Firefox or Safari at that frame width (macOS; re-measured 2026-10-30 after the maintainer
   restyled the form in LGL, fresh page loads at each step). They differ by up to
   ~40px, so in the shorter ones the leftover shows as space under the form instead of the
   card moving. */
.lgl-embed:has(> iframe) {
  min-height: var(--lgl-h);
}

.lgl-embed[data-later] {
  min-height: 0;
}

.lgl-embed { --lgl-h: 715px; } /* frames of 453px and up, including the 476px one */

@media (max-width: 479px) {
  @container give (width < 453px) { .lgl-embed { --lgl-h: 735px; } }
  @container give (width < 451px) { .lgl-embed { --lgl-h: 753px; } }
  @container give (width < 428px) { .lgl-embed { --lgl-h: 796px; } }
  @container give (width < 351px) { .lgl-embed { --lgl-h: 816px; } }
  @container give (width < 347px) { .lgl-embed { --lgl-h: 836px; } }
  @container give (width < 340px) { .lgl-embed { --lgl-h: 858px; } }
}

.lgl-embed .button--block {
  margin-inline: var(--pad);
}

/* Focus inside the frame can give the iframe itself a focus ring (a black box in Chrome):
   the fields inside show their own focus, so the outer ring only adds noise. */
.lgl-embed iframe:focus,
.lgl-embed iframe:focus-visible {
  outline: none;
}

.button--block > a {
  display: block;
  padding-block: 18px;
  font-size: 19px;
}

.donate-card__points {
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}

.donate-card__points li {
  position: relative;
  padding-left: 26px;
}

.donate-card__points li + li {
  margin-top: 8px;
}

.donate-card__points li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.donate-card__alt {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  background: var(--band);
  font-size: 15px;
}

/* Stats on a plain background, divided by hairlines. */
ul.stats--plain > li {
  padding: 8px 12px;
}

ul.stats--plain > li + li {
  border-left: 1px solid var(--line);
}

ul.stats--plain strong {
  color: var(--accent);
}

@media (max-width: 767px) {
  ul.stats.stats--plain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  ul.stats--plain > li + li {
    border-left: 0;
  }
}

.pull-quote--center {
  max-width: 820px;
  margin-inline: auto;
  border: 0;
  border-radius: var(--radius-card);
  text-align: center;
}

.pull-quote--center p::before {
  content: "";
  display: block;
  width: 40px;
  margin: 0 auto 20px;
  border-top: 3px solid var(--accent);
}

/* Other ways to give: a grid of cards. */
/* Four cards: one row, two rows of two, or one column (never three and a straggler).
   Cards in a row share one height, with each card's button (or logos) pinned to the bottom. */
ul.give-ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1179px) {
  ul.give-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  ul.give-ways { grid-template-columns: minmax(0, 1fr); }
}

ul.give-ways > li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-card);
  font-size: var(--fs-small);
}

ul.give-ways h3 {
  margin-bottom: 0.2em;
  font-size: 22px;
}

ul.give-ways [lang="ja"] {
  color: var(--muted);
  font-size: 14px;
}

ul.give-ways .button,
ul.give-ways .logos {
  margin-top: auto;
}

ul.give-ways .btn,
ul.give-ways .button > a {
  padding: 11px 20px;
  font-size: 15px;
}

/* Bank details for yen transfers: a full-width panel under the give-ways cards, opened from
   the bank-transfer card (site.js opens it when linked to). */
.bank-details {
  max-width: 860px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius-card);
}

.bank-details summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 20px clamp(20px, 4vw, 36px);
  list-style: none;
  cursor: pointer;
}

.bank-details summary::-webkit-details-marker {
  display: none;
}

.bank-details summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  align-self: center;
  border-right: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.bank-details[open] summary::after {
  transform: rotate(-135deg);
}

.bank-details__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.bank-details__ja {
  color: var(--muted);
  font-size: 14px;
}

.bank-details summary:hover .bank-details__title {
  color: var(--accent);
}

.bank-details__body {
  padding: 0 clamp(20px, 4vw, 36px) clamp(20px, 4vw, 32px);
  font-size: var(--fs-small);
}

.bank-details__body > p {
  color: var(--muted);
  font-size: 14px;
}

.bank-table {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bank-table > div {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 14px 20px;
}

.bank-table > div + div {
  border-top: 1px solid var(--line);
}

.bank-table dt {
  color: var(--muted);
  font-size: 15px;
}

.bank-table dt > span {
  margin-left: 6px;
  font-size: 13px;
}

.bank-table dd {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.bank-table dd small {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.bank-table__number {
  font-size: 22px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

@media (max-width: 560px) {
  .bank-table > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 48px;
}

/* Two logos side by side in a narrow give-ways card: they share the width, up to 120 px each.
   Each is an outline button, as tall as the give-ways buttons beside it. */
.logos--left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 120px));
  justify-content: start;
  gap: 12px;
}

.logos--left > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(15px * 1.3 + 24px);
  padding: 4px;
  border: 1px solid var(--indigo);
  border-radius: var(--radius-btn);
  background: var(--white);
}

.logos--left > a:hover {
  background: var(--band);
}

.logos img {
  width: auto;
  max-height: 40px;
  border-radius: 0;
}

/* The logo files have opaque white backgrounds cut tight to the artwork: pad them with a
   rounded white backdrop so the hover fill shows as a frame, not a hard edge. */
.logos--left img {
  width: 100%;
  height: 100%;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--white);
  object-fit: contain;
}

/* One large photo over two small ones (sponsorships hero). */
.photo-grid--hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.photo-grid--hero > :first-child {
  grid-column: 1 / -1;
}

.photo-grid--hero img {
  aspect-ratio: 4 / 3;
}

.photo-grid--hero > :first-child img {
  aspect-ratio: 16 / 9;
}

/* Sponsorship tiers: pricing-table cards, the top tier highlighted. Cards in a row share one height. */
ul.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.tiers > li {
  position: relative;
  margin: 0;
  padding: clamp(24px, 3vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

ul.tiers > li.tier--featured {
  border: 2px solid var(--accent);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.35);
}

.tier__badge {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  margin-bottom: 16px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--indigo);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.05em;
  transform: rotate(-3deg);
}

.tier--featured .tier__badge {
  background: var(--accent);
}

ul.tiers h3 {
  margin-bottom: 0.15em;
  font-size: 26px;
}

.tier__price {
  margin-bottom: 0.6em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
}

.tier__plus {
  margin-bottom: 0.5em;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
}

ul.tiers .checklist {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  font-size: 16px;
}

/* Year-by-year history (about). */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px clamp(16px, 2vw, 28px);
  margin-inline: 0;
  padding: 0;
  list-style: none;
}

.timeline > li {
  margin: 0;
  padding-top: 18px;
  border-top: 2px solid var(--accent);
}

.timeline__year {
  margin-bottom: 0.3em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.timeline h3 {
  font-size: 22px;
}

.timeline p:not(.timeline__year) {
  font-size: var(--fs-small);
}

/* Big numbers in a row (sponsorship reach, donate, impact). */
ul.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

ul.stats > li {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
}

ul.stats strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
}

.dark ul.stats strong {
  color: var(--white);
}

.center-block {
  margin-inline: auto;
}

/* Opening hours */
.hours {
  max-width: 360px;
  margin-bottom: 1.25em;
  background: var(--white);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.35);
  font-size: var(--fs-small);
}

.hours th {
  background: var(--indigo);
  color: var(--white);
  font-weight: 600;
}

.hours tr:nth-child(even) td {
  background: var(--band);
}

/* Review carousel: a sideways-scrolling row of cards. Long reviews are clamped with a
   "Read more" toggle by site.js; without JS the full text shows. */
.dark h2.left {
  text-align: left;
}

.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, calc((100% - 3 * 16px) / 4));
  gap: 16px;
  margin: 0;
  padding: 0 0 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  text-align: left;
}

.reviews > li {
  margin: 0;
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius-card);
  color: var(--text);
  font-size: var(--fs-small);
  scroll-snap-align: start;
}

.reviews figure {
  margin: 0 0 12px;
}

.reviews img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.reviews h3,
.dark .reviews h3 {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 22px;
}

.reviews .stars {
  margin-bottom: 8px;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.reviews .is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.more-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--indigo);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.waiting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.waiting figure {
  margin: 0;
}

.waiting img {
  width: 100%;
  aspect-ratio: 5 / 8;
  object-fit: cover;
}

.waiting .buttons {
  justify-content: center;
}

.heart {
  color: var(--ink);
  font-size: 32px;
}

@media (max-width: 767px) {
  .waiting {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .waiting > .center {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

ul.cards.left > li h3,
ul.cards.left > li p {
  padding-inline: 4px;
}

/* FAQ answer pages ("guides"): back link, photo + question, then the answer. */
.back-link {
  font-size: var(--fs-small);
}

.guide__head {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 760px;
  margin: 24px auto 32px;
}

.guide__head figure {
  flex: 0 0 min(240px, 40%);
  margin: 0;
}

.guide__head img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.guide__head h1 {
  margin: 0;
  font-size: var(--fs-h3);
}

.guide__body {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

.guide__body h2 {
  margin-top: 1.4em;
  font-size: 1.35rem;
}

.guide__body figure img {
  max-width: min(420px, 100%);
}

/* FAQ accordion */

.faq details {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 20px 40px 20px 0;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq details > :not(summary) {
  margin-top: 0;
  padding-bottom: 8px;
}

/* ---------------------------------------------------------------- prose (posts, cat stories, guides) */

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: 1.4em;
  font-size: 2rem;
}

.prose h3 {
  margin-top: 1.4em;
  font-size: 1.5rem;
}

.prose h4 {
  margin-top: 1.4em;
}

.prose figure {
  margin-block: 1.75em;
}

.prose figure img {
  margin-inline: auto;
}

/* Keep tall (portrait) photos in articles from filling a whole phone screen. Photos in
   migrated posts are often bare <img> blocks rather than <figure>s: give them the same rounded
   corners, centring and breathing room. */
.prose img {
  width: auto;
  max-height: min(70vh, 640px);
  object-fit: contain;
  border-radius: var(--radius);
}

/* Also when the photo sits inside a paragraph of text, a link or emphasis. */
.prose > img,
.prose > a > img,
.prose p img {
  margin: 1.75em auto;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--line);
}

.prose blockquote > :has(+ *) {
  margin-bottom: 0.5em;
}

/* Squarespace pull-quote headings ("> ## Myth 1") read as plain section headings. */
.prose blockquote:has(> h2:only-child),
.prose blockquote:has(> h3:only-child) {
  padding: 0;
  border: 0;
}

.prose iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-block: 1.5em;
}

.prose .gallery-grid,
.prose .gallery {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin-block: 1.5em;
}

/* ---------------------------------------------------------------- blog post */

.post {
  padding-top: clamp(40px, 6vw, 80px);
}

.post__header {
  margin-bottom: 2rem;
}

.post__header h1 {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
}

/* Monthly newsletter posted as a blog post: the email's own look (cream page, rust accent,
   small-caps eyebrows, "・・・" dividers, two-up story cards), rebuilt in plain HTML. */
.nl {
  --nl-page: #faf6ef;
  --nl-ink: #2b2622;
  --nl-soft: #5a4f45;
  --nl-muted: #7a6d60;
  --nl-accent: #b5472f;
  --nl-line: #e4d9c8;
  --nl-dots: #c9b9a3;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 6vw, 64px);
  border: 1px solid #efe7da;
  border-radius: var(--radius-card);
  background: var(--nl-page);
  color: var(--nl-ink);
}

.prose .nl h2,
.prose .nl h3 {
  margin-top: 0;
  color: var(--nl-ink);
  font-weight: 500;
}

.prose .nl h2 {
  margin-bottom: 0.6em;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 1.9rem);
}

.nl a:not(.btn) {
  color: var(--nl-accent);
}

.nl__month {
  color: var(--nl-muted);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

.nl__intro {
  color: var(--nl-soft);
  font-size: 1.1rem;
  text-align: center;
}

.prose .nl figure {
  margin-block: 1.75em;
}

.prose .nl img {
  width: 100%;
  max-height: none;
  border-radius: 8px;
}

.nl__eyebrow,
.prose .nl h2.nl__eyebrow {
  margin: 0 0 6px;
  color: var(--nl-accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.prose .nl h2.nl__eyebrow--center {
  margin-bottom: 24px;
  text-align: center;
}

.nl__small {
  color: var(--nl-soft);
  font-size: 15px;
}

.nl__dots {
  margin: 2.5em 0 2em;
  color: var(--nl-dots);
  letter-spacing: 10px;
  text-align: center;
}

.nl__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 32px 24px;
  align-items: start;
}

.nl__cards article {
  font-size: 16px;
}

.prose .nl__cards h3 {
  margin: 16px 0 8px;
  font-size: 1.3rem;
}

.nl__cards p {
  margin-bottom: 12px;
}

.nl__wishlist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl__wishlist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--nl-line);
}

.nl__wishlist li em {
  flex: none;
  color: var(--nl-accent);
  font-size: 15px;
}

.nl__wishlist li em.nl__muted {
  color: var(--nl-muted);
}

.nl__soft {
  color: var(--nl-soft);
}

.nl__wishlist .nl__soft {
  margin-top: 1em;
}

.nl__thanks {
  margin-top: 3em;
  text-align: center;
}

.nl__arigato {
  margin-bottom: 8px;
  color: var(--nl-accent);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 26px;
}

.nl__signoff {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--nl-line);
  color: var(--nl-soft);
  text-align: center;
}

.nl__signoff p {
  margin-bottom: 0.5em;
}

.nl__family {
  color: var(--nl-ink);
  font-size: 15px;
}

.nl__social {
  margin-top: 1.5em;
  font-size: 14px;
}

.nl__social a {
  color: var(--nl-soft) !important;
}

/* ---------------------------------------------------------------- previous / next */

.item-pagination {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-block: clamp(40px, 6vw, 72px);
  padding: 32px clamp(24px, 9vw, 104px);
  background: var(--white);
}

.item-pagination__link {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.item-pagination__link--next {
  margin-left: auto;
  text-align: right;
}

.item-pagination__link::before,
.item-pagination__link--next::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.item-pagination__link--next::before {
  display: none;
}

.item-pagination__link--next::after {
  transform: rotate(-135deg);
}

.cat ~ .wrap .item-pagination,
body:not(.tone-band) .item-pagination {
  padding-inline: 0;
}

@media (max-width: 600px) {
  .item-pagination__link {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------- cat profile */

.cat {
  padding-top: clamp(40px, 6vw, 80px);
}

.cat__header h1 {
  margin-bottom: 0.2em;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
}

.cat__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
  padding: 0;
  list-style: none;
}

.cat__tags li {
  margin: 0;
}

.cat__tags a {
  min-height: 36px;
  padding: 5px 16px;
  background: var(--band);
  border: 1px solid var(--line);
}

.cat__facts {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.cat__photo {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius);
}

.fact-list {
  margin: 0;
  padding: 18px 16px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 15px;
  line-height: 1.45;
}

.fact-list > div + div {
  margin-top: 12px;
}

.fact-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fact-list dd {
  margin: 2px 0 0;
  color: var(--ink);
}

.cat__story {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 17px;
}

.cat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 24px;
}

.cat__actions .btn {
  padding: 12px 22px;
  font-size: 16px;
}

.cat__gallery {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gallery figure {
  margin: 0;
}

.gallery a {
  display: block;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .cat__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- listings & cards */

.listing {
  padding-block: clamp(40px, 6vw, 72px);
}

.listing__header {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.listing__intro {
  max-width: 680px;
  margin: 0.75em 0 0;
}

/* Closing card on blog posts. */
.post-cta {
  margin-top: 3rem;
  padding: clamp(24px, 3vw, 32px);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--white);
}

.post-cta__title {
  margin-bottom: 0.3em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
}

.post-cta .buttons {
  margin: 1em 0 0;
}

/* Instagram follow prompts: the home card (text beside a three-photo strip) and the
   one-line note under cat profiles and blog posts. */
.ig-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--gap);
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-card);
  background: var(--band);
}

.ig-card__handle {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 0.6em;
  color: var(--indigo);
  font-size: var(--fs-small);
  font-weight: 600;
}

.ig-card__handle svg,
.ig-note svg,
.btn--icon svg {
  flex: none;
  fill: currentColor;
}

.ig-card__title {
  margin: 0 0 0.4em;
}

.ig-card__text > :last-child {
  margin-bottom: 0;
}

.ig-card__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig-card__photos li {
  margin: 0;
}

.ig-card__photos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .ig-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

.btn--icon {
  display: inline-flex !important;
  gap: 10px;
  align-items: center;
}

.ig-note {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.ig-note svg {
  color: var(--indigo);
}

.ig-note a {
  font-weight: 600;
  white-space: nowrap;
}

/* Small numbers under a paragraph (home: who we are). */
ul.stats--inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 1.75em;
  padding-top: 1.25em;
  border-top: 1px solid var(--line);
  text-align: left;
}

ul.stats--inline strong {
  color: var(--accent);
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
}

ul.stats--inline > li {
  font-size: 15px;
}

/* Category filters: "All cats" and three segmented controls (Sex, Location, Age). The current
   choice is filled indigo with a tick; counts sit beside each option. Cat profiles' category
   tags (.cat__tags) use the same pills. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
  margin-top: 28px;
}

.filters__group {
  display: grid;
  gap: 6px;
}

.filters__label {
  padding-left: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filters ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.filters li {
  margin: 0;
}

.filters a,
.cat__tags a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 16px;
  color: var(--indigo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.filters li a {
  background: var(--white);
  box-shadow: 0 1px 2px rgb(31 29 26 / 0.08);
}

.filters .filters__all {
  border: 1px solid var(--line);
  background: var(--white);
  min-height: 50px;
  padding-inline: 20px;
}

.filters a:hover,
.cat__tags a:hover {
  background: var(--band);
  box-shadow: inset 0 0 0 1px var(--indigo);
}

.filters a[aria-current],
.filters a[aria-current]:hover {
  background: var(--indigo);
  border-color: var(--indigo);
  box-shadow: 0 2px 6px -2px rgb(37 53 81 / 0.6);
  color: var(--white);
}

.filters a:focus-visible,
.cat__tags a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filters__count {
  min-width: 1.6em;
  padding: 1px 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--band);
  border-radius: 999px;
}

.filters a[aria-current] .filters__count {
  color: var(--indigo);
  background: var(--white);
}

.check-icon {
  flex: none;
  margin-left: -4px;
}

@media (max-width: 599px) {
  .filters {
    gap: 12px;
  }

  .filters__group,
  .filters ul {
    flex: 1 1 100%;
  }

  .filters li {
    flex: 1;
  }

  .filters li a {
    justify-content: center;
    width: 100%;
  }
}

.cat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 16px;
}

.cat-card a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.cat-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--band);
}

.cat-card__name {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.cat-card a:hover .cat-card__name {
  color: var(--accent);
}

.post-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 24px;
}

.post-card__image {
  display: block;
  margin-bottom: 16px;
}

.post-card__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.post-card .meta {
  margin-bottom: 6px;
  font-size: 13px;
}

.post-card__title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.25;
}

.post-card__title a {
  color: var(--ink);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--accent);
}

.post-card__excerpt {
  font-size: 17px;
}

@media (max-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cat-card__name {
    font-size: 20px;
  }

  .post-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- forms */

.field {
  margin: 0 0 16px;
  min-width: 0;
}

fieldset.field {
  margin-inline: 0;
  padding: 0;
  border: 0;
}

fieldset.field legend {
  padding: 0;
}

fieldset.field legend,
.field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 16px;
}

fieldset.field legend {
  margin-bottom: 8px;
  font-size: 17px;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.field-row > .field {
  margin-bottom: 0;
}

.field-row + .field,
.field-row {
  margin-bottom: 16px;
}

fieldset .field-row label {
  font-size: 14px;
}

.field__req {
  color: var(--muted);
  font-size: 13px;
}

input[type="text"],
input[type="email"],
textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #bcb5a8;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

input::placeholder,
textarea::placeholder {
  color: #8a8276;
}

input:focus,
textarea:focus {
  border-color: var(--indigo);
  outline: 2px solid var(--indigo);
  outline-offset: 0;
}

.form-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}

.newsletter-form .btn,
.contact-form .btn {
  margin-top: 8px;
  padding: 12px 22px;
  font-size: 16px;
}

/* Spam honeypot: off screen rather than display: none, which some bots skip. */
.hp {
  position: absolute;
  left: -5000px;
}

/* Turnstile shows a widget only when it wants the visitor to click (interaction-only). */
.turnstile:not(:empty) {
  margin: 8px 0;
}

/* Sending / sent / error line under the button (site.js). */
.form-status:empty {
  display: none;
}

.form-status {
  margin: 16px 0 0;
  color: var(--ink);
  font-weight: 600;
}

.form-status:focus {
  outline: none;
}

.form-status.is-error,
.field__error {
  color: var(--accent-dark);
}

.field__error {
  margin: 6px 0 0;
  font-size: 15px;
}

[aria-invalid="true"] {
  border-color: var(--accent-dark);
}

form.is-busy .btn {
  opacity: 0.6;
  cursor: progress;
}

/* Sent: only the thank-you message stays (site.js builds it from the form's data-sent-*). */
form.is-sent > :not(.form-status) {
  display: none;
}

form.is-sent .form-status {
  margin: 0;
  color: var(--text);
  font-weight: 400;
}

.form-sent__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--white);
}

.form-sent__title {
  margin: 0 0 0.4em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.form-sent__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}

.form-sent__sign {
  margin: 0.9em 0 0;
  color: var(--muted);
  font-style: italic;
}

/* A form on its own under a centred heading (planned giving): centre the message too. */
.form-column form.is-sent {
  text-align: center;
}

.form-column .form-sent__icon {
  margin-inline: auto;
}

/* /contact-us/thanks and the other no-JS form result pages (src/pages/form-results.njk). */
.form-result .btn {
  margin: 4px;
}

/* ---------------------------------------------------------------- embeds */

/* "Who we are" video (home): a phone-shaped card, a play button over the poster image.
   site.js swaps the poster link for the <video> on click. */
.video-card {
  width: 100%;
  max-width: 360px;
  margin: 0;
  justify-self: end;
}

.video-card__frame {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ink);
  box-shadow: 0 28px 56px -32px rgb(31 29 26 / 0.6);
}

.video-card video,
.video-card__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.video-card__frame img {
  border-radius: 0;
}

.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(to top, rgb(20 18 16 / 0.85), rgb(20 18 16 / 0.35) 32%, transparent 55%);
  color: var(--white);
}

.video-card__icon {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgb(184 53 31 / 0.55);
  transition: transform 0.2s;
}

.video-card__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--white);
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: no-preference) {
  .video-card__icon {
    animation: video-pulse 2.4s ease-out infinite;
  }
}

@keyframes video-pulse {
  70% { box-shadow: 0 0 0 16px rgb(184 53 31 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(184 53 31 / 0); }
}

a.video-card__frame:hover .video-card__icon,
a.video-card__frame:focus-visible .video-card__icon {
  transform: scale(1.08);
}

a.video-card__frame:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.video-card__text {
  display: grid;
  gap: 2px;
  padding-bottom: 4px;
}

.video-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.video-card__meta {
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.video-card figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--fs-small);
}

@media (max-width: 767px) {
  .video-card {
    justify-self: center;
  }
}

/* ---------------------------------------------------------------- 404 */

.not-found {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70vh;
  overflow: hidden;
}

main > section.not-found {
  padding-block: clamp(48px, 10vw, 120px);
}

.not-found__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.not-found__card {
  position: relative;
  max-width: 520px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px -12px rgb(0 0 0 / 0.3);
}

.not-found__card > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}