/* ============================================================
   EL PADEL — shared chrome and the reading pages

   The homepage carries its own stylesheet inline and always will: it is one
   long bespoke document with a hero, a tier selector and a form, and none of
   that is reused anywhere. This file is the other half of the site — the
   guides, the memberships page, the privacy notice — plus the two pieces of
   chrome both halves now share, the header nav and the footer nav.

   WHY IT IS SAFE TO LOAD ON THE HOMEPAGE TOO.
   The homepage links this file and keeps its inline <style> after it, so on any
   rule the two both define, the inline one wins on source order. Nothing here
   is allowed to out-specify it either: every layout and component rule below is
   scoped under .pg, a class only the reading pages carry. The exceptions are
   deliberate and carry names nothing else uses — .head-nav, .foot-nav, .crumbs
   — so there is nothing for them to collide with.

   The tokens are repeated from the homepage rather than moved out of it. One
   copy would be tidier and would also mean the homepage could not render until
   this file arrived; a duplicated :root block costs 600 bytes and removes that
   dependency. If a colour changes, it changes in both.
   ============================================================ */

:root{
  --espresso:#583C2B;
  --walnut:#7E5339;
  /* Two terracottas. #96593C is the fill — ivory on it measures 4.85:1, which
     clears AA for normal text, where the old #A36747 sat at 4:1 and failed it
     under every button on the site. --terracotta-lift is the same hue brought
     up for the opposite job: terracotta as INK on the near-black ground, 5.48:1
     there. Never a fill behind ivory text, where it drops to 3.08. */
  --terracotta:#96593C;
  --terracotta-lift:#B87A57;
  --limestone:#C4B2A0;
  --ivory:#F4EFE9;
  --void:#120D0A;

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  /* max(), so a notch inset only ever raises the gutter. In portrait the insets
     report 0 and this is the plain clamp; in landscape on a notched phone it
     keeps the text out from under the camera housing. */
  --gutter:max(clamp(20px,5vw,64px), env(safe-area-inset-left), env(safe-area-inset-right));
  /* What a sticky header costs an anchor jump. Used by scroll-margin-top on
     anything an in-page link can land on. */
  --head-h:64px;
}

/* ============================================================
   READING PAGES
   Everything from here to the chrome section is inside .pg, which goes on
   <body> of a reading page and nowhere else.
   ============================================================ */

.pg *{box-sizing:border-box;margin:0;padding:0}

.pg{
  background:var(--ivory);
  color:var(--espresso);
  font-family:var(--body);
  font-size:17px;line-height:28px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

.pg ::selection{background:var(--terracotta);color:var(--ivory)}
.pg a{color:inherit}
.pg :focus-visible{outline:2px solid var(--terracotta);outline-offset:4px}

/* ---------- type ----------
   One scale, shared by every reading page, so a guide and the privacy notice
   are recognisably the same document set. h1 and h2 take the display serif;
   h3 and below stay in the body face, because at this size a serif h3 sitting
   two lines under a serif h2 reads as a second h2. */
.pg h1,.pg h2{font-family:var(--display);font-weight:400;letter-spacing:-0.015em;text-wrap:balance}
.pg h1{font-size:clamp(30px,4.4vw,48px);line-height:1.08}
.pg h2{font-size:clamp(23px,2.9vw,32px);line-height:1.14}
.pg h3{
  font-family:var(--body);font-size:17px;line-height:26px;font-weight:500;
  letter-spacing:.005em;color:var(--espresso);
}
.pg p,.pg li{color:var(--walnut)}
.pg strong{font-weight:500;color:var(--espresso)}

.pg .label{
  font-size:11px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--walnut);
}
/* The one paragraph under an h1, set larger. Capped well short of the body
   measure so it reads as a stand-first rather than a paragraph that happens to
   be big. */
.pg .lede{font-size:clamp(18px,2.1vw,21px);line-height:1.5;max-width:34em}

/* ---------- shell ---------- */
.pg .wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
/* main.wrap, not main. <main> carries both classes, and `.pg main` is (0,1,1)
   against `.pg .wrap`'s (0,2,0) — so the shorthand above won and this rule's
   vertical padding was silently dropped, leaving the page's first heading
   jammed under the breadcrumbs and the closing CTA against the footer.
   Longhands as well as a higher-specificity selector, so the horizontal gutter
   above is left alone rather than re-stated here and then forgotten. */
.pg main.wrap{
  padding-top:clamp(28px,5vh,44px);
  padding-bottom:clamp(64px,11vh,120px);
}

/* The reading column. 42rem lands body text at roughly 68 characters, which is
   where a 17px line stops being work to track. Anything that wants the full
   grid — a card row, a table — sits outside it or opts out with .wide. */
.pg .col{max-width:42rem}
.pg .wide{max-width:none}

/* Vertical rhythm comes from one rule rather than per-element margins, so
   nothing collapses or doubles when sections are reordered. */
.pg .stack > * + *{margin-top:18px}
.pg .stack > * + h2{margin-top:clamp(40px,6vh,64px)}
.pg .stack > * + h3{margin-top:clamp(26px,3.5vh,34px)}
.pg .stack > h2 + *,.pg .stack > h3 + *{margin-top:12px}
.pg .stack > * + .label{margin-top:clamp(40px,6vh,64px)}
.pg .stack > .label + *{margin-top:8px}

.pg .rule{border:0;border-top:1px solid var(--limestone);margin:clamp(44px,7vh,76px) 0}

/* ---------- lists ----------
   Markers outside the box, so a wrapped line sits under the first word of the
   line above rather than under the bullet. */
.pg .list{padding-left:1.1em;list-style-position:outside}
.pg .list li + li{margin-top:10px}
.pg .list li::marker{color:var(--terracotta)}
.pg ol.list{list-style:decimal}
.pg ul.list{list-style:disc}

/* A run of short named points. Used where a list of labelled rules reads better
   than prose but a table would be overkill. */
.pg .defs{display:grid;gap:18px}
.pg .defs > div > p{margin-top:4px}

/* ---------- table ----------
   Scrolls in its own container at phone width, so the page body never moves
   sideways. tabular-nums because every one of these tables has a column of
   measurements in it. */
.pg .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px}
.pg table{border-collapse:collapse;width:100%;min-width:34rem;font-size:15px;line-height:23px}
.pg th,.pg td{
  text-align:left;padding:11px 16px 11px 0;vertical-align:top;
  border-bottom:1px solid var(--limestone);
}
.pg th{
  font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--espresso);white-space:nowrap;
}
.pg td{color:var(--walnut);font-variant-numeric:tabular-nums}
.pg tbody tr:last-child td{border-bottom:0}

/* ---------- note ----------
   An aside that qualifies what was just said — where a figure comes from, what
   varies by venue. A left rule rather than a filled box: these interrupt a
   reading page, and a card would interrupt it harder. */
.pg .note{
  border-left:2px solid var(--terracotta);
  padding:2px 0 2px 18px;
  font-size:15px;line-height:24px;
}

/* ---------- cards ---------- */
.pg .cards{display:grid;gap:14px;margin-top:22px}
@media(min-width:900px){
  .pg .cards-3{grid-template-columns:repeat(3,1fr)}
  .pg .cards-2{grid-template-columns:repeat(2,1fr)}
}
/* A card is a link to another page in the set. The whole box is the target — a
   13px "Read more" is not a tap target. */
.pg .card{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--limestone);border-radius:2px;
  padding:22px 22px 24px;text-decoration:none;
  background:transparent;
  transition:border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.pg .card:hover{border-color:var(--terracotta);transform:translateY(-2px)}
.pg .card h3{font-size:18px;line-height:25px}
.pg .card p{font-size:15px;line-height:23px;margin:0}
.pg .card .card-go{
  margin-top:auto;padding-top:10px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--terracotta);
}

/* ---------- button ----------
   Same geometry and the same two states as the homepage's, so a visitor who
   came from there meets the control they already pressed once. */
.pg .btn{
  align-self:flex-start;font-family:inherit;font-size:17px;line-height:28px;font-weight:500;
  background:var(--terracotta);color:var(--ivory);border-radius:2px;padding:16px 34px;
  border:1px solid transparent;text-decoration:none;display:inline-block;
  transition:background .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.pg .btn:hover{background:var(--walnut);transform:translateY(-2px)}
.pg .btn-quiet{
  background:transparent;color:var(--walnut);border-color:var(--limestone);
  padding:14px 26px;font-size:15px;
}
.pg .btn-quiet:hover{background:transparent;border-color:var(--terracotta);color:var(--terracotta)}

/* ---------- closing ask ----------
   Every reading page ends on the same one, because every reading page exists to
   send someone to the form. Ruled off and centred: it is the page ending, not
   another section of it. */
.pg .ask{
  border-top:1px solid var(--limestone);
  margin-top:clamp(56px,9vh,100px);
  padding-top:clamp(40px,7vh,72px);
  display:grid;justify-items:center;text-align:center;
}
.pg .ask-lede{
  font-family:var(--display);font-size:clamp(23px,3.2vw,36px);line-height:1.14;
  color:var(--espresso);max-width:24ch;
}
.pg .ask .btn{margin-top:22px;align-self:center}
.pg .ask-sub{
  margin-top:12px;font-size:12px;line-height:18px;letter-spacing:.04em;
  color:var(--walnut);opacity:.75;
}
@media(max-width:760px){
  .pg .ask .btn{margin-top:18px;font-size:15px;padding:14px 26px}
}

/* ---------- faq rows on a reading page ----------
   Same component as the homepage's, restated here because the homepage's copy
   lives in its inline block. name="faq" on the elements makes them mutually
   exclusive without a script; the marker is a rotated + so it needs no font and
   states both positions honestly — + closed, × open. */
.pg .faq-list{margin-top:22px}
.pg .faq-item{border-top:1px solid var(--limestone)}
.pg .faq-item:last-child{border-bottom:1px solid var(--limestone)}
.pg .faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;
  font-family:var(--display);font-size:clamp(17px,1.8vw,21px);line-height:1.25;
  color:var(--espresso);
}
.pg .faq-item summary::-webkit-details-marker{display:none}
.pg .faq-item summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
/* Walnut at 5.77:1, not terracotta at 4:1 — these questions are normal-size
   text, so a terracotta hover would drop a heading below AA. */
.pg .faq-item summary:hover{color:var(--walnut)}
.pg .faq-item summary::after{
  content:"+";flex:none;
  width:22px;height:22px;display:grid;place-items:center;
  font-family:var(--body);font-size:19px;line-height:1;font-weight:400;
  color:var(--terracotta);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.pg .faq-item[open] summary::after{transform:rotate(45deg)}
.pg .faq-answer{padding:0 0 20px}
.pg .faq-answer p{margin:0;color:var(--walnut);font-size:15px;line-height:25px;max-width:62ch}
.pg .faq-answer p + p{margin-top:12px}
@media(max-width:760px){
  .pg .faq-item summary{padding:15px 0;gap:14px}
  .pg .faq-answer{padding-bottom:16px}
  .pg .faq-answer p{font-size:14px;line-height:23px}
}

/* ---------- reading-page header ----------
   sticky, not fixed, and solid from the first frame. The homepage's bar has to
   be fixed and transparent because it floats over footage; these pages have no
   footage, so the simpler mechanism is the right one and it needs no script. */
.pg .pg-head{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,233,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--limestone);
  padding-top:max(0px, env(safe-area-inset-top));
}
.pg .pg-head .wrap{
  display:flex;align-items:center;gap:16px;
  min-height:var(--head-h);
}
/* 36px, not 30. The lockup is a monogram with "EL PADEL" set under it, and
   below about 34px that second line stops being letters and becomes a smudge —
   the same reason the favicon is the monogram alone. 36 matches the weight the
   homepage's solid bar gives it at 40 without making this header taller. */
.pg .pg-head .logo{height:36px;width:auto;display:block;flex:none}
.pg .pg-head .btn{
  margin-left:auto;flex:none;
  padding:10px 20px;font-size:14px;line-height:22px;
}
/* A sticky bar eats the top of whatever an in-page link lands on. */
.pg h1,.pg h2,.pg h3,.pg .faq-item{scroll-margin-top:calc(var(--head-h) + 24px)}

/* ---------- breadcrumbs ----------
   A real trail, not decoration: these pages are two levels deep and the trail
   is how someone gets back up from a search landing. */
.pg .crumbs{padding-top:clamp(20px,4vh,34px);font-size:12px;line-height:20px}
.pg .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0;margin:0}
.pg .crumbs li{color:var(--walnut);opacity:.8}
.pg .crumbs a{color:var(--walnut);text-decoration:none;border-bottom:1px solid transparent;padding:4px 0}
.pg .crumbs a:hover{border-bottom-color:var(--terracotta);color:var(--terracotta)}
.pg .crumbs li + li::before{content:"/";margin-right:6px;color:var(--limestone)}
.pg .crumbs [aria-current]{opacity:.55}

/* ---------- footer ----------
   The homepage defines these same five selectors in its inline block, so this
   copy is scoped under .pg rather than left bare. Bare would also work — the
   inline block comes after this file and wins on source order — but "works
   because of load order" is a thing to stop relying on, and .pg makes the two
   copies independent. Same values, so the two halves of the site end on the
   same slim espresso colophon. */
.pg .foot{
  background:var(--espresso);color:var(--ivory);
  padding:22px var(--gutter);
  /* The last thing on the page, so it is the one place a visitor cannot scroll
     further to escape Safari's bottom toolbar. The 34px is for that bar; the
     inset is for the home indicator underneath it. */
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
}
.pg .foot .foot-line{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.pg .foot .logo-f{
  height:26px;width:auto;display:block;flex:none;margin:0;opacity:.85;
  filter:brightness(0) saturate(100%) invert(97%) sepia(6%) saturate(310%) hue-rotate(337deg) brightness(103%) contrast(92%);
}
.pg .foot .legal{
  font-size:11px;line-height:18px;color:var(--limestone);opacity:.62;margin:0;
}
/* Padding cancelled by an equal negative margin, so the tap target grows to the
   24x24 WCAG 2.2 asks for without the line moving. An 11px link is a genuinely
   hard thing to hit with a thumb. */
.pg .foot .legal a{color:inherit;display:inline-block;padding:7px 2px;margin:-7px 0}
@media(max-width:760px){
  .pg .foot{padding:18px var(--gutter);padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .pg .foot .foot-line{gap:12px}
  .pg .foot .legal{font-size:10px;line-height:16px}
}

/* ============================================================
   SHARED CHROME
   The two pieces both halves of the site use. New class names, so there is
   nothing in the homepage's inline block for these to fight with.
   ============================================================ */

/* ---------- header nav ----------
   Desktop only, and that is a decision rather than an omission. A hamburger is
   a script, a focus trap and a state to get wrong; at phone width the footer
   nav carries the same five destinations, every reading page opens with a
   breadcrumb trail, and the logo is a link home. Nothing is unreachable.
   Hidden with display:none, so it is out of the tab order at that width too —
   a nav you can tab into but not see is worse than no nav. */
.head-nav{display:none}
@media(min-width:1024px){
  .head-nav{
    display:flex;align-items:center;gap:26px;
    margin:0 auto;
    font-size:14px;line-height:22px;
  }
  .head-nav a{
    color:var(--walnut);text-decoration:none;
    padding:6px 0;border-bottom:1px solid transparent;
    transition:color .25s ease,border-color .25s ease;
    white-space:nowrap;
  }
  .head-nav a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
  /* The page you are on, stated rather than merely not-a-link. */
  .head-nav [aria-current]{color:var(--espresso);border-bottom-color:var(--limestone)}
}
/* On the homepage the bar is transparent over the hero, where walnut on
   near-black would be invisible. It fades in with the solid day bar, which is
   also when the wordmark beside it appears.

   visibility, not opacity alone. opacity:0 hides a thing from eyes and from the
   mouse while leaving it in the tab order and in the accessibility tree, so the
   first version of this put four invisible links in front of every keyboard
   visitor: one Tab from a fresh load landed on "Memberships" with the focus
   ring drawn on something at opacity 0, and nothing on screen moved. That is a
   WCAG 2.4.7 failure, and it is the same mistake the mobile reserve bar once
   had — see the note beside #stickyCta, which settled on the same answer.

   visibility:hidden takes it out of the tab order and out of the accessibility
   tree, and puts both back by itself when the day bar arrives. Transitioning
   visibility alongside opacity is what keeps the fade: the property flips at
   the far end of the 450ms rather than at the start, so the nav is still
   visible all the way out and becomes focusable the moment it starts coming
   back. pointer-events stays because it is the one of the three that handles
   the mouse during the fade itself. */
.site-head .head-nav{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility .45s ease;
}
.site-head.is-day .head-nav{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- footer nav ----------
   The whole site in one row on the espresso ground, and at phone width the only
   nav there is. Ivory at .82 rather than limestone: these are links someone is
   meant to use, not a colophon they are meant to skim past. */
.foot-nav{flex-basis:100%;margin:2px 0 4px}
.foot-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px;padding:0;margin:0;
}
.foot-nav a{
  color:var(--ivory);opacity:.82;text-decoration:none;
  font-size:13px;line-height:20px;
  /* padded to a 24px box and pulled back by the same amount, so the tap target
     clears WCAG 2.2 without the row changing height */
  display:inline-block;padding:7px 2px;margin:-7px 0;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover{opacity:1;border-bottom-color:var(--terracotta-lift)}
.foot-nav [aria-current]{opacity:1;border-bottom-color:var(--limestone)}

@media(prefers-reduced-motion:reduce){
  .pg .card,.pg .btn,.pg .faq-item summary::after,.head-nav a{transition:none}
  .pg .card:hover,.pg .btn:hover{transform:none}
}