/* ============================================================
   TENONFOLD — shared chrome
   Loaded by every page, before the page-specific sheet.
   Depends on tenonfold-tokens.css for colour, type and .tf-mark.

   Palette constraints this file and its siblings obey, from §9
   of the guidelines, measured rather than estimated:
     Clay  4.12:1 on Paper. Fails AA for body. Rules and fills only.
     Stone 1.50:1 on Paper. Never type on light. Use Quiet instead.
     Ink   1.47:1 on Forest. Forest grounds take Paper only.
   ============================================================ */

*{ box-sizing:border-box }

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

/* A grid or flex item defaults to min-width:auto, so an image's intrinsic
   width can set the track minimum and push a page wider than a phone. A
   percentage width does not prevent it. Every such child gets min-width:0. */

body{
  margin:0;
  background:var(--tf-paper);
  color:var(--tf-ink);
  font-family:var(--tf-sans);
  font-size:var(--tf-size-body);
  line-height:var(--tf-lh-body);
  -webkit-font-smoothing:antialiased;
}

/* The page gutter. NEVER set a `padding` shorthand on an element that also
   carries .wrap: the shorthand resets left and right to zero and the gutter
   silently vanishes. It hid for days because above 1040px the centring
   margin fakes a gutter, so the bug is invisible on a desktop screen and
   total on a phone. Every section rule below uses padding-block for this
   reason. */
.wrap{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding-inline:28px;
}

/* ---------- header ---------- */
.head{ border-bottom:1px solid var(--tf-rule) }
.head__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-block:22px;
}
.head__mark{
  font-size:15px;
  text-decoration:none;
}
.head__mark:hover{ opacity:.72 }

/* Two items, which is exactly why there is a nav at all. §15 lists five
   categories and then bars empty ones; TOOLS and THE FOLD are the two with
   anything in them. Add STUDIES, EDITIONS and OBJECTS when they exist. */
.head__nav{ display:flex; gap:22px; flex-wrap:wrap }
.head__link{
  color:var(--tf-quiet);
  text-decoration:none;
  /* A text-only link is about 17px tall, well under a comfortable tap
     target. The padding is vertical breathing room the design wanted
     anyway, and it takes the hit area to roughly 44px. */
  padding:13px 0;
  margin:-13px 0;
  border-bottom:1px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.head__link:hover,
.head__link:focus-visible{ color:var(--tf-ink); border-bottom-color:var(--tf-rule) }
.head__link--on{ color:var(--tf-ink); border-bottom-color:var(--tf-clay) }

/* ---------- footer ----------
   Markup is generated by build/footer.py and written into every page between
   the FOOTER markers. Edit it there, not here and not in a page. */
.foot{
  margin-top:96px;
  border-top:1px solid var(--tf-rule);
}

/* Brand block on the left, four link columns on the right. The columns wrap
   before the brand does, so a phone gets the mark and descriptor first and
   then the links, rather than four one-item columns squeezed side by side. */
.foot__inner{
  display:flex;
  flex-wrap:wrap;
  gap:44px 56px;
  padding-block:52px 40px;
}
.foot__brand{ flex:1 1 260px; min-width:0 }
.foot__mark{
  font-size:15px;
  text-decoration:none;
  color:inherit;
}
.foot__mark:hover{ opacity:.72 }
.foot__descriptor{
  margin:18px 0 0;
  max-width:22em;
  color:var(--tf-quiet);   /* Quiet at 6.6:1, never Stone, which is 1.50:1 */
  font-size:var(--tf-size-small);
}
.foot__tagline{
  margin:10px 0 0;
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:var(--tf-size-h3);
}

.foot__cols{
  flex:2 1 480px;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px 24px;
}
.foot__col{ min-width:0 }
.foot__head{
  margin:0 0 14px;
  font-weight:500;
  color:var(--tf-quiet);
}
.foot__list{ margin:0; padding:0; list-style:none }
.foot__list li + li{ margin-top:10px }

/* Underline on hover only. Nine links all carrying a rule turns the footer
   into a ruled block, and the footer is meant to be quiet. The hit area is
   padded to roughly 44px the same way the header links are. */
.foot__link{
  color:var(--tf-ink);
  text-decoration:none;
  font-size:var(--tf-size-small);
  border-bottom:1px solid transparent;
  padding:12px 0;
  margin:-12px 0;
  display:inline-block;
  transition:color .16s ease, border-color .16s ease;
}
.foot__link:hover,
.foot__link:focus-visible{ color:var(--tf-forest); border-bottom-color:var(--tf-rule) }

.foot__base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 28px;
  padding-block:20px 34px;
  border-top:1px solid var(--tf-rule);
  color:var(--tf-quiet);
}
.foot__legal{ margin:0; display:flex; gap:22px; flex-wrap:wrap }
.foot__base .foot__link{ font-size:inherit; letter-spacing:inherit }

@media (max-width:760px){
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot__inner{ padding-block:44px 32px; gap:36px }
  .foot{ margin-top:72px }
}

/* ---------- links and buttons ---------- */
.link{
  color:var(--tf-forest);
  text-decoration:none;
  border-bottom:1px solid var(--tf-rule);
}
.link:hover,
.link:focus-visible{ border-bottom-color:var(--tf-forest) }

.btn{
  display:inline-block;
  background:var(--tf-forest);
  color:var(--tf-paper);
  text-decoration:none;
  font-weight:500;
  font-size:var(--tf-size-small);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:13px 26px;
  border:1px solid var(--tf-forest);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover,
.btn:focus-visible{
  background:var(--tf-ink);
  border-color:var(--tf-ink);
}

/* On a Forest ground the solid button would disappear, so it inverts to
   an outline in Paper. Ink on Forest is 1.47:1 and is never used. */
.btn--onDark{
  background:transparent;
  color:var(--tf-paper);
  border-color:var(--tf-paper);
}
.btn--onDark:hover,
.btn--onDark:focus-visible{
  background:var(--tf-paper);
  color:var(--tf-forest);
  border-color:var(--tf-paper);
}

/* ---------- the label with a clay rule, used above every title ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 20px;
}
.eyebrow__dash{
  display:block;
  width:34px;
  height:1.5px;
  background:var(--tf-clay);   /* a rule, which is a use Clay is allowed */
  flex:none;
}

/* ---------- keyboard ---------- */
/* Every interactive element had a hover state and no visible focus state,
   which makes the site unusable by keyboard. Clay is a rule colour here,
   not type, so its AA failure for body text does not apply. */
:focus-visible{
  outline:2px solid var(--tf-clay);
  outline-offset:3px;
  border-radius:1px;
}
.btn:focus-visible{ outline-offset:4px }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}