/* ---------------------------------------------------------------------------
   base.css: design tokens, the reset, and the primitives every page reuses.

   Load order on every page is:

     1. fonts.css        the typefaces
     2. base.css         this file
     3. chrome.css       header, navigation, footer, back-to-top
     4. pages/<page>.css the one page

   That is one-way and one level deep: this file sets the defaults, a page
   stylesheet refines them for its own page, and nothing loads after a page
   stylesheet. If a change is not taking effect, the selector is wrong rather
   than the order.

   Every value here was lifted from the design files unchanged. The fluid
   clamp() scales on h1, h2 and .lead in particular are final: they are what
   makes a headline fit a 320px phone and still fill a 1440px desktop, and
   nudging either end of one changes the design at every width in between.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------------
   One accent (mint), one ink, cream and paper for surfaces. Every shadow in
   this design is a hard offset with 0 blur, and there are no gradients: the
   checkerboard is a conic-gradient, which is a tiling pattern rather than a
   fade. --warm is declared and currently unused; it is part of the palette,
   so it stays named here rather than being rediscovered as a hex later.
   --------------------------------------------------------------------------- */
:root{
  --ink:#15191c;     /* all text, all borders, dark section backgrounds */
  --ink2:#22272a;    /* the back-to-top strip, and only that */
  --mint:#8fcfc4;    /* the accent: mint sections, underlines, hard shadows, footer */
  --mint2:#64b7b4;   /* darker mint: small shadow accents, link hover */
  --cream:#fbf7ef;   /* page background, light checkerboard squares, form fill */
  --paper:#fffefa;   /* card surfaces */
  --warm:#eeeae3;    /* declared, currently unused */
  --white:#fff;
  --max:1220px;      /* the content measure */

  /* The one easing curve on the site. Everything that moves uses it, so a
     change here retimes the whole motion layer at once. */
  --ease-settle:cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* clip, not hidden. The hero sticker on the home page overhangs the gutter,
   and without this every full-bleed band stopped short of the right edge.
   `hidden` would fix that too, but it turns html into a scroll container,
   which breaks the sticky section bar on the Menu page. */
html{overflow-x:clip}

body{margin:0;font-family:Instrument,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.45}
a{color:inherit}
/* height:auto is not optional, and it is what pairs with the width and height
   attributes the picture macro writes on every image.

   Those attributes are presentational hints: `width="739" height="893"` sets
   a used height of 893px unless CSS says otherwise. A rule setting only
   width:100% overrides half of that and leaves the image stretched to its
   full pixel height. With height:auto the browser instead reads the two
   attributes as a RATIO, reserves the right box before the file arrives, and
   then scales to whatever width the layout gives it. That is the whole
   anti-layout-shift mechanism; take this line out and every image on the site
   renders at its intrinsic height. */
img{display:block;max-width:100%;height:auto}

button,input,textarea,select{font:inherit}

/* The marks are defined once per page in partials/defs.njk and drawn with
   <use>. The defining SVG is 0x0 already; this makes it impossible for it to
   take part in the layout even if something later gives it a size. */
.marks{position:absolute;width:0;height:0;overflow:hidden}

/* The two marks in partials/defs.njk carry classes rather than fills, so the
   page can colour them. The badge is always the same three colours; the
   wordmark is not, because --w-bg is the surface it happens to be sitting on
   and its pale paths are the counters of the letters rather than highlights.
   Anywhere the wordmark moves to, --w-bg moves with it. */
.b-ink{fill:var(--ink)}
.b-mint{fill:var(--mint2)}
.b-cream{fill:var(--cream)}
.w-main{fill:var(--w-main,var(--mint2))}
.w-hi{fill:var(--w-bg,var(--cream))}

/* A wrapper that CloudCannon needs and the layout must not see.

   Every repeated item the visual editor can click has to sit inside an
   element marked as the array it belongs to. Where no element already wraps
   the items, or the one that does is already marked as something else, the
   items go in a .edit-list. display:contents means the wrapper takes no part
   in the layout at all, so the items sit in their parent's grid or flex row
   exactly as they did before. */
.edit-list{display:contents}

/* The skip link is the first element inside <body> on every page. It is off
   screen until it takes focus, and it is the only way a keyboard visitor gets
   past the navigation without tabbing through it. */
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;z-index:1000}
.skip:focus{left:8px}

/* ---------------------------------------------------------------------------
   The page gutter
   ---------------------------------------------------------------------------
   .wrap is the site's measure and its left and right padding. Page
   stylesheets set vertical padding only, never the `padding` shorthand, so no
   page ever disagrees with this file about the gutter.
   --------------------------------------------------------------------------- */
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

/* ---------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------
   Every button is .btn plus one colour modifier, and every modifier is
   declared here. A page stylesheet may resize a button for its own context
   (the Contact form does) but should not restate a treatment: if you find
   yourself copying a background and a border into a page file, add a modifier
   here instead.

   There is one hover language on this site and this is it: the button lifts
   a pixel and its shadow grows, then on the press it travels the whole
   offset and the shadow goes to nothing, so the thing you pressed is flat
   against the page. Everything clickable behaves this way. The two social
   icons in the footer are the single exception, and they are the exception
   on purpose.

   min-height:48px is a touch target, not a look. Do not trim it.
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:2px solid var(--ink);padding:13px 18px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;text-decoration:none;min-height:48px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--mint2);outline-offset:3px}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn.mint{background:var(--mint);color:var(--ink)}
.btn.cream{background:var(--cream)}

/* On an ink surface the ink shadow is invisible, so it becomes mint. The
   colour is restated here rather than inherited, because a button dropped on
   the chalkboard was picking up the cream text around it and disappearing. */
.btn.onink{color:var(--ink);box-shadow:5px 5px 0 var(--mint)}
.btn.onink:hover{box-shadow:6px 6px 0 var(--mint)}
.btn.onink:active{box-shadow:0 0 0 var(--mint)}

/* ---------------------------------------------------------------------------
   Type scale
   ---------------------------------------------------------------------------
   The clamp() values are the fluid scale and they are final. Headings and
   paragraphs carry no top margin: spacing comes from the padding or gap of
   the block a piece of text sits in, never from collapsing margins.
   --------------------------------------------------------------------------- */
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Fraunces,Georgia,serif}
h1{font-size:clamp(48px,8vw,108px);line-height:.92;letter-spacing:-.035em;word-spacing:.04em;margin-bottom:26px}
h2{font-size:clamp(34px,5vw,64px);line-height:.98;letter-spacing:-.03em}
h3{font-size:22px}
.lead{font-size:clamp(18px,2vw,25px);max-width:720px}

/* ---------------------------------------------------------------------------
   Sections and shared layout pieces
   --------------------------------------------------------------------------- */
.section{padding:88px 0}
.section.mint{background:var(--mint)}
.section.dark{background:var(--ink);color:var(--cream)}
.section.white{background:var(--paper)}

.socials{display:flex;gap:10px}
.social{width:46px;height:46px;border:2px solid var(--ink);display:grid;place-items:center;border-radius:50%;text-decoration:none;background:var(--mint);color:var(--ink)}
.social svg{width:23px;height:23px}

/* The mint band every page but Home opens on. */
.page-hero{padding:72px 0 68px;background:var(--mint);border-bottom:2px solid var(--ink)}
.page-hero h1{max-width:980px}
.page-hero .lead{max-width:760px;margin-bottom:0}

@media(max-width:620px){
  .wrap{width:min(100% - 28px,var(--max))}
  .section{padding:64px 0}
  .page-hero{padding:50px 0}
}

/* ---------------------------------------------------------------------------
   Motion, the site-wide part
   ---------------------------------------------------------------------------
   The rule the design sets and this file keeps: decoration animates,
   information never does. Hours, addresses, phone numbers, headlines, menu
   items and prices are painted in their final state on the first frame, on
   every page. What moves is a photograph, a checkerboard band and three cards
   on the home page, and every one of those is behind the reduced-motion check
   at the bottom of this file.

   Hover and focus transitions are user-initiated, so they are never in the
   way and they live up here with the things they style.
   --------------------------------------------------------------------------- */
.btn{transition:transform .12s var(--ease-settle),box-shadow .12s var(--ease-settle)}

/* The arrow that leans forward on hover. It is decoration, so it is
   aria-hidden in the markup and has no meaning to read. */
.ar{display:inline-block;transition:transform .2s var(--ease-settle)}
a:hover>.ar,button:hover>.ar{transform:translateX(3px)}

/* ---------------------------------------------------------------------------
   Reduced motion: everything off, final state, immediately.

   This is non-negotiable and it is deliberately blunt. The `*` rule carries
   !important so it beats any animation a page stylesheet declares, whatever
   order the two load in. Page stylesheets add their own reduced-motion blocks
   for the handful of elements that need a specific resting state (the hero
   photo keeps its 1deg tilt, the room photo keeps its 1.07 scale); they do
   not need to switch anything off, because this already did.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}