/* =====================================================================
   Home — mosaic
   ===================================================================== */
.tm-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 248px 248px;
  grid-template-areas:
    "a hero hero b"
    "c hero hero ship";
  gap: 16px;
  margin-top: 20px;
}

/* Hero carousel */
.tm-hero {
  grid-area: hero; position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 85% 30%, color-mix(in srgb, var(--mast) 78%, #fff 6%) 0%, var(--mast) 55%);
  background-color: var(--mast);
  color: #fff;
}
.tm-hero__slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 12px;
  padding: 34px 34px 40px 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.tm-hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.tm-hero__kick { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.tm-hero__t { margin-top: 10px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.tm-hero__s { margin-top: 12px; max-width: 34ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.tm-hero__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
.tm-hero__prod { display: grid; gap: 1px; font-size: 13.5px; color: rgba(255, 255, 255, .75); max-width: 300px; }
.tm-hero__prod span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-hero__prod strong { font-size: 18px; color: #fff; }
.tm-hero__prod:hover { color: #fff; }
.tm-hero__prod:hover span { text-decoration: underline; }
.tm-hero__media {
  align-self: stretch; display: grid; place-items: center;
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
}
.tm-hero__media img { width: 92%; height: 92%; object-fit: contain; }
.tm-hero__dots { position: absolute; left: 40px; bottom: 18px; display: flex; gap: 8px; z-index: 2; }
.tm-hero__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .35); transition: width .25s ease, background-color .25s ease; }
.tm-hero__dot.is-on { width: 26px; background: var(--gold); }
.tm-hero__arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: var(--sh-2);
  display: grid; place-items: center; opacity: 0; transition: opacity .2s ease;
}
.tm-hero:hover .tm-hero__arrow, .tm-hero__arrow:focus-visible { opacity: 1; }
.tm-hero__arrow--prev { left: 10px; }
.tm-hero__arrow--next { right: 10px; }

/* Tiles */
.tm-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--tint);
  color: var(--ink);
  transition: box-shadow .2s ease, transform .2s ease;
}
a.tm-tile:hover { box-shadow: var(--sh-2); color: var(--ink); }
.tm-tile--a { grid-area: a; }
.tm-tile--b { grid-area: b; background: var(--soft); }
.tm-tile--c { grid-area: c; background: var(--soft); }
.tm-tile--ship { grid-area: ship; background: var(--mast); color: #fff; justify-content: center; gap: 8px; }
.tm-tile__copy { position: relative; z-index: 2; display: grid; gap: 4px; max-width: 62%; }
.tm-tile__kick { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tm-tile__t { font-size: 20px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; }
.tm-tile__go { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 14.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tm-tile__img {
  position: absolute; right: -6px; bottom: -6px;
  width: 62%; height: auto; aspect-ratio: 1;
  object-fit: contain; mix-blend-mode: multiply;
  transition: transform .35s ease;
}
a.tm-tile:hover .tm-tile__img { transform: scale(1.05) rotate(-2deg); }
.tm-tile__ico { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--gold); display: grid; place-items: center; }
.tm-tile--ship .tm-tile__t { font-size: 21px; }
.tm-tile__s { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.tm-tile__link { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.tm-tile__link:hover { color: #fff; }

@media (max-width: 1200px) {
  .tm-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 420px 220px;
    grid-template-areas: "hero hero hero" "a b c";
  }
  .tm-tile--ship { display: none; }
}
@media (max-width: 760px) {
  .tm-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-template-areas: "hero hero" "a b" "c ship";
    gap: 12px; margin-top: 12px;
  }
  .tm-tile--ship { display: flex; padding: 16px; }
  .tm-hero { min-height: 560px; }
  .tm-hero__slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 20px 20px 56px; }
  .tm-hero__media { order: -1; height: 230px; }
  .tm-hero__t { font-size: 27px; }
  .tm-hero__s { font-size: 15px; margin-top: 8px; }
  .tm-hero__btns { margin-top: 16px; gap: 12px; }
  .tm-hero__dots { left: 20px; bottom: 16px; }
  .tm-hero__arrow { display: none; }
  .tm-tile { min-height: 196px; padding: 16px; }
  .tm-tile__copy { max-width: 100%; }
  .tm-tile__t { font-size: 17px; }
  .tm-tile__img { width: 58%; }
  .tm-tile--ship .tm-tile__t { font-size: 17px; }
  .tm-tile__s { font-size: 13px; }
  .tm-tile__ico { width: 44px; height: 44px; }
}

/* =====================================================================
   Category circles
   ===================================================================== */
.tm-circles {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr);
  gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px;
}
.tm-circles::-webkit-scrollbar { display: none; }
.tm-circle { display: grid; justify-items: center; gap: 2px; text-align: center; }
.tm-circle__img {
  width: 120px; height: 120px; margin-bottom: 8px;
  border-radius: 50%; overflow: hidden;
  background: var(--soft);
  display: grid; place-items: center;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.tm-circle__img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.tm-circle:hover .tm-circle__img { background: var(--tint); box-shadow: 0 0 0 2px var(--ink); }
.tm-circle:hover .tm-circle__img img { transform: scale(1.06); }
.tm-circle strong { font-size: 15px; font-weight: 700; }
.tm-circle small { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .tm-circles { grid-auto-columns: 92px; gap: 12px; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .tm-circle__img { width: 88px; height: 88px; }
  .tm-circle strong { font-size: 14px; }
}

/* =====================================================================
   Shop by movement
   ===================================================================== */
.tm-moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tm-move {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-radius: var(--r-lg);
  background: var(--soft);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.tm-move:hover { background: var(--tint); box-shadow: var(--sh-1); }
.tm-move__top { display: flex; align-items: center; gap: 12px; }
.tm-move__top strong { display: block; font-size: 19px; font-weight: 800; }
.tm-move__top small { display: block; font-size: 14px; color: var(--muted); }
.tm-move__ico { width: 46px; height: 46px; border-radius: 50%; background: var(--mast); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; }
.tm-move__pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tm-move__pics span { aspect-ratio: 1; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; overflow: hidden; }
.tm-move__pics img { width: 88%; height: 88%; object-fit: contain; }
.tm-move__go { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .tm-moves { grid-template-columns: 1fr; gap: 12px; }
  .tm-move { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px; }
}

/* =====================================================================
   Promises
   ===================================================================== */
.tm-promises {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff;
}
.tm-promise { display: flex; align-items: flex-start; gap: 14px; padding: 22px 20px; }
.tm-promise + .tm-promise { border-left: 1px solid var(--line-2); }
.tm-promise__ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--tint); color: var(--ink); display: grid; place-items: center; }
.tm-promise strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.tm-promise p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1100px) {
  .tm-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-promise:nth-child(3) { border-left: 0; }
  .tm-promise:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 600px) {
  .tm-promises { grid-template-columns: 1fr; }
  .tm-promise + .tm-promise { border-left: 0; border-top: 1px solid var(--line-2); }
  .tm-promise { padding: 16px; }
}

/* =====================================================================
   How an order reaches you
   ===================================================================== */
.tm-howto { padding: 28px; border-radius: var(--r-lg); background: var(--soft); }
.tm-howto__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tm-howto__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; counter-reset: none; }
.tm-howto__steps li { padding: 20px; border-radius: var(--r); background: #fff; }
.tm-howto__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mast); color: var(--gold); font-weight: 800; font-size: 15px; }
.tm-howto__steps strong { display: block; margin-top: 12px; font-size: 16px; font-weight: 800; line-height: 1.3; }
.tm-howto__steps p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1000px) { .tm-howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tm-howto { padding: 18px 16px; }
  .tm-howto__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tm-howto__steps { grid-template-columns: 1fr; gap: 10px; }
  .tm-howto__steps li { padding: 16px; }
}

/* =====================================================================
   Journal cards (home + journal index)
   ===================================================================== */
.tm-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tm-posts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.tm-post { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; transition: box-shadow .2s ease; }
.tm-post:hover { box-shadow: var(--sh-2); }
.tm-post__img { display: block; aspect-ratio: 16 / 10; background: var(--tint); overflow: hidden; }
.tm-post__img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.tm-post__ph { display: grid; place-items: center; height: 100%; color: var(--gold-2); }
.tm-post__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.tm-post__meta { font-size: 13px; color: var(--muted); }
.tm-post__t { font-size: 17px; font-weight: 800; line-height: 1.3; }
.tm-post__t a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tm-post__x { font-size: 14px; line-height: 1.5; color: var(--muted); }
.tm-post__go { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; }
@media (max-width: 1100px) { .tm-posts, .tm-posts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tm-posts--grid { grid-template-columns: 1fr; gap: 14px; }
  .tm-posts:not(.tm-posts--grid) {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(var(--gut) * -1); padding-right: var(--gut);
  }
  .tm-posts:not(.tm-posts--grid)::-webkit-scrollbar { display: none; }
  .tm-posts:not(.tm-posts--grid) .tm-post { scroll-snap-align: start; }
  .tm-post__x { display: none; }
}