/* ============================================================================
   nōesi · wordpress.css

   The ONLY stylesheet in this theme that is not the designer's own work.

   noesis.css and motion.css are the static site's files byte for byte, so they
   can be re-exported from the design build and dropped straight back in. Every
   rule that exists only because this is now WordPress lives here instead:
   the form's result message, the body copy of a page written in the editor,
   and getting out of the way of the admin bar.

   Keep it that way. Nothing decorative belongs in this file.
   ========================================================================== */

/* ---- the contact form's answer ------------------------------------------
   The static form opened a mail client and said nothing afterwards. A form
   that posts has to report what happened, and it reports it in the same ruled
   language as the rest of the page: a rule down the left, no coloured panel,
   no icon. */
.form-result{
  margin:0 0 var(--s4);
  padding:.85rem 0 .85rem 1rem;
  border-left:2px solid var(--rule-strong);
  font-size:var(--t-small);
  line-height:1.65;
  color:var(--ink);
}
.form-result[data-state="sent"]{border-left-color:var(--accent)}
.form-result[data-state="fail"]{border-left-color:var(--ink-mute)}

/* ---- a page written in the editor ---------------------------------------
   The six chapters are templates and set their own type. Anything else is
   whatever the owner typed, so it gets the reading column and the site's own
   rhythm rather than the browser's. */
.page-prose > * + *{margin-top:var(--s3)}
.page-prose h2{
  font-family:var(--font-display);
  font-weight:200;
  font-size:var(--t-h2);
  line-height:1.1;
  margin-top:var(--s5);
}
.page-prose h3{
  font-size:var(--t-body);
  letter-spacing:.02em;
  color:var(--ink);
  margin-top:var(--s4);
}
.page-prose ul,
.page-prose ol{padding-left:1.4em}
.page-prose li + li{margin-top:.5em}
.page-prose a{border-bottom:1px solid var(--rule-strong)}
.page-prose a:hover{border-bottom-color:var(--accent)}
.page-prose img{height:auto;margin:var(--s4) 0}
.page-prose blockquote{
  border-left:2px solid var(--accent);
  padding-left:1.2rem;
  color:var(--ink-mute);
}

/* ---- a teacher's additional information ----------------------------------
   Whatever the owner decides each teacher's card should say, as ruled rows of
   label and value: the same pattern the contact page uses for the opening
   hours and the footer for its columns.

   Ruled rows rather than a run of capitals, which is what this was first. The
   card already carries an uppercase letterspaced line — the discipline — and a
   second one competes with it instead of ranking under it. In the text face
   and in sentence case, this reads as reference and the discipline keeps its
   job.

   The block is pinned to the FOOT of the card. The bios are different lengths,
   so anywhere else it lands on a different horizontal on every card and the
   row reads as misaligned, which is the same problem the two-line minimum on
   the name already solves further up.

   The portrait stops shrinking for the same reason the block can be pinned: in
   a flex column an item with an aspect-ratio gives up height to its siblings
   unless told not to. */
.guide{
  display:flex;
  flex-direction:column;
}
.guide .portrait{flex:none}
.guide .creds{
  margin-top:auto;
  padding-top:var(--s2);
  /* Two rows whether a teacher has two or one, so the block's top rule lands
     on the same horizontal across the row of cards — the same reservation
     trick as .guide h3's two lines for the name, and for the same reason.
     A teacher given THREE rows will push their own top rule up; the bottom
     rule still aligns everywhere. Widen this to 9.5rem if three rows becomes
     the normal case. */
  min-height:6.4rem;
}
.guide .creds .pair{
  display:flex;
  justify-content:space-between;
  gap:var(--s2);
  padding:.35rem 0;
  border-bottom:1px solid var(--rule);
  font-size:var(--t-small);
  line-height:1.45;
}
.guide .creds .pair:first-child{border-top:1px solid var(--rule)}
.guide .creds dt{color:var(--ink-mute)}
.guide .creds dd{
  color:var(--ink);
  text-align:right;
  /* so 14 and 9 line up under each other rather than drifting */
  font-variant-numeric:tabular-nums;
}

/* ---- the discipline line reserves two lines ------------------------------
   The same reservation `.guide h3` already makes for the name, for exactly the
   same reason, and it became necessary the moment the teachers stopped being
   placeholders. «ΠΡΟΠΟΝΗΤΗΣ · YOGA TEACHER · RANGE+» wraps where «YOGA ·
   AERIAL · KIDS YOGA · PILATES» does not, so one card's bio started twenty
   pixels below its neighbour's and the row lost the shared horizontals the
   whole card is built around.

   Two lines whether they are needed or not. A third will push that card's own
   bio down, and the information block at the foot still aligns everywhere,
   because that is pinned with margin-top:auto.

   `line-height` is set here rather than inherited: the rule in noesis.css does
   not declare one, so the reservation would otherwise be computed against
   whatever the body happened to be using. */
.guide .disc{
  line-height:1.45;
  min-height:calc(var(--t-micro) * 1.45 * 2);
}

/* ---- a teacher's full story ----------------------------------------------
   The card carries a sentence. The biography behind it runs to several hundred
   words, and there is nowhere in a 34ch card in a horizontal drag rail to put
   that without wrecking both the card and the row it lines up with. So the
   card offers, and the biography opens in the reading panel over the page —
   the same panel, and the same offer, as a Δράση's article on V.

   It used to open UNDERNEATH the rail instead, which pushed the page down by
   six hundred words: the row of cards you were reading jumped up the screen,
   the wandering route had to be redrawn against a document that had just
   changed height, and closing it threw everything back again. A panel changes
   nothing underneath it.

   The line itself is .read-more, in panel.css, so the two pages cannot drift
   apart. What is here is only where it sits on this particular card. */
.guide-more{
  /* pinned to the foot of the card, under the credentials, so the row of
     cards keeps the shared baseline the whole layout is built on */
  margin-top:var(--s3);
}

/* The biography as it is printed in the page: the panel copies it from here,
   and with no JavaScript the <noscript> rule in template-team.php shows it
   where it stands. Hidden rather than `hidden`: the attribute would take it
   out of reach of a stylesheet that wants to give it back. */
.guide-story{
  display:none;
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--rule-strong);
  /* the reading column, not the card's width */
  max-width:62ch;
}
.guide-story h3{
  font-family:var(--font-display);
  font-weight:300;
  font-size:var(--t-title);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:var(--s3);
}
.guide-story p{
  font-size:var(--t-body);
  line-height:1.75;
  color:var(--ink);
}
.guide-story p + p{margin-top:var(--s3)}

/* ---- the testimonials, as a strip you drag --------------------------------
   The same mechanic as the teacher rail. A studio collecting testimonials from
   named athletes ends up with more than three, and a grid of eight panels is a
   wall.

   `.voices` is a grid in the design CSS and `.rail` is a flex row; both are one
   class deep, so the grid wins on source order alone. Two classes here take it
   back deliberately rather than by accident.

   flex-grow is 1 on purpose: with two or three testimonials the panels spread
   to fill the width and it reads as a row, and only once they no longer fit
   does it become something to drag. A strip that is half empty reads as a
   broken carousel. */
.voices.rail{
  display:flex;
  grid-template-columns:none;
}
.voices.rail .voice{
  flex:1 0 clamp(15rem,26vw,21rem);
  scroll-snap-align:start;
}
/* The hint is hidden until the script confirms there is somewhere to drag to,
   so it can never invite a swipe that does nothing. */
.rail-hint[data-rail-hint]{display:none}
.rail-hint[data-rail-hint][data-overflow="true"]{display:block}

/* ---- a testimonial's portrait --------------------------------------------
   The quotes on the home page are named athletes now, not anonymous Google
   reviews, so the person is part of the evidence and their face belongs in the
   panel.

   It sits in the figcaption beside the name rather than above the quote: the
   quote is what you read first, and a photograph at the top of the panel would
   be read before it. Small, square, and in the same plate language as the
   teacher portraits — no circular avatars, which the rest of this site does not
   have and which would read as a template.

   The figcaption was `align-items:baseline` for a name and a date on one line.
   With a portrait and a two-line identity beside it, centre is what lines up. */
.voice figcaption{
  align-items:center;
  gap:var(--s3);
}
/* One place to change the portrait's size and shape.

   TALL, not square, and this is the whole point of it. A 52px square — which
   is what this was first — is the visual language of user-review avatars, so
   it made a named athlete look like an anonymous Google reviewer, which is
   exactly what this block exists to be better than. 3:4 is the site's own
   portrait shape, the one the teacher cards use.

   It is also far more forgiving of the source material: athlete photographs
   arrive as action shots and awkward crops, and a small square of one is mush
   where a plate holds a head and shoulders.

   Still small enough to stay subordinate to the quote, so the block reads as
   words with attribution rather than as a row of faces — which matters because
   these panels sit directly under the nine-plate gallery. */
:root{
  --voice-portrait-w:72px;
  --voice-portrait-h:96px;
}
.voice-portrait{
  flex:none;
  width:var(--voice-portrait-w);
  height:var(--voice-portrait-h);
  overflow:hidden;
  background:var(--plate-bg);
}
.voice-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.voice-id{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
/* On a phone the panel is about 280px wide, and at the desktop size the
   portrait and the gap left the name only ~106px — enough to wrap an athlete's
   surname onto its own line and their sport onto two more. The plate gives
   back twelve pixels and the gap another sixteen, which is the difference
   between a name that breaks once and one that breaks three times. It stays
   3:4, so it is still a portrait and not an avatar. */
@media (max-width:620px){
  :root{
    --voice-portrait-w:60px;
    --voice-portrait-h:80px;
  }
  .voice figcaption{gap:var(--s2)}
}

/* what they are known for: the sport, the title, the club. Same register as
   the teacher's discipline line, because it does the same job. */
.voice .role{
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  line-height:1.4;
}

/* ---- the admin bar -------------------------------------------------------
   Logged in, WordPress puts a 32px bar over the top of the page. The trail
   rail and the mobile top bar are both fixed to the top edge and would sit
   underneath it. */
body.admin-bar .trail{top:32px}
body.admin-bar .topbar{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .trail{top:46px}
  body.admin-bar .topbar{top:46px}
}

/* ---- a day of the timetable that is not being looked at ------------------
   The rows for all seven days are in the HTML, so the timetable is readable
   by a crawler and by anyone whose JavaScript never arrives. `hidden` is what
   takes the other six out, and it has to beat the row's own display.

   Every season the month strip reaches is in the page too, so a row now hides
   for two reasons rather than one: its day is not the day, or its season is
   not the season. The rule is the same either way. */
.ledger .row[hidden],
.ledger .ledger-empty[hidden]{display:none}

/* ---- the months ----------------------------------------------------------
   A studio's timetable holds for a season and then changes, so above the seven
   days there is now a row of months, and every one of them is a timetable.

   It is deliberately NOT a second set of day tabs. Two identical strips
   stacked read as one control that has been split in half, and a visitor has
   to work out which is which before either can be used. So the two levels take
   the two marks this site already has for "you are here": the days keep the
   accent RULE they have always had, and the months take the accent DOT, which
   is what the trail rail marks the chapter you are reading with. Same
   vocabulary, two ranks, no new visual language invented for it.

   The months are quieter than the days on purpose. The day is what a visitor
   changes constantly; the month is what they change once, if ever. */
.months{
  display:flex;
  gap:var(--s3);
  align-items:baseline;
  margin-bottom:var(--s3);
  /* Twelve months do not fit a phone and will not be made to. It scrolls, and
     it scrolls without a scrollbar sitting under a hairline layout. */
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.months::-webkit-scrollbar{display:none}
.month-btn{
  position:relative;
  flex:none;
  scroll-snap-align:start;
  padding:.2rem 0 .2rem .85rem;
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-mute);
  opacity:.75;
  white-space:nowrap;
  transition:color .3s ease,opacity .3s ease;
}
.month-btn:hover{color:var(--ink);opacity:1}
/* the bead. 5px is the trail rail's own milestone, and it sits on the type's
   own baseline-ish centre rather than the line box, which drifts with the
   letterspacing. */
.month-btn::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  border:1px solid var(--rule-strong);
  background:transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
.month-btn[aria-current="true"]{color:var(--ink);opacity:1}
.month-btn[aria-current="true"]::before{
  background:var(--accent);
  border-color:var(--accent);
}
/* On a phone the strip is the thing you drag, so the gap tightens rather than
   the labels shrinking: these are already at the smallest size on the site. */
@media (max-width:560px){
  .months{gap:var(--s2)}
}

/* ---- what season this is -------------------------------------------------
   The name of the timetable being read, whether it has ended, and the days it
   closes. It prints under the strip, above the days, because it qualifies the
   month and not the week.

   The past-season sentence is the important half and is why an archive is safe
   to publish: an old timetable looks exactly like a live one, so it says in
   words that it is not. */
.season-note{
  margin:0 0 var(--s3);
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--ink-mute);
}
.season-note[hidden]{display:none}

/* ---- and whether it is the one running -----------------------------------
   The one thing in this section a visitor must not miss, so it does not join
   the season's name on the row above. It takes the rule-down-the-left the
   form's answer already uses, which is this site's way of saying "this is a
   message about state" without a coloured panel or an icon.

   The link matters as much as the sentence. The bead in the strip marks the
   month being READ, so nothing else on the page says which one is today's, and
   somebody five months into the archive would have to know the date to find
   their way out. */
.season-warn{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s2) var(--s3);
  margin:0 0 var(--s4);
  padding:.7rem 0 .7rem 1rem;
  border-left:2px solid var(--accent);
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--ink);
}
.season-warn[hidden]{display:none}
.season-now{
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .3s ease;
}
.season-now[hidden]{display:none}
.season-now:hover{border-bottom-color:var(--accent)}
/* the month it goes to, ranked under the invitation rather than beside it */
.season-now-m{
  margin-left:.5em;
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
}