/* Selected Lora composition and motion, with a more pronounced serif italic. */
:root{--acid:#d9f76a;--acid-hover:#e5fa96}
.hero .button:hover{background:var(--acid-hover);border-color:var(--acid-hover)}
body[data-lang="en"] .week p,body[data-lang="en"] .method p{text-wrap:pretty}
.breath-outer,.orbit-inner,.week,.week-no,.week::after{animation:none;will-change:auto}
.program .week .week-no{animation:none;will-change:auto}
.program .week{position:relative;background:var(--rule-dash) left bottom/100% 1px no-repeat}
.program .week:last-child{background:none;border-bottom:1px solid var(--rule-strong)}
.program .week::after{content:none}
.field{aspect-ratio:1.75;--diagram-play:paused}
.field.is-running{--diagram-play:running}
.field.is-restarting *{animation-name:none!important}
.field .node{background:transparent!important;box-shadow:none!important;text-shadow:none!important}
.field .node.self{padding:0;border:1px solid #8b9a52;line-height:1;letter-spacing:-.02em;font-weight:400}
.hero h1 em{letter-spacing:-.025em;font-synthesis:none}
.field-row:first-of-type .node:nth-child(1){left:18%;top:3%}
.field-row:first-of-type .node:nth-child(2){left:50%;top:-3%}
.field-row:first-of-type .node:nth-child(3){left:82%;top:3%}
.field-row:last-child .node:nth-child(1){left:18%;top:97%}
.field-row:last-child .node:nth-child(2){left:50%;top:103%}
.field-row:last-child .node:nth-child(3){left:82%;top:97%}
.program{--row-enter-ms:700ms}
html.sequence-ready .week[data-step="pending"]{opacity:0}
html.sequence-ready .week[data-step="done"]{opacity:1;transform:none;clip-path:none}
html.sequence-ready .week[data-step="done"]>*{opacity:1;transform:none;clip-path:none}
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after{animation-play-state:paused!important}
html[data-motion="paused"] .week,html[data-motion="paused"] .week>*{opacity:1!important;transform:none!important;clip-path:none!important}
@media(max-width:600px){.field{aspect-ratio:1.65}.hero-card{padding-block:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.week,.week>*{opacity:1!important;transform:none!important;clip-path:none!important}}

@font-face {
  font-family: 'Self Serif';
  src: url('assets/SourceSerif4-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 350 400;
  font-display: swap;
}
/* A true drawn italic, without synthetic slanting or geometric distortion. */
.hero h1 em {
  font-family: 'Self Serif', Georgia, serif;
  font-style: italic;
  font-weight: 380;
  font-size: .98em;
  line-height: 1;
  letter-spacing: -.01em;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 48;
  font-synthesis: none;
  padding-right: .07em;
}
.field .node.self {
  font-family: 'Self Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 60px;
  letter-spacing: normal;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 36;
  padding:0 2px 3px 0;
  font-synthesis: none;
  transform: translate(-50%, -50%);
  animation: none;
}
/* The containing oval and Self stay still. Parts remain present within it. */
.orbits .space-outer {
  stroke: #8c9c70;
  stroke-width: 1;
  stroke-dasharray: none;
  opacity: 1;
  transform: none;
  animation: none;
}
.space-inner {
  transform-box: view-box;
  transform-origin: 320px 180px;
  animation: lora-breathing-room 7.6s cubic-bezier(.4, 0, .6, 1) infinite;
  animation-play-state: var(--diagram-play, paused);
}
.orbits .space-contour {
  stroke: #8f9f6b;
  stroke-width: 1;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
}
.orbits .space-part { fill: #bdce83; stroke: none; }
@keyframes lora-breathing-room {
  0%, 100% { transform: scale(.92); }
  43%, 57% { transform: scale(1.04); }
}
/* The shared queue reveals one complete row at a time. */
.program { --row-enter-ms: 1150ms; }
html.sequence-ready .week[data-step='pending'] {
  opacity: 0;
  clip-path: none;
  transform: none;
}
html.sequence-ready .week[data-step='entering'] {
  transform: none;
  animation: lora-row-fade var(--row-enter-ms) cubic-bezier(.37, 0, .32, 1) both;
}
.program .week > * { animation: none; }
.program .week .week-no { animation: none; }
html.sequence-ready .program .week[data-step='entering'] > * {
  /* A feathered edge replaces the hard cut through the letters. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 65%,transparent 100%);
  -webkit-mask-size:100% 300%;
  mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation: lora-row-unfold var(--row-enter-ms) cubic-bezier(.37, 0, .32, 1) both;
}
@keyframes lora-row-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lora-row-unfold {
  from { -webkit-mask-position:0 100%;mask-position:0 100%; }
  to { -webkit-mask-position:0 0%;mask-position:0 0%; }
}
@media (max-width: 1150px) {
  .field .node.self { font-size: 54px; }
}
@media (max-width: 600px) {
  .hero h1 em { font-size: 1em; }
  .field .node.self {
    width: clamp(80px, 24vw, 110px);
    height: clamp(80px, 24vw, 110px);
    font-size: clamp(34px, 10.2vw, 45px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .space-inner { animation: none !important; transform: none !important; }
  html.sequence-ready .week[data-step] { animation: none !important; opacity: 1; transform: none; clip-path: none; }
  html.sequence-ready .week[data-step] > * { -webkit-mask-image:none!important;mask-image:none!important; }
}
