/* ============================================================
   AROMAT.MD — sistem v3 · "Olfactory Index"
   Editorial concept-store. Cald, tipografic, cu caracter.
   Instrument Serif (display) · Archivo (UI) · Space Mono (meta)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

:root {
  --paper:      oklch(0.963 0.015 83);   /* cremă caldă */
  --paper-deep: oklch(0.928 0.018 78);   /* benzi / secțiuni */
  --ink:        oklch(0.185 0.013 55);   /* espresso */
  --ink-soft:   oklch(0.42 0.014 52);
  --ink-faint:  oklch(0.57 0.012 55);
  --line:       oklch(0.80 0.016 68);    /* hairline */
  --line-soft:  oklch(0.87 0.013 72);
  --clay:       oklch(0.555 0.145 41);   /* accent cald */
  --clay-deep:  oklch(0.46 0.13 40);
  --clay-soft:  oklch(0.90 0.045 52);

  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Space Mono", ui-monospace, Menlo, monospace;

  --maxw: 1380px;
  --gutter: clamp(18px, 4.2vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--grotesk); background: var(--paper); color: var(--ink); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--clay); color: var(--paper); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- type helpers ---------- */
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.italic { font-family: var(--serif); font-style: italic; }

/* ---------- masthead strip ---------- */
.strip {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 9px 0; color: var(--ink-soft);
}
.strip .clay { color: var(--clay-deep); font-weight: 700; }

/* ---------- header ---------- */
header.site { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--ink); }
.site-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 18px 0; }
.brand { font-family: var(--grotesk); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.brand .dot { color: var(--clay); }
.mainnav { display: flex; justify-self: center; gap: 30px; }
.mainnav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: all 0.15s ease;
}
.mainnav a:hover, .mainnav a[aria-current="true"] { color: var(--ink); border-color: var(--ink); }
.mainnav a.hot { color: var(--clay-deep); }
.actions { display: flex; justify-self: end; align-items: center; gap: 10px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: transparent; color: var(--ink); border-radius: 50%; transition: background 0.15s ease; }
.icon-btn:hover { background: var(--paper-deep); }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.cart-btn { position: relative; }
.cart-btn .c { position: absolute; top: 4px; right: 2px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--clay-deep); }

/* ---------- placeholder ---------- */
.ph {
  position: relative; background: var(--paper-deep);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 11px,
     color-mix(in oklab, var(--line) 55%, transparent) 11px, color-mix(in oklab, var(--line) 55%, transparent) 12px);
  display: grid; place-items: center; overflow: hidden;
}
.ph .ph-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--paper); border: 1px solid var(--line); padding: 5px 9px; white-space: nowrap;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- footer ---------- */
footer.site { margin-top: 90px; border-top: 1px solid var(--ink); }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding: 56px 0 48px; }
.foot-brand .big { font-family: var(--serif); font-size: 44px; line-height: 0.95; margin-bottom: 16px; }
.foot-brand .big .dot { color: var(--clay); }
.foot-brand p { color: var(--ink-soft); max-width: 34ch; font-size: 14px; }
.foot-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 15px; color: var(--ink-soft); padding: 6px 0; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; padding: 18px 0 30px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); flex-wrap: wrap; }

@media (max-width: 900px) {
  .mainnav { display: none; }
  .site-inner { grid-template-columns: auto 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / -1; }
}