/* ============================================================
   TENONFOLD — THE FOLD
   Loaded after site.css by the journal index and by articles.

   §15 puts the site at roughly 60% editorial, so this is the half
   of the design that has to hold a reader rather than sell to one.
   Narrow measure, generous leading, and drawings sized like figures
   in a book instead of like hero images.
   ============================================================ */

/* ---------- index ---------- */
.f-masthead{ padding-block:56px 40px; border-bottom:1px solid var(--tf-rule) }
.f-masthead__title{
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:clamp(46px,8vw,74px);
  line-height:1;
  color:var(--tf-forest);
  margin:16px 0 0;
}
.f-masthead__line{
  margin:22px 0 0;
  max-width:34em;
  font-size:17px;
}

.f-list{ padding-block:8px 0 }

.f-item{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:30px;
  padding:34px 0;
  border-bottom:1px solid var(--tf-rule);
  text-decoration:none;
  color:inherit;
}
.f-item > *{ min-width:0 }
@media (max-width:720px){
  .f-item{ grid-template-columns:1fr; gap:12px; padding:28px 0 }
}
.f-item:hover .f-item__title,
.f-item:focus-visible .f-item__title{ color:var(--tf-forest) }

.f-item__meta{ display:flex; flex-direction:column; gap:6px }
.f-item__title{
  font-weight:600;
  font-size:clamp(22px,3vw,29px);
  line-height:1.15;
  letter-spacing:-.012em;
  margin:0 0 8px;
  text-wrap:balance;
  transition:color .16s ease;
}
.f-item__deck{ margin:0; color:var(--tf-quiet); max-width:40em }

.f-empty{
  padding-block:34px 0;
  color:var(--tf-quiet);
  max-width:40em;
}

/* ---------- article ---------- */
.f-art{ padding-block:56px 0; max-width:36em }
.f-art__title{
  font-weight:600;
  font-size:clamp(34px,5.4vw,50px);
  line-height:1.06;
  letter-spacing:-.018em;
  margin:16px 0 0;
  text-wrap:balance;
}
.f-art__deck{
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:clamp(21px,3.2vw,27px);
  line-height:1.3;
  color:var(--tf-forest);
  margin:20px 0 0;
}
.f-art__byline{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:28px 0 0;
  padding-top:18px;
  border-top:1px solid var(--tf-rule);
}

.f-body{ max-width:36em; padding-block:38px 0; font-size:17px; line-height:1.68 }
.f-body p{ margin:0 0 20px }
.f-body h2{
  font-weight:600;
  font-size:21px;
  letter-spacing:-.005em;
  margin:40px 0 12px;
  text-wrap:balance;
}
.f-body strong{ font-weight:600 }
.f-body em{ font-style:italic }

/* A line the piece is built around. Not a pull quote in the magazine
   sense, which would repeat text the reader just passed. */
.f-body .f-turn{
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:26px;
  line-height:1.3;
  color:var(--tf-forest);
  margin:32px 0;
  padding-left:22px;
  border-left:1.5px solid var(--tf-clay);
}

/* ---------- figures ---------- */
/* The plate breaks out of the 36em measure. Two drawings side by side inside
   the text column would be about 270px each, which puts the dimension labels
   near 9px and makes the comparison unreadable. The comparison is the whole
   point of the piece, so it gets its own block, still left-aligned with the
   prose because both are .wrap. */
/* .f-art and .f-body are .wrap with a 36em max-width, so they centre in the
   viewport rather than sitting at the page gutter. The plate has to centre on
   the same axis or the two read as a misalignment rather than a breakout, so
   it is a wider .wrap rather than a full-width one. */
/* A lead photograph runs the full column width, not the text measure. It is
   the one full-scale moment §15 asks for, and it is deliberately wider than
   the plate that holds measured drawings. */
.f-lead{ padding-block:26px 6px }

.dgm--photo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--tf-rule);
}

.f-plate{
  max-width:calc(52em + 56px);
  padding-block:18px 4px;
  padding-inline:28px;
}
.f-body--cont{ padding-top:26px }

.f-figs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
}
/* One drawing does not want half the plate; three want a third each. */
.f-figs:has(> .dgm:only-child){ grid-template-columns:minmax(0,26em) }
.f-figs--three{ grid-template-columns:repeat(3,1fr); gap:28px }
@media (max-width:720px){
  .f-figs--three{ grid-template-columns:1fr; gap:26px }
}
.f-figs > *{ min-width:0 }
@media (max-width:720px){ .f-figs{ grid-template-columns:1fr; gap:26px } }

.dgm{ margin:0 }
.dgm svg{ display:block; width:100%; height:auto }
.dgm figcaption{
  margin-top:12px;
  font-size:var(--tf-size-small);
  color:var(--tf-quiet);
  line-height:1.45;
}
.dgm__label{
  display:block;
  font-size:var(--tf-size-label);
  font-weight:500;
  letter-spacing:var(--tf-track-label);
  text-transform:uppercase;
  color:var(--tf-ink);
  margin-bottom:3px;
}

/* ---------- what the piece hands off to ---------- */
.f-after{
  margin:56px 0 0;
  padding-block:30px 0;
  border-top:1px solid var(--tf-rule);
  max-width:36em;
}
.f-after__row{
  display:flex;
  gap:22px;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:space-between;
}
.f-after__row > *{ min-width:0 }
.f-after h3{ font-weight:600; font-size:var(--tf-size-h3); margin:6px 0 6px }
.f-after p{ margin:0; color:var(--tf-quiet); font-size:var(--tf-size-small) }

/* ---------- lists inside a piece ---------- */
.f-list-plain{
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.f-list-plain li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
}
.f-list-plain li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:9px;
  height:1px;
  background:var(--tf-clay);
}

/* ---------- a quoted source ---------- */
/* Used only for verbatim primary material: statute, a standard, an archival
   document. Not for pull quotes of our own writing, which is what .f-turn is. */
.f-quote{
  margin:26px 0;
  padding:22px 24px;
  background:var(--tf-sheet);
  border-left:2px solid var(--tf-forest);
  font-size:16px;
  line-height:1.55;
  color:var(--tf-ink);
}