/* =========================================================================
   SALISH SEA CIVIC NOTES (sanjuanmasons.com) : « island civic review ».
   Squelette d'origine : journal-deux-col (colonne de lecture large + marge
   etroite), rhabille en revue civique insulaire : fog white (fond), cedar
   (accent chaud), harbour blue (encre profonde et bandes sombres), brass
   (filets, numeros, ornements). Titres en serif de revue, appareil critique
   en capitales condensees. Prefixe hbr-, vocabulaire du port et de l'imprime :
     shell (conteneur)        masthead (manchette)   wordmark (titre de la revue)
     passage (sommaire)       latch (bouton du menu mobile)
     cover (la une)           soundings (les sondes = chiffres de l'edition)
     plank (bouton, la planche de quai)
     contents (sommaire illustre)   entry (une entree du sommaire)
     band (une bande de rubrique)   lead (l'article de tete d'une bande)
     note (une carte d'article)     shelf (la selection) / pick (un choix)
     almanac (bande sombre : comment la revue est ecrite)
     wake (pied de page)      course (fil d'Ariane)
     opening (titraille)      overleaf (figure large)
     quay (grille de lecture) column (colonne de lecture) margin (marge)
     slip (bloc de marge)     tideline (ornement de separation)
     shut (404)
   Aucune requete externe, aucune police tierce, aucun script, tokens fixes
   sur les bandes sombres (color-scheme light assume).
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- couleurs : brume, cedre, port, laiton ------------------------- */
  --hbr-fog: #f2f3f0;          /* fond de page, blanc de brume             */
  --hbr-paper: #fbfbf9;        /* feuille : cartes et colonnes             */
  --hbr-wash: #e7e9e4;         /* bande claire alternee                    */
  --hbr-ink: #1f262a;          /* encre                                    */
  --hbr-ink-2: #58656c;        /* encre secondaire, legendes, appareil     */
  --hbr-deep: #123141;         /* harbour blue : bandes sombres            */
  --hbr-deep-2: #0d232f;       /* fond du pied de page                     */
  --hbr-on-deep: #eef2ef;      /* texte sur bande sombre (fixe)            */
  --hbr-on-deep-2: #a6bcc4;    /* texte secondaire sur bande sombre (fixe) */
  --hbr-harbour: #16556f;      /* liens                                    */
  --hbr-cedar: #93532e;        /* survol, signal chaud                     */
  --hbr-cedar-soft: #f0e2d6;   /* aplat de cedre tres clair                */
  --hbr-brass: #a67c33;        /* filets, numeros, ornements               */
  --hbr-brass-deep: #d8b273;   /* le laiton lisible sur bande sombre       */
  --hbr-rule: #d5d9d3;         /* filet fin                                */
  --hbr-rule-deep: #2c4c5c;    /* filet sur bande sombre                   */

  /* ---- caracteres : piles systeme, rien ne part dehors ---------------- */
  --hbr-display: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style", Cambria, Georgia, "Times New Roman", serif;
  --hbr-text: "Iowan Old Style", Charter, "Sitka Text", Cambria, Georgia, "Liberation Serif", serif;
  --hbr-case: "Avenir Next Condensed", "Helvetica Neue Condensed", "Roboto Condensed", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ---- rythme --------------------------------------------------------- */
  --hbr-width: 72rem;
  --hbr-margin-col: 17.5rem;
  --hbr-measure: 38em;
  --hbr-pad: clamp(1.05rem, 4vw, 2.6rem);
  --hbr-gap: clamp(1rem, 2.2vw, 1.7rem);
  --hbr-air: clamp(2.4rem, 5.5vw, 4.4rem);
  --hbr-hair: 1px solid var(--hbr-rule);
  --hbr-brassrule: 2px solid var(--hbr-brass);
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hbr-fog);
  color: var(--hbr-ink);
  font-family: var(--hbr-text);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-wrap: break-word;
  font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--hbr-harbour); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--hbr-cedar); }
:focus-visible { outline: 3px solid var(--hbr-cedar); outline-offset: 2px; }
h1, h2, h3, h4 {
  font-family: var(--hbr-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
}
p, ul, ol, figure, blockquote, table { margin: 0 0 1.05rem; }

.hbr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--hbr-deep); color: var(--hbr-on-deep);
  padding: 0.7rem 1.1rem; font-family: var(--hbr-case);
  text-transform: uppercase; letter-spacing: 0.09em;
}
.hbr-skip:focus { left: 0; color: var(--hbr-on-deep); }

.hbr-shell {
  width: 100%;
  max-width: var(--hbr-width);
  margin-inline: auto;
  padding-inline: var(--hbr-pad);
}

/* =========================================================================
   MANCHETTE : titre centre de revue, filets de laiton, sommaire en dessous
   ========================================================================= */
.hbr-masthead {
  background: var(--hbr-paper);
  border-block-end: var(--hbr-hair);
}
.hbr-masthead__meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  justify-content: center;
  margin: 0; padding-block: 0.5rem;
  border-block-end: 1px solid var(--hbr-rule);
  font-family: var(--hbr-case);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--hbr-ink-2);
}
.hbr-masthead__meta b { color: var(--hbr-brass); font-weight: 600; }

.hbr-wordmark {
  display: flex; align-items: center; justify-content: center;
  gap: 0.85rem; padding-block: clamp(1rem, 2.6vw, 1.7rem) 0.75rem;
  text-decoration: none; color: inherit;
}
.hbr-wordmark svg { width: 2.35rem; height: 2.35rem; flex: none; }
.hbr-wordmark__name {
  display: block;
  font-family: var(--hbr-display);
  font-size: clamp(1.55rem, 4.4vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.018em; line-height: 1.05;
}
.hbr-wordmark__line {
  display: block;
  font-family: var(--hbr-case);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--hbr-ink-2); margin-top: 0.3rem;
}
.hbr-wordmark:hover .hbr-wordmark__name { color: var(--hbr-cedar); }

.hbr-switch { position: absolute; opacity: 0; pointer-events: none; }
.hbr-latch {
  display: none;
  margin: 0 auto 0.9rem; width: max-content;
  padding: 0.4rem 1.1rem;
  border: var(--hbr-hair); border-radius: 999px;
  font-family: var(--hbr-case); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--hbr-ink-2); cursor: pointer;
}
.hbr-latch:hover { color: var(--hbr-cedar); border-color: var(--hbr-cedar); }

.hbr-passage {
  border-block-start: var(--hbr-brassrule);
  border-block-end: 1px solid var(--hbr-rule);
}
.hbr-passage ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(1rem, 3vw, 2.4rem);
  margin: 0; padding: 0; list-style: none;
}
.hbr-passage a {
  display: block; padding: 0.62rem 0;
  font-family: var(--hbr-case); font-size: 0.79rem;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--hbr-ink); text-decoration: none;
  border-block-end: 2px solid transparent;
}
.hbr-passage a:hover { color: var(--hbr-cedar); }
.hbr-passage a[aria-current="page"] { color: var(--hbr-brass); border-block-end-color: var(--hbr-brass); }

@media (max-width: 47rem) {
  .hbr-latch { display: block; }
  .hbr-passage { display: none; }
  .hbr-switch:checked ~ .hbr-passage { display: block; }
  .hbr-passage ul { flex-direction: column; gap: 0; }
  .hbr-passage li + li { border-block-start: 1px solid var(--hbr-rule); }
  .hbr-passage a { text-align: center; padding: 0.75rem 0; border: 0; }
}

/* =========================================================================
   ORNEMENT : la ligne de maree, trois filets de laiton et un flotteur
   ========================================================================= */
.hbr-tideline {
  color: var(--hbr-brass);
  display: flex; justify-content: center;
  padding-block: clamp(1.5rem, 4vw, 2.6rem);
}
.hbr-tideline svg { width: min(15rem, 60%); height: auto; }

/* =========================================================================
   LA UNE : titre au-dessus, photo pleine largeur, intro en deux colonnes
   ========================================================================= */
.hbr-cover { padding-block: clamp(1.6rem, 4vw, 3rem) 0; text-align: center; }
.hbr-cover__kicker {
  font-family: var(--hbr-case); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--hbr-brass); margin-bottom: 0.85rem;
}
.hbr-cover__title {
  font-size: clamp(2.1rem, 6.2vw, 3.6rem);
  max-width: 22ch; margin-inline: auto; margin-bottom: 1.15rem;
  letter-spacing: -0.022em;
}
.hbr-cover__view { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); }
.hbr-cover__view img { width: 100%; border-block: var(--hbr-brassrule); }
.hbr-cover__intro {
  text-align: left;
  columns: 2; column-gap: clamp(1.4rem, 4vw, 2.8rem); column-rule: var(--hbr-hair);
  font-size: 1.09rem; color: var(--hbr-ink);
}
.hbr-cover__intro p { margin-bottom: 0.9rem; break-inside: avoid; }
.hbr-cover__intro p:first-child::first-letter {
  float: left; font-family: var(--hbr-display); font-weight: 700;
  font-size: 3.05em; line-height: 0.82; padding: 0.06em 0.12em 0 0;
  color: var(--hbr-cedar);
}
@media (max-width: 45rem) { .hbr-cover__intro { columns: 1; } }

.hbr-planks { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 0.4rem; }
.hbr-plank {
  display: inline-block; padding: 0.62rem 1.35rem;
  background: var(--hbr-deep); color: var(--hbr-on-deep);
  font-family: var(--hbr-case); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.13em; text-decoration: none;
  border: 1px solid var(--hbr-deep);
}
.hbr-plank:hover { background: var(--hbr-cedar); border-color: var(--hbr-cedar); color: var(--hbr-on-deep); }
.hbr-plank--hollow { background: transparent; color: var(--hbr-deep); border-color: var(--hbr-brass); }
.hbr-plank--hollow:hover { background: var(--hbr-cedar-soft); color: var(--hbr-cedar); }

.hbr-soundings {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(1.4rem, 5vw, 3.4rem);
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding: 0.9rem 0 0;
  border-block-start: var(--hbr-hair);
  list-style: none;
}
.hbr-soundings li { text-align: center; }
.hbr-soundings b {
  display: block; font-family: var(--hbr-display);
  font-size: 1.7rem; color: var(--hbr-brass); line-height: 1.1;
}
.hbr-soundings span {
  font-family: var(--hbr-case); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--hbr-ink-2);
}

/* =========================================================================
   SOMMAIRE ILLUSTRE : trois entrees, photo, numero de laiton, liste de titres
   ========================================================================= */
.hbr-contents { padding-block: 0 var(--hbr-air); }
.hbr-contents__head { text-align: center; margin-bottom: clamp(1.3rem, 3vw, 2rem); }
.hbr-contents__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
.hbr-contents__head p { color: var(--hbr-ink-2); max-width: 52ch; margin-inline: auto; }
.hbr-contents ol {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin: 0; padding: 0; list-style: none;
}
.hbr-entry { display: flex; flex-direction: column; }
.hbr-entry__view { position: relative; margin: 0 0 0.85rem; }
.hbr-entry__view img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hbr-entry__no {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  background: var(--hbr-deep); color: var(--hbr-brass-deep);
  font-family: var(--hbr-case); font-size: 0.75rem; letter-spacing: 0.18em;
  padding: 0.3rem 0.7rem;
}
.hbr-entry h3 { font-size: 1.28rem; margin-bottom: 0.4rem; }
.hbr-entry h3 a { color: inherit; text-decoration: none; }
.hbr-entry h3 a:hover { color: var(--hbr-cedar); text-decoration: underline; }
.hbr-entry > p { color: var(--hbr-ink-2); font-size: 0.98rem; }
.hbr-entry__list {
  margin: auto 0 0; padding: 0.7rem 0 0; list-style: none;
  border-block-start: 1px solid var(--hbr-rule);
  font-family: var(--hbr-case); font-size: 0.88rem; line-height: 1.4;
}
.hbr-entry__list li { padding-block: 0.32rem; }
.hbr-entry__list li + li { border-block-start: 1px dotted var(--hbr-rule); }
.hbr-entry__list a { text-decoration: none; }
.hbr-entry__list a:hover { text-decoration: underline; }
@media (max-width: 56rem) { .hbr-contents ol { grid-template-columns: 1fr; } }

/* =========================================================================
   BANDES DE RUBRIQUE : un article de tete large, puis des lignes a vignette
   ========================================================================= */
.hbr-band { padding-block: var(--hbr-air); border-block-start: var(--hbr-hair); }
.hbr-band--fog { background: var(--hbr-wash); }
.hbr-band__head {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem;
  align-items: baseline; margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
  padding-block-end: 0.7rem; border-block-end: var(--hbr-brassrule);
}
.hbr-band__no {
  font-family: var(--hbr-display); font-size: 2.3rem; line-height: 0.9;
  color: var(--hbr-brass); grid-row: span 2;
}
.hbr-band__head h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); margin: 0; }
.hbr-band__note { grid-column: 2; margin: 0; color: var(--hbr-ink-2); max-width: 62ch; font-size: 0.99rem; }
.hbr-band__more {
  grid-column: 2; justify-self: start; margin-top: 0.45rem;
  font-family: var(--hbr-case); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.15em;
}

.hbr-lead {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.1rem, 3vw, 2.2rem); align-items: center;
  background: var(--hbr-paper); border: var(--hbr-hair);
  padding: clamp(0.9rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}
.hbr-lead__view { margin: 0; }
.hbr-lead__view img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hbr-lead__copy p:last-child { margin-bottom: 0; }
.hbr-lead__copy h3 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
.hbr-lead__copy h3 a { color: inherit; text-decoration: none; }
.hbr-lead__copy h3 a:hover { color: var(--hbr-cedar); text-decoration: underline; }
@media (max-width: 52rem) { .hbr-lead { grid-template-columns: 1fr; } }

.hbr-notes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hbr-note {
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: clamp(0.8rem, 2vw, 1.4rem); align-items: start;
  padding-block: clamp(0.9rem, 2vw, 1.3rem);
  border-block-start: 1px solid var(--hbr-rule);
}
.hbr-note:first-child { border-block-start: 0; }
.hbr-note__view { margin: 0; }
.hbr-note__view img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hbr-note__copy h3 { font-size: 1.16rem; margin-bottom: 0.3rem; }
.hbr-note__copy h3 a { color: inherit; text-decoration: none; }
.hbr-note__copy h3 a:hover { color: var(--hbr-cedar); text-decoration: underline; }
.hbr-note__copy p { margin: 0; color: var(--hbr-ink-2); font-size: 0.97rem; }
.hbr-note__tag {
  font-family: var(--hbr-case); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--hbr-brass); margin-bottom: 0.25rem;
}
@media (min-width: 52rem) {
  .hbr-notes { grid-template-columns: 1fr 1fr; column-gap: clamp(1.4rem, 3vw, 2.6rem); }
  .hbr-note:nth-child(2) { border-block-start: 0; }
  .hbr-notes--single { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) { .hbr-note { grid-template-columns: 5.5rem 1fr; } }

/* =========================================================================
   LA SELECTION : cinq colonnes hautes, photo verticale et numero
   ========================================================================= */
.hbr-shelf { padding-block: var(--hbr-air); border-block-start: var(--hbr-hair); }
.hbr-shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; margin-bottom: clamp(1.1rem, 3vw, 1.8rem); }
.hbr-shelf__head h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); margin: 0; }
.hbr-shelf__head p { margin: 0; color: var(--hbr-ink-2); font-size: 0.98rem; flex: 1 1 22rem; }
.hbr-shelf ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.8rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.hbr-pick { display: flex; flex-direction: column; }
.hbr-pick__view { position: relative; margin: 0 0 0.65rem; }
.hbr-pick__view img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(0.92); }
.hbr-pick__no {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  background: var(--hbr-brass); color: #fff;
  font-family: var(--hbr-case); font-size: 0.72rem; letter-spacing: 0.12em;
  padding: 0.22rem 0.55rem;
}
.hbr-pick h3 { font-size: 1.03rem; margin-bottom: 0.25rem; }
.hbr-pick h3 a { color: inherit; text-decoration: none; }
.hbr-pick h3 a:hover { color: var(--hbr-cedar); text-decoration: underline; }
.hbr-pick p { margin: 0; font-size: 0.9rem; color: var(--hbr-ink-2); }
@media (max-width: 62rem) { .hbr-shelf ol { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 38rem) { .hbr-shelf ol { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   ALMANACH : la bande sombre, comment la revue est ecrite
   ========================================================================= */
.hbr-almanac {
  background: var(--hbr-deep); color: var(--hbr-on-deep);
  padding-block: var(--hbr-air);
}
.hbr-almanac h2 { color: var(--hbr-on-deep); font-size: clamp(1.45rem, 3.4vw, 2rem); }
.hbr-almanac p { color: var(--hbr-on-deep-2); }
.hbr-almanac a { color: var(--hbr-brass-deep); }
.hbr-almanac .hbr-cover__kicker { color: var(--hbr-brass-deep); }
.hbr-almanac a:hover { color: var(--hbr-on-deep); }
.hbr-almanac__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); }
.hbr-almanac__grid > div > p:last-child { margin-bottom: 0; }
.hbr-almanac__links { list-style: none; margin: 0; padding: 0; font-family: var(--hbr-case); letter-spacing: 0.03em; }
.hbr-almanac__links li { padding-block: 0.55rem; border-block-start: 1px solid var(--hbr-rule-deep); }
.hbr-almanac__links li:first-child { border-block-start: 0; }
@media (max-width: 52rem) { .hbr-almanac__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   PAGES INTERIEURES : fil d'Ariane, titraille, figure large
   ========================================================================= */
.hbr-course { padding-block: 1rem 0.2rem; font-family: var(--hbr-case); font-size: 0.76rem; letter-spacing: 0.08em; color: var(--hbr-ink-2); }
.hbr-course ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.hbr-course li + li::before { content: "› "; color: var(--hbr-brass); }
.hbr-course a { text-decoration: none; }
.hbr-course a:hover { text-decoration: underline; }

.hbr-opening { padding-block: clamp(1rem, 2.5vw, 1.7rem) 0; max-width: 46rem; }
.hbr-kicker {
  font-family: var(--hbr-case); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--hbr-brass); margin-bottom: 0.7rem;
}
.hbr-kicker a { color: inherit; text-decoration: none; }
.hbr-kicker a:hover { color: var(--hbr-cedar); text-decoration: underline; }
.hbr-opening h1 { font-size: clamp(1.95rem, 5.2vw, 3.05rem); letter-spacing: -0.022em; }
.hbr-standfirst { font-size: 1.16rem; color: var(--hbr-ink-2); max-width: 44ch; }
.hbr-byline {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem;
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem); padding-block: 0.6rem;
  border-block: 1px solid var(--hbr-rule);
  list-style: none;
  font-family: var(--hbr-case); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--hbr-ink-2);
}

.hbr-overleaf { margin: 0 0 clamp(1.5rem, 3.5vw, 2.4rem); }
.hbr-overleaf img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-block-start: var(--hbr-brassrule); }
.hbr-overleaf figcaption {
  padding-top: 0.5rem; font-family: var(--hbr-case);
  font-size: 0.78rem; color: var(--hbr-ink-2); letter-spacing: 0.02em;
  max-width: 62ch;
}

/* =========================================================================
   QUAI : colonne de lecture + marge
   ========================================================================= */
.hbr-quay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hbr-margin-col);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  padding-block-end: var(--hbr-air);
}
@media (max-width: 62rem) { .hbr-quay { grid-template-columns: 1fr; } }

.hbr-column { max-width: var(--hbr-measure); font-size: 1.09rem; }
.hbr-column > p:first-of-type { font-size: 1.16rem; color: var(--hbr-ink); }
.hbr-column > p:first-of-type::first-letter {
  float: left; font-family: var(--hbr-display); font-weight: 700;
  font-size: 3.1em; line-height: 0.82; padding: 0.05em 0.11em 0 0;
  color: var(--hbr-cedar);
}
.hbr-column h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.65rem);
  margin-top: clamp(1.9rem, 4vw, 2.6rem);
  padding-block-end: 0.35rem;
  border-block-end: 1px solid var(--hbr-rule);
}
.hbr-column h3 { font-size: 1.16rem; margin-top: 1.5rem; }
.hbr-column ul, .hbr-column ol { padding-inline-start: 1.15rem; }
.hbr-column li { margin-bottom: 0.4rem; }
.hbr-column strong { font-weight: 700; }
.hbr-column a { text-decoration-color: var(--hbr-brass); }

.hbr-margin { font-size: 0.96rem; }
.hbr-slip { margin-bottom: 1.6rem; padding-block-start: 0.65rem; border-block-start: var(--hbr-brassrule); }
.hbr-slip--wash { background: var(--hbr-cedar-soft); border-block-start-color: var(--hbr-cedar); padding: 0.8rem 0.95rem 0.95rem; }
.hbr-slip__title {
  font-family: var(--hbr-case); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--hbr-ink-2); margin-bottom: 0.55rem;
}
.hbr-slip ul, .hbr-slip ol { margin: 0; padding-inline-start: 1.05rem; }
.hbr-slip ol { list-style: decimal; }
.hbr-slip li { margin-bottom: 0.42rem; line-height: 1.45; }
.hbr-slip p { margin-bottom: 0.6rem; }
.hbr-slip p:last-child { margin-bottom: 0; }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.hbr-wake { background: var(--hbr-deep-2); color: var(--hbr-on-deep); padding-block: var(--hbr-air) 1.4rem; }
.hbr-wake h2 {
  color: var(--hbr-on-deep); font-family: var(--hbr-case);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; margin-bottom: 0.75rem;
}
.hbr-wake p { color: var(--hbr-on-deep-2); }
.hbr-wake a { color: var(--hbr-on-deep); }
.hbr-wake a:hover { color: var(--hbr-brass-deep); }
.hbr-wake ul { list-style: none; margin: 0; padding: 0; }
.hbr-wake li { padding-block: 0.28rem; }
.hbr-wake__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); }
.hbr-wake__grid .hbr-wordmark { justify-content: flex-start; padding-block: 0 0.7rem; color: var(--hbr-on-deep); }
.hbr-wake__grid .hbr-wordmark__name { font-size: 1.4rem; }
.hbr-wake__grid .hbr-wordmark__line { color: var(--hbr-on-deep-2); }
.hbr-wake__sign { font-family: var(--hbr-case); font-size: 0.86rem; letter-spacing: 0.04em; color: var(--hbr-on-deep); }
.hbr-wake__line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.2rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--hbr-rule-deep);
  font-family: var(--hbr-case); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--hbr-on-deep-2);
}
@media (max-width: 52rem) { .hbr-wake__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   404
   ========================================================================= */
.hbr-shut { padding-block: clamp(3rem, 9vw, 6rem); max-width: 44rem; }
.hbr-shut h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }