/* ============================================================
   TENONFOLD — homepage, phase one
   Loaded after site.css.

   Section 15 of the guidelines sets the scope: hero, the four verbs,
   Room Measure, email capture. One page. Everything else in that
   section waits until a product has sold and a list exists.

   Section 15 also sets the rhythm: Paper -> Forest -> Paper. The verbs
   band is the Forest moment, and it is the only one, because the
   Restraint Principle means the energy comes from the drawing rather
   than from stacking coloured fields.
   ============================================================ */

/* ---------- hero ---------- */
.h-hero{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:60px;
  align-items:center;
  padding-block:64px 78px;
}
.h-hero > *{ min-width:0 }

@media (max-width:860px){
  .h-hero{
    grid-template-columns:1fr;
    gap:38px;
    padding-block:38px 54px;
  }
  /* The drawing leads on mobile. Section 15: a deliberate vertical
     editorial sequence, logo then image then headline, not a
     shrunken desktop grid. */
  .h-hero__plan{ order:-1 }
}

.plan{
  display:block;
  width:100%;
}

.h-tagline{
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:clamp(46px, 8.4vw, 78px);
  line-height:.98;
  letter-spacing:.005em;
  color:var(--tf-forest);
  margin:0;
}

.h-descriptor{
  margin:26px 0 0;
  max-width:26em;
  font-size:17px;
}

/* The metadata strip. It briefly came out with the location sweep and went
   back on 2026-09-01 with a city that is the brand's, not the founder's. */
.h-meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:30px 0 0;
  padding-top:20px;
  border-top:1px solid var(--tf-rule);
}

.h-hero__cta{ margin:28px 0 0 }

/* ---------- the four verbs ---------- */
.h-verbs{
  background:var(--tf-forest);
  color:var(--tf-paper);
}
.h-verbs__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:34px;
  padding-block:56px 60px;
}
@media (max-width:860px){
  .h-verbs__grid{ grid-template-columns:repeat(2, 1fr); gap:30px 26px }
}
@media (max-width:460px){
  .h-verbs__grid{ grid-template-columns:1fr }
}

.h-verb__num{
  display:block;
  font-size:var(--tf-size-label);
  font-weight:500;
  letter-spacing:var(--tf-track-label);
  color:var(--tf-stone);       /* Stone is for type on dark, and only there */
  margin-bottom:14px;
}
.h-verb__name{
  font-weight:600;
  font-size:var(--tf-size-h3);
  letter-spacing:.1em;
  margin:0 0 6px;
}
.h-verb__line{
  margin:0;
  color:var(--tf-stone);
  font-size:var(--tf-size-small);
}

/* ---------- a featured product ---------- */
.h-feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:center;
  padding-block:74px;
}
.h-feature > *{ min-width:0 }
.h-feature + .h-feature{
  padding-top:0;
}
@media (max-width:800px){
  .h-feature{ grid-template-columns:1fr; gap:32px; padding-block:52px }
}

.h-feature__cover{
  display:block;
  width:100%;
  border:1px solid var(--tf-rule);
}
/* Alternate the side the cover sits on, so two stacked features read as an
   editorial rhythm rather than a repeated card. The order has to go on the
   grid child, which is the anchor, not on the image inside it. */
.h-feature--flip > a{ order:2 }
@media (max-width:800px){
  .h-feature--flip > a{ order:0 }
}

.h-feature__title{
  font-weight:600;
  font-size:clamp(30px, 4.4vw, 42px);
  line-height:var(--tf-lh-tight);
  letter-spacing:-.012em;
  margin:0;
}
.h-feature__deck{
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:clamp(19px, 2.4vw, 23px);
  line-height:1.3;
  color:var(--tf-forest);
  margin:16px 0 0;
  max-width:22em;
}
.h-feature__list{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  max-width:30em;
}
.h-feature__list li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
  font-size:var(--tf-size-small);
}
.h-feature__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:8px;
  height:1px;
  background:var(--tf-clay);
}

.h-feature__buy{
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
  margin:28px 0 0;
}
.h-feature__price{
  font-weight:500;
  font-size:22px;
  font-variant-numeric:tabular-nums;
}

.h-rule{
  border:0;
  border-top:1px solid var(--tf-rule);
  margin:0;
}

/* ---------- from the fold ---------- */
.h-fold{ padding:8px 0 0 }

.band-head{
  display:flex;
  gap:20px;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-top:44px;
  border-top:1px solid var(--tf-rule);
}
.band-head > *{ min-width:0 }
.band-head .eyebrow{ margin:0 }

.h-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  padding:30px 0 8px;
}
.h-cards > *{ min-width:0 }
@media (max-width:860px){
  .h-cards{ grid-template-columns:1fr; gap:0 }
}

.h-card{
  display:block;
  text-decoration:none;
  color:inherit;
  padding-top:22px;
  border-top:1px solid var(--tf-rule);
}
@media (max-width:860px){
  .h-card{ padding:24px 0 }
  .h-card:last-child{ border-bottom:1px solid var(--tf-rule) }
}
.h-card__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border:1px solid var(--tf-rule);
  margin-bottom:18px;
}
.h-card__meta{ display:block; margin-bottom:12px }
.h-card__title{
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.008em;
  margin:0 0 10px;
  text-wrap:balance;
  transition:color .16s ease;
}
.h-card:hover .h-card__title,
.h-card:focus-visible .h-card__title{ color:var(--tf-forest) }
.h-card__deck{
  margin:0;
  color:var(--tf-quiet);
  font-size:var(--tf-size-small);
  line-height:1.55;
}