/* Etive Pipers - shared public stylesheet.
   Every public page loaded an identical ~24K copy of this inline; it now
   downloads once and is cached. Page-specific rules stay in each page's
   own <style> block, which loads after this file so it still wins.
   Generated for v0.9.1.2 - edit here, not in the pages.

   BREAKPOINTS. v0.9.1.1 had fifteen ad-hoc widths (1180/980/920/880/860/820/
   760/720/700/680/640/620/560/460/420), which is why panels reflowed at
   different points on different pages. The scale is now:

       960px   wide tablet / small laptop
       880px   tablet - the main two-column-to-one switch
       760px   large phone / small tablet
       640px   phone
       600px   narrow phone

   Two strays remain (800, 720, 680) on single rules that need a browser to
   retune safely. Use the scale above for anything new.

   THE OTHER STYLESHEET, AND WHY THEY ARE NOT MERGED.
   The members area does not load this file. It has its own block, inline in
   ep-ui.php, of almost exactly the same size. Forty-four selector names appear
   in both - :root, body, .topbar, .wrap, .brand, .nav-links, .nav-toggle, the
   whole .mobile-menu set, .pagebg - and it is tempting to read that as
   duplication and pull them into a shared file.

   Do not. Only SEVEN of those forty-four have identical bodies (the * reset,
   input, option, and two mobile-menu-open rules). The other thirty-seven
   differ on purpose:

       .brand span    here Gloock 1.22rem      there Fredoka 600 1.12rem
       .nav-links a   here weight 600, plain   there weight 800, pill-shaped
       .wrap          here 24px padding        there 22px
       main           here display:block       there flex:1, 30px/70px

   This is the editorial public site; that is an app. Merging the two would
   flatten one into the other.

   What IS true is that both implement the same MECHANISM - a sticky bar, a
   full-screen mobile menu, a page background that fills the viewport - with
   different values. So a fix to the mechanism has to be made in both places.
   The iOS tab-bar fix was exactly that. When you change one of the selectors
   listed above, open ep-ui.php and decide about the other. There is a matching
   note there. */

html{background:var(--navy)}
:root{
    --navy:#000d29; --navy-deep:#020a1c; --ink:#131c31;
    --paper:#f6f7f9; --surface:#ffffff; --tint:#e9edf4;
    --red:#b91528; --red-deep:#96101f; --slate:#5a6379;
    --line:rgba(19,28,49,.13); --line-lt:rgba(246,247,249,.16);
    --r:6px; --maxw:1150px;
  }
:root{color-scheme:light}
input,select,textarea,option{color:var(--ink);background-color:var(--surface)}
input::placeholder,textarea::placeholder{color:#79839c;opacity:1}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--navy)}
body{font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--navy);color:var(--ink);
    line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.pagebg{background:var(--paper);min-height:100vh}
.disp{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;line-height:1.05;letter-spacing:-.008em}
.it{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400}
.hl{color:var(--red)}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:.75rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red)}
.sec-title{font-size:clamp(1.9rem,4.5vw,2.8rem);margin-top:14px}
/* That 14px is the gap under an eyebrow. Most section eyebrows were removed in
   v0.9.5 - they were labelling headings that already said what they were - and
   without one the margin is a stray indent above the first line of a section. */
.sec-title:first-child{margin-top:0}
.sec-sub{color:var(--slate);font-size:1.05rem;max-width:56ch;margin-top:14px}
/* A SECTION HEADING THAT FILLS ITS ROW.
   A title with its standfirst stacked underneath is fine on a light section,
   where the space around it reads as air. On the dark bands it does not: a
   1150px row with type in the left half and flat navy in the right reads as an
   element that failed to load. Side by side, the same two pieces read as one
   deliberate band. Stacks below 900px, exactly as it did before. */
.sechead{display:grid;grid-template-columns:1.02fr .98fr;gap:14px 56px;align-items:end}
.sechead > :first-child{min-width:0}
.sechead .sec-sub{margin-top:0;max-width:46ch}
@media(max-width:900px){.sechead{grid-template-columns:1fr;align-items:start}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:.96rem;
    padding:15px 28px;border-radius:var(--r);text-decoration:none;cursor:pointer;border:1.5px solid transparent;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(185,21,40,.22)}
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(185,21,40,.28)}
.btn-line{background:transparent;color:var(--ink);border-color:rgba(19,28,49,.45)}
.btn-line:hover{border-color:var(--ink);background:var(--surface);transform:translateY(-2px)}
/* .btn-line takes its colour from the surface it sits on, and it only knew
   about .on-dark. The closing CTA band and the quote band are just as dark but
   never carried that class, so the outline button there was --ink navy on navy
   - the "Fees & dates" button on the journey page was effectively invisible.
   The dark bands are named here rather than adding a class to eleven files. */
.on-dark .btn-line,.cta-band .btn-line,.quote-band .btn-line{color:var(--paper);border-color:rgba(246,247,249,.45)}
.on-dark .btn-line:hover,.cta-band .btn-line:hover,.quote-band .btn-line:hover{border-color:var(--paper);background:rgba(246,247,249,.10)}
.btn-sm{padding:11px 18px;font-size:.88rem}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.topbar{position:sticky;top:0;left:0;right:0;z-index:90;background:var(--navy);box-shadow:0 1px 0 var(--navy)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;min-width:0}
.brand img{width:40px;height:40px;border-radius:var(--r);flex-shrink:0}
.brand span{font-family:Gloock,Georgia,"Times New Roman",serif;font-size:1.22rem;white-space:nowrap;line-height:1}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:rgba(246,247,249,.78);text-decoration:none;font-weight:600;font-size:.92rem;transition:color .15s}
.nav-links a:hover{color:var(--paper)}
.nav-links a.cta{background:var(--red);color:#fff;padding:10px 19px;border-radius:var(--r)}
.nav-links a.cta:hover{background:var(--red-deep)}
/* MENU ICONS - one specification, shared with the members area and the coach
   dashboard (the matching block lives in ep-ui.php). They were 25x2.5px bars
   with 5px gaps here and 21x2.5px with 2.5px gaps there, so the same control
   was visibly a different icon depending which part of the site you were in.
   Both are now 22px bars, 4px gaps, in a 44px tap target. Change one, change
   the other. */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0;margin-right:-8px;
    width:44px;height:44px;place-items:center;border-radius:12px}
.nav-toggle span{display:block;width:22px;height:2.5px;background:var(--paper);margin:4px 0;border-radius:2px}
.nav-toggle:active{background:rgba(246,247,249,.12)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--navy);z-index:100;padding:0 0 26px;flex-direction:column;overflow-x:hidden}
.mm-head{height:84px;padding:0 24px}
@media (display-mode: standalone){
    .topbar{padding-top:env(safe-area-inset-top)}
    .mobile-menu{padding-top:env(safe-area-inset-top)}
  }
.mobile-menu.open{display:flex}
/* The members menu was fixed in v0.9.1.9.3 and this one was not, so it still
   had both faults: a scrollbar claiming width when the eight items fit with
   room to spare, and a brand lockup that broke to two lines and left the logo
   clipped by the fixed 84px head. Same two fixes, applied here. */
.mm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
    height:auto;min-height:84px;padding:16px 24px;flex:0 0 auto}
.mobile-menu .brand{flex-direction:row;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.mobile-menu .brand img{flex:0 0 40px}
.mm-close{background:none;border:none;color:var(--paper);font-size:1.9rem;cursor:pointer;line-height:1;
    width:44px;height:44px;display:grid;place-items:center;border-radius:12px;padding:0;flex:0 0 auto}
.mm-close:active{background:rgba(246,247,249,.14)}
/* THE SCROLLBAR BESIDE THE OPEN MENU
   It was never the menu's own. The panel is position:fixed over the page, but
   the page underneath stayed scrollable, so its scrollbar sat there taking
   width and the whole document slid about behind the overlay while you were
   trying to tap a link.

   :has() lets the stylesheet lock the body from the panel's own state, so this
   is one rule here rather than an onclick edit in each of eleven page files -
   and bulk edits across many files are what caused three separate outages in
   this project. Browsers without :has() simply behave as they did before. */
body:has(.mobile-menu.open){overflow:hidden}
/* And if a menu ever does outgrow the screen, it scrolls itself, silently. */
.mobile-menu{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.mobile-menu::-webkit-scrollbar{width:0;height:0;display:none}
/* THE STACKING LOGO, PROPERLY THIS TIME.
   The brand lockup is an <a>, and this rule sets display:block on every <a> in
   the panel. ".mobile-menu a" is specificity (0,0,1,1) and ".brand" only
   (0,0,1,0), so display:block beat display:flex and the mark and the wordmark
   stacked - then the fixed head height clipped the mark. v0.9.2 tried to fix it
   with flex-direction, which does nothing to an element that is not a flex
   container. The rule is now scoped to the navigation links themselves, so it
   cannot reach the brand at all. */
.mobile-menu a:not(.brand){color:var(--paper);text-decoration:none;font-family:Gloock,Georgia,"Times New Roman",serif;font-size:1.6rem;
    padding:13px 24px;border-bottom:1px solid var(--line-lt);display:block}
.mobile-menu a:not(.brand):last-of-type{border-bottom:none}
.mobile-menu a:not(.brand):active,.mobile-menu a:not(.brand):hover{background:rgba(246,247,249,.09)}
.mobile-menu .brand{display:flex !important;align-items:center;gap:12px;padding:0;border-bottom:none;background:none}
@media(max-width:960px){.nav-links{display:none}.nav-toggle{display:grid}}
.hero{position:relative;background:var(--navy);color:var(--paper);padding:70px 0 96px;overflow:hidden}
.hero-cordbg{position:absolute;inset:0;pointer-events:none;opacity:.35}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(110% 85% at 84% 8%,rgba(185,21,40,.12),transparent 55%),
               radial-gradient(90% 80% at 6% 100%,rgba(0,0,0,.4),transparent 60%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.6vw,4.7rem);color:var(--paper);margin-top:20px;max-width:15ch}
.hero-sub{margin-top:26px;color:rgba(246,247,249,.72);font-size:clamp(1rem,1.6vw,1.13rem);max-width:46ch}
/* THE FOUR FACTS A PARENT CAME FOR: when, where, what age, what it costs.
   This was a wrapping flexbox with collapsed borders, which draws a neat block
   only when the items happen to fill each row. They do not: "Cost" is three
   times the width of "Ages", so it wrapped to a second row on its own and the
   first row stopped short of the right edge - a ragged staircase on every
   screen narrower than about 1500px, and worse on a phone. A two-column grid
   below and a single column on a phone always draws a rectangle. */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
.fact{border:1px solid var(--line-lt);padding:11px 20px;font-size:.86rem;font-weight:600;
    color:rgba(246,247,249,.85);margin:-1px 0 0 -1px;display:flex;align-items:baseline;gap:7px}
.fact b{color:#e5788a;font-weight:700;flex-shrink:0}
@media(max-width:520px){.facts{grid-template-columns:1fr}}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
/* Kept to one line wherever there is room for one. It sat at 46ch with a
   longer sentence, which broke as "...taster Thursday --" and then three words
   on a second line - an em dash left hanging at the end of a line, which is
   the one place it must never be.

   66ch, not a guess: the sentence measures 511px at this size and the hero's
   left column is 565px, so 58ch (478px) was clipping it into two lines when
   there was room for one. Below about 1000px the column itself is narrower
   than the sentence and it wraps to two balanced lines, which is correct. */
.hero-taster{margin-top:18px;max-width:66ch;font-size:.92rem;line-height:1.55;
    color:rgba(246,247,249,.62);text-wrap:balance}
.hero-taster a{color:var(--paper);font-weight:600;text-decoration:underline;
    text-decoration-color:rgba(229,120,138,.55);text-decoration-thickness:1px;text-underline-offset:4px;
    white-space:nowrap}   /* three words, kept whole - a broken underline reads as two links */
.hero-taster a:hover{text-decoration-color:var(--paper)}
.hero-photo{position:relative}
.photo-cap{position:absolute;left:0;bottom:0;background:var(--navy);color:var(--paper);
    padding:9px 16px;font-weight:600;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
    border-radius:0 var(--r) 0 var(--r)}
@media(max-width:880px){.hero{padding:44px 0 72px}.hero .wrap{grid-template-columns:1fr}}
.page-hero{position:relative;background:var(--navy);color:var(--paper);padding:56px 0 64px;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(110% 100% at 85% 0%,rgba(185,21,40,.11),transparent 55%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.2rem,5.6vw,3.6rem);color:var(--paper);margin-top:16px}
/* Was rgba(...,.7). On the long dark passages - the fees and privacy heroes,
   "How we teach" - that read as washed out rather than as secondary. .82 keeps
   the step down from the headings and stops the body text going grey. */
.page-hero p{color:rgba(246,247,249,.82);max-width:58ch;margin-top:18px;font-size:1.04rem}

/* THE INTERIOR HERO
   Home and Shop fill the right half of the hero with a photograph. Journey,
   Fees, Support and Privacy do not - they are text only, and they were using
   the same left-column layout, so four of the ten pages opened with roughly
   700x300px of empty navy. It looked like a template with an unfilled slot.
   Given no image, the text now takes the centre and the measure widens a
   little: the same furniture, arranged as though the space were the point. */
.page-hero.text-only{padding:64px 0 72px;text-align:center}
.page-hero.text-only .eyebrow{justify-content:center}
.page-hero.text-only h1{max-width:19ch;margin-left:auto;margin-right:auto}
.page-hero.text-only p{max-width:62ch;margin-left:auto;margin-right:auto}
.page-hero.text-only .hero-cta,
.page-hero.text-only .btn-row{justify-content:center}
@media(max-width:760px){
  /* Centred type stops working once lines start wrapping hard, so on a phone
     it returns to the left edge like everything else. */
  .page-hero.text-only{text-align:left;padding:44px 0 48px}
  .page-hero.text-only .eyebrow{justify-content:flex-start}
  .page-hero.text-only h1,.page-hero.text-only p{margin-left:0;margin-right:0}
  .page-hero.text-only .hero-cta,.page-hero.text-only .btn-row{justify-content:flex-start}
}
.section{padding:92px 0}
/* .section.alt was --tint (#e9edf4) - a distinctly blue third surface, used on
   the fees page and nowhere else, so those two sections looked like they had
   come from a different site. The site's rhythm is navy against paper; the
   alternate is now a whisper of the same paper rather than a new colour, which
   still separates a long page into parts without introducing a third surface. */
.section.alt{background:#eff1f5}
.photo-band{background:var(--navy);padding:0}
.photo-band .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
/* The structural half of .ph. It was defined per-page, in a block copied from
   file to file, and .ph .tag and .ph::after below both position against it -
   so a page that used a figure without copying that one line would have flung
   its caption to wherever the nearest positioned ancestor happened to be.
   Only the aspect ratio genuinely differs per page; that stays per page. */
.ph{position:relative;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.04);transition:transform .5s ease}
.ph::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.ph:hover img{transform:scale(1.03)}
/* The caption used to sit at left:0 of a full-bleed figure, which put it hard
   against the viewport edge while every other element on the site respects a
   margin. It reads as clipping rather than as full-bleed, so it is inset. */
.ph .tag{position:absolute;left:14px;bottom:14px;background:var(--navy);color:var(--paper);z-index:2;font-weight:600;
    text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;padding:8px 14px;border-radius:var(--r)}
@media(max-width:720px){
  /* Stacked, these three squares ran to about 790px - most of a phone screen
     of nothing but photographs, immediately after the hero, before a reader
     reaches "Six groups, one path". As a snap scroller they keep their size
     and their impact but cost one screen-width instead of a screen-height,
     and the peek of the next frame makes it obvious there is more to see. */
  .photo-band .grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px}
  .photo-band .grid::-webkit-scrollbar{display:none}
  .ph{flex:0 0 78%;scroll-snap-align:center;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden}
  .ph:last-child{margin-right:0}
  .ph .tag{left:10px;bottom:10px}
}
.welcome .wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:60px;align-items:center}
.welcome-photo{position:relative}
.welcome-photo img{border-radius:var(--r);box-shadow:12px 12px 0 var(--tint);filter:saturate(.93) contrast(1.03)}
.welcome-photo .tag{position:absolute;left:0;bottom:0;background:var(--navy);color:var(--paper);
    font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;padding:8px 14px;
    border-radius:0 var(--r) 0 var(--r)}
.welcome p{color:#3a4258;margin-top:16px;font-size:1.05rem;max-width:56ch}
.pull-line{font-size:clamp(1.35rem,2.8vw,1.8rem);color:var(--ink);margin-top:24px}
.tlink{display:inline-block;margin-top:22px;color:var(--red);font-weight:700;text-decoration:none;
    border-bottom:2px solid rgba(185,21,40,.4);padding-bottom:2px;transition:border-color .15s}
.tlink:hover{border-color:var(--red)}
@media(max-width:880px){.welcome .wrap{grid-template-columns:1fr;gap:42px}}
/* THE ONE CARD LEFT FROM THE JOURNEY PAGE.
   .jgrid, .jtime, .jcard.dark and .knot went with the six-card group section
   they were built for. .jcard survives because the Etive Pipers Fund card at
   the foot of the About page still wears it - one card, centred, on its own. */
.jcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:38px 34px 34px;
  display:flex;flex-direction:column;
    transition:transform .16s ease,box-shadow .16s ease}
.jcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,13,41,.09)}
.jcard h3{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.72rem;line-height:1.1}
.jcard .stage{color:var(--red);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin:9px 0 0}
.jcard p{color:var(--slate);font-size:1.04rem;margin-top:16px;line-height:1.6}
@media(max-width:640px){.jcard{padding:28px 24px 26px}.jcard h3{font-size:1.6rem}}

/* ============================================================================
   THE SIX GROUPS AS ONE THURSDAY EVENING
   ----------------------------------------------------------------------------
   Six equal cards said nothing about when anything met and read as six options
   to choose between. The groups run in ability order AND in clock order, so
   they are laid out on that clock: three 45-minute chanter slots taking 45% of
   the width, three 50-minute pipe slots taking 51%, and the 6:15 break - which
   is exactly where the instrument changes - as the 4% between them.

   THE MEASURE IS THE CONSTRAINT. 45% of a 1102px column split three ways is
   161px, so every size below is chosen for a column that narrow: the block
   names are set to ellipsis rather than wrap, the descriptions were rewritten
   to ten words, and the stage label reserves two lines so all six paragraphs
   start on the same baseline whatever "Expanding repertoire" does.
   ========================================================================== */
.sixev{display:flex;align-items:stretch;margin-top:52px}
.sx-side{min-width:0}
.sx-gap{flex:0 0 4%}

.sx-lab{font-weight:800;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--line)}

/* THREE ROWS THAT LINE UP ACROSS ALL SIX COLUMNS.
   The block, the stage label and the description are siblings in one grid, and
   .sx-col is display:contents so it passes its colour down without becoming a
   box of its own. That is what makes the six descriptions start on the same
   line: "Expanding repertoire" wraps to two at some widths and the other five
   do not, and the grid row simply grows for all of them. The first version
   reserved two lines with a min-height, which aligned them at the cost of an
   empty line under every label at full width. */
.sx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 6px}
.sx-col{display:contents}

.sx-blk{background:var(--gc);color:var(--gf);border-radius:5px 5px 0 0;padding:13px 14px 12px;
  grid-row:1;min-width:0}
.sx-blk b{display:block;font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;
  font-size:1.16rem;line-height:1.06;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-blk span{display:block;font-size:.72rem;font-weight:700;margin-top:6px;opacity:.92;
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}

/* The rule is what joins the words to the block above them. Without it the
   descriptions read as a separate row of text that happens to sit underneath. */
.sx-stage{grid-row:2;display:block;font-style:normal;font-weight:800;font-size:.67rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gi);line-height:1.45;
  border-top:3px solid var(--gc);margin-top:7px;padding:14px 1px 0}
.sx-desc{grid-row:3;color:var(--slate);font-size:.885rem;line-height:1.52;
  padding:9px 1px 0;text-wrap:pretty}

.jnote{color:var(--slate);font-size:.9rem;margin-top:32px}

/* WHY THE BREAKPOINT IS 1100 AND NOT ONE OFF THE SCALE ABOVE.
   The evening needs a column it is possible to read down. 45% of the content
   width split three ways is that column, and it only clears 160px - about 24
   characters a line - when the page is at or near its full 1150px. Measured
   across eleven widths, 1100px is where it stops: at 1000px the columns are
   148px and 21 characters, at 900px they are 132px and 20, and the section
   gets TALLER as it gets narrower because everything wraps to four lines. So
   the evening shows at full width and stands up the moment it is not.

   Standing up: one group per row, each block with its own words directly
   under it, both halves still labelled. Nothing is dropped and nothing is
   hidden - it is the same information in a column instead of a row. */
@media(max-width:1100px){
  .sixev{flex-direction:column;margin-top:40px}
  .sx-side{flex:none !important}
  .sx-gap{flex:none !important;height:30px}
  .sx-cols{flex-direction:column;gap:18px}
  .sx-blk{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    border-radius:5px;padding:13px 16px}
  .sx-blk b{font-size:1.24rem;white-space:normal;overflow:visible}
  .sx-blk span{margin-top:0;font-size:.8rem}
  .sx-cols,.sx-lab{max-width:44rem}
  .sx-cols{display:block}
  .sx-col{display:block}
  .sx-col + .sx-col{margin-top:18px}
  /* The block and its words are held to the same width. Left to run full
     bleed on a 1000px laptop they became six coloured banners with a name at
     one end and a time at the other and a great deal of colour in between,
     over text set half as wide - two objects rather than one. */
  .sx-stage{border-top:none;margin-top:0;padding:10px 2px 0;font-size:.66rem}
  /* Full width would run these to a hundred characters a line, which is as
     hard to read as twenty. */
  .sx-desc{font-size:.97rem;line-height:1.55;max-width:62ch;padding-top:6px}
  .jnote{margin-top:28px}
}
@media(max-width:520px){
  .sx-blk{display:block;padding:12px 15px}
  .sx-blk b{font-size:1.18rem}
  .sx-blk span{margin-top:5px}
  .sx-desc{font-size:.94rem}
}
.jnote a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(185,21,40,.4)}
.jnote a:hover{border-color:var(--red)}
.teach-band{background:var(--navy);color:var(--paper)}
.teach-band .eyebrow{color:#e5788a}
.teach-band .eyebrow::before{background:#e5788a}
.teach-band .sec-title{color:var(--paper)}
.teach-band .sec-sub{color:rgba(246,247,249,.68)}
.tchgrid{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tch{background:rgba(246,247,249,.045);border:1px solid var(--line-lt);border-radius:var(--r);
    padding:30px 28px;transition:transform .18s ease,border-color .18s ease}
.tch:hover{transform:translateY(-4px);border-color:rgba(185,21,40,.55)}
/* One icon per card, in the red accent - enough to give each card a face at a
   glance without competing with the Gloock heading underneath it. */
.tch-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r);
    background:rgba(185,21,40,.14);color:#e5788a;margin-bottom:16px}
.tch-ic svg{width:21px;height:21px}
.tch:hover .tch-ic{background:rgba(185,21,40,.24);color:var(--paper)}
.tch h3{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.35rem;color:var(--paper)}
.tch p{color:rgba(246,247,249,.72);font-size:1.02rem;margin-top:9px}
@media(max-width:680px){.tchgrid{grid-template-columns:1fr}}
.quote-band{background:var(--navy);color:var(--paper);position:relative;overflow:hidden}
.quote-band .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:58px;align-items:center;
    padding-top:100px;padding-bottom:100px;position:relative;z-index:2}
.bigquote{font-family:Gloock,Georgia,"Times New Roman",serif;font-size:clamp(1.8rem,4.6vw,3rem);line-height:1.16;color:var(--paper)}
.bigquote .it{font-size:1.04em}
.quote-src{margin-top:24px;color:rgba(246,247,249,.7);font-size:1.05rem;max-width:48ch}
.quote-band .ph{border-radius:var(--r);aspect-ratio:4/3}
/* .hl is the brand red, which on navy is 2.93:1 - under the 3:1 that even
   large display text needs. The dark bands' lighter red clears it comfortably
   and, at this size, looks identical. */
.on-dark .hl,.quote-band .hl,.cta-band .hl,.teach-band .hl{color:#e5788a}
@media(max-width:880px){.quote-band .wrap{grid-template-columns:1fr;gap:38px;padding-top:76px;padding-bottom:76px}}
.members-sec .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.members-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.phone{justify-self:center;width:250px;background:var(--navy);border-radius:26px;padding:13px;
    box-shadow:0 28px 56px rgba(0,13,41,.24)}
.phone-screen{background:var(--paper);border-radius:16px;overflow:hidden;height:428px;display:flex;flex-direction:column}
@media(max-width:800px){.members-sec .wrap{grid-template-columns:1fr;gap:44px}.phone{order:-1}}
.tgrid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* The three cards are equal height but the content was top-aligned, so the
   attributions landed at three different heights depending on how long each
   quote ran. Column layout plus margin-top:auto pins them to a shared line. */
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
    display:flex;flex-direction:column;
    transition:transform .16s ease,box-shadow .16s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,13,41,.09)}
.tcard .stars{color:var(--red);letter-spacing:3px;font-size:.85rem;margin-bottom:14px}
.tcard p{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-size:1.22rem;line-height:1.4;color:var(--ink)}
.tcard .who{margin-top:auto;padding-top:16px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
@media(max-width:880px){.tgrid{grid-template-columns:1fr}}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:21px 26px;font-weight:700;font-size:1.02rem;
    display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:Gloock,Georgia,"Times New Roman",serif;color:var(--red);font-size:1.4rem;line-height:1;flex-shrink:0;transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 26px 24px;color:var(--slate);font-size:1.02rem;max-width:64ch}
.faq-item .a a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(185,21,40,.4)}
.faq-item .a a:hover{border-color:var(--red)}
.cta-band{background:var(--navy);color:var(--paper);position:relative;overflow:hidden}
.cta-band svg.cbg{position:absolute;inset:0;width:100%;height:100%;opacity:.2;pointer-events:none}
.cta-band .wrap{padding-top:88px;padding-bottom:88px;text-align:center;position:relative;z-index:2}
.cta-band h2{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(2.1rem,5.6vw,3.6rem);color:var(--paper)}
.cta-band .sub{color:rgba(246,247,249,.78);font-size:clamp(1.05rem,2.4vw,1.3rem);margin:14px 0 32px}
.prose{max-width:68ch}
.prose h2{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(1.9rem,4.5vw,2.8rem);margin:50px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{color:#3a4258;margin-bottom:18px;font-size:1.05rem}
.prose .pull{font-size:clamp(1.35rem,3vw,1.75rem);color:var(--ink);
    border-left:3px solid var(--red);padding:8px 0 8px 24px;margin:34px 0}
.prose a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(185,21,40,.4)}
.prose a:hover{border-color:var(--red)}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
    transition:transform .16s ease,box-shadow .16s ease}
.opt:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,13,41,.09)}
.opt h3{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.32rem}
.opt .k{color:var(--red);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 12px}
.opt p{color:var(--slate);font-size:1rem}
@media(max-width:880px){.opt-grid{grid-template-columns:1fr}}
.steps{margin-top:44px;display:grid;max-width:760px}
.step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:23px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .sn{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;color:var(--red);font-size:1.7rem;line-height:1.2}
.step h3{font-size:1.06rem;font-weight:700}
.step p{color:var(--slate);font-size:1rem;margin-top:4px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
.prod:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,13,41,.09)}
.prod-img{aspect-ratio:4/5;background:var(--navy);display:grid;place-items:center;position:relative;overflow:hidden}
.prod-img .fallback{width:38%;opacity:.95}
.prod-img .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.3rem}
.prod-body .pd{color:var(--slate);font-size:.92rem;margin-top:6px}
/* THE PRICE BLOCK SITS AT THE BOTTOM OF THE CARD, NOT UNDER THE DESCRIPTION.
   .prod-body was already a flex column filling the card, but nothing claimed
   the leftover space - so in a row of three, the one product whose description
   happens to wrap to two lines pushed its price, its size pickers and its Add
   to basket button a line lower than its neighbours'. Five identical controls
   in a row, at four different heights. margin-top:auto puts the slack above
   the price instead of below the button, and the row lines up. */
.prices{margin-top:auto;padding-top:12px;font-size:.92rem;border-top:1px solid var(--line)}
.prod-body .pd{margin-bottom:14px}
.prices .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.prices .row b{font-weight:700}
.prices .row.mem b{color:var(--red)}
.prices .lbl{color:var(--slate);font-weight:600}
@media(max-width:960px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.prod-grid{grid-template-columns:1fr}}
.shop-note{margin-top:26px;color:var(--slate);font-size:.92rem;max-width:66ch}
.shop-note a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(185,21,40,.4)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:38px;
    box-shadow:12px 12px 0 var(--tint)}
.form-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:start}
@media(max-width:880px){.form-grid{grid-template-columns:1fr;gap:44px}}
.field{margin-bottom:21px}
.field label{display:block;font-weight:700;font-size:.89rem;margin-bottom:7px}
.field label small{font-weight:500;color:var(--slate)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid rgba(19,28,49,.22);
    border-radius:var(--r);font-family:inherit;font-size:1rem;background:var(--paper);color:var(--ink);
    transition:border-color .15s ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.form-note{font-size:.88rem;color:var(--slate);margin-top:16px}
.form-note a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(185,21,40,.4)}
.form-msg{display:none;margin-top:18px;padding:15px 18px;border-radius:var(--r);font-size:.95rem;font-weight:600}
.form-msg.ok{display:block;background:#e9f3ec;color:#1d5c33;border:1px solid #bcd8c6}
.form-msg.err{display:block;background:#fbecec;color:#791f1f;border:1px solid #ecc7c7}
.login-wrap{max-width:460px;margin:0 auto}
/* The closing CTA band is --navy and the footer --navy-deep, so they met in a
   hard horizontal seam that read as a rendering fault rather than a step. A
   short gradient carries one into the other. */
footer{background:var(--navy-deep);color:rgba(246,247,249,.62);padding:68px 0 40px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:56px;
    background:linear-gradient(var(--navy),var(--navy-deep));pointer-events:none}
footer > *{position:relative;z-index:1}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;
    border-bottom:1px solid var(--line-lt);padding-bottom:34px}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--paper)}
.foot-brand img{width:44px;height:44px;border-radius:var(--r)}
.fb-name{font-family:Gloock,Georgia,"Times New Roman",serif;font-size:1.28rem}
.fb-mot{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-size:1rem;color:rgba(246,247,249,.55)}
.foot-cols{display:flex;gap:54px;flex-wrap:wrap}
/* On a phone the four columns wrapped to one each, so the footer became a
   single 30-link stack about a screen and a half tall. Two columns keeps it to
   a glance and pairs the sections sensibly - lessons beside Etive Pipers, the
   small print beside the contact links. */
@media(max-width:640px){
  .foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;width:100%}
  .foot-col a{font-size:.88rem;margin-bottom:7px}
}
.foot-col h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,247,249,.36);
    margin-bottom:14px;font-weight:700}
.foot-col a{display:block;color:rgba(246,247,249,.7);text-decoration:none;font-size:.92rem;margin-bottom:9px}
.foot-col a:hover{color:var(--paper)}
.foot-btm{padding-top:26px;font-size:.82rem;color:rgba(246,247,249,.36);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.cta-band .cordw{position:relative;display:inline-block;white-space:nowrap}
.cta-band svg.cord{position:absolute;left:-1%;bottom:-.3em;width:104%;height:.38em;overflow:visible}
.steps-h{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:none}
.steps-h .step{display:block;background:var(--surface);border:1px solid var(--line) !important;
    border-radius:var(--r);padding:26px 24px}
.steps-h .sn{display:block;margin-bottom:8px}
@media(max-width:880px){.steps-h{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:44px}}
/* The top bar is sticky and 84px tall, so a sticky panel at top:24px parks
   itself underneath it. Both offsets now clear the bar with room to spare. */
.rail{display:grid;gap:18px;position:sticky;top:108px}
.rail-ph img{border-radius:var(--r);box-shadow:10px 10px 0 var(--tint)}
.rail .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.rail .card h3{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.25rem;margin-bottom:12px}
.rail .card p{color:var(--slate);font-size:.94rem}
.glance{list-style:none}
.glance li{padding:8px 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--slate)}
.glance li:first-child{border-top:none}
.glance li b{color:var(--ink);display:inline-block;min-width:86px}
@media(max-width:880px){.rail{position:static}}
@media(max-width:880px){.faq-list{grid-template-columns:1fr}}
.pick-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:16px}
.pick-row select{padding:10px 12px;border:1px solid rgba(19,28,49,.22);border-radius:var(--r);
    font-family:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);min-width:0}
.basket-bar{position:fixed;bottom:18px;left:0;right:0;display:flex;justify-content:center;z-index:70;
    pointer-events:none}
.basket-bar .btn{pointer-events:auto;box-shadow:0 14px 34px rgba(0,13,41,.3)}
.basket-panel{position:fixed;inset:0;background:rgba(2,10,28,.55);z-index:120;display:flex;
    justify-content:flex-end;backdrop-filter:blur(3px)}
.bp-inner{background:var(--paper);width:min(430px,100%);height:100%;overflow-y:auto;padding:26px 24px;
    display:flex;flex-direction:column;gap:16px}
.bp-head{display:flex;justify-content:space-between;align-items:center}
.bp-close{background:none;border:none;font-size:1.9rem;cursor:pointer;color:var(--ink);line-height:1;padding:4px}
.bp-info b{font-size:.92rem}
.bp-info small{display:block;color:var(--slate);font-size:.78rem}
.bp-qty{display:flex;align-items:center;gap:8px}
.bp-qty button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(19,28,49,.3);background:var(--paper);
    cursor:pointer;font-size:1rem;line-height:1;color:var(--ink)}
.bp-qty span{min-width:16px;text-align:center;font-weight:700;font-size:.92rem}
.bp-price{font-weight:700;font-size:.94rem}
.bp-x{background:none;border:none;color:var(--slate);font-size:1.2rem;cursor:pointer;padding:2px}
.bp-total{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;
    border-top:1px solid var(--line);padding-top:14px}
.paid-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);
    color:var(--paper);padding:14px 22px;border-radius:var(--r);font-weight:600;font-size:.94rem;z-index:90;
    box-shadow:0 16px 40px rgba(0,13,41,.35);max-width:calc(100vw - 40px);text-align:center}
@media(max-width:640px){html{font-size:106.25%}}
/* ============ iOS ZOOMS WHEN A FOCUSED FIELD IS UNDER 16px ============

   Safari does it to make the text legible: you tap a search box, the page
   jumps to about 130%, and getting back is a pinch you did not ask for.
   The threshold is exactly 16px and it is not negotiable.

   THERE IS NO MEDIA QUERY HERE ANY MORE, AND THAT IS THE POINT.

   v0.9.5 keyed this to max-width:640px - a phone in portrait and nothing
   else, so landscape and iPads zoomed. v0.9.5.1 keyed it to
   (pointer: coarse), which is correct in every browser I can measure here -
   and it was still zooming on a real iPhone. I cannot run WebKit in this
   environment, so rather than guess at a third query, the query is gone:
   every text field on the site is 16px, on every device, always.

   What that costs is 0.8px on a desktop field. What it buys is that the
   zoom cannot come back through an orientation, a tablet, Request Desktop
   Website, a browser that reads a pointer feature differently, or anything
   else nobody has thought of. Labels, hints and buttons are untouched -
   this is only the box you type into.

   WHAT IT DELIBERATELY DOES NOT DO is put maximum-scale=1 or
   user-scalable=no in the viewport tag. That would also stop the zoom - by
   taking pinch-to-zoom away from everybody, including the people who need
   it to read at all. Making the field big enough removes nothing from
   anyone. (game.php is the one exception, and that is a game canvas.)

   !important because a dozen pages set their own field sizes in their own
   <style> blocks, which load after this one. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea { font-size:16px !important }
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    .reveal{opacity:1;transform:none}
    html{scroll-behavior:auto}
  }

/* Skip link: first thing a keyboard or screen-reader user meets, invisible
   until focused. Public pages previously had no way past the nav. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
main{display:block}


/* FAQ accordion layout: sticky heading on the left, questions on the right.
   Lived in index.html and fees.php only, so the shop FAQ stacked instead. */
.faq-list{display:grid;gap:12px;align-items:start}
.faqwrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:60px;align-items:start}
.faq-side{position:sticky;top:112px}
/* Inside the two-column layout the questions are always a single stack on the
   right, whatever a page sets .faq-list to on its own. Higher specificity than
   a bare .faq-list, so pages with a standalone two-column list (fees, shop)
   keep that where they use it and still match here. */
.faqwrap .faq-list{grid-template-columns:1fr;margin-top:0}
@media(max-width:880px){.faqwrap{grid-template-columns:1fr;gap:36px}.faq-side{position:static}}

/* Links on the navy heroes. Without this they fall back to the browser's
   default purple/blue, which is what the EP Fund link on the shop was doing. */
.page-hero p a, .hero-sub a, .hero p a{
  color:#e5788a;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(229,120,138,.45)}
.page-hero p a:hover, .hero-sub a:hover, .hero p a:hover{
  color:#ffa0ad;text-decoration-color:currentColor}


/* ---- the six groups on the homepage --------------------------------------
   The original layout, unchanged in shape: a red rule running through six
   knots across the desktop, and the same rule running vertically down the
   left on a phone. Only the sizing and spacing have moved. The old type was
   1.06rem/0.8rem, which measured out at well under half the available column
   width - there was room for far more all along. */
.jstrip{position:relative;margin-top:60px;padding-top:10px}
.jsgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:0 20px;position:relative}
.jsitem{text-decoration:none;color:inherit;display:block}
.jsitem .knot{display:block;width:20px;height:20px;border-radius:50%;background:var(--red);
  border:4px solid var(--paper);box-shadow:0 0 0 1.5px rgba(19,28,49,.22);
  margin-bottom:22px;position:relative;z-index:2;transition:transform .16s ease}
.jsitem:hover .knot{transform:scale(1.25)}
.jsitem h3{font-family:Gloock,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.4rem;line-height:1.12}
.jsitem small{display:block;color:var(--slate);font-size:1rem;font-weight:500;margin-top:7px;line-height:1.4}
.jsitem time{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:.95rem;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}

/* the horizontal rule through the knots */
.jstrip .jline{display:none}
@media(min-width:761px){
  .jstrip .jline{display:block;position:absolute;top:18px;left:10px;right:10px;height:3px;
    background:rgba(185,21,40,.4);border-radius:3px;pointer-events:none;z-index:1}
}
@media(max-width:1179px){
  .jsgrid{gap:0 16px}
  .jsitem h3{font-size:1.24rem}
  .jsitem small{font-size:.94rem}
  .jsitem time{font-size:.9rem;margin-top:12px;padding-top:10px}
}
@media(max-width:900px){
  .jsitem h3{font-size:1.14rem}
  .jsitem small{font-size:.88rem}
  .jsitem time{font-size:.85rem}
}
/* Below 760px it becomes the vertical timeline: rule down the left, one
   group per row, with room to read them properly. */
@media(max-width:760px){
  .jstrip{margin-top:44px;padding-top:4px}
  .jstrip::before{content:"";position:absolute;left:9px;top:12px;bottom:14px;width:3px;
    background:rgba(185,21,40,.32);border-radius:3px}
  .jsgrid{grid-template-columns:1fr;gap:0}
  .jsitem{display:grid;grid-template-columns:46px 1fr;align-items:start;padding:0 0 26px 0}
  .jsitem .knot{margin-bottom:0;margin-top:5px}
  .jsitem h3{font-size:1.45rem}
  .jsitem small{font-size:1.02rem;margin-top:5px}
  .jsitem time{font-size:.98rem;margin-top:11px;padding-top:9px}
  .jsitem:last-child{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.jsitem .knot{transition:none}}

/* ============ pressed, and waiting ============
 See the note in the script at the foot of the page. The bar is the page
 saying it heard you; the pending class is the control saying it was the
 one pressed. Both appear only after 120ms, so a fast connection never
 sees either. */
/* The bar sits over the navy header, so it cannot be the accent - the site's
red on navy is nearly invisible. A light core reads on both the navy header
and the paper body. */
.ep-loadbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;pointer-events:none;
background:linear-gradient(90deg,transparent,#8fb4ff,#fff,#8fb4ff,transparent);
background-size:45% 100%;background-repeat:no-repeat;
box-shadow:0 0 8px rgba(255,255,255,.35);
animation:ep-load 1.1s linear infinite}
@keyframes ep-load{0%{background-position:-45% 0}100%{background-position:145% 0}}
.ep-pending{position:relative;pointer-events:none}
button.ep-pending, a.btnl.ep-pending, .ep-pending > button{opacity:.72}
/* A button says so in place; a link or a card just dims and waits. */
button.ep-pending::after, a.btnl.ep-pending::after{
content:"";display:inline-block;width:.85em;height:.85em;margin-left:.5em;
vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;
border-radius:50%;animation:ep-spin .6s linear infinite}
@keyframes ep-spin{to{transform:rotate(360deg)}}
a.ep-pending:not(.btnl){opacity:.6}
@media(prefers-reduced-motion:reduce){
.ep-loadbar{animation:none;background:#8fb4ff;background-size:100% 100%;opacity:.75}
button.ep-pending::after,a.btnl.ep-pending::after{animation:none}
}


/* v0.9.5.5: compact menu icons, shared public/member geometry. */
.nav-toggle{position:relative;width:44px;height:44px;flex:0 0 44px;margin-right:0}
.nav-toggle span{position:absolute;left:12px;width:20px;height:2px;margin:0;border-radius:2px}
.nav-toggle span:nth-child(1){top:15px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:27px}
.mm-close{position:relative;width:44px;height:44px;flex:0 0 44px;font-size:0!important}
.mm-close::before,.mm-close::after{content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.mm-close::after{transform:rotate(-45deg)}