/* ============================================================================
   Liberty Lisbon — Host an Event · "Swiss Modernist" (§131, 2026-06-06)
   Self-contained: no @import URLs, self-hosted font. Matches the v2 cafe
   direction — strict grid, one red accent + 14px red-square motif, numbered
   section, mono metadata, ABC Arizona Flare serif + tracked-caps labels,
   square corners, hairline rules, no shadows, no gradients.
   Form mechanics untouched (hp-* classes + IDs preserved for script.js).
   ============================================================================ */

/* --- Brand font: ABC Arizona Flare Medium (self-hosted) ------------------- */
@font-face {
    font-family: "ABC Arizona Flare";
    src: url("fonts/ABCArizonaFlare-Medium.woff2") format("woff2"),
         url("fonts/ABCArizonaFlare-Medium.woff")  format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- Design tokens -------------------------------------------------------- */
:root {
    --cream:      #FFFEF9;
    --paper:      #F5EFE2;
    --ink:        #1A1A1A;
    --warm:       #947D6C;
    --warm-deep:  #8E7364;
    --ink-soft:   #3A2A23;
    --ink-mute:   #6B544A;

    --accent-red:   #F72912;
    --accent-blue:  #0C8DEB;
    --accent-green: #214223;
    --accent-burg:  #6A3D3A;

    --rule:     rgba(39, 24, 19, 0.18);
    --ink-line: var(--ink);

    --serif: "ABC Arizona Flare", "Big Caslon", "Hoefler Text", "Didot", Georgia, serif;
    --sans:  -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", "Arial", sans-serif;
    --mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

    --cw: 1320px;
    --gutter: clamp(20px, 4vw, 56px);
    --dur-fast: 200ms;
    --dur-base: 400ms;
    --ease: cubic-bezier(.25, .46, .45, .94);
}

/* --- Reset + base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans);
    -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--cw); margin: 0 auto; padding: 0 var(--gutter); }
.redsq { width: 14px; height: 14px; background: var(--accent-red); display: inline-block; flex: none; }
.eyb { font: 600 11px/1 var(--sans); letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent-red); }

/* --- 4-colour brand stripe ---------------------------------------------- */
.cstripe { display: grid; grid-template-columns: repeat(4, 1fr); height: 12px; }
.cstripe span:nth-child(1) { background: var(--accent-red); }
.cstripe span:nth-child(2) { background: var(--accent-blue); }
.cstripe span:nth-child(3) { background: var(--accent-green); }
.cstripe span:nth-child(4) { background: var(--accent-burg); }

/* --- Meta strip --------------------------------------------------------- */
.meta-strip { border-bottom: 1px solid var(--rule); }
.meta-strip .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 9px var(--gutter);
    font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.meta-strip span:last-child { text-align: right; }

/* --- Header ------------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--cream); border-bottom: 1px solid var(--ink-line); }
.hdr .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.hdr__brand { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.hdr__nav { display: flex; justify-content: center; gap: 26px; }
.hdr__nav a { font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
    transition: color var(--dur-fast) var(--ease); }
.hdr__nav a:hover { color: var(--warm-deep); }
.hdr__nav a.is-active { color: var(--accent-red); }
.hdr__util { display: flex; justify-content: flex-end; gap: 16px; }
.hdr__util a { color: var(--ink); transition: color var(--dur-fast) var(--ease); }
.hdr__util a:hover { color: var(--warm-deep); }
.hdr__util svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 74px; align-items: start; }
.hero__l { display: flex; flex-direction: column; }
.hero__sq { margin-bottom: 26px; }
.hero__eyb { margin-bottom: 22px; }
.hero__h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 6.4vw, 96px);
    line-height: 0.95; letter-spacing: -0.018em; color: var(--ink); }
.hero__h1 em { font-style: normal; color: var(--accent-red); }
.hero__sub { font: 400 16px/1.6 var(--sans); color: var(--ink-soft); max-width: 46ch; margin-top: 28px; }
.hero__r { align-self: center; }
.hero__mark { display: flex; align-items: center; justify-content: center; padding: 8% 12%; }
.hero__mark img { width: 100%; max-width: 420px; height: auto; object-fit: contain; }
.hero__strip { margin-top: 56px; }

/* --- Section header (shared numbered pattern) --------------------------- */
.shead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
    padding: 22px 0; }
.shead__no  { font: 500 12px/1 var(--mono); color: var(--ink); }
.shead__lbl { font: 600 11px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); }
.shead__line { height: 1px; background: var(--rule); }
.shead__aux { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

/* ========================================================================
   FORM
   ======================================================================== */
.hp-form { padding-bottom: 96px; }
/* §135 — centre section 01 (shead + form) as one column */
.hp-form .shead { max-width: 760px; margin-left: auto; margin-right: auto; }
.hp-form__inner { max-width: 760px; padding-top: 48px; margin-left: auto; margin-right: auto; }

.hp-noscript { border: 1px solid var(--accent-red); padding: 16px; margin-bottom: 28px;
    font: 400 14px/1.6 var(--sans); color: var(--ink); }
.hp-noscript a { color: var(--accent-red); text-decoration: underline; }

/* Field wrapper */
.hp-fld { border: 0; margin-bottom: 26px; min-width: 0; }
.hp-fld > label, .hp-fld > legend {
    display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-mute); margin-bottom: 12px; padding: 0; }

/* Text inputs / select / textarea — square, hairline, ink focus */
.hp-fld input[type="text"],
.hp-fld input[type="email"],
.hp-fld input[type="tel"],
.hp-fld input[type="number"],
.hp-fld input[type="date"],
.hp-fld select,
.hp-fld textarea {
    width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--cream);
    border: 1px solid var(--rule); border-radius: 0; padding: 14px 14px;
    transition: border-color var(--dur-fast) var(--ease); -webkit-appearance: none; appearance: none; }
.hp-fld textarea { min-height: 128px; resize: vertical; }
.hp-fld input:focus, .hp-fld select:focus, .hp-fld textarea:focus { outline: none; border-color: var(--ink); }
.hp-fld input::placeholder, .hp-fld textarea::placeholder { color: var(--ink-mute); opacity: 0.7; }

/* Select custom chevron */
.hp-fld select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* Date inline flexible checkbox */
.hp-date-row { display: flex; align-items: center; gap: 10px; margin-top: 12px;
    font: 400 13px/1 var(--sans); color: var(--ink-soft); text-transform: none; letter-spacing: normal; cursor: pointer; }
.hp-date-row input { width: auto; accent-color: var(--accent-red); }

/* 2-column rows */
.hp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Venue cards */
.hp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-card { position: relative; display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--rule); border-radius: 0; padding: 22px 22px 22px 44px; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.hp-card input { position: absolute; opacity: 0; pointer-events: none; }
.hp-card__dot { position: absolute; left: 20px; top: 24px; width: 12px; height: 12px;
    border: 1px solid var(--ink); border-radius: 0; background: transparent;
    transition: background var(--dur-fast) var(--ease); }
.hp-card__name { font: 500 19px/1.1 var(--serif); color: var(--ink); }
.hp-card__sub { font: 400 12px/1.4 var(--sans); color: var(--ink-mute); }
.hp-card:hover { border-color: var(--ink); }
.hp-card:has(input:checked), .hp-card.is-selected { border-color: var(--ink); background: rgba(39,24,19,0.03); }
.hp-card:has(input:checked) .hp-card__dot, .hp-card.is-selected .hp-card__dot { background: var(--accent-red); border-color: var(--accent-red); }

/* Character counter */
.hp-counter { display: flex; justify-content: space-between; margin: -16px 0 26px;
    font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* Contact channel pills */
.hp-pills { display: flex; gap: 8px; }
.hp-pill { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--rule); border-radius: 0; padding: 0 18px; cursor: pointer;
    font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.hp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.hp-pill:hover { border-color: var(--ink); }
.hp-pill:has(input:checked), .hp-pill.is-selected { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Honeypot — off-screen */
.hp-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline + summary errors */
.hp-fld.has-error input, .hp-fld.has-error select, .hp-fld.has-error textarea { border-color: var(--accent-red); }
.hp-fld__error { display: block; margin-top: 8px; font: 500 12px/1.3 var(--sans); color: var(--accent-red); }
.hp-error-summary { border: 1px solid var(--accent-red); padding: 16px 18px; margin-bottom: 28px;
    font: 500 13px/1.5 var(--sans); color: var(--accent-red); }

/* Submit */
.hp-submit { margin-top: 36px; }
.hp-submit__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--cream);
    border: 1px solid var(--ink); border-radius: 0; padding: 16px 30px;
    font: 600 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.hp-submit__btn:hover { background: var(--accent-red); border-color: var(--accent-red); }
.hp-submit__btn[disabled] { opacity: 0.55; cursor: default; }

/* Thank-you */
.hp-thanks { border: 1px solid var(--ink-line); padding: 40px; }
.hp-thanks h3 { font: 500 32px/1 var(--serif); color: var(--ink); margin-bottom: 12px; }
.hp-thanks p { font: 400 15px/1.6 var(--sans); color: var(--ink-soft); max-width: 50ch; }
.hp-thanks strong { color: var(--ink); }

/* --- Footer ------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--ink-line); padding: 28px 0; }
.ftr__legal { display: flex; justify-content: space-between; gap: 16px;
    font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm); }
.ftr__legal span:last-child { text-align: right; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 920px) {
    .hdr__nav { display: none; }
    .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
    .hero__r { display: none; }
    .hp-row { grid-template-columns: 1fr; gap: 0; }
    .hp-cards { grid-template-columns: 1fr; }
    .hp-form__inner { max-width: 100%; }
    .meta-strip .wrap { flex-direction: column; gap: 4px; }
    .meta-strip span:last-child { text-align: left; }
}