/* Quinn's of Drumcondra — shared system */
@font-face{font-family:'Zarid Display';src:url('fonts/ZaridDisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --rose:#e7cbc4; --rose-soft:#f0ddd7;
  --burgundy:#8e2b3d; --burgundy-2:#6d1f2e;
  --green:#1f4d3b; --green-2:#163a2c; --green-3:#0f2a20;
  --gold:#c2973f; --gold-2:#dcb35c;
  --cream:#f6efe2; --paper:#faf5ec; --ink:#2c1a1c; --muted:#6e5550;
  --sand:#e8dcc6; --dim:#cdbfa6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Cormorant Garamond',Georgia,serif; background:var(--green-2); color:#f3ecd9; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--gold-2); text-decoration:none}
a:hover{color:#f0e6d4}
.container{max-width:1200px; margin:0 auto; padding:0 28px}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-2)}
.display{font-family:'Zarid Display','Cormorant Garamond','Fraunces',serif; font-weight:400; letter-spacing:-.01em}

/* NAV */
.qnav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 28px; background:var(--green-3); border-bottom:1px solid rgba(220,179,92,.28)}
.qnav .mark{font-family:'Zarid Display','Cormorant Garamond',serif; font-size:22px; color:var(--gold-2); letter-spacing:-.01em; white-space:nowrap}
.qnav .links{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end; flex:1}
.qnav .links a{white-space:nowrap}
.qnav .links a{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sand); padding-bottom:3px; border-bottom:1px solid transparent; transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out)}
.qnav .links a:hover{color:var(--gold-2); border-bottom-color:var(--gold-2)}
.qnav .links a.on{color:var(--gold-2); border-bottom-color:var(--gold-2)}
.qnav .links a.soon{opacity:.45; pointer-events:none}
.qnav .links a.soon::after{content:" ◇"}
@media(max-width:1140px){ .qnav .links{gap:18px} .qnav .links a.soon{display:none} }
@media(max-width:1000px){ .qnav .links{gap:14px} .qnav .links a{font-size:10px; letter-spacing:.14em} }
@media(max-width:860px){ .qnav{flex-wrap:wrap; padding:14px 20px} .qnav .links{order:3; flex-basis:100%; justify-content:flex-start; gap:10px 16px; flex-wrap:wrap} .qnav .links a{font-size:9.5px; letter-spacing:.12em} }
.qnav .cart{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-3); background:var(--gold-2); border:1px solid var(--gold-2); padding:9px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:background 180ms var(--ease-out),transform 140ms var(--ease-out); white-space:nowrap; flex:none}
.qnav .cart:hover{background:#f0e6d4; border-color:#f0e6d4}
.qnav .cart:active{transform:scale(.98)}
.qnav .cart .count{background:var(--green-3); color:var(--gold-2); min-width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:10px; letter-spacing:0}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:14px 22px; border:1px solid var(--gold-2); color:var(--gold-2); transition:background 180ms var(--ease-out),color 180ms var(--ease-out),transform 140ms var(--ease-out)}
.btn:hover{background:var(--gold-2); color:var(--green-3)}
.btn.solid{background:var(--gold-2); color:var(--green-3)}
.btn.solid:hover{background:#f0e6d4; border-color:#f0e6d4}
.btn:active,.golink:active{transform:scale(.98)}
.golink{transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 140ms var(--ease-out)}
.golink{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); padding-bottom:3px; border-bottom:1px solid var(--gold-2)}

/* IMAGE PLACEHOLDER */
.ph{position:relative; background:
    repeating-linear-gradient(135deg, rgba(220,179,92,.07) 0 10px, transparent 10px 20px),
    var(--green); border:1px solid rgba(220,179,92,.3); display:flex; align-items:center; justify-content:center; overflow:hidden}
.ph span{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(232,220,198,.65); text-align:center; padding:12px; line-height:1.8}
/* .ph.bg — for placeholders used as a background layer under overlaid copy:
   label parks top-left so it never collides with bottom-anchored text. */
.ph.bg{align-items:flex-start; justify-content:flex-start}
.ph.bg span{text-align:left; padding:16px 18px; color:rgba(232,220,198,.5)}
/* cards that carry a top-left "◆ Open" badge: park the label top-RIGHT instead */
.rcard .ph.bg{align-items:flex-start; justify-content:flex-end}
.rcard .ph.bg span{text-align:right}

/* FOOTER */
.qfoot{background:var(--green); padding:56px 0 32px; border-top:1px solid rgba(220,179,92,.3)}
.qfoot .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(220,179,92,.18)}
.qfoot .cols > div:first-child{grid-column:1/-1; padding-bottom:28px; border-bottom:1px solid rgba(220,179,92,.18)}
@media(max-width:880px){ .qfoot .cols{gap:24px 16px} .qfoot ul a,.qfoot ul li{font-size:12.5px} }
.qfoot .brand{font-family:'Zarid Display','Cormorant Garamond',serif; font-size:26px; color:var(--gold-2)}
.qfoot .addr{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--sand); margin-top:10px; line-height:1.5}
.qfoot h6{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2); margin:0 0 14px; font-weight:500}
.qfoot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.qfoot ul a,.qfoot ul li{font-size:13.5px; color:var(--dim); padding:0; opacity:1; cursor:default; line-height:1.5}
.qfoot ul a{cursor:pointer}
.qfoot ul a:hover{color:var(--gold-2)}
.qfoot .socials{display:flex; align-items:center; gap:14px; margin-top:18px; color:var(--gold-2)}
.qfoot .socials a{color:var(--gold-2); opacity:.85} .qfoot .socials a:hover{opacity:1}
.qfoot .handle{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:var(--sand); opacity:.75}
.qfoot .legal{margin-top:22px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.55; color:#f3ecd9; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* MOTION: scroll reveal (opt-in via .reveal, staggered with --i) */
.reveal{opacity:0; transform:translateY(10px); transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out); transition-delay:calc(var(--i,0)*60ms)}
.reveal.in{opacity:1; transform:none}
@media (hover:hover) and (pointer:fine){ .tcard:hover .ph,.tcard:hover img{transform:scale(1.015)} .tcard .ph,.tcard img{transition:transform 400ms var(--ease-out)} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}