/* The Oldest City Fire Journal — staugustafd.org
   Palette situee : coquina cream paper, storm slate ink, hydrant red, station bell brass.
   Prefixe ocf-. Feuille ecrite pour ce site seul : aucune classe partagee avec le reseau. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #f4ecd9;
  color: #2b3440;
  line-height: 1.65;
  font-size: 1.0625rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #8e1f18; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- barre d'alarme (filet rouge tout en haut) ---- */
.ocf-alarm {
  background: #8e1f18; color: #f4ecd9;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: .45rem 1rem;
}

/* ---- blindage (masthead nom de journal) ---- */
.ocf-mast { border-bottom: 3px double #2b3440; background: #f4ecd9; }
.ocf-mast__in { max-width: 74rem; margin: 0 auto; padding: 1.1rem 1.25rem 0; text-align: center; }
.ocf-mast__rule { border: 0; border-top: 1px solid #a8842c; margin: 0 0 .6rem; }
.ocf-mast__name {
  font-size: clamp(1.7rem, 4.6vw, 3rem); font-weight: 700;
  letter-spacing: .02em; color: #232b34; line-height: 1.08;
}
.ocf-mast__name em { font-style: normal; color: #b4271e; }
.ocf-mast__tag {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: #a8842c; margin: .45rem 0 .7rem;
}
.ocf-nav { border-top: 1px solid #2b3440; }
.ocf-nav__in { max-width: 74rem; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
.ocf-nav a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: #2b3440; padding: .65rem 1.1rem; display: inline-block;
}
.ocf-nav a[aria-current="page"] { color: #fff; background: #b4271e; }
.ocf-nav a:hover { color: #8e1f18; text-decoration: none; background: #efe5cf; }
.ocf-nav a[aria-current="page"]:hover { color: #fff; background: #8e1f18; }
.ocf-skip {
  position: absolute; left: -999px; top: 0; background: #232b34; color: #f4ecd9;
  padding: .5rem 1rem; z-index: 10;
}
.ocf-skip:focus { left: 0; }

/* ---- gabarit commun ---- */
.ocf-wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; }
.ocf-kicker {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: #b4271e; margin-bottom: .5rem;
}
.ocf-standfirst { font-size: 1.15rem; color: #4d5a68; max-width: 46rem; }

/* ---- bandes et sections ---- */
.ocf-band { padding: 2.6rem 0; }
.ocf-band + .ocf-band { border-top: 1px solid #d9cba6; }
.ocf-band--night { background: #232b34; color: #e9e0c8; }
.ocf-band--night .ocf-kicker { color: #d8b45a; }
.ocf-band--night .ocf-standfirst { color: #c4bca4; }
.ocf-band--night a { color: #eecf7e; }
.ocf-band--tint { background: #efe5cf; }
.ocf-band h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; margin-bottom: .6rem; }
.ocf-more {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 1.2rem;
}

/* ---- cartes articles (slot donneur natif) ---- */
.ocf-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.ocf-card { background: #faf5e7; border: 1px solid #d9cba6; border-top: 3px solid #b4271e; display: flex; flex-direction: column; }
.ocf-card__fig { margin: 0; }
.ocf-card__fig img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; }
.ocf-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ocf-card__tag {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #a8842c;
}
.ocf-card__body h3 { font-size: 1.12rem; line-height: 1.28; }
.ocf-card__note { font-size: .93rem; color: #4d5a68; }
.ocf-card__caption { font-size: .82rem; color: #8a7f66; font-style: italic; border-top: 1px dotted #cbbd97; padding-top: .5rem; margin-top: auto; }

/* ---- tuiles de sections ---- */
.ocf-tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem; counter-reset: sec; margin-top: 1.6rem; }
.ocf-tile { background: #faf5e7; border: 1px solid #d9cba6; padding: 1.1rem; position: relative; }
.ocf-tile__no {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: absolute; top: .8rem; right: .9rem; font-size: .78rem;
  color: #a8842c; letter-spacing: .1em;
}
.ocf-tile h3 { font-size: 1.08rem; margin: .3rem 0 .5rem; padding-right: 2.2rem; }
.ocf-tile__note { font-size: .9rem; color: #4d5a68; }
.ocf-tile__meta {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: #8e1f18; margin-top: .7rem;
}

/* ---- page article : colonne journal + rail ---- */
.ocf-page { padding: 2.2rem 0 3rem; }
.ocf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.6rem; }
.ocf-crumb { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .74rem; letter-spacing: .05em; margin-bottom: 1.2rem; }
.ocf-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; color: #8a7f66; }
.ocf-crumb li + li::before { content: '\203A'; margin-right: .4rem; color: #a8842c; }
.ocf-article h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.15; max-width: 40rem; }
.ocf-article__meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .78rem; color: #8a7f66; letter-spacing: .04em;
  border-top: 1px solid #a8842c; border-bottom: 1px solid #a8842c;
  padding: .5rem 0; margin: 1rem 0 1.4rem;
}
.ocf-article__hero { margin: 0 0 1.6rem; }
.ocf-article__hero img { width: 100%; border: 1px solid #2b3440; }
.ocf-article__hero figcaption, .ocf-figcap {
  font-size: .82rem; color: #8a7f66; font-style: italic; padding-top: .45rem;
}
.ocf-body { font-size: 1.05rem; }
.ocf-body p { margin-bottom: 1.05rem; max-width: 42rem; }
.ocf-body h2 { font-size: 1.32rem; line-height: 1.25; margin: 2rem 0 .8rem; max-width: 40rem; }
.ocf-body h2::before { content: ''; display: block; width: 2.6rem; border-top: 3px solid #b4271e; margin-bottom: .55rem; }
.ocf-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9a15a; }

/* ---- rail lateral ---- */
.ocf-rail { display: flex; flex-direction: column; gap: 1.4rem; }
.ocf-rail__box { background: #efe5cf; border-left: 3px solid #a8842c; padding: 1rem 1.1rem 1.2rem; }
.ocf-rail__box h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #2b3440; margin-bottom: .6rem;
}
.ocf-rail__box ul { list-style: none; }
.ocf-rail__box li { padding: .3rem 0; border-bottom: 1px dotted #cbbd97; font-size: .92rem; }
.ocf-rail__box li:last-child { border-bottom: 0; }
.ocf-rail__toc li::before { content: '\2192'; color: #b4271e; margin-right: .45rem; }

/* ---- hub : liste des guides ---- */
.ocf-hublist { margin-top: 1.8rem; }

/* ---- pied ---- */
.ocf-foot { background: #232b34; color: #c4bca4; margin-top: 2rem; padding: 2.4rem 0 2rem; border-top: 4px solid #b4271e; }
.ocf-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.8rem; }
.ocf-foot h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: #d8b45a; margin-bottom: .6rem;
}
.ocf-foot p, .ocf-foot li { font-size: .9rem; }
.ocf-foot ul { list-style: none; }
.ocf-foot li { padding: .18rem 0; }
.ocf-foot a { color: #eecf7e; }
.ocf-foot__base {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: space-between;
  border-top: 1px solid #46505c; margin-top: 1.8rem; padding-top: 1rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .76rem; letter-spacing: .06em;
}

/* ---- 404 ---- */
.ocf-404 { padding: 3.4rem 0 4rem; max-width: 40rem; }
.ocf-404 h1 { font-size: 1.9rem; margin-bottom: .8rem; }

/* ---- responsive : le rail passe dessous ---- */
@media (max-width: 56rem) {
  .ocf-grid { grid-template-columns: minmax(0, 1fr); }
  .ocf-rail { flex-direction: row; flex-wrap: wrap; }
  .ocf-rail__box { flex: 1 1 15rem; }
  .ocf-mast__in { padding-top: .8rem; }
}