/* ============================================================
   f/HD Studio — shared brand styles
   Palette: Ink Blue (default) · Charcoal & Bone · Slate + Taupe
   Type: Cormorant Garamond (italic display) + Jost (sans)
   ============================================================ */

:root, [data-palette="blue"] {
  --ink: #22405E; --soft: #7E93AB; --slash: #22405E;
  --paper: #FBFAF8; --sub: #9AA7B6;
  --dark-bg: #19222F; --dark-ink: #F3F1EC; --dark-soft: #9FB0C4; --dark-sub: #637388;
}
[data-palette="mono"] {
  --ink: #1B1A18; --soft: #8E867A; --slash: #1B1A18;
  --paper: #F5F2EB; --sub: #A79E90;
  --dark-bg: #1C1B19; --dark-ink: #F2EEE6; --dark-soft: #B3AA9C; --dark-sub: #6E6659;
}
[data-palette="slate"] {
  --ink: #33414C; --soft: #9AA4AC; --slash: #A98561;
  --paper: #FAF8F4; --sub: #A98561;
  --dark-bg: #28313A; --dark-ink: #F1EFEA; --dark-soft: #A7B1B8; --dark-sub: #A98561;
}
:root {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --skew: -22deg;
}

/* ---------- the f/HD mark ----------
   Size is driven by font-size on .fhd-mark (the cap-height driver "h").
   <span class="fhd-mark"><span class="f">f</span><span class="slash"></span><span class="hd">HD</span></span> */
.fhd-mark {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  color: var(--ink);
}
.fhd-mark .f {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
  line-height: 0.82;
  margin-right: 0.137em;
}
.fhd-mark .slash {
  display: inline-block;
  background: var(--slash);
  width: max(2px, 0.037em);
  height: 0.79em;
  transform: skewX(var(--skew));
  border-radius: 99px;
  margin-top: 0.095em;
  margin-right: 0.137em;
}
.fhd-mark .hd {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.48em;
  letter-spacing: 0.04em;
  align-self: flex-end;
  padding-bottom: 0.083em; /* = 0.04 of full h */
}
.fhd-mark.reversed { color: var(--dark-ink); }
.fhd-mark.reversed .slash { background: var(--dark-ink); }

/* ---------- shared type utilities ---------- */
.cap {
  font-family: var(--sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--sub);
  white-space: nowrap;
}
.meta {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--soft);
}
.serif-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

/* ---------- print document scaffolding ---------- */
.page {
  width: 8.5in;
  min-height: 11in;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}
@media screen {
  body.doc-body { background: #ECEAE4; }
  .page {
    margin: 40px auto;
    box-shadow: 0 18px 44px rgba(30, 28, 24, 0.16), 0 2px 8px rgba(30, 28, 24, 0.08);
  }
}
@media print {
  @page { size: letter; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .no-print { display: none !important; }
  .page { margin: 0; box-shadow: none; width: 100%; min-height: 100vh; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}