/* Phone layout (shared by every page). Desktop is untouched: all rules sit
   inside the phone-width query, and the Menu button is hidden elsewhere. */
.aw .menu-toggle { display:none; }

/* LANGUAGE PICKER (built by menu.js): globe button at the end of the header, list of languages under it */
.aw .hero-top .hero-nav { margin-left:auto; }
.aw .langs { position:relative; flex:none; margin-left:clamp(6px, 1.5vw, 18px); }
.aw .langs summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--line-strong); font-family:var(--font-body); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); -webkit-tap-highlight-color:transparent; }
.aw .langs summary::-webkit-details-marker { display:none; }
.aw .langs summary svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; }
.aw .langs summary:hover, .aw .langs[open] summary { border-color:var(--fg); }
.aw .langs summary:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
.aw .langs ul { position:absolute; top:calc(100% + 8px); right:0; z-index:60; list-style:none; margin:0; padding:6px; min-width:170px; background:#f0e6d2; border:1px solid rgba(74,90,58,.34); box-shadow:0 16px 40px rgba(20,17,13,.28); display:grid; }
.aw .langs li a { display:block; padding:9px 12px; color:#2a2015; text-decoration:none; font-family:var(--font-body); font-size:15px; }
.aw .langs li a:hover { background:#e8dab9; }
.aw .langs li a[aria-current] { color:#9c4a1a; font-weight:600; }
.aw .langrow { display:none; }

/* ARABIC: the site's fonts have no Arabic letters, so Readex Pro fills in; letter-spacing would break the joined script */
html[lang=ar] .aw { --font-display:'Fraunces', 'Readex Pro', Georgia, serif; --font-body:'Hanken Grotesk', 'Readex Pro', -apple-system, Helvetica, Arial, sans-serif; }
html[lang=ar] .aw *, html[lang=ar] .mixbar * { letter-spacing:0 !important; }
/* event names and notes come from the sheet in English: lay each out in its own direction */
html[dir=rtl] .aw .event-title, html[dir=rtl] .aw .event-where, html[dir=rtl] .aw .event-notes, html[dir=rtl] .aw .up-title, html[dir=rtl] .aw .up-where { unicode-bidi:plaintext; }
html[dir=rtl] .aw .event-title, html[dir=rtl] .aw .event-where, html[dir=rtl] .aw .event-notes { text-align:right; }
html[dir=rtl] .aw .hero-top .hero-nav { margin-left:0; margin-right:auto; }
html[dir=rtl] .aw .langs { margin-left:0; margin-right:clamp(6px, 1.5vw, 18px); }
html[dir=rtl] .aw .langs ul { right:auto; left:0; }

@media (max-width:640px) {
  /* MENU */
  .aw .hero-top { flex-wrap:wrap; }
  .aw .menu-toggle { display:inline-block; margin-left:auto; font-family:var(--font-body); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); background:transparent; border:1px solid var(--line-strong); border-radius:0; padding:10px 16px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .aw .menu-toggle:focus-visible { outline:2px solid var(--accent-bright); outline-offset:2px; }
  .aw .hero-nav { display:none; }
  .aw .hero-top .langs { margin-left:auto; }
  .aw .hero-top:has(.langs) .menu-toggle { margin-left:8px; order:1; }
  .aw .langs summary { padding:9px 10px; }
  html[dir=rtl] .aw .hero-top .langs { margin-left:0; margin-right:auto; }
  html[dir=rtl] .aw .hero-top:has(.langs) .menu-toggle { margin-left:0; margin-right:8px; }
  html[dir=rtl] .aw .menu-toggle { margin-left:0; margin-right:auto; }

  .aw .hero-top.menu-open { --fg:#2a2015; --fg-dim:#5c4d36; --line:rgba(74,90,58,.16); --line-strong:rgba(74,90,58,.34); --accent-bright:#9c4a1a; position:fixed; inset:0; z-index:1000; align-content:flex-start; overflow-y:auto; background:#f0e6d2; border-bottom:0; }
  .aw .hero-top.menu-open .hero-nav { display:flex; flex-direction:column; align-items:flex-start; flex-basis:100%; gap:20px; margin-top:40px; padding-bottom:40px; }
  .aw .hero-top.menu-open .hero-nav a { font-family:var(--font-display) !important; font-weight:400 !important; font-size:30px !important; letter-spacing:0 !important; text-transform:none !important; line-height:1.15; color:var(--fg) !important; }
  .aw .hero-top.menu-open .hero-nav a.current { color:var(--accent-bright) !important; }
  .aw .hero-top.menu-open .langs { display:none; }
  .aw .hero-top.menu-open .langrow { display:flex; flex-wrap:wrap; gap:10px 20px; flex-basis:100%; order:3; padding:20px 0 40px; border-top:1px solid var(--line); }
  .aw .hero-top.menu-open .langrow a { font-family:var(--font-body); font-size:17px; color:var(--fg-dim); text-decoration:none; }
  .aw .hero-top.menu-open .langrow a[aria-current] { color:var(--accent-bright); font-weight:600; }
  .aw .hero-top.menu-open .hero-nav { order:2; padding-bottom:28px !important; }
  html.menu-lock, html.menu-lock body { overflow:hidden; }

  /* HOMEPAGE HERO: photo with the headline on it, intro and buttons below */
  .aw .hero { height:auto; max-height:none; background:#14110d; }
  .aw .hero .hero-bg { bottom:auto !important; height:78vh !important; height:78svh !important; object-position:74% 40% !important; }
  /* the shade runs past the photo (which grows slightly as it zooms) and ends solid, so there's no seam */
  .aw .hero .hero-shade { bottom:auto !important; height:84vh !important; height:84svh !important; background:linear-gradient(180deg, rgba(20,17,13,.6) 0%, rgba(20,17,13,.2) 40%, rgba(20,17,13,.9) 80%, #14110d 92%) !important; }
  .aw .hero .hero-content { margin-top:max(220px, calc(78vh - 250px)); margin-top:max(220px, calc(78svh - 250px)); padding-bottom:48px; }
  .aw .hero .btnrow { flex-direction:column; align-items:stretch; gap:12px; }
  .aw .hero .btnrow .btn { text-align:center; }

  /* Instagram reel: drop the desktop alignment nudge */
  .aw .ig-wrap { transform:none !important; margin-top:8px; }
}