/* =========================================================
   AC-v3 Section: Get in Touch (#get-in-touch)
   New file 24.04.26; UCB Phase 1.

   Role: visual bookend to the page. The site OPENS with the
   hero / about pair sitting under a 0.92-alpha glass over the
   sticky dark Eternal Tales chamber; it CLOSES with the same
   treatment on Get in Touch.

   Architectural note (project_unified_chamber_backdrop_vision_230426):
   TEotE sits between #voice-of-the-fili (the last section of
   the main .et-chamber wrapper) and #get-in-touch, and TEotE
   has its own backdrop art. The chamber cannot be structurally
   continuous from VotF through TEotE to contact, so contact
   gets a LOCAL chamber+glass backdrop that visually mirrors
   the hero/about treatment.

   Strict Phase 1: static night image, no scroll driver, no
   crossfade. If we later want a night→flooded mini-crossfade
   here it can be added without touching this file's structure.
   ========================================================= */

/* The section claims its own stacking context so the backdrop
   absolute-positioned children stay scoped to it. shell.css
   already gives .section { position: relative }, but we add
   isolation: isolate so internal z-index does not interact
   with anything outside (matches the .et-chamber pattern). */
.section--contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);               /* light studio bg (14.05.26) */
  /* 22.05.26 (glass #3 curtain, NATIVE): pull Contact UP by the curtain-zone
     height so that the instant the TEoTE parallax locks on its final frame,
     this section's top sits exactly at the viewport bottom. From there it
     rises over the sticky-pinned, frozen frame purely by NATIVE scroll at
     1:1 -- no JS transform, so both the climb and the reverse scroll are
     perfectly fluid (an earlier JS-transform version fought the native
     scroll a frame behind and juddered on the way back up). The opaque
     --bg + z:10 (shell.css #get-in-touch) read as a solid white curtain
     over the dark scene. -100vh MUST match --teote-curtain-vh in
     section-teote.css; section-teote.js caps the parallax travel by the
     same amount so the lock lands exactly where Contact reaches the
     viewport bottom. (Declared on the #get-in-touch.section--contact rule
     below -- #id+class is needed to beat shell.css's .section margin.) */
  /* 11.05.26: top buffer reduced from base s-6 (32px) to s-3 (12px).
     Matches the .section--about treatment so both text-led bookend
     sections sit closer to the nav rather than carrying a generous
     buffer better suited to visually rich sections. */
  /* r53 (21.05.26): pixel-matched to the Get in Touch position on the
     Eternal Tales build (eternal-tales-temp). Measured at 1280x800,
     both builds: nav-height 100 + 12 (= nav + s-3) base padding, plus an
     identical 72px structural offset above the "Get in Touch" eyebrow.
     The ONLY difference is the ET build renders its content inside a
     white .section__inner card carrying padding: 48px 32px 0 - so its
     eyebrow lands 232px from the section top vs AC's 184px. AC has no
     card (inner padding 0), so we add that same fixed 48px to the
     section padding here. 100 + 12 + 48 = 160 -> eyebrow at 232,
     pixel-identical to ET. (Base is nav + s-3, NOT s-5: ET's contact
     padding measures 112 = nav + 12, not nav + 24.) */
  padding-top: calc(var(--nav-height) + var(--s-3) + 48px);
  /* 15.05.26 PM: override shell.css's nav-height scroll-margin so it
     does not double-count with the padding-top above. Click-scroll
     lands section top at viewport y=0; padding-top places the title
     ~24px below the nav bottom. */
  scroll-margin-top: 0;
  /* 15.05.26 v2: flex column + min-height: 100dvh so the section uses
     the viewport. .section__inner flexes to fill and centres its
     content vertically (rule below), and the footer (the section's
     last flex child) pins to the bar-to-bottom region's bottom edge.
     Replaces the v1 `min-height: auto` which left a lot of unused
     whitespace at tall viewports. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* 15.05.26 v3: drop the inherited padding-bottom (var(--s-9) = 96px)
     so the footer locks to the absolute page bottom. The footer's own
     padding-bottom (var(--s-6) = 32px) provides breathing room. */
  padding-bottom: 0;
}

/* 22.05.26 (glass #3): override the bookend position:sticky (shell.css
   #get-in-touch { position: sticky; top: 0 }) to relative. With the native
   curtain (the -100vh pull-up above) Contact rises and settles purely
   through normal flow; relative keeps that flow clean and, on tall mobile
   viewports where Contact exceeds 100vh, lets the user scroll on to the
   footer (sticky would pin Contact at the top and trap its lower content).
   ID+class beats shell.css's bare #id; z-index:10 (a separate #get-in-touch
   declaration) is untouched, so Contact still sits above the parallax
   track (z:0) as it climbs. */
#get-in-touch.section--contact {
  position: relative;
  margin-top: -100vh;   /* native curtain pull-up (see .section--contact note) */
}

.section--contact > .section__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 15.05.26 PM: was justify-content: center (centred content vertically
     in the available bar-to-footer region). flex-start pins the title
     just below the section's padding-top and lets the rest flow below,
     so the eyebrow + headline sit ~24px below the nav rather than
     mid-viewport. Footer still pins to the section bottom via the
     parent flex column + padding-bottom: 0. */
  justify-content: flex-start;
}

/* ---------- Backdrop wrapper ----------
   Fills the section. pointer-events: none so the contact form,
   links, and footer remain clickable through the backdrop. */
.contact-backdrop {
  /* 14.05.26: hidden for the light studio. Contact is now a light
     section; the night-chamber image + glass backdrop belonged to
     the dark treatment. Markup retained (not deleted) so it can be
     restored by removing this one declaration. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The <picture> wrapper inside .contact-backdrop is a regular
   inline element by default; force it to fill the backdrop so
   the inner <img> can use object-fit: cover correctly. */
.contact-backdrop > picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Chamber image ----------
   Same source asset as .et-chamber__layer--night. object-fit:
   cover + object-position: center top mirrors the chamber
   stage (after the round-16 anchor-top change 20.04.26) so
   the cropping behaviour matches at every viewport. */
.contact-backdrop__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Glass pane ----------
   Same recipe as .section--landing::before /
   .section--about::before so the bookend reads visually
   identical to the entry. */
.contact-backdrop__glass {
  position: absolute;
  inset: 0;
  /* Pure cloudy transparent: no tint, chamber's own colour shows
     through, the blur is what reads as 'glass'. background kept
     fully transparent on purpose. (24.04.26 iteration) */
  background: transparent;
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
}

/* ---------- Content layer ----------
   Lifts above the backdrop. .section__inner is the only
   substantive child once .contact-backdrop is added. */
.section--contact > .section__inner {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Content layout (rebuilt 12.05.26)
   Five visual moments: eyebrow, h2, newsletter (intro + form),
   direct-contact line, brand-signpost line; with a separate
   footer band beneath. Sub-section sub-headings dropped: the
   h2 carries the newsletter's name; the direct-contact + brand
   lines are single-paragraph each.

   Column widths:
     - prose blocks (intro / direct / brands): ~640px reading
       column. Narrower than the 11.05.26 900px so the lines
       read at comfortable measure.
     - form block: ~440px. Narrows the input + button so they
       read as a form, not as another content rectangle.
   The narrowing from 640px to 440px between intro and form
   IS the visual signal that the form is the focal action.
   ========================================================== */
.section--contact > .section__inner {
  text-align: center;
}

/* All content blocks share one reading column and one vertical
   rhythm so the section reads as a single coherent stack.
   The form sits centred inside the .mailing-list column at a
   narrower 440px focal width (see .mailing-list__form rule
   below); everything else uses the full 640px column.
   12.05.26: brand block width was 800px and bottom margin
   was var(--s-9); narrowed and tightened to match the rest
   of the section. text-align centred on all three blocks. */
.mailing-list,
.contact-direct,
.contact-brands {
  max-width: clamp(280px, 92vw, 640px);
  margin: 0 auto var(--s-7);
  text-align: center;
}

/* ---------- Mailing list (primary action) ----------
   No sub-heading on this block: the h2 above ("From the
   Studio.") IS the newsletter's name. Intro paragraph sits
   in the 640px reading column; the form below narrows to
   the 440px form column. */
.mailing-list__intro {
  margin: 0 0 var(--s-5);
  font-size: var(--body-lead);
  line-height: 1.55;
  /* r55 (21.05.26): off-dark (soft-text) per Caoimhin, softer than the
     primary body colour. "Nothing else." is italicised inline (<em>). */
  color: var(--soft-text);
}

/* Form: inline flex layout (input + button on one row).
   align-items: flex-end so the input's bottom-border lines up
   with the button's CTA underline at the same vertical position
   despite the input being slightly taller than the button text.
   Row-direction flex is safe ground; the 11.05.26 column-flex
   bug (flex-basis silently becoming height) does not apply. */
.mailing-list__form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--s-4);
  max-width: clamp(280px, 92vw, 440px);
  margin: 0 auto;
}
.mailing-list__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Email input: bottom underline only, transparent fill. Reads
   as "a line you write on", not "a box you fill". Matches the
   site's quieter accent vocabulary; the chamber-blur backdrop
   shows through. (12.05.26 rebuild: previous version was a
   full copper-bordered box that read as a SaaS form embed.) */
.mailing-list__form input[type="email"] {
  display: block;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: var(--s-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 63, 209, 0.4);
  border-radius: 0;
  font-family: var(--font-sans);
  /* font-size floored at 16px: iOS Safari zooms into any text input
     rendering below 16px and doesn't reliably zoom back out after
     blur. Token --body drops to 15/14px on mobile breakpoints, so
     using max() keeps the input at 16px there while inheriting the
     larger desktop value if --body grows. */
  font-size: max(var(--body), 16px);
  line-height: 1.4;
  color: var(--primary-text);
  outline: none;
  transition: border-bottom-color 160ms ease;
}
.mailing-list__form input[type="email"]::placeholder {
  color: var(--soft-text);
  opacity: 0.6;
}
.mailing-list__form input[type="email"]:hover {
  border-bottom-color: rgba(255, 63, 209, 0.7);
}
.mailing-list__form input[type="email"]:focus {
  border-bottom-color: var(--accent);
}

/* Submit button: matches the .cta pattern used elsewhere on
   the site (shell.css). Inline-block text CTA with a copper
   bottom border, no box. Sits at the left of the form column
   underneath the input. The form claims primacy through being
   an input + a CTA, not through heavier outline weight. */
.mailing-list__submit {
  display: inline-block;
  flex-shrink: 0;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--body-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-text);
  cursor: pointer;
  transition: color 160ms ease;
}
.mailing-list__submit:hover,
.mailing-list__submit:focus-visible {
  color: var(--accent);
  outline: none;
}

/* Form states (13.05.26 Buttondown wiring; thanks reposition 13.05.26).
   __submit[disabled] covers both the in-flight POST and the post-success
   locked state; opacity drop + explicit colour hold so the hover/focus
   copper rule above doesn't briefly fire. __status (error) and __thanks
   (success) are sibling inline messages below the form: the form stays
   visible after success with input + button disabled, so retry and
   confirmation read as a single positional pattern. */
.mailing-list__submit[disabled],
.mailing-list__submit[disabled]:hover,
.mailing-list__submit[disabled]:focus-visible {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--primary-text);
}
.mailing-list__form input[type="email"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mailing-list__status,
.mailing-list__thanks {
  margin: var(--s-4) auto 0;
  font-family: var(--font-sans);
  line-height: 1.4;
  text-align: center;
}
.mailing-list__status {
  font-size: var(--body-small);
  color: var(--accent);
}
.mailing-list__thanks {
  font-size: var(--body-lead);
  color: var(--primary-text);
}
.mailing-list__thanks strong {
  font-weight: 700;
}

/* ---------- Direct contact (centred two-line, secondary) ----------
   One short paragraph: descriptive lead on the first line, the
   email link on its own line below (via a <br> in the HTML).
   Centred so the email reads as a focal element rather than as
   trailing prose. Copper-underline on the email link matches
   the brand signpost link treatment below. Postal addresses
   live in JSON-LD, not visible UI. */
.contact-direct {
  margin-top: 0;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--soft-text);
  text-align: center;
}
/* The email link is the actual "get in touch" action for a section
   called Get in Touch. Promoted to var(--h3) so it claims focal
   weight; the descriptive lead above ("Press, partnerships...")
   stays at body-size as a quieter label. inline-block + small
   margin-top gives the larger line its own breathing room. */
.contact-direct a {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: var(--h3);
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 160ms ease;
}
.contact-direct a:hover {
  color: var(--accent);
}

/* ---------- Brand signpost (two columns, tertiary) ----------
   AC publishes multiple brands. Two columns: ET logo + line on
   the left, TEoTE logo + line on the right. Logos sit centred
   within each column; text lines align to a common baseline at
   the bottom of the block via align-items: flex-end on the
   parent (the ET lockup is taller than the TEoTE wordmark, so
   without baseline alignment the lines would float at different
   heights). Add a third column when a new brand lands. */
.contact-brands {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-8);
  text-align: center;
}
.contact-brands__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo treatment. Each brand keeps its native lockup; visual
   parity is achieved through similar OPTICAL weight rather
   than identical pixel sizes. ET is a vertical motif+wordmark
   lockup; TEoTE is a horizontal wordmark. */
.contact-brands__logo-link {
  display: inline-block;
  line-height: 0;
  border-bottom: 0;
  padding: 0;
}
.contact-brands__logo {
  display: block;
  width: auto;
  opacity: 0.88;
  transition: opacity 160ms ease;
}
.contact-brands__logo--et {
  height: 50px;
}
.contact-brands__logo--teote {
  height: 50px;
}
.contact-brands__logo-link:hover .contact-brands__logo,
.contact-brands__logo-link:focus-visible .contact-brands__logo {
  opacity: 1;
}

/* Line under each logo. Scoped so the link underline treatment
   only applies inside the text line, not the logo link above. */
.contact-brands__line {
  margin: var(--s-4) 0 0;
  max-width: 280px;
  font-size: var(--body-small);
  line-height: 1.55;
  color: var(--soft-text);
}
.contact-brands__line a {
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 160ms ease;
}
.contact-brands__line a:hover {
  color: var(--accent);
}

/* Mobile: stack columns. ET on top, TEoTE underneath. */
@media (max-width: 600px) {
  .contact-brands {
    flex-direction: column;
    align-items: center;
    gap: var(--s-7);
  }
}

/* ---------- Footer ----------
   Sits OUTSIDE .section__inner so it breaks out of the centred
   reading column to full section width minus a small breathing
   margin, centred copy. r50 (21.05.26): the top divider line was
   removed so the footer reads as the bottom of the white contact
   card rather than a distinct band beneath it.
   12.05.26: split into two paragraphs. __credits carries the
   IP / trademark / publishing attribution (slightly brighter,
   substantive content); __copyright carries the standard studio
   signature line (quietest, baseline-style). */
.contact-footer {
  /* 19.05.26 (later): footer compacted per user. Top + bottom
     padding pulled in (was s-5 / s-6), credit lines stacked tighter
     so the bottom of the section doesn't sit on a tall slab of
     empty space. */
  margin: 0 var(--s-5);
  padding: var(--s-3) 0 var(--s-3);
  /* 21.05.26 r50: divider line above the footer removed per Caoimhin
     ("remove the orange line above the footer"). The footer now reads
     as the bottom of the full-height white contact card rather than a
     separate band -- the white section already extends to the
     viewport foot (min-height: 100dvh) with the footer pinned there. */
  text-align: center;
}
.contact-footer__credits {
  margin: 0 0 var(--s-2);          /* was s-4 */
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;                /* was 1.7 */
  color: var(--soft-text);
}
.contact-footer__copyright {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--quiet-text);
}
/* 19.05.26: site build credit. Sits as a deliberately quiet third
   beat under the copyright row. Slightly smaller (11px vs 12px) and
   letter-spaced so it reads as the most minor line in the stack. */
.contact-footer__site-credit {
  margin: 4px 0 0;                  /* was s-3 - pull right under copyright */
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--quiet-text);
}
.contact-footer a {
  color: var(--quiet-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.contact-footer a:hover {
  color: var(--soft-text);
  border-bottom-color: rgba(255, 63, 209, 0.4);
}

/* 22.05.26: on smaller viewports the footer's s-5 (24px) side margins left
   the credit lines in a narrow column that collapsed onto several stacked
   lines, eating vertical space. Pull the side margins right in so the
   footer uses much more of the viewport width and the credits wrap to
   fewer lines. Per Caoimhin ("footer text made wider so it doesn't
   collapse in under itself on smaller breakpoints"). */
@media (max-width: 600px) {
  .contact-footer {
    margin-left: var(--s-2);
    margin-right: var(--s-2);
  }
}

/* ==========================================================
   Social media row (19.05.26 pm). Replaces the prior two-column
   .contact-brands logo block. Six platform icons (Simple Icons
   brand paths) in monochrome currentColor; hover flips to accent.
   Old .contact-brands / .contact-brands__* rules above are dead
   code now (markup removed); left in place per defensive build,
   will be cleaned in a housekeeping pass.
   ========================================================== */
.contact-social {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
}
.contact-social li {
  display: flex;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--primary-text);
  border-radius: 50%;
  transition: color 150ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.contact-social a:hover,
.contact-social a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}
.contact-social a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.contact-social__icon {
  display: block;
  width: 22px;
  height: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .contact-social a {
    transition: color 150ms ease;
  }
  .contact-social a:hover,
  .contact-social a:focus-visible {
    transform: none;
  }
}

/* Tight brand signpost line. Centred single-line text pointing at
   the two brand destinations. Replaces the two-column logo block. */
.contact-brands-line {
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: clamp(13px, 0.3vw + 12px, 15px);
  line-height: 1.6;
  color: var(--quiet-text);
  text-align: center;
  letter-spacing: 0.01em;
}
.contact-brands-line a {
  color: var(--soft-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(94, 119, 128, 0.35);
  transition: color 150ms ease, border-color 150ms ease;
}
.contact-brands-line a:hover,
.contact-brands-line a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact-brands-line__sep {
  margin: 0 0.5em;
  opacity: 0.6;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .contact-brands-line a { transition: none; }
}

/* ==========================================================
   Narrow-viewport fixes for Get in Touch (19.05.26 pm v2).
   At default sizes the email link (.contact-direct a, set to
   var(--h3)), the social icons row, the brand signpost line,
   and the mailing-list form's input + JOIN row all start to
   overflow the section column well before reaching 320px.
   Three breakpoints chosen to engage earliest where each
   element first breaks.
   ========================================================== */

/* 520px: email link drops from h3-sized to a fit-the-viewport
   clamp so "info@animatedcreative.ie" fits on a single line
   without clipping. Force-wrap added as a safety net. */
@media (max-width: 519.98px) {
  .contact-direct a {
    font-size: clamp(16px, 4.8vw, 24px);
    overflow-wrap: anywhere;
  }
}

/* 478px: social icons row + brand signpost line. Both were
   pushing past the right edge at 320 - the icons row because
   6 x 40 + 5 x 14 = 310px exceeds the section's reading width
   minus padding, the brand line because the second URL is a
   single 20-char un-breakable token. Tighten + force-wrap. */
@media (max-width: 478px) {
  .contact-social {
    gap: clamp(6px, 1.6vw, 12px);
  }
  .contact-social a {
    width: 34px;
    height: 34px;
  }
  .contact-social__icon {
    width: 20px;
    height: 20px;
  }
  .contact-brands-line {
    overflow-wrap: anywhere;
    line-height: 1.7;
  }
}

/* 380px: stack the mailing-list form. At very narrow viewports
   the input + gap + button combined exceeds the form column
   width, clipping the JOIN button. Switching to flex-direction:
   column with the button centred underneath the input is the
   cleanest fit. */
@media (max-width: 380px) {
  .mailing-list__form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }
  .mailing-list__submit {
    align-self: center;
  }
}


/* ==========================================================
   Bug-report CTA (19.05.26)
   Subtle "something not working?" toggle + form. Sits between
   the contact-direct line and the social row. Form submits to
   Formspree (see index-v5.html setup note). Aesthetic stays
   below the mailing-list signup so the primary CTA reads first.
   ========================================================== */
.bug-report {
  margin-top: var(--s-5);
  text-align: center;
}
.bug-report__toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--s-2) 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--quiet-text);
  cursor: pointer;
  border-bottom: 1px solid rgba(190, 183, 170, 0.35);
  transition: color 160ms ease, border-color 160ms ease;
}
.bug-report__toggle:hover,
.bug-report__toggle:focus-visible {
  color: var(--soft-text);
  border-bottom-color: var(--accent);
  outline: none;
}
.bug-report__panel {
  margin-top: var(--s-3);
  max-width: 480px;
  margin-inline: auto;
  text-align: left;
}
.bug-report__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bug-report__form textarea,
.bug-report__form input[type="email"] {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--primary-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(190, 183, 170, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms ease, background 160ms ease;
}
.bug-report__form textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
}
.bug-report__form textarea::placeholder,
.bug-report__form input[type="email"]::placeholder {
  color: var(--quiet-text);
  opacity: 0.8;
}
.bug-report__form textarea:focus,
.bug-report__form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}
.bug-report__row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  margin-top: 4px;
}
.bug-report__notice {
  margin: 0;
  flex: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--quiet-text);
}
.bug-report__submit {
  appearance: none;
  flex-shrink: 0;
  background: var(--primary-text);
  color: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.bug-report__submit:hover:not(:disabled),
.bug-report__submit:focus-visible:not(:disabled) {
  background: var(--accent);
  color: var(--primary-text);
  outline: none;
}
.bug-report__submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.bug-report__status {
  margin: var(--s-3) 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--accent);
}
.bug-report__thanks {
  margin: var(--s-4) 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--primary-text);
}
.bug-report__thanks strong {
  font-weight: 600;
}


/* ==========================================================
   Tightening at 800px viewport height (19.05.26)
   The default section rhythm (large bottom margins on each of
   the five "moments" + the standard .section nav-height + s-6
   top padding and s-9 bottom padding) leaves too much air
   between elements on short viewports, pushing the bug-report
   toggle, social row and brand line further apart than they
   need to be. Tighten everything proportionally at <=800px
   height so the stack reads as one continuous block.
   ========================================================== */
@media (max-height: 800px) {
  .section--contact {
    /* Drop the section's BOTTOM padding closer to the stage bottom on
       short viewports. Top padding keeps the +48px pixel-match to the
       Eternal Tales build (its inner card's 48px persists at this height
       too), so the eyebrow stays at 232px from the section top. */
    padding: calc(var(--nav-height) + var(--s-3) + 48px) 0 var(--s-4);
  }
  .mailing-list,
  .contact-direct,
  .contact-brands {
    margin-bottom: var(--s-4);    /* was --s-7 */
  }
  .mailing-list__intro {
    margin-bottom: var(--s-3);    /* was --s-5 */
  }
  .bug-report {
    margin-top: var(--s-3);       /* was --s-5 */
  }
  .contact-social {
    /* 19.05.26 (later): bumped --s-3 -> --s-5 per user. The toggle is
       a utility line and the social row is a separate visual block;
       they want some breathing room between them. */
    margin-top: var(--s-5);
  }
  .contact-brands-line {
    margin-top: var(--s-3);       /* was --s-2; pair with the s-5 above */
  }
  .contact-footer {
    padding: var(--s-3) 0 var(--s-3);   /* was s-5 0 s-6 */
  }
}