/* Shepherdman Academy — editorial redesign (2026-09)
   Sumi (ink) / kin (gold) / washi (paper), with vermilion (shu) used once per page.
   Fonts: Shippori Mincho B1 (JA display) / Cormorant Garamond (EN display) / Noto Serif JP (body, both languages).
   No build step, no framework. Design source: shepherdman-home-mock.html (approved 2026-09-03). */

:root {
  --sumi:    #14120F;
  --sumi-2:  #1B1813;
  --washi:   #F4EFE6;
  --washi-2: #EEE7DA;
  --ink:     #16130E;
  --ink-body:#332E27;
  --ink-mute:#6A6055;
  --kin:     #B08D57;
  --kin-lt:  #C9A96A;
  --shu:     #9B3B2E;
  --hair:    #D7CBB6;
  --err:     #9B3B2E;
  --ok:      #4F6B4A;
  --ja:   "Shippori Mincho B1", serif;
  --en:   "Cormorant Garamond", serif;
  --body: "Noto Serif JP", "Shippori Mincho B1", serif;
  --sans: "Noto Serif JP", "Shippori Mincho B1", serif; /* no separate sans in this system; small labels use --body at reduced size */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  background: var(--washi);
  color: var(--ink-body);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.95;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
html[lang="ja"] body { letter-spacing: .01em; }
img { max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 720px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; }

/* ================= Masthead : single fixed bar ================= */
.mast { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; transition: background .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; }
.mast.is-stuck { background: rgba(16,14,11,.94); border-bottom-color: rgba(176,141,87,.28); backdrop-filter: saturate(1.1) blur(6px); }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { display: block; width: 32px; height: 32px; }
.brand-name { font-family: var(--en); font-size: 18px; letter-spacing: .12em; color: #EFE7D9; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { font-family: var(--body); font-size: 13.5px; letter-spacing: .04em; color: #D8CFC1; text-decoration: none; position: relative; padding-bottom: 4px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--kin-lt); transition: right .32s cubic-bezier(.2,.7,.2,1); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: #F2EADC; }
.lang { display: flex; align-items: center; gap: 7px; margin-left: 4px; padding-left: 20px; border-left: 1px solid rgba(176,141,87,.35); font-family: var(--en); font-size: 12.5px; letter-spacing: .12em; }
.lang .alt { color: #9C9184; text-decoration: none; }
.lang .alt:hover { color: var(--kin-lt); }
.lang .cur { color: var(--kin-lt); }
.lang .sep { color: #584F44; }
.burger { display: none; width: 40px; height: 40px; background: none; border: 0; padding: 9px 7px; cursor: pointer; }
.burger span { display: block; height: 1px; background: #E4DBCC; margin: 7px 0; transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mnav { display: none; }

@media (max-width: 760px) {
  .mast-in { height: 62px; }
  .nav { display: none; }
  .burger { display: block; }
  .mast { background: rgba(16,14,11,.94); border-bottom-color: rgba(176,141,87,.28); }
  .mnav { display: block; max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.7,.2,1); background: rgba(16,14,11,.98); border-top: 1px solid rgba(176,141,87,.2); }
  .mnav.open { max-height: 460px; }
  .mnav-in { padding: 12px 22px 24px; }
  .mnav a { display: block; padding: 13px 0; font-family: var(--body); font-size: 15px; color: #D8CFC1; text-decoration: none; border-bottom: 1px solid rgba(176,141,87,.14); }
  .mnav .mlang { padding-top: 16px; font-family: var(--en); font-size: 13px; letter-spacing: .14em; color: #8B8175; }
  .mnav .mlang a { color: #8B8175; text-decoration: none; }
  .mnav .mlang .cur { color: var(--kin-lt); }
}

/* ================= Front-page hero (photograph + copy, two columns) ================= */
.hero { background-color: var(--sumi); background-repeat: no-repeat; background-size: 0 0; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(176,141,87,0), rgba(176,141,87,.55) 22%, rgba(176,141,87,.55) 78%, rgba(176,141,87,0)); }
.hero-in { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 56px; align-items: center; padding: 150px 32px 96px; position: relative; z-index: 2; }
.eyebrow { font-family: var(--en); font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--kin-lt); margin: 0; }
.hero h1 { font-family: var(--ja); font-weight: 600; color: #F3ECDF; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.7; letter-spacing: .06em; margin: 24px 0 0; }
.hero-rule { width: 64px; height: 1px; background: var(--kin); margin: 40px 0 24px; }
.hero-name { font-family: var(--ja); font-weight: 500; font-size: 19px; letter-spacing: .14em; color: #E7DECE; margin: 0; }
.hero-role { font-family: var(--body); font-size: 13.5px; letter-spacing: .03em; color: var(--kin-lt); line-height: 2; margin: 8px 0 0; }
.hero-bio { font-weight: 300; font-size: 14.5px; line-height: 2; color: #A79C8D; max-width: 34em; margin: 20px 0 0; }
.hero-fig { position: relative; margin: 0; }
.hero-portrait { width: 100%; height: auto; display: block; }
/* 2026-09-04: an enso+dragon ink-wash backdrop behind the portrait was tried here (per
   photo delivery instructions) and dropped — the source photo's white paper background
   read as a flat grey panel behind the figure at low opacity rather than dissolved ink,
   which the instructions explicitly said to judge and skip if it came out busy/wrong. */

@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; gap: 0; padding: 118px 32px 72px; }
  .hero-fig { display: none; }
  .hero { background-position: top 40px right -90px; background-size: auto 78%; }
}
@media (max-width: 760px) {
  .hero-in { padding: 96px 32px 60px; }
  .hero h1 { line-height: 1.8; }
  .hero { background-position: top 52px right -140px; background-size: auto 60%; }
}

/* ================= Sub-page hero: sumi band, page title ================= */
.page-hero { background: var(--sumi); border-bottom: 1px solid rgba(176,141,87,.28); padding: 158px 0 68px; text-align: center; position: relative; overflow: hidden; }
.page-hero h1 { font-family: var(--ja); font-weight: 600; color: #F3ECDF; font-size: clamp(27px, 5vw, 42px); line-height: 1.5; letter-spacing: .05em; margin: 0; position: relative; z-index: 1; }
.page-hero .sub { font-family: var(--en); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--kin-lt); margin: 18px 0 0; position: relative; z-index: 1; }
.page-hero .lede { font-family: var(--body); font-size: clamp(16px, 2.6vw, 18.5px); color: #C7BCAB; max-width: 32em; margin: 24px auto 0; line-height: 1.85; position: relative; z-index: 1; }
@media (max-width: 760px) { .page-hero { padding: 108px 0 52px; } }

/* Sub-page hero with a photograph behind it, darkened so the title stays legible. */
.page-hero.has-photo { background-size: cover; background-position: center; }
.page-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: rgba(20,18,15,.76); z-index: 0; }
.page-hero.has-photo.bg-right { background-position: right center; }

/* Sub-page hero that shows a full artwork photo (not a cover-cropped background) beside
   the title, so the whole piece stays visible at any viewport width. Image stacks above
   the text on narrow screens; sits beside it, full height, on wide ones. No dark overlay. */
.page-hero.artwork-hero { text-align: left; }
.artwork-hero-in { display: grid; grid-template-columns: 1fr; gap: 36px; }
.artwork-hero-fig { margin: 0; }
.artwork-hero-fig img { display: block; width: 100%; height: auto; border: 1px solid rgba(176,141,87,.28); }
.artwork-hero-copy { text-align: center; }
@media (min-width: 760px) {
  .artwork-hero-in { grid-template-columns: minmax(0,38%) minmax(0,1fr); align-items: center; gap: 56px; }
  .artwork-hero-fig img { width: auto; height: auto; max-height: 68vh; max-width: 100%; margin: 0 auto; }
  .artwork-hero-copy { text-align: left; }
  .artwork-hero-copy .lede { margin-left: 0; }
}

/* ================= Section skeleton ================= */
.band { padding: 108px 0; border-bottom: 1px solid var(--hair); }
.band:last-of-type, main > .band:last-child { border-bottom: none; }
.band-tint, .band-alt { background: var(--washi-2); }
.band-ink { background: var(--sumi); color: var(--washi); border-bottom: none; }
.band-tagline { padding: 96px 0; text-align: center; border-bottom: 1px solid var(--hair); }

.sec-num {
  font-family: var(--en); font-weight: 500; font-size: 15px; letter-spacing: .2em;
  color: var(--kin); margin: 0 0 14px;
}
.band-ink .sec-num { color: var(--kin-lt); }
h2 {
  font-family: var(--ja); font-weight: 600;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.5; letter-spacing: .05em;
  color: var(--ink); margin: 0 0 8px;
  position: relative; padding-top: 26px;
}
h2::before { content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 1px; background: var(--kin); }
.band-ink h2 { color: #F3ECDF; }
.band-ink h2::before { background: var(--kin-lt); }
h2.fit-heading { font-size: clamp(21px, 4vw, 28px); }
h3 { font-family: var(--ja); font-weight: 600; font-size: 19.5px; letter-spacing: .04em; color: var(--ink); margin: 0 0 8px; }
.band-ink h3 { color: #F3ECDF; }
.wrap > h3 { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); }
.sub { font-family: var(--en); font-size: 13px; letter-spacing: .14em; color: var(--ink-mute); margin: 0 0 8px; font-style: normal; }

.prose { max-width: 42em; }
.prose p { margin: 22px 0 0; }
.prose .lead { font-size: clamp(19px, 2.6vw, 22px); line-height: 1.7; color: var(--ink); margin-top: 28px; }
.pull { border-left: 2px solid var(--shu); padding-left: 20px; font-family: var(--ja); font-size: clamp(18px, 2.6vw, 21px); line-height: 1.65; margin: 34px 0 0 !important; max-width: 42em; }
.prose .quote { margin: 30px 0 0; border-left: 2px solid var(--shu); padding-left: 20px; max-width: 42em; }
.prose .quote .lead { margin-top: 0; }
.prose .quote-cite { font-family: var(--body); font-size: 13.5px; color: var(--ink-mute); margin: 10px 0 0; padding-left: 22px; }
.aside { font-family: var(--body); font-size: 14px; line-height: 1.9; color: var(--ink-mute); margin: 40px 0 0; max-width: 42em; }
.band-ink .aside { color: #A79C8D; }
.prose a, .aside a, .card p a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--kin); padding-bottom: 1px; }
.prose a:hover, .aside a:hover, .card p a:hover { background: rgba(176,141,87,.12); }
.band-ink .aside a { color: #F3ECDF; border-bottom-color: var(--kin-lt); }
.origin-note { font-family: var(--body); font-size: 12.5px; line-height: 1.85; color: var(--ink-mute); margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); max-width: 42em; }

/* ---------- Photo gallery: thin gold rule instead of the plain hairline ---------- */
.shot-trio .shot img, .shot-duo.gallery-gold .shot img { border-color: var(--kin); }

/* ---------- Two-up cards ---------- */
.two { display: grid; grid-template-columns: 1fr; gap: 0; margin: 40px 0 0; }
.card { padding: 26px 0 0; border-top: 1px solid var(--kin); }
.card p { margin: 0; font-size: 16.5px; line-height: 1.9; color: var(--ink-body); }
.card h3::before { display: none; }
.card-bordered { border-top: 1px solid var(--kin); padding: 26px 0 0; }
@media (min-width: 700px) {
  .two { grid-template-columns: 1fr 1fr; gap: 0; }
  .two .card + .card, .two .card-bordered + .card-bordered { border-left: 1px solid var(--hair); padding-left: 34px; margin-left: 34px; }
}

/* ---------- Definitions ---------- */
.defs { margin: 34px 0 0; max-width: 42em; }
.defs dt { font-family: var(--ja); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--ink); margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hair); }
.defs dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.defs dd { margin: 8px 0 0; font-size: 16px; line-height: 1.85; color: var(--ink-body); }
.rom { font-family: var(--en); letter-spacing: .02em; color: var(--ink-mute); }

/* Home "Kata / Praxis / Michi" — three columns, no HTML change (grid-auto-flow) */
#teachings .defs, #teaching-triad .defs {
  display: grid; grid-auto-flow: column; grid-template-rows: auto auto;
  grid-template-columns: repeat(3, 1fr); column-gap: 0; max-width: none;
}
#teachings .defs dt, #teaching-triad .defs dt { font-size: 22px; margin-top: 0; padding: 26px 30px 0 0; border-top: 1px solid var(--kin); }
#teachings .defs dd, #teaching-triad .defs dd { padding-right: 30px; }
#teachings .defs dt:not(:nth-of-type(1)), #teaching-triad .defs dt:not(:nth-of-type(1)),
#teachings .defs dd:not(:nth-of-type(1)), #teaching-triad .defs dd:not(:nth-of-type(1)) {
  border-left: 1px solid var(--hair); padding-left: 30px;
}
@media (max-width: 760px) {
  #teachings .defs, #teaching-triad .defs { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: auto; }
  #teachings .defs dt, #teaching-triad .defs dt { border-left: 0 !important; padding-left: 0 !important; }
  #teachings .defs dd, #teaching-triad .defs dd { border-left: 0 !important; padding-left: 0 !important; padding-right: 0; }
}

@media (min-width: 700px) {
  .defs:not(#teachings .defs):not(#teaching-triad .defs) { display: grid; grid-template-columns: 190px 1fr; column-gap: 24px; row-gap: 0; }
  .defs:not(#teachings .defs):not(#teaching-triad .defs) dt { padding-top: 20px; margin-top: 20px; }
  .defs:not(#teachings .defs):not(#teaching-triad .defs) dt:first-child { padding-top: 0; margin-top: 0; }
  .defs:not(#teachings .defs):not(#teaching-triad .defs) dd { margin-top: 20px; padding-top: 0; border-top: 1px solid var(--hair); }
  .defs:not(#teachings .defs):not(#teaching-triad .defs) dd:first-of-type { margin-top: 0; border-top: 0; }
}

/* ---------- Form (shared field look, newsletter + contact) ---------- */
.form { margin: 22px 0 0; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.form input[type="email"] {
  font-family: var(--body); font-size: 15px;
  padding: 14px 15px; width: 100%;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hair); border-radius: 0; outline: none;
}
.form input[type="email"]:focus { border-color: var(--kin); }
.form button {
  font-family: var(--body); font-size: 14px; letter-spacing: .06em;
  padding: 14px 22px; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hair); border-radius: 0;
  transition: opacity .18s ease;
}
.form button:hover { opacity: .8; }
.form button[disabled] { opacity: .5; cursor: default; }
.form-status { font-family: var(--body); font-size: 13.5px; line-height: 1.8; min-height: 1.8em; margin: 14px 0 0; color: var(--ink-mute); }
.form-status.is-error { color: var(--err); }
.form-status.is-ok { color: var(--ok); }
.lang-pick { border: 0; margin: 0 0 14px; padding: 0; }
.lang-pick legend { font-family: var(--body); font-size: 12.5px; letter-spacing: .08em; color: var(--ink-mute); padding: 0; margin: 0 0 9px; }
.lang-pick label { font-family: var(--body); font-size: 14px; color: var(--ink-body); display: inline-flex; align-items: center; gap: 8px; margin: 0 20px 6px 0; cursor: pointer; }
.lang-pick input { accent-color: var(--kin); margin: 0; flex: none; }
.note-strong, .cta-box strong { color: var(--ink); font-weight: 500; }

@media (min-width: 700px) { .field-row { grid-template-columns: 1fr auto; } }

/* ---------- Footer ---------- */
.footer { background: var(--sumi); color: #9A9083; padding: 84px 0 56px; }
.foot-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 44px; align-items: start; }
.foot-brand { display: flex; align-items: center; gap: 13px; margin: 0; }
.foot-brand img { display: block; width: 40px; height: 40px; }
.foot-brand span { font-family: var(--en); font-size: 20px; letter-spacing: .12em; color: #EFE7D9; }
.foot-role { font-family: var(--body); font-size: 13.5px; line-height: 2.05; color: var(--kin-lt); margin: 22px 0 0; }
.foot-addr { font-family: var(--body); font-size: 13.5px; line-height: 2.05; color: #8B8175; margin: 14px 0 0; }
.foot-addr a { color: #8B8175; border-bottom: 1px solid rgba(176,141,87,.5); text-decoration: none; }
.foot-addr a:hover { color: var(--kin-lt); }
.foot-nav { display: flex; flex-direction: column; gap: 11px; text-align: right; }
.foot-nav a { font-family: var(--body); font-size: 13.5px; color: #B3A899; text-decoration: none; }
.foot-nav a:hover { color: var(--kin-lt); }
.foot-rule { height: 1px; background: rgba(176,141,87,.25); margin: 50px 0 24px; }
.foot-fine { font-family: var(--en); font-size: 11.5px; letter-spacing: .16em; color: #5E564B; margin: 0; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .foot-nav { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

/* ---------- Programme cards (front page navigation) ---------- */
.cards3 { display: grid; grid-template-columns: 1fr; gap: 36px; margin: 40px 0 0; }
.card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-top: 1px solid var(--kin); padding-top: 26px; }
.card-link h3 { line-height: 1.6; }
.card-link p { margin: 14px 0 0; font-size: 15px; line-height: 1.95; color: var(--ink-body); flex: 1; }
.card-link .go {
  display: inline-block; margin-top: 20px; font-family: var(--en); font-size: 13px; letter-spacing: .14em;
  color: var(--kin); position: relative; padding-bottom: 4px; align-self: flex-start; text-decoration: none;
}
.card-link .go::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--kin); transform: scaleX(.3); transform-origin: left; transition: transform .38s cubic-bezier(.2,.7,.2,1); }
a.card-link:hover .go::after { transform: scaleX(1); }
a.card-link:hover h3 { color: #000; }
.card-link.card-disabled { border-top-color: var(--shu); }
.card-link.card-disabled h3, .card-link.card-disabled p { color: var(--ink-mute); }
.card-link.card-disabled .go { color: var(--shu); }
.card-link.card-disabled .go::after { background: var(--shu); transform: scaleX(1); }
@media (min-width: 700px) { .cards3 { grid-template-columns: 1fr 1fr 1fr; gap: 40px; } .cards3.two-up { grid-template-columns: 1fr 1fr; } }

/* ---------- Fact list (dates, fees, place) ---------- */
.facts { list-style: none; margin: 36px 0 0; padding: 0; max-width: 42em; }
.facts li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 22px 0; border-top: 1px solid var(--hair); }
.facts li:first-child { border-top-color: var(--kin); }
.facts li:last-child { border-bottom: 1px solid var(--hair); }
.facts-k { font-family: var(--body); font-size: 12.5px; letter-spacing: .06em; color: var(--kin); padding-top: 2px; }
.facts-v { font-size: 16.5px; line-height: 1.8; color: var(--ink); }
.facts-note { display: block; font-family: var(--body); font-size: 13px; color: var(--ink-mute); margin-top: 6px; }
@media (min-width: 700px) { .facts li { grid-template-columns: 190px 1fr; gap: 20px; } }

/* ---------- Simple lists ---------- */
.checks, .cycle { margin: 30px 0 0; padding: 0; list-style: none; max-width: 42em; }
.checks li, .cycle li { position: relative; padding-left: 24px; margin: 13px 0; font-size: 16px; line-height: 1.85; }
.checks li::before, .cycle li::before { content: ""; position: absolute; left: 0; top: .8em; width: 11px; height: 1px; background: var(--kin); }
.flow { margin: 30px 0 0; padding: 0; list-style: none; max-width: 42em; }
.flow li { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--hair); }
.flow li:first-child { border-top: 1px solid var(--kin); }
.flow-n { font-family: var(--en); font-size: 12px; letter-spacing: .16em; color: var(--kin); flex: none; }
.flow-t { font-size: 16px; line-height: 1.8; }

/* ---------- Contact form ---------- */
.form-light { margin: 32px 0 0; max-width: 42em; }
.field { margin: 0 0 22px; }
.field > label, .fieldset > legend { display: block; font-family: var(--body); font-size: 13px; letter-spacing: .04em; color: var(--ink); margin: 0 0 8px; padding: 0; }
.req { color: var(--shu); font-size: 12px; margin-left: 6px; }
.form-light input[type="text"], .form-light input[type="email"], .form-light input[type="tel"], .form-light select, .form-light textarea {
  font-family: var(--body); font-size: 15.5px; line-height: 1.7;
  padding: 12px 14px; width: 100%;
  color: var(--ink); background: transparent;
  border: 1px solid var(--sumi); border-radius: 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
.form-light select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form-light textarea { min-height: 160px; resize: vertical; }
.form-light input:focus, .form-light select:focus, .form-light textarea:focus { border-color: var(--kin); }
.fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--hair); background: transparent; padding: 14px 16px; cursor: pointer; }
.choice input { margin: 5px 0 0; accent-color: var(--kin); flex: none; }
.choice-t { font-size: 16px; line-height: 1.7; }
.choice-note { display: block; font-family: var(--body); font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-light button {
  font-family: var(--body); font-size: 14px; letter-spacing: .06em; padding: 15px 30px; cursor: pointer;
  color: #F0E8DA; background: var(--sumi); border: 1px solid var(--sumi); border-radius: 0;
  transition: background .3s, color .3s, border-color .3s;
}
.form-light button:hover { background: transparent; color: var(--ink); border-color: var(--kin); }
.form-light button[disabled] { opacity: .5; cursor: default; }
.form-light .form-status { color: var(--ink-mute); }
.form-light .form-status.is-error { color: var(--err); }
.form-light .form-status.is-ok { color: var(--ok); }
.privacy { font-family: var(--body); font-size: 12.5px; line-height: 1.85; color: var(--ink-mute); margin: 18px 0 0; }

/* ---------- Teacher hero copy pieces reused on /about/ (bio portrait) ---------- */
.portrait { width: clamp(180px, 42vw, 240px); aspect-ratio: 3/4; overflow: hidden; background: var(--washi-2); border: 1px solid var(--hair); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Tagline band ---------- */
.tagline-big { font-family: var(--ja); font-weight: 600; font-size: clamp(23px, 4.6vw, 34px); line-height: 1.65; color: var(--ink); margin: 0 auto; max-width: 22em; }
.tagline-big::before { content: ""; display: block; width: 42px; height: 1px; background: var(--kin); margin: 0 auto 30px; }

/* ---------- Upcoming ---------- */
.upcoming { list-style: none; margin: 8px 0 0; padding: 0; }
.upcoming li { display: grid; grid-template-columns: 220px minmax(0,1fr); column-gap: 28px; padding: 28px 0; border-top: 1px solid var(--hair); }
.upcoming li:first-child { border-top-color: var(--kin); }
.upcoming li:last-child { border-bottom: 1px solid var(--hair); }
.up-when { grid-column: 1; grid-row: 1 / 3; font-family: var(--ja); font-weight: 500; font-size: 14.5px; letter-spacing: .04em; color: var(--kin); padding-top: .35em; margin: 0; }
.up-what { grid-column: 2; grid-row: 1; font-family: var(--ja); font-weight: 600; font-size: 21px; letter-spacing: .04em; color: var(--ink); line-height: 1.6; margin: 0; }
.up-note { grid-column: 2; grid-row: 2; font-family: var(--body); font-size: 13.5px; color: var(--ink-mute); margin: 8px 0 0; }
.band-ink .up-what { color: #F3ECDF; }
.band-ink .up-note { color: #A79C8D; }
@media (max-width: 760px) {
  .upcoming li { grid-template-columns: 1fr; gap: 6px; }
  .up-when, .up-what, .up-note { grid-column: auto; grid-row: auto; }
}

/* ---------- Two-up call to action (newsletter) ---------- */
.cta-two { display: grid; grid-template-columns: 1fr; gap: 40px; margin: 8px 0 0; }
.cta-box { border-top: 1px solid var(--kin); padding-top: 26px; }
.cta-box + .cta-box { border-top-color: var(--hair); }
.cta-box p { margin: 14px 0 0; font-size: 15px; line-height: 1.95; color: var(--ink-body); }
.cta-box .form { margin: 20px 0 0; }
.cta-box a { color: var(--ink); border-bottom: 1px solid var(--hair); padding-bottom: 2px; text-decoration: none; transition: border-color .3s, color .3s; }
.cta-box a:hover { border-color: var(--kin); }
a.btn-line, .btn-line {
  display: inline-block; padding: 14px 30px; background: var(--sumi); color: #F0E8DA;
  font-family: var(--body); font-size: 14px; letter-spacing: .04em; border: 1px solid var(--sumi);
  text-decoration: none; border-bottom: none; transition: background .3s, color .3s, border-color .3s;
}
a.btn-line:hover, a.btn-line:focus-visible { background: transparent; color: var(--ink); border-color: var(--kin); }
@media (min-width: 700px) { .cta-two { grid-template-columns: 1fr 1fr; gap: 56px; } .cta-two .cta-box + .cta-box { border-top-color: var(--kin); } }

/* ---------- Bio block (/about/): current-title tags + year timeline ----------
   2026-09-04: replaces one flat stack of paragraphs (read as "nobetto" / flat)
   with (1) a tag row for current titles, pulled from the paragraph text with no
   wording changes, and (2) a year-labelled row list for the four dated
   paragraphs, modelled on .upcoming's label + content grid. Undated paragraphs
   stay as ordinary prose above (lead-in) and below (close) the row list. */
.bio-tags { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 26px 0 6px; }
.bio-tag {
  font-family: var(--body); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-body);
  background: var(--washi-2); border: 1px solid var(--kin); padding: 7px 15px; line-height: 1.5;
}
.bio-lead, .bio-close { max-width: 36em; }
.bio-lead p, .bio-close p { max-width: 36em; }
.bio-timeline { list-style: none; margin: 10px 0 0; padding: 0; max-width: 46em; }
.bio-timeline li { display: grid; grid-template-columns: 108px minmax(0,1fr); column-gap: 28px; padding: 26px 0; border-top: 1px solid var(--hair); }
.bio-timeline li:first-child { border-top-color: var(--kin); }
.bio-timeline li:last-child { border-bottom: 1px solid var(--hair); }
.bio-timeline p { font-size: 15.5px; line-height: 1.95; color: var(--ink-body); margin: 0; max-width: 36em; }
.bio-timeline .bio-year { font-family: var(--en); font-weight: 500; font-size: 25px; letter-spacing: .03em; color: var(--kin); margin: 0; padding-top: .1em; max-width: none; }
@media (max-width: 760px) {
  .bio-timeline li { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Photograph slots ---------- */
.shot { margin: 40px 0 0; }
.shot img { display: block; width: 100%; height: auto; background: var(--washi-2); border: 1px solid var(--hair); }
.shot figcaption { font-family: var(--body); font-size: 12.5px; line-height: 1.8; color: var(--ink-mute); margin-top: 10px; }
.shot-duo { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; }
.shot-duo .shot { margin: 0; }
@media (min-width: 700px) { .shot-duo { grid-template-columns: 1fr 1fr; } }
.shot-trio { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; align-items: start; }
.shot-trio .shot { margin: 0; }
.shot-trio .shot img { object-fit: contain; background: var(--washi-2); }
@media (min-width: 700px) { .shot-trio { grid-template-columns: 1fr 1fr 1fr; } }
/* 2026-09-04: was object-fit:cover, which cropped both photos (koza-hands worst, ~49%
   of the frame). Kept the equal-height 3:4 frame but switched to contain so the whole
   photo always shows; any leftover space in the frame is filled by the box's own
   background (var(--washi-2), same as .shot img and this section's band-tint), so the
   letterboxing reads as picture-mat margin rather than empty panels. */
.shot-duo-cover .shot img { aspect-ratio: 3/4; object-fit: contain; }

/* Justified variant of .shot-trio (opt-in via .gallery-justified): a fixed-height row
   where each figure's share of the width is set by its own aspect ratio (--ar, set
   inline per figure), so the three pieces line up at the same height. 2026-09-04: this
   used object-fit:cover, which cropped all three artworks by ~11% (the landscape piece's
   top edge visibly cut off) because the flex-basis-by-aspect-ratio only approximates the
   true box aspect (row gaps eat into the width budget). Switched to contain so nothing is
   ever cropped; the small resulting gap reads as gallery matting (background matches
   .shot img's var(--washi-2)) instead of empty panels. Scoped to the modifier class only —
   the base .shot-trio used elsewhere (e.g. the school page) is untouched. */
@media (min-width: 700px) {
  .shot-trio.gallery-justified { display: flex; grid-template-columns: none; height: 320px; align-items: stretch; }
  .shot-trio.gallery-justified .shot { flex: var(--ar, 1) 1 0; min-width: 0; height: 100%; }
  .shot-trio.gallery-justified .shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
}

/* ================= Motion: fade + 14px rise, once, gated by .js-motion ================= */
.js-motion .reveal { opacity: 0; translate: 0 14px; transition: opacity .8s cubic-bezier(.22,.61,.36,1), translate .8s cubic-bezier(.22,.61,.36,1); }
.js-motion .reveal.visible { opacity: 1; translate: none; }
/* LINE button card: never let ancestor opacity wash out the button's own contrast — slide only. */
.js-motion .cta-box.reveal, #newsletter .js-motion .reveal.cta-box { opacity: 1 !important; }
.js-motion .cta-box.reveal.visible { opacity: 1; translate: none; }

@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js-motion .hero-copy > *, .js-motion .hero-fig,
.js-motion .page-hero h1, .js-motion .page-hero .sub, .js-motion .page-hero .lede {
  animation: rise-in .85s cubic-bezier(.22,.61,.36,1) both;
}
.js-motion .hero-copy > *:nth-child(1) { animation-delay: .05s; }
.js-motion .hero-copy > *:nth-child(2) { animation-delay: .12s; }
.js-motion .hero-copy > *:nth-child(3) { animation-delay: .19s; }
.js-motion .hero-copy > *:nth-child(4) { animation-delay: .27s; }
.js-motion .hero-copy > *:nth-child(5) { animation-delay: .35s; }
.js-motion .hero-copy > *:nth-child(6) { animation-delay: .42s; }
.js-motion .hero-fig { animation-delay: .2s; }
.js-motion .page-hero h1 { animation-delay: .05s; }
.js-motion .page-hero .sub { animation-delay: .16s; }
.js-motion .page-hero .lede { animation-delay: .26s; }

.js-motion .band-tagline .tagline-big::before { width: 0; transition: width .9s cubic-bezier(.22,.61,.36,1) .15s; }
.js-motion .band-tagline .tagline-big.visible::before { width: 42px; }

.card-link .go::after { transition: transform .32s cubic-bezier(.22,.61,.36,1); }

.sitenav a, .lang-alt, .foot-nav a, .cta-box a, .nav a, .mnav a,
.prose a, .aside a, .card p a, .card-link .go, .upcoming a { transition: color .2s ease, border-color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js-motion .reveal, .js-motion .reveal.visible { opacity: 1 !important; translate: none !important; }
  .js-motion .hero-copy > *, .js-motion .hero-fig, .js-motion .page-hero h1, .js-motion .page-hero .sub, .js-motion .page-hero .lede { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js-motion .band-tagline .tagline-big::before { width: 42px !important; }
}

/* ---------- Japanese text handling ---------- */
html[lang="ja"] .prose p, html[lang="ja"] .card p { line-break: strict; overflow-wrap: break-word; }
html[lang="ja"] .page-hero .lede { max-width: 24em; }
html[lang="ja"] .tagline-big { max-width: 16em; }
html[lang="ja"] .hero-role { line-height: 2.1; }

/* ---------- Site width tweaks for content-only pages ---------- */
main .band .wrap { position: relative; }