/* totes.html: the canvas tote collection. Added 2026-10-08.
   The hero IS a tote: a natural canvas panel with a woven texture, a stitched
   inner edge and a strap arching over the top, with the headline printed on
   it like a design. Set on the brand black so the canvas glows. */

.tt-hero{
  position: relative;
  background: var(--black);
  padding: 156px 0 84px;
  overflow: hidden;
}
.tt-hero::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 60% at 50% 70%, rgba(179,18,45,.26), transparent 70%),
    radial-gradient(30% 40% at 50% 10%, rgba(217,165,49,.08), transparent 70%);
  pointer-events: none;
}
/* Proportioned like the real bag (15 x 16 in, a touch taller than wide). */
.tt-bag{
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
/* The strap: one arch whose ends tuck behind the top of the bag. */
.tt-bag::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 26px);
  width: 50%;
  height: 156px;
  transform: translateX(-50%);
  border: 24px solid #d6c9a8;
  border-bottom: 0;
  border-radius: 170px 170px 0 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 -2px 0 rgba(0,0,0,.25);
}
.tt-body{
  position: relative;
  text-align: center;
  padding: 84px 50px 78px;
  color: var(--ink);
  background-color: #ebe2cb;
  background-image:
    repeating-linear-gradient(0deg, rgba(110,90,50,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110,90,50,.05) 0 1px, transparent 1px 3px),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.35), transparent 70%);
  border-radius: 3px 3px 8px 8px;
  box-shadow: 0 34px 70px rgba(0,0,0,.6), inset 0 -10px 24px rgba(110,90,50,.12);
}
/* Stitching just inside the edge. */
.tt-body::before{
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px dashed rgba(27,27,27,.18);
  border-radius: 2px 2px 5px 5px;
  pointer-events: none;
}
.tt-body .eyebrow{ display: block; color: var(--accent); margin-bottom: 16px; }
.tt-body h1{
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  color: var(--ink);
  margin-bottom: 22px;
}
.tt-body h1 em{ font-style: normal; color: var(--accent); }
.tt-body .lede{
  font-size: 1.02rem;
  line-height: 1.7;
  color: #574f40;
  max-width: 44ch;
  margin: 0 auto 22px;
}
.tt-body .hero-meta{ justify-content: center; color: var(--ink); }
.tt-body .hero-meta strong{ color: var(--accent); }

@media (max-width: 620px){
  .tt-hero{ padding: 118px 0 56px; }
  .tt-bag::before{ width: 52%; height: 104px; border-width: 15px; bottom: calc(100% - 18px); }
  .tt-body{ padding: 44px 22px 38px; }
  .tt-body::before{ inset: 9px; }
  .tt-body .lede{ font-size: .96rem; }
}