/* ---------------------------------------------------------------------------
   site.css: what every page shares.

   The colours and fonts, the white curtain the page lifts out of, the rise
   and the scroll reveal, the navy header with its phone menu, and the navy
   footer. Each page's own rules follow in css/pages/. See "Stylesheets and
   scripts" in the README.
   --------------------------------------------------------------------------- */

:root{
  --blue:#08268b; --blue-deep:#061c66; --white:#ffffff;
  --gold:#08268b; --gold-soft:#5b73c4;
  --ink:#12162a; --muted:#6a7290; --line:rgba(18,22,42,.12);
  --paper:#faf9f6;
  --collegiate:'Big Shoulders Display','Arial Narrow',sans-serif;
  --serif:'Space Grotesk',system-ui,sans-serif;
  --util:'Space Grotesk',system-ui,sans-serif;
  --maxw:1320px;
  --navy:#0f2163; --night:#0a1747; --royal:#2f55cf; --sky:#c9d3f5;
  --letter:'Archivo','Arial Narrow',system-ui,sans-serif;
  --ease:cubic-bezier(.65,0,.2,1);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--util);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;pointer-events:none}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.curtain{position:fixed;inset:0;background:var(--white);z-index:200;animation:fade .6s .1s ease forwards;pointer-events:none}
@keyframes fade{to{opacity:0;visibility:hidden}}
.rise{opacity:0;transform:translateY(16px);animation:rise .8s .2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
/* ===== scroll reveal (professional entrance) ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.hero .inner>*{opacity:0;transform:translateY(20px);animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .inner>*:nth-child(1){animation-delay:.15s}
.hero .inner>*:nth-child(2){animation-delay:.3s}
.hero .inner>*:nth-child(3){animation-delay:.45s}
@keyframes heroIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .reveal,.hero .inner>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
.hero .inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%;padding:6rem 28px clamp(3rem,7vw,5rem)}
/* ===== the header: navy, held at the top, the shops either side of the wordmark ===== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.topbar{position:sticky;top:0;z-index:120;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:calc(var(--safe-t) + .7rem) clamp(16px,4vw,56px) .7rem;background:var(--navy);color:#fff;font-family:var(--letter)}
.topbar-shops{display:flex;gap:1.6rem;font-size:.95rem;font-weight:500}
.topbar-shops a{padding-block:.5rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.topbar-shops a:hover,.topbar-shops a[aria-current="page"]{background-size:100% 2px}
.topbar-mark img{height:48px;width:auto}
.topbar-end{display:flex;justify-content:flex-end;align-items:center;gap:.6rem}
.topbar-book{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.2rem;border-radius:999px;background:#fff;color:var(--navy);font-weight:600;font-size:.9rem;white-space:nowrap;transition:background .2s,color .2s}
.topbar-book:hover{background:var(--royal);color:#fff}
.topbar-menu{display:none;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:none;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);cursor:pointer}
.topbar-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.topbar a:focus-visible,.topbar-menu:focus-visible,.phone-menu a:focus-visible,.site-foot a:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* the phone's menu: the three shops big, the booking button and socials at the bottom */
.phone-menu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;padding:calc(var(--safe-t) + .7rem) 20px calc(env(safe-area-inset-bottom,0px) + 1.4rem);background:var(--navy);color:#fff;font-family:var(--letter)}
.phone-menu[hidden]{display:none}
.phone-menu-top{display:flex;justify-content:space-between;align-items:center}
.phone-menu-mark{width:36px;height:43px;color:#fff}
.phone-menu-top .topbar-menu{display:grid}
.phone-menu-shops{display:grid;gap:1.1rem;margin-top:2.4rem}
.phone-menu-shops a{display:grid;gap:.15rem;font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:3.1rem;line-height:.86}
.phone-menu-shops small{font-weight:700;font-stretch:100%;font-size:.68rem;letter-spacing:.2em;color:var(--sky)}
.phone-menu-book{margin-top:auto;display:flex;justify-content:center;align-items:center;min-height:50px;border-radius:999px;background:#fff;color:var(--navy);font-weight:600}
.phone-menu-socials{display:flex;justify-content:center;gap:1.6rem;margin-top:1.1rem}
.phone-menu-socials svg{width:30px;height:30px;fill:currentColor}
body.menu-open{overflow:hidden}

/* ===== the footer: navy with the TC faint behind it, the same on every page ===== */
.site-foot{position:relative;overflow:hidden;background:var(--navy);color:#fff;font-family:var(--letter);padding-top:clamp(2.2rem,4vw,3rem)}
.site-foot-crest{position:absolute;right:-4%;bottom:-18%;width:52%;height:120%;color:#fff;opacity:.06;pointer-events:none}
.site-foot-wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.site-foot-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.2rem,3vw,2.6rem);align-items:start}
/* the TC as a letterman patch: three copies, the back two outlined */
.patch{position:relative;display:block;width:118px;height:141px;margin:12px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.patch:hover{transform:rotate(-4deg) scale(1.04)}
.patch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.patch-1{color:#fff;stroke:#fff;stroke-width:30;stroke-linejoin:round}
.patch-2{color:var(--navy);stroke:var(--navy);stroke-width:16;stroke-linejoin:round}
.patch-3{color:#fff}
/* the address and phone as two ruled rows */
.reach{display:grid;gap:1.4rem}
.reach-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;width:min(400px,100%);padding:.8rem .2rem;border-top:1.5px solid rgba(255,255,255,.2);font-weight:800;font-stretch:75%;font-size:1.15rem;transition:padding .3s var(--ease),color .2s}
.reach-row+.reach-row{margin-top:-1.4rem;border-bottom:1.5px solid rgba(255,255,255,.2)}
.reach-row:hover{padding-left:.7rem;color:var(--sky)}
.line-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the social buttons: big thin drawings, each name rising up under it on hover */
.socials{display:flex;gap:1.5rem;padding-bottom:1.2rem}
.socials a{position:relative;display:grid;place-items:center;transition:color .2s}
.socials svg{width:40px;height:40px;fill:currentColor;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.socials-name{position:absolute;top:100%;left:50%;margin-top:.35rem;transform:translate(-50%,-4px);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--sky);opacity:0;transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.socials a:hover svg,.socials a:focus-visible svg{transform:translateY(-3px)}
.socials a:hover .socials-name,.socials a:focus-visible .socials-name{opacity:1;transform:translate(-50%,0)}
/* the hours: a column for each day, today lit up white */
.hours{background:var(--night);border-radius:16px;padding:.9rem 1rem 1rem;box-shadow:0 0 0 2px var(--sky)}
.hours h2{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:1.2rem;letter-spacing:.02em;margin-bottom:1rem}
.hours-days{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.hours-days li{position:relative;display:grid;justify-items:center;align-content:start;gap:.15rem;min-width:3.4rem;padding:.55rem .2rem .6rem;border-radius:9px;background:#0f1c55;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.hours-days b{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:1.05rem;color:var(--sky);margin-bottom:.15rem}
.hours-days span{font-weight:800;font-stretch:70%;font-size:.95rem;line-height:1.1}
.hours-days i{font-style:normal;font-size:.68rem;font-weight:600;color:var(--sky);line-height:1}
.hours-days .closed{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(201,211,245,.25)}
.hours-days .shut{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--sky);margin-top:.55rem}
.hours-days .today{background:#fff;color:var(--navy);box-shadow:none}
.hours-days .today b,.hours-days .today i,.hours-days .today .shut{color:var(--blue)}
.hours-days .today::before{content:attr(data-today);position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--royal);color:#fff;padding:.15rem .4rem;border-radius:999px}
/* a photo tile for each way to shop, its pages over the photo */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(1.4rem,3vw,2rem)}
.tile{position:relative;min-height:200px;border-radius:18px;overflow:hidden;isolation:isolate;display:flex}
.tile picture,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(10,23,71,.96) 10%,rgba(10,23,71,.7) 55%,rgba(10,23,71,.6))}
.tile:hover img{transform:scale(1.06)}
.tile-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;padding:1rem 1.1rem 1.05rem;width:100%}
.tile-name{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(1.8rem,2.8vw,2.5rem);line-height:.88}
.tile ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1rem}
.tile li a{display:inline-flex;align-items:center;min-height:26px;font-size:.92rem;font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.tile li a:hover,.tile-name:hover{background-size:100% 2px}
.site-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(1.6rem,3vw,2.2rem);padding-block:1.1rem;border-top:1px solid rgba(255,255,255,.2);font-size:.82rem}
.sign-off{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--sky)}
@media(max-width:860px){
  .topbar{grid-template-columns:auto 1fr}
  .topbar-shops,.topbar-book{display:none}
  .topbar-menu{display:grid}
  .topbar-mark img{height:38px}
  .site-foot-top{grid-template-columns:1fr;justify-items:center;text-align:center}
  .reach{justify-items:center}
  .reach-row{text-align:left}
  .socials{justify-content:center}
  .hours{width:100%}
  .hours-days{gap:3px}
  .hours-days li{min-width:0;padding-inline:.1rem}
  .hours-days span{font-size:.78rem}
  .hours-days b{font-size:.9rem}
  .hours-days .shut{font-size:.58rem;letter-spacing:0}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:170px}
  .site-foot-bottom{flex-direction:column;text-align:center;gap:.4rem}
}
@media(prefers-reduced-motion:reduce){
  .curtain{display:none}
  .rise{opacity:1;transform:none;animation:none}
  .patch,.reach-row,.socials svg,.socials-name,.tile img,.topbar-shops a{transition:none}
}