/* ---------------------------------------------------------------------------
   chrome.css: the header, the open sign, the navigation, the footer and the
   back-to-top strip. Everything that is the same on every page.

   In the design files this markup was copied into each page and the only
   thing that differed between one copy and the next was which link carried
   aria-current="page". That is worked out from the page's own address now, so
   a new page gets it right without anybody remembering to.

   Each thing here is set once. An earlier version of this file set the
   navigation three times and the checkerboard twice, because it kept every
   pass the design went through; the values below are the ones those stacks
   actually computed to, declared once each. If a change is not taking effect,
   the selector is wrong rather than the order.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------------
   The badge hangs off the left and the three links sit right. The badge's
   negative bottom margin is what pulls it down through the checkerboard, and
   .header-spacer underneath is what makes room for the part that hangs. The
   two move together: change one and the other has to follow.
   --------------------------------------------------------------------------- */
.site-header{background:var(--ink);color:var(--cream);position:relative;z-index:10}
.mainnav{min-height:150px;display:grid;grid-template-columns:260px 1fr;align-items:center;gap:28px;position:relative}

.nav-logo{width:240px;justify-self:start;align-self:start;margin-top:14px;margin-bottom:-78px;filter:drop-shadow(0 10px 0 rgba(0,0,0,.18));position:relative;z-index:3;text-decoration:none}
.badge{display:block;width:100%;height:auto;aspect-ratio:294.34/355.52}
.header-spacer{height:82px}

/* The tab that fills upward on hover. The pseudo-element is on z-index:-1 and
   the link makes its own stacking context, so the fill sits behind the word
   without a background that would have to be repainted on every hover. */
.nav{display:flex;gap:26px;align-items:center;justify-content:flex-end;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:27px;letter-spacing:-.015em}
.nav a{position:relative;z-index:0;padding:8px 12px;text-decoration:none;transition:color .2s var(--ease-settle)}
.nav a:before{content:"";position:absolute;inset:4px 0;background:var(--mint);z-index:-1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .2s var(--ease-settle)}
.nav a:hover:before,.nav a[aria-current="page"]:before{transform:scaleY(1)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}

/* ---------------------------------------------------------------------------
   The open sign
   ---------------------------------------------------------------------------
   Hung in the dark space between the badge and the navigation. It is
   positioned, so it takes no part in the grid and the header is the same
   height whether it is shown or not: with JavaScript off it stays hidden and
   nothing moves.

   The cord and the sign's shadow are cream rather than ink here, because ink
   on ink is invisible. The closed sign takes a cream border for the same
   reason.
   --------------------------------------------------------------------------- */
.sign-hang{position:absolute;left:346px;top:2px;width:196px;z-index:5;color:var(--cream)}
.cord{display:block;width:100%;height:auto}
.sign{position:relative;margin:0;border:3px solid var(--ink);background:var(--mint);color:var(--ink);box-shadow:7px 7px 0 var(--cream);padding:18px 14px 16px;text-align:center}
.sign.shut{background:var(--ink);color:var(--cream);border-color:var(--cream);box-shadow:7px 7px 0 var(--mint)}
.hole{position:absolute;top:8px;width:9px;height:9px;border-radius:50%;background:var(--cream);border:2px solid var(--ink)}
.hole.left{left:32px}
.hole.right{right:32px}
.sign.shut .hole{background:var(--ink);border-color:var(--cream)}
.sign-kicker{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.sign-line{display:block;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:27px;line-height:1;letter-spacing:-.025em}

/* The sway is decoration on the cord, and the sign is a live region, so it is
   the one thing here that a visitor may not want moving. */
@keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
.sign-hang{transform-origin:50% 0;animation:sway 5.5s ease-in-out infinite}

/* ---------------------------------------------------------------------------
   The checkerboard band
   ---------------------------------------------------------------------------
   One conic-gradient rather than four 45-degree linears. The linear version
   met along a seam and left a hairline through every square; a conic tiles
   cleanly at any size.
   --------------------------------------------------------------------------- */
.checker{height:22px;background-color:var(--cream);background-image:conic-gradient(var(--ink) 25%,var(--cream) 0 50%,var(--ink) 0 75%,var(--cream) 0);background-size:22px 22px}

/* ---------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------
   One bordered card in three columns: the shop, where to find it, and the
   rest of the site. The wordmark sits on mint, so --w-bg has to be mint too:
   the pale paths in the mark are the counters of the letters, not
   highlights, and they are filled with whatever the mark is sitting on.
   --------------------------------------------------------------------------- */
.site-footer{background:var(--mint);position:relative;overflow:hidden;color:var(--ink)}
.footer-checker{height:30px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.footer-checker:before{content:"";position:absolute;inset:0 -40px;background-color:var(--cream);background-image:conic-gradient(var(--ink) 25%,var(--cream) 0 50%,var(--ink) 0 75%,var(--cream) 0);background-size:30px 30px}

/* The band slides in as it arrives: the one scroll moment that is on every
   page. Where the browser has scroll-driven animations this is pure CSS and
   no JavaScript is involved. Where it does not, js/main.js adds .js-checker
   and an observer adds .is-in once, which is what the last two rules are for.
   Either way the band is in its final position for a visitor who has asked
   for less motion, and for one with no JavaScript at all. The inset of -40px
   above is the room it needs to travel through without showing an edge. */
@keyframes checkerIn{from{transform:translateX(-26px)}to{transform:translateX(0)}}
@supports (animation-timeline:view()){
  .footer-checker:before{animation:checkerIn var(--ease-settle) both;animation-timeline:view();animation-range:entry 0% entry 85%}
}
.js-checker .footer-checker:before{transform:translateX(-26px)}
.js-checker .footer-checker.is-in:before{transform:none;transition:transform .42s var(--ease-settle)}

.footer-card{width:min(var(--max),calc(100% - 40px));margin:54px auto;background:var(--cream);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink)}
.footer-main{display:grid;grid-template-columns:1.05fr 1.25fr .7fr;align-items:stretch}
.footer-main>div{padding:34px 32px;min-width:0}
.footer-main>div+div{border-left:2px solid var(--ink)}
.footer-main h2{font-family:Instrument,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;margin:0 0 18px;padding-bottom:9px;border-bottom:2px solid var(--ink)}

.footer-brand{background:var(--mint);--w-main:var(--ink);--w-bg:var(--mint);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.wordmark{display:block;width:min(300px,100%);height:auto;aspect-ratio:401.03/125.9}
.footer-blurb{margin:18px 0 0;font-size:14px;line-height:1.5;max-width:34ch}

/* The address, the phone number and the email get the same weight, because
   they are the same kind of thing: a way to reach the shop. The label above
   each one is what tells them apart, not the size. */
.footer-label{margin:0 0 3px;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#5b6166}
.footer-value{margin:0 0 18px;font-weight:700;overflow-wrap:anywhere}
.footer-value a,.footer-directions a{display:inline-block;min-height:24px;padding-top:2px;text-decoration:none;text-underline-offset:4px}
.footer-value a:hover,.footer-directions a:hover{text-decoration:underline;text-decoration-thickness:2px}
.footer-directions{margin:0 0 24px;font-weight:700}

/* The hours, as a poster. The dotted leader is a border on a flexible span
   between the day and the time, so it stretches to whatever is left. */
.hours-poster{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--mint);padding:14px 16px 12px}
.poster-title{margin:0 0 10px;padding-bottom:9px;border-bottom:2px solid var(--ink);text-align:center;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hours-row{display:flex;align-items:baseline;gap:8px;margin:0;padding:4px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hours-dots{flex:1;border-bottom:2px dotted #b9b4aa;transform:translateY(-4px)}
.hours-time{white-space:nowrap;font-variant-numeric:tabular-nums}
.hours-row.closed{color:#5f6569}
.hours-row.today{background:var(--mint);border:2px solid var(--ink);padding:2px 4px}
.hours-row.today .hours-day:before{content:"\25B8\00a0"}

.footer-links{display:grid;gap:10px;font-weight:700}
.footer-links a{text-decoration:none;text-underline-offset:4px;padding:3px 0}
.footer-links a:hover,.footer-links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}

/* The one hover the buttons do not own. The ink sweeps up over the circle and
   the glyph flips to cream, which is the trick these two get and nothing else
   on the site does. Mint on ink is 9.8:1, so the glyph is readable either
   way round. */
.footer-social{display:flex;gap:10px}
.footer-social .social{position:relative;z-index:0;overflow:hidden;width:46px;height:46px;border:2px solid var(--ink);background:var(--mint);color:var(--ink);transition:color .22s var(--ease-settle)}
.footer-social .social:before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;transform:translateY(101%);transition:transform .22s var(--ease-settle)}
.footer-social .social:hover:before,.footer-social .social:focus-visible:before{transform:translateY(0)}
.footer-social .social:hover,.footer-social .social:focus-visible{color:var(--cream)}
.footer-social .social svg{width:23px;height:23px}

.footer-meta{border-top:2px solid var(--ink);padding:16px 32px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}

/* ---------------------------------------------------------------------------
   Back-to-top strip
   ---------------------------------------------------------------------------
   Full width and the same on every screen, because it is the one piece of
   assistive furniture on the page and it should be where a visitor left it.
   The 60px minimum is a touch target, not a look. Do not trim it.
   --------------------------------------------------------------------------- */
.backtop{display:flex;align-items:center;justify-content:center;gap:14px;min-height:60px;padding:0 16px;background:var(--ink2);color:var(--cream);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-top:2px solid var(--ink);transition:background-color .2s var(--ease-settle),color .2s var(--ease-settle)}
.backtop:hover{background:#0e1113;color:var(--mint)}
.backtop-ring{width:40px;height:40px;border-radius:50%;background:var(--mint);border:2px solid var(--ink);color:var(--ink);display:grid;place-items:center;box-shadow:3px 3px 0 var(--cream);transition:transform .2s var(--ease-settle)}
.backtop:hover .backtop-ring{transform:translateY(-2px)}
.backtop-ring svg{width:18px;height:18px;display:block}
.backtop:focus-visible{outline:3px solid var(--mint);outline-offset:-5px}

/* ---------------------------------------------------------------------------
   Narrower than a desktop
   ---------------------------------------------------------------------------
   The header turns into the phone one at 900px: badge on the left, sign on
   the right, and the three links as a row of equal tabs underneath. That is
   the same arrangement as the desktop, folded, so the two do not have to be
   learned separately.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  .mainnav{grid-template-columns:1fr;min-height:auto;padding:0;gap:0}
  .nav-logo{width:132px;margin:14px 0 10px;justify-self:start}
  .header-spacer{height:24px}

  .sign-hang{left:auto;right:0;top:6px;width:150px}
  .sign{box-shadow:5px 5px 0 var(--cream);padding:14px 12px 12px}
  .sign.shut{box-shadow:5px 5px 0 var(--mint)}
  .hole.left{left:22px}
  .hole.right{right:22px}
  .sign-kicker{font-size:8.5px;margin-bottom:4px}
  .sign-line{font-size:21px}

  /* Out of the .wrap gutter so the tabs meet the edges of the screen. */
  .nav{margin:0 -20px;gap:0;justify-content:stretch;border-top:2px solid rgba(251,247,239,.18);font-size:19px}
  .nav a{flex:1;text-align:center;padding:14px 6px;min-height:52px;display:flex;align-items:center;justify-content:center;border-right:2px solid rgba(251,247,239,.18)}
  .nav a:last-child{border-right:0}
  .nav a:before{inset:5px 6px}

  .checker{height:16px;background-size:16px 16px}
  .footer-checker{height:20px}
  .footer-checker:before{background-size:20px 20px}
  .footer-card{width:min(100% - 34px,var(--max));margin:34px auto;box-shadow:8px 8px 0 var(--ink)}
  .footer-main{grid-template-columns:1fr}
  .footer-main>div{padding:26px 24px}
  .footer-main>div+div{border-left:0;border-top:2px solid var(--ink)}
  .footer-meta{padding:16px 24px}
}

@media(max-width:620px){
  .nav{margin:0 -14px;font-size:17px}
  .footer-card{width:calc(100% - 28px)}
}

@media(prefers-reduced-motion:reduce){
  .sign-hang{animation:none;transform:none}
  .footer-checker:before,.js-checker .footer-checker:before{transform:none!important}
}