/* Homepage-only additions (loaded by index.html after workshop.css).
   Carried from the selected homepage refinement study (v1, refined state):
   the featured-essay illustration, the TGCS identity mark beside the Golf Cart
   Shop heading, and the early-web browser object in the About teaser.
   The study's toolbar, toggle and body overflow override are deliberately not carried. */

/* ───────── Journal: brief / working thing / another look ───────── */
.feature-grid { align-items: center; }
.essay-object { margin: 2rem 0 0; max-width: 30rem; }
.essay-object svg { width: 100%; height: auto; }
.essay-object figcaption {
  font: .6rem/1.7 var(--mono); text-transform: uppercase; letter-spacing: .03em;
  color: var(--on-paper-muted); margin-top: .4rem;
}

/* ───────── Projects: TGCS identity beside the large heading ───────── */
.w1 .work-inner { align-items: center; }
.home-shop-mark {
  position: relative; width: 10.5rem; max-width: 60%;
  margin: 1.7rem 0 .5rem 1.5rem; padding: .4rem .6rem .7rem;
  background: var(--ink); border: 1px solid var(--ink); transform: rotate(-4deg);
}
.home-shop-mark img { width: 100%; height: auto; }
.home-shop-mark::after {
  content: ""; position: absolute; bottom: -5px; right: -5px; width: 22px; height: 22px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
}
.home-shop-mark figcaption {
  font: .5rem/1.6 var(--mono); letter-spacing: .04em; text-align: center; color: var(--on-ink-muted);
}

/* ───────── About teaser: early-web interpretation (not an archived page) ───────── */
.about-grid { align-items: center; }
.home-origin { max-width: 25rem; margin: 2rem 1rem .5rem 0; container-type: inline-size; }
.home-origin .origin-browser { margin: 0; background: var(--ink-2); border: 1px solid var(--rule-ink); transform: rotate(-3deg); }
.home-origin .browser-bar {
  display: flex; gap: .8rem; padding: .5rem .8rem; border-bottom: 1px solid var(--rule-ink);
  font: .65rem var(--mono); color: var(--on-ink-muted);
}
.home-origin .browser-dots { letter-spacing: .1em; }
/* Side padding follows the object (1.5rem at the accepted widths), so enlarged text does not squeeze the drawing area. */
.home-origin .browser-canvas { padding: 1.4rem min(1.5rem, 7.5cqi); container-type: inline-size; }
.home-origin .browser-canvas strong { display: block; font: 600 2.4rem/.98 var(--display); text-transform: uppercase; }
.home-origin .construction { display: inline-block; margin-top: 1rem; font: .58rem/1.6 var(--mono); color: var(--lime); }
.home-origin .under-rule { width: 70%; margin-top: 1.2rem; border-top: 1px dashed var(--rule-ink); }
.home-origin figcaption {
  padding: .5rem .8rem; border-top: 1px solid var(--rule-ink);
  font: .5rem/1.6 var(--mono); text-transform: uppercase; color: var(--on-ink-muted);
}

/* ───────── Below the 64rem desktop breakpoint ───────── */
@media (max-width: 63.99rem) {
  .essay-object { max-width: 24rem; margin-top: 1.5rem; }
  .shop-heading { display: flex; align-items: center; gap: 1rem; min-width: 0; container-type: inline-size; }
  /* Also capped by the row's width: beside the mark, enlarged text in a wide fallback face must still keep whole words. */
  .shop-heading h3 { flex: 1; min-width: 0; font-size: min(clamp(2.2rem, 7vw, 4rem), 14vw, 16cqi); }
  .home-shop-mark { flex: none; width: 7rem; max-width: 34%; margin: .5rem .3rem .7rem 0; padding: .25rem; }
  .home-shop-mark figcaption { display: none; }
  .home-origin { max-width: 20rem; }
  .home-origin .browser-canvas strong { font-size: 2rem; }
}

/* Browser lettering is held to the canvas's inner drawing area (its container), so the longest word fits even
   in a wide fallback face where the named condensed faces are missing. */
.home-origin .browser-canvas strong { font-size: min(2.4rem, 14cqi); }