/* ==========================================================================
   WSKF Australia - owner-r1.css (V2.11 Owner Revision Round 1 + V2.11.1)
   Every owner-requested change from Revision Round 1 lives in this one file,
   loaded after sections.css. Nothing above it was rewritten, so removing this
   file (and the matching markup) returns the V2.10.1 look exactly.
   Item numbers refer to the owner brief.
   ========================================================================== */

/* ---- V2.11.1: Barlow Semi Condensed for every display SHOTOKAN ---------
   Owner decision (Grant, by phone): the standalone display word SHOTOKAN
   uses Barlow Semi Condensed, clean and strong, no brush or faux-Japanese
   face. Audited: exactly three standalone display words exist, all .mk
   (hero, On the Mat, Australia <-> Japan). Body, navigation, FAQ and
   Assistant uses of "Shotokan" stay in Montserrat. SIL OFL 1.1, Latin
   subset, weight 700 used (23 KB; 600 is not shipped),
   assets/fonts/BARLOW-SEMI-CONDENSED-OFL.txt */
@font-face{
  font-family:"Barlow Semi Condensed";
  src:url("../assets/fonts/BarlowSemiCondensed-Bold-latin.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
:root{ --font-shotokan:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif; }

.mk--hero,.mk--reel,.mk--japan{
  font-family:var(--font-shotokan); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; line-height:1;
}
/* Hero: a clear step below the three-line headline (41.7px at 1366). */
.mk--hero{ font-size:clamp(1.85rem,2.6vw,2.55rem); text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 16px rgba(0,0,0,.45); }
.mk--reel{ font-size:clamp(2rem,2.9vw,2.7rem); }
.mk--japan{ font-size:clamp(1.5rem,2.2vw,2.05rem); }
@media (max-width:760px){
  .mk--hero{ font-size:clamp(1.7rem,7.6vw,2.05rem); letter-spacing:.09em; }
  .mk--reel{ font-size:clamp(1.7rem,7.6vw,2.1rem); }
  .mk--japan{ font-size:clamp(1.45rem,6.4vw,1.75rem); }
}
@media (max-width:600px){ .mk--hero{ font-size:clamp(1.65rem,7.8vw,2rem); } }

/* ---- Item 1: header bar uses the dropdown panel's own background ------- */
.header__bar,
.header.stuck .header__bar{ background:var(--paper); }

/* ---- Item 2: larger round logo, bar height unchanged -------------------
   46px → 56px on desktop (+22%, about 15mm on a typical 24" monitor). The
   mark grows into the space the 74px bar already had, so the desktop navbar
   is exactly the same height as V2.10.1. Phones: 40px → 48px. */
.header .brand__mark{ width:56px; height:56px; }
.header .brand{ min-height:56px; }
/* 761-900px: the bar was 64px; it becomes 68px so the logo can reach 50px. */
@media (min-width:761px) and (max-width:900px){
  :root{ --header-h:68px; }
  .header .brand__mark{ width:50px; height:50px; } .header .brand{ min-height:50px; }
}
@media (max-width:760px){ .header .brand__mark{ width:48px; height:48px; } .header .brand{ min-height:48px; } }
@media (max-width:360px){ .header .brand__mark{ width:46px; height:46px; } .header .brand{ min-height:46px; } }
/* 320px: the larger mark must not cost the wordmark. Spacing gives way
   first, so "WSKF AUSTRALIA" still shows in full. */
@media (max-width:340px){
  .header{ padding-inline:.5rem; }
  .header__bar{ gap:.35rem; padding-left:8px; }
  .header .brand{ gap:.4rem; }
  .header .brand__name{ font-size:.8rem; letter-spacing:0; }
  .menu-btn{ padding:0 .55rem; }
}
.header .brand__mark img{ object-fit:contain; }

/* ---- Item 3: mega-menu columns share one top edge ----------------------
   ".pgroup + .pgroup" was written for stacked groups, but in the 12-column
   panel grid it pushed every column after the first down by 1.3rem. That
   affected all six panels, not only Home. */
.panel__grid > .pgroup + .pgroup{ margin-top:0; }

/* ---- Item 5: three-line desktop headline -------------------------------
   Slightly smaller and tighter so the extra line costs ~30px, not ~50px.
   The phone rule in V2.10.1 still hides it visually at 600px and below. */
.hero__h1{ font-size:clamp(1.7rem,3.05vw,2.85rem); line-height:1.02; }
.hero__h1 em{ font-style:normal; display:block; }
@media (min-width:601px) and (max-width:760px){ .hero__h1{ font-size:clamp(1.5rem,6.4vw,2rem); } }

/* ---- Item 6: five-photograph crossfade ---------------------------------
   Slides are stacked in the existing background layer. The incoming slide
   fades in ON TOP of the outgoing one, which stays fully opaque until the
   fade ends, so there is never a blank or see-through frame. */
.hero__slides{ overflow:hidden; background:var(--ink); }
.hero__slide{ position:absolute; inset:0; opacity:0; z-index:0; }
.hero__slide.is-active{ opacity:1; z-index:2; transition:opacity .9s cubic-bezier(.4,0,.2,1); }
.hero__slide.is-leaving{ opacity:1; z-index:1; }
.hero__slide.is-entering{ opacity:0; z-index:2; transition:none; }
.hero__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__bg::after{ z-index:3; }
/* Per-photograph shade, tuned slide by slide so copy stays readable. */
.hero__slide::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--shade,0)); }
html:not(.js) .hero__slide:not(:first-child){ display:none; }

/* Focal points. Desktop/tablet use the full frame; phones use purpose-cut
   4:5 derivatives already centred on the subject. */
.hero__slide[data-slide="1"]{ --shade:.08; } .hero__slide[data-slide="1"] img{ object-position:50% 46%; }
.hero__slide[data-slide="2"]{ --shade:.10; } .hero__slide[data-slide="2"] img{ object-position:50% 52%; }
.hero__slide[data-slide="3"]{ --shade:.16; } .hero__slide[data-slide="3"] img{ object-position:50% 42%; }
.hero__slide[data-slide="4"]{ --shade:.06; } .hero__slide[data-slide="4"] img{ object-position:50% 30%; }
.hero__slide[data-slide="5"]{ --shade:.08; } .hero__slide[data-slide="5"] img{ object-position:50% 24%; }
@media (max-width:760px){
  .hero__slide[data-slide] img{ object-position:50% 50%; }
  .hero__slide[data-slide="3"]{ --shade:.2; }
  .hero__slide[data-slide="4"] img{ object-position:50% 40%; }
  .hero__slide[data-slide="5"] img{ object-position:50% 38%; }
}

/* Tablet (761-999px) stacks the identifier at the top of the frame, where
   the V2.10.1 scrim is lightest. Measured on slides 4 and 5 it fell below
   AA, so tablets get an extra top-weighted shade on every slide. */
@media (min-width:761px) and (max-width:999px){
  .hero__slide::after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.12) 100%),
      rgba(0,0,0,var(--shade,0));
  }
}

/* Controls: a pause button and five dots on one quiet line at the foot of
   the hero. 28px targets, 8px marks. */
.hero__ctrl{
  position:absolute; z-index:4; left:50%; transform:translateX(-50%);
  bottom:clamp(.4rem,1vh,.6rem);
  display:flex; align-items:center; gap:.15rem;
}
.hero__dots{ display:flex; align-items:center; gap:.1rem; }
.hero__dot,.hero__toggle{
  width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; border-radius:14px; color:#fff;
}
.hero__dot span{
  display:block; width:8px; height:8px; border-radius:4px;
  background:rgba(244,243,241,.5); box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition:width .35s var(--ease), background-color .35s var(--ease);
}
.hero__dot:hover span{ background:rgba(244,243,241,.85); }
.hero__dot[aria-current="true"] span{ width:22px; background:var(--red); box-shadow:none; }
.hero__toggle .i{ width:12px; height:12px; opacity:.8; }
.hero__toggle:hover .i{ opacity:1; }
.hero__dot:focus-visible,.hero__toggle:focus-visible{ outline:2px solid #FF6B70; outline-offset:0; }
/* Room for the control line below the existing content. */
@media (min-width:761px){
  .hero{ padding-bottom:calc(clamp(1.9rem,3.4vh,2.9rem) + .95rem); }
}
@media (max-width:760px){
  .hero{ padding-bottom:calc(clamp(1.3rem,4vw,1.8rem) + 1.35rem); }
}
@media (max-width:600px){
  .hero{ padding-bottom:calc(clamp(1.4rem,4.4vw,2rem) + 1.35rem); }
}
/* No autoplay under reduced motion, so a pause button would do nothing. */
@media (prefers-reduced-motion:reduce){ .hero__toggle{ display:none; } }
.hero__ctrl.is-static .hero__toggle{ display:none; }

/* ---- Item 7: longer age heading, same two lines ----------------------
   "One black belt syllabus." is sized to fit its column on one line, so the
   heading stays two lines and the section does not grow. The width factor
   (14.7em) is the measured length of that line in Montserrat Bold. */
.ages__h2{ font-size:clamp(1.35rem, calc((100vw - 2 * var(--gutter)) / 14.7), var(--t-xl)); }
@media (min-width:960px){ .ages__h2{ font-size:clamp(1.6rem,2.95vw,2.5rem); } }

/* ---- Item 8: medals panel replaces the 80% statistic ------------------ */
.why__stat--medals b{ font-size:clamp(1.02rem,1.55vw,1.3rem); line-height:1.15; letter-spacing:-.01em; text-transform:uppercase; }
.why__stat--medals span{ max-width:36ch; }

/* ---- Item 9: owner-supplied calligraphy across the red plane -----------
   Grant's own brushwork (世界松濤館空手道連盟), cut glyph by glyph from the
   supplied vertical artwork and set upright in a horizontal row. Two copies
   drift in a seamless loop inside the clipped red plane. Opacity was set by
   eye on the real module: clearly Japanese calligraphy, still background. */
.reel__jp--art{ display:flex; width:max-content; align-items:center; height:100%; }
.reel__jp--art span{
  display:flex; align-items:center; flex:none;
  height:calc(var(--plane) * .64); font-size:0; color:transparent;
  animation:jpDrift 80s linear infinite;
}
.reel__jp--art img{ display:block; height:100%; width:auto; max-width:none; opacity:var(--cal-opacity,.2); }
@media (prefers-reduced-motion:reduce){ .reel__jp--art span{ animation:none; } }

/* ---- Item 12: six equal destination cells ------------------------------ */
@media (min-width:700px) and (max-width:1499px){ .destgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:421px) and (max-width:699px){ .destgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.dest{ text-transform:uppercase; letter-spacing:.08em; font-family:var(--display); font-weight:600; font-size:.8rem; }

/* ---- Item 14: owner-supplied community photographs ---------------------
   The team photograph replaces the Travel overseas tile image (that tile
   repeated the airport photograph already used in Heritage). The three
   dinner photographs join the existing rail at its one shared height. */
.comm__cell .comm__img--team{ object-position:50% 38%; }
.rail__strip picture{ display:contents; }

/* ---- V2.11.1: Grant's calligraphy as static watermarks on light sections -
   Two placements, chosen after rendering Ages, Journey, FAQ and Community:
   Journey (horizontal upright row beside the heading) and Ages (vertical
   column cropped at the content edge). FAQ already carries a typed
   watermark and Community's edge was too thin to read, so neither is used.
   Static, aria-hidden, pointer-events:none, clipped inside the section, and
   never behind body copy: the Ages column is hidden where the gutter is too
   narrow, and the Journey row becomes a small signature row on phones. */
.ages,.journey{ position:relative; isolation:isolate; overflow-x:clip; }
.cal-mark{ position:absolute; z-index:-1; pointer-events:none; opacity:var(--cal-o,.07); }
.cal-mark img{ display:block; height:100%; width:auto; max-width:none; }

/* Journey: upright row from right of the heading, cropped by the section edge. */
.cal-mark--journey{
  top:clamp(2.2rem,4vw,3.5rem); left:max(46%, calc(50% - 120px));
  height:clamp(88px,11vw,150px);
}
.cal-mark--journey img{ filter:brightness(0); }
@media (max-width:760px){
  .cal-mark--journey{ top:6px; left:50%; height:52px; --cal-o:.08; }
}
@media (max-width:360px){ .cal-mark--journey{ left:62%; height:46px; } }
/* V2.11.2: on phones the cropped row read as stray fragments, so the Journey
   mark is removed at 600px and below. On the Mat carries the calligraphy
   there. 601px and up is exactly V2.11.1. */
@media (max-width:600px){ .cal-mark--journey{ display:none; } }

/* Ages: the supplied vertical column at the left content edge. */
.cal-mark--ages{
  --cal-o:.08; top:-2%; height:112%;
  left:calc(max(0px, (100% - var(--w-page)) / 2) - clamp(44px,4.8vw,96px));
}
@media (max-width:1099px){ .cal-mark--ages{ display:none; } }
/* V2.11.2: at 1100-1599px the full-height column was cropped to fragments
   by the narrow gutter. Here it is sized to the gutter instead, so every
   glyph is whole: one complete vertical column starting level with the
   heading, its right edge a fixed 12px short of the content edge (as at
   1600px and up), never taller than the section. Below 1380px, where the
   glyphs are smallest, opacity lifts from 8% to 10% so the column still
   reads. 1600px and up is exactly V2.11.1. */
@media (min-width:1100px) and (max-width:1599px){
  .cal-mark--ages{
    --cal-edge:calc(max(0px, (100% - var(--w-page)) / 2) + var(--gutter) - 12px);
    --cal-w:min(84px, calc(var(--cal-edge) - 4px));
    top:clamp(2.2rem,4vw,4.2rem); height:auto; width:var(--cal-w);
    left:calc(var(--cal-edge) - var(--cal-w));
  }
  .cal-mark--ages img{ width:100%; height:auto; }
}
@media (min-width:1100px) and (max-width:1379px){ .cal-mark--ages{ --cal-o:.1; } }