/* ==========================================================================
   English Connect — englishconnect.jp
   One stylesheet for the whole site. Colours and fonts follow the
   EC Brand Manual & Style Guide (2022).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   The brand guide's first choice is Gotham Rounded, but the guide itself
   says it is "often not available" and names Nunito as the substitute.
   The files are served from /assets/fonts/ so the site does not depend on
   Google Fonts being reachable. They cover Latin only; Japanese and Chinese
   fall through to the system fonts named in --heading / --body.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Nunito";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Nunito-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Nunito-800.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/NunitoSans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/NunitoSans-700.woff2") format("woff2");
}

:root {
  /* The four brand colours, exact hex values from the brand guide.
     Used for fills, borders and large type. */
  --red: #E34D3F;
  --yellow: #F6BC2C;
  --blue: #2C72A4;
  --green: #22A375;

  /* The brand red, darkened only enough to reach WCAG AA (4.5:1) as small
     text on white (the tagline, the current-language pill, links). */
  --red-text: #DC3020;

  --ink: #231F20;          /* the guide's near-black */
  --ink-soft: #6B6564;
  --bg: #FFFFFF;
  --tint: #F5F2F1;

  /* Height of the sticky language dock: the 52px switcher plus padding.
     Anchored sections are offset by this so the dock never covers them. */
  --dock-h: 72px;

  --heading: "Nunito", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Noto Sans JP", "PingFang SC", "Microsoft YaHei",
    system-ui, sans-serif;
  --body: "Nunito Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Noto Sans JP", "PingFang SC", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Chinese pages prefer Chinese system fonts over Japanese ones, so shared
   characters are drawn with Simplified Chinese glyph shapes. */
:root:lang(zh) {
  --heading: "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    "Hiragino Sans GB", system-ui, sans-serif;
  --body: "Nunito Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Written phone-first: the base styles are the phone layout, and the
   min-width media queries further down add to them for larger screens. */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--dock-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
}

img, svg { max-width: 100%; }

a { color: var(--red-text); text-underline-offset: 0.2em; }

/* Browser surfaces in the brand's colours. */
::selection { background: var(--yellow); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The hidden <svg> that holds the logo every <use> points at. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--red-text);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* --- Language dock -------------------------------------------------------
   A segmented switcher that stays at the top of the screen. Once the page
   scrolls, the script gives the dock a frosted bar (data-stuck) so the
   switcher stays readable over photos and colour panels; without the
   script the switcher's own white background does the job.
   ------------------------------------------------------------------------ */
.lang-dock {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.lang-dock[data-stuck] {
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgb(35 31 32 / 0.07);
}

.lang {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--red) 55%, #fff);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 8px 28px rgb(35 31 32 / 0.08);
  font-family: var(--heading);
  font-size: 0.92rem;
  font-weight: 700;
}
.lang a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s, color 0.15s;
}
.lang a:hover { background: var(--tint); }
.lang a[aria-current="page"] { background: var(--red-text); color: #fff; }

/* Jumps to the city list from anywhere on the page, in the blue of the
   section it opens. */
.find-button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 52px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 8px 28px rgb(35 31 32 / 0.08);
  color: #fff;
  font-family: var(--heading);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.find-button:hover { background: color-mix(in srgb, var(--blue) 85%, #000); }
.find-button svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

@media (min-width: 420px) {
  .lang a { min-width: 84px; }
}
@media (min-width: 900px) {
  .lang a { min-width: 92px; padding: 0 14px; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 72px 0 104px;
}
.hero .mark-large {
  width: 112px;
  height: auto;
  color: var(--red);
  margin: 0 auto 32px;
  display: block;
}
.hero h1 {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 0.45em;
}
.hero .tagline {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.2rem, 4.6vw, 1.65rem);
  color: var(--red-text);
  margin: 0 0 0.3em;
}
.hero .what {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.2em;
}
.hero .sub {
  font-size: 1.05rem;
  margin: 0;
}
/* A quiet link to the city list: underlined, in the body colour. */
.hero .sub a {
  display: inline-block;
  padding: 10px 4px; /* a full-size tap target around one line of text */
  color: var(--ink-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.15s;
}
.hero .sub a:hover { color: var(--red-text); text-decoration-thickness: 2px; }

/* --- Promises: the red band under the hero ----------------------------- */

.promises { padding: 72px 0; text-align: center; }
.promises ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--heading);
  font-weight: 800;
  /* never below 1.17rem (18.66px bold, "large text": white on brand red
     needs it), and small enough on a 360px phone to keep each on one line */
  font-size: clamp(1.17rem, 5.2vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.promises li:lang(en) { text-transform: uppercase; }
.promise-sep::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

/* --- Sections ----------------------------------------------------------- */

.section h2 {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(1.55rem, 6vw, 2.2rem);
  text-align: center;
  margin: 0 0 0.5em;
  line-height: 1.3;
  text-wrap: balance;
}
/* Break Japanese between phrases, not mid-word (Chrome/Edge; other
   browsers ignore it and wrap as before). */
:lang(ja) :is(h2, .tagline, .sub, .lede, .note) { word-break: auto-phrase; }
/* No lone last-line word or character in running text. */
:is(.intro p, .note, .hero .sub, .lede) { text-wrap: pretty; }

/* --- Photo groups ---------------------------------------------------------
   Two groups of three, each with one photo large: on a phone it's full
   width over the other two side by side; under the red band on a wide
   screen, it sits on the left with the two stacked beside it.
   ------------------------------------------------------------------------ */
.gallery { padding: 56px 0 64px; }
.photo-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.photo-group li:first-child { grid-column: 1 / -1; }
.photo-group li { overflow: hidden; border-radius: 14px; }
.photo-group img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--tint);
}

/* --- Colour panels -------------------------------------------------------
   Full-width blocks of one brand colour, as on the original site. Text on
   them is large and bold throughout: white on the brand red (3.9:1) and
   green (3.2:1) only meets WCAG at large-text sizes, and this keeps the
   brand colours exact rather than darkening them. Yellow is too light for
   white text at any size, so it takes near-black text instead.
   ------------------------------------------------------------------------ */
.panel { --on: #fff; background: var(--bg-panel); color: var(--on); }
.panel-red    { --bg-panel: var(--red); }
.panel-blue   { --bg-panel: var(--blue); }
.panel-green  { --bg-panel: var(--green); }
.panel-yellow { --bg-panel: var(--yellow); --on: var(--ink); }

.panel a { color: inherit; text-decoration-thickness: 2px; }
.panel a:hover { text-decoration-thickness: 3px; }
.panel :focus-visible { outline-color: var(--on); }
.panel ::selection { background: var(--on); color: var(--bg-panel); }

/* --- Join us: the city index --------------------------------------------- */

/* Full height like the city panels, so the city list fills the screen when
   the top bar's button jumps to it. */
.join {
  min-height: calc(100vh - var(--dock-h));
  min-height: calc(100svh - var(--dock-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0 72px;
  text-align: center;
}
.join .lede {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 4.2vw, 1.3rem);
  margin: 0 auto 2em;
  max-width: 34em;
}

/* Read down the columns: Kanto, then central Japan, then the rest. */
.city-index {
  columns: 2;
  column-gap: 24px;
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.2rem;
}
.city-index li { break-inside: avoid; }
.city-index a {
  display: inline-block;
  padding: 8px 6px; /* a full-size tap target, still reading as a text link */
  text-underline-offset: 0.25em;
}

/* --- Intro --------------------------------------------------------------- */

.intro { padding: 80px 0 88px; }
.intro-photos { margin: 0 0 40px; }
.intro-text { max-width: 34em; margin: 0 auto; }
.intro p {
  margin: 0 0 1.1em;
  font-size: 1.08rem;
  line-height: 1.85;
}
.intro p:last-child { margin-bottom: 0; }

/* --- Cities: one full-height panel each ---------------------------------- */

.city {
  /* fills the screen below the dock when a city link jumps to it */
  min-height: calc(100vh - var(--dock-h));
  min-height: calc(100svh - var(--dock-h));
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 80px 24px;
  text-align: center;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.2rem; /* large-text size, see Colour panels */
  line-height: 1.55;
}
.city .mark {
  width: 64px;
  height: auto;
  color: #fff; /* white on every colour, yellow included, as in the brand guide */
  margin-bottom: 22px;
}
.city h2 {
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 2.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 0.6em;
}
.city p { margin: 0 0 0.55em; max-width: 30em; }
.city .when { font-weight: 800; }
.city .where { word-break: keep-all; } /* keep オンデンフラット whole */
.city .where a { text-underline-offset: 0.2em; }
.city .soon { font-weight: 800; letter-spacing: 0.1em; }

/* 1.17rem is the smallest size that still counts as large text (18.66px
   bold), and lets all three links fit on one line from 360px phones up. */
.city .links { margin: 1em 0 0; font-size: clamp(1.17rem, 3.2vw, 1.3rem); }
.city .links .nowrap { white-space: nowrap; }
.city .links a {
  display: inline-block;
  padding: 6px 2px; /* full-size tap target */
  text-underline-offset: 0.22em;
}
.city .links .sep { padding: 0 0.3em; opacity: 0.7; }

/* --- Questions (under the cities) ---------------------------------------- */

.faq { padding: 80px 0 24px; }
.faq h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); margin-bottom: 1.2em; }
.faq dl { max-width: 34em; margin: 0 auto; }
.faq dt {
  font-family: var(--heading);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 0.35em;
}
.faq dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.8;
}
.faq dl > div + div { margin-top: 1.8em; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding: 56px 0 64px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.site-footer .mark {
  width: 40px;
  height: auto;
  color: var(--ink);
  margin: 0 auto 12px;
  display: block;
}
.site-footer p { margin: 0.2em 0; }

/* --- 404 ----------------------------------------------------------------- */

.not-found { text-align: center; padding: 48px 0 72px; }
.not-found p { margin: 0.4em 0; }
.not-found a { font-family: var(--heading); font-weight: 700; }

/* --- Motion ---------------------------------------------------------------
   One idea, used throughout: the logo smiles. It's a winking face (see the
   brand guide), so on arrival its smile widens into place, and each city's
   logo does the same as its panel scrolls into view. Around it, text and
   photos rise in gently as they appear.

   Everything is fully visible without motion: the entrance plays only for
   people who haven't asked their device to reduce motion, the scroll-linked
   parts only in browsers that support scroll-driven animation (others just
   show the page), and the hero doesn't replay on an instant language switch.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .mark-smile { transform-box: fill-box; transform-origin: 50% 0%; }

  @keyframes smile {
    from { transform: scale(0.3, 0.15); opacity: 0; }
    40%  { opacity: 1; }
    to   { transform: none; }
  }
  @keyframes rise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: none; }
  }
  @keyframes fade { from { opacity: 0; } }
  /* Movement only, no fade: the heading is likely the page's largest text,
     and text that starts invisible delays the "largest contentful paint"
     Google measures for page speed. */
  @keyframes lift { from { transform: translateY(14px); } }

  /* Arrival */
  html:not([data-swapped]) .hero .mark-letters {
    animation: fade 0.7s ease-out both;
  }
  html:not([data-swapped]) .hero .mark-smile {
    animation: smile 1s cubic-bezier(0.3, 1.5, 0.45, 1) 0.4s both; /* a little overshoot */
  }
  html:not([data-swapped]) .hero h1 {
    animation: lift 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html:not([data-swapped]) .hero :is(.tagline, .sub) {
    animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html:not([data-swapped]) .hero .tagline { animation-delay: 0.3s; }
  html:not([data-swapped]) .hero .sub     { animation-delay: 0.45s; }

  /* Photos ease up slightly under the pointer. */
  .photo-group img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .photo-group li:hover img { transform: scale(1.035); }

  /* Scrolling */
  @supports (animation-timeline: view()) {
    :is(.promises li, .photo-group li, .intro-text p, .join .wrap > *, .city > :not(.mark)) {
      animation: rise linear both;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    /* a gentle stagger across each group */
    .photo-group li:nth-child(2) { animation-range: entry 10% entry 100%; }
    .photo-group li:nth-child(3) { animation-range: entry 18% cover 30%; }

    /* The smile follows its logo's position on screen (a named timeline on
       the logo, since the smile is an SVG part without a box of its own). */
    .city .mark { view-timeline: --city-mark block; }
    .city .mark-smile {
      animation: smile linear both;
      animation-timing-function: cubic-bezier(0.3, 1.5, 0.45, 1);
      animation-timeline: --city-mark;
      animation-range: entry 60% cover 50%;
    }
  }
}

/* --- Larger screens -------------------------------------------------------- */

@media (min-width: 640px) {
  .city-index { columns: 3; max-width: 640px; }
}

@media (min-width: 760px) {
  /* The promises in one row, the smile between each. */
  .promises { padding: 88px 0; }
  .promises ul { flex-direction: row; justify-content: center; gap: 24px; font-size: 1.25rem; }
}

@media (min-width: 900px) {
  .wrap { padding: 0 32px; }
  .hero { padding: 104px 0 136px; }
  .hero .mark-large { width: 132px; }

  .gallery { padding: 80px 0 88px; }
  .photo-group { gap: 12px; }
  .photo-group li { border-radius: 18px; }
  .gallery .photo-group { grid-template-columns: 2fr 1fr; }
  .gallery .photo-group li:first-child { grid-column: 1; grid-row: span 2; }

  .join { padding: 104px 0 96px; }

  /* Photo beside the text, as on the original site. */
  .intro { padding: 112px 0; }
  .intro .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .intro-photos { margin: 0; }
  .intro-text { margin: 0; }
}