/* Tonitza — home page (brand adoption, September 2026).
   Loaded after main.css from templates/core/home_page.html; tokens and the
   shared components live there. Layout per docs/brand/web-identity.md §5. */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.4rem, 5vw, 4.6rem) clamp(2rem, 4.5vw, 4rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 6%;
  align-items: center;
}
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero h1 { margin: 0; }
/* The headline's second line: same size as the h1, Fraunces italic in terracotta (display size, so 3.7:1 passes for large text). */
.hero__line {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.9rem, 1.6rem + 5.2vw, 6.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--terracotta);
  margin: 0;
}
.hero__intro {
  max-width: 36ch;
  margin: 1.8rem 0 0;
  font-size: 0.92rem;
  line-height: 1.8;
}
/* The gap is the actions' own, so it holds with or without the intro line. */
.hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: clamp(1.8rem, 3vw, 2.4rem); }

/* A sentence-length headline (editors write "Coffee, light & contemporary
   art." rather than "A pause."): the two-word display scale would break it
   into five or six giant lines and push the actions below the fold. Step the
   h1 down, balance the lines, and let the italic line read as its subtitle. */
.hero--long h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); text-wrap: balance; }
.hero--long .hero__line { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.4rem); margin-top: 0.35em; text-wrap: balance; }
/* Beside a picture the column is half as wide: one more step down keeps the
   first line from stranding a single word. */
.hero--long:not(.hero--centred) h1 { font-size: clamp(2.4rem, 1.3rem + 2.7vw, 3.9rem); }

/* No photograph: the current show's artwork, complete and uncropped on the
   neutral art field (the brand never crops or tints exhibited work), with the
   show as its caption. */
.hero__art { display: block; color: var(--ink); }
.hero__art-field {
  display: flex; align-items: center; justify-content: center;
  height: clamp(340px, 38vw, 560px);
  padding: clamp(1.4rem, 3.5vw, 3rem);
  background: var(--paper-3);
}
.hero__art-field picture { display: contents; }
.hero__art-img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.hero__art-caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem;
  padding-top: 0.9rem;
}
.hero__art-status {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--clay-deep);
}
.hero__art-title { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.2; }
.hero__art-dates { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.hero__art:hover .hero__art-title { color: var(--clay-deep); }

/* The photograph, with room at the bottom-right for the stamp to overlap. */
.hero__photo { position: relative; padding: 0 30px 40px 0; }
.hero__photo picture { display: block; }
.hero__img { width: 100%; height: 550px; object-fit: cover; background: var(--paper-3); }
.hero__stamp {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 145px;
  padding: 12px 12px 8px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(3deg);
  box-shadow: 0 3px 12px rgba(36, 37, 28, 0.13);
}
.hero__stamp picture { display: block; height: 148px; background: var(--paper-3); }
.hero__stamp-img { width: 100%; height: 100%; object-fit: contain; }
.hero__stamp-caption {
  display: block;
  margin-top: 7px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hero__stamp:hover .hero__stamp-caption { color: var(--clay-deep); }

/* No photograph: a single centred column. */
.hero--centred { padding-block: clamp(3.5rem, 8vw, 7rem); }
.hero--centred .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centred .hero__copy { max-width: 46rem; }
.hero--centred h1,
.hero--centred .hero__line { max-width: 14ch; margin-inline: auto; }
.hero--centred.hero--long h1 { max-width: 18ch; }
.hero--centred.hero--long .hero__line { max-width: 24ch; }
.hero--centred .hero__intro { margin-inline: auto; }
.hero--centred .hero__actions { justify-content: center; }

/* ---------- Works strip: the featured show's works, swipeable ---------- */
/* Starts in line with the page column and runs off the right edge, so the
   cut-off card says "there's more"; scroll-snap keeps cards aligned. */
.home-works .section-top { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.works-strip {
  list-style: none; margin: 0; padding: 0 var(--gutter) 1rem;
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.works-strip__item { flex: 0 0 clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.works-strip .work__title { font-size: 1.15rem; }

/* ---------- Section head row: eyebrow + h2 left, a text link right ---------- */
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.8rem);
}
.section-top .eyebrow { margin-bottom: 1.1rem; }
.section-top h2 { margin: 0; }
.section-top .link-underline { flex: none; margin-bottom: 0.55rem; white-space: nowrap; }

/* ---------- 01 / At the café: rule-topped selection columns ---------- */
.selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.25rem;
}
.selection__item { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.selection__item .eyebrow { margin-bottom: 0.9rem; }
.selection__signature {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--clay);
  margin: 0 0 0.35rem;
}
.selection__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; }
.selection__head h3 { margin: 0; }
.selection .price {
  flex: none;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.selection .price small { font-size: 0.8em; }
.selection__desc { font-size: 0.82rem; line-height: 1.6; color: var(--ink-soft); max-width: 290px; margin: 0.8rem 0 0; }

/* ---------- 02 / Art at Tonitza: full-bleed ink block ---------- */
.gallery-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  background: var(--ink);
  color: var(--paper);
}
/* The neutral art panel: the work shown complete, never cropped or tinted. */
.gallery-feature__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.6rem);
  background: var(--paper-3);
}
.gallery-feature__art picture { display: block; max-width: 100%; }
.gallery-feature__art img { width: auto; height: auto; max-width: 100%; max-height: 580px; object-fit: contain; }
.gallery-feature__field { width: 100%; min-height: 420px; }
.gallery-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.8rem, 6vw, 5.6rem) clamp(1.9rem, 5.5vw, 5rem);
}
.gallery-feature__copy .eyebrow { margin-bottom: 2.2rem; }
/* Galeria Tonitza in cream on the ink ground, leading the copy. */
.gallery-feature__plaque { display: block; margin: 0 0 2.2rem -0.5rem; }
.gallery-feature__plaque img { width: clamp(180px, 18vw, 240px); height: auto; }
a.gallery-feature__plaque:focus-visible { outline-color: var(--paper); outline-offset: 4px; }
.gallery-feature__title {
  font-style: italic;
  font-size: clamp(3rem, 1.8rem + 3.6vw, 5.6rem);
  margin: 0 0 1.4rem;
  max-width: 12ch;
}
.gallery-feature__sub { max-width: 350px; font-size: 0.86rem; line-height: 1.9; margin: 0 0 0.8rem; }
.gallery-feature__dates { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 2.2rem; }
.gallery-feature__link { margin: 0 0 2.6rem; }
.gallery-feature .link-underline { color: var(--paper); border-bottom-color: var(--paper); }
.gallery-feature .link-underline:hover { border-bottom-color: var(--terracotta); }
/* The hero already shows this show's only image: the block keeps its words. */
.gallery-feature--text { grid-template-columns: 1fr; min-height: 0; }
.gallery-feature--text .gallery-feature__copy {
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
/* An ink tag would vanish on the ink ground: outline it in paper instead. */
.gallery-feature .status-tag--upcoming { background: transparent; border-color: var(--paper); color: var(--paper); }

/* The remaining featured shows: a compact rule-separated list. */
.show-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-bottom: 0.6rem; }
.show-list__head .eyebrow { margin: 0; }
.show-list__rows { list-style: none; margin: 0; padding: 0; }
.show-list__row { border-top: 1px solid var(--line); }
.show-list__row:last-child { border-bottom: 1px solid var(--line); }
.show-list__link { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1.2rem; padding: 1rem 0; }
.show-list__title {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  min-width: 0;
}
.show-list__link:hover .show-list__title { color: var(--clay-deep); }
.show-list__dates { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.show-list__link .status-tag { margin-left: auto; }

/* ---------- Artist of the month: a quiet split ---------- */
.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.spotlight__media { aspect-ratio: 4 / 5; }
.spotlight__body h2 { margin: 0.3rem 0 0.9rem; }
/* No portrait: a single text column (the emblem placeholder would repeat the house emblem). */
.spotlight--no-media { grid-template-columns: 1fr; }
.spotlight--no-media .spotlight__body { max-width: 60ch; }

/* ---------- 03 / Coming up: rule-topped columns, no images ---------- */
.coming-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.25rem;
}
.coming-up__item { display: block; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.coming-up__item .eyebrow { margin-bottom: 0.9rem; }
.coming-up__item h3 { margin: 0 0 0.6rem; }
.coming-up__item:hover h3 { color: var(--clay-deep); }
.coming-up__sub { font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 290px; }

/* ---------- 04 / The house ---------- */
.pause { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; }
.pause__emblem { width: 130px; height: auto; margin-bottom: 2.2rem; }
.pause__copy h2 { margin: 0 0 1.4rem; }
.pause__prose { max-width: 380px; font-size: 0.95rem; line-height: 1.7; }
.pause__prose p { margin: 0 0 1rem; }
.pause__link { margin: 1.6rem 0 0; }
.pause__figure .media { background: var(--paper-3); }
.pause__caption { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* ---------- Private hire: ink block, the photo at 55% under an olive multiply ---------- */
.room-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: var(--ink);
  padding-block: clamp(4rem, 10vw, 7.5rem);
}
/* The blend lives on the positioned <picture> (its own stacking context) so it
   multiplies against the section's ink ground, not a transparent backdrop. */
.room-banner > picture {
  position: absolute; inset: 0; z-index: 0; display: block;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.room-banner__img { width: 100%; height: 100%; object-fit: cover; }
.room-banner .wrap { position: relative; z-index: 1; }
.room-banner__inner { max-width: 34ch; }
.room-banner h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); margin: 0 0 1rem; }
.room-banner .lead { color: var(--paper); margin-bottom: 1.8rem; }
.room-banner .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.room-banner .btn:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* ---------- Visit: heading left, rule-separated rows right ---------- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.visit h2 { margin: 0; }
.visit .detail-rows > div:last-child { border-bottom: 1px solid var(--line); }
.visit .address-plain { font-size: inherit; line-height: 1.7; }
.visit .open-status { margin-bottom: 0.7rem; }
.visit .hours li { padding: 0.45rem 0; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) {
  .hero__img { height: 630px; }
}

@media (max-width: 950px) {
  .hero__grid { gap: 5%; }
  .hero__img { height: 470px; }
  .hero__stamp { width: 120px; }
  .hero__stamp picture { height: 115px; }
}

@media (max-width: 820px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__media { max-width: 420px; }
  .pause { grid-template-columns: 1fr; gap: 2.2rem; }
  .pause__emblem { width: 100px; margin-bottom: 1.7rem; }
  .visit { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 650px) {
  .hero { padding-block: 2rem 1.9rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero .eyebrow { margin-bottom: 1.2rem; }
  /* The two-line headline is the page's one display moment: on a phone the
     shared h1 scale bottoms out at 2.9rem, so give it a little more presence
     (the prototype runs it at 70px). Meets the desktop curve again at 650px. */
  .hero h1,
  .hero__line { font-size: clamp(3.2rem, 2.2rem + 5.2vw, 3.8rem); }
  .hero--long h1 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 2.7rem); }
  .hero--long .hero__line { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2rem); }
  .hero__intro { margin: 1.4rem 0 0; }
  .hero__actions { gap: 1.4rem; }
  .hero__photo { padding: 0 19px 34px 0; }
  .hero__img { height: 370px; }
  .hero__art-field { height: 320px; }
  .hero__stamp { width: 105px; padding: 8px 8px 6px; }
  .hero__stamp picture { height: 110px; }
  .section-top { display: block; }
  .section-top .link-underline { display: inline-block; margin: 1.4rem 0 0; }
  .selection, .coming-up { gap: 1.9rem; }
  .gallery-feature { grid-template-columns: 1fr; min-height: 0; }
  .gallery-feature__art { padding: 2.5rem 3rem; }
  .gallery-feature__art img { max-height: 420px; }
  .gallery-feature__field { min-height: 300px; }
  .gallery-feature__copy { padding: 2.8rem var(--gutter) 3.2rem; }
  .gallery-feature__copy .eyebrow { margin-bottom: 1.5rem; }
  .gallery-feature__plaque { margin-bottom: 1.6rem; }
  .gallery-feature__title { margin-bottom: 1.1rem; }
  .gallery-feature__dates { margin-bottom: 1.6rem; }
  .gallery-feature__link { margin-bottom: 1.8rem; }
  /* When the tag wraps onto its own line, keep it under the title, not flush right. */
  .show-list__link .status-tag { margin-left: 0; }
}

@media print {
  .hero__actions,
  .hero__stamp,
  .room-banner > picture { display: none !important; }
  .gallery-feature,
  .room-banner { background: transparent; color: #000; }
}