/* No `display` on <details> itself: modern browsers hide the content through
   ::details-content, and overriding display there is brittle. The vertical
   rhythm comes from the paragraph margins below instead. */
.more > summary{
  display: flex; align-items: center; gap: 10px;
  width: fit-content;
  min-height: 44px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-200);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermilion);
  cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker{ display: none; }
.more > summary:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: 4px; }

/* The label swaps without JS — two spans and one [open] rule. */
.more[open] .more-open,
.more:not([open]) .more-close{ display: none; }

.more > summary::after{
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}
.more[open] > summary::after{ transform: translateY(1px) rotate(-135deg); }

/* Must equal the PARENT's grid gap, copied from .prose below, or a double gap
   opens between paragraphs one and two. Change one, change the other. */
.prose .more > p{ margin-top: clamp(20px, 2.6vw, 30px); }

@media (min-width: 760px){
  .more > summary{ display: none; }
  .more > p:first-of-type{ margin-top: 0; }
}

/* Fades on all four edges, unlike the photo bands: those span the window, so
   their sides are the screen edges, while the portrait sits in a column and
   would show two hard vertical lines. Browsers without mask-composite get a
   plain crop. `position: relative` is load-bearing — ::after below uses
   inset: 0 and would otherwise latch onto the whole section, dimming the
   biography text next to it. */
.portrait{
  position: relative;
  aspect-ratio: 3 / 4;   /* the file is 1416×1888, so nothing is cropped */
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 72%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.portrait img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Tonal fade on top of the alpha mask: without it the bright ukemi stays
   visible to the very bottom, next to the biography copy. */
.portrait::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--paper-rgb) / 0) 46%,
    rgb(var(--paper-rgb) / .55) 82%,
    var(--paper) 100%);
}

.prose{ display: grid; gap: clamp(20px, 2.6vw, 30px); align-content: start; }
.prose p{ color: var(--ink-soft); line-height: var(--lh-base); max-width: 62ch; text-wrap: pretty; }

.facts{ display: grid; margin-top: clamp(4px, 1vw, 12px); }
.fact{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.fact dt{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-200);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fact dd{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-400);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
}

/* The one section whose .sec-head sits inside .split, so the map lands next to
   the address instead of under the copy — hence the zeroed margin. */
.dojo-intro{
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-content: start;
}
.dojo-intro .sec-head{ margin-bottom: 0; }

/* justify-items keeps the button at its own width instead of stretching it to
   the width of the map. */
.dojo-aside{
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  justify-items: start;
}

/* A baked tile render (assets/mapa-dojo.webp), never an iframe — the site has
   zero external origins. The dark tone is baked into the file rather than
   applied as a filter, which would cost a repaint over half a megapixel. */
.map{
  display: grid;
  gap: 10px;
  width: 100%;
}
/* `height: auto` is mandatory: the reset in 03-base.css only gives images
   max-width: 100%, so the width/height attributes (needed against CLS) would
   squash the crop at any width below 1440px. */
.map img{
  width: 100%; height: auto;
  border: 1px solid var(--rule);
}
/* ODbL (OSM data) and CARTO (tiles) attribution — required by the licence, not
   decoration. Do not remove while the map is on the page. Deliberately not
   .link: the underline alone carries "this is a link" (WCAG 2.2 SC 1.4.1). */
.map-credit{
  font-size: var(--fs-100);
  line-height: var(--lh-snug);
  color: var(--ink-faint);
}
.map-credit a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s ease;
}
.map-credit a:hover{ color: var(--ink-soft); }
.map-credit a:focus-visible{ outline: 2px solid var(--vermilion); outline-offset: 3px; }

/* --lime / --on-lime are constant in both palettes. */
.contact{
  background: var(--lime);
  color: var(--on-lime);
  padding: clamp(32px, 5vw, 68px);
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}
.eyebrow--on-lime{ color: var(--on-lime); }
.eyebrow--on-lime::after{ background: var(--on-lime); }
.contact .sec-title{ color: var(--on-lime); max-width: 24ch; }

.contact-links{
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(16px, 4vw, 52px);
}
/* On flat lime a link cannot differ by colour, so the underline is the only
   carrier of "this is a link" (WCAG 2.2 SC 1.4.1). */
.contact-links a{
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-400);
  letter-spacing: .06em;
  color: var(--on-lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: opacity .2s ease;
}
.contact-links a:hover{ opacity: .62; }
.contact-links a:focus-visible{ outline: 2px solid var(--on-lime); outline-offset: 4px; }
.contact-phone{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.contact-note{ max-width: 58ch; line-height: var(--lh-base); text-wrap: pretty; }

.foot{ padding-bottom: clamp(32px, 4vw, 48px); }
.foot-inner{
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-200);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot-brand{ display: flex; align-items: baseline; gap: 10px; }
.foot-kanji{
  font-family: var(--font-brush);
  font-size: var(--fs-400);
  letter-spacing: 0;
  text-transform: none;
  color: var(--vermilion);
}

@media (min-width: 760px){
  .portrait{ position: sticky; top: calc(var(--topbar-h) + 24px); }
}