/* Layout: magazine. White ground, wide margins, one red line, serif display, big photographs. */
:root {
  color-scheme: light; /* light only, by choice: Annalisa does not like black */
  --bg: #ffffff;
  --fg: #2b2422;          /* warm charcoal, never pure black */
  --muted: #6e615b;
  --rule: #e8dfda;
  --red: #d7321e;         /* taken from the Italians By The Bay poster */
  --green: #1f5b3f;
  --blush: #fbf1ed;       /* pale pink ground for one band */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.eyebrow { font-family: var(--body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.measure { max-width: 34em; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 600; font-size: 15px; text-decoration: none; padding: 13px 22px; border-radius: 999px; border: 1.5px solid var(--fg); color: var(--fg); background: transparent; transition: background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); outline: none; }
.btn.red { border-color: var(--red); background: var(--red); color: #fff; }
.btn.red:hover, .btn.red:focus-visible { background: transparent; color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand { font-family: var(--display); font-size: 20px; text-decoration: none; letter-spacing: 0; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.nav ul a { text-decoration: none; color: var(--muted); }
.nav ul a:hover { color: var(--red); }
.nav .right { display: flex; align-items: center; gap: 26px; }
.lang { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--display); font-size: 18px; }
.lang a, .lang button { font: inherit; text-decoration: none; background: none; border: 0; padding: 2px 4px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; letter-spacing: .02em; }
.lang a[aria-current], .lang button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--red); }
.lang a:hover, .lang button:hover { color: var(--red); }
.lang .sep { color: var(--rule); font-style: italic; }
@media (max-width: 560px) { .nav ul { gap: 12px; font-size: 13px; } .nav ul li:last-child { display: none; } .nav .right { gap: 14px; } .lang { font-size: 16px; } }

/* hero */
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: end; padding-block: 56px 48px; }
.hero h1 { font-size: clamp(44px, 7.2vw, 104px); line-height: 0.98; font-weight: 300; font-variation-settings: "opsz" 72; }
.head h2, .contact h2, .door h2, .offer h3 { font-variation-settings: "opsz" 72; }
.hero h1 em { font-style: italic; font-weight: 300; font-size: 1.23em; line-height: .9; display: inline-block; }  /* Siagura set to the width of Annalisa, red dot hangs past it */
.hero h1 .dot { color: var(--red); }
.hero .line { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; margin-top: 26px; font-weight: 400; }
.hero .line .dot { color: var(--red); }
.hero .intro { margin-top: 26px; color: var(--muted); font-size: 17px; }
.hero figure { margin: 0; position: relative; }
.hero figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; }
.hero figure::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 42%; height: 6px; background: var(--red); }
.hero figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; gap: 32px; padding-block: 36px; } .hero figure { order: -1; max-width: 420px; } }

/* doors */
.doors { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.doors .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.door { padding: 34px 28px 38px 0; border-right: 1px solid var(--rule); text-decoration: none; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.door + .door { padding-left: 28px; }
.door:last-child { border-right: 0; padding-right: 0; }
.door h2 { font-size: 34px; font-weight: 400; transition: color .2s; }
.door p { color: var(--muted); font-size: 15.5px; }
.door .go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.door:hover h2 { color: var(--red); }
.door[data-flag="green"]:hover h2 { color: var(--green); }  /* red, then green, then red: the flag, one hover at a time (Rich, 2026-10-19) */
@media (max-width: 820px) { .doors .wrap { grid-template-columns: 1fr; } .door, .door + .door { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--rule); } .door:last-child { border-bottom: 0; } }

/* sections */
section.block .wrap { padding-block: 88px; }
.head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 44px; }
.head h2 { font-size: clamp(36px, 5vw, 60px); font-weight: 300; line-height: 1.05; }
.head h2 i { font-style: italic; }

/* film */
.film .grid { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.poster { box-shadow: 0 20px 50px -20px rgba(60, 20, 10, .35); border: 1px solid var(--rule); }
.film .text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.film .text p.lede { font-family: var(--display); font-size: 24px; line-height: 1.35; font-weight: 300; }
.poster-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.credits { font-size: 14px; color: var(--muted); display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }  /* under the poster, fills the left column (Rich, 2026-10-19) */
.credits b { color: var(--fg); font-weight: 600; }
.trailer { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--fg); }
.trailer img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .6s ease, opacity .3s; }
.trailer:hover img { transform: scale(1.03); opacity: 1; }
.trailer .play { position: absolute; inset: 0; display: grid; place-items: center; }
.trailer .play > span { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #2b2422; padding: 12px 20px 12px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.trailer .play svg { width: 18px; height: 18px; fill: var(--red); }
.laurels { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--rule); }
.laurels .laurel-row { margin-bottom: 8px; }
.laurel-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; font-size: 14px; color: var(--muted); }
.laurel-list b { color: var(--fg); font-weight: 600; display: block; }
@media (max-width: 900px) { .film .grid { grid-template-columns: 1fr; } .poster { max-width: 320px; } .poster-col { order: 2; } .laurel-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .laurel-list { grid-template-columns: 1fr; } }

.laurel-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 12px; align-items: center; justify-items: center; }
.laurel { width: 100%; max-width: 160px; height: auto; display: block; }
@media (max-width: 720px) { .laurel-row { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; } .laurel { max-width: 140px; } }
/* practice */
.practice { background: var(--blush); }
/* offers stacked as rows: heading left, text right, so unequal lengths do not fight (Rich, 2026-10-19) */
.practice .cols { display: grid; grid-template-columns: 1fr; gap: 0; }
.offer { display: grid; grid-template-columns: 1fr 2fr; gap: 16px 48px; min-width: 0; padding-block: 36px; border-top: 1px solid var(--rule); }
.offer:first-child { border-top: 0; padding-top: 0; }
.offer h3 { font-size: 32px; font-weight: 400; }
.offer-text { display: flex; flex-direction: column; gap: 14px; max-width: 34em; }
.offer p { color: var(--muted); }
.placeholder { border: 1.5px dashed var(--red); padding: 18px 20px; border-radius: 4px; position: relative; color: var(--muted); font-size: 15.5px; }
.placeholder::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 8px; }
.cred { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; }
.cred p { font-family: var(--display); font-size: 20px; line-height: 1.4; font-weight: 300; max-width: 34em; }
.langs { font-size: 14px; color: var(--muted); margin-top: 10px; }
@media (max-width: 820px) { .offer, .cred { grid-template-columns: 1fr; } }

/* story */
.story .grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.story .places { font-family: var(--display); font-style: italic; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; font-weight: 300; }
.story .places span { color: var(--red); }
.story .text { display: flex; flex-direction: column; gap: 20px; min-width: 0; font-size: 18px; }
@media (max-width: 820px) { .story .grid { grid-template-columns: 1fr; gap: 28px; } }

/* contact */
.contact { border-top: 1px solid var(--rule); }
.contact .wrap { padding-block: 88px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.contact h2 { font-size: clamp(36px, 5vw, 60px); font-weight: 300; line-height: 1.05; }
.email { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-size: clamp(20px, 3vw, 30px); }
.email button { font: inherit; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); background: transparent; color: var(--muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.email button:hover { border-color: var(--fg); color: var(--fg); }
.contact .row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.contact .it { color: var(--muted); font-style: italic; font-family: var(--display); font-size: 18px; }
footer { border-top: 1px solid var(--rule); }
footer .wrap { padding-block: 22px 36px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* v1 additions: real trailer embed, email as a link */
.trailer .play { border: 0; background: transparent; padding: 0; cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.trailer:hover .play > span { transform: scale(1.03); }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.email a { color: inherit; text-decoration: none; }
.email a:hover { color: var(--red); }


/* hover a marked word: it turns into its Italian twin, in red, and back on leave (Rich, 2026-10-19, "swap") */
.tr { position: relative; display: inline-block; cursor: default; white-space: nowrap; vertical-align: top; transition: color .35s, width .45s cubic-bezier(.4,0,.2,1); }
.tr::after { content: attr(data-alt); position: absolute; left: 0; top: 0; color: var(--red); white-space: nowrap; opacity: 0; transition: opacity .35s; pointer-events: none; }
.tr:hover, .tr:focus-visible { color: transparent; }
.tr:hover::after, .tr:focus-visible::after { opacity: 1; }
@media (hover: none) { .tr:active { color: transparent; } .tr:active::after { opacity: 1; } }

/* hero name as the Direction B wordmark (Annalisa, 2026-10-19). Everything else unchanged. */
.hero h1.wordmark { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.96; font-size: clamp(40px, 6.4vw, 92px); }
.hero h1.wordmark .dot { color: var(--red); }

/* quiet booking button in the nav (Rich, 2026-10-19). The red one stays in Practice and Contact. */
.nav-book { padding: 8px 14px; font-size: 13px; border-width: 1px; border-color: var(--rule); color: var(--fg); }
.nav-book:hover, .nav-book:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 560px) { .nav-book { display: none; } }

/* Women's group sign-up: Google Form in a pop-up (Rich, 2026-10-20) */
.offer-text .btn { align-self: flex-start; margin-top: 6px; }
.modal { width: min(680px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--bg); }
.modal::backdrop { background: rgba(43, 36, 34, .55); }
.modal iframe { display: block; width: 100%; height: 100%; border: 0; }
.modal-close { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--bg); color: var(--fg); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }