/* ============================================================
   directions.css - the two directions that change the SHAPE of
   the page, not only its colour. Loaded after sections.css so it
   can restate what it needs to; every selector in this file is
   scoped to one direction, so handbill cannot see any of it and
   cannot regress from it.

   Colour belongs in themes.css. This file only reaches for a
   token, never for a hex.
   ============================================================ */


/* ============================================================
   PRESS: the head rule.

   Press is the same layout as handbill. Its photograph is still
   full bleed and its type is still set straight into the sky,
   because that is the signature move of the whole site and press
   is a change of ink, not a change of plan.

   One rule is added. The press hero is a dark plate at the head
   of a cream sheet, and a plate on a sheet has an edge: 4px of
   solid ink under it, the same weight the footer already closes
   the page with. Top and bottom of the sheet then match, and the
   photograph reads as printed onto the paper rather than as a
   window cut through it.
   ============================================================ */

:root[data-direction="press"] .hero {
  border-bottom: 4px solid var(--ink);
}


/* ============================================================
   NIGHT: the contained plate.

   This is the one structural difference between the three
   directions, and it has to be obvious at a glance. Handbill and
   press both make the photograph the ground of the page. Night
   does not: the charcoal is the ground, and the photograph is an
   object sitting on it, held inside a hairline border with a wide
   charcoal margin around it.

   So the cobalt is still here, at full strength and full colour,
   but it is contained rather than flooding the page. That is the
   whole argument of the direction: at 11pm you are looking at a
   lit screen in a dark room, not at a bright sky.

   The order on the page is the order in the markup, which is why
   none of this needs a single line of JavaScript: the type block,
   then the stamp, then the plate. The number is the first thing
   on the screen in this direction, higher than in either of the
   other two, because it is on the charcoal rather than waiting
   its turn inside a photograph.
   ============================================================ */

/* The hero stops being a picture frame and becomes page. */
:root[data-direction="night"] .hero {
  display: block;
  min-height: 0;
  overflow: visible;
  background-color: var(--paper);
  background-image: none;
  padding: 2px 20px 24px;
}

:root[data-direction="night"] .hero__inner {
  max-width: 680px;
  padding: 30px 0 0;
}

/* The measure is the page's measure. Nothing about night is a
   different site; it is the same sheet in a dark room. */
:root[data-direction="night"] .hero__block {
  max-width: none;
}

/* On the charcoal the kicker and the proof line are page copy
   again, so they take the page's own quiet inks instead of the
   full-strength cream the sky demanded. The headline and the
   number stay at full bone: --cream is bone in this direction. */
:root[data-direction="night"] .hero__kicker {
  color: var(--bark);
}

:root[data-direction="night"] .hero__proof {
  color: var(--ink-soft);
}

/* The stamp comes off the photograph and is pressed on the
   charcoal, under the proof line, still at its permanent -2deg.
   It is the only red in the first screen and it has a dark room
   to itself, which is where the lit-sign reading comes from. */
:root[data-direction="night"] .hero > .stamp {
  position: static;
  width: 180px;
  margin-top: 28px;
}

/* The plate itself: hairline border, a mat of the deeper paper,
   and the same left edge as the text column at every width.
   max(0px, calc(50% - 340px)) is the text column's own left
   margin, so the plate hangs off the measure rather than floating
   somewhere near it. */
:root[data-direction="night"] .hero > .stamp,
:root[data-direction="night"] .hero__media {
  margin-left: max(0px, calc(50% - 340px));
  margin-right: auto;
}

:root[data-direction="night"] .hero__media {
  position: static;
  display: block;
  max-width: 680px;
  margin-top: 28px;
  padding: 8px;
  background: var(--paper-deep);
  border: 1px solid var(--bark);
}

/* The window the photograph is printed into. The sky gradient
   lives here rather than on the image, so the designed loading
   state survives: the plate is drawn, bordered and full of sky
   before a single byte of the photograph has arrived, and the
   photograph then fades in on top of it with no layout shift.

   The ratio is the photograph's own, 591 by 1280, not a crop. It
   was 3/4 while the concern was keeping the hero inside one
   screen; the mark now sits in the upper sky and cropping to 3/4
   would cut the trunk short underneath it. Showing the whole
   frame means the plate runs past the fold and you scroll a
   little to clear it, which is the intent: the tree is supposed
   to feel taller than the screen. */
:root[data-direction="night"] .hero__media picture {
  display: block;
  aspect-ratio: 591 / 1280;
  /* Deliberately uncapped. Night's hero is a scrolling section, not a
     single screen: the name, the claim, the number and the stamp all
     sit on the charcoal above the plate and are on screen at once,
     which is the part that has to be immediate. The plate then runs
     on below the fold at a proper size. Capping it to force the whole
     hero into one screen starved the photograph to 135px wide, which
     is worse than asking for a scroll. */
  background-color: var(--hero-sky-top);
  background-image: linear-gradient(180deg,
    var(--hero-sky-top) 0%,
    var(--hero-sky-mid) 55%,
    var(--hero-sky-low) 100%);
}

:root[data-direction="night"] .hero__media img {
  width: 100%;
  height: 100%;
  /* contain, not cover: the plate is set to the photograph's own
     ratio, so nothing should be cropped, and contain guarantees it
     even if rounding leaves the box a pixel off. The whole frame
     shows, mark at the top and the trunk running all the way down. */
  object-fit: contain;
  object-position: 50% 50%;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (min-width: 900px) {
  :root[data-direction="night"] .hero {
    padding: 6px 28px 30px;
  }
  :root[data-direction="night"] .hero__inner {
    padding: 36px 0 0;
  }
  :root[data-direction="night"] .hero > .stamp {
    width: 212px;
    margin-top: 26px;
  }
  /* Wide screens give the plate its margin back rather than
     blowing it up: it holds a portrait shape at the head of the
     measure with charcoal to the right of it, the way a plate is
     tipped into a book page. */
  :root[data-direction="night"] .hero__media {
    max-width: 440px;
    margin-top: 34px;
  }
  :root[data-direction="night"] .hero__media picture {
    /* the photograph's own ratio here too: a 2/3 crop on a wide
       screen cut the trunk off right under the mark */
    aspect-ratio: 591 / 1280;
  }
}