/* =====================================================================
   The Perch Post  ·  assets-src/style.css
   Skeleton reused: galerie-visuelle, entirely rehoused for this site.
   Class prefix: avi- (aviary lexicon: perch, plume, covey, roost, clutch).

   Direction: a warm aviary magazine printed on linen. The ground is a
   woven oatmeal, never white; the reading sheet is one shade brighter.
   Headings are set in a SLAB serif, the running text in a geometric
   humanist sans: the opposite pairing of the donor sheet, which used a
   didone over an old style humanist.

   Rhythm: a 12 column mosaic whose bands each keep their OWN cadence,
   7/5 then 12, then 12 then 6/6, then 5/7. Photographs are never framed,
   never rounded, never shadowed; they carry a two pixel paprika edge on
   the left only, the way a proof sheet is marked. Full width plates
   separate the bands.

   No external request, no web font file, no script.
   ===================================================================== */

:root {
  color-scheme: light;

  /* --- grounds: linen ------------------------------------------------ */
  --avi-linen:       #f2eade;   /* woven oatmeal, the page                */
  --avi-linen-lit:   #fbf7f0;   /* the reading sheet, one shade brighter  */
  --avi-linen-low:   #e6d9c5;   /* recessed band                          */
  --avi-thread:      #d5c4a8;   /* hairline on linen                      */
  --avi-thread-fine: #e2d5bf;   /* lighter hairline                       */

  /* --- inks ---------------------------------------------------------- */
  --avi-ink:         #221f1a;   /* warm near black                        */
  --avi-ink-mute:    #5d5648;   /* captions, secondary                    */

  /* --- the two colours of the bird ----------------------------------- */
  --avi-teal:        #0f6a70;   /* macaw teal, links on linen             */
  --avi-teal-deep:   #084b50;   /* hover: darker than the link            */
  --avi-teal-night:  #0c383c;   /* the dark band and the roost            */
  --avi-paprika:     #b23f22;   /* numerals, rules, small capitals        */
  --avi-paprika-lit: #eb9c82;   /* paprika made readable on the night     */

  /* --- text laid on the night band ----------------------------------- */
  --avi-on-night:      #f0e6d6;
  --avi-on-night-mute: #b9cbc8;
  --avi-on-night-line: #23575b;

  /* --- letters -------------------------------------------------------- */
  --avi-slab: Superclarendon, "Bookman Old Style", Rockwell, "Roboto Slab", Georgia, "Times New Roman", serif;
  --avi-sans: "Avenir Next", Avenir, "Century Gothic", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --avi-track: 0.15em;          /* tracking of the small capitals         */

  /* --- rhythm --------------------------------------------------------- */
  --avi-rail:  1240px;          /* width of the magazine                  */
  --avi-read:  40rem;           /* the reading measure                    */
  --avi-edge:  clamp(1.1rem, 4.4vw, 3.2rem);
  --avi-gut:   clamp(1rem, 2vw, 2rem);
  --avi-air:   clamp(3rem, 6.5vw, 6rem);
  --avi-corner: 0;              /* square, always                         */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--avi-linen);
  color: var(--avi-ink);
  font-family: var(--avi-sans);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.09rem);
  line-height: 1.68;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--avi-slab);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.45rem + 2.1vw, 3.05rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); }
h3 { font-size: clamp(1.13rem, 1.02rem + 0.5vw, 1.4rem); }
p, ul, ol, table { margin: 0 0 1.15em; }

a { color: var(--avi-teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--avi-teal-deep); }
:focus-visible { outline: 3px solid var(--avi-paprika); outline-offset: 2px; }

.avi-skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--avi-teal-night); color: var(--avi-on-night);
  padding: 0.7rem 1.1rem; font-weight: 600;
}
.avi-skip:focus { left: 0; }

.avi-rail {
  width: 100%; max-width: var(--avi-rail);
  margin-inline: auto; padding-inline: var(--avi-edge);
}

/* small capitals used for every kicker and tag of the magazine */
.avi-cap {
  font-family: var(--avi-sans);
  font-size: 0.71rem; font-weight: 700;
  letter-spacing: var(--avi-track); text-transform: uppercase;
  color: var(--avi-paprika); margin: 0 0 0.6rem;
}

/* ---------------------------------------------------------------- flight
   The masthead. A linen bar, the wordmark set in slab with a paprika
   rule beneath it, and the sections pushed to the right.             */
.avi-flight {
  background: var(--avi-linen-lit);
  border-bottom: 1px solid var(--avi-thread);
}
.avi-flight__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1rem;
}
.avi-flight__mark {
  display: inline-block; text-decoration: none; color: var(--avi-ink);
  font-family: var(--avi-slab); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 600; line-height: 1.05;
  border-bottom: 3px solid var(--avi-paprika); padding-bottom: 0.2rem;
}
.avi-flight__mark:hover { color: var(--avi-teal-deep); }
.avi-flight__tag {
  display: block; margin-top: 0.35rem;
  font-family: var(--avi-sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: var(--avi-track); text-transform: uppercase;
  color: var(--avi-ink-mute); border: 0;
}

.avi-nav { position: relative; z-index: 5; }
.avi-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.15rem 1.35rem; justify-content: flex-end;
}
.avi-nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
.avi-nav__handle {
  font-size: 0.79rem; font-weight: 700; letter-spacing: var(--avi-track);
  text-transform: uppercase; color: var(--avi-ink);
  border: 1px solid var(--avi-thread); padding: 0.55rem 0.9rem; background: var(--avi-linen);
}
.avi-nav a {
  display: inline-block; padding: 0.3rem 0; text-decoration: none;
  font-size: 0.79rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--avi-ink);
  border-bottom: 2px solid transparent;
}
.avi-nav a:hover { color: var(--avi-teal-deep); border-bottom-color: var(--avi-teal); }
.avi-nav a[aria-current="page"] { color: var(--avi-paprika); border-bottom-color: var(--avi-paprika); }

@media (min-width: 54rem) {
  .avi-nav__handle { display: none; }
}
@media (max-width: 53.99rem) {
  .avi-flight__row { flex-direction: column; align-items: flex-start; }
  .avi-nav { width: 100%; }
  .avi-nav__handle { display: inline-block; cursor: pointer; }
  .avi-nav ul { display: none; }
  .avi-nav__toggle:checked ~ ul {
    display: grid; gap: 0.5rem; padding-top: 0.8rem;
    justify-content: stretch;
    border: 1px solid var(--avi-thread); background: var(--avi-linen);
  }
  .avi-nav__toggle:checked ~ ul li + li { border-top: 1px solid var(--avi-thread-fine); }
  .avi-nav__toggle:checked ~ ul a { display: block; padding: 0.65rem 0.9rem; border-bottom: 0; }
}

/* ---------------------------------------------------------------- perch
   The opening. The photograph sits on the right of the h1, and the linen
   slab that carries the title overlaps its left edge.                 */
.avi-perch { padding-block: clamp(2rem, 4.5vw, 3.6rem) 0; }
.avi-perch__grid {
  display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  align-items: center; gap: 0;
}
.avi-perch__slab {
  background: var(--avi-linen-lit);
  border-top: 4px solid var(--avi-paprika);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  margin-right: clamp(-4rem, -3vw, -1.5rem);
  position: relative; z-index: 2;
}
.avi-perch__deck {
  font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.2rem);
  color: var(--avi-ink-mute); margin-bottom: 1.4rem;
}
.avi-perch__plate { margin: 0; }
.avi-perch__plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.avi-cue {
  display: inline-block; text-decoration: none;
  background: var(--avi-teal); color: var(--avi-linen-lit);
  padding: 0.85rem 1.6rem;
  font-size: 0.79rem; font-weight: 700;
  letter-spacing: var(--avi-track); text-transform: uppercase;
}
.avi-cue:hover, .avi-cue:focus { background: var(--avi-teal-deep); color: #fff; }

@media (max-width: 860px) {
  .avi-perch__grid { grid-template-columns: minmax(0, 1fr); }
  .avi-perch__slab { margin-right: 0; order: 2; margin-top: -2.5rem; margin-left: var(--avi-edge); }
  .avi-perch__plate { order: 1; }
}

/* ---------------------------------------------------------------- index
   The contents strip under the opening: three numbered lines.        */
.avi-index {
  list-style: none; margin: clamp(2rem, 4vw, 3.2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--avi-thread);
}
.avi-index__entry { border-bottom: 1px solid var(--avi-thread); padding: 1rem 0; }
.avi-index__entry + .avi-index__entry { border-left: 0; }
.avi-index__no {
  font-family: var(--avi-slab); font-size: 0.95rem; font-weight: 700;
  color: var(--avi-paprika); margin-right: 0.65rem;
}
.avi-index__entry a { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--avi-thread); }
.avi-index__entry a:hover { border-bottom-color: var(--avi-teal-deep); }
@media (min-width: 720px) {
  .avi-index__entry + .avi-index__entry { border-left: 1px solid var(--avi-thread); padding-left: 1.4rem; }
}

/* ---------------------------------------------------------------- covey
   Three tall tiles, one per section, cropped to a portrait plate.     */
.avi-covey {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--avi-gut);
}
.avi-covey__tile { position: relative; background: var(--avi-linen-lit); }
.avi-covey__view { overflow: hidden; }
.avi-covey__view img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.avi-covey__label { padding: 1.05rem 1.15rem 1.3rem; border-left: 2px solid var(--avi-paprika); }
.avi-covey__no {
  font-family: var(--avi-slab); font-size: 1.5rem; font-weight: 700;
  color: var(--avi-paprika); line-height: 1; display: block; margin-bottom: 0.4rem;
}
.avi-covey__name { margin: 0 0 0.45rem; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); }
.avi-covey__link { text-decoration: none; color: var(--avi-ink); }
.avi-covey__link::after { content: ""; position: absolute; inset: 0; }
.avi-covey__tile:hover .avi-covey__link { color: var(--avi-teal-deep); }
.avi-covey__note { margin: 0; font-size: 0.9rem; color: var(--avi-ink-mute); }
@media (max-width: 780px) { .avi-covey { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- band
   A band of the magazine. Its head carries the number and the note.   */
.avi-band { padding-block: var(--avi-air); }
.avi-band--low { background: var(--avi-linen-low); }
.avi-band--night { background: var(--avi-teal-night); color: var(--avi-on-night); }
.avi-band--night h2, .avi-band--night h3 { color: var(--avi-on-night); }
.avi-band--night a { color: var(--avi-paprika-lit); }
.avi-band--night a:hover { color: #fff; }
.avi-band--night .avi-cap { color: var(--avi-paprika-lit); }
.avi-band--night .avi-band__note { color: var(--avi-on-night-mute); }
.avi-band--night .avi-plume { background: transparent; border-color: var(--avi-on-night-line); }
.avi-band--night .avi-plume__link { color: var(--avi-on-night); }
.avi-band--night .avi-plume__note { color: var(--avi-on-night-mute); }
.avi-band--night .avi-plume__tag { color: var(--avi-paprika-lit); }

.avi-band__head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem 2.5rem;
  border-top: 3px solid var(--avi-ink); padding-top: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.avi-band--night .avi-band__head { border-top-color: var(--avi-paprika-lit); }
.avi-band__title { margin: 0; }
.avi-band__no {
  font-family: var(--avi-slab); color: var(--avi-paprika);
  font-size: 0.95em; margin-right: 0.6rem;
}
.avi-band--night .avi-band__no { color: var(--avi-paprika-lit); }
.avi-band__note { margin: 0; color: var(--avi-ink-mute); max-width: 44rem; }
@media (min-width: 900px) {
  .avi-band__head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; }
}

/* ---------------------------------------------------------------- clutch
   The mosaic. Twelve columns; every entry declares its own span and its
   own plate ratio, so no two bands share a cadence.                   */
.avi-clutch {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) var(--avi-gut);
}
.avi-plume { position: relative; grid-column: span 12; }
.avi-plume__view { overflow: hidden; margin-bottom: 0.85rem; border-left: 2px solid var(--avi-paprika); }
.avi-plume__view img { width: 100%; object-fit: cover; }
.avi-plume--pano  .avi-plume__view img { aspect-ratio: 21 / 9; }
.avi-plume--wide  .avi-plume__view img { aspect-ratio: 16 / 9; }
.avi-plume--sheet .avi-plume__view img { aspect-ratio: 3 / 2; }
.avi-plume--tall  .avi-plume__view img { aspect-ratio: 4 / 5; }
.avi-plume--square .avi-plume__view img { aspect-ratio: 1 / 1; }
.avi-plume__tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: var(--avi-track);
  text-transform: uppercase; color: var(--avi-paprika); margin: 0 0 0.35rem;
}
.avi-plume__title { margin: 0 0 0.45rem; }
.avi-plume__link { text-decoration: none; color: var(--avi-ink); }
.avi-plume__link::after { content: ""; position: absolute; inset: 0; }
.avi-plume:hover .avi-plume__link { color: var(--avi-teal-deep); }
.avi-plume__note { margin: 0; font-size: 0.92rem; color: var(--avi-ink-mute); }

/* the wide entry: plate on the left, text set beside it */
.avi-plume--rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--avi-gut); align-items: center; }
.avi-plume--rail .avi-plume__view { margin-bottom: 0.85rem; }
.avi-plume--rail .avi-plume__title { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem); }

@media (min-width: 760px) {
  .avi-plume--s4 { grid-column: span 4; }
  .avi-plume--s5 { grid-column: span 5; }
  .avi-plume--s6 { grid-column: span 6; }
  .avi-plume--s7 { grid-column: span 7; }
  .avi-plume--s12 { grid-column: span 12; }
  .avi-plume--rail { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .avi-plume--rail .avi-plume__view { margin-bottom: 0; }
  .avi-plume--lead .avi-plume__title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem); }
}
@media (min-width: 560px) and (max-width: 759px) {
  .avi-plume--s4, .avi-plume--s5, .avi-plume--s6 { grid-column: span 6; }
}

@media (min-width: 900px) { .avi-plume--drop { margin-top: clamp(2rem, 5vw, 5rem); } }

/* ---------------------------------------------------------------- planche
   A full width plate between two bands, with its line of context.     */
.avi-planche { margin: 0; }
.avi-planche__view img { width: 100%; aspect-ratio: 32 / 9; object-fit: cover; }
.avi-planche__note {
  margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--avi-ink-mute);
  border-left: 2px solid var(--avi-paprika); padding-left: 0.8rem;
}
@media (max-width: 700px) { .avi-planche__view img { aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------- note
   The editorial note that closes the home.                            */
.avi-note { max-width: calc(var(--avi-read) + 4rem); }
.avi-note p { font-size: 1.02rem; }

/* ---------------------------------------------------------------- trail */
.avi-trail { padding-block: 1.1rem 0; font-size: 0.82rem; }
.avi-trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.avi-trail li + li::before { content: "/"; color: var(--avi-paprika); margin-right: 0.5rem; }
.avi-trail [aria-current="page"] { color: var(--avi-ink-mute); }

/* ---------------------------------------------------------------- sheet
   The opening block of an inside page.                                */
.avi-sheet { padding-block: clamp(1.4rem, 3vw, 2.4rem) 0; max-width: 46rem; }
.avi-sheet__deck {
  font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.18rem); color: var(--avi-ink-mute); margin-bottom: 1rem;
}
.avi-sheet__meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  margin: 0; padding: 0.8rem 0 0; border-top: 1px solid var(--avi-thread);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--avi-ink-mute);
}
.avi-spread { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; }
.avi-spread img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.avi-spread figcaption {
  margin-top: 0.65rem; font-size: 0.84rem; color: var(--avi-ink-mute);
  border-left: 2px solid var(--avi-paprika); padding-left: 0.8rem;
}

/* ---------------------------------------------------------------- column
   The reading sheet. This is the article body.                        */
.avi-column {
  background: var(--avi-linen-lit);
  max-width: 46rem;
  margin: clamp(1.8rem, 3.5vw, 3rem) 0 0;
  padding: clamp(1.6rem, 3.5vw, 3rem) clamp(1.3rem, 3vw, 3rem);
  border-top: 3px solid var(--avi-ink);
}
.avi-column > :last-child { margin-bottom: 0; }
.avi-column h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  margin-top: 2.1em; padding-top: 0.55rem; border-top: 1px solid var(--avi-thread);
}
.avi-column h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.avi-column h3 { margin-top: 1.7em; color: var(--avi-teal-deep); }
.avi-column ul, .avi-column ol { padding-left: 1.25rem; }
.avi-column li { margin-bottom: 0.5em; }
.avi-column a { font-weight: 600; }
.avi-column table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.avi-column th, .avi-column td { border: 1px solid var(--avi-thread); padding: 0.55rem 0.7rem; text-align: left; }
.avi-column th { background: var(--avi-linen-low); font-family: var(--avi-slab); }
.avi-scroll { overflow-x: auto; margin-bottom: 1.15em; }

/* the reading grid: the sheet on the left axis, the onward rail beside it */
.avi-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
@media (min-width: 1080px) {
  .avi-page { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
  .avi-page .avi-onward { position: sticky; top: 1.5rem; }
}

/* ---------------------------------------------------------------- onward */
.avi-onward {
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  border-top: 3px solid var(--avi-paprika); padding-top: 1.2rem;
}
.avi-onward h2 { font-size: 1.2rem; }
.avi-onward ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.avi-onward li { border-bottom: 1px solid var(--avi-thread); padding-bottom: 0.9rem; }
.avi-onward a { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--avi-thread); }
.avi-onward a:hover { border-bottom-color: var(--avi-teal-deep); }
.avi-onward__tag { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: var(--avi-track); text-transform: uppercase; color: var(--avi-paprika); }
@media (min-width: 800px) and (max-width: 1079px) { .avi-onward ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }

/* ---------------------------------------------------------------- roost
   The foot of the magazine, on the night band.                        */
.avi-roost {
  margin-top: var(--avi-air);
  background: var(--avi-teal-night); color: var(--avi-on-night);
  border-top: 5px solid var(--avi-paprika);
}
.avi-roost__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.8rem clamp(1.5rem, 3vw, 3rem); padding-block: clamp(2.2rem, 4vw, 3.4rem);
}
.avi-roost h2 {
  font-size: 0.75rem; font-family: var(--avi-sans); font-weight: 700;
  letter-spacing: var(--avi-track); text-transform: uppercase;
  color: var(--avi-paprika-lit); margin-bottom: 0.9rem;
}
.avi-roost ul { list-style: none; margin: 0; padding: 0; }
.avi-roost li { margin-bottom: 0.5rem; }
.avi-roost a { color: var(--avi-on-night); text-decoration: none; border-bottom: 1px solid var(--avi-on-night-line); }
.avi-roost a:hover { color: #fff; border-bottom-color: var(--avi-paprika-lit); }
.avi-roost__sign {
  border-top: 1px solid var(--avi-on-night-line);
  padding-block: 1.1rem 1.6rem;
  font-size: 0.82rem; color: var(--avi-on-night-mute);
}
.avi-roost__sign strong { color: var(--avi-on-night); font-weight: 600; }

/* ---------------------------------------------------------------- lost */
.avi-lost { padding-block: var(--avi-air); max-width: var(--avi-read); }