/*
Theme Name: Kortalan Forma
Theme URI: https://kortalanforma.hu
Author: Kortalan Forma
Description: Szobrászi bútorok és tárgyak — egyedi téma galériás főoldallal, munka archívummal és adatlapos aloldalakkal. Nem igényel bővítményt.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kortalan-forma
*/

/* ==========================================================================
   KORTALAN FORMA — stylesheet
   1.  Tokens
   2.  Reset & base
   3.  Typography utilities
   4.  Shared components  (masks, image reveal, link block, cursor)
   5.  Home template
   6.  Products (list) template
   7.  Product (item) template
   8.  Footer / utilities
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  --page-gutter: 1.5rem;
  --section-spacing: 12rem;
  --grid-cols: 2;
  --topbar-h: 4.6rem;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 0.8s;
}

@media (min-width: 967px) {
  :root {
    --page-gutter: 2.1rem;
    --section-spacing: 26rem;
    --grid-cols: 5;
    --topbar-h: 5.4rem;
  }
}

/* Single light palette on a white page. `--*-invert` are the inverted values
   used by the drawer, hover fills and the "next item" block. */
:root {
  --bg: #ffffff;
  --bg-dark: #ffffff;
  --index-text-view: #f5f4f2;
  --fg: #28282a;
  --image-bg: #f2f1ef;
  --dropdown-bg: #373739;
  --dropdown-fg: #ffffff;
  --bg-invert: #0e0e0e;
  --fg-invert: #ffffff;
}

/* 2. RESET & BASE ========================================================== */

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

html {
  font-size: 62.5%; /* 1rem = 10px, mirrors the original scale */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-height: 100%;
  font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--fg);
  background-color: var(--bg);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

::selection { background: var(--fg); color: var(--bg); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. TYPOGRAPHY ============================================================ */

.t-mono {
  font-family: 'ABC Monument Grotesk Mono', 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.t-label { font-size: 1.2rem; line-height: 1.2rem; font-weight: 500; }

.t-lead { font-size: 1.6rem; line-height: 1.8rem; font-weight: 500; }

.t-heading { font-size: 2.2rem; line-height: 2.2rem; font-weight: 500; white-space: pre-line; }

.t-display { font-size: 2.2rem; line-height: 2.2rem; font-weight: 500; }

@media (min-width: 967px) {
  .t-mono    { font-size: 1.4rem; line-height: 1.6rem; }
  .t-label   { font-size: 1.4rem; line-height: 1.6rem; }
  .t-lead    { font-size: 5rem;   line-height: 5.7rem; }
  .t-heading { font-size: 5.9rem; line-height: 5.7rem; }
  .t-display { font-size: 8.5rem; line-height: 8.5rem; }
}

/* 4. SHARED COMPONENTS ===================================================== */

/* 4.1 Section rhythm ------------------------------------------------------ */

main { padding-top: var(--topbar-h); } /* clears the fixed status bar */

/* Logged into WordPress: drop everything fixed below the admin bar. */
body.admin-bar { --wpbar-h: 32px; }
body.admin-bar .topbar { top: var(--wpbar-h); }
body.admin-bar .drawer { top: var(--wpbar-h); }
body.admin-bar main { padding-top: calc(var(--topbar-h) + var(--wpbar-h)); }
@media screen and (max-width: 782px) {
  body.admin-bar { --wpbar-h: 46px; }
}

.section { color: var(--fg); margin: calc(var(--section-spacing) * 0.5) 0; }
.section:first-child { margin-top: 0; padding-top: var(--section-spacing); }
.section:last-child { margin-bottom: 0; padding-bottom: calc(var(--section-spacing) * 0.5); }

.section[data-component='logoWithProducts'] { padding-top: 5rem; }
.section[data-component='productGrid']:first-child { padding-top: 0; }
.section[data-component='productHero']:first-child { padding-top: 4.2rem; }

@media (min-width: 967px) {
  .section[data-component='logoWithProducts'] { padding-top: 10rem; }
  .section[data-component='productHero']:first-child { padding-top: 6.5rem; }
}

.gutter { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

/* 4.2 Reveal-on-scroll ---------------------------------------------------- */

/* Text: wipes up from behind a mask */
.mask { display: block; overflow: hidden; }
.mask > .mask__i {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur) var(--ease);
}
.is-inview .mask > .mask__i,
.mask.is-inview > .mask__i { transform: translateY(0); }
.mask > .mask__i:nth-child(2) { transition-delay: 0.06s; }

/* Media: scales up behind a clipping frame */
.reveal {
  position: relative;
  overflow: hidden;
  background-color: var(--image-bg);
  aspect-ratio: var(--ar, 1);
}
/* The inner layer carries two independent things: the clip-path wipe (below)
   and the scroll parallax (--py, set per frame by site.js). Only clip-path is
   transitioned, so the parallax stays glued to the scroll position instead of
   easing behind it. It sits slightly taller than its frame so it can drift
   without exposing an edge. */
.reveal__inner {
  position: absolute;
  left: 0;
  right: 0;
  top: -3%;
  bottom: -3%;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease);
  transform: translate3d(0, var(--py, 0%), 0);
}
.is-inview .reveal__inner,
.reveal.is-inview .reveal__inner { clip-path: inset(0 0 0 0); }

.reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}
.is-inview .reveal img,
.reveal.is-inview img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .mask > .mask__i { transform: none; }
  .reveal__inner { clip-path: none; top: 0; bottom: 0; transform: none; }
  .reveal img { transform: none; }
}

/* 4.3 Index / model line -------------------------------------------------- */

.monoslash { display: flex; align-items: center; gap: 0.5rem; }
.monoslash__index,
.monoslash__slash {
  font-family: 'ABC Monument Grotesk Mono', 'Roboto Mono', ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.2rem;
  opacity: 0.5;
}
.monoslash__model { font-size: 1.2rem; line-height: 1.2rem; font-weight: 500; }

@media (min-width: 967px) {
  .monoslash__index,
  .monoslash__slash,
  .monoslash__model { font-size: 1.4rem; line-height: 1.6rem; }
}

/* 4.4 Link block ---------------------------------------------------------- */

.linkblock__rule {
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease);
  margin-bottom: 2.3rem;
}
.is-inview .linkblock__rule { transform: scaleX(1); }

.linkblock__title { margin-bottom: 2.3rem; }
.linkblock__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }

.linkblock__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.linkblock__link svg { width: 1.4rem; height: 1.4rem; transition: transform 0.5s var(--ease); }

@media (min-width: 967px) {
  .linkblock__title { margin-bottom: 4.1rem; }
  .linkblock__rule { margin-bottom: 4.1rem; }
  .linkblock__link svg { width: 1.8rem; height: 1.8rem; }
}

@media (pointer: fine) {
  .linkblock__link:hover svg { transform: scale(0.8) translate(10%, -10%); }
}

/* 4.5 Outline button ------------------------------------------------------ */

.btn-outline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
  border: 1px solid var(--fg);
  text-transform: uppercase;
  overflow: hidden;
}
.btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-invert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.btn-outline span { position: relative; z-index: 2; transition: color 0.6s var(--ease); }

@media (pointer: fine) {
  .btn-outline:hover::after { transform: scaleX(1); }
  .btn-outline:hover span { color: var(--fg-invert); }
}

/* 4.6 Custom cursor ------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 113;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor.is-visible { opacity: 1; }
.cursor__cross { position: relative; width: 2.4rem; height: 2.4rem; }
.cursor__cross span {
  position: absolute;
  background: #fff;
}
.cursor__cross span:first-child { left: 50%; top: 0; width: 1px; height: 100%; }
.cursor__cross span:last-child { top: 50%; left: 0; height: 1px; width: 100%; }
.cursor__text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  text-align: center;
}
.cursor__text span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.5s var(--ease);
}
.cursor.is-hovering .cursor__text span { transform: translateY(0); }

@media (max-width: 967px), (pointer: coarse) {
  .cursor { display: none !important; }
}

/* 5. HOME TEMPLATE ========================================================= */

/* 5.1 Wordmark + featured collage ----------------------------------------- */

/* Opening statement, left-aligned above the collage.
   Set large with the lines packed tight, so it reads as one block of type.
   Each line is its own mask, so they wipe up one after another. */
.intro {
  font-size: clamp(3.4rem, 7.6vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.intro .mask { display: block; }
.intro .mask:nth-child(2) .mask__i { transition-delay: 0.08s; }
.intro .mask:nth-child(3) .mask__i { transition-delay: 0.16s; }
.intro .mask:nth-child(4) .mask__i { transition-delay: 0.24s; }


.hero-products__list {
  display: flex;
  flex-direction: column;
  row-gap: 3.3rem;
  margin-top: 2.7rem;
  width: 100%;
}
.intro + .hero-products__list { margin-top: 4rem; }
@media (min-width: 967px) {
  .intro + .hero-products__list { margin-top: 8rem; }
}

@media (min-width: 967px) {
  .hero-products__list {
    flex-flow: row wrap;
    justify-content: space-between;
    row-gap: 8rem;
    margin-top: 5.7rem;
  }
  /* Two per row, sized so each pair nearly fills the measure. The widths still
     force the wrap: 1+2 fit, 3 pushes to a new row, 4 joins it. */
  .hero-products__item:nth-child(1) { width: 36%; }
  .hero-products__item:nth-child(2) { width: 46%; }
  .hero-products__item:nth-child(3) { width: 52%; }
  .hero-products__item:nth-child(4) { width: 24%; }
}

.hero-products__item { position: relative; }
.hero-products__meta {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 967px) { .hero-products__meta { margin-top: 1.8rem; } }

@media (pointer: fine) {
  .hero-products__item a:hover .reveal img { transform: scale(1.04); }
}

/* 5.2 About --------------------------------------------------------------- */

.about__lead sup {
  display: block;
  margin-bottom: 1.6rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
  vertical-align: baseline;
}
.about__bottom { margin-top: 6rem; display: grid; gap: 4rem; }
.about__body p + p { margin-top: 1.8rem; }

.about__links-title { margin-bottom: 1.6rem; opacity: 0.5; }

.about__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* the Kapcsolat row is a <button>, which won't stretch on its own */
  padding: 1.4rem 0;
  overflow: hidden;
  text-align: left;
}
.about__item { border-top: 1px solid var(--fg); }
.about__item:last-child { border-bottom: 1px solid var(--fg); }
.about__link-bg {
  position: absolute;
  inset: 0;
  background: var(--bg-invert);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}
.about__link-label,
.about__link-arrow { position: relative; z-index: 2; transition: color 0.5s var(--ease); }
.about__link-arrow svg { width: 1.2rem; height: 1.2rem; }

@media (pointer: fine) {
  .about__link:hover .about__link-bg { transform: scaleY(1); }
  .about__link:hover .about__link-label,
  .about__link:hover .about__link-arrow { color: var(--fg-invert); }
}

@media (min-width: 967px) {
  .about__lead sup {
    display: inline-block;
    margin: -4em 8rem 0 0;
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
  .about__bottom {
    margin-top: 16rem;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
  }
  .about__body { font-size: 2rem; line-height: 2.4rem; max-width: 52rem; }
}

/* 5.3 Standalone media ---------------------------------------------------- */

@media (pointer: fine) {
  .standalone a:hover .reveal img,
  [data-component='standaloneMedia'] a:hover .reveal img { transform: scale(1.04); }
}

.standalone__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

/* 5.4 "More Monoliths" — fixed trio --------------------------------------- */

.gallery__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.gallery__count { display: flex; gap: 0.4rem; }
.gallery__count b { font-weight: 500; }

/* Mobile: the wide piece spans the row, the two smaller ones sit beneath it. */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.4rem;
  row-gap: 3.5rem;
  align-items: end;
}
.gallery__item:first-child { grid-column: 1 / -1; }

.gallery__meta {
  margin-top: 1.2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 967px) {
  .gallery__top { margin-bottom: 6rem; }
  /* One wide column, two narrow — captions bottom-align, image tops stagger
     because each keeps its own aspect ratio. */
  .gallery__grid {
    grid-template-columns: 1.45fr 1fr 1fr;
    column-gap: 2.2rem;
  }
  .gallery__item:first-child { grid-column: auto; }
}

@media (pointer: fine) {
  .gallery__item a:hover .reveal img { transform: scale(1.04); }
}

/* 6. PRODUCTS (LIST) TEMPLATE ============================================== */

.grid-header { padding-top: 6rem; }
@media (min-width: 967px) { .grid-header { padding-top: 8.5rem; } }

.grid-header__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.grid-header__titles { display: flex; align-items: baseline; gap: 1.2rem; }
.grid-header__count { opacity: 0.5; }

.grid-header__controls {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-left: auto;
}

.gridslider { display: none; align-items: center; gap: 1.2rem; }
@media (min-width: 967px) { .gridslider { display: flex; } }
.gridslider__label { opacity: 0.5; }
.gridslider input {
  -webkit-appearance: none;
  appearance: none;
  width: 12rem;
  height: 1px;
  background: var(--fg);
  outline: none;
  cursor: ew-resize;
}
.gridslider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--fg);
}
.gridslider input::-moz-range-thumb {
  width: 1rem; height: 1rem; border: 0;
  border-radius: 50%;
  background: var(--fg);
}

/* 6.1 Image grid ---------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: 1.4rem;
  row-gap: 3.5rem;
}
@media (min-width: 967px) {
  .product-grid { column-gap: 2.2rem; row-gap: 6.4rem; }
}

.product-card__category { opacity: 0.5; margin-bottom: 0.5rem; }
/* Titles can run long — they wrap left-aligned rather than truncating. */
.product-card__title {
  margin-top: 0.8rem;
  font-weight: 500;
  text-align: left;
  text-wrap: pretty;
  hyphens: auto;
}

@media (pointer: fine) {
  .product-card a:hover .reveal img { transform: scale(1.04); }
}


/* 7. PRODUCT (ITEM) TEMPLATE =============================================== */

.hero__header {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  row-gap: 1.2rem;
  margin-top: 1.4rem;
}
.hero__model,
.hero__title { font-size: 2.6rem; line-height: 1; font-weight: 500; }
.hero__title { text-align: right; }
.hero__counter { opacity: 0.5; }
.hero__arrows { display: flex; gap: 1.2rem; justify-content: flex-end; }
.hero__arrows button { width: 2.4rem; height: 2.4rem; opacity: 0.5; transition: opacity 0.3s; }
.hero__arrows button:hover { opacity: 1; }
.hero__arrows svg { width: 100%; height: 100%; }

@media (min-width: 967px) {
  .hero__header { grid-template-columns: 0.35fr 0.35fr 0.3fr; row-gap: 0; margin-top: 1rem; }
  .hero__model,
  .hero__title { font-size: 4.8rem; line-height: 6rem; }
  .hero__title { text-align: left; }
  .hero__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
}

.hero__media { margin-top: 2.4rem; }
.hero__media .reveal { background: var(--image-bg); }
.hero__stage { position: relative; }
.hero__stage img { transition: opacity 0.5s var(--ease); }
.hero__stage.is-swapping img { opacity: 0; }

@media (min-width: 967px) {
  .hero__media { margin-top: 4rem; max-height: 78vh; }
  .hero__media .reveal { aspect-ratio: auto; height: 78vh; }
  .hero__media img { object-fit: contain; }
}

.hero__content { margin-top: 4rem; }
.hero__content-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.6rem;
  opacity: 0.5;
}
.hero__grid { display: grid; gap: 4rem; }
@media (min-width: 967px) {
  .hero__content { margin-top: 12rem; }
  .hero__grid { grid-template-columns: 1fr 0.42fr; gap: 8rem; }
}

.spec-label { margin-bottom: 1.6rem; opacity: 0.5; }
.product-desc { font-size: 1.6rem; line-height: 1.8rem; margin-bottom: 4rem; }
@media (min-width: 967px) {
  .product-desc { font-size: 3.6rem; line-height: 3.9rem; margin-bottom: 9rem; }
}

.spec {
  position: relative;
  padding: 2.3rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
@media (min-width: 967px) { .spec { padding: 2.7rem 0; } }
.spec::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
}
.is-inview .spec::before { transform: scaleX(1); }
.spec:nth-child(2)::before { transition-delay: 0.05s; }
.spec:nth-child(3)::before { transition-delay: 0.1s; }
.spec:nth-child(4)::before { transition-delay: 0.15s; }
.spec:nth-child(5)::before { transition-delay: 0.2s; }
.spec:nth-child(6)::before { transition-delay: 0.25s; }
.spec:nth-child(7)::before { transition-delay: 0.3s; }

.spec__type { position: absolute; left: 0; top: 1.3rem; opacity: 0.5; }
.spec__value { font-size: 2.2rem; line-height: 1.1; text-align: right; }
.spec__materials { display: flex; flex-direction: column; align-items: flex-end; }
.spec__materials button { font-size: 2.2rem; line-height: 1.1; opacity: 0.2; transition: opacity 0.3s; }
.spec__materials button.is-active { opacity: 1; }
.spec__materials button:hover { opacity: 0.6; }
.spec__materials button.is-active:hover { opacity: 1; }

@media (min-width: 967px) {
  .spec__value,
  .spec__materials button { font-size: 3.2rem; line-height: 3.2rem; }
}

/* 7.1 Right rail ---------------------------------------------------------- */

.hero__rail-title { font-size: 2.2rem; line-height: 1.1; margin-bottom: 3rem; }
@media (min-width: 967px) { .hero__rail-title { font-size: 3.2rem; } }

.detailview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.detailview__icon {
  width: 3.6rem; height: 3.6rem;
  border: 1px solid var(--fg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.detailview__icon svg { width: 1.2rem; height: 1.2rem; }
@media (pointer: fine) {
  .detailview:hover .detailview__icon { background: var(--fg); color: var(--bg); }
}

/* Material dropdown */
.dropdown { position: relative; }
.dropdown__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: 5rem;
  padding: 0 1.6rem;
  background: var(--dropdown-bg);
  color: var(--dropdown-fg);
  text-transform: uppercase;
}
.dropdown__main i { font-style: normal; transition: transform 0.4s var(--ease); }
.dropdown.is-open .dropdown__main i { transform: rotate(180deg); }

.dropdown__list {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--dropdown-bg);
  color: var(--dropdown-fg);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s var(--ease);
  z-index: 20;
}
.dropdown.is-open .dropdown__list { max-height: 40rem; }
.dropdown__list button {
  display: flex;
  gap: 1.2rem;
  width: 100%;
  padding: 1.4rem 1.6rem;
  text-align: left;
  opacity: 0.6;
  transition: opacity 0.25s;
}
.dropdown__list button:hover,
.dropdown__list button.is-active { opacity: 1; }
.dropdown__list button span:first-child { opacity: 0.6; }

.hero__inquire { margin-top: 1.4rem; }

/* 7.2 Production block ---------------------------------------------------- */

.production__title { margin-bottom: 3rem; }
.production__images { display: grid; gap: 1.4rem; }
@media (min-width: 967px) {
  .production__title { margin-bottom: 6rem; }
  .production__images { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
}
.production__text {
  margin-top: 3rem;
  max-width: 62rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
}
@media (min-width: 967px) { .production__text { margin-top: 4rem; font-size: 2rem; line-height: 2.6rem; } }

/* 7.1b Lead-capture box --------------------------------------------------- */

/* Sits under the Érdeklődöm button; the only tinted panel on the page, so it
   reads as an offer rather than as part of the specification. */
.leadbox {
  margin-top: 3.2rem;
  padding: 2.4rem 2rem;
  background: var(--index-text-view);
  border-top: 1px solid var(--fg);
}
@media (min-width: 967px) { .leadbox { margin-top: 4rem; padding: 3.2rem 2.4rem; } }

.leadbox__title {
  font-size: 1.8rem;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
@media (min-width: 967px) { .leadbox__title { font-size: 2.2rem; } }

.leadbox__text {
  font-size: 1.4rem;
  line-height: 1.9rem;
  margin-bottom: 2rem;
  opacity: 0.75;
}

/* The CRM form is a third-party iframe. form_embed.js (enqueued from
   functions.php when a LeadConnector form is set) resizes it to its own
   content, so the box has no inner scrollbar; min-height is just a pre-script
   floor so the layout doesn't jump while the resizer loads. */
.leadbox__embed iframe {
  display: block;
  width: 100%;
  min-height: 12rem;
  border: 0;
}

/* 7.2b Work gallery -------------------------------------------------------- */

.workgallery__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.workgallery__count { display: flex; gap: 0.4rem; }
.workgallery__count b { font-weight: 500; }
@media (min-width: 967px) { .workgallery__top { margin-bottom: 6rem; } }

/* Masonry-ish: two up on mobile, three on desktop, each keeping its own ratio */
.workgallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.4rem;
  row-gap: 3.5rem;
  align-items: start;
}
@media (min-width: 967px) {
  .workgallery { grid-template-columns: repeat(3, 1fr); column-gap: 2.2rem; row-gap: 6.4rem; }
  /* Only a landscape lead image earns the full width — a portrait one spanning
     the column would render taller than the viewport. */
  .workgallery__item--wide { grid-column: 1 / -1; }
}

/* Hard ceiling so no tile can run away, whatever the source proportions. */
.workgallery .reveal { max-height: 80vh; }

.workgallery__item { margin: 0; }
.workgallery__btn { display: block; width: 100%; text-align: left; }

@media (pointer: fine) {
  .workgallery__btn:hover .reveal img { transform: scale(1.03); }
}

/* 7.3 Infinite related strip ---------------------------------------------- */

.related__titles {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.related__track {
  display: flex;
  gap: 2.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 1rem;
  cursor: grab;
}
.related__track::-webkit-scrollbar { display: none; }
.related__track.is-dragging { cursor: grabbing; }
.related__item { flex: 0 0 auto; width: 58vw; }
@media (min-width: 967px) { .related__item { width: 24vw; } }
/* Uniform crop so the caption baselines line up across the strip */
.related__item .reveal { aspect-ratio: 4 / 5 !important; }
.related__meta { margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; }

@media (pointer: fine) {
  .related__item a:hover .reveal img { transform: scale(1.04); }
}

/* 7.4 Next item ----------------------------------------------------------- */

.nextitem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  height: 16.9rem;
  border-top: 1px solid var(--fg);
  position: relative;
  overflow: hidden;
  /* Keeps clear of the black footer — without it the hover fill and the
     footer merge into one dark block. */
  margin-bottom: 8rem;
}
@media (min-width: 967px) { .nextitem { height: 41.5rem; margin-bottom: 16rem; } }
.nextitem__label { font-size: 2.6rem; line-height: 1; }
@media (min-width: 967px) { .nextitem__label { font-size: 8.5rem; } }
.nextitem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-invert);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
}
.nextitem > * { position: relative; z-index: 2; transition: color 0.6s var(--ease); }
@media (pointer: fine) {
  .nextitem:hover::after { transform: scaleY(1); }
  .nextitem:hover > * { color: var(--fg-invert); }
}

/* 7.5 Lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox__close {
  position: absolute;
  top: var(--page-gutter);
  right: var(--page-gutter);
}

/* 8. FOOTER / UTILITIES ==================================================== */

/* 8.1 Top status bar ------------------------------------------------------ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 105;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: var(--topbar-h);
  padding: 0 var(--page-gutter);
  background: var(--bg);
  color: var(--fg);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
/* Flips while the dark footer is behind it */
.topbar.is-inverted {
  background: var(--bg-invert);
  color: var(--fg-invert);
}

.topbar__status {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  white-space: nowrap;
}
.topbar__brand {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: opacity 0.3s;
}
a.topbar__brand:hover { opacity: 0.6; }
.topbar__time { opacity: 0.45; font-variant-numeric: tabular-nums; }
.topbar__scroll { font-variant-numeric: tabular-nums; }

@media (min-width: 967px) {
  .topbar { gap: 2.4rem; }
  .topbar__status { gap: 2.4rem; }
  .topbar__brand { margin-right: 4rem; }
}

/* Narrow screens: drop the location, then compact the nav so the three
   status values always stay on one line. */
@media (max-width: 560px) {
  .topbar { font-size: 1.15rem; line-height: 1.15rem; gap: 1.2rem; }
  .topbar__loc { display: none; }
  .topbar__status { gap: 1.2rem; }
}

.page-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
@media (min-width: 967px) { .page-nav { gap: 2.5rem; } }

.page-nav__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s;
}
.page-nav__num {
  font-family: 'ABC Monument Grotesk Mono', 'Roboto Mono', ui-monospace, monospace;
  opacity: 0.5;
}
.page-nav__item[aria-current='page'],
.page-nav__item[aria-expanded='true'] { opacity: 1; }
.page-nav__item:not([aria-current='page']) { opacity: 0.55; }
.page-nav__item:hover { opacity: 1; }

@media (max-width: 560px) {
  .page-nav__num { display: none; }
}

/* Very narrow: the status readout wins the remaining space */
@media (max-width: 380px) {
  .topbar { font-size: 1.05rem; line-height: 1.05rem; gap: 0.9rem; }
  .topbar__status { gap: 0.9rem; }
  .page-nav { gap: 0.9rem; }
}

/* 8.2 Information drawer -------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 107;
  pointer-events: none;
}
.drawer.is-open { pointer-events: auto; }

.drawer__panel {
  position: relative;
  width: 100%;
  color: var(--fg-invert);
  padding: var(--page-gutter);
}
/* The dark plate wipes down from the top edge */
.drawer__bg {
  position: absolute;
  inset: 0;
  background: var(--bg-invert);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.7s var(--ease);
}
.drawer.is-open .drawer__bg { transform: scaleY(1); }

.drawer__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  min-height: 34rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.drawer.is-open .drawer__content { opacity: 1; transition-delay: 0.25s; }
@media (min-width: 967px) { .drawer__content { min-height: 48rem; } }

.drawer__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}

.drawer__top { display: grid; gap: 3.2rem; }
@media (min-width: 967px) {
  .drawer__top { grid-template-columns: 44.9rem 1fr; gap: 10.6rem; }
}

.drawer__label { opacity: 0.5; margin-bottom: 2rem; }
.drawer__about { font-size: 1.6rem; line-height: 2.2rem; max-width: 46rem; }
@media (min-width: 967px) { .drawer__about { font-size: 1.8rem; line-height: 2.5rem; } }

/* Link out of the drawer to the enquiry page */
.drawer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.4rem;
  padding: 1.2rem 1.8rem;
  border: 1px solid var(--fg-invert);
  text-transform: uppercase;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.drawer__cta svg { width: 1.2rem; height: 1.2rem; transition: transform 0.5s var(--ease); }

@media (pointer: fine) {
  .drawer__cta:hover { background: var(--fg-invert); color: var(--bg-invert); }
  .drawer__cta:hover svg { transform: scale(0.8) translate(10%, -10%); }
}

.drawer__finishes-label { opacity: 0.5; margin-bottom: 0.5rem; }
.drawer__finishes li { line-height: 2.2rem; }

.drawer__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  align-items: end;
}
@media (min-width: 967px) {
  .drawer__bottom {
    grid-template-columns: 24rem 22rem 1fr 1fr;
    gap: 2rem;
    /* clear the product image pinned to the bottom-right */
    padding-right: 23.5rem;
  }
}
.drawer__bottom p { white-space: pre-line; }
.drawer__bottom a { text-decoration: none; }
.drawer__bottom a:hover { opacity: 0.6; }

.drawer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
}
@media (min-width: 967px) { .drawer__social { justify-self: end; } }
.drawer__social svg { width: 0.8rem; height: 0.8rem; }

/* Product image floating at the right of the panel */
.drawer__image {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20.5rem;
  aspect-ratio: 410 / 557;
  background: var(--image-bg);
  overflow: hidden;
}
@media (min-width: 967px) { .drawer__image { display: block; } }
.drawer__image img { width: 100%; height: 100%; object-fit: cover; }

.drawer__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
.drawer.is-open .drawer__overlay { opacity: 1; visibility: visible; }

/* Opening the drawer pushes the bar and the page down, as on the original.
   --drawer-h is measured and set by site.js. */
.topbar,
main,
.sitefooter {
  transition: transform 0.7s var(--ease);
}
body.drawer-open .topbar,
body.drawer-open main,
body.drawer-open .sitefooter {
  transform: translate3d(0, var(--drawer-h, 0px), 0);
}
body.drawer-open { overflow: hidden; }

/* 8.3 Site footer --------------------------------------------------------- */

.sitefooter {
  background: var(--bg-invert);
  color: var(--fg-invert);
}

/* Full viewport height: invitation at the top, details pinned to the bottom,
   with the void between them doing the work — same rhythm as the drawer. */
.sitefooter__inner {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 8rem;
  padding-bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8rem;
}
@media (min-width: 967px) {
  .sitefooter__inner { padding-top: 14rem; padding-bottom: 3.2rem; }
}

.sitefooter__top { display: grid; gap: 4rem; }
@media (min-width: 967px) {
  .sitefooter__top { grid-template-columns: 1fr auto; align-items: start; gap: 6rem; }
}

.sitefooter__label { opacity: 0.5; margin-bottom: 1.6rem; }

.sitefooter__mail {
  display: inline-block;
  font-size: 2.6rem;
  line-height: 1.15;
  font-weight: 500;
  word-break: break-word;
}
.sitefooter__mail span {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.6s var(--ease);
}
@media (min-width: 967px) {
  .sitefooter__mail { font-size: 5.9rem; line-height: 1.05; }
}
@media (pointer: fine) {
  .sitefooter__mail:hover span { background-size: 100% 1px; }
}

.sitefooter__col-label { opacity: 0.5; margin-bottom: 1.2rem; }

.sitefooter__nav { display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 967px) { .sitefooter__navblock { text-align: right; } }

.sitefooter__navlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.sitefooter__navlink:hover,
.sitefooter__navlink[aria-current='page'] { opacity: 1; }
.sitefooter__num {
  font-family: 'ABC Monument Grotesk Mono', 'Roboto Mono', ui-monospace, monospace;
  opacity: 0.5;
}

.sitefooter__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem 2.4rem;
}
@media (min-width: 967px) {
  .sitefooter__cols { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.sitefooter__cols p { white-space: pre-line; }
.sitefooter__cols a { transition: opacity 0.3s; }
.sitefooter__cols a:hover { opacity: 0.6; }

.sitefooter__social { display: inline-flex; align-items: center; gap: 0.4rem; }
.sitefooter__social svg { width: 0.8rem; height: 0.8rem; }

.sitefooter__legal {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.2rem 2.4rem;
  opacity: 0.5;
}
.sitefooter__legal button { transition: opacity 0.3s; }
.sitefooter__legal button:hover { opacity: 0.6; }
@media (min-width: 967px) { .sitefooter__legal { margin-top: 6rem; } }

.page-fade { opacity: 0; transition: opacity 0.6s var(--ease); }
.page-fade.is-ready { opacity: 1; }

/* article */

article {
    padding: 21px;
}

article .kf-page__content p {
    margin: 20px 0;
}

/* 9. CONTACT TEMPLATE ======================================================= */

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

.section[data-component='contactIntro'],
.section[data-component='thanksIntro'] { padding-top: 6rem; }
@media (min-width: 967px) {
  .section[data-component='contactIntro'],
  .section[data-component='thanksIntro'] { padding-top: 9.6rem; }
}

.contact__intro { display: flex; flex-direction: column; gap: 3.2rem; }

.contact__title {
  font-weight: 300;
  font-size: clamp(4rem, 6vw, 8.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: pretty;
}

.contact__lead {
  font-size: 1.9rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
  opacity: 0.7;
  max-width: 48ch;
  text-wrap: pretty;
}

/* 9.2 Form + aside grid ------------------------------------------------------ */

.contact__grid { display: flex; flex-direction: column; gap: 6rem; padding-top: 6rem; }
@media (min-width: 967px) {
  .contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 9.6rem;
    padding-top: 8.8rem;
    align-items: start;
  }
}

.contact__form { display: flex; flex-direction: column; gap: 4rem; }

.contact__form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--fg);
  padding-top: 1.4rem;
}
.contact__form-step { opacity: 0.5; }

.contact__form-note { font-size: 1.3rem; line-height: 1.5; opacity: 0.6; max-width: 44rem; }

/* 9.3 Forminator field restyling -------------------------------------------
   The seed form ships with 'form-style' => 'none', so Forminator enqueues no
   default CSS — every rule below targets its (stable) markup classes from
   scratch.

   Scoped to both form containers: the contact page and the lead widget on a
   work page, which takes the same shortcode. :is() keeps each selector's
   specificity at one class, which the column rules below depend on. */

:is(.contact__form, .leadbox__embed) .forminator-row { display: flex; flex-wrap: wrap; gap: 3.6rem; }
:is(.contact__form, .leadbox__embed) .forminator-row + .forminator-row { margin-top: 3.6rem; }
:is(.contact__form, .leadbox__embed) .forminator-row > div { min-width: 0; }

/* Widths follow Forminator's own col-N classes (set via 'cols' in the seed
   fields), so a col-12 field (email, message) breaks onto its own line next
   to the col-6 pair (name, phone).

   The long selectors are deliberate. Forminator's grid stylesheet — the one
   sheet 'form-style' => 'none' still leaves enqueued — carries
   `.forminator-ui.forminator-custom-form:not(…)[data-grid=open] .forminator-col
   { flex: 1; padding: 0 15px }` above 783px. At five classes that outranks a
   plain one-class `.forminator-col-6` rule of our own, and since this
   stylesheet loads first, a tie would lose too; matching on each column's own two classes
   takes it to six. Weaken these and all four fields collapse onto one line
   on desktop while mobile still looks right. */
:is(.contact__form, .leadbox__embed) .forminator-ui.forminator-custom-form .forminator-row .forminator-col.forminator-col-12 { flex: 1 1 100%; padding: 0; }
:is(.contact__form, .leadbox__embed) .forminator-ui.forminator-custom-form .forminator-row .forminator-col.forminator-col-6 { flex: 1 1 22rem; padding: 0; }
@media (max-width: 640px) {
  :is(.contact__form, .leadbox__embed) .forminator-ui.forminator-custom-form .forminator-row .forminator-col.forminator-col-6 { flex: 1 1 100%; }
}

/* Same contest for the submit row: left alone, the button's column stretches
   to the full width of the form. */
:is(.contact__form, .leadbox__embed) .forminator-ui.forminator-custom-form .forminator-row.forminator-row-last .forminator-col { flex: 0 0 auto; padding: 0; }

:is(.contact__form, .leadbox__embed) .forminator-field { display: flex; flex-direction: column; gap: 1rem; }

:is(.contact__form, .leadbox__embed) .forminator-label {
  font-family: 'ABC Monument Grotesk Mono', 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}
:is(.contact__form, .leadbox__embed) .forminator-required { opacity: 0.7; }

:is(.contact__form, .leadbox__embed) .forminator-input,
:is(.contact__form, .leadbox__embed) .forminator-textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(40, 40, 42, 0.18);
  padding: 0 0 1.2rem;
  font-family: inherit;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: border-color 0.16s ease;
}
:is(.contact__form, .leadbox__embed) .forminator-textarea { line-height: 1.45; resize: vertical; min-height: 14rem; }
:is(.contact__form, .leadbox__embed) .forminator-input:focus,
:is(.contact__form, .leadbox__embed) .forminator-textarea:focus { outline: none; border-bottom-color: var(--fg); }
:is(.contact__form, .leadbox__embed) ::placeholder { color: rgba(40, 40, 42, 0.4); }

:is(.contact__form, .leadbox__embed) .forminator-description { font-size: 1.1rem; opacity: 0.5; margin-top: 0.4rem; }

:is(.contact__form, .leadbox__embed) .forminator-row-last { align-items: center; }

:is(.contact__form, .leadbox__embed) .forminator-button-submit {
  background: var(--fg);
  color: var(--bg);
  border: 0;
  padding: 1.8rem 3.4rem;
  cursor: pointer;
  font-family: 'ABC Monument Grotesk Mono', 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.16s ease;
}
:is(.contact__form, .leadbox__embed) .forminator-button-submit:hover { opacity: 0.82; }

:is(.contact__form, .leadbox__embed) .forminator-response-message { font-size: 1.3rem; }
:is(.contact__form, .leadbox__embed) .forminator-response-message.forminator-success { padding: 2rem 0; max-width: 44rem; }

/* 9.4 Aside ------------------------------------------------------------------ */

.contact__aside { display: flex; flex-direction: column; gap: 4rem; }

.contact__data { display: flex; flex-direction: column; }
.contact__data-label { border-top: 1px solid var(--fg); padding: 1.4rem 0 2rem; }

.contact__data-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(40, 40, 42, 0.18);
}
.contact__data-row:last-child { border-bottom: 1px solid rgba(40, 40, 42, 0.18); }
.contact__data-row span:last-child,
.contact__data-row a { font-size: 1.4rem; line-height: 1.4; text-align: right; }
.contact__data-row a:hover { opacity: 0.6; }

.contact__finishes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact__finishes li { font-size: 1.4rem; line-height: 1.4; opacity: 0.75; }

.contact__image { margin-top: 0.4rem; }

/* 10. THANK-YOU TEMPLATE ==================================================== */

/* Reuses the contact template's intro, grid, aside and data rows (§9), and the
   gallery grid (§5) for the works trio; only the download card and the studio
   line below are this page's own. */

.thanks__main { display: flex; flex-direction: column; gap: 4rem; }

/* 10.1 Download card ------------------------------------------------------- */

/* The one tinted panel on the page, so the download reads as the point of it —
   same treatment as the lead box on a work page. */
.thanks__download {
  background: var(--index-text-view);
  border-top: 1px solid var(--fg);
  padding: 2.4rem 2rem;
}
@media (min-width: 967px) { .thanks__download { padding: 3.2rem 2.8rem; } }

.thanks__download-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-bottom: 2.4rem;
}
.thanks__download-meta { opacity: 0.5; }

.thanks__download-btn { margin-top: 0.8rem; max-width: 34rem; }

.thanks__note {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  opacity: 0.6;
  max-width: 44ch;
}

/* 10.2 Editable region ----------------------------------------------------- */

.thanks__content p { font-size: 1.6rem; line-height: 1.6; opacity: 0.75; max-width: 60ch; }
.thanks__content p + p { margin-top: 1.6rem; }

/* 10.3 Studio line + aside -------------------------------------------------- */

.thanks__about-text {
  font-size: 1.6rem;
  line-height: 1.55;
  opacity: 0.75;
  max-width: 52ch;
  text-wrap: pretty;
}

.thanks__next { display: flex; flex-direction: column; gap: 2rem; }
.thanks__next-text { font-size: 1.4rem; line-height: 1.5; opacity: 0.75; }