@import url("fonts.fc769774.css");

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #fbfaf8;
  color: #152242;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* The artifact runtime set this; it changes where paragraphs break. */
  text-wrap: pretty;
}

img { max-width: 100%; }
/* Deliberately NOT `button { font-family: inherit }`: the schedule day tabs
   carry no inline font-family, so the approved design renders them in the
   browser default (Arial). Forcing Lato changes their height by 1px. */
a { color: inherit; text-decoration: none; }

/* Screen-reader-only H1. The hero headline is baked into the hero image, so
   this carries the same words as a real heading for crawlers and AT. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ---- responsive states the runtime used to drive from JS ---------------- */
#sched-mobile  { display: none; }
#sched-desktop { display: grid; }
#sticky-cta    { display: none; }

/* Cookie bar position lives here rather than inline, so the mobile rules below
   can actually reach it. Desktop values match the approved design exactly. */
#cookie-bar { left: 16px; bottom: 16px; z-index: 30; max-width: 340px; }

@media (max-width: 820px) {
  #sched-mobile  { display: grid; }
  #sched-desktop { display: none; }
  #sticky-cta    { display: flex; }
  /* Client feedback 9 Sep 2026: this section was ragged on a phone. The desktop
     layout is 3 columns with one tall photo set to grid-row: span 2, and that span
     survives the drop to 2 columns, which left a hole and stranded a photo on its
     own. Flatten every tile to the same ratio here, then let the title card and the
     last photo run full width so 8 tiles fill 2 columns evenly. */
  #boarding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #boarding-grid > * {
    grid-row: auto !important;
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
  }
  #boarding-grid > :first-child {
    grid-column: 1 / -1;
    aspect-ratio: auto !important;
    min-height: 150px;
  }
  #boarding-grid > :last-child { grid-column: 1 / -1; }

  /* The sticky Apply bar (66px, z-index 40) is fixed to the bottom and was
     covering Accept and Decline, leaving the consent choice impossible to make
     and the bar permanently on screen. Sit above it, full width, and outrank it
     so the buttons stay tappable even if the bar grows with larger text. */
  #cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 90px;
    max-width: none;
    z-index: 45;
  }
}

/* ---- interaction affordances ------------------------------------------- */
a, button { transition: opacity .18s ease, background-color .18s ease, color .18s ease; }
a:hover, button:hover { opacity: .82; }
button { cursor: pointer; }

a:focus-visible, button:focus-visible {
  outline: 3px solid #fdc41f;
  outline-offset: 2px;
}

[data-zoom] { cursor: zoom-in; border: 0; padding: 0; background: none; }

/* The three "Apply Now" buttons target the form itself, not the section, which
   opens with the deadline countdown. The offset leaves the down-arrow cue just
   above the form rather than pinning its border to the viewport edge. */
#apply-form { scroll-margin-top: 84px; }

@media (max-width: 820px) {
  #apply-form { scroll-margin-top: 56px; }
}

/* ---- lightbox ----------------------------------------------------------- */
#lightbox { display: none; }
#lightbox.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #car-track, #edu-track { transition: none !important; }
}

/* The hint only applies to the mobile day tabs; the desktop grid shows the whole
   week at once, so there is nothing to select. */
#sched-hint { display: none; }

@media (max-width: 820px) {
  #sched-hint { display: block; }
}

/* ---- footer ------------------------------------------------------------- */
/* Type matches https://www.harrowappi.jp/ : column headings in the serif at the
   house bronze #89764b, links in Lato 14px white. Their headings are set in
   Bembo, which we do not have and could not license for this page; Requiem is
   the serif this page already embeds and is the closest match we can ship. */
.footer-head {
  font-family: Requiem, "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #89764b;
}

.footer-link {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}

#site-footer {
  padding: clamp(40px, 5vw, 68px) clamp(16px, 4vw, 56px) clamp(30px, 4vw, 48px);
}

/* The sticky Apply bar is fixed over the bottom of the page, so the footer needs
   clearance for it. Only where that bar is actually shown, and only on the page
   that has one: the desktop footer was carrying 120px of empty space for a bar
   that is not there. */
@media (max-width: 820px) {
  body:has(#sticky-cta) #site-footer { padding-bottom: 110px; }
}

/* Four columns on desktop, mirroring https://www.harrowappi.jp/. The middle two
   carry several stacked lists each, so they collapse to two columns on a tablet
   and one on a phone rather than squeezing. */
@media (max-width: 1080px) {
  #footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  #footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- application form --------------------------------------------------- */
/* The OpenApply embed picks its width from the user agent, not the viewport: a
   fixed 680px on desktop, 100% only for an iPhone/iPad/Android UA. A desktop
   browser narrowed below about 740px therefore overflows the container, so cap
   it. Its own iframeResizer still controls the height. */
#openapplyFrame {
  max-width: 100%;
  /* The embed sets its own inline width, so it sits left in the wider container
     unless it is made a block and given auto side margins. */
  display: block;
  margin-inline: auto;
}

/* ---- the host ----------------------------------------------------------- */
/* A fixed 200px portrait column leaves about 119px for the text on a phone, so
   the two stack below the breakpoint and the portrait stops filling the width. */
@media (max-width: 820px) {
  #host-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #host-grid > img { max-width: 160px; }
}

/* ---- arrival and departure tables --------------------------------------- */
/* Their own times mean they cannot join the weekday grid, but they are short, so
   they run as two columns rather than two full-width blocks. Each keeps the same
   clamp(96px, 8vw, 140px) time column as the main table so the three line up. */
#sched-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
  /* Saturday has one row fewer than Sunday. Without this the grid stretches it to
     match and the extra height shows as an empty cell under the last time. */
  align-items: start;
}

@media (max-width: 820px) {
  #sched-extra { display: none; }
}

/* ---- side rail ---------------------------------------------------------- */
/* Replicates the rail on https://www.harrowappi.jp/ (its #cta-link). There each
   item is 235px wide, parked at right: -185px so only the 50px icon shows, and
   slides to right: -10px on hover over .6s ease while the bar changes colour.
   Same geometry and timing here; the slide is a transform rather than animating
   `right`, so it runs on the compositor and cannot widen the document.
   Colours are the winter camp's, per the client's 9 Sep feedback: #f6a120 for
   Contact Us and #fdc41f for Apply Now, across the whole bar including the icon. */
#side-rail {
  position: fixed;
  right: -185px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-link {
  display: flex;
  align-items: center;
  width: 235px;
  background: #152242;
  color: #fff;
  text-decoration: none;
  transition: transform .6s ease, background-color .6s ease;
}

/* 15px + 20px icon + 15px = the 50px that stays on screen at rest */
.rail-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 50px;
  padding: 0 15px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* Keyboard focus reveals the label on any device. */
.rail-link:focus-visible          { transform: translateX(-175px); }
.rail-contact:focus-visible       { background: #f6a120; }
.rail-apply:focus-visible         { background: #fdc41f; }

/* Hover only where there is a real pointer. A touch browser applies :hover to the
   last element tapped and holds it until something else is tapped, so without this
   gate the bar slid out on tap and stayed out. On a phone a tap now goes straight
   to the mail app or the form, which is what the icons are there for. */
@media (hover: hover) and (pointer: fine) {
  .rail-link:hover    { transform: translateX(-175px); }
  .rail-contact:hover { background: #f6a120; }
  .rail-apply:hover   { background: #fdc41f; }
}

/* The global a:hover fade would wash out the colour change. */
.rail-link:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rail-link { transition: none; }
}

/* The Harrow crest is painted INTO the hero artwork, so it cannot be a linked
   <img>. #hero-crest is a transparent anchor sitting over the painted crest,
   positioned in percentages of the hero, which holds at every width because both
   hero files keep a fixed aspect ratio. Measured off the artwork itself:
   desktop 1920x816, the navy crest panel spans x 82.66-93.49%, y 0-30.02%;
   mobile 1080x1340, it spans x 71.39-92.78%, y 0-20.30%.
   If either hero is ever re-exported, re-measure these. */
#hero-crest {
  position: absolute;
  top: 0;
  left: 82.66%;
  width: 10.83%;
  height: 30.02%;
  z-index: 3;
}

@media (max-width: 820px) {
  #hero-crest {
    left: 71.39%;
    width: 21.39%;
    height: 20.30%;
  }
}