/* ==========================================================================
   Ferravon, ferravon.com
   Layout modelled on bmacapital.co: a small, top-aligned, centred fixed-width
   block; two columns, left = serif logo over a vertical bordered nav,
   right = banner + a thin-bordered content panel + small legal text.
   Palette after Pictet, deep navy + warm sienna on near-white.
   ========================================================================== */

/* ---------- Font (self-hosted sans) ---------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/geist-normal-300-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/geist-normal-300-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #FFFFFF;
  --ink: #2A2A2A;
  --navy: #1A1A1A;
  --muted: #7D7A76;
  --accent: #BE1B2E;
  --accent-2: #9C1424;
  --line: #E3E0D8;
  --line-2: #D3D0C7;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', 'Times', serif;
  --frame: 700px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
img, svg { vertical-align: middle; max-width: 100%; }
strong { font-weight: 600; color: var(--navy); }
::selection { background: var(--navy); color: #fff; }
:focus { outline: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--navy); color: #fff; padding: 8px 14px; font-size: 12px; }

/* ---------- Frame: centred fixed-width, top-aligned, two columns ---------- */
.frame {
  width: var(--frame);
  max-width: calc(100% - 40px);
  margin: 40px auto 80px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 34px;
  align-items: start;
}
.frame > * { min-width: 0; }

/* ---------- Left column: logo + vertical nav ---------- */
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 24px; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 27px; height: 27px; flex: none; }
.brand__name { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: .005em; color: var(--navy); }

.sidenav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sidenav a {
  font-size: 11px; letter-spacing: .05em; color: var(--ink);
  text-decoration: none; padding: 9px 1px; border-bottom: 1px solid var(--line);
}
.sidenav a:hover { color: var(--accent-2); text-decoration: none; }
.sidenav a.active, .sidenav a[aria-current="page"] { font-weight: 600; color: var(--navy); }

/* Collapsible mobile menu (CSS-only checkbox toggle, no JS). Desktop: toggle hidden, links shown. */
.nav-check { position: absolute; left: -9999px; }
.nav__toggle { display: none; }

/* ---------- Right column: banner + panel + legal ---------- */
.banner { margin-bottom: 16px; line-height: 0; }
.banner img { display: block; width: 100%; height: clamp(92px, 17vw, 122px); object-fit: cover; object-position: center 45%; }

.panel { border: 1px solid var(--line-2); background: #fff; }
.panel__head {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); padding: 11px 15px; border-bottom: 1px solid var(--line-2);
}
.panel__body { padding: 15px; }
.panel__body p { margin: 0 0 .85em; color: var(--ink); font-size: 12px; line-height: 1.66; }
.panel__body p:last-child { margin-bottom: 0; }
.panel__body a { color: var(--accent-2); text-decoration: underline; }
.panel__lede { color: var(--navy); }

/* Markets list (What We Trade), inside panel */
.markets { margin: 12px 0 0; }
.markets > div { padding: 10px 0; border-top: 1px solid var(--line); }
.markets dt { font-weight: 600; color: var(--navy); font-size: 12px; margin: 0 0 2px; }
.markets dd { margin: 0; color: var(--ink); font-size: 11.5px; line-height: 1.6; }

/* Contact details, inside panel */
.info { margin: 4px 0 0; }
.info > div { padding: 9px 0; border-top: 1px solid var(--line); }
.info > div:first-child { border-top: 0; padding-top: 0; }
.info dt { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 3px; }
.info dd { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.6; }
.info dd a { color: var(--navy); text-decoration: none; }
.info dd a:hover { text-decoration: underline; }

/* ---------- Legal line (under panel, right column) ---------- */
.legal { margin: 14px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.legal a { color: var(--accent-2); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .copy { display: block; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  .frame { display: block; width: auto; max-width: 100%; margin: 24px 0 56px; padding: 0 clamp(18px, 5vw, 24px); }
  .col-left { margin-bottom: 22px; }
  .nav__toggle {
    display: flex; align-items: center; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
    padding: 11px 1px; border-top: 1px solid var(--line);
  }
  .nav__toggle::before { content: "\2630"; color: var(--accent); margin-right: 10px; font-size: 15px; line-height: 1; }
  .nav-check:checked ~ .nav__toggle::before { content: "\2715"; font-size: 13px; }
  .nav-check:focus-visible ~ .nav__toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sidenav { display: none; border-top: 1px solid var(--line); }
  .nav-check:checked ~ .sidenav { display: flex; flex-direction: column; }
  .sidenav a { padding: 11px 1px; }
  .banner img { height: clamp(120px, 34vw, 150px); }
}

/* ---------- Print ---------- */
@media print { body { background: #fff; color: #000; } }