/* Groundup Society base styles: reset, type, layout, header, footer, buttons,
   shared shapes and reveals. Colours come from tokens.css only. */

/* ---------- Reset and type ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--black);font:400 17px/1.6 var(--body);overflow-x:clip}
img,svg,canvas{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--head);margin:0;letter-spacing:-.035em;text-wrap:balance}
p,ul,ol,figure,blockquote{margin:0}
a{color:var(--clay-deep);text-underline-offset:4px}
a:hover{color:var(--black)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--clay-deep);outline-offset:3px}
.on-dark :focus-visible,.site-footer :focus-visible,.cookie-banner :focus-visible{outline-color:var(--clay-light)}
.on-dark{background:var(--black);color:var(--paper)}
.on-dark a:not(.btn){color:var(--clay-light)}
.on-dark a:not(.btn):hover{color:var(--paper)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media (max-width:700px){.wrap{padding:0 16px}}

.skip-link{position:absolute;left:var(--s4);top:var(--s4);z-index:100;padding:var(--s3) var(--s5);border-radius:var(--r-pill);background:var(--black);color:var(--paper);font-weight:500;text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none;color:var(--paper)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:var(--r-pill);font:500 16px/1 var(--body);text-decoration:none;border:1.5px solid var(--black);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-dark{background:var(--black);color:var(--paper)}
.btn-dark:hover{background:var(--espresso);border-color:var(--espresso);color:var(--paper)}
.btn-line{background:transparent;color:var(--black)}
.btn-line:hover{background:var(--bench);color:var(--black)}
.btn-clay{background:var(--clay);border-color:var(--clay);color:var(--black)}
.btn-clay:hover{background:var(--clay-light);border-color:var(--clay-light);color:var(--black)}
.btn-line-light{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn-line-light:hover{background:color-mix(in srgb,var(--paper) 12%,transparent);color:var(--paper)}
.btn-small{min-height:44px;padding:0 20px;font-size:15px}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--bench);border-color:var(--bench);color:var(--grey-text);cursor:not-allowed}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:20;background:var(--paper)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s5) var(--s6);flex-wrap:wrap;min-height:92px}
.site-header .mark{display:block;flex:none}
.site-header .mark img{height:58px;width:auto}
.site-header nav{display:flex;align-items:center;gap:6px 30px;flex-wrap:wrap;margin-left:auto}
.site-header nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--black);text-decoration:none;font-weight:500;font-size:15.5px}
.site-header nav a:not(.btn):hover,
.site-header nav a:not(.btn)[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-toggle{margin-left:auto;display:none;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid var(--black);background:transparent;font:500 15px/1 var(--body);cursor:pointer}
.nav-toggle .bars{position:relative;width:18px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:2px;margin-top:-1px;background:currentColor;opacity:0}
.nav-toggle[aria-expanded="true"]{background:var(--black);color:var(--paper)}
/* open: the two bars give way to a cross, and site.js changes the label to "Close" */
.nav-toggle[aria-expanded="true"] .bars{border-color:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{opacity:1;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{opacity:1;transform:rotate(-45deg)}

@media (max-width:1020px){
  /* Without JavaScript the links simply wrap under the logo. With it, they fold behind the toggle. */
  .site-header .wrap{padding-top:var(--s3);padding-bottom:var(--s3)}
  .site-header nav{margin-left:0;width:100%}
  .js .nav-toggle{display:inline-flex}
  .js .site-header nav{display:none;position:absolute;left:0;right:0;top:100%;width:auto;flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--s4) var(--s5);background:var(--paper);border-bottom:2px solid var(--black)}
  .js .site-header nav.is-open{display:flex}
  .js .site-header nav a:not(.btn){min-height:52px;font-size:18px;border-bottom:1px solid var(--line)}
  .js .site-header nav .btn{margin-top:var(--s4);min-height:54px}
}
@media (max-width:700px){.site-header .wrap{min-height:76px}.site-header .mark img{height:46px}}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero .wrap{position:relative;padding-top:var(--s8);padding-bottom:var(--s8)}
.page-hero h1{font-weight:800;font-size:clamp(44px,5.6vw,84px);line-height:.98;max-width:14ch}
.page-hero h1 em{font-style:normal;color:var(--clay-deep)}
.page-hero .lede{margin-top:22px;font-size:19px;max-width:46ch}
.page-hero .star{position:absolute;right:5%;top:50%;width:clamp(190px,21vw,280px);background:var(--bench);transform:translateY(-50%);z-index:-1}
@media (max-width:700px){.page-hero .wrap{padding-top:var(--s7);padding-bottom:var(--s7)}.page-hero .star{display:none}}

/* ---------- Shared shapes: geometry only ---------- */
/* Eight-point star (two squares, one turned 45 degrees). Give it a background. */
.star{display:block;aspect-ratio:1/1;clip-path:polygon(50% 0,35.36% 14.64%,14.64% 14.64%,14.64% 35.36%,0 50%,14.64% 64.64%,14.64% 85.36%,35.36% 85.36%,50% 100%,64.64% 85.36%,85.36% 85.36%,85.36% 64.64%,100% 50%,85.36% 35.36%,85.36% 14.64%,64.64% 14.64%)}
/* Pointed arch. Put it on an image or on a box that holds one. */
.arch{display:block;overflow:hidden;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V58C0 30 24 10 50 0C76 10 100 30 100 58V140Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V58C0 30 24 10 50 0C76 10 100 30 100 58V140Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.arch img,img.arch{width:100%;height:100%;object-fit:cover}

/* ---------- Heading reveal (site.js splits .reveal into lines) ---------- */
.l-mask{padding-bottom:.12em;margin-bottom:-.12em}

/* ---------- To be confirmed marker ---------- */
.tbc{display:inline-block;padding:0 7px;border:1px dashed currentColor;border-radius:6px;font:500 .82em/1.5 var(--body);letter-spacing:0;white-space:nowrap;vertical-align:baseline}

/* ---------- Status chip and store rows ---------- */
.chip{display:inline-block;font:600 13.5px/1 var(--body);padding:9px 13px;border-radius:var(--r-pill);background:var(--bench);color:var(--black);white-space:nowrap}
.chip.open{background:var(--black);color:var(--paper)}
.store-list{border-top:2px solid var(--black)}
.store-row{position:relative;display:grid;grid-template-columns:1.2fr 1fr auto;gap:var(--s5);align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:background .2s}
.store-row h3{font-weight:700;font-size:clamp(24px,2.8vw,36px)}
.store-row h3 a{color:inherit;text-decoration:none}
.store-row h3 a::after{content:"";position:absolute;inset:0}
.store-row:hover{background:color-mix(in srgb,var(--bench) 45%,transparent)}
.store-row:hover h3 a{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:3px;text-underline-offset:6px}
.store-row h3 a:focus-visible{outline:none}
.store-row:has(a:focus-visible){outline:3px solid var(--clay-deep);outline-offset:3px}
.store-row .where{color:var(--grey-text)}
@media (max-width:700px){.store-row{grid-template-columns:1fr auto}.store-row .where{grid-column:1}}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:var(--on-dark-2);border-top:1px solid color-mix(in srgb,var(--paper) 14%,var(--black))}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s4) var(--s5);flex-wrap:wrap;padding-top:var(--s6);padding-bottom:var(--s6);font-size:14.5px}
.site-footer img{height:44px;width:auto}
.site-footer nav{display:flex;gap:0 20px;flex-wrap:wrap}
.site-footer nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--paper);text-decoration:none}
.site-footer nav a:hover{text-decoration:underline;text-decoration-color:var(--clay-light);text-underline-offset:6px}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:60;max-width:760px;margin:0 auto;padding:var(--s5);border-radius:var(--r-card);background:var(--black);color:var(--on-dark);box-shadow:0 24px 48px -16px color-mix(in srgb,var(--black) 55%,transparent);display:flex;align-items:center;gap:var(--s4) var(--s5);flex-wrap:wrap;font-size:15.5px}
.cookie-banner p{flex:1 1 300px}
.cookie-banner a:not(.btn){color:var(--clay-light)}
.cookie-banner .actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.cookie-banner .btn{min-height:48px;padding:0 22px}