/* ═══════════════════════════════════════════════════════════
   brand.css — Clover Silver
   Wordmark, mark, ornaments, rules, image treatment, type voice
   ═══════════════════════════════════════════════════════════ */

/* ───────────── Base type voice ───────────── */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:var(--text-body);
  line-height:1.62;
  color:var(--text-primary);
  background:var(--mesh-paper);
  background-attachment:fixed;
  font-feature-settings:"kern","liga","onum";
  font-variant-numeric:oldstyle-nums;
  hyphens:manual;
  -webkit-font-smoothing:antialiased;
}
.tile p,.prose p,.prose li,.lead,.cap p,.cookie p{hyphens:auto}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
  hyphens:manual;
  font-variant-numeric:lining-nums;
}
p{margin:0 0 1em;text-wrap:pretty}
em{font-family:var(--font-body);font-style:italic;font-weight:400;letter-spacing:0}
strong,b{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Scale helpers */
.t-hero{font-size:var(--text-hero)}
.t-xl{font-size:var(--text-h1)}
.t-l{font-size:var(--text-h2)}
.t-m{font-size:var(--text-h3)}
.t-sm{font-size:var(--text-sm)}

.lead{font-size:var(--text-body);color:var(--text-secondary);max-width:52ch}
.lead--big{font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.5;color:var(--text-primary)}
.small-caps{font-variant-caps:all-small-caps;letter-spacing:.09em;font-feature-settings:"smcp","c2sc","kern"}
.note{font-size:var(--text-sm);color:var(--text-secondary);font-variant-caps:normal;line-height:1.5}

/* Drop cap — typographic ornament */
.dropcap::first-letter{
  font-family:var(--font-display);font-weight:800;
  float:left;font-size:4.3em;line-height:.78;
  margin:.06em .1em 0 -.02em;color:var(--brand-primary);
}

/* ───────────── Eyebrow / labels ───────────── */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-weight:700;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 1.1rem;
}
.eyebrow::before{content:"§";font-size:1.15em;letter-spacing:0}
.on-dark .eyebrow,.section--primary .eyebrow,.tile--primary .eyebrow,.tile--pine .eyebrow{color:var(--brand-accent)}

/* ───────────── Wordmark + mark ───────────── */
.wordmark{
  display:inline-flex;align-items:center;gap:.55em;
  color:inherit;text-decoration:none;
  font-family:var(--font-display);font-weight:800;
  font-size:var(--wm-size,1.7rem);line-height:1;
  letter-spacing:-.05em;
}
.wordmark__text{display:inline-block}
.mark{width:1.15em;height:1.15em;flex:none;overflow:visible}
.mark__frame{fill:none;stroke:currentColor;stroke-width:2}
.mark__c{fill:none;stroke:currentColor;stroke-width:3.2}
.mark__dot{fill:var(--mark-dot,var(--brand-accent))}

.wordmark--giant{
  --wm-size:min(calc((100vw - 4.5rem) / 10),8.8rem);
  letter-spacing:-.06em;gap:.12em;white-space:nowrap;
}
.wordmark--giant .mark{width:.78em;height:.78em;margin-bottom:.02em}

/* Advertising stamp (compliance label, styled as a printer's mark) */
.stamp{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.28rem .55rem .22rem;
  border:1px solid currentColor;
  line-height:1;
}

/* ───────────── Ornaments & rules ───────────── */
.orn{display:block;width:3rem;height:.75rem;color:var(--brand-accent);flex:none}
.orn--ink{color:var(--brand-primary)}
.orn-line{display:flex;align-items:center;gap:1rem;color:var(--brand-accent)}
.orn-line::before,.orn-line::after{content:"";flex:1;height:1px;background:currentColor;opacity:.7}
.orn-line .orn{width:1.6rem}

.rule{border:0;border-top:1px solid var(--border-strong);margin:0}
.rule--double{border-top:3px double var(--border-strong);height:0}
.rule--gold{border-color:var(--brand-accent)}

/* Dateline: newspaper-style meta with column dividers */
.dateline{
  display:flex;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0;padding:0;list-style:none;
}
.dateline > *{padding:.15rem 1rem .15rem 0;margin-right:1rem;border-right:1px solid currentColor;line-height:1.1}
.dateline > *:last-child{border:0;margin:0;padding-right:0}
.dateline--stack{flex-direction:column;gap:0}
.dateline--stack > *{border-right:0;border-bottom:1px solid var(--rule,currentColor);margin:0;padding:.7rem 0}
.dateline--stack > *:first-child{padding-top:0}
.dateline--stack > *:last-child{border-bottom:0}

/* Giant background glyphs (typographic texture) */
.glyph{
  position:absolute;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:800;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px currentColor;
  letter-spacing:-.05em;
}

/* ───────────── Image treatment (one recipe, site-wide) ─────────────
   grayscale + contrast, then a burgundy `color` layer = single-hue duotone.
   Hover/focus lifts the layer and reveals true colour. */
.frame{position:relative;overflow:hidden;isolation:isolate;background:var(--brand-primary-deep);margin:0}
.frame img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--focus-pt,50% 50%);
  filter:grayscale(1) sepia(.35) contrast(1.18) brightness(.9);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brand-primary);mix-blend-mode:color;opacity:.82;
  transition:opacity .5s var(--ease);
}
.frame::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--brand-primary-deep);mix-blend-mode:multiply;opacity:.38;
  transition:opacity .5s var(--ease);
}
.tile:hover .frame::before,.frame:hover::before{opacity:0}
.frame--fill{position:absolute;inset:0}
.tile:hover .frame img,.frame:hover img{transform:scale(1.04)}
.tile:hover .frame::after,.frame:hover::after{opacity:0}
.tile:hover .frame img,.frame:hover img{filter:grayscale(0) contrast(1.02)}