/* ---------------------------------------------------------------------------
   cafe.css: the Cat Café.

   The video hero, the row of café links, the cats, the menu that opens with
   its four tabs, and the visit details. The page's own rules, in the order
   it had them. The café's words have a little more line height than the
   other two pages, set on the body here.
   --------------------------------------------------------------------------- */

body{line-height:1.6}
/* café page-nav: clean editorial row */
.menu-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:5}
.menu-nav .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem;padding:.5rem 0}
.menu-nav a{font-family:var(--collegiate);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.1rem;color:#b3b8cc;padding:.4rem 1.1rem;position:relative;transition:color .18s}
.menu-nav a::after{content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .22s}
.menu-nav a:hover{color:var(--blue)}
.menu-nav a.active{color:var(--blue)}
.menu-nav a.active::after{transform:scaleX(1)}
/* ===== FULL-BLEED VIDEO HERO ===== */
.hero{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:clamp(520px,86vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--blue)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero .fill{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 90% at 25% 20%,rgba(184,153,104,.35),transparent 60%),linear-gradient(160deg,#0d2f9e,#061c66)}
.hero .scrim{position:absolute;inset:0;z-index:2;background:rgba(6,15,46,.5)}
.hero .eyebrow{font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.4rem}
.hero h1{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(3.2rem,11vw,8rem);line-height:.82;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .thin{display:block;font-family:var(--serif);font-weight:400;text-transform:none;font-size:clamp(1.1rem,2.6vw,1.7rem);color:rgba(255,255,255,.85);margin-top:1.1rem;max-width:40ch;text-shadow:none}
.hero .go{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;font-weight:600;font-size:.95rem;color:var(--blue);background:#fff;padding:.9rem 1.7rem;border-radius:999px;pointer-events:auto;transition:.2s}
.hero .go:hover{background:var(--gold-soft);transform:translateY(-2px)}
.hero .tag{position:absolute;top:1rem;left:1rem;z-index:3;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.3);padding:.35rem .6rem;border-radius:999px}
.sec{padding:clamp(2.5rem,6vw,5rem) 0}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;border-bottom:2px solid var(--ink);padding-bottom:1rem}
.sechead h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:.9;color:var(--ink)}
.sechead .num{font-family:var(--util);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.cat .ph{aspect-ratio:4/3;background:var(--blue);display:grid;place-items:center;color:var(--gold-soft);font-family:var(--collegiate);font-weight:700;font-size:1.6rem;position:relative}
.cat .ph .tag{position:absolute;top:.6rem;left:.6rem;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.35);padding:.2rem .5rem;border-radius:999px}
.cat .b{padding:1rem 1.1rem 1.3rem}
.cat .b h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--blue)}
.cat .b span{font-size:.85rem;color:var(--muted)}
/* menu popout with category tabs */
.menu-launch{text-align:center;margin-bottom:1.4rem}
.menu-btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--collegiate);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.4rem;color:#fff;background:var(--blue);border:none;padding:.7rem 2rem;border-radius:999px;cursor:pointer;pointer-events:auto;transition:.2s}
.menu-btn:hover{background:var(--blue-deep)}
.menu-btn .chev{transition:transform .45s ease;font-size:.9rem}
.menu-popout.open .menu-btn .chev{transform:rotate(180deg)}
.menu-popout .drawer{max-height:0;overflow:hidden;opacity:0;transition:max-height .7s cubic-bezier(.6,0,.2,1),opacity .5s ease}
.menu-popout.open .drawer{max-height:1600px;opacity:1}
.menu-card{background:var(--blue);color:#fff;border-radius:18px;padding:2rem clamp(1.2rem,3vw,2.6rem) 2.4rem;box-shadow:0 30px 60px -30px rgba(8,38,139,.5)}
.menu-cats{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:1.4rem;margin-bottom:1.6rem}
.menu-cats button{font-family:var(--util);font-weight:600;font-size:.85rem;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;pointer-events:auto;transition:.2s}
.menu-cats button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.menu-cats button.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.menu-page{display:none;animation:fadePage .35s ease}
.menu-page.show{display:block}
@keyframes fadePage{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.menu-list{max-width:640px;margin:0 auto}
.mi{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.mi .n{font-family:var(--serif);font-size:1.2rem}
.mi .d{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.15rem}
.mi .p{font-weight:600;color:var(--gold-soft);white-space:nowrap}
.menu-note{text-align:center;color:rgba(255,255,255,.6);font-family:var(--serif);padding-top:1.4rem}
.visit{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.visit .rows .r{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.visit .rows .r:last-child{border:none}
.visit .ic{width:44px;height:44px;flex:0 0 auto;background:var(--paper);border-radius:10px;display:grid;place-items:center;font-size:1.2rem}
.visit h4{font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.visit .r p{color:var(--ink)}
.visit .map{border-radius:12px;min-height:300px;background:var(--blue);display:grid;place-items:center;color:var(--gold-soft);font-family:var(--collegiate);font-size:1.4rem;position:relative}
.visit .map .tag{position:absolute;top:.7rem;left:.7rem;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.35);padding:.2rem .5rem;border-radius:999px}
@media(max-width:860px){
  .cats,.visit{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .menu-popout .drawer{transition:none}
}