/* ==========================================================================
   Commodities Risk Analysis, L.C. — commoditiesrisk.com
   Static rebuild of the previous WordPress/Divi site.

   Colours, type sizes and spacing below were measured from the live site so
   the static version renders identically. Values that look arbitrary (the
   #a5a5a5 body text, the 150px nav columns) are deliberate matches — see
   README.md before "correcting" them.
   ========================================================================== */

:root {
  --ink: #a5a5a5;          /* body copy inside panels */
  --panel: #f2f2f2;        /* panel background */
  --panel-alt: #ffffff;    /* alternating panel background */
  --link: #6a0303;         /* dark red used for e-mail links */
  --chrome: #ffffff;       /* header/footer text over the photo */

  --font-display: "Mako", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: 32px;
  --header-height: 154px;  /* logo block + its padding; overlays clear this */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  /* The photo is fixed to the viewport so panels scroll over a still image,
     matching the overlay behaviour of the original site. */
  background:
    linear-gradient(rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.25) 100%),
    url("../img/hero-background.png") center / cover no-repeat;
  background-attachment: fixed;
  background-color: #2b2b2b; /* shows while the photo loads */
}

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Page shell -------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__body { flex: 1 0 auto; }

/* Header ------------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px var(--gutter);
}

.masthead__logo { display: block; }

.masthead__logo img {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
}

.nav {
  display: flex;
  flex-shrink: 0;
}

.nav__link {
  width: 150px;
  /* 20px each side, as on the original: the pair sits 52px from the right
     edge (20px margin + the 32px page gutter). */
  margin: 0 20px;
  padding: 20px 0 0 5px;
  border-top: 2px solid var(--chrome);
  color: var(--chrome);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.19;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.nav__link:hover,
.nav__link:focus-visible { opacity: 0.75; }

/* Footer ------------------------------------------------------------------ */

.colophon {
  flex-shrink: 0;
  padding: 15px var(--gutter) 15px;
  color: var(--chrome);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.19;
  text-align: center;
}

.colophon__link {
  color: var(--chrome);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.colophon__link:hover,
.colophon__link:focus-visible { text-decoration: underline; }

.colophon p { margin: 0; }

/* Content panels ---------------------------------------------------------- */

/* max-width carries the 20px side padding, so the panels themselves come out
   at the widths used on the original site: 580px, or 1010px for the wide
   Disclaimer layout. */
.panels {
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 20px 60px;
}

.panels--wide { max-width: 1050px; }

.panel {
  padding: 10px 25px;
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

.panel--alt { background: var(--panel-alt); }

.panel:first-child { padding-top: 25px; }
.panel:last-child { padding-bottom: 25px; }

.panels--wide .panel { font-size: 16px; }

.panel h1,
.panel h2 {
  margin: 0 0 14px;
  color: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.panel h2 + h2,
.panel p + h2 { margin-top: 24px; }

.panel p { margin: 0 0 16px; }
.panel > :last-child { margin-bottom: 0; }

.panel a {
  color: var(--link);
  text-decoration: none;
}

.panel a:hover,
.panel a:focus-visible { text-decoration: underline; }

/* Contact details --------------------------------------------------------- */

.contact-details { font-style: normal; }

/* The original ran the whole block — address, telephones and e-mail — as one
   continuous run of lines with no paragraph gaps between them. */
.contact-details p { margin: 0; }

.contact-details__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.contact-details__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: currentColor;
  transform: translateY(2px);
}

/* Overlays ---------------------------------------------------------------- */
/* On the home page the three sections open as full-screen overlays over the
   photo, as they did on the original site. Each overlay's content is fetched
   from its standalone page, so the copy lives in exactly one file. */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The original overlay backdrop is effectively transparent — the photo and
     the header stay visible behind the panels. */
  background: rgba(0, 0, 0, 0.01);
  animation: overlay-fade 0.35s ease both;
}

.overlay[hidden] { display: none; }

.overlay__inner {
  min-height: 100%;
  padding-top: var(--header-height);
}

.overlay--wide .overlay__inner { padding-top: 100px; }

.overlay__close {
  position: absolute;
  top: 10px;
  right: 25px;
  z-index: 1;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--chrome);
  font-family: var(--font-body);
  font-size: 100px;
  font-weight: 300;
  line-height: 60px;
  cursor: pointer;
}

.overlay__close:hover,
.overlay__close:focus-visible { opacity: 0.75; }

.overlay__loading {
  padding-top: 40px;
  color: var(--chrome);
  font-size: 16px;
  text-align: center;
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Body scroll lock while an overlay is open. */
.overlay-open { overflow: hidden; }

/* Event promotion banner --------------------------------------------------- */
/*
   A single large promotional card, used on the home page in place of the empty
   body area. It takes the elements of the strip banner running on acfif.org —
   EVENT badge, headline, date, live countdown, link — at the size this page
   has room for.

   The block is self-contained on purpose: its variables, its breakpoints and
   its print rules are all here rather than in the sections below, so retiring
   the banner is two deletions — this block, and the <section class="promo">
   in index.html. See README.md.

   Two extra families are involved, requested by index.html only: Bodoni Moda
   for the headline and IBM Plex Mono for the countdown figures. Neither is
   used anywhere else, so the other three pages still load the original two.
*/

.promo {
  /* Gold leaf over near-black, with the site's own oxblood washed underneath.
     The card sits on the photograph, so every surface below is part-opaque and
     the cocoa greens carry through at the edges. */
  --gold: #d9a441;
  --gold-lit: #f2d79b;
  --gold-line: rgba(217, 164, 65, 0.22);
  --cream: #f4ece0;
  --cream-soft: rgba(244, 236, 224, 0.66);
  --cream-faint: rgba(244, 236, 224, 0.56);

  --font-engraved: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-ticker: "IBM Plex Mono", Consolas, "SFMono-Regular", monospace;

  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 4px var(--gutter) 56px;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* The home page centres the banner in the space between header and footer.
   The other pages keep the default top-aligned flow for their panels. */
.page__body--promo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* An open overlay is almost transparent by design — without this the banner
   would compete with the panels sitting on top of it. */
.overlay-open .promo {
  opacity: 0.1;
  filter: blur(3px);
}

.promo [hidden] { display: none; }

.promo__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  /* Stretched, not start-aligned: the hairline dividing the two columns is the
     right column's left border, and it should run the full height of the card
     rather than stopping wherever the countdown happens to end. */
  align-items: stretch;
  gap: clamp(28px, 3.6vw, 56px);
  padding: clamp(30px, 3.6vw, 54px) clamp(26px, 3.4vw, 52px);
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(118% 88% at 8% 0%, rgba(217, 164, 65, 0.15), transparent 58%),
    radial-gradient(95% 130% at 100% 100%, rgba(106, 3, 3, 0.62), transparent 62%),
    linear-gradient(152deg, rgba(28, 13, 8, 0.95) 0%, rgba(9, 5, 3, 0.96) 55%, rgba(20, 9, 6, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(244, 236, 224, 0.045),
    0 32px 70px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
}

.promo__frame > * {
  position: relative;
  z-index: 1;
}

.promo__frame::before,
.promo__frame::after {
  content: "";
  position: absolute;
}

/* The gold rule along the top edge, drawn left to right once on load. */
.promo__frame::before {
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-lit) 0%, var(--gold) 26%, rgba(217, 164, 65, 0.28) 74%, rgba(217, 164, 65, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: promo-rule 1.1s cubic-bezier(0.22, 0.72, 0.24, 1) 0.05s both;
}

/* A single corner tick, bottom right — the mark on an engraved certificate. */
.promo__frame::after {
  right: 16px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  border-right: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

/* Banner: left column ----------------------------------------------------- */

.promo__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 2vw, 26px);
}

.promo__badge {
  padding: 5px 11px 4px;
  border: 1px solid var(--gold);
  color: var(--gold-lit);
  font-family: var(--font-ticker);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  /* Balances the trailing letter-space so the word sits centred in its box. */
  text-indent: 0.26em;
  text-transform: uppercase;
}

.promo__kicker {
  color: var(--cream-soft);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.promo__heading {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  color: var(--cream);
  font-family: var(--font-engraved);
  font-size: clamp(31px, 4.5vw, 60px);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 0.99;
  letter-spacing: -0.012em;
}

.promo__amp {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

.promo__dek {
  max-width: 52ch;
  margin: 0 0 clamp(24px, 2.8vw, 34px);
  color: var(--cream-soft);
  font-size: 16px;
  line-height: 1.62;
}

/* The date / time / venue ledger. */
.promo__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-top: 1px solid var(--gold-line);
}

.promo__meta-item {
  flex: 1 1 auto;
  min-width: 150px;
  padding: 16px 22px 0 0;
}

.promo__meta dt {
  margin-bottom: 7px;
  color: var(--gold);
  font-family: var(--font-ticker);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.promo__meta dd {
  margin: 0;
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* Banner: right column ---------------------------------------------------- */

.promo__aside {
  padding-left: clamp(24px, 3vw, 44px);
  border-left: 1px solid var(--gold-line);
}

.promo__clock-label {
  margin: 0 0 16px;
  color: var(--cream-faint);
  font-family: var(--font-ticker);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.promo__digits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: clamp(24px, 2.6vw, 32px);
}

.promo__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2px;
  border-left: 1px solid rgba(217, 164, 65, 0.14);
}

.promo__cell:first-child { border-left: 0; }

.promo__num {
  color: var(--gold-lit);
  font-family: var(--font-ticker);
  font-size: clamp(30px, 3.9vw, 52px);
  font-weight: 600;
  /* Fixed-width figures: without these the row jitters every second. */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
}

.promo__unit {
  margin-top: 11px;
  color: var(--cream-faint);
  font-family: var(--font-ticker);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.promo__underway {
  margin: 0 0 clamp(24px, 2.6vw, 32px);
  color: var(--gold-lit);
  font-family: var(--font-engraved);
  font-size: 25px;
  line-height: 1.25;
}

.promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  background: var(--gold);
  color: #180b04;
  font-family: var(--font-ticker);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.promo__cta:hover,
.promo__cta:focus-visible {
  background: var(--gold-lit);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(217, 164, 65, 0.24);
}

.promo__arrow {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: transform 0.2s ease;
}

.promo__cta:hover .promo__arrow,
.promo__cta:focus-visible .promo__arrow { transform: translateX(4px); }

.promo__note {
  max-width: 34ch;
  margin: 20px 0 0;
  color: var(--cream-faint);
  font-size: 13px;
  line-height: 1.55;
}

/* Banner: entrance -------------------------------------------------------- */
/* One staggered reveal on load. The delays run down the left column and then
   across to the right, walking the eye through the card in reading order
   rather than having everything arrive at once. */

.promo__eyebrow,
.promo__heading,
.promo__dek,
.promo__meta,
.promo__clock,
.promo__cta,
.promo__note {
  animation: promo-rise 0.72s cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.promo__eyebrow { animation-delay: 0.10s; }
.promo__heading { animation-delay: 0.18s; }
.promo__dek     { animation-delay: 0.28s; }
.promo__meta    { animation-delay: 0.36s; }
.promo__clock   { animation-delay: 0.44s; }
.promo__cta     { animation-delay: 0.52s; }
.promo__note    { animation-delay: 0.58s; }

@keyframes promo-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes promo-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Banner: responsive ------------------------------------------------------ */

@media (max-width: 980px) {
  .promo { padding-bottom: 44px; }

  .promo__frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .promo__aside {
    padding-top: 30px;
    padding-left: 0;
    border-top: 1px solid var(--gold-line);
    border-left: 0;
  }

  .promo__note { max-width: none; }
}

@media (max-width: 600px) {
  .promo { padding-bottom: 32px; }

  .promo__frame { padding: 26px 20px 30px; }

  .promo__kicker { font-size: 15px; }

  .promo__dek { font-size: 15px; }

  .promo__meta-item {
    flex: 1 1 100%;
    min-width: 0;
    padding-right: 0;
  }

  .promo__cta {
    width: 100%;
    justify-content: center;
  }
}

/* Banner: motion / print -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .promo__eyebrow,
  .promo__heading,
  .promo__dek,
  .promo__meta,
  .promo__clock,
  .promo__cta,
  .promo__note,
  .promo__frame::before {
    animation: none;
  }

  .promo__frame::before { transform: none; }

  .promo,
  .promo__cta,
  .promo__arrow { transition: none; }

  .promo__cta:hover,
  .promo__cta:focus-visible { transform: none; }
}

@media print {
  /* A running countdown means nothing on paper; the date beside it does. */
  .promo__clock { display: none; }

  .promo__frame {
    display: block;
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
  }

  .promo__badge,
  .promo__dek,
  .promo__heading,
  .promo__kicker,
  .promo__note,
  .promo__meta dt,
  .promo__meta dd { color: #000; }

  .promo__aside {
    padding-left: 0;
    border-left: 0;
  }

  .promo__cta {
    background: none;
    color: #000;
    text-decoration: underline;
  }
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
  :root { --gutter: 20px; }

  .masthead {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .masthead__logo img { width: 320px; }

  .nav { justify-content: center; }

  .nav__link {
    width: auto;
    min-width: 130px;
    margin: 0 10px;
    padding-top: 14px;
    font-size: 18px;
  }

  .overlay__inner,
  .overlay--wide .overlay__inner { padding-top: 24px; }

  .overlay__close {
    top: 4px;
    right: 12px;
    font-size: 64px;
    line-height: 48px;
  }
}

@media (max-width: 600px) {
  body { background-attachment: scroll; }

  .masthead__logo img { width: 260px; }

  .nav { flex-wrap: wrap; }

  .nav__link {
    min-width: 0;
    flex: 1 1 40%;
    margin: 0 6px;
    font-size: 16px;
  }

  .colophon { font-size: 16px; }

  .panels { padding: 16px 12px 40px; }

  .panel {
    padding: 10px 18px;
    font-size: 16px;
  }

  .panels--wide .panel { font-size: 15px; }

  .panel h1,
  .panel h2 { font-size: 22px; }
}

/* Motion / print ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .overlay { animation: none; }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .masthead,
  .colophon,
  .overlay__close { display: none; }

  .panel {
    background: #fff;
    color: #000;
  }
}