/* Junk Journal Workshop · jurnalehandmade.com
   Mobile-first. Palette limited to the five ad colours below. */

:root {
  --brick: #9A5544;
  --cream: #F3E9DD;
  --ink: #3A2A22;
  --muted: #7A665B;
  --white: #FFFFFF;
  --beige: #EEE1D1;                    /* hero cover, a touch deeper than cream */

  --brick-deep: #7f4536;               /* brick darkened toward ink, for hover/press */
  --brick-soft: rgba(154, 85, 68, 0.14);
  --ink-line: rgba(58, 42, 34, 0.12);
  --shadow-sm: 0 1px 2px rgba(58, 42, 34, 0.06), 0 4px 12px rgba(58, 42, 34, 0.06);
  --shadow: 0 2px 4px rgba(58, 42, 34, 0.06), 0 12px 32px rgba(58, 42, 34, 0.10);
  --shadow-btn: 0 2px 0 rgba(58, 42, 34, 0.18), 0 8px 20px rgba(154, 85, 68, 0.28);

  --serif: "Old Standard TT", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1160px;
  --header-h: 52px;
  --bar-h: 76px;
  --radius: 14px;
  --radius-lg: 22px;
  --section-y: clamp(56px, 11vw, 112px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* torn paper edge (mask) */
  --torn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'><path d='M0 18V9l9-3 11 4 13-6 12 5 10-3 13 7 12-5 11 3 14-6 9 4 12-2 11 6 13-5 12 4 10-6 12 5 13-3 11 5 12-4 10 3 11-2v9z'/></svg>");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;          /* 18px */
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--cream);
  /* faint paper grain */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .23  0 0 0 0 .16  0 0 0 0 .13  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

/* ---------- header ---------- */
.site-header {
  position: relative;
  z-index: 3;
  border-bottom: 1px dashed rgba(154, 85, 68, 0.35);
  background: var(--cream);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark picture { display: flex; }
.wordmark img { width: 76px; height: 37px; }

/* ---------- buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  --btn-bg: var(--brick);
  --btn-fg: var(--white);
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--brick);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn .ico { width: 20px; height: 20px; flex: none; }

.btn--secondary {
  --btn-bg: var(--white);
  --btn-fg: var(--brick);
  box-shadow: var(--shadow-sm);
}

/* third tier: outlined, no fill, no lift — deliberately quieter than the
   WhatsApp buttons so "Rezervă-ți locul" stays the one action on the page. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--brick-deep);
  box-shadow: none;
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 3px 0 rgba(58, 42, 34, 0.18), 0 14px 28px rgba(154, 85, 68, 0.32); }
  .btn--primary:hover { --btn-bg: var(--brick-deep); border-color: var(--brick-deep); }
  .btn--secondary:hover { --btn-bg: var(--cream); box-shadow: var(--shadow); }
  .btn--outline:hover { --btn-bg: var(--brick); --btn-fg: var(--white); box-shadow: var(--shadow-sm); }
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(58, 42, 34, 0), 0 2px 6px rgba(154, 85, 68, 0.2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--brick-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link::after { content: "→"; text-decoration: none; transition: transform 160ms var(--ease); }
.text-link:hover::after { transform: translateX(3px); }
.text-link--back::after { content: none; }
.text-link--back::before { content: "←"; transition: transform 160ms var(--ease); }
.text-link--back:hover::before { transform: translateX(-3px); }

/* ---------- hero (cover) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(10px, 2.2svh, 34px) clamp(16px, 3.2svh, 44px);
  background-color: var(--beige);
}
/* light pooling over the table, warmth settling at the bottom */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(118% 76% at 50% 14%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(92% 58% at 50% 106%, rgba(154, 85, 68, 0.11) 0%, rgba(154, 85, 68, 0) 72%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* journals in white frames, laid in a row like the Etsy cover: straight, spaced, airy */
.shelf {
  --item: clamp(72px, 22vw, 112px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(7px, 1.8vw, 20px);
  max-width: 100%;
}
.shelf__item {
  flex: 0 0 auto;
  width: var(--item);
  padding: 5px;
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(58, 42, 34, 0.07), 0 8px 18px rgba(58, 42, 34, 0.10);
}
.shelf__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  background: var(--cream);
}
.shelf__item:nth-child(1) { width: calc(var(--item) * 0.90); }
.shelf__item:nth-child(3) { width: calc(var(--item) * 1.10); }
.shelf__item:nth-child(5) { width: calc(var(--item) * 0.90); }
@media (max-width: 599px) {
  /* phone: a compact strip of three, the middle one leading */
  .shelf__item:nth-child(n + 4) { display: none; }
  .shelf__item:nth-child(2) { width: calc(var(--item) * 1.08); }
  .shelf__item:nth-child(3) { width: calc(var(--item) * 0.90); }
}

/* the artist's logo: teal watercolour stroke with the script wordmark.
   The svh cap keeps the whole cover inside a short viewport (.hero clips). */
.brand {
  display: block;
  width: min(300px, 56vw, 26svh);
  margin-top: clamp(6px, 1.4svh, 18px);
}
.brand picture { display: block; }
.brand__logo { display: block; width: 100%; height: auto; }

/* white rounded label holding the title */
.hero__plate {
  margin-top: clamp(6px, 1.4svh, 18px);
  max-width: 100%;
  padding: clamp(11px, 2svh, 20px) clamp(18px, 5.2vw, 44px) clamp(13px, 2.3svh, 23px);
  background: var(--white);
  border-radius: clamp(18px, 4.6vw, 34px);
  box-shadow: 0 2px 4px rgba(58, 42, 34, 0.05), 0 14px 34px rgba(58, 42, 34, 0.11);
}
.hero__kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brick);
}
.hero__title {
  margin-top: 6px;
  font-size: clamp(1.85rem, min(9vw, 5.2svh), 3.9rem);
  line-height: 1.04;
  color: var(--ink);
}

.hero__sub {
  margin-top: clamp(8px, 1.5svh, 18px);
  max-width: 38ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(8px, 1.6svh, 22px);
  max-width: 36rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(154, 85, 68, 0.22);
  box-shadow: 0 1px 2px rgba(58, 42, 34, 0.05);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.chip__icon { font-size: 0.95em; line-height: 1; }
@media (max-width: 420px) {
  .chips { gap: 5px; }
  .chip { padding: 3px 8px 3px 6px; gap: 4px; font-size: 0.875rem; }

  /* both buttons share one row, so they stay inside the first screen at 360x640 */
  .hero .actions { gap: 10px; }
  .hero .btn { padding: 10px; font-size: 0.9375rem; gap: 6px; }
  .hero .btn .ico { width: 18px; height: 18px; }
  .hero .btn--primary { flex-grow: 1; }
}

.hero .actions {
  justify-content: center;
  margin-top: clamp(14px, 2.4svh, 28px);
  width: 100%;
  max-width: 30rem;
}
.hero .btn--primary { flex-grow: 1.25; }

.hero__note {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- sections ---------- */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-title {
  font-size: clamp(2rem, 7.4vw, 3.25rem);
  color: var(--ink);
  max-width: 18ch;
}
.section-title::after {
  /* stitched rule */
  content: "";
  display: block;
  width: 72px;
  height: 0;
  margin-top: 16px;
  border-top: 3px dashed var(--brick);
}

.lead {
  margin-top: 20px;
  max-width: 40rem;
  font-size: 1.1875rem;
}

/* torn-paper bands */
.band { --band: var(--white); background: var(--band); }
.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--band);
  -webkit-mask: var(--torn) repeat-x 0 0 / 240px 18px;
  mask: var(--torn) repeat-x 0 0 / 240px 18px;
  pointer-events: none;
}
.band::before { top: -17px; }
.band::after { bottom: -17px; transform: scaleY(-1); }
.band--brick { --band: var(--brick); color: var(--white); }
.band--paper { --band: var(--white); }

/* 2 · program */
.program { display: grid; gap: 32px; }
.program__list {
  list-style: none;
  counter-reset: pas;
  display: grid;
  gap: 4px;
}
.program__list li {
  counter-increment: pas;
  position: relative;
  padding: 18px 0 18px 64px;
  border-bottom: 1px dashed rgba(154, 85, 68, 0.3);
}
.program__list li::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--brick);
}
.note-card {
  position: relative;
  margin-top: 28px;
  padding: 26px 24px;
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  box-shadow: var(--shadow);
  outline: 1.5px dashed rgba(154, 85, 68, 0.4);
  outline-offset: -9px;
  font-size: 1.1875rem;
}
.note-card::before {
  /* washi tape */
  content: "";
  position: absolute;
  top: -12px;
  left: 28px;
  width: 92px;
  height: 24px;
  background: rgba(154, 85, 68, 0.28);
  transform: rotate(-4deg);
  border-radius: 2px;
}

/* 3 · inclus (brick band) */
.inclus .section-title { color: var(--white); }
.inclus .section-title::after { border-top-color: var(--cream); }
.inclus__list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
.inclus__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(58, 42, 34, 0.16);
  border: 1px dashed rgba(243, 233, 221, 0.45);
  font-size: 1.1875rem;
  line-height: 1.5;
}
.inclus__mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream);
  position: relative;
  margin-top: -2px;
}
.inclus__mark::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 7px;
  width: 9px;
  height: 16px;
  border: solid var(--brick);
  border-width: 0 3px 3px 0;
  transform: rotate(42deg);
}

/* 4 · atelier (video colaj) */
.section--atelier { padding-top: calc(var(--section-y) + 12px); }
.atelier { display: grid; gap: 30px; }
.atelier .lead { margin-top: 18px; }

/* phone-shaped card around the vertical video */
.atelier__frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 8px;
  background: var(--white);
  border-radius: calc(var(--radius-lg) + 8px);
  box-shadow: var(--shadow);
}
.atelier__frame::before {
  /* washi tape */
  content: "";
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  width: 104px;
  height: 24px;
  margin-left: -52px;
  background: rgba(154, 85, 68, 0.28);
  transform: rotate(-2.5deg);
  border-radius: 2px;
}
/* without JS the source-less video is replaced by the <noscript> copy */
html:not(.js) #atelier-video { display: none; }
.atelier__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 960;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--cream);
}

/* two atelier prints under the video: Dristor + the older workshop table.
   Each keeps its own aspect ratio, like prints laid out on a desk. */
.atelier-photos {
  display: grid;
  gap: 34px;
  margin-top: 40px;
  max-width: 900px;
}

.photo-card {
  position: relative;
  padding: 10px;
  background: var(--white);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.photo-card::before {
  /* washi tape */
  content: "";
  position: absolute;
  z-index: 1;
  top: -12px;
  width: 96px;
  height: 24px;
  background: rgba(154, 85, 68, 0.28);
  border-radius: 2px;
}
.photo-card img {
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--cream);
}

.photo-card--dristor { rotate: -0.7deg; }
.photo-card--dristor::before { left: 16%; transform: rotate(-3deg); }
.photo-card--dristor img { aspect-ratio: 510 / 380; }

.photo-card--masa { rotate: 0.6deg; }
.photo-card--masa::before { right: 18%; transform: rotate(3deg); }
.photo-card--masa img { aspect-ratio: 720 / 375; }

/* 5 · steps */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
.step {
  counter-increment: step;
  position: relative;
  padding: 22px 22px 22px 80px;
  background: var(--cream);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  min-height: 96px;
}
.step::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5.5px rgba(154, 85, 68, 0.45);
}
.actions--booking {
  margin-top: 32px;
  align-items: center;
  gap: 12px 28px;
}
.actions--booking .btn { flex: 0 1 auto; min-width: min(100%, 280px); }

/* 6 · FAQ */
.faq { display: grid; gap: 28px; }
.faq__list { display: grid; gap: 10px; }
.faq__item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.faq__item[open] { border-color: rgba(154, 85, 68, 0.3); box-shadow: var(--shadow); }
.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 64px 14px 20px;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item summary::before,
.faq__item summary::after {
  /* plus → minus marker */
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--brick);
  border-radius: 1px;
  transition: transform 220ms var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--brick-deep); }
.faq__answer {
  padding: 0 20px 20px;
  color: var(--ink);
}
.faq__answer p + p { margin-top: 14px; }
.faq__cta .btn { flex: 0 1 auto; }
.faq__rules { margin-top: 8px; }

/* visually hidden, still read out: used for the "opens in a new tab" note */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 7b · canale */
.section--canale .section-title { max-width: 22ch; }

.yt-card {
  display: grid;
  gap: 18px;
  margin-top: 32px;
  padding: 26px 24px;
  background: var(--white);
  border: 2px solid var(--brick);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.yt-card__ico {
  width: 44px;
  height: 44px;
  color: var(--brick);
  flex: none;
}
.yt-card__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--brick-deep);
}
.yt-card__text { margin-top: 10px; max-width: 54ch; }
.yt-card__action { margin-top: 20px; }
.yt-card__action .btn { flex: 0 1 auto; }

.chan-group__title {
  margin-top: 44px;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.chan-group__title--sm { margin-top: 36px; }

.chan-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.chan {
  padding: 18px 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.chan__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1875rem;
  text-decoration: none;
}
/* monochrome: the page's own brown/brick, never the brands' colours */
.chan__ico { width: 26px; height: 26px; flex: none; color: var(--brick); }
.chan__what { margin-top: 8px; color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* the whole card is the hit area, so the 48px target rule is met on phones */
.chan { position: relative; }
.chan__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

@media (hover: hover) {
  .chan:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .chan:hover .chan__link { color: var(--brick-deep); }
}
.chan:focus-within { box-shadow: var(--shadow); }

.chan--sm { padding: 14px 20px; }
.chan--sm .chan__link { font-size: 1.0625rem; }

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  margin-top: 18px;
  background: var(--ink);
  color: var(--cream);
  padding-block: 48px 40px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 18px;
  background: var(--ink);
  -webkit-mask: var(--torn) repeat-x 0 0 / 240px 18px;
  mask: var(--torn) repeat-x 0 0 / 240px 18px;
}
.site-footer__inner { display: grid; gap: 8px; font-size: 1.0625rem; }
.site-footer__mark {
  justify-self: start;
  margin-bottom: 6px;
  padding: 9px 14px;
  background: var(--cream);
  border-radius: 12px;
}
.site-footer__mark picture { display: block; }
.site-footer__mark img { display: block; width: 120px; height: 59px; }
.site-footer__info { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.45; }
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  row-gap: 0;
}
.site-footer__who { margin-right: 6px; color: rgba(243, 233, 221, 0.78); }
.site-footer__social a {
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  text-decoration: none;
}
.site-footer__social .fico { width: 22px; height: 22px; }
.site-footer__social a:hover .fico { color: var(--white); }
.site-footer__social--sm .fico { width: 19px; height: 19px; }
.site-footer__social--sm .site-footer__who { font-size: 1rem; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(243, 233, 221, 0.5);
}
.site-footer a:hover { text-decoration-color: var(--cream); }
.site-footer :focus-visible { outline-color: var(--cream); }
.site-footer__copy { color: rgba(243, 233, 221, 0.78); font-size: 1rem; }

/* ---------- sticky bar (mobile) ---------- */
.stickybar {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(243, 233, 221, 0.97);
  border-top: 1px solid rgba(154, 85, 68, 0.25);
  box-shadow: 0 -8px 24px rgba(58, 42, 34, 0.10);
  transition: transform 260ms var(--ease), visibility 0s linear 0s;
}
.stickybar .btn {
  min-height: 52px;
  padding: 8px 12px;
  font-size: 1rem;
  box-shadow: none;
}
.stickybar .btn--primary { flex-grow: 1.2; }
.page-home .site-footer { padding-bottom: calc(40px + var(--bar-h)); }
.nw { white-space: nowrap; }

/* with JS: the bar stays out of the way while a booking button is already on screen */
.js .stickybar:not(.is-shown) {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 260ms var(--ease), visibility 0s linear 260ms;
}
/* without JS the bar is always shown, so keep the hero buttons clear of it */
html:not(.js) .hero { padding-bottom: calc(var(--bar-h) + 16px); }

/* ---------- regulament ---------- */
.reg { padding-top: 24px; }
.reg__inner { max-width: calc(820px + 2 * var(--gutter)); }
.reg__title {
  margin-top: 8px;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
}
.reg__title::after {
  content: "";
  display: block;
  width: 72px;
  margin-top: 16px;
  border-top: 3px dashed var(--brick);
}
.reg__card {
  margin-top: 32px;
  padding: 12px 22px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.reg__list {
  counter-reset: art;
  list-style: none;
}
.reg__list li {
  counter-increment: art;
  position: relative;
  padding: 18px 0 18px 46px;
  border-bottom: 1px dashed rgba(154, 85, 68, 0.28);
}
.reg__list li:last-child { border-bottom: 0; }
.reg__list li::before {
  content: counter(art) ".";
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--brick);
}
.reg__list strong { font-weight: 600; }
.reg__back--bottom { margin-top: 24px; }

/* ---------- reveal (below the fold only; added by JS) ---------- */
.pre-reveal { opacity: 0; transform: translateY(14px); }
.is-revealed { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }

/* ---------- ≥ 600px ---------- */
@media (min-width: 600px) {
  .hero__plate { max-width: 24ch; }
  .inclus__list { grid-template-columns: repeat(2, 1fr); }
  .inclus__list li { flex-direction: column; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { padding: 80px 22px 24px; }
}

/* ---------- ≥ 900px (desktop: no sticky bar, wider cover, two-column atelier) ---------- */
@media (min-width: 900px) {
  :root { --header-h: 64px; }
  body { font-size: 1.1875rem; }
  .wordmark { font-size: 1.1875rem; }

  .stickybar { display: none; }
  .page-home .site-footer { padding-bottom: 40px; }
  html:not(.js) .hero { padding-bottom: 56px; }

  .hero {
    min-height: min(calc(100svh - var(--header-h)), 820px);
    padding-block: clamp(28px, 4svh, 52px) clamp(34px, 5svh, 60px);
  }
  .shelf { --item: clamp(104px, 10vw, 126px); }
  .shelf__item { padding: 7px; }
  .wordmark img { width: 88px; height: 43px; }
  .brand { width: min(360px, 34svh); }
  .hero__plate { max-width: 620px; }
  .hero__kicker { font-size: 0.875rem; }
  .hero__title { font-size: clamp(2.9rem, 3.8vw, 3.9rem); }
  .hero__sub { font-size: 1.25rem; max-width: 46ch; }
  .chip { font-size: 1rem; padding: 6px 14px 6px 10px; }
  .hero .actions { max-width: 34rem; }
  .hero .btn { min-height: 56px; }

  .program { grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; }
  .program .section-title { position: sticky; top: 32px; }

  .inclus__list { grid-template-columns: repeat(4, 1fr); }

  .atelier { grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: center; }
  .atelier__text { grid-column: 1; }
  .atelier__frame { grid-column: 2; max-width: 282px; rotate: 1.6deg; }
  .atelier-photos {
    grid-template-columns: 1fr 1fr;
    column-gap: 38px;
    align-items: center;
    margin-top: 56px;
    margin-inline: auto;
  }

  .faq { grid-template-columns: 4fr 8fr; column-gap: 64px; align-items: start; }
  .faq__head { position: sticky; top: 32px; }

  .site-footer__inner { grid-template-columns: 1fr auto; column-gap: 40px; align-items: center; }
  .site-footer__mark { grid-column: 1; grid-row: 1; margin-bottom: 14px; }
  .site-footer__info { grid-column: 1; grid-row: 2; }
  .site-footer__copy { grid-column: 1; grid-row: 4; }
  .site-footer__social { grid-column: 2; grid-row: 2; justify-self: end; }
  .site-footer__social--sm { grid-row: 3; }
  .site-footer__legal { grid-column: 2; grid-row: 4; justify-self: end; }

  .yt-card {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 24px;
    padding: 34px 36px;
  }
  .yt-card__ico { width: 52px; height: 52px; }
  .chan-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .chan-grid--sm { grid-template-columns: repeat(3, 1fr); max-width: 66%; }
}

/* ---------- desktop on a short screen: keep the whole cover above the fold.
   The logo is a 2:1 artwork, so it needs more height than the old one-line
   wordmark did; the frames and the logo give that height back in two steps. ---------- */
@media (min-width: 900px) and (max-height: 920px) {
  .shelf { --item: clamp(100px, 9.4vw, 120px); }
  .brand { width: min(330px, 32svh); }
}
@media (min-width: 900px) and (max-height: 800px) {
  .hero { padding-block: clamp(18px, 2.6svh, 36px) clamp(20px, 3svh, 40px); }
  .shelf { --item: clamp(96px, 9vw, 112px); }
  .brand { width: min(300px, 30svh); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .pre-reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- cookie banner (GDPR) ----------
   Sits at the bottom, but its own bottom padding reserves the height of the
   sticky WhatsApp bar, so the two booking buttons are never covered. The bar
   paints on top of that reserved strip (z-index 20 vs 19 here), which keeps
   the two stacked bars looking like one block whether the bar is up or down. */
.cc {
  position: fixed;
  z-index: 19;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  /* fully opaque: the banner is tall enough that any translucency shows the
     headings and cards behind it straight through */
  background: var(--cream);
  border-top: 1px solid rgba(154, 85, 68, 0.3);
  box-shadow: 0 -8px 24px rgba(58, 42, 34, 0.12);
}
.cc[hidden] { display: none; }
.cc:focus { outline: none; }
.cc__inner {
  display: grid;
  gap: 12px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
}
.cc__text {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.cc__more {
  color: var(--brick-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Accept and Refuz are deliberately identical: same size, same style, no
   emphasis on either, nothing pre-selected. */
.cc__actions { display: flex; gap: 10px; }
.cc__btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--brick);
  border-radius: 999px;
  background: var(--white);
  color: var(--brick-deep);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
@media (hover: hover) {
  .cc__btn:hover { background: var(--brick); color: var(--white); }
}

/* footer "Setări cookie": a button, dressed exactly like its sibling link */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
}
.cc__settings {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--cream);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(243, 233, 221, 0.5);
}
.cc__settings:hover { text-decoration-color: var(--cream); }
/* without JS the banner can never open, so the link would be a dead end */
html:not(.js) .cc__settings { display: none; }

#cookie { scroll-margin-top: 24px; }

@media (min-width: 700px) {
  .cc__inner { grid-template-columns: 1fr auto; gap: 24px; padding-block: 16px; }
  .cc__actions { flex: 0 0 auto; }
  .cc__btn { flex: 0 0 auto; min-width: 136px; }
}

/* desktop: no sticky bar to clear */
@media (min-width: 900px) {
  .cc { padding-bottom: env(safe-area-inset-bottom, 0px); }
}