/* ==========================================================================
   The Fifth String, house sheet
   Acoustic roots music notebook. Warm paper, brass, pine.
   System typefaces only. No external requests anywhere in this file.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root{
  color-scheme: light dark;

  /* surfaces */
  --sheet:        #f6f1e5;   /* warm oat, the page */
  --sheet-2:      #fbf8f0;   /* raised card */
  --sheet-3:      #ece3cf;   /* sunken panel */
  --sheet-lit:    #fdfaf3;   /* text on dark blocks */

  /* text */
  --grain:        #1d2017;   /* olive black */
  --grain-2:      #55584a;   /* muted */
  --grain-3:      #7d8071;   /* faint */

  /* accents pulled from the subject: brass hardware, pine rim, old rosewood */
  --brass:        #9d6c1c;
  --brass-lit:    #c99a3d;
  --pine:         #23503f;
  --pine-lit:     #35705a;
  --rosewood:     #8e4526;

  /* lines and shade */
  --rule:         rgba(29,32,23,.14);
  --rule-firm:    rgba(29,32,23,.28);
  --wash:         rgba(29,32,23,.045);
  --lift:         0 1px 2px rgba(29,32,23,.05), 0 18px 38px -26px rgba(29,32,23,.55);
  --lift-hi:      0 2px 4px rgba(29,32,23,.07), 0 26px 50px -24px rgba(29,32,23,.6);

  /* type */
  --face-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --face-text:    Georgia, "Iowan Old Style", Palatino, "Times New Roman", serif;
  --face-meta:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-note:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* measure and rhythm */
  --shell:        74rem;
  --measure:      40rem;
  --band-pad:     clamp(3.25rem, 7vw, 6.75rem);
  --gap:          clamp(1.1rem, 2.4vw, 2rem);

  --r-sm:         5px;
  --r-md:         12px;
  --r-lg:         20px;
  --r-pill:       999px;
}

/* --------------------------------------------------------------- 2. base */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body{
  margin: 0;
  background-color: var(--sheet);
  background-image:
    radial-gradient(58rem 30rem at 88% -6%, rgba(201,154,61,.16), transparent 62%),
    radial-gradient(46rem 26rem at -8% 8%, rgba(35,80,63,.10), transparent 60%);
  background-attachment: fixed;
  color: var(--grain);
  font-family: var(--face-text);
  font-size: clamp(1.02rem, .985rem + .22vw, 1.14rem);
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4{
  font-family: var(--face-display);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1{ font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem); }
h2{ font-size: clamp(1.72rem, 1.28rem + 1.9vw, 2.7rem); }
h3{ font-size: clamp(1.22rem, 1.06rem + .8vw, 1.6rem); line-height: 1.2; }
h4{ font-size: 1.06rem; line-height: 1.3; letter-spacing: 0; }

p{ margin: 0; }
blockquote, figure, dl, dd{ margin: 0; }

a{ color: inherit; }

img, svg{ max-width: 100%; }

::selection{ background: var(--brass-lit); color: #fff; }

:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.hop{
  position: absolute;
  left: .75rem; top: -6rem;
  z-index: 99;
  padding: .75rem 1.15rem;
  background: var(--grain);
  color: var(--sheet-lit);
  font: 600 .85rem/1 var(--face-meta);
  border-radius: var(--r-pill);
  transition: top .18s ease;
}
.hop:focus{ top: .75rem; }

/* --------------------------------------------------------------- 3. layout */

.shell{
  width: min(100% - 2.25rem, var(--shell));
  margin-inline: auto;
}
.shell--tight{ width: min(100% - 2.25rem, 58rem); }

.band{ padding-block: var(--band-pad); }
.band--sunken{
  background: var(--sheet-3);
  border-block: 1px solid var(--rule);
}
.band--pine{
  background: var(--pine);
  color: var(--sheet-lit);
}
.band--pine h2,
.band--pine h3{ color: var(--sheet-lit); }
.band--pine .band__intro{ color: rgba(253,250,243,.78); max-width: 40ch; }
.band--pine .slugline{ color: var(--brass-lit); }
.band--pine .setlist h3{ margin-bottom: .6rem; }
.band--pine .push-row{ margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.band__head{
  display: grid;
  gap: .85rem;
  max-width: 52ch;
  margin-bottom: clamp(1.8rem, 4vw, 3.1rem);
}
.band__head--wide{ max-width: none; }
.band__intro{
  color: var(--grain-2);
  font-size: 1.06em;
  max-width: 46ch;
}

.slugline{
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font: 600 .72rem/1 var(--face-meta);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.slugline::before{
  content: "";
  flex: 0 0 auto;
  width: 1.7rem;
  height: 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  height: 5px;
}

/* string bundle divider */
.fret{
  border: 0;
  margin: 0;
  height: 11px;
  background-image:
    linear-gradient(var(--rule-firm), var(--rule-firm)),
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule));
  background-size: 100% 2px, 100% 1px, 100% 1px, 100% 1px;
  background-position: 0 0, 0 4px, 0 7px, 0 10px;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------- 4. rail */

.rail{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246,241,229,.93);
  backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid var(--rule);
}
.rail__in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.35rem;
  flex-wrap: wrap;
}
.mark{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--grain);
}
.mark svg{ flex: 0 0 auto; display: block; }
.mark__txt{ display: block; }
.mark b{
  display: block;
  font: 700 1.16rem/1 var(--face-display);
  letter-spacing: -.015em;
}
.mark small{
  display: block;
  font: 600 .6rem/1.2 var(--face-meta);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--grain-3);
  margin-top: .24rem;
}
.rail__nav{
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.85rem);
  flex-wrap: wrap;
}
.rail__nav a{
  font: 600 .78rem/1 var(--face-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grain-2);
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.rail__nav a:hover{ color: var(--grain); border-bottom-color: var(--brass); }
.rail__nav a[aria-current="page"]{ color: var(--grain); border-bottom-color: var(--brass); }

@media (max-width: 30rem){
  .rail__in{ min-height: 3.9rem; gap: .5rem; }
  .rail__nav{ gap: .72rem; width: 100%; justify-content: space-between; }
  .rail__nav a{ font-size: .71rem; letter-spacing: .07em; }
  .mark svg{ width: 30px; height: 30px; }
}

/* --------------------------------------------------------------- 5. frames */

.frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--pine);
  background-image: linear-gradient(158deg, #2b5f49 0%, #43705a 42%, #a9812f 118%);
  box-shadow: var(--lift);
  isolation: isolate;
}
/* string shadows: what you see if a photograph is missing, never a grey box */
.frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(253,250,243,.13) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(0deg, rgba(29,32,23,.10) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.frame img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: var(--sheet-lit);
  font: italic .92rem/1.45 var(--face-text);
}
.frame--tall{ aspect-ratio: 4 / 5; }
.frame--wide{ aspect-ratio: 16 / 10; }
.frame--band{ aspect-ratio: 21 / 9; }

.plate-gap{ margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.plate-note{
  margin-top: .7rem;
  font: 400 .78rem/1.5 var(--face-meta);
  color: var(--grain-3);
  letter-spacing: .01em;
}

/* --------------------------------------------------------------- 6. marquee */

.marquee{ padding-block: clamp(1.5rem, 4vw, 3.25rem) 0; }
.marquee__grid{ display: grid; gap: 0; }
.marquee__plate{
  position: relative;
  z-index: 2;
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4.5vw, 2.9rem);
  margin: -3.25rem 0 0 0;
  width: min(100%, 34rem);
  box-shadow: var(--lift-hi);
  display: grid;
  gap: 1.15rem;
}
.marquee h1{ font-size: clamp(2.45rem, 1.4rem + 5vw, 4.6rem); }
.standfirst{
  font-size: 1.1em;
  color: var(--grain-2);
  max-width: 44ch;
}
.marquee .frame{ border-radius: var(--r-lg); }

.pushes{ display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

@media (min-width: 62rem){
  .marquee__grid{
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }
  .marquee__frame{ grid-column: 4 / -1; grid-row: 1; }
  .marquee__plate{
    grid-column: 1 / 7;
    grid-row: 1;
    margin: 0;
    width: auto;
  }
}

/* --------------------------------------------------------------- 7. buttons */

.push{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1px solid var(--grain);
  border-radius: var(--r-pill);
  background: var(--grain);
  color: var(--sheet-lit);
  font: 600 .78rem/1 var(--face-meta);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.push:hover{ transform: translateY(-2px); background: var(--pine); border-color: var(--pine); }
.push--hollow{
  background: transparent;
  color: var(--grain);
  border-color: var(--rule-firm);
}
.push--hollow:hover{ background: var(--grain); color: var(--sheet-lit); border-color: var(--grain); }
.push::after{ content: "\2192"; font-size: 1rem; line-height: 0; }
.push--hollow::after{ content: none; }
.push--onpine{
  background: transparent;
  color: var(--sheet-lit);
  border-color: rgba(253,250,243,.4);
}
.push--onpine:hover{ background: var(--sheet-lit); color: var(--pine); border-color: var(--sheet-lit); }
.push--onpine::after{ content: none; }

.stack{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  justify-items: start;
}

.textlink{
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font: 600 .8rem/1.4 var(--face-meta);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .12rem;
  transition: color .16s ease;
}
.textlink:hover{ color: var(--grain); }

/* --------------------------------------------------------------- 8. setlist */

.setlist{
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.setlist--four{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }

.tune{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem 1.45rem 1.7rem;
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tune:hover{
  transform: translateY(-4px);
  box-shadow: var(--lift);
  border-color: var(--rule-firm);
}
.tune h3{ margin: 0; }
.tune h3 a{ text-decoration: none; }
.tune h3 a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tune p{ color: var(--grain-2); font-size: .96rem; }
.tune__tag{
  font: 600 .68rem/1 var(--face-meta);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass);
}
.tune__foot{
  margin-top: auto;
  padding-top: .7rem;
  font: 400 .76rem/1 var(--face-meta);
  letter-spacing: .06em;
  color: var(--grain-3);
}

/* numbered pillars */
.pillar{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.9rem 1.5rem 1.75rem;
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.pillar:hover{ transform: translateY(-4px); box-shadow: var(--lift); }
.pillar__no{
  font: 400 2.9rem/.8 var(--face-display);
  color: var(--brass);
  opacity: .32;
}
.pillar h3 a{ text-decoration: none; }
.pillar h3 a::after{ content: ""; position: absolute; inset: 0; }
.pillar p{ color: var(--grain-2); font-size: .95rem; }
.pillar__note{
  margin-top: auto;
  padding-top: .85rem;
  font: 600 .7rem/1 var(--face-meta);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grain-3);
}

/* --------------------------------------------------------------- 9. feature */

.feature{
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}
@media (min-width: 58rem){
  .feature{ grid-template-columns: 1.05fr .95fr; }
  .feature--flip .feature__frame{ order: 2; }
}
.feature__body{ display: grid; gap: 1rem; align-content: start; }
.feature__body h2{ max-width: 18ch; }
.feature__body p{ color: var(--grain-2); max-width: 46ch; }

/* --------------------------------------------------------------- 10. prose */

.piece{ display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 68rem){
  .piece{ grid-template-columns: minmax(0, 1fr) 16.5rem; }
  .piece__body{ grid-column: 1; grid-row: 1; }
  .pegbox{ grid-column: 2; grid-row: 1; }
}

.column{ max-width: var(--measure); }
.column > * + *{ margin-top: 1.15em; }
.column h2{ margin-top: 2.15em; margin-bottom: .45em; }
.column h3{ margin-top: 1.8em; margin-bottom: .4em; }
.column h2 + p, .column h3 + p{ margin-top: 0; }
.column a{
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: .085em;
  text-underline-offset: .2em;
  transition: background-color .16s ease;
}
.column a:hover{ background: rgba(201,154,61,.2); }
.column ul, .column ol{ padding-left: 1.35rem; margin-block: 1.15em; }
.column li{ margin-bottom: .55em; }
.column li::marker{ color: var(--brass); font-weight: 700; }
.column strong{ font-weight: 700; }
.column figure{ margin: 2rem 0; }
.column figcaption{
  margin-top: .7rem;
  font: 400 .8rem/1.5 var(--face-meta);
  color: var(--grain-3);
}

.headstock{
  display: grid;
  gap: 1.1rem;
  max-width: 44rem;
  padding-block: clamp(1.75rem, 4vw, 3rem) 0;
}
.headstock h1{ max-width: 19ch; }
.headstock .standfirst{ max-width: 48ch; }

.trail{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font: 500 .74rem/1.5 var(--face-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grain-3);
}
.trail a{ color: var(--brass); text-decoration: none; }
.trail a:hover{ text-decoration: underline; }
.trail li + li::before{ content: "/"; margin-right: .45rem; color: var(--rule-firm); }

.stamp{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.9rem;
  align-items: center;
  padding: .95rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 500 .76rem/1.3 var(--face-meta);
  letter-spacing: .06em;
  color: var(--grain-2);
}
.stamp span:first-child{ color: var(--brass); }

/* on page contents */
.pegbox{ align-self: start; }
@media (min-width: 68rem){
  .pegbox{ position: sticky; top: 6rem; }
}
.capo{
  border-left: 2px solid var(--brass);
  padding-left: 1.15rem;
}
.capo h2{
  font: 600 .7rem/1 var(--face-meta);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--grain-3);
  margin-bottom: .95rem;
}
.capo ol{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  counter-reset: step;
}
.capo li{ counter-increment: step; }
.capo a{
  display: flex;
  gap: .6rem;
  font: 500 .92rem/1.35 var(--face-meta);
  color: var(--grain-2);
  text-decoration: none;
}
.capo a::before{
  content: counter(step, decimal-leading-zero);
  color: var(--brass);
  font-size: .74rem;
  padding-top: .18rem;
}
.capo a:hover{ color: var(--grain); }

/* --------------------------------------------------------------- 11. blocks */

.holler{
  margin-block: 2.4rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--brass);
  font: 400 clamp(1.24rem, 1.05rem + .85vw, 1.62rem)/1.34 var(--face-display);
  letter-spacing: -.012em;
  color: var(--grain);
}
.holler cite{
  display: block;
  margin-top: .8rem;
  font: 500 .78rem/1.4 var(--face-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grain-3);
  font-style: normal;
}

.woodshed{
  margin-block: 2.5rem;
  padding: clamp(1.4rem, 3.5vw, 2.15rem);
  background: var(--pine);
  color: var(--sheet-lit);
  border-radius: var(--r-md);
}
.woodshed h3{ color: var(--sheet-lit); margin-bottom: .7rem; }
.woodshed p, .woodshed li{ color: rgba(253,250,243,.85); }
.woodshed ul{ padding-left: 1.25rem; margin: 1rem 0 0; }
.woodshed li::marker{ color: var(--brass-lit); }
.woodshed a{ color: var(--brass-lit); }

.gauge{
  margin-block: 2rem;
  padding: 1.35rem 1.45rem;
  background: var(--sheet-3);
  border-radius: var(--r-md);
}
.gauge h3{
  font: 600 .7rem/1 var(--face-meta);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--grain-3);
  margin-bottom: 1rem;
}
.gauge dl{ margin: 0; display: grid; gap: 0; }
.gauge dl > div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1.5rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule);
}
.gauge dl > div:last-child{ border-bottom: 0; padding-bottom: 0; }
.gauge dt{
  font: 600 .78rem/1.4 var(--face-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grain-2);
  margin: 0;
}
.gauge dd{ margin: 0; font-size: .98rem; text-align: right; }
@media (max-width: 34rem){
  .gauge dl > div{ display: block; }
  .gauge dd{ text-align: left; margin-top: .3rem; }
}

.notation{
  font: 600 .95em/1 var(--face-note);
  letter-spacing: .06em;
  color: var(--brass);
  background: rgba(201,154,61,.14);
  padding: .12em .38em;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.liner{
  margin-top: 3rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--sheet-2);
}
.liner h2{
  font: 600 .7rem/1 var(--face-meta) !important;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--grain-3);
  margin: 0 0 .9rem !important;
}
.liner ul{ margin: 0; padding-left: 1.15rem; }
.liner li{ margin-bottom: .45em; font-size: .96rem; }

/* --------------------------------------------------------------- 12. roster */

.scroller{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: 1.75rem;
}
/* tables may breathe past the reading measure, but never past the screen */
.column > .scroller{ width: min(46rem, calc(100vw - 2.6rem)); }
.roster{
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}
.roster caption{
  caption-side: bottom;
  padding-top: .9rem;
  font: 400 .8rem/1.5 var(--face-meta);
  color: var(--grain-3);
  text-align: left;
}
.roster th{
  font: 600 .69rem/1.2 var(--face-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grain-2);
  padding: 0 1rem .8rem 0;
  border-bottom: 2px solid var(--grain);
  vertical-align: bottom;
}
.roster td{
  padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: .97rem;
}
.roster td:first-child{ font-weight: 700; font-family: var(--face-display); font-size: 1.06rem; }
.roster tbody tr:hover{ background: var(--wash); }
.season{
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(158,108,28,.14);
  color: var(--brass);
  font: 600 .68rem/1.35 var(--face-meta);
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.season--late{ background: rgba(142,69,38,.13); color: var(--rosewood); }
.season--green{ background: rgba(35,80,63,.13); color: var(--pine); }

/* --------------------------------------------------------------- 13. porch */

.porch{
  background: var(--grain);
  color: rgba(253,250,243,.72);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) 2rem;
  font-size: .95rem;
}
.porch a{ color: var(--sheet-lit); text-decoration: none; }
.porch a:hover{ text-decoration: underline; text-decoration-color: var(--brass-lit); }
.porch__grid{
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.porch__grid > div:first-child{ grid-column: 1 / -1; }
@media (min-width: 52rem){
  .porch__grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .porch__grid > div:first-child{ grid-column: auto; }
}
.porch h2{
  font: 600 .69rem/1 var(--face-meta);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-bottom: 1.05rem;
}
.porch ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.porch .mark{ color: var(--sheet-lit); margin-bottom: .95rem; }
.porch .mark span{ color: rgba(253,250,243,.5); }
.porch__word{ max-width: 42ch; }
.porch__foot{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253,250,243,.16);
  font: 400 .78rem/1.6 var(--face-meta);
  color: rgba(253,250,243,.5);
}

/* --------------------------------------------------------------- 14. dark */

@media (prefers-color-scheme: dark){
  :root{
    --sheet:     #14170f;
    --sheet-2:   #1d2118;
    --sheet-3:   #1a1e15;
    --sheet-lit: #f2ecdc;

    --grain:     #ece6d5;
    --grain-2:   #a8ab99;
    --grain-3:   #7f8271;

    --brass:     #d3a44c;
    --brass-lit: #e2b969;
    --pine:      #1f4234;
    --pine-lit:  #3d7a61;

    --rule:      rgba(236,230,213,.15);
    --rule-firm: rgba(236,230,213,.3);
    --wash:      rgba(236,230,213,.05);
    --lift:      0 1px 2px rgba(0,0,0,.4), 0 18px 38px -26px rgba(0,0,0,.9);
    --lift-hi:   0 2px 4px rgba(0,0,0,.45), 0 26px 50px -24px rgba(0,0,0,.95);
  }
  body{
    background-image:
      radial-gradient(58rem 30rem at 88% -6%, rgba(211,164,76,.12), transparent 62%),
      radial-gradient(46rem 26rem at -8% 8%, rgba(61,122,97,.14), transparent 60%);
  }
  .rail{ background: rgba(20,23,15,.92); }
  .push{ background: var(--brass); border-color: var(--brass); color: #171a11; }
  .push:hover{ background: var(--brass-lit); border-color: var(--brass-lit); color: #171a11; }
  .push--hollow{ background: transparent; color: var(--grain); border-color: var(--rule-firm); }
  .push--hollow:hover{ background: var(--grain); color: #171a11; }
  .porch{ background: #0e1109; }
  .season{ background: rgba(211,164,76,.16); }
  .season--late{ background: rgba(196,110,70,.16); color: #d4855e; }
  .season--green{ background: rgba(61,122,97,.2); color: #7cc3a3; }
  ::selection{ background: var(--brass); color: #171a11; }
}

/* --------------------------------------------------------------- 15. misc */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print{
  .rail, .porch, .pegbox, .push{ display: none; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  .frame{ display: none; }
}