/* ════════════════════════════════════════════════════════════
   site.css — the shell every page shares: reset, nav, footer.
   Loaded FIRST; each page's own sheet loads after and overrides
   (menu.css turns the page cream, events.css recolours links).
   ════════════════════════════════════════════════════════════ */

@view-transition{navigation:auto}

/* ── Base ── */
html{background:#0E0B09}
*{box-sizing:border-box}
body{margin:0;background:#0E0B09;color:#F3EBDD;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:72px}
a{color:#C6902A}a:hover{color:#E0912F}
:focus-visible{outline:2px solid #E0912F;outline-offset:3px;border-radius:3px}

/* The page renders at 85% above the mobile breakpoint — the type and spacing
   scale was tuned larger than a laptop wants, and everything here is hardcoded
   px, so one zoom is honest where 200 hand-scaled values would be a guess.
   Left alone on phones: the max-width:900px layout below is already sized for
   them, and shrinking it further would just make the text small.
   NOTE: unlike browser zoom, CSS zoom does NOT rescale viewport units. Every
   clamp(…vw…) on this site is already pinned to its max above ~1220px so they
   land identically — but any NEW vh/vw value under this breakpoint must be
   divided by .85 to compensate. See .hero in home.css for the one live case. */
@media(min-width:901px){body{zoom:.85}}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}

/* ── Nav ── */
.nav{view-transition-name:cnav;position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 30px;background:rgba(14,11,9,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(198,144,42,.22);font-family:Inter,system-ui,sans-serif}
/* margin-right:auto pushes .navright to the right edge on every breakpoint. It
   also lets the burger (a nav child that precedes .brand, shown only on mobile)
   sit immediately left of the logo, with the Reserve pill pushed to the right. */
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo{height:44px;width:auto;display:block;filter:drop-shadow(0 0 2px rgba(243,235,221,.25)) drop-shadow(0 0 5px rgba(243,235,221,.25))}
.navright{display:flex;align-items:center;gap:4px}
.links{display:flex;align-items:center;gap:4px}
.lnk{position:relative;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1.4px;color:#B7A98F;text-decoration:none;padding:9px 14px;border-radius:6px;transition:color .18s,background .18s}
/* Fire hover only where a real pointer can hover. On a touchscreen `:hover`
   sticks after a tap, leaving a stray highlight box on the last-tapped link
   (looked like a wrong "current page" highlight in the mobile menu). */
@media(hover:hover){.lnk:hover{color:#F3EBDD;background:rgba(255,255,255,.1)}}
.lnk.on{color:#E0912F}
/* Active-page underline as a positioned bar so it can carry its own
   view-transition-name: since only one .lnk is active per page and the name is
   shared across pages, the cross-document view transition (enabled above) slides
   this one bar from the old active link to the new one on navigation. Degrades
   to a static underline where view transitions aren't supported. */
.lnk.on::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:currentColor;border-radius:2px;view-transition-name:navunderline}
::view-transition-group(navunderline){animation-duration:.4s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.res{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1.4px;text-decoration:none;color:#0E0B09;background:linear-gradient(#E0912F,#C6902A);padding:10px 20px;border-radius:999px;margin-left:8px;box-shadow:0 0 0 1px rgba(224,145,47,.5),0 6px 20px -6px rgba(224,145,47,.6);transition:transform .18s,box-shadow .18s,color .18s;white-space:nowrap}
.res:hover{transform:translateY(-1px);color:#fff;box-shadow:0 0 0 1px rgba(224,145,47,.7),0 10px 26px -6px rgba(224,145,47,.75)}
.res.on{outline:2px solid rgba(243,235,221,.35);outline-offset:2px}
.burger{display:none;position:relative;width:42px;height:42px;border-radius:9px;background:transparent;border:1px solid rgba(198,144,42,.35);color:#E0912F;cursor:pointer;align-items:center;justify-content:center;padding:0}
/* The two icons are stacked and cross-fade with a quarter-turn between them, so
   the burger↔X swap animates instead of hard-cutting on aria-expanded. */
.burger svg{position:absolute;top:50%;left:50%;width:20px;height:20px;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.burger .m{opacity:1;transform:translate(-50%,-50%) rotate(0)}
.burger .x{opacity:0;transform:translate(-50%,-50%) rotate(-90deg)}
.burger[aria-expanded="true"] .m{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.burger[aria-expanded="true"] .x{opacity:1;transform:translate(-50%,-50%) rotate(0)}

/* ── Footer ── */
.ft{view-transition-name:cfoot;background:#0E0B09;color:#B7A98F;font-family:Inter,system-ui,sans-serif;border-top:1px solid rgba(198,144,42,.22);padding:56px 30px 30px;position:relative;overflow:hidden}
.ftglow{position:absolute;left:50%;top:-40%;width:70%;height:120%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(198,144,42,.14),transparent 62%);pointer-events:none}
.ftin{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:38px}
.fbrand{margin-bottom:16px}
.flogo{height:78px;width:auto;display:block;filter:drop-shadow(0 0 3px rgba(243,235,221,.25)) drop-shadow(0 0 7px rgba(243,235,221,.25))}
.ftag{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;color:#F3EBDD;line-height:1.5;max-width:260px}
.fh{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1.6px;color:#C6902A;margin:0 0 14px}
.frow{font-size:13.5px;line-height:1.95;color:#B7A98F}
.frow b{color:#F3EBDD;font-weight:600}
/* "get directions" — pulled out of the address .frow so it can be positioned
   (aligned to the socials pill on phones). Sits below the address elsewhere. */
.fdir{display:inline-block;margin-top:22px;color:#E0912F;text-decoration:none;font-size:13.5px}
.socs{display:flex;gap:10px;margin-top:14px}
/* A pill carrying the handle beside the mark, so the footer states the account
   rather than making you guess. */
.soc{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(198,144,42,.32);color:#C6902A;text-decoration:none;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:1.5px;transition:background .18s,color .18s,border-color .18s}
.soc:hover{background:#C6902A;color:#0E0B09;border-color:#C6902A}
.soc svg{width:17px;height:17px;flex:none}
.sis{display:flex;flex-direction:column;gap:10px}
.sisl{display:flex;align-items:center;gap:9px;text-decoration:none;color:#B7A98F;font-size:13.5px;transition:color .18s}
.sisl:hover{color:#F3EBDD}
/* Dot colours live here, not inline — an inline background would outrank the
   :hover rule below and the hover would silently do nothing.
   The two rules below are equal specificity (0,4,0), so :hover must come last. */
.sisd{width:9px;height:9px;border-radius:50%;flex:none;background:#C6902A;transition:background .18s}
.sis .sisl:first-child .sisd{background:#E0912F}
.sis .sisl:hover .sisd{background:#B0308A}

/* ── Mobile shell ── */
@media(max-width:900px){
  .nav{padding:12px 20px;gap:14px}
  .burger{display:flex}
  /* Half-width panel tucked under the burger at the right edge (was full-width).
     align-items:flex-start lets each link shrink to its own text so the divider
     under it sits on the label only. It stays display:flex and animates in via
     opacity + a downward slide (display:none can't transition); visibility flips
     with a delay on close so the links are untabbable once hidden. */
  /* Opens under the burger, which now sits top-left — so the panel anchors left
     (border + radius on its right/content-facing edge). */
  .links{position:absolute;top:100%;left:0;right:auto;width:50%;flex-direction:column;align-items:flex-start;gap:0;background:rgba(14,11,9,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(198,144,42,.22);border-right:1px solid rgba(198,144,42,.22);border-bottom-right-radius:12px;padding:8px 20px 16px;
    display:flex;opacity:0;visibility:hidden;transform:translateY(-12px);transform-origin:top left;pointer-events:none;
    transition:opacity .2s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
  .links.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
    transition:opacity .2s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s}
  /* No horizontal padding, so the link box is exactly the label width — the
     divider (border-bottom) and the active underline (::after, matched below)
     then run exactly the length of the menu item they sit under. */
  .lnk{padding:14px 0;font-size:19px;border-bottom:1px solid rgba(255,255,255,.05)}
  .lnk.on::after{left:0;right:0}
  /* Dropdown links are text-width so the divider matches the label; the pill
     hover background would hug the text and read as a wrong highlight. Drop it —
     the active gold underline is the only persistent indicator in the menu. */
  .lnk:hover{background:none}
  .ftin{grid-template-columns:1fr 1fr}
}

/* Footer on a phone: one column of rows —
     row 1  brand (logo | tagline, side by side), full width
     row 2  Find Us | Hours, sharing the row as two columns
     row 3  The Fat Cat Group, full width, its links in a row
   Achieved by keeping a 2-col grid but spanning the first + last blocks. */
@media(max-width:600px){
  .ft{padding:24px 22px 28px}
  .ftin{grid-template-columns:1fr 1fr;gap:26px 22px}
  /* Brand: logo + tagline centred as a group. */
  .ftin>div:first-child{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:16px}
  .fbrand{margin-bottom:0;flex:none}
  .flogo{height:54px}
  .ftag{max-width:none;flex:none}
  /* Find Us + Hours: content centred. Equal-height flex columns (grid stretches
     them) so the get-directions link and the CATTERY.PH pill are both pushed to
     the row bottom; the link is boxed to the pill's height and vertically centred
     so the two line up. */
  .ftin>div:nth-child(2),.ftin>div:nth-child(3){display:flex;flex-direction:column;text-align:center}
  /* Guaranteed gap between each column's text and its CTA. margin-top:auto on the
     CTA can collapse to 0 in the taller column, leaving it flush against the text;
     a margin below the text block keeps a minimum gap without breaking the
     bottom-alignment the CTAs rely on. */
  .ftin>div:nth-child(2) .frow,.ftin>div:nth-child(3) .frow{margin-bottom:16px}
  .socs{justify-content:center;margin-top:auto}
  .fdir{margin-top:auto;align-self:center;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  /* Fat Cat Group: separated from the sections above by a hairline + space,
     its title centred, its three links spread across the full width. */
  .ftin>div:last-child{grid-column:1/-1;margin-top:16px;padding-top:26px;border-top:1px solid rgba(198,144,42,.16)}
  .ftin>div:last-child .fh{text-align:center}
  /* Centred group with a moderate gap — not space-between, which pinned Cattery
     and El Gato to the edges. */
  .sis{flex-direction:row;justify-content:center;gap:24px}
  /* Address flows on one run — "Makati City, PH" follows "Amorsolo St." */
  .stbr{display:none}
}

/* Very small phones (≤360px): the Reserve pill + burger overran a 320px
   viewport and clipped the burger. Tighten the nav's own chrome so the
   right group fits without touching the button copy. */
@media(max-width:360px){
  .nav{padding:12px 14px;gap:12px}
  .logo{height:38px}
  .res{padding:9px 14px;letter-spacing:1px;margin-left:6px}
}

/* Honour reduced-motion for the nav: the menu still opens/closes, just without
   the slide or the icon spin. */
@media(prefers-reduced-motion:reduce){
  .links,.burger svg{transition:none}
}