/* =============================================================================
   OGATA — Editorial LP Layout
   -----------------------------------------------------------------------------
   Shared layout system for long-form project / editorial pages.
   Loaded only on page templates that call ogata_lp_enqueue() (see functions.php).

   Section vocabulary (see page-lp-starter.php for a copy-paste skeleton):

     .lp                 page root
     .lp-hero            split hero — image + colour panel
     .lp-wrap            content container (max 1200px, 1100px inner on desktop)
     .lp-prose           body paragraph with editorial padding
     .lp-figure          single full-width image (+ .lp-caption)
     .lp-duo             two images, 30% / auto
     .lp-pair            two images, 50% / 50%
     .lp-split           image + text side by side (either order)
     .lp-bios            two profile columns (image + name + body)
     .lp-credit          centered credit line
     .lp-video           click-to-play 16:9 video
     .lp-products        product grid linking out to the shop

   Typography note: this page's text colour (#333) and line-height (1.7) used to
   come from Shopify's stylesheet. They are pinned on .lp so the content renders
   identically now that Shopify's CSS is gone.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Page scope
   -------------------------------------------------------------------------- */

/* Everything is scoped under .lp, so this file is inert on pages that don't use
   the layout and can be loaded site-wide without a per-page registry. */
.lp {
  color: #333;
  line-height: 1.7;
  letter-spacing: .05em;
}

/* header.php sets a global `img,video { width:100%; height:100% }`.
   Reset it here so images in normal flow size themselves naturally. */
.lp img {
  width: 100%;
  height: auto;
}


/* -----------------------------------------------------------------------------
   2. Container
   -------------------------------------------------------------------------- */

.lp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

@media screen and (min-width: 750px) {
  .lp-wrap {
    padding: 0 50px;
  }
}

/* Vertical rhythm between sections.
   The original page got this spacing from stacked Shopify section paddings;
   these modifiers state it outright so the rebuild keeps the same rhythm.
   Mix and match on new pages, or set your own padding. */
.lp-wrap--lead     { padding-top:  30px; padding-bottom:  40px; }

/* The original page carried a stray blank line after its opening paragraph.
   Stated as real spacing here so the rhythm below it is unchanged. */
.lp-wrap--lead > .lp-prose:first-child { padding-bottom: 77px; }
.lp-wrap--story    { padding-top: 110px; padding-bottom: 120px; }
.lp-wrap--closing  { padding-top: 116px; }
.lp-wrap--products { padding-top: 182px; padding-bottom: 147px; }

/* A calmer step for text-led pages, where the copy itself sets the rhythm. */
.lp-wrap--article { padding-top: 56px; padding-bottom: 72px; }

/* Closing space only — same as --article's, for a section that needs to hand
   over cleanly but sets its own opening. Without it the following section's
   heading sits closer than the one after it. */
.lp-wrap--tail    { padding-bottom: 72px; }

@media screen and (min-width: 750px) {
  .lp-wrap--lead     { padding-top:  40px; padding-bottom:  80px; }
  .lp-wrap--lead > .lp-prose:first-child { padding-bottom: 108px; }
  .lp-wrap--story    { padding-top: 199px; padding-bottom: 212px; }
  .lp-wrap--closing  { padding-top: 209px; }
  .lp-wrap--products { padding-top: 296px; padding-bottom: 277px; }
  .lp-wrap--article  { padding-top:  72px; padding-bottom:  96px; }
  .lp-wrap--tail     { padding-bottom:  96px; }
}


/* -----------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.lp-hero {
  position: relative;
  background: #f7f6f3;
}

.lp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 80vh;
  min-height: 80vh;
}

.lp-hero__media {
  position: relative;
  overflow: hidden;
}

/* The hero crops to the panel, so where the subject sits matters. Set
   --lp-hero-focus on .lp-hero__media to move the crop's focal point
   (e.g. `style="--lp-hero-focus: 37% 50%"`); it defaults to dead centre. */
.lp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lp-hero-focus, 50% 50%);
}

.lp-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px);
  background: #5b5b46;
  color: #fff;
}

/* Panel colour. Default is the olive used on the NOMAD page; --stone is the
   warm grey used by Project O+O. */
.lp-hero__panel--stone {
  background: #595454;
}

.lp-hero__credit {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: .18em;
  opacity: .85;
}

.lp-hero__title {
  margin: 0 0 28px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .04em;
  color: #fff;
}

/* The lockup always stacks — project, then who, then where. Set on its own line
   each part reads cleanly and the title can carry more weight than it could as
   a single running line. */
.lp-hero__title-name {
  display: block;
}

/* The venue is where it happens, not what it is — a clear step down from the
   title, set off by a little air so it reads as a separate line of information. */
.lp-hero__title-at {
  display: block;
  margin-top: .3em;
  font-size: clamp(21px, 2.2vw, 32px);
  letter-spacing: .03em;
}

/* Keeps a name from being split across lines. */
.lp-nowrap {
  white-space: nowrap;
}

/* Optional line between title and lead — a run of dates, a venue, a subtitle. */
.lp-hero__date {
  margin: 0 0 20px;
  font-size: 15px;
  letter-spacing: .08em;
  opacity: .85;
}

/* O+O runs a larger credit/date lockup than the NOMAD-derived default above.
   Scoped to --wide so the shared defaults stay put for other pages. */
.lp-hero--wide .lp-hero__credit {
  font-size: 15px;
}

.lp-hero--wide .lp-hero__date {
  font-size: 22px;
  letter-spacing: .06em;
}

/* Phones: the panel is only ~330px wide, so the lockup steps down. */
@media screen and (max-width: 749px) {
  .lp-hero--wide .lp-hero__credit {
    font-size: 12px;
  }

  .lp-hero--wide .lp-hero__date {
    font-size: 18px;
  }

  .lp-hero--wide .lp-hero__lead {
    font-size: 13px;
  }
}

.lp-hero__lead {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.8;
  opacity: .9;
  /* Keeps a lone word (or a dangling em dash) off a line of its own when the
     panel is too narrow to hold the sentence in one go. */
  text-wrap: pretty;
}

/* Language toggle, sitting on the site header's own line.
   header.php gives the header `padding: 16px 24px`, switching to `22px 24px`
   above 1080px, around an inner row 18px tall. Matching that padding and row
   height puts this toggle's centre exactly on the logo's centre.
   z-index clears the fixed header (z-index 2000), which is transparent but
   would otherwise swallow the taps. */
.lp-hero__lang {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 2001;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .12em;
}

/* On phones the toggle sits over the photograph, where a light patch can swallow
   it, so it carries a little shadow and holds the inactive language brighter. */
@media screen and (max-width: 749px) {
  .lp-hero__lang {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  }

  .lp-hero__lang a {
    opacity: .8;
  }
}

/* The header takes its taller padding here, so the toggle follows it down. */
@media screen and (min-width: 1081px) {
  .lp-hero__lang {
    top: 22px;
  }
}

.lp-hero__panel {
  position: relative;
}

.lp-hero__lang a {
  color: #fff;
  opacity: .6;
  transition: opacity .3s ease;
}

.lp-hero__lang a:hover {
  opacity: 1;
}

.lp-hero__lang [aria-current="true"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lp-hero__lang span[aria-hidden] {
  opacity: .4;
}

/* --wide: the panel stops growing past a comfortable measure, and the extra
   width goes to the photograph, so a landscape picture reads as one instead of
   being cropped square. Below 1200px the column beside the panel is too narrow
   to hold a landscape frame at all, so the hero stacks instead of cropping the
   photograph to a portrait sliver. */
@media screen and (min-width: 1200px) {
  .lp-hero--wide .lp-hero__inner {
    grid-template-columns: 1fr minmax(0, 580px);
    /* 80vh alone turns the photo column portrait on a tall window, which is the
       one thing this hero is trying to avoid — so the height stops growing. */
    height: min(80vh, 820px);
    min-height: 0;
  }

  /* Once the panel is capped its padding no longer wants to track the viewport. */
  .lp-hero--wide .lp-hero__panel {
    padding: clamp(40px, 5vw, 64px);
  }
}

@media screen and (max-width: 1199px) {
  .lp-hero--wide .lp-hero__inner {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .lp-hero--wide .lp-hero__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Tablet-width stacking: the panel runs full width, so it takes the roomier
   padding rather than the phone's tight gutters. */
@media screen and (min-width: 901px) and (max-width: 1199px) {
  .lp-hero--wide .lp-hero__panel {
    padding: clamp(40px, 5vw, 64px);
  }
}

@media screen and (max-width: 900px) {
  .lp-hero__inner {
    grid-template-columns: 1fr;
  }

  .lp-hero__media {
    height: 56vh;
  }

  .lp-hero__panel {
    padding: 40px 24px;
  }
}

@media screen and (max-width: 600px) {
  .lp-hero__inner {
    height: auto;
    min-height: 0;
  }
}


/* -----------------------------------------------------------------------------
   4. Prose
   -------------------------------------------------------------------------- */

.lp-prose {
  margin: 0;
  padding: 40px 10px 50px;
  font-size: 16px;
  line-height: 1.6;
}

@media screen and (min-width: 601px) {
  .lp-prose {
    padding: 80px 100px;
  }
}


/* -----------------------------------------------------------------------------
   5. Images
   -------------------------------------------------------------------------- */

/* Aspect ratios.
   Photography arrives in every shape, so the page pins each picture to one of
   three, and a page reads as one set rather than a pile of crops:

     .lp-land    3:2   landscape
     .lp-port    3:4   portrait
     .lp-square  1:1

   3:4 is exactly half of 3:2, which is what lets the 1:2:1 trio sit on a single
   line with its three images the same height.

   Cropping is centred. When the subject sits off-centre, set --lp-focus on the
   image: `style="--lp-focus: 37% 50%"`. */
.lp-land,
.lp-port,
.lp-square {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--lp-focus, 50% 50%);
}

.lp-land   { aspect-ratio: 3 / 2; }
.lp-port   { aspect-ratio: 3 / 4; }
.lp-square { aspect-ratio: 1 / 1; }

.lp-figure {
  margin: 0;
}

.lp-figure img {
  width: 100%;
}

.lp-caption {
  margin: 10px 0 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

@media screen and (min-width: 601px) {
  .lp-caption {
    margin-top: 3px;
    font-size: 14px;
  }
}

/* Two images — narrow + wide */
.lp-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.lp-duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 601px) {
  .lp-duo {
    grid-template-columns: 30% auto;
  }
}

/* Two images — equal halves */
.lp-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.lp-pair img {
  width: 100%;
}

@media screen and (min-width: 601px) {
  .lp-pair {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}


/* -----------------------------------------------------------------------------
   6. Split — image + text
   -------------------------------------------------------------------------- */

.lp-split {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 auto 10px;
}

.lp-split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-split__text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-split__text > * {
  width: 100%;
  margin: 0;
  padding: 30px 10px;
  font-size: 16px;
  line-height: 1.5;
}

@media screen and (min-width: 601px) {
  .lp-split {
    grid-template-columns: 1fr 1fr;
    margin: 50px auto;
  }

  .lp-split__text > * {
    width: 80%;
    padding: 0;
    font-size: 18px;
    line-height: 1.6;
  }
}


/* -----------------------------------------------------------------------------
   7. Bios
   -------------------------------------------------------------------------- */

.lp-bios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 80px;
}

.lp-bio img {
  width: 100%;
  height: unset;
  margin-bottom: 10px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lp-bio__name {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.lp-bio__body {
  margin: 0;
  padding: 0 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

@media screen and (min-width: 601px) {
  .lp-bios {
    grid-template-columns: 1fr 1fr;
    margin-top: 150px;
  }

  .lp-bio__name {
    margin: 0;
    font-size: 15px;
  }
}


/* -----------------------------------------------------------------------------
   8. Credit
   -------------------------------------------------------------------------- */

.lp-credit {
  margin-top: 50px;
  text-align: center;
}


/* -----------------------------------------------------------------------------
   9. Video — poster + click to play
   -------------------------------------------------------------------------- */

.lp-video {
  margin-bottom: -20px;
}

@media screen and (min-width: 601px) {
  .lp-video {
    margin-bottom: 0;
  }
}

.lp-video__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fff;
}

.lp-video__media > video,
.lp-video__media > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.lp-video__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.lp-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(51, 51, 51, .1);
  border-radius: 50%;
  background: #fff;
  color: #333;
}

.lp-video__play svg {
  width: 20px;
  height: 20px;
}


/* -----------------------------------------------------------------------------
   10. Products
   -------------------------------------------------------------------------- */

.lp-products__title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.lp-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-product > a {
  display: block;
}

.lp-product__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.lp-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Second image crossfades in on hover, as on the shop. */
.lp-product__media img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.lp-product:hover .lp-product__media img + img,
.lp-product:focus-within .lp-product__media img + img {
  opacity: 1;
}

.lp-product__name {
  display: block;
  margin: 0;
  padding: 30px 0 13px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .lp-products__title {
    margin-bottom: 30px;
    font-size: 20px;
  }

  .lp-products__grid {
    gap: 20px;
  }

  .lp-product__name {
    padding-bottom: 17px;
    font-size: 15px;
  }
}

@media screen and (min-width: 990px) {
  .lp-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* -----------------------------------------------------------------------------
   11. Editorial blocks — centred headings, running copy, buttons, trios
   -------------------------------------------------------------------------- */

/* Centred heading pair, e.g. a run of dates over a venue. */
.lp-heading {
  margin: 0 0 48px;
  text-align: center;
}

/* Project mark under the dates. `.lp img` sets width:100%, so this needs the
   extra class weight to keep its own size. */
/* The mark and the two lines under it read as one lockup, so the gap between
   them stays tight — the block as a whole is what gets separated from the copy. */
.lp .lp-heading__logo {
  width: 110px;
  max-width: 55%;
  height: auto;
  margin: 0 auto 26px;
}

/* With no dates line under it the logo carries the block on its own, so its
   own bottom margin would double up with .lp-heading's. */
.lp .lp-heading__logo:last-child {
  margin-bottom: 0;
}

.lp-heading p {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.lp-heading p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .lp-heading {
    margin-bottom: 64px;
  }

  .lp .lp-heading__logo {
    width: 150px;
    margin-bottom: 34px;
  }

  .lp-heading p {
    font-size: 22px;
  }
}

/* Running copy — several paragraphs at the full width of the container.
   Use instead of .lp-prose when the text is a sequence rather than a statement. */
.lp-copy p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.75;
}

.lp-copy p:last-child {
  margin-bottom: 0;
}

.lp-copy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (min-width: 750px) {
  .lp-copy p {
    margin-bottom: 24px;
    font-size: 17px;
  }
}

/* Draws the eye to a date or a caveat inside running copy. */
.lp-accent {
  color: #c0392b;
}

/* Call to action. Stacks its buttons so a second, quieter action can sit under
   the primary one. */
.lp-button-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 64px 0;
  text-align: center;
}

/* Closing a section, the row leans on the section's own bottom padding rather
   than stacking another margin on top of it. */
.lp-button-row:last-child {
  margin-bottom: 0;
}

.lp-button {
  display: inline-block;
  min-width: min(100%, 440px);
  padding: 19px 32px;
  background: #000;
  color: #fff;
  font-size: 16px;
  letter-spacing: .06em;
  text-align: center;
  transition: opacity .3s ease;
}

.lp-button:hover {
  opacity: .82;
}

/* Secondary action — outlined rather than filled. */
.lp-button--quiet {
  background: transparent;
  border: 1px solid #000;
  color: #333;
}

@media screen and (min-width: 750px) {
  .lp-button-row {
    margin: 88px 0;
  }
}

/* Small label above a section title. */
.lp-eyebrow {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
}

.lp-section-title {
  margin: 0 0 28px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
}

@media screen and (min-width: 750px) {
  .lp-section-title {
    margin-bottom: 36px;
    font-size: 24px;
  }
}

/* Three images, the middle one twice as wide. */
.lp-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 44px;
  align-items: start;
}

/* Portrait either side of a landscape centre. Because 3:4 is half of 3:2, the
   three land on exactly the same height once the middle column is twice as
   wide — see the ratio note above. */
.lp-trio img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--lp-focus, 50% 50%);
}

.lp-trio img:nth-child(2) {
  aspect-ratio: 3 / 2;
}

@media screen and (min-width: 750px) {
  .lp-trio {
    grid-template-columns: 1fr 2fr 1fr;
    gap: 24px;
  }
}

/* People, in order. Stacked rather than side by side, because on this page the
   sequence is the point: the first name leads the exhibition. */
.lp-profiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* Picture then words on phones; picture beside words once there is room. */
.lp-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* Square, at every size — it keeps both portraits to the same footprint and
   sits lighter beside the text than a tall crop would. */
.lp-profile img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: var(--lp-focus, 50% 50%);
}

.lp-profile__name {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.lp-profile__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

.lp-profile__body + .lp-profile__body {
  margin-top: 20px;
}

@media screen and (min-width: 750px) {
  .lp-profiles {
    gap: 64px;
  }

  .lp-profile {
    grid-template-columns: 32% auto;
    gap: 72px;
    align-items: start;
  }

  .lp-profile__name {
    margin-bottom: 16px;
    font-size: 22px;
  }
}


/* Image beside a block of information — a venue, an address, opening hours.
   Wider image column than .lp-profile, since the picture is the subject. */
.lp-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.lp-feature img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--lp-focus, 50% 50%);
}

.lp-feature__title {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

/* Subordinate heading — a label over a short block (opening hours, contact),
   rather than the title for the whole column. */
.lp-feature__subtitle {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.lp-copy + .lp-feature__subtitle {
  margin-top: 30px;
}

/* Copy here sits in a narrow column beside the picture, so it takes the size of
   a profile body rather than the wider running copy elsewhere on the page. */
.lp-feature .lp-copy p {
  font-size: 15px;
}

/* Space before each heading that follows a block of copy. */
.lp-copy + .lp-feature__title {
  margin-top: 34px;
}

/* Two blocks of copy in a row — the Japanese page drops the "opening hours"
   heading, so the gap has to carry the separation on its own. */
.lp-copy + .lp-copy {
  margin-top: 30px;
}

@media screen and (min-width: 750px) {
  .lp-feature {
    grid-template-columns: 50% auto;
    gap: 56px;
    align-items: start;
  }

  .lp-feature__title {
    margin-bottom: 16px;
    font-size: 22px;
  }

  .lp-copy + .lp-feature__title {
    margin-top: 44px;
  }

  .lp-feature__subtitle {
    margin-bottom: 12px;
    font-size: 17px;
  }

  .lp-copy + .lp-feature__subtitle {
    margin-top: 38px;
  }
}


/* -----------------------------------------------------------------------------
   Single-purpose pages — a centred column for a form or a short message
   -------------------------------------------------------------------------- */

.lp-single {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.lp-single__title {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .06em;
}

.lp-single .lp-copy p {
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .lp-single__title {
    margin-bottom: 24px;
    font-size: 38px;
  }
}

/* Third-party embed. The provider drops an iframe in here and sizes it itself,
   so this only reserves the column and keeps a minimum height while it loads. */
/* min-height only reserves space for the moment before the provider's script
   runs; it sizes the iframe itself from there. */
.lp-embed {
  margin-top: 44px;
  min-height: 140px;
  text-align: left;
}

.lp-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

@media screen and (min-width: 750px) {
  .lp-embed {
    margin-top: 56px;
  }
}

/* Language toggle for pages without a hero panel to sit in. */
.lp-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 40px;
  font-size: 12px;
  letter-spacing: .12em;
}

.lp-lang a {
  opacity: .55;
  transition: opacity .3s ease;
}

.lp-lang a:hover {
  opacity: 1;
}

.lp-lang [aria-current="true"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lp-lang span[aria-hidden] {
  opacity: .35;
}


/* -----------------------------------------------------------------------------
   12. Japanese typography
   -------------------------------------------------------------------------- */

/* The body face carries no kana or kanji, so Japanese falls back to a mincho
   stack and gets the looser leading that Japanese text needs to breathe. */
.lp [lang="ja"],
.lp[lang="ja"] {
  font-family: "adobe-garamond-pro", "DFKyoKaShoPro6-W3", Garamond, Baskerville, Caslon, serif;
  letter-spacing: .04em;
}

/* Japanese running text: mincho already carries its own rhythm, so it wants
   neither the extra leading nor the tracking the Latin faces are set with. */
.lp[lang="ja"] .lp-copy p,
.lp[lang="ja"] .lp-profile__body {
  line-height: 1.7;
  letter-spacing: 0;
}

/* Japanese needs more room per character, so the display sizes come down a step
   and the leading opens up. */
/* The hero title carries no Japanese — it reads "Project O+O: / Gabriel Orozco /
   at HIGASHI-YAMA Tokyo" in both languages — so it keeps the Latin sizing rather
   than stepping down the way Japanese running text does. */

/* Japanese may break between characters, but never mid-word the way
   `overflow-wrap: anywhere` would force. Kinsoku handles the rest. */
.lp[lang="ja"] .lp-heading p,
.lp[lang="ja"] .lp-hero__title,
.lp[lang="ja"] .lp-hero__lead,
.lp[lang="ja"] .lp-section-title {
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
}


/* -----------------------------------------------------------------------------
   13. Scroll reveal
   -------------------------------------------------------------------------- */

/* The `lp-js` flag is set by lp-editorial.js the moment it runs. Without it the
   images simply stay visible, so a JS failure can never blank out the page. */
.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s ease;
}

.lp-js .lp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lp-js .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}