/* ==========================================================================
   Rizovit — why.html: the problem in the valley, and what we do about it.
   Written for a phone first; wider screens add columns.
   An editorial page: type, photos and thin field lines. Motion is the shared
   reveals only (transform / opacity / clip-path), nothing pinned or scrubbed.
   ========================================================================== */

body[data-page="why"] { background-color: var(--paddy); }

.wy-arr { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
a:hover > .wy-arr { transform: translateX(4px); }

/* ---------- shared type ---------- */
.wy-kicker { color: var(--ink-2); }
.is-dark .wy-kicker, .is-deep .wy-kicker { color: var(--sprout); }
.wy-h2 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(2.35rem, 1.1rem + 5.2vw, 6.6rem);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 12.5em;
}
.wy-h3 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 13em;
}
.wy-h4 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.wy-head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(52px, 7vw, 120px); }
.wy-head__lead { text-wrap: pretty; }

/* ---------- figures ---------- */
.wy-fig { display: grid; gap: 10px; min-width: 0; }
.wy-fig figcaption { color: var(--ink-2); }
.is-dark .wy-fig figcaption, .is-deep .wy-fig figcaption { color: var(--on-dark-2); }
.wy-frame { position: relative; overflow: hidden; border-radius: 6px; background: var(--rice-2); }
.is-dark .wy-frame, .is-deep .wy-frame { background: rgba(243, 238, 226, .06); }
.wy-frame img { width: 100%; height: 100%; object-fit: cover; }
.wy-people__fig img { object-position: 50% 30%; }
.wy-frame--wide { aspect-ratio: 16 / 10; }
.wy-frame--pano { aspect-ratio: 4 / 3; }
.wy-frame--tall { aspect-ratio: 4 / 3; }
.wy-frame--cta { aspect-ratio: 5 / 4; }
@media (min-width: 900px) {
  .wy-frame--pano { aspect-ratio: 21 / 9; }
  .wy-frame--tall { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Opening: plain paddy green, one sentence, nothing moves
   ========================================================================== */
.wy-open {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  background: var(--paddy) var(--pattern-dark);
  color: var(--on-dark);
}
.wy-open__inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding:
    calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px)
    max(var(--gutter), env(safe-area-inset-right, 0px))
    calc(22px + env(safe-area-inset-bottom, 0px))
    max(var(--gutter), env(safe-area-inset-left, 0px));
}
.wy-open__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; color: var(--on-dark-2); }
.wy-open__place { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wy-open__title {
  align-self: end;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(2.7rem, 1.2rem + 6vw, 7.2rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 14.5em;
}
.wy-open__title em { font-style: normal; color: var(--straw); }
.wy-open__foot {
  display: grid;
  gap: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}
.wy-open__lead { max-width: 34em; font-size: 1.02rem; line-height: 1.5; color: var(--on-dark-2); text-wrap: pretty; }
.wy-index__label { color: var(--on-dark-2); margin-bottom: 8px; }
.wy-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.wy-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 34px;
  padding-block: 6px;
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: .98rem;
}
.wy-index .num { font-size: var(--t-xs); color: var(--sprout); }
@media (max-width: 380px) {
  .wy-open__title { font-size: 2.45rem; }
}
@media (min-width: 900px) {
  .wy-open__inner { gap: 40px; padding-top: calc(var(--header-h) + 36px); padding-bottom: 32px; }
  .wy-open__foot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; padding-top: 24px; }
  .wy-open__lead { font-size: 1.15rem; }
  .wy-index { justify-self: end; width: min(100%, 460px); }
  .wy-index ol { grid-template-columns: 1fr; }
  .wy-index li + li { border-top: 1px solid var(--line-dark); }
  .wy-index a { min-height: 42px; font-size: 1.05rem; }
  .wy-index a:hover { color: var(--straw); }
}

/* ==========================================================================
   01 The problem
   ========================================================================== */
.wy-problem, .wy-answer, .wy-loop, .wy-numbers, .wy-who, .wy-cta { padding-block: clamp(80px, 11vw, 180px); position: relative; }

.wy-ch + .wy-ch { margin-top: clamp(84px, 11vw, 180px); }
.wy-ch__bar {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  margin-bottom: clamp(26px, 3.4vw, 52px);
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
}
.wy-ch__bar .label:first-child { color: var(--husk); }

/* A. The mills */
.wy-mills { display: grid; gap: 28px; }
.wy-mills__small { width: 74%; justify-self: end; }
.wy-mills__text { display: grid; gap: 14px; align-content: start; }
.wy-mills__text > p:not(.wy-stat) { max-width: 33em; font-size: 1.05rem; text-wrap: pretty; }
.wy-stat {
  display: grid;
  gap: 6px;
  margin-block: 14px 8px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}
.wy-stat__v {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(4.6rem, 3rem + 7vw, 9.5rem);
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--husk);
}
.wy-stat__l { max-width: 18em; text-wrap: balance; font-family: var(--f-cond); font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
@media (min-width: 900px) {
  .wy-mills { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
  .wy-mills { row-gap: 36px; }
  .wy-mills__text { grid-column: 1 / 6; grid-row: 1 / 3; }
  .wy-mills__big { grid-column: 7 / 13; grid-row: 1; }
  .wy-mills__small { grid-column: 9 / 13; grid-row: 2; width: auto; justify-self: stretch; }
}

/* B. The people */
.wy-people { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 64px); }
.wy-people .lead { text-wrap: pretty; }
@media (min-width: 900px) {
  .wy-people { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: end; }
}
.wy-scenes { display: grid; gap: 28px; margin-top: clamp(36px, 5vw, 72px); }
.wy-scenes li { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-2); }
.wy-scenes__n { font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: .08em; color: var(--husk); }
.wy-scenes p { max-width: 30em; text-wrap: pretty; }
@media (min-width: 760px) {
  .wy-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* C. The buyers */
.wy-buyers { display: grid; gap: 40px; }
.wy-buyers__text { display: grid; gap: 14px; align-content: start; }
.wy-buyers__text > p { max-width: 33em; font-size: 1.05rem; text-wrap: pretty; }
.wy-routes {
  padding: 22px 18px 20px;
  border-radius: 14px;
  background: var(--rice-2) var(--pattern);
}
.wy-routes__title { color: var(--ink-2); margin-bottom: 18px; }
.wy-routes__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wy-route__name {
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}
.wy-route--short .wy-route__name { color: var(--paddy); }
.wy-route ol { display: grid; }
.wy-route li {
  position: relative;
  padding: 9px 0 9px 22px;
  font-size: .95rem;
  line-height: 1.3;
}
/* dot per stop, and a rail down to the next one */
.wy-route li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(9px + .65em - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--ink-2);
  background: var(--rice-2);
  z-index: 1;
}
.wy-route li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(9px + .65em);
  height: 100%;
  border-left: 1px solid var(--line-2);
}
.wy-route--short li::before { border-color: var(--paddy); background: var(--paddy); }
.wy-route--short li:not(:last-child)::after { border-left-color: var(--paddy); }
.wy-route li.is-end { font-weight: 600; }
.wy-route--long li.is-end::before { background: var(--ink-2); }
.wy-routes__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
@media (min-width: 900px) {
  .wy-buyers { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .wy-buyers__text { grid-column: 1 / 6; }
  .wy-routes { grid-column: 7 / 13; padding: 32px 32px 26px; }
  .wy-routes__cols { gap: 32px; }
  .wy-route li { font-size: 1.02rem; }
}

/* ==========================================================================
   02 The answer
   ========================================================================== */
.wy-answer .wy-head__lead { color: var(--on-dark-2); }
.wy-answer__grid { display: grid; gap: 44px; }
.wy-answer__side { display: grid; gap: 40px; align-content: start; justify-items: start; }
.wy-points { display: grid; gap: 26px; width: 100%; }
.wy-points li { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-dark); }
.wy-points .num { font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: .08em; color: var(--sprout); }
.wy-points p { color: var(--on-dark-2); max-width: 30em; text-wrap: pretty; }
.wy-answer__straw { width: 100%; }
@media (min-width: 640px) {
  .wy-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
}
@media (min-width: 900px) {
  .wy-answer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .wy-answer__husk { grid-column: 1 / 6; align-self: start; }
  .wy-answer__side { grid-column: 7 / 13; gap: 52px; }
}

/* ==========================================================================
   03 The loop. Phones: a column with a rail down and a dashed line back up.
   Wide screens: the same six stations on a ring.
   ========================================================================== */
.wy-cycle { position: relative; }
.wy-cycle__ring { display: none; }
.wy-cycle__list { position: relative; display: grid; }
.wy-node { position: relative; padding: 14px 0 14px 58px; }
.wy-node__in { display: grid; gap: 3px; }
.wy-node__n { font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: .08em; color: var(--husk); line-height: 1.3; }
.wy-node__t { font-family: var(--f-cond); font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.005em; }
.wy-node p { color: var(--ink-2); max-width: 26em; }
/* dot on the rail (rail at x = 30px) */
.wy-node::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 16px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--rice-2);
  z-index: 1;
}
.wy-node--us::before { background: var(--paddy); border-color: var(--paddy); }
/* each station draws the rail down to the next (right edge) and the way back up (left edge) */
.wy-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 31px;
  height: 100%;
  border-right: 1px solid var(--ink-2);
  border-left: 1px dashed var(--husk);
}
.wy-node:first-child::after { border-top: 1px dashed var(--husk); border-top-left-radius: 18px; }
.wy-node:nth-last-child(2)::after { border-bottom: 1px dashed var(--husk); border-bottom-left-radius: 18px; }
/* arrowhead where the dashed way back meets station 01 */
.wy-cycle__list::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--husk);
  border-right: 1px solid var(--husk);
  transform: rotate(45deg);
}
.wy-cycle__center {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-left: 0;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--husk);
}
.wy-cycle__back { font-size: 1.5rem; line-height: 1; width: 31px; text-align: center; }
.wy-loop__foot { max-width: 40em; margin-top: clamp(36px, 5vw, 72px); padding-top: 14px; border-top: 1px solid var(--line-2); text-wrap: pretty; }

@media (min-width: 960px) {
  .wy-cycle {
    --d: min(640px, 48vw);
    width: var(--d);
    height: var(--d);
    margin: 110px auto 120px;
  }
  .wy-cycle__ring {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .wy-cycle__ring circle { stroke: rgba(78, 85, 54, .45); vector-effect: non-scaling-stroke; }
  .wy-cycle__arrows path { stroke: var(--husk); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
  .wy-cycle__list { position: absolute; inset: 0; }
  .wy-node {
    position: absolute;
    width: 220px;
    padding: 14px 16px;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .wy-node::before, .wy-node::after, .wy-cycle__list::before { display: none; }
  .wy-node__in { justify-items: center; }
  .wy-node .wy-node__in { padding: 14px 16px; border-radius: 12px; background: var(--rice-2) var(--pattern); }
  .wy-node { padding: 0; }
  .wy-node--us .wy-node__in { background: var(--paddy); color: var(--rice); }
  .wy-node--us .wy-node__n { color: var(--sprout); }
  .wy-node--us p { color: var(--on-dark-2); }
  .wy-node:nth-child(1) { left: 50%; top: 0; }
  .wy-node:nth-child(2) { left: 93.3%; top: 25%; }
  .wy-node:nth-child(3) { left: 93.3%; top: 75%; }
  .wy-node:nth-child(4) { left: 50%; top: 100%; }
  .wy-node:nth-child(5) { left: 6.7%; top: 75%; }
  .wy-node:nth-child(6) { left: 6.7%; top: 25%; }
  .wy-cycle__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    margin: 0;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 1rem + 1.6vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.01em;
  }
  .wy-cycle__back { width: auto; font-size: 2.6rem; }
  .wy-loop__foot { margin-inline: auto; text-align: center; }
}

/* ==========================================================================
   04 In numbers
   ========================================================================== */
.wy-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; margin: 0; }
.wy-figs > div { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-2); min-width: 0; }
.wy-figs__v {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 10.5vw, 6.4rem);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--paddy);
  white-space: nowrap;
}
.wy-figs dd { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); max-width: 22em; text-wrap: pretty; }
.wy-numbers__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 52em;
  color: var(--ink-2);
}
.wy-numbers__note .tag { color: var(--husk); }
@media (min-width: 900px) {
  .wy-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px; }
  .wy-figs__v { font-size: clamp(4rem, 2rem + 4vw, 6.4rem); }
  .wy-figs dd { font-size: 1.05rem; }
}

/* ==========================================================================
   05 Who it's for
   ========================================================================== */
.wy-who { padding-top: 0; }
.wy-rooms { display: grid; gap: 52px; }
.wy-room { display: grid; gap: 10px; align-content: start; }
.wy-room__stage {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--rice-2) var(--pattern);
}
.wy-room__stage { position: relative; }
.wy-room__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .9s var(--ease-out); }
.wy-room:hover .wy-room__stage img { transform: scale(1.04) rotate(-1deg); }
.wy-room__n { font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: .08em; color: var(--husk); }
.wy-room p { max-width: 30em; text-wrap: pretty; }
.wy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 44px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 1rem;
  color: var(--paddy);
}
@media (min-width: 760px) {
  .wy-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* ==========================================================================
   Ending
   ========================================================================== */
.wy-cta__grid { display: grid; gap: 48px; }
.wy-cta__text { display: grid; gap: 20px; align-content: center; justify-items: start; }
.wy-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (min-width: 900px) {
  .wy-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
}