/* Safe BJJ
   ---------------------------------------------------------------------------
   The six doors are one surface, not six cards. Tatami interlock into a single
   mat divided by seams, and one object is calmer to face than six competing
   ones — which also happens to be the pattern people already know from grouped
   lists on a phone.

   Motion decreases with depth. The front page settles in once; the page where
   someone reads that it was not their fault does not move at all.

   Nothing is loaded from another origin. Both faces are served from this domain
   under the SIL Open Font License.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.7150c0ec.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/sourceserif4-latin.2a24bad4.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}

:root {
  --ground:    #e7ecec;
  --ground-2:  #eef1f1;
  --surface:   #ffffff;
  --surface-2: #f3f7f6;
  --seam:      #e6ecec;
  --line:      #d8e0e0;
  --ink:       #101719;
  --ink-2:     #46545a;
  --ink-3:     #77868b;
  --accent:    #1d5c5a;
  --accent-2:  #2a7a76;
  --accent-in: #ffffff;
  --accent-wash: #e7f0ef;
  --warm:      #9c5f22;
  --warm-bg:   #fbf0e2;
  --warm-line: #f0dcc4;

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;

  --measure: 36rem;
  --pad: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  --r-lg: 18px;
  --r: 12px;
  --r-sm: 9px;

  --shadow: 0 1px 2px rgba(16,24,26,.04), 0 10px 30px -10px rgba(16,24,26,.10);
  --shadow-lift: 0 2px 4px rgba(16,24,26,.05), 0 18px 40px -12px rgba(16,24,26,.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #0d1113;
    --ground-2:  #101618;
    --surface:   #161d20;
    --surface-2: #1b2427;
    --seam:      #222c30;
    --line:      #2a3539;
    --ink:       #e9eeee;
    --ink-2:     #a4b1b4;
    --ink-3:     #78878b;
    --accent:    #6fb6b0;
    --accent-2:  #8ccbc5;
    --accent-in: #0d1113;
    --accent-wash: #16292a;
    --warm:      #dcaa71;
    --warm-bg:   #2a2117;
    --warm-line: #3b2e1f;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px -12px rgba(0,0,0,.7);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.09rem, 1.03rem + 0.3vw, 1.24rem);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  background: var(--ground);
  background-image: linear-gradient(180deg, var(--ground-2) 0%, var(--ground) 32rem);
  background-attachment: fixed;
}

/* ── the bar ─────────────────────────────────────────────────────────────── */

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: .7rem 1.1rem; z-index: 20; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
}
.skip:focus { left: var(--pad); top: .7rem; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--pad);
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700; font-size: .95rem; letter-spacing: .11em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
}

.bar-actions { display: flex; align-items: center; gap: .5rem; }

/* The one warm thing on the page is the route to help. */
.support {
  font-family: var(--display); font-size: .875rem; font-weight: 600;
  letter-spacing: .005em; text-decoration: none;
  color: var(--warm); background: var(--warm-bg);
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--warm-line);
  transition: transform .14s ease, box-shadow .14s ease;
}
.support:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.exit {
  font-family: var(--display); font-size: .875rem; font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line);
  padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
  transition: color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.exit:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }

/* ── front page ──────────────────────────────────────────────────────────── */

main { padding: 0 var(--pad); max-width: 48rem; margin-inline: auto; }

.hero { margin: clamp(3rem, 1.5rem + 7vw, 6rem) 0 clamp(1.75rem, 1rem + 3vw, 3rem); }

.stem {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.25rem + 4.2vw, 3.9rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 .85rem; text-wrap: balance;
}

.substem {
  margin: 0; color: var(--ink-2);
  font-size: clamp(1.09rem, 1rem + .45vw, 1.3rem);
  line-height: 1.5; max-width: 32rem; text-wrap: pretty;
}

/* One mat. The rows are seams in a single surface, not separate cards. */
.doors {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

.door {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(1.1rem, .85rem + 1vw, 1.5rem) clamp(1.1rem, .85rem + 1vw, 1.6rem);
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--seam);
  transition: background .16s ease;
}
.door:last-child { border-bottom: 0; }
.door:hover { background: var(--surface-2); }
.door:active { background: var(--accent-wash); }

.door-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.door-label {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + .75vw, 1.45rem);
  font-weight: 650; line-height: 1.22; letter-spacing: -.018em;
  text-wrap: balance;
}
.door-blurb { color: var(--ink-2); font-size: .95rem; line-height: 1.45; }

.door-go {
  flex: none; margin-left: auto; color: var(--ink-3);
  transition: transform .18s cubic-bezier(.3,.7,.4,1), color .18s ease;
}
.door:hover .door-go { transform: translateX(3px); color: var(--accent); }

.home-after { margin-bottom: 3.5rem; }

/* ── long-form pages ─────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); margin: clamp(2.5rem, 1.5rem + 4vw, 4rem) auto 3.5rem; }

.prose-head { margin-bottom: 2.25rem; }

.kicker {
  font-family: var(--display); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .8rem;
}

.prose h1 {
  font-family: var(--display);
  font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.028em;
  margin: 0 0 .9rem; text-wrap: balance;
}

.standfirst {
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.35rem);
  line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty;
}

.prose h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.2rem + .55vw, 1.6rem);
  font-weight: 650; line-height: 1.25; letter-spacing: -.018em;
  margin: 3rem 0 .75rem; scroll-margin-top: 5.5rem;
}
.prose h3 {
  font-family: var(--display); font-size: 1.12rem; font-weight: 650;
  letter-spacing: -.01em; margin: 2rem 0 .5rem; scroll-margin-top: 5.5rem;
}

.prose p { margin: 0 0 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .6rem; }
.prose li::marker { color: var(--ink-3); }

.prose a {
  color: var(--accent); text-underline-offset: .2em;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.prose a:hover { color: var(--accent-2); text-decoration-color: currentColor; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

blockquote {
  margin: 1.75rem 0; padding: 1.1rem 1.3rem;
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow);
  color: var(--ink-2); font-size: 1.02rem;
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em;
  background: var(--surface-2); padding: .12em .4em; border-radius: 5px;
}

kbd {
  font-family: var(--display); font-size: .82em; font-weight: 600;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; padding: .12em .45em; background: var(--surface);
}

/* ── content blocks ──────────────────────────────────────────────────────── */

/* A choice you may use, never a gate you must pass. */
.choices {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 1.3rem 1.4rem; margin: 0 0 2.75rem;
}
.choices-label {
  font-family: var(--display); font-size: 1rem; font-weight: 650;
  margin: 0 0 .85rem; color: var(--ink);
}
.choices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.choices li { margin: 0; }
.choices a {
  display: block; padding: .55rem .7rem; margin: 0 -.7rem;
  color: var(--accent); text-decoration: none; border-radius: var(--r-sm);
  font-size: 1.02rem;
  transition: background .14s ease;
}
.choices a:hover { background: var(--accent-wash); }

.note {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.35rem; margin: 2rem 0;
  color: var(--ink-2); font-size: 1.01rem;
}
.note p:last-child { margin-bottom: 0; }

.split {
  border-radius: var(--r); padding: 1.3rem 1.45rem; margin: 1.75rem 0;
  background: var(--surface); box-shadow: var(--shadow);
}
.split-label {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 .85rem;
  display: flex; align-items: center; gap: .5rem;
}
.split-label::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: currentColor;
}
.split-do .split-label { color: var(--accent); }
.split-dont .split-label { color: var(--warm); }
.split p:last-child, .split ul:last-child { margin-bottom: 0; }
.split ul { padding-left: 1.2rem; }

/* Unwritten content is shown, never hidden — a half-finished page must not be
   able to read as a finished one. */
.pending {
  border: 1px dashed var(--line);
  border-radius: var(--r); padding: 1.15rem 1.35rem; margin: 1.75rem 0;
  color: var(--ink-3); font-size: .98rem; background: transparent;
}
.pending-label {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .55rem;
}
.pending p:last-child { margin-bottom: 0; }

/* ── sideways links ──────────────────────────────────────────────────────── */

.sideways { max-width: var(--measure); margin: 0 auto 4.5rem; }
.sideways-label { font-size: 1rem; color: var(--ink-2); margin: 0 0 1rem; }
.sideways ul {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.sideways li { margin: 0; border-bottom: 1px solid var(--seam); }
.sideways li:last-child { border-bottom: 0; }
.sideways a {
  display: block; padding: .85rem 1.2rem;
  font-family: var(--display); font-size: 1rem; font-weight: 550;
  color: var(--ink); text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.sideways a:hover { background: var(--surface-2); color: var(--accent); }

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot {
  max-width: 48rem; margin-inline: auto;
  padding: 2.5rem var(--pad) 4rem;
  color: var(--ink-3); font-size: .95rem;
  border-top: 1px solid var(--line);
}
.foot-what { max-width: var(--measure); margin: 0 0 1.25rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 1.25rem; }
.foot-nav a {
  color: var(--ink-2); text-decoration: none;
  font-family: var(--display); font-size: .9rem; font-weight: 500;
}
.foot-nav a:hover { color: var(--ink); }
.foot-exit { margin: 0; }

/* ── focus, always visible ───────────────────────────────────────────────── */

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── motion: only on the front page, and only once ───────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .is-home .doors { animation: settle .5s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: 80ms; }
  .is-home .hero { animation: settle .5s cubic-bezier(.2,.7,.3,1) backwards; }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

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

/* ── the one form on the site ────────────────────────────────────────────── */

.form { max-width: var(--measure); margin: 2.25rem auto 0; }
.form-intro { color: var(--ink-2); font-size: 1.01rem; margin-bottom: 1.75rem; }

.field { margin-bottom: 1.4rem; }
.field-row { display: grid; gap: 1.4rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block; font-family: var(--display); font-size: .9rem;
  font-weight: 600; margin-bottom: .45rem;
}

.field input[type="text"], .field input[type="email"], .field input[type="url"] {
  width: 100%; font-family: var(--body); font-size: 1.02rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .75rem .9rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field input:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.hint { font-size: .9rem; color: var(--ink-3); margin: .45rem 0 0; }

.check label {
  display: flex; gap: .7rem; align-items: flex-start; font-weight: 400;
  font-family: var(--body); font-size: 1.02rem;
}
.check input { margin-top: .4rem; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

/* Not display:none — some bots skip anything hidden that way. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit {
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  color: var(--accent-in); background: var(--accent);
  border: 0; border-radius: 999px;
  padding: .8rem 1.7rem; cursor: pointer; margin-top: .6rem;
  box-shadow: var(--shadow);
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.submit:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.submit:active { transform: translateY(0); }

.form-foot { font-size: .95rem; color: var(--ink-3); margin-top: 1.4rem; }

/* ── print: the one-pagers gyms put on a noticeboard ─────────────────────── */

@media print {
  .bar, .foot, .sideways, .choices { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .note, .split, .pending, blockquote { border: 1px solid #999; box-shadow: none; }
}

/* ── images ──────────────────────────────────────────────────────────────── */
/* Aspect is fixed in CSS rather than read from the file, so a page never shifts
   while an image loads — someone reading this on a slow connection should not
   have the paragraph they are on jump down the screen. */

.banner { aspect-ratio: 16 / 6; border-radius: var(--r); overflow: hidden;
          box-shadow: var(--shadow); margin: 0 0 2.5rem; }

.fig { margin: 2.5rem 0; display: flex; flex-direction: column; }
.fig-wide   { aspect-ratio: 16 / 6; }
.fig-square { aspect-ratio: 4 / 3; }
.fig-tall   { aspect-ratio: 3 / 4; max-width: 22rem; }

.banner img, .fig img {
  display: block; width: 100%; height: 100%; min-height: 0; flex: 1;
  object-fit: cover; border-radius: var(--r);
  background: var(--surface-2);
}
.fig img { box-shadow: var(--shadow); }

.fig figcaption {
  flex: none;
  font-family: var(--display); font-size: .85rem; color: var(--ink-3);
  margin-top: .75rem; line-height: 1.4;
}

/* A bright photograph against a dark page glares. Take the edge off here rather
   than asking for two sets of images. */
@media (prefers-color-scheme: dark) {
  .banner img, .fig img { filter: brightness(.82) saturate(.92); }
}

@media print { .banner, .fig { display: none; } }

/* ── myths ───────────────────────────────────────────────────────────────── */
/* Fourteen claims you can read in twenty seconds, each with the answer one tap
   away. Only on the understand-more page — nothing anybody urgently needs is
   ever placed behind a disclosure. */

.myth {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow); margin-bottom: .6rem;
  overflow: hidden;
}

.myth summary {
  list-style: none; cursor: pointer;
  padding: 1rem 1.2rem; display: flex; align-items: flex-start; gap: .85rem;
  font-family: var(--body);
  transition: background .14s ease;
}
.myth summary::-webkit-details-marker { display: none; }
.myth summary:hover { background: var(--surface-2); }

.myth summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: .45rem;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.3,.7,.4,1);
}
.myth[open] summary::after { transform: rotate(-135deg); margin-top: .75rem; }

.myth-claim { color: var(--ink-2); font-size: 1.04rem; line-height: 1.45; }

.myth-body {
  padding: 0 1.2rem 1.2rem;
  border-top: 1px solid var(--seam);
  padding-top: 1rem; margin-top: 0;
}
.myth-body p:last-child { margin-bottom: 0; }
.myth-body p { font-size: 1.01rem; }

.myths-lead { margin-bottom: 1.25rem; }

@media print {
  .myth { box-shadow: none; border: 1px solid #999; }
  .myth summary::after { display: none; }
  /* A printed noticeboard copy must not have half its content collapsed. */
  .myth:not([open]) > *:not(summary) { display: block !important; }
}

/* ── the closing band ────────────────────────────────────────────────────── */
/* Full width, below the doors. The front page otherwise ends on a small note and
   a rule, which reads as the page having been cut off rather than finished. */

.wash {
  position: absolute; inset: 0 0 auto; height: clamp(19rem, 46vh, 30rem); z-index: -1;
  overflow: hidden; pointer-events: none;
}
.wash img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: .10;
  /* Fade out well above the doors so nothing sits behind the thing being read. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}
@media (prefers-color-scheme: dark) { .wash img { opacity: .16; } }
@media print { .wash { display: none; } }

/* ── the logo mark, when there is one ────────────────────────────────────── */

.wordmark { display: inline-flex; align-items: center; gap: .55rem; }
.mark { display: block; width: 32px; height: 32px; border-radius: 6px; }

/* ── portrait ────────────────────────────────────────────────────────────── */

.portrait { margin: 1.5rem 0 1rem; width: 5.5rem; }
.portrait img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; box-shadow: var(--shadow);
}
@media (min-width: 44rem) {
  .portrait { float: right; margin: 2.25rem 0 1rem 1.75rem; width: 7rem; }
}
/* The heading that follows a floated portrait must not clear it. */
.portrait + h2 { margin-top: 2.5rem; }
@media (prefers-color-scheme: dark) { .portrait img { filter: brightness(.92); } }

.more .myth-claim { color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.05rem; }

/* ── posters ─────────────────────────────────────────────────────────────── */
.poster { display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; align-items: start;
          background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
          padding: 1.2rem; margin: 1.25rem 0; }
.poster-img img { display: block; width: 100%; height: auto; border-radius: 6px;
                  border: 1px solid var(--line); }
.poster-text h3 { margin: .2rem 0 .5rem; }
.poster-text p { font-size: 1rem; }
.poster-dl { display: inline-block; margin-top: .4rem; font-family: var(--display); font-weight: 600;
             font-size: .95rem; color: var(--accent-in); background: var(--accent); text-decoration: none;
             padding: .55rem 1.1rem; border-radius: 999px; }
.prose .poster-dl { color: var(--accent-in); }
.poster-dl:hover { background: var(--accent-2); }
@media (max-width: 30rem) { .poster { grid-template-columns: 6.5rem 1fr; gap: 1rem; } }