/* ==========================================================================
   San Francisco Welcome Department — styles.css

   Single static stylesheet. No build step, no preprocessor. Edit directly.

   Direction: the bold, saturated, type-forward editorial energy of the
   reference site (materialsandapplications.org), translated into the SF
   Welcome Dept brand — an orange field, oversized Fog City Gothic display,
   and an editorial serif (Fraunces) carrying the body. No photography; type
   and color do the work.

   Sections:
     1. Fonts
     2. Design tokens
     3. Reset & base
     4. Layout helpers + utilities
     5. Header / nav
     6. Hero
     7. Section content (labels, statement, CTA, hours, about)
     8. Contact form
     9. Footer
    10. Motion
    11. Responsive
   ========================================================================== */

/* ----------------------------- 1. Fonts ---------------------------------- */
/* Display / headlines — Fog City Gothic (self-hosted). Matches the blocky,
   stamped logo. Two cuts: the standard and the Wide (used for the hero). */
@font-face {
  font-family: "Fog City Gothic";
  src: url("assets/FogCityGothic-Regular.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fog City Wide";
  src: url("assets/FogCityGothic-Wide.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Body is Swear Display (self-hosted) — the editorial serif the client chose. */
@font-face {
  font-family: "Swear Display";
  src: url("assets/swear-display-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------- 2. Design tokens ------------------------------ */
:root {
  /* Palette — these four only. No gradients, no fifth color. */
  --orange: #ff3300; /* Primary brand field + accents */
  --black: #000000;  /* Body text, dark blocks */
  --white: #ffffff;  /* Page background, text on orange/black */
  --gray: #808080;   /* Footer field, hairlines (never small text on white) */

  --font-hero: "Fog City Wide", "Fog City Gothic", system-ui, sans-serif; /* hero headline only */
  --font-serif: "Swear Display", Georgia, "Times New Roman", serif;        /* section headers */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: var(--font-mono);                                           /* body + nav */

  --measure: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-pad: clamp(4.5rem, 12vw, 10rem);
  --header-h: 11rem; /* tall enough for the doubled logo */
  --edge: clamp(1rem, 2.5vw, 2.25rem); /* tight gutter so the logo hugs the left */
}

/* ------------------------- 3. Reset & base -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  /* Safety net against horizontal overflow. "clip" (not "hidden") keeps the
     sticky header working. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem; /* 17px — mono runs wide, so a touch smaller */
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}
/* On the orange field, a black focus ring can vanish against dark text edges;
   white reads more clearly there. */
.hero :focus-visible,
.section--orange :focus-visible,
.site-header :focus-visible {
  outline-color: var(--black);
}

/* ------------------------- 4. Layout helpers ------------------------------ */
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
  text-align: center;
}
.section--orange {
  background: var(--orange);
  color: var(--black);
}
.section--black {
  background: var(--black);
  color: var(--white);
}
.section--black :focus-visible {
  outline-color: var(--white);
}
.section--notice {
  border-top: 2px solid var(--black);
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.5rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ------------------------- 5. Header / nav -------------------------------- */
/* Sits on the orange field, like the reference site's nav. Sticky + slim. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--orange);
  border-bottom: 2px solid var(--black);
}
/* Full-width header (not the centered container) so the logo sits hard left
   and the nav hard right at any screen size. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
  width: 100%;
  padding-inline: var(--edge);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.brand-logo {
  height: clamp(7rem, 12vw, 10rem);
  width: auto;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover {
  border-bottom-color: var(--black);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 2px solid var(--black);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-inline: auto;
  background: var(--black);
}

/* ------------------------- 6. Hero ---------------------------------------- */
/* Pinned to fill the viewport at any browser size (minus the sticky header),
   with the copy set in the upper-right open-sky space, right-aligned, over the
   black-and-white street-sign photo. Text-shadows keep it legible. */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* upper */
  align-items: flex-end; /* right */
  padding-top: clamp(2.5rem, 8vh, 6rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
  text-align: right;
  background-color: var(--black);
  /* A neutral grey wash over the photo so the text really pops.
     Raise --hero-shade toward 0.75 to darken more, lower toward 0.3 for less. */
  --hero-shade: 0.45;
  background-image: linear-gradient(
      rgba(0, 0, 0, var(--hero-shade)),
      rgba(0, 0, 0, var(--hero-shade))
    ),
    url("assets/SFWelcomeDept.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero .container {
  width: auto;
  max-width: 42rem;
  margin: 0; /* override the centered container so it sits at the right */
}
.hero-heading {
  margin: 0;
  font-family: var(--font-hero);
  font-weight: 800;
  color: var(--white);
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
  max-width: 30ch;
  margin-left: auto;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero-fineprint {
  margin: 0.85rem 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--white);
  max-width: 40ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ----------------------- Welcome ticker (marquee) ------------------------- */
/* Orange band of "welcome" in many languages, scrolling left forever. Two
   identical groups translate by -50% for a seamless loop. Words and stars are
   flex items spaced by an equal --ticker-gap (the trailing padding on each
   group keeps the loop seam evenly spaced too). Speed: lower --ticker-duration
   to go faster. */
.ticker {
  --ticker-duration: 26s;
  --ticker-gap: 1.1ch;
  overflow: hidden;
  background: var(--gray);
  color: var(--black);
  border-block: 2px solid var(--black);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-duration) linear infinite;
}
.ticker-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ticker-gap);
  padding-right: var(--ticker-gap); /* even spacing across the loop seam */
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.2vw, 1.625rem);
  letter-spacing: 0.02em;
}
.ticker-group > span {
  display: block;
  padding-block: clamp(0.55rem, 1.4vw, 1rem);
}
.ticker-star {
  font-weight: 400;
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.ticker--reverse .ticker-track {
  animation-direction: reverse; /* scrolls left to right */
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

/* ------------------------- 7. Section content ----------------------------- */
.section-heading {
  margin: 0 0 2rem;
  font-family: var(--font-serif);
  font-weight: 400;
  /* 51px on desktop, scaled down on small screens so it never overflows. */
  font-size: clamp(2.125rem, 6vw, 51px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The Department — IDEO-style split: a big bold serif headline hard-left, the
   rest of the copy in mono pushed to the lower-right. */
#department {
  text-align: left; /* override the section's centered default */
}

/* Lead line — Swear Display, ~51px, bold (synthesized: only Swear Regular is
   supplied), hard left. Scales down on small screens. */
.statement {
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  max-width: 48rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 51px);
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: pretty;
}

/* The rest of the copy — IBM Plex Mono, pushed to the right. */
.dept-body {
  margin-left: auto;
  max-width: 40rem;
  text-align: left;
}
.dept-body p {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
}
.dept-body p:last-child {
  margin-bottom: 0;
}

.body-lead {
  margin: 0 auto 1.5rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 64ch;
}
.body-lead:last-child {
  margin-bottom: 0;
}

/* CTA — Text WELCOME to [number]. No box; plain text on the black section,
   orange keyword + number. */
.cta-block {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.cta-text {
  margin: 0;
  font-family: "Fog City Gothic", "Fog City Wide", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}
.cta-keyword {
  color: var(--orange);
}
.cta-number {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
/* Small line under the bar. */
.cta-note {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.02em;
}
/* SMS compliance fine print. */
.cta-fineprint {
  max-width: 46rem;
  margin: 1.75rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gray);
}
.cta-fineprint a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 0.15em;
}
/* Staggered scroll-in cascade for the Welcome section (IDEO-style). */
#orientation .section-heading.reveal {
  transition-delay: 0.05s;
}
#orientation .body-lead.reveal {
  transition-delay: 0.18s;
}
#orientation .cta-block.reveal {
  transition-delay: 0.32s;
}
#orientation .cta-note.reveal {
  transition-delay: 0.46s;
}

/* Field Office hours — sits under the copy in the (narrow) right column. */
.hours {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  text-align: left;
}
.hours-title {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hours-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Small enough (and nowrap) to keep each entry on one line in the column. */
.hours-list li {
  padding: 0.7rem 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.75rem, 1.1vw, 0.9375rem);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-bottom: 2px solid var(--black);
}
.hours-list li:last-child {
  border-bottom: 0;
}
/* On phones the column is full width — use a readable size and allow wrapping. */
@media (max-width: 760px) {
  .hours-list li {
    font-size: 0.9375rem;
    white-space: normal;
  }
}


/* Field Office: photo on the left, copy on the right. */
.field-layout {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  text-align: left;
}
.field-photo {
  order: -1; /* photo first (left) */
}
.field-text {
  align-self: start;
}
.field-text .body-lead {
  margin: 0;
  max-width: none;
}
.field-text .field-body {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
}
.field-photo {
  margin: 0;
}
.field-photo img {
  width: 100%;
  border: 2px solid var(--black);
}
@media (max-width: 760px) {
  .field-layout {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .field-photo {
    order: 0; /* heading/copy first when stacked */
    max-width: 24rem;
  }
}

/* About — footnote register, serif. */
.about-copy {
  max-width: 60ch;
  margin-inline: auto;
}
.about-copy p {
  margin: 0 0 1.4rem;
  font-size: 1.125rem;
  line-height: 1.65;
}
.about-copy p:last-child {
  margin-bottom: 0;
}

/* Inline text link */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--orange);
}
.text-link:hover {
  text-decoration-color: currentColor;
}

/* ------------------------- 8. Contact form -------------------------------- */
/* Intro line shares the form's width + left edge so they line up. */
.contact-intro {
  max-width: 38rem;
  margin: 0 auto;
  text-align: left;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}
/* Centered block. Labels are left-aligned for scannability even though the
   section is centered — centered field labels read as broken to most users. */
.contact-form {
  max-width: 38rem;
  margin: 2.5rem auto 0;
  text-align: left;
}
.hidden-field {
  display: none;
}
.field {
  margin-bottom: 1.5rem;
}
.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.field input,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 0;
}
.field textarea {
  resize: vertical;
}

.btn-submit {
  display: inline-block;
  padding: 1rem 2.25rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 0;
  cursor: pointer;
}
.btn-submit:hover {
  color: var(--white);
  background: var(--black);
  border-color: var(--white);
}

/* ----------------- Nav info button + About popup -------------------------- */
/* Sits in the nav (to the left of Contact). Black circle + orange "?" so it
   contrasts against the orange header. */
.info-toggle {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--orange);
  background: var(--black);
  border: 2px solid var(--black);
  border-radius: 50%;
  cursor: pointer;
}
.info-toggle:hover {
  color: var(--black);
  background: var(--white);
}

.info-dialog {
  width: min(92vw, 40rem);
  margin: auto; /* center in the viewport */
  padding: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 0;
}
.info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.info-dialog-heading {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.05;
}
.info-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--black);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.info-close:hover {
  color: var(--orange);
}
.info-dialog .about-copy {
  max-width: none;
  margin: 0;
  text-align: left;
}

/* ------------------------- 9. Footer -------------------------------------- */
/* Orange field, matching the header. Black text/logo pass AA on orange. */
.site-footer {
  background: var(--orange);
  color: var(--black);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
  text-align: center;
}
.footer-logo {
  height: 10rem;
  width: auto;
}
.footer-name {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 0.5rem;
}
.footer-links a,
.footer-credit a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.footer-legal,
.footer-credit {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.footer-credit {
  text-transform: none;
}

/* ------------------- Legal pages (privacy / terms) ------------------------ */
.legal-home {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  border-bottom: 2px solid transparent;
}
.legal-home:hover {
  border-bottom-color: var(--black);
}
.legal {
  max-width: 52rem;
  margin-inline: auto;
  text-align: left;
}
.legal-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.05;
}
.legal-updated {
  margin: 0 0 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  line-height: 1.15;
}
.legal p,
.legal li {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.7;
}
.legal ul {
  padding-left: 1.25rem;
}
.legal li {
  margin-bottom: 0.5rem;
}
.legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 0.18em;
}
.legal-disclaimer {
  margin-top: 2.5rem;
  padding: 1.25rem;
  border: 2px solid var(--black);
  font-style: italic;
}

/* ------------------------- 10. Motion ------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------- 11. Responsive --------------------------------- */
@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
  }
  .primary-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--orange);
    border-bottom: 2px solid var(--black);
    display: none;
  }
  .primary-nav.is-open {
    display: block;
  }
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.25rem var(--gutter) 1rem;
  }
  .primary-nav li {
    border-top: 2px solid var(--black);
  }
  .primary-nav a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 0;
  }
  .primary-nav a:hover {
    border-bottom: 0;
  }
}