/* Blog: a full-width wall of squares. One square per post, one big word per square,
   one colour per topic. Opening a post grows its square into the page. */

.c-hair      { --c: #c99700; --t: #2f2f18; }
.c-face-body { --c: #b9c69b; --t: #2f2f18; }
.c-specific  { --c: #4d4c27; --t: #f6f1e3; }
.c-health    { --c: #e2a27a; --t: #2f2f18; }
.c-events    { --c: #2f2f18; --t: #f3e2a2; }
.c-ozonators { --c: #a8c4d4; --t: #2f2f18; }

/* ---------- The wall ---------- */
.wall {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense; gap: 0; background: var(--ink);
}
@media (min-width: 1700px) { .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sq {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  background: var(--c); color: var(--t);
  text-decoration: none; cursor: pointer;
}
.sq.big { grid-column: span 2; grid-row: span 2; }
.sq[hidden] { display: none; }

/* Photo tinted in the topic colour (duotone feel), full colour on hover */
.sq-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(1) contrast(1.15) brightness(1.05);
  mix-blend-mode: luminosity; opacity: .42;
  transform: scale(1.02);
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform .9s var(--ease), mix-blend-mode .5s;
}
.c-specific .sq-img, .c-events .sq-img { opacity: .34; }
.sq::after { /* darkens the photo on hover so white text reads */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20, 20, 8, .82) 0%, rgba(20, 20, 8, .35) 45%, rgba(20, 20, 8, .1) 100%);
  opacity: 0; transition: opacity .5s var(--ease);
}

.sq-top {
  position: absolute; left: 6cqw; right: 6cqw; top: 5.5cqw;
  display: flex; justify-content: space-between; gap: 8px;
  font-size: clamp(11px, 3.4cqw, 15px); font-weight: 600; letter-spacing: .02em;
}
.sq-date { font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }

/* The topic word: as big as the square allows */
.sq-word {
  position: absolute; left: 5cqw; right: 5cqw; top: 50%;
  transform: translateY(-62%); transform-origin: 0 0;
  font-size: calc(min(150cqw / var(--k, 6), 34cqw) * var(--fit, 1));
  font-weight: 800; line-height: .86; letter-spacing: -0.05em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.sq-bottom { position: absolute; left: 6cqw; right: 6cqw; bottom: 5.5cqw; display: grid; gap: 1.6cqw; }
.sq-title {
  font-size: clamp(13px, 5cqw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: balance;
}
.sq-ex {
  font-size: clamp(12px, 3.6cqw, 17px); line-height: 1.45; opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .4s var(--ease), max-height .5s var(--ease);
}
.sq-read { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(11px, 3.2cqw, 14px); font-weight: 600; }
.sq-read svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); }
.sq-new {
  position: absolute; right: 5cqw; top: 13cqw; padding: 6px 12px; border-radius: 999px;
  background: var(--t); color: var(--c); font-size: clamp(11px, 2.2cqw, 14px); font-weight: 700; letter-spacing: .04em;
}

@media (hover: hover) {
  a.sq:hover .sq-img { filter: none; mix-blend-mode: normal; opacity: 1; transform: scale(1.07); }
  a.sq:hover::after { opacity: 1; }
  a.sq:hover { color: #fff; }
  a.sq:hover .sq-word { transform: translateY(-140%) scale(.52); }
  a.sq:hover .sq-ex { opacity: .92; max-height: 9em; }
  a.sq:hover .sq-read svg { transform: translateX(4px); }
}
.sq:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 0; }

/* On narrow squares keep it to the word, the topic and a short title */
@container (max-width: 240px) {
  .sq-date { display: none; }
  .sq-title { -webkit-line-clamp: 2; }
  .sq-read { display: none; }
}

/* ---------- Intro square ---------- */
.sq-intro { background: var(--gold-soft); color: var(--ink); cursor: default; container-type: inline-size; }
.intro-in { position: absolute; inset: 0; padding: 6cqw; display: flex; flex-direction: column; justify-content: space-between; gap: 3cqw; }
.intro-title { margin: 0; font-size: 26cqw; font-weight: 800; line-height: .82; letter-spacing: -0.06em; text-transform: uppercase; }
.intro-lead { margin: 2cqw 0 0; font-size: clamp(14px, 3.4cqw, 22px); line-height: 1.4; max-width: 30ch; color: var(--ink-2); }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4cqw 3cqw; }
.legend button {
  display: flex; align-items: center; gap: 2cqw; padding: 1.4cqw 0; text-align: left;
  font-size: clamp(13px, 3cqw, 19px); font-weight: 500; color: var(--ink);
  border-bottom: 1px solid rgba(47, 47, 24, .15); transition: opacity .25s var(--ease);
}
.legend button i { width: clamp(16px, 4.2cqw, 30px); aspect-ratio: 1; background: var(--c); flex: none; }
.legend button b { margin-left: auto; font-weight: 500; font-size: .85em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legend button.all i { background: conic-gradient(#c99700 0 17%, #b9c69b 0 34%, #4d4c27 0 51%, #e2a27a 0 68%, #2f2f18 0 85%, #a8c4d4 0); }
.legend.filtering button:not(.on) { opacity: .4; }
.legend button:hover { opacity: 1; }
@media (max-width: 680px) {
  .legend { grid-template-columns: 1fr 1fr; }
}

/* Filtering and opening animate through View Transitions where the browser has them */
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }

/* ---------- Reader: an opened post ---------- */
.reader {
  position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bg);
}
.reader[hidden] { display: none; }
.reader-sq { position: relative; height: 100%; overflow: hidden; }
.reader-sq .sq { position: absolute; inset: 0; aspect-ratio: auto; cursor: default; container-type: size; }
.reader-sq .sq-img { filter: none; mix-blend-mode: normal; opacity: 1; }
.reader-sq .sq::after { opacity: 1; background: linear-gradient(to top, rgba(20, 20, 8, .7), rgba(20, 20, 8, .05) 60%); }
.reader-sq .sq { color: #fff; }
.reader-sq .sq-word { font-size: calc(min(150cqw / var(--k, 6), 30cqh, 30cqw) * var(--fit, 1)); top: auto; bottom: 7cqh; transform: none; }
.reader-sq .sq-title, .reader-sq .sq-ex, .reader-sq .sq-read, .reader-sq .sq-bottom { display: none; }

.reader-scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; }
.reader-close {
  position: sticky; top: 20px; float: right; margin: 20px 20px 0 0; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; transition: transform .3s var(--ease);
}
.reader-close:hover { transform: rotate(90deg); }
.reader-close svg { width: 20px; height: 20px; }
.reader-body { max-width: 680px; margin: 0 auto; padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 64px) 72px; }
.reader-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--ink-2); margin: 0 0 18px; }
.reader-meta .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--c); color: var(--t); font-weight: 600; }
.reader-title { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 28px; text-wrap: balance; }
.prose { font-size: 18px; line-height: 1.7; color: var(--ink); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1em; }
.prose .caps { font-size: 15px; letter-spacing: .04em; line-height: 1.5; color: var(--gold-text); margin-top: 2em; }
.prose h2, .prose h3 { margin: 1.8em 0 .2em; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 21px; }
.prose ul, .prose ol { margin: 1em 0 0; padding-left: 1.2em; display: grid; gap: .45em; }
.prose li::marker { color: var(--gold); }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 1.4em 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--gold); color: var(--ink-2); }

.reader-products { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.reader-products h2, .reader-next h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 0 0 18px; letter-spacing: .01em; }
.reader-products .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reader-club { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.reader-club p { margin: 0; font-size: 16px; }
.reader-next { margin-top: 56px; }
.reader-next .next-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .reader { grid-template-columns: 1fr; overflow-y: auto; display: block; }
  .reader-sq { height: auto; aspect-ratio: 1; }
  .reader-scroll { overflow: visible; }
  .reader-close { position: fixed; top: 14px; right: 14px; margin: 0; float: none; }
  .prose { font-size: 17px; }
}
@media (max-width: 520px) {
  .reader-next .next-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-next .next-wall .sq:nth-child(3) { display: none; }
}

/* Gentle entrance for the first screen of squares */
@media (prefers-reduced-motion: no-preference) {
  .wall .sq { animation: sq-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
  @keyframes sq-in { from { opacity: 0; transform: scale(.94); } }
}