/* Shared by index.html, hire.html and book.html.
   404.html and the maintenance page in src/index.js deliberately carry their
   own inline copies — both must render when nothing else is being served. */

/* ─────────────────────────────────────────────────────────────────
     Translated from the Claude Design source "Shorewell Landing Page.dc.html".
     The source authors everything as inline style attributes plus a
     `style-hover` attribute that only the design editor understands, and it
     carries no media queries. Here those become real CSS: classes, :hover /
     :focus-visible rules, and breakpoints, so the page works in a browser.
     ───────────────────────────────────────────────────────────────── */

  :root {
    --sand: #F7F4F0;
    --white: #FFFFFF;
    --ink: #3D3D3D;
    --muted: #6B6B6B;
    --line: #E8E0D4;
    --clay: #855948;
    --clay-hover: #9E6E5A;
    --blush: #F4EBE6;
    --blush-deep: #E6D8D0;
    --night: #14110F;
    --sand-warm: #C79C87;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .trainer-more > summary::after { transition: none; }
  }

  body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
    background: var(--sand);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--clay); }
  a:hover { color: var(--ink); }

  :focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }

  h1, h2, h3, p { margin: 0; }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 96px 40px; }

  .eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--clay);
  }

  .h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 400; line-height: 1.25;
  }

  .lede {
    font-size: 17px; line-height: 1.8; color: var(--muted); text-wrap: pretty;
  }

  /* ── Skip link ── */
  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: 12px 20px; background: var(--clay); color: var(--white);
    text-decoration: none; font-size: 14px;
  }
  .skip:focus { left: 0; }

  /* ── Header ── */
  .site-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 14px 24px;
    background: rgba(247,244,240,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }

  .brand {
    font-family: 'Playfair Display', serif; font-size: 20px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--clay); text-decoration: none; white-space: nowrap;
  }

  .header-right { display: flex; align-items: center; gap: 28px; }
  .site-nav { display: flex; align-items: center; gap: 28px; }

  /* Burger lives in nav.js; see the note there on why this is a button and not
     a <details>. Collapsing is gated on html.js so the links stay visible if
     the script never runs. */
  .nav-toggle {
    display: none; padding: 0; border: 0; background: none;
    color: var(--ink); cursor: pointer;
  }

  .site-nav a {
    font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
  }
  .site-nav a:hover { color: var(--clay); }

  .nav-cta {
    padding: 10px 20px; background: var(--clay); color: var(--white) !important;
    font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; text-decoration: none;
  }
  .nav-cta:hover { background: var(--clay-hover); }


  /* Four links, a wordmark and a CTA stop fitting comfortably below this, so
     the links collapse behind a burger while Book stays reachable. */
  @media (max-width: 900px) {
    .header-right { gap: 14px; position: relative; }

    /* order, rather than moving the button in the markup: the toggle must stay
       before the nav in the DOM so tabbing out of it lands on the first menu
       item. Reordering the markup would make Tab skip the open menu entirely. */
    .js .nav-toggle {
      display: flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; margin-right: -10px; order: 1;
    }
    .nav-toggle:hover { color: var(--clay); }
    .burger, .burger::before, .burger::after {
      display: block; width: 22px; height: 1.5px;
      background: currentColor; transition: transform 180ms ease, opacity 180ms ease;
    }
    .burger { position: relative; }
    .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
    .burger::before { top: -7px; }
    .burger::after  { top: 7px; }
    .nav-toggle[aria-expanded="true"] .burger { background: transparent; }
    .nav-toggle[aria-expanded="true"] .burger::before { top: 0; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .burger::after  { top: 0; transform: rotate(-45deg); }

    .js .site-nav {
      display: none;
      position: absolute; right: 0; top: calc(100% + 15px);
      flex-direction: column; align-items: stretch; gap: 0;
      min-width: 210px; padding: 6px 0;
      background: var(--sand); border: 1px solid var(--line);
      box-shadow: 0 12px 32px rgba(61,61,61,0.12);
    }
    .js .site-nav.is-open { display: flex; }
    .js .site-nav a { padding: 13px 22px; }
    .js .site-nav a:hover { background: var(--blush); }
  }

  @media (prefers-reduced-motion: reduce) {
    .burger, .burger::before, .burger::after { transition: none; }
  }

  /* ── Hero ── */
  .hero { position: relative; min-height: 740px; background: var(--night); color: var(--white); }

  .hero-bg {
    position: absolute; inset: 0; z-index: 2;
    background-image: url('/img/hero.jpg');
    background-size: cover; background-position: 62% 40%;
  }

  .hero-scrim {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(100deg, rgba(12,10,9,0.95) 0%, rgba(12,10,9,0.86) 34%, rgba(12,10,9,0.5) 66%, rgba(12,10,9,0.62) 100%);
  }

  .hero-inner {
    position: relative; z-index: 4;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 740px; max-width: 1080px; margin: 0 auto; padding: 96px 40px;
  }

  .hero-place {
    margin-bottom: 20px; font-size: 12px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--sand-warm);
  }

  .hero h1 {
    margin-bottom: 14px; font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 6vw, 82px); font-weight: 400;
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.02;
  }

  .hero-tagline {
    margin-bottom: 32px; font-size: 17px; letter-spacing: 0.16em;
    text-transform: uppercase; opacity: 0.85;
  }

  .hero-blurb { margin-bottom: 40px; max-width: 400px; font-size: 17px; line-height: 1.7; opacity: 0.9; }

  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

  .btn {
    display: inline-block; padding: 16px 34px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .btn-light { background: var(--white); color: var(--night) !important; }
  .btn-light:hover { background: var(--blush); }

  .btn-ghost { border: 1px solid rgba(255,255,255,0.45); color: var(--white) !important; }
  .btn-ghost:hover { border-color: var(--white); }

  .btn-outline { border: 1px solid var(--clay); color: var(--clay) !important; }
  .btn-outline:hover { background: var(--clay); color: var(--white) !important; }

  .btn-on-clay { background: var(--white); color: var(--clay) !important; padding: 16px 40px; }
  .btn-on-clay:hover { background: var(--blush); }

  /* ── About ── */
  .about-grid { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
  .about-grid h2 { margin-bottom: 20px; max-width: 15ch; }
  .about-grid .lede { max-width: 60ch; }

  /* ── Trainer ── */
  .band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  .trainer-grid { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }

  .trainer-photo {
    aspect-ratio: 4 / 5;
    background-color: var(--blush);
    background-image: url('/img/tati.jpg');
    background-size: cover;
    /* Image is pre-cropped to 4:5, so position only matters if the box ratio
       ever changes. */
    background-position: 50% 50%;
  }

  .trainer-grid h2 { margin: 16px 0 20px; font-size: clamp(26px, 3vw, 36px); }
  .trainer-grid .lede { max-width: 58ch; margin-bottom: 20px; }
  .trainer-quals { font-size: 14px; letter-spacing: 0.06em; color: var(--muted); }

  /* Tati's bio past the first paragraph. Native <details> so the disclosure
     state is announced without any JS; the label stays static ("Read more")
     because <details> already reports expanded/collapsed to assistive tech,
     and swapping the text via CSS generated content reads unreliably. */
  .trainer-more { margin-bottom: 20px; }
  .trainer-more > summary {
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
    color: var(--clay);
  }
  .trainer-more > summary::-webkit-details-marker { display: none; }
  .trainer-more > summary::after {
    content: ""; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
  }
  .trainer-more[open] > summary::after { transform: translateY(1px) rotate(225deg); }
  .trainer-more > summary:hover { color: var(--clay-hover); }
  .trainer-more > .lede:first-of-type { margin-top: 20px; }

  /* ── Schedule ── */
  .table { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }

  .row { display: grid; grid-template-columns: 150px 1fr 120px; background: var(--white); }

  .row.head {
    background: var(--clay); color: var(--white);
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .row.head .cell { padding: 14px 20px; }

  .cell { padding: 16px 20px; }
  .cell.day { font-weight: 700; color: var(--clay); }
  .cell.time { font-size: 15px; color: var(--muted); }

  /* Small label on a class name — e.g. who a session is aimed at. */
  .tag {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    border-radius: 999px; background: var(--blush); color: var(--clay);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; vertical-align: 1px; white-space: nowrap;
  }

  .notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 48px; }
  .notes h3 { margin-bottom: 8px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
  .notes p { font-size: 15px; line-height: 1.7; color: var(--muted); }

  /* ── Pricing ── */
  .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }

  .price {
    padding: 36px 28px 32px; background: var(--white); border: 1px solid var(--line);
  }

  .price.featured { position: relative; background: var(--sand); border: 2px solid var(--clay); }

  .price-flag {
    position: absolute; top: -11px; left: 28px; padding: 4px 12px;
    background: var(--ink); color: var(--white);
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  }

  .price-name {
    margin-bottom: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
  }

  .price-amount {
    margin-bottom: 6px; font-family: 'Playfair Display', serif;
    font-size: 46px; line-height: 1; color: var(--clay);
  }

  .price-detail { font-size: 15px; color: var(--muted); }

  .price-extra {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 14px; color: var(--muted);
  }
  .price-extra strong { color: var(--ink); }

  /* ── Studio hire ── */
  .hire { background: var(--blush); }
  .hire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .hire-grid h2 { margin: 16px 0 20px; }
  .hire-grid .lede { max-width: 52ch; margin-bottom: 32px; }

  .facts { display: grid; margin-bottom: 36px; border-top: 1px solid rgba(133,89,72,0.2); }
  .fact {
    display: grid; grid-template-columns: 160px 1fr; gap: 20px;
    padding: 16px 0; border-bottom: 1px solid rgba(133,89,72,0.2);
  }
  .fact dt { font-weight: 700; color: var(--clay); }
  .fact dd { margin: 0; font-size: 15px; color: var(--muted); }

  .hire-contact { margin-top: 20px; font-size: 15px; color: var(--muted); }
  .hire-contact a { overflow-wrap: anywhere; }

  .hire-photo {
    aspect-ratio: 4 / 3;
    background-color: var(--blush-deep);
    background-image: url('/img/studio.jpg');
    background-size: cover;
    background-position: 50% 50%;
  }

  /* ── CTA banner ── */
  .cta-banner { background: var(--clay); color: var(--white); text-align: center; padding: 88px 40px; }
  .cta-banner h2 { margin-bottom: 14px; }
  .cta-banner p { margin-bottom: 36px; font-size: 17px; opacity: 0.85; }

  /* ── Booking ── */
  .booking { background: var(--white); border-top: 1px solid var(--line); scroll-margin-top: 72px; }
  .booking .lede { max-width: 60ch; margin-top: 12px; }

  /* Bookamat booking widget. Sizes itself via postMessage from the iframe —
     see the listener before </body>. min-height keeps the block from
     collapsing before that first message arrives. */
  .bookamat-embed { width: 100%; max-width: 1120px; margin: 32px auto 0; }
  .bookamat-embed iframe {
    display: block; width: 100%; min-height: 760px;
    border: 0; background: transparent;
  }
  .bookamat-embed iframe[data-bookamat-resize-ready="true"] { overflow: hidden; }

  .booking-fallback { margin-top: 28px; font-size: 14px; color: var(--muted); }
  .table-note { margin-top: 20px; font-size: 14px; color: var(--muted); }

  /* ── Footer ── */
  .site-footer { background: var(--ink); color: var(--line); padding: 64px 40px 40px; }
  .footer-grid {
    max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px;
  }
  .footer-brand {
    margin-bottom: 8px; font-family: 'Playfair Display', serif; font-size: 20px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
  }
  .footer-h {
    margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; opacity: 0.5;
  }
  .site-footer p { font-size: 14px; }

  /* Icon-only link: the accessible name lives on the anchor's aria-label,
     and the box is 44px so it is a usable tap target on a phone. The negative
     margin pulls the glyph back into line with the text above it. */
  .footer-social { margin-top: 10px; }
  .footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: -12px; border-radius: 50%;
    color: var(--line);
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .footer-social a:hover { color: var(--white); background: rgba(255,255,255,0.08); }
  .footer-social svg { width: 21px; height: 21px; fill: currentColor; display: block; }
  .site-footer a { color: var(--line); }
  .site-footer a:hover { color: var(--white); }
  .footer-legal {
    max-width: 1080px; margin: 48px auto 0; padding-top: 24px;
    border-top: 1px solid rgba(232,224,212,0.15); font-size: 13px; opacity: 0.5;
  }

  /* ─────────────────────────────────────────────────────────────────
     Responsive. The design source has no breakpoints and uses fixed
     two-column grids, which collapse badly under ~900px; these restore it.
     ───────────────────────────────────────────────────────────────── */

  @media (max-width: 900px) {
    .wrap { padding: 64px 24px; }
    .about-grid { grid-template-columns: 1fr; gap: 16px; }
    .trainer-grid { grid-template-columns: 1fr; gap: 32px; }
    .trainer-photo { max-width: 320px; }
    .hire-grid { grid-template-columns: 1fr; gap: 36px; }
    .hire-photo { order: -1; }
    .hero-inner { padding: 72px 24px; }
  }

  @media (max-width: 700px) {
    .site-header { padding: 12px 16px; gap: 12px; }
    .site-nav { gap: 16px; }


    .hero, .hero-inner { min-height: 560px; }
    .hero-bg { background-image: url('/img/hero-mobile.jpg'); background-position: 86% 40%; }
    .hero-scrim { background: linear-gradient(170deg, rgba(12,10,9,0.82) 0%, rgba(12,10,9,0.72) 50%, rgba(12,10,9,0.88) 100%); }
    .hero-actions .btn { flex: 1 1 100%; text-align: center; }

    .row, .row.head { grid-template-columns: 92px 1fr 76px; }
    .cell, .row.head .cell { padding: 12px 10px; font-size: 14px; }
    .cell.time { font-size: 13px; }

    .fact { grid-template-columns: 1fr; gap: 2px; }
    .cta-banner { padding: 64px 24px; }
    .site-footer { padding: 48px 24px 32px; }
  }