/* ============================================================
   OTA Playhouse — Main stylesheet
   Ported from analysis/design-research/mockup/index.html
   Design tokens live in tokens.css (loaded first).
   ============================================================ */

/* =========================================================
     OTA PLAYHOUSE — mockup
     Wireframes source: customer/WebsiteRequest/OTA Site - Sitemap V2.pdf
     Every section, label and structure mirrors the PDF pages.
     Assets used as-is from customer/BrandingFiles/
     ========================================================= */

  @media (min-width:768px){ :root{--pad-x:48px} }
  @media (min-width:1280px){ :root{--pad-x:80px} }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{margin:0;background:var(--ota-bg);color:var(--ota-fg);font-family:var(--font-body);font-size:16px;line-height:1.55;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

  /* ====== BUTTONS ====== */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:var(--radius-pill);font-family:var(--font-headline);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.04em;transition:transform 150ms var(--ease),background 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease);white-space:nowrap}
  .btn-primary{background:var(--ota-accent);color:var(--ota-fg)}
  .btn-primary:hover{background:var(--ota-accent-hover);transform:translateY(-1px)}
  .btn-secondary{background:transparent;color:var(--ota-fg);border:1.5px solid var(--ota-fg)}
  .btn-secondary:hover{background:var(--ota-fg);color:var(--ota-bg)}
  .btn-dark{background:var(--ota-bg);color:var(--ota-fg);border:1.5px solid var(--ota-fg)}
  .btn-dark:hover{background:var(--ota-fg);color:var(--ota-bg)}
  .btn-sm{padding:10px 20px;font-size:12px}
  .btn-arrow::after{content:"→";transition:transform 150ms var(--ease)}
  .btn-arrow:hover::after{transform:translateX(4px)}

  /* ====== HEADER (Left Bank style — tagline center, MENU text right) ====== */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:24px var(--pad-x);transition:background 250ms var(--ease)}
  .site-header.scrolled{background:rgba(10,10,10,0.85);backdrop-filter:blur(12px)}
  .site-header .hdr-logo{height:36px;width:auto}
  @media (min-width:768px){ .site-header .hdr-logo{height:40px} }
  .hdr-tag{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:14px;padding:10px 18px;border-radius:12px;font-family:var(--font-display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ota-fg);transition:background 150ms var(--ease)}
  @media (min-width:768px){ .menu-btn{font-size:30px;padding:12px 22px;gap:18px} }
  .menu-btn:hover{background:rgba(244,243,240,0.08)}
  .menu-btn .mb-burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:28px;height:24px}
  @media (min-width:768px){ .menu-btn .mb-burger{width:34px;height:28px;gap:7px} }
  .menu-btn .mb-burger i{display:block;height:3px;background:currentColor;border-radius:2px}

  /* ====== HERO (customer-supplied wireframe — full-bleed photo, OTA PLAYHOUSE title + copy overlaid, quarter-circle reveal cut on bottom-left, "in future this will be a video" annotation) ====== */
  .hero{position:relative;min-height:100svh;overflow:hidden;background:#000;display:block}
  .hero-bg{position:absolute;inset:0;background:url("../assets/photos/space-11.jpg") center/cover no-repeat}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.55) 28%,rgba(0,0,0,0.18) 50%,rgba(0,0,0,0) 70%)}
  /* Semi-transparent quarter-circle panel: dark overlay that curves out from bottom-left, photo visible behind */
  .hero-cut{position:absolute;left:0;bottom:0;width:72%;max-width:1080px;aspect-ratio:1.4/1;background:rgba(0,0,0,0.7);backdrop-filter:blur(2px);border-radius:0 100% 0 0;z-index:2;pointer-events:none}
  .hero-content{position:absolute;left:var(--pad-x);bottom:80px;z-index:3;max-width:680px;color:var(--ota-fg)}
  @media (min-width:768px){ .hero-content{bottom:120px;max-width:760px} }
  .hero-content h1{font-family:var(--font-display);font-weight:700;font-size:clamp(48px,6.5vw,84px);text-transform:uppercase;line-height:0.95;letter-spacing:-0.01em;margin:0 0 28px}
  .hero-content p{font-family:var(--font-headline);font-weight:700;font-size:clamp(18px,1.9vw,24px);line-height:1.45;letter-spacing:0.01em;margin:0;color:var(--ota-fg);max-width:540px}

  /* OPENING / FIND US — D-shaped (half-circle) photos + text label, on black band (customer wireframe) */
  .hero-info{background:#000;padding:48px var(--pad-x);display:grid;gap:32px;grid-template-columns:1fr;max-width:var(--wrap);margin:0 auto}
  @media (min-width:900px){ .hero-info{grid-template-columns:1fr 1fr;gap:48px;padding:64px var(--pad-x)} }
  .hi-card{display:flex;align-items:center;gap:28px}
  /* Quarter-circle photo: square element with top-left corner rounded 100% — vertex points toward text on the right */
  .hi-photo{width:160px;height:160px;flex:0 0 auto;border-radius:100% 0 0 0;overflow:hidden;background:var(--ota-surface-2)}
  @media (min-width:768px){ .hi-photo{width:200px;height:200px} }
  .hi-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
  .hi-text h3{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,40px);text-transform:uppercase;letter-spacing:0.01em;line-height:1;margin:0 0 14px;color:var(--ota-fg)}
  .hi-text p{font-family:var(--font-headline);font-weight:700;font-size:15px;line-height:1.5;margin:0 0 4px;color:var(--ota-fg)}
  .hi-text p span{color:var(--ota-fg-muted);font-weight:500;margin-right:6px}

  /* ====== SECTION ====== */
  .section{padding:72px 0}
  @media (min-width:1024px){ .section{padding:120px 0} }
  .section--alt{background:var(--ota-surface);border-top:1px solid var(--ota-border);border-bottom:1px solid var(--ota-border)}
  .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
  .section-title{display:flex;align-items:center;gap:0.4em;font-family:var(--font-display);font-weight:700;font-size:clamp(36px,6vw,88px);line-height:0.95;text-transform:uppercase;letter-spacing:-0.01em;margin:0}
  .section-title .mark{display:inline-block;width:0.78em;height:0.78em;border-radius:100% 0 0 0;background:var(--ota-fg);flex:0 0 auto}
  .section-meta{color:var(--ota-fg-muted);font-size:14px;max-width:420px}

  /* ====== WHAT IS OTA (PAGE 4 top — full-width photo on top, title, 2-col text+photos) ====== */
  .otaph-hero{position:relative;aspect-ratio:21/8;overflow:hidden;border-radius:var(--radius-lg);margin-bottom:56px}
  .otaph-hero img{width:100%;height:100%;object-fit:cover}
  .otaph-hero .quarter{position:absolute;bottom:0;right:0;width:160px;height:160px;border-radius:100% 0 0 0;background:var(--ota-fg);opacity:.95}
  .otaph-title{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,7vw,88px);line-height:0.95;text-transform:uppercase;margin:0 0 40px;display:flex;align-items:center;gap:0.4em}
  .otaph-title .mark{display:inline-block;width:0.78em;height:0.78em;border-radius:100% 0 0 0;background:var(--ota-fg);flex:0 0 auto}
  .otaph-grid{display:grid;gap:40px;grid-template-columns:1fr}
  @media (min-width:900px){ .otaph-grid{grid-template-columns:1.3fr 1fr;gap:64px;align-items:start} }
  .otaph-copy p{font-size:17px;line-height:1.6;color:var(--ota-fg-muted);margin:0 0 20px;max-width:640px}
  .otaph-copy p strong{color:var(--ota-fg)}
  .otaph-closer{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,32px);text-transform:uppercase;letter-spacing:0.01em;color:var(--ota-fg);margin-top:24px}
  .otaph-photos{display:flex;flex-direction:column;gap:16px}
  .otaph-photos .ph{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3}
  .otaph-photos .ph img{width:100%;height:100%;object-fit:cover}
  .otaph-closer-band{margin-top:80px;font-family:var(--font-display);font-weight:700;font-size:clamp(44px,10vw,152px);line-height:0.92;text-transform:uppercase;text-align:center;color:var(--ota-fg);letter-spacing:-0.01em}

  /* ====== BREWERY (PAGE 4 bottom) ====== */
  .brew-head{display:grid;gap:32px;grid-template-columns:1fr;align-items:end;margin-bottom:48px}
  @media (min-width:900px){ .brew-head{grid-template-columns:0.9fr 1.1fr;gap:56px} }
  .brew-photo{aspect-ratio:5/4;border-radius:var(--radius-md);overflow:hidden;position:relative}
  .brew-photo img{width:100%;height:100%;object-fit:cover}
  .brew-photo .quarter{position:absolute;top:0;left:0;width:120px;height:120px;border-radius:0 0 100% 0;background:var(--ota-fg);opacity:.95}
  .brew-copy .sec-title{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6vw,80px);line-height:0.95;text-transform:uppercase;margin:0 0 20px;display:flex;align-items:center;gap:0.4em}
  .brew-copy .sec-title .mark{width:0.78em;height:0.78em;border-radius:100% 0 0 0;background:var(--ota-fg);flex:0 0 auto}
  .brew-copy p{color:var(--ota-fg-muted);font-size:17px;line-height:1.6;margin:0 0 14px;max-width:560px}
  .brew-copy p strong{color:var(--ota-fg)}
  .brew-copy p a{color:var(--ota-accent);text-decoration:underline}

  .beer-grid{display:grid;gap:16px;grid-template-columns:1fr}
  @media (min-width:640px){ .beer-grid{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:1024px){ .beer-grid{grid-template-columns:repeat(4,1fr);gap:24px} }
  .beer{padding:24px;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:transform 150ms var(--ease)}
  .beer:hover{transform:translateY(-4px)}
  .beer--red{background:var(--ota-accent);color:var(--ota-fg)}
  .beer--yellow{background:var(--ota-yellow);color:var(--ota-bg)}
  .beer--green{background:var(--ota-green);color:var(--ota-fg)}
  .beer--deepred{background:var(--ota-deep-red);color:var(--ota-fg)}
  /* Simple CAN representation (stands in for real Resonance can art to be supplied) */
  .can{aspect-ratio:3/4;border-radius:14px;background:rgba(0,0,0,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:8px;text-align:center;position:relative;overflow:hidden}
  .beer--yellow .can{background:rgba(10,10,10,0.08);color:var(--ota-bg)}
  .can::before{content:"RESONANCE";position:absolute;top:14px;left:0;right:0;font-family:var(--font-headline);font-weight:700;font-size:10px;letter-spacing:0.3em;opacity:0.75}
  .can .cn-name{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:0.9;text-transform:uppercase;letter-spacing:-0.02em}
  .can .cn-meta{font-family:var(--font-headline);font-weight:700;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;opacity:.85;margin-top:6px}
  .beer .name{font-family:var(--font-display);font-weight:700;font-size:24px;text-transform:uppercase;line-height:0.95;margin:0}
  .beer .meta{font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;opacity:.85;margin:2px 0 0}
  .beer .desc{font-size:13px;line-height:1.5;opacity:.92;margin:0}
  .beer .more{font-family:var(--font-headline);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;margin-top:auto;text-decoration:underline;text-underline-offset:4px}
  .brew-cta{margin-top:48px;display:flex;justify-content:center}

  /* ====== UPCOMING EVENTS (PAGE 7 pattern) ====== */
  .events-hero{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:var(--radius-lg);margin-bottom:0}
  .events-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.2),rgba(10,10,10,0.9)),linear-gradient(135deg,#3a1a0a 0%,#8a3208 50%,#0a0a0a 100%);z-index:1}
  .events-hero-text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
  .events-hero-text .line{font-family:var(--font-body);font-size:clamp(13px,1.3vw,16px);color:var(--ota-fg);margin:4px 0;opacity:.92}
  .events-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:56px 0 24px}
  .events-title{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.5vw,56px);text-transform:uppercase;margin:0;letter-spacing:-0.01em;text-align:center;width:100%}
  .events-head-row{display:flex;justify-content:center;width:100%;margin-top:16px}
  .tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .tab{display:inline-flex;align-items:center;padding:8px 18px;border:1.5px solid var(--ota-border-2);border-radius:var(--radius-pill);font-family:var(--font-headline);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ota-fg);transition:background 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease)}
  .tab.is-active{background:var(--ota-accent);color:var(--ota-fg);border-color:transparent}
  .tab:hover:not(.is-active){border-color:var(--ota-fg)}

  .events{border-top:1px solid var(--ota-border);margin-top:24px}
  .event{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px;padding:20px 12px;border-bottom:1px solid var(--ota-border);transition:background 150ms var(--ease);border-radius:var(--radius-md)}
  @media (min-width:768px){ .event{grid-template-columns:120px 1fr 140px 220px;gap:28px;padding:24px 20px;align-items:center} }
  .event:hover{background:rgba(244,243,240,0.03)}
  .event-poster{aspect-ratio:1;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,var(--ota-surface-2),var(--ota-bg));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:22px;text-align:center;padding:8px;line-height:0.9}
  .event-poster.p-yin{background:linear-gradient(135deg,#1f2a63,#0a0a0a);color:#9ec2ff}
  .event-poster.p-grp{background:linear-gradient(135deg,#2b3b1e,#0a0a0a);color:#d5e2a8}
  .event-poster.p-sea{background:linear-gradient(135deg,#3a1a1e,#0a0a0a);color:#f1a59e}
  .event-poster.p-qz{background:linear-gradient(135deg,#3f2f08,#0a0a0a);color:#fcb000}
  .event-poster.p-od{background:linear-gradient(135deg,#2b0a1a,var(--ota-accent));color:#0a0a0a}
  .event-meta .date{font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ota-fg-muted);margin:0 0 6px}
  .event-meta .title{font-family:var(--font-headline);font-weight:700;font-size:clamp(16px,2vw,20px);text-transform:uppercase;letter-spacing:0.01em;line-height:1.2;margin:0 0 6px;color:var(--ota-fg)}
  .event-meta .para{font-size:13px;line-height:1.5;color:var(--ota-fg-muted);margin:0;max-width:520px}
  .event-price{font-family:var(--font-headline);font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1;white-space:nowrap;text-align:right;letter-spacing:0.01em}
  .event-price small{font-family:var(--font-body);font-weight:400;font-size:11px;display:block;color:var(--ota-fg-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px}
  .event-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
  .event-actions .btn{padding:10px 18px;font-size:11px}
  @media (max-width:768px){ .event-price,.event-actions{grid-column:1/-1;justify-content:flex-start;text-align:left} }

  /* ====== SPACES (PAGE 5) ====== */
  .spaces-intro{display:grid;gap:40px;grid-template-columns:1fr;margin-bottom:48px}
  @media (min-width:900px){ .spaces-intro{grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center} }
  .spaces-intro .photo{aspect-ratio:5/4;border-radius:var(--radius-md);overflow:hidden;position:relative}
  .spaces-intro .photo img{width:100%;height:100%;object-fit:cover}
  .spaces-intro .photo::before{content:"OTA SPACES";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,64px);color:var(--ota-fg);text-transform:uppercase;letter-spacing:-0.01em;z-index:1;text-shadow:0 4px 24px rgba(0,0,0,0.7)}
  .spaces-intro .copy p{color:var(--ota-fg-muted);font-size:16px;line-height:1.55;margin:0 0 12px;max-width:540px}
  .spaces-intro .copy p strong{color:var(--ota-fg)}
  .spaces-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

  .spaces-grid{display:grid;gap:16px;grid-template-columns:1fr}
  @media (min-width:640px){ .spaces-grid{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:1024px){ .spaces-grid{grid-template-columns:repeat(3,1fr);gap:24px} }
  .space{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--ota-surface);transition:transform 250ms var(--ease);display:block;cursor:pointer}
  .space:hover{transform:translateY(-4px)}
  .space img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
  .space:hover img{transform:scale(1.05)}
  .space::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,0.92) 100%);pointer-events:none}
  .space-body{position:absolute;left:24px;right:24px;bottom:24px;z-index:2}
  .space h3{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,40px);text-transform:uppercase;line-height:0.95;margin:0 0 6px;letter-spacing:-0.01em}
  .space .kick{font-family:var(--font-headline);font-weight:700;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ota-accent);margin:0 0 8px}
  /* Carousel indicator dots (PDF says carousels of 4-5 photos) */
  .space .dots{position:absolute;left:24px;bottom:10px;display:flex;gap:6px;z-index:2}
  .space .dots span{width:6px;height:6px;border-radius:999px;background:rgba(244,243,240,0.4)}
  .space .dots span.on{background:var(--ota-fg);width:18px;border-radius:3px}

  /* ====== MERCH ====== */
  .merch-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
  @media (min-width:1024px){ .merch-grid{grid-template-columns:repeat(4,1fr);gap:24px} }
  .product{background:var(--ota-surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--ota-border);transition:transform 150ms var(--ease),border-color 150ms var(--ease);cursor:pointer}
  .product:hover{transform:translateY(-3px);border-color:var(--ota-border-2)}
  .product-img{aspect-ratio:1;background:var(--ota-surface-2);display:flex;align-items:center;justify-content:center;padding:32px;position:relative}
  .product-img img{max-width:55%;max-height:55%;object-fit:contain}
  .product-body{padding:16px 20px 20px}
  .product .cat{font-family:var(--font-headline);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ota-fg-muted);margin:0 0 4px}
  .product .name{font-family:var(--font-headline);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.02em;margin:0 0 8px}
  .product .price{font-family:var(--font-headline);font-weight:700;font-size:18px;line-height:1;color:var(--ota-accent);letter-spacing:0.01em}

  /* ====== LATEST HAPPENINGS ====== */
  .blog-grid{display:grid;gap:16px;grid-template-columns:1fr}
  @media (min-width:640px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:1024px){ .blog-grid{grid-template-columns:repeat(4,1fr);gap:20px} }
  .post{background:var(--ota-surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--ota-border);display:flex;flex-direction:column;transition:transform 150ms var(--ease);cursor:pointer}
  .post:hover{transform:translateY(-3px)}
  .post-img{aspect-ratio:4/3;overflow:hidden}
  .post-img img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
  .post:hover .post-img img{transform:scale(1.04)}
  .post-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
  .post .tag{align-self:flex-start;padding:5px 11px;background:var(--ota-accent);color:var(--ota-fg);border-radius:var(--radius-pill);font-family:var(--font-headline);font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:0.1em}
  .post h3{font-family:var(--font-headline);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:0.01em;margin:0;line-height:1.25}
  .post .date{margin-top:auto;font-family:var(--font-headline);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ota-fg-muted)}

  /* ====== DON'T MISS OUT — mailing-list band (Sitemap p.2 thumb): big title left, blurb middle, email input right ====== */
  .dmo{padding:48px var(--pad-x);background:var(--ota-bg);border-top:1px solid var(--ota-border)}
  .dmo-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
  @media (min-width:1024px){ .dmo-grid{grid-template-columns:auto 1fr 1.1fr;gap:48px} }
  .dmo-title{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5vw,64px);text-transform:uppercase;letter-spacing:-0.01em;line-height:1;margin:0;color:var(--ota-fg)}
  .dmo-blurb{font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ota-fg);margin:0;max-width:520px}
  .dmo-input{width:100%;background:var(--ota-fg);color:var(--ota-bg);border:0;padding:22px 28px;font-family:var(--font-body);font-size:16px;border-radius:0;outline:none}
  .dmo-input::placeholder{color:rgba(10,10,10,0.55)}

  /* ====== CONTACT / TALK TO US (PAGE 6) ====== */
  .contact-grid{display:grid;gap:48px;grid-template-columns:1fr}
  @media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr;gap:64px} }
  .contact-title{display:flex;align-items:center;gap:0.4em;font-family:var(--font-display);font-weight:700;font-size:clamp(44px,7vw,96px);text-transform:uppercase;line-height:0.92;margin:0 0 32px;letter-spacing:-0.01em}
  .contact-title .mark{width:0.78em;height:0.78em;border-radius:100% 0 0 0;background:var(--ota-fg);flex:0 0 auto}
  .step-label{font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.18em;color:var(--ota-fg-muted);margin:0 0 20px}
  .sltl{font-family:var(--font-body);font-style:italic;font-size:20px;color:var(--ota-fg-muted);margin:0 0 20px;opacity:0.7}
  .cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .cat-tab{padding:10px 18px;border:1.5px solid var(--ota-border-2);border-radius:var(--radius-pill);font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ota-fg);transition:background 150ms var(--ease),border-color 150ms var(--ease)}
  .cat-tab.is-active{background:var(--ota-accent);color:var(--ota-fg);border-color:transparent}
  .cat-tab:hover:not(.is-active){border-color:var(--ota-fg)}
  .field-grid{display:grid;gap:16px;grid-template-columns:1fr}
  @media (min-width:560px){ .field-grid.two-col{grid-template-columns:1fr 1fr} }
  .field label{display:block;font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ota-fg-muted);margin-bottom:8px}
  .field input,.field textarea{width:100%;background:var(--ota-surface-2);border:1px solid var(--ota-border);border-radius:var(--radius-sm);padding:14px 18px;font-family:var(--font-body);font-size:15px;color:var(--ota-fg);transition:border-color 150ms var(--ease)}
  .field textarea{min-height:120px;resize:vertical}
  .field input::placeholder,.field textarea::placeholder{color:var(--ota-fg-dim)}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--ota-fg)}
  .form-cta{margin-top:24px}

  .find-block{margin-bottom:24px}
  .find-block .label{font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ota-fg-muted);margin:0 0 6px}
  .find-block .val{font-family:var(--font-headline);font-weight:700;font-size:18px;margin:0 0 2px;color:var(--ota-fg)}
  .find-block .sub{font-size:13px;color:var(--ota-fg-muted);margin:0}
  .social-row{display:flex;gap:10px;margin:8px 0 28px}
  .social-row a{width:44px;height:44px;border-radius:10px;background:var(--ota-surface-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-headline);font-weight:700;font-size:11px;letter-spacing:0.04em;color:var(--ota-fg);transition:background 150ms var(--ease)}
  .social-row a:hover{background:var(--ota-fg);color:var(--ota-bg)}
  .map{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;margin-bottom:20px;background:var(--ota-surface-2);background-image:repeating-linear-gradient(45deg,rgba(244,243,240,0.03) 0 2px,transparent 2px 12px);display:flex;align-items:center;justify-content:center}
  .map::before{content:"";width:28px;height:28px;border-radius:50% 50% 50% 0;background:var(--ota-accent);transform:rotate(-45deg);margin-bottom:36px;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
  .map::after{content:"OTA PLAYHOUSE, HOI AN";position:absolute;font-family:var(--font-headline);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:0.16em;color:var(--ota-fg-muted);margin-top:60px}
  .hours{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--ota-border);padding-top:20px}
  .hours .row{text-align:center}
  .hours .k{font-family:var(--font-headline);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ota-fg-muted);margin:0 0 4px}
  .hours .v{font-family:var(--font-headline);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.02em;margin:0;color:var(--ota-fg)}

  /* ====== FOOTER (Sitemap p.2 thumb + p.3 — 4 columns: brand, social, events/info, about/get-in-touch + tagline bottom-left) ====== */
  .site-footer{background:var(--ota-bg);padding:80px var(--pad-x) 56px;border-top:1px solid var(--ota-border)}
  .footer-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr;gap:48px}
  @media (min-width:768px){ .footer-grid{grid-template-columns:1fr 1fr;gap:48px 64px} }
  @media (min-width:1024px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:56px} }
  .ft-brand img{width:100px;height:auto;display:block}
  @media (min-width:1024px){ .ft-brand img{width:130px} }
  .ft-socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
  .ft-socials a{width:44px;height:44px;border-radius:10px;background:var(--ota-surface-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-headline);font-weight:700;font-size:11px;letter-spacing:0.08em;color:var(--ota-fg);transition:background 150ms var(--ease)}
  .ft-socials a:hover{background:var(--ota-fg);color:var(--ota-bg)}
  .ft-col .ft-kicker{font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.16em;color:var(--ota-fg-muted);margin:0 0 16px}
  .ft-col + .ft-kicker{margin-top:32px}
  .ft-col ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
  .ft-col ul li a{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.8vw,22px);text-transform:uppercase;letter-spacing:0.01em;color:var(--ota-fg);transition:color 150ms var(--ease)}
  .ft-col ul li a:hover{color:var(--ota-fg-muted)}
  .ft-tagline{max-width:var(--wrap);margin:72px auto 0;font-family:var(--font-display);font-weight:700;font-size:clamp(44px,8vw,112px);line-height:0.95;text-transform:uppercase;letter-spacing:-0.01em;color:var(--ota-fg)}
  .ft-legal{max-width:var(--wrap);margin:32px auto 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ota-fg-muted);border-top:1px solid var(--ota-border);padding-top:24px}

  /* ====== MENU OVERLAY — 3 cols × 2 rows with LEFT col merged (Sitemap V2 p.3) ====== */
  .overlay{position:fixed;inset:0;z-index:60;background:var(--ota-bg);display:none;opacity:0;transition:opacity 250ms var(--ease)}
  .overlay.open{display:block;opacity:1}
  .overlay-grid{
    position:absolute;inset:0;
    display:grid;
    grid-template-columns:1fr 1.4fr 1.4fr;
    grid-template-rows:1fr 1fr;
  }
  .q{border:1px solid var(--ota-border);padding:40px;display:flex;flex-direction:column;margin:-0.5px}
  @media (min-width:1024px){ .q{padding:56px} }
  .q--brand{
    grid-row:1 / span 2; grid-column:1 / 2;
    justify-content:space-between;
  }
  .q--brand .glyph-img{width:110px;height:auto;display:block}
  @media (min-width:1024px){ .q--brand .glyph-img{width:160px} }
  .q--brand .tag{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.5vw,30px);text-transform:uppercase;line-height:1.05;letter-spacing:0.01em}
  .q .kicker{font-family:var(--font-headline);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.16em;color:var(--ota-fg)}
  .q .close-label{font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:0.02em;cursor:pointer;padding:8px 14px;border-radius:10px;position:absolute;top:24px;right:24px;transition:background 150ms var(--ease)}
  .q .close-label:hover{background:rgba(244,243,240,0.08)}
  .q .links{margin:auto 0;text-align:center;display:flex;flex-direction:column;gap:10px}
  .q .links a{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3.2vw,40px);text-transform:uppercase;line-height:0.98;letter-spacing:0.01em;transition:color 150ms var(--ease)}
  .q .links a:hover{color:var(--ota-accent)}
  @media (max-width:767px){
    .overlay-grid{grid-template-columns:1fr;grid-template-rows:repeat(5, auto)}
    .q--brand{grid-row:auto;grid-column:auto;padding:88px 32px 32px;flex-direction:column;align-items:flex-start;gap:20px;justify-content:flex-start}
    .q--brand .glyph-img{width:72px}
    .q--brand .tag{font-size:clamp(20px,7vw,32px)}
    .q .kicker{text-align:left}
    .q .links{margin:20px 0;gap:6px}
    .q .close-label{top:28px;right:24px;font-size:18px;padding:6px 12px}
  }

/* ===== Archive + Single Layouts (Sprint 4) ===== */
.archive-hero{padding:var(--s-9) 0 var(--s-7)}
.archive-title{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,7vw,92px);text-transform:uppercase;line-height:0.95;letter-spacing:0.01em;margin:0 0 var(--s-4)}
.archive-blurb{font-family:var(--font-body);font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:60ch;color:var(--ota-fg);opacity:0.85}
.archive-cta{display:flex;justify-content:center;margin-top:var(--s-7)}

.events--past{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.event-past{display:block;padding:var(--s-4);background:rgba(244,243,240,0.04);border:1px solid rgba(244,243,240,0.08);border-radius:14px;transition:border-color 150ms var(--ease),background 150ms var(--ease)}
.event-past:hover{border-color:var(--ota-accent);background:rgba(244,243,240,0.06)}
.event-past .date{font-family:var(--font-headline);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ota-accent);margin:0 0 8px}
.event-past .title{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;line-height:1.1;margin:0}

/* Single post */
.single{padding-bottom:var(--s-9)}
.single-hero{position:relative;overflow:hidden}
.single-hero-img{display:block;width:100%;height:clamp(320px,48vw,560px);object-fit:cover}
.single-hero-img--placeholder{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:clamp(28px,5vw,64px);text-transform:uppercase;color:var(--ota-fg);background:var(--ota-bg)}
.single-hero-body{padding:var(--s-5) var(--pad-x) var(--s-4);margin-top:-80px;position:relative;z-index:2;background:linear-gradient(180deg,transparent 0%,var(--ota-bg) 60%)}
.single-title{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,6vw,80px);text-transform:uppercase;line-height:0.95;letter-spacing:0.01em;margin:8px 0 var(--s-3)}
.single-date{font-family:var(--font-headline);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ota-accent);margin:0}

.single-body{display:grid;grid-template-columns:1fr 320px;gap:var(--s-7);padding:var(--s-6) var(--pad-x) 0;align-items:start}
@media (max-width:900px){ .single-body{grid-template-columns:1fr;gap:var(--s-5)} }
.single-content{font-family:var(--font-body);font-size:clamp(16px,1.1vw,18px);line-height:1.65;color:var(--ota-fg)}
.single-content p{margin:0 0 var(--s-3)}
.single-content h2,.single-content h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.01em;margin:var(--s-5) 0 var(--s-3)}
.single-content h2{font-size:clamp(24px,3vw,36px)}
.single-content h3{font-size:clamp(20px,2.2vw,28px)}
.single-content a{color:var(--ota-accent);text-decoration:underline}

.single-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);background:rgba(244,243,240,0.04);border:1px solid rgba(244,243,240,0.1);border-radius:14px}
@media (max-width:900px){ .single-sidebar{position:static} }
.single-price{display:flex;flex-direction:column;align-items:flex-start;padding:var(--s-3) 0;border-bottom:1px solid rgba(244,243,240,0.1);margin-bottom:var(--s-3)}
.single-price-label{font-family:var(--font-headline);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ota-fg);opacity:0.6}
.single-price-value{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.5vw,44px);color:var(--ota-accent);line-height:1;margin-top:4px}

.single-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.single-gallery img{display:block;width:100%;height:200px;object-fit:cover;border-radius:10px}

/* Single beer */
.single-beer-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s-7);padding:var(--s-8) var(--pad-x);align-items:center}
@media (max-width:900px){ .single-beer-grid{grid-template-columns:1fr;gap:var(--s-5);padding:var(--s-6) var(--pad-x)} }
.single-beer-can{display:flex;justify-content:center}
.can--lg{transform:scale(1.4);transform-origin:center}
@media (max-width:900px){ .can--lg{transform:scale(1.1)} }
.single-beer-body .kick{font-family:var(--font-headline);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.16em;color:var(--ota-accent);margin:0 0 var(--s-3)}
.single-beer-meta{font-family:var(--font-headline);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.14em;opacity:0.75;margin:0 0 var(--s-4)}
.single-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}

/* ===== Talk To Us / #contact (Sprint 5) ===== */
[x-cloak]{display:none !important}
.contact{padding:var(--s-8) 0}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-7);align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:var(--s-5)} }

.contact-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s-4) 0 var(--s-5)}
.contact-tabs .tab{font-family:var(--font-headline);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.14em;padding:10px 18px;border:1px solid rgba(244,243,240,0.25);border-radius:999px;background:transparent;color:var(--ota-fg);cursor:pointer;transition:background 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease)}
.contact-tabs .tab:hover{border-color:var(--ota-fg)}
.contact-tabs .tab.is-active{background:var(--ota-accent);border-color:var(--ota-accent);color:var(--ota-fg)}

.contact-form{display:grid;gap:var(--s-3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media (max-width:640px){ .form-row{grid-template-columns:1fr} }
.contact-form label{display:flex;flex-direction:column;gap:6px}
.contact-form label > span{font-family:var(--font-headline);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ota-fg);opacity:0.8}
.contact-form label > span small{opacity:0.55;font-weight:500;letter-spacing:0.08em;margin-left:4px}
.contact-form input,.contact-form textarea{font-family:var(--font-body);font-size:15px;line-height:1.5;padding:12px 14px;background:rgba(244,243,240,0.04);border:1px solid rgba(244,243,240,0.14);border-radius:10px;color:var(--ota-fg);transition:border-color 150ms var(--ease),background 150ms var(--ease)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--ota-accent);background:rgba(244,243,240,0.06)}
.contact-form textarea{resize:vertical;min-height:140px}
.form-actions{margin-top:var(--s-3)}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

.contact-success{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-6);border:1px solid var(--ota-accent);border-radius:14px;background:rgba(246,27,72,0.06);position:relative;overflow:hidden}
.contact-success .quarter{position:absolute;bottom:-40px;right:-40px;width:180px;height:180px;border-radius:50% 0 0 0;background:var(--ota-accent);opacity:0.18}
.contact-success h3{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);text-transform:uppercase;margin:0}
.contact-success p{font-family:var(--font-body);font-size:16px;margin:0;opacity:0.9}

.contact-col-info{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);background:rgba(244,243,240,0.03);border:1px solid rgba(244,243,240,0.08);border-radius:14px}
.contact-block h3{font-family:var(--font-headline);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.16em;color:var(--ota-accent);margin:0 0 10px}
.contact-block p{font-family:var(--font-body);font-size:15px;line-height:1.55;margin:0}
.contact-block small{opacity:0.65}
.contact-block a{color:var(--ota-fg);text-decoration:underline;text-decoration-color:rgba(244,243,240,0.3);transition:text-decoration-color 150ms var(--ease)}
.contact-block a:hover{text-decoration-color:var(--ota-accent)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-family:var(--font-body);font-size:15px}
.hours dt{font-weight:600}
.hours dd{margin:0;opacity:0.85}