/* =====================================================================
   BUTCHER'S CUISINE - butchers.ro
   Catalog de galerie pentru un singur autor. Cameră aproape neagră,
   un obiect luminat pe rând, o singură linie de alamă. Vezi DESIGN.md.
   Cuprins:
     01 Reset si baza
     02 Jetoane (culori, spatii, tipografie)
     03 Tipografie
     04 Primitive de layout
     05 Antet
     06 Butoane si actiuni
     07 Hero
     08 Placi fotografice (gestul de semnatura)
     09 Portretul fondatorilor
     10 Macelarul si linia de timp
     11 Meseria / maturarea
     12 Dovada
     13 Gama si tabele de pret
     14 Ghidul de gatit
     15 Piese mari
     16 Vizita
     17 Subsol
     18 Bara fixa pe mobil
     19 Dezvaluire si miscare
     20 Tiparire
   ===================================================================== */

/* --- 01 Reset si baza --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* --- 02 Jetoane ---------------------------------------------------- */
:root {
  /* Fundal: aproape negru, cu o urma minima de cald. */
  --void:      oklch(0.145 0.006 60);
  --void-2:    oklch(0.185 0.006 60);
  --void-3:    oklch(0.225 0.006 60);

  /* Text: alb-os cald. bone-2 masurat 7.41:1 pe --void, 6.98:1 pe --void-2. */
  --bone:      oklch(0.93 0.008 75);
  --bone-2:    oklch(0.70 0.008 75);

  /* Alama: singurul accent. Doar linii, etichete mici, ani, stare activa.
     Masurat 9.87:1 pe --void, 9.30:1 pe --void-2. */
  --brass:     oklch(0.78 0.075 85);
  --brass-ink: oklch(0.60 0.060 85);           /* 5.00:1 pe --void */
  --hair:      oklch(0.42 0.030 85 / 0.55);    /* linie de 1px, decorativa */
  --hair-soft: oklch(0.42 0.030 85 / 0.28);

  --shell: 78rem;
  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --rhythm: clamp(4.5rem, 11vw, 9.5rem);

  /* Georgia la titluri (alegerea lui Cosmin), sans de sistem la text lung.
     Zero fonturi de retea: pagina nu asteapta nimic ca sa se aseze. */
  --ff-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --ff-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- 03 Tipografie -------------------------------------------------- */
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--ff-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Georgia apare DOAR mare. Sub 1.6rem, tot textul trece pe sans. */
.display {
  font-family: var(--ff-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.15rem, 7.6vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3 {
  font-family: var(--ff-text);
  font-weight: 500;
  font-size: 1.075rem;
  line-height: 1.35;
  letter-spacing: 0.002em;
}

/* Eticheta mica de alama. Kickerul deliberat al paginii, folosit de
   cinci ori in tot documentul. */
.label {
  font-family: var(--ff-text);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
}

.lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--bone);
  max-width: 34ch;
}

.muted { color: var(--bone-2); }

.fine {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--bone-2);
  letter-spacing: 0.005em;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

::selection { background: var(--void-3); color: var(--brass); }

/* --- 04 Primitive de layout ----------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--rhythm); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 6rem); }

.rule { height: 1px; background: var(--hair); border: 0; }

/* Antetul de sectiune: eticheta de alama, titlu, o linie de alama. */
.head { display: grid; gap: 1.1rem; max-width: 46rem; }
.head .label + h2 { margin-top: -0.35rem; }

.stack-lg { display: grid; gap: clamp(2rem, 5vw, 3.25rem); }
.stack-md { display: grid; gap: 1.35rem; }

.skip {
  position: absolute; left: 0.75rem; top: -6rem; z-index: 200;
  background: var(--bone); color: var(--void);
  padding: 0.85rem 1.25rem; font-weight: 500; font-size: 0.95rem;
  border-radius: 2px; transition: top 0.18s ease;
}
.skip:focus { top: 0.75rem; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- 05 Antet -------------------------------------------------------- */
/* Antetul este opac de la inceput: niciun text nu sta peste fotografie fara
   fundal solid. La scroll capata doar linia de alama, nu si un blur. */
/* Pe ecran mic antetul are doua randuri (sigla + telefon, apoi navigatia) si
   NU este lipicios: doua randuri lipite ar manca prea mult din ecran, iar
   bara de jos tine oricum „suna" si „cum ajung" la indemana tot timpul. */
.masthead {
  position: relative; z-index: 60;
  background: var(--void);
  transition: border-color 0.25s ease;
  border-bottom: 1px solid var(--hair-soft);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 60px;
  padding-block: 0.65rem;
}
/* Sigla oficiala, varianta alba pe fundal transparent (BC/Logo Final).
   Vectorul .eps sta in brand/, daca e nevoie de tipar. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo {
  width: auto;
  height: clamp(46px, 8vw, 58px);
}
/* Navigatia trece pe al doilea rand si se rupe pe mai multe randuri daca nu
   incape. Fara derulare laterala si fara buton de meniu: pe telefon toate
   cele sase linkuri trebuie sa fie vizibile deodata, altfel „Retete" ajunge
   in afara ecranului si nimeni nu-l gaseste. */
.masthead nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.15rem;
  border-top: 1px solid var(--hair-soft);
  margin-top: 0.2rem;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  padding-block: 0.55rem 0.15rem;
}
.masthead nav a {
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--bone-2); text-decoration: none;
  white-space: nowrap;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--bone); border-bottom-color: var(--brass); }
.masthead__phone {
  font-size: clamp(0.8rem, 2.4vw, 0.9rem); font-weight: 500;
  color: var(--bone); text-decoration: none;
  white-space: nowrap;
  padding: 0.55rem 0.1rem;
  border-bottom: 1px solid var(--hair);
}
.masthead__phone:hover { border-bottom-color: var(--brass); color: var(--brass); }

/* De la latimea la care cele sase linkuri incap pe acelasi rand cu sigla,
   antetul redevine un singur rand si redevine lipicios. */
@media (min-width: 62rem) {
  .masthead {
    position: sticky; top: 0;
    border-bottom-color: transparent;
  }
  .masthead.is-set { border-bottom-color: var(--hair-soft); }
  .masthead__in { flex-wrap: nowrap; }
  .masthead nav {
    order: 0;
    flex-basis: auto;
    gap: 2rem;
    margin-left: auto; margin-right: 2.25rem;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    flex-wrap: nowrap;
  }
  .masthead nav a { font-size: 0.86rem; }
}

/* --- 06 Butoane si actiuni ------------------------------------------ */
.act {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.015em;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Primar: os plin, text intunecat. 16.10:1. Alama ramane linie, nu umplere:
   la hover se schimba doar conturul si o nuanta de os mai calda. */
.act--solid { background: var(--bone); color: var(--void); border: 1px solid var(--bone); }
.act--solid:hover { background: oklch(0.87 0.018 80); border-color: var(--brass); color: var(--void); }
/* Primar-egal: contur de alama pe fond intunecat. 9.87:1 */
.act--line { background: transparent; color: var(--brass); border: 1px solid var(--brass); }
.act--line:hover { background: var(--void-2); color: var(--brass); border-color: var(--brass); }

.act__ico { width: 1.05em; height: 1.05em; flex: none; }

.acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.tlink {
  color: var(--bone); text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.12em;
}
.tlink:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* --- 07 Hero --------------------------------------------------------- */
.hero { position: relative; }
.hero__frame {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--void-2);
}
.hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% 52%;
}
/* Umbrire unica, aceeasi peste toate cadrele: toate par din aceeasi camera. */
.hero__frame::after,
.plate__frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 92% at 50% 44%, rgba(6,5,4,0) 38%, rgba(6,5,4,0.52) 100%),
    linear-gradient(to bottom, rgba(6,5,4,0.22), rgba(6,5,4,0) 34%);
}

/* Panoul de text: bloc opac, nu scrim transparent. Contrast masurat. */
.hero__plate {
  position: relative;
  z-index: 2;
  background: var(--void);
  border-top: 1px solid var(--brass);
  margin-top: -2.5rem;
  margin-inline: var(--gut);
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.75rem, 5vw, 2.75rem);
  display: grid; gap: 1.35rem;
}
.hero__plate h1 { max-width: 20ch; }
.hero__sub {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  color: var(--bone-2);
  max-width: 40ch;
}
.hero__sub strong { color: var(--bone); font-weight: 500; }

/* Linia de dovada de sub fold. */
.hero__proof {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.88rem;
  color: var(--bone-2);
}
.hero__proof b { color: var(--bone); font-weight: 500; }
.hero__proof .dot { color: var(--brass-ink); }

/* Starea programului. */
.status { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.status__pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); flex: none; transform: translateY(-1px);
}
.status--shut .status__pip { background: oklch(0.52 0.01 75); }

@media (min-width: 56rem) {
  /* Cadru si panou in aceeasi celula de grid: daca panoul e mai inalt decat
     cadrul (fereastra lata si scunda), sectiunea creste si nimic nu mai
     aluneca sub antetul lipicios. */
  .hero { display: grid; }
  .hero__frame {
    grid-area: 1 / 1;
    aspect-ratio: auto;
    height: auto;
    min-height: min(84vh, 720px);
  }
  .hero__frame img { object-position: 46% 50%; }
  .hero__plate {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: start;
    margin: 3.5rem 0 clamp(2rem, 5vh, 4rem) max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
    max-width: min(46rem, 68vw);
    padding: 2.75rem 3rem 2.5rem;
  }
}

/* --- 08 Placi fotografice (gestul de semnatura) ----------------------- */
.plate { position: relative; }
.plate__frame {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--void-2);
}
.plate__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Legenda mica de alama, in coltul cadrului, pe cip opac. */
.plate__tag {
  position: absolute; z-index: 2;
  top: 0; right: 0;
  background: var(--void);
  color: var(--brass);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  border-left: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  max-width: 70%;
}
/* Un singur rand de text mare, pe bloc opac. */
.plate__note {
  position: relative; z-index: 2;
  background: var(--void);
  border-top: 1px solid var(--brass);
  margin-top: -2rem;
  margin-inline: var(--gut);
  padding: clamp(1.35rem, 4vw, 2rem) clamp(1.25rem, 3.5vw, 2.25rem);
}
.plate__line {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 26ch;
}
.plate__meta { margin-top: 0.85rem; font-size: 0.85rem; color: var(--bone-2); }

@media (min-width: 56rem) {
  .plate__frame { aspect-ratio: auto; height: min(78vh, 620px); }
  .plate__note {
    position: absolute;
    left: max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
    bottom: clamp(1.75rem, 4vh, 3.25rem);
    margin: 0;
    max-width: min(38rem, 58vw);
    padding: 2rem 2.5rem;
  }
  .plate__tag { font-size: 0.72rem; padding: 0.7rem 1.1rem; }
}

/* --- 09 Portretul fondatorilor ---------------------------------------- */
/* Portretul real al fondatorilor, in rama de alama. */
.portret { position: relative; }
.portret img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 50%;
  border: 1px solid var(--brass-ink);
}
.portret::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid var(--hair-soft);
  pointer-events: none;
  z-index: 1;
}
/* --- 10 Macelarul si linia de timp ------------------------------------ */
.butcher__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

.tl { display: grid; margin-top: clamp(2rem, 5vw, 3rem); }
.tl__row {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(0.9rem, 3vw, 1.75rem);
}
.tl__year {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 5.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1em;
}
.tl__body {
  border-left: 1px solid var(--hair);
  padding-left: clamp(1.1rem, 3.5vw, 2rem);
  padding-bottom: clamp(2rem, 4.5vw, 2.75rem);
  position: relative;
}
.tl__body::before {
  content: "";
  position: absolute; left: -3px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass);
}
.tl__row:last-child .tl__body { padding-bottom: 0; }
.tl__body p { max-width: 46ch; }
.tl__body .accent { color: var(--bone); font-weight: 500; }
.tl__body p:not(.accent) { color: var(--bone-2); }
.tl__body p + p { margin-top: 0.5rem; }

.source-note {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.85rem;
  color: var(--bone-2);
}

@media (min-width: 62rem) {
  .butcher__grid { grid-template-columns: 1fr 20rem; align-items: start; }
  .butcher__aside { position: sticky; top: 6rem; }
}

/* --- 11 Meseria / maturarea -------------------------------------------- */
.craft__lede {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 24ch;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}
.craft__cols { display: grid; gap: 0; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.craft__item {
  padding-block: clamp(1.6rem, 4vw, 2.25rem);
  border-top: 1px solid var(--hair-soft);
  display: grid; gap: 0.7rem;
}
.craft__item:last-child { border-bottom: 1px solid var(--hair-soft); }
.craft__item p { color: var(--bone-2); max-width: 60ch; }

@media (min-width: 52rem) {
  .craft__cols { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.75rem, 4vw, 3rem); }
  .craft__item { border-bottom: 1px solid var(--hair-soft); }
}

.craft__shot {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}
.craft__shot img { width: 100%; }
/* Aceeasi umbrire ca pe celelalte cadre: toate par din aceeasi camera. */
.craft__shot::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 92% at 50% 44%, rgba(6,5,4,0) 42%, rgba(6,5,4,0.48) 100%);
}

/* --- 12 Dovada ---------------------------------------------------------- */
.proof__score {
  display: flex; align-items: center; gap: clamp(1.1rem, 3.5vw, 2rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.proof__num {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(4rem, 14vw, 6rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.proof__bar { width: 1px; align-self: stretch; background: var(--hair); flex: none; }
.proof__of { display: grid; gap: 0.3rem; }
.proof__of .big { font-size: 1.05rem; font-weight: 500; color: var(--bone); }
.proof__of .small { font-size: 0.85rem; color: var(--bone-2); }

.proof__cards { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
@media (min-width: 52rem) { .proof__cards { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--void-2);
  border: 1px solid var(--hair-soft);
  border-top: 1px solid var(--brass);
  padding: clamp(1.5rem, 4vw, 2rem);
  display: grid; gap: 1.1rem; align-content: start;
}
.quote p {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--bone);
  text-wrap: balance;
}
.quote footer { font-size: 0.85rem; color: var(--bone-2); }

/* --- 13 Gama si tabele de pret ------------------------------------------ */
.range__intro { display: grid; gap: 1.35rem; }
.range__bridge {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.55;
  max-width: 52ch;
  color: var(--bone);
}
.range__grid { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); margin-top: clamp(2.25rem, 5vw, 3.25rem); }
@media (min-width: 58rem) { .range__grid { grid-template-columns: 1fr 1fr; } }

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brass-ink) transparent;
}
.tbl-wrap:focus-visible { outline-offset: 0; }

table.price { width: 100%; min-width: 17rem; }
table.price caption {
  text-align: left;
  font-size: 0.95rem; font-weight: 500;
  color: var(--bone);
  padding-bottom: 0.9rem;
}
table.price th, table.price td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair-soft);
  text-align: left;
  vertical-align: baseline;
}
table.price thead th {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--brass-ink);
  padding-bottom: 0.6rem;
}
table.price tbody th { font-weight: 400; color: var(--bone); padding-right: 1rem; }
table.price td {
  text-align: right;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}
table.price thead th:last-child { text-align: right; }
table.price tbody tr:last-child th,
table.price tbody tr:last-child td { border-bottom: 0; }

.range__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.65rem, 2vw, 1rem); margin-top: clamp(2.25rem, 5vw, 3rem); }
.range__pair figure { display: grid; gap: 0.65rem; }
.range__pair img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.range__pair figcaption { font-size: 0.8rem; color: var(--bone-2); }

.more { margin-top: clamp(2.25rem, 5vw, 3rem); border-top: 1px solid var(--hair-soft); }
.more details { border-bottom: 1px solid var(--hair-soft); }
.more summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  min-height: 44px;
  display: flex; align-items: center;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: "";
  position: absolute; right: 0.35rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.more details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.more summary:hover { color: var(--brass); }
.more .more__body { padding: 0 0 1.4rem; color: var(--bone-2); max-width: 62ch; }
.more .more__body .num { color: var(--bone); font-weight: 500; }


/* --- 14 Ghidul de gatit --------------------------------------------------- */
table.cook { width: 100%; min-width: 40rem; }
table.cook thead th {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brass);
  text-align: left;
  padding: 0 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--brass-ink);
  white-space: nowrap;
}
table.cook tbody th {
  font-weight: 500; color: var(--bone); text-align: left;
  padding: 0.95rem 1.25rem 0.95rem 0;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: top;
}
table.cook tbody td {
  color: var(--bone-2);
  padding: 0.95rem 1.25rem 0.95rem 0;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
table.cook tbody td:last-child, table.cook thead th:last-child { padding-right: 0; }
table.cook tbody td.temp { color: var(--bone); white-space: nowrap; }
table.cook tbody tr:last-child th,
table.cook tbody tr:last-child td { border-bottom: 0; }

.scroll-hint {
  font-size: 0.78rem; color: var(--brass);
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
}
@media (min-width: 56rem) { .scroll-hint { display: none; } }

/* --- 15 Piese mari -------------------------------------------------------- */
.big-cuts {
  background: var(--void-2);
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--hair-soft);
}
.big-cuts__in { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); max-width: 52rem; }
.big-cuts p { color: var(--bone-2); max-width: 54ch; }

/* --- 16 Vizita ------------------------------------------------------------ */
.visit__grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 58rem) { .visit__grid { grid-template-columns: 1fr 1fr; } }

.addr { display: grid; gap: 1.5rem; align-content: start; }
.addr__line {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.addr dl { display: grid; gap: 0.85rem; }
.addr .pair { display: grid; gap: 0.15rem; }
.addr dt { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass); }
.addr dd { font-size: 1rem; }

table.hours { width: 100%; min-width: 15rem; }
table.hours caption {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brass); padding-bottom: 0.9rem;
}
table.hours th, table.hours td {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hair-soft);
  text-align: left;
  font-weight: 400;
  color: var(--bone-2);
}
table.hours td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.hours tr:last-child th, table.hours tr:last-child td { border-bottom: 0; }
table.hours tr.is-today th,
table.hours tr.is-today td { color: var(--brass); font-weight: 500; }
table.hours tr.is-today th::before {
  content: "";
  display: inline-block; width: 14px; height: 1px;
  background: var(--brass);
  vertical-align: middle; margin-right: 0.6rem;
}

.visit__status { margin-top: 1.5rem; font-size: 0.95rem; color: var(--bone); }

/* Firma magazinului: singurul cadru luminos din pagina, deci primeste o
   rama de alama ca sa nu para scapat din alta sectiune. */
.visit__shot {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  border: 1px solid var(--brass-ink);
  padding: 7px;
}
.visit__shot img { width: 100%; }

/* --- 17 Subsol ------------------------------------------------------------ */
.foot { border-top: 1px solid var(--hair); background: var(--void); }
.foot__in { padding-block: clamp(2.75rem, 6vw, 4.25rem); display: grid; gap: clamp(2rem, 5vw, 3rem); }
.foot__top { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .foot__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot h2, .foot h3 { margin-bottom: 0.9rem; }
.foot__col ul { display: grid; gap: 0.6rem; }
.foot__col a { color: var(--bone-2); text-decoration: none; }
.foot__col a:hover { color: var(--brass); }
.foot__col p { color: var(--bone-2); font-size: 0.95rem; }
/* Sigla in subsol: aceeasi imagine ca in antet, putin mai mica si mai
   discreta, fara link (antetul lipicios duce deja acasa). */
.foot__logo {
  width: auto;
  height: 66px;
  margin-bottom: 1.35rem;
  opacity: 0.9;
}
/* --- 18 Bara fixa pe mobil ------------------------------------------------- */
/* Sta lipita de marginea de jos, doar pe telefon. */
.mbar {
  position: fixed;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 80;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--hair);
}
.mbar a {
  min-height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--void);
  color: var(--bone);
  font-size: 0.92rem; font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  text-align: center;
}
.mbar a + a { color: var(--brass); }
.mbar a:active { background: var(--void-2); }
.mbar__ico { width: 1.05em; height: 1.05em; flex: none; }

body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 56rem) {
  .mbar { display: none; }
  body { padding-bottom: 0; }
}

/* --- 19 Dezvaluire si miscare ---------------------------------------------- */
/* Continutul este vizibil implicit. JS adauga .will DOAR elementelor de sub
   viewport si mai inalte de 2px; observatorul o scoate. Fara JS, nimic nu se
   ascunde vreodata. */
[data-rv] { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
[data-rv].will { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-rv].will { opacity: 1 !important; transform: none !important; }
}

html { scroll-behavior: smooth; }
section[id], figure[id], [id] { scroll-margin-top: 5.25rem; }

/* --- 20 Tiparire ------------------------------------------------------------ */
@media print {
  [data-rv].will { opacity: 1 !important; transform: none !important; }
  .masthead, .mbar { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .plate__note, .hero__plate, .quote, .big-cuts { background: #fff; color: #000; }
  a { color: #000; }
}

/* =====================================================================
   21 Retete (blog)
   Aceeasi camera intunecata, dar o singura coloana de text lung.
   ===================================================================== */

/* Capul paginii de lista si al articolului. */
.page-head { padding-block: clamp(2.75rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-head .head { max-width: 34ch; }
.page-head .lede { max-width: 46ch; margin-top: 0.35rem; color: var(--bone-2); }

/* Lista de retete. */
/* Liniile dintre carduri sunt conturul fiecarui card, nu fundalul grilei:
   altfel ultimul rand incomplet lasa o caseta goala, colorata. */
.cards {
  display: grid;
  gap: 1px;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 46rem) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--void);
  outline: 1px solid var(--hair-soft);
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  text-decoration: none;
  transition: background 0.22s ease;
}
.card:hover { background: var(--void-2); }
.card__shot {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid var(--hair-soft);
}
.card__shot img { width: 100%; height: 100%; object-fit: cover; }
.card__date {
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brass);
}
.card__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--bone);
  text-wrap: balance;
}
.card__dek { font-size: 0.95rem; line-height: 1.55; color: var(--bone-2); }
.card__go { font-size: 0.85rem; color: var(--brass); }

/* Articolul. */
.article { --measure: 34rem; }
.article__head { display: grid; gap: 1rem; max-width: 24ch; }
/* Titlul de articol sta pe masura textului, nu la scara titlului de pagina. */
.article__head h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; }
.article__date {
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brass);
}
.article__shot {
  margin-top: clamp(2rem, 5vw, 3rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--void-2);
  position: relative;
}
.article__shot img { width: 100%; height: 100%; object-fit: cover; }
.article__shot::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 92% at 50% 44%, rgba(6,5,4,0) 40%, rgba(6,5,4,0.5) 100%);
}

.prose {
  max-width: var(--measure);
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 1.35rem;
}
.prose p { color: var(--bone-2); }
.prose p strong { color: var(--bone); font-weight: 500; }
.prose h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--bone);
  margin-top: 1.1rem;
}
.prose ul {
  display: grid;
  gap: 0.6rem;
  padding-left: 0;
  border-left: 1px solid var(--hair);
  padding-left: 1.35rem;
}
.prose li { color: var(--bone-2); }
.prose li::before {
  content: "";
  display: inline-block; width: 10px; height: 1px;
  background: var(--brass-ink);
  vertical-align: middle; margin-right: 0.7rem;
  transform: translateY(-2px);
}

/* Piciorul articolului: intoarcerea in magazin. */
.article__cta {
  max-width: var(--measure);
  margin-top: clamp(2.75rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--brass);
  display: grid; gap: 1.1rem;
}
.article__cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.article__back { margin-top: clamp(2rem, 4vw, 2.75rem); font-size: 0.9rem; }
.article__back a { color: var(--brass); text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 0.12em; }
.article__back a:hover { border-bottom-color: var(--brass); }