/* Homepage sections below the carousel: about, house rules, photo line, founder note. */

/* ===== about: brand copy over the carousel's flavour colour, with khakhras and props floating around it =====
   --carbg/--carfg/--carglow are set by js/components/about.js whenever the carousel changes flavour. */
@property --carbg { syntax: "<color>"; inherits: true; initial-value: #da5521; }
@property --carfg { syntax: "<color>"; inherits: true; initial-value: #20261c; }
html { --carbg: #da5521; --carfg: #20261c; --carglow: transparent; transition: --carbg .7s ease, --carfg .7s ease; }
.about { background: var(--carbg); color: var(--carfg); position: relative; overflow: hidden; }
.about .wrap { max-width: 820px; padding-block: 140px 220px; position: relative; z-index: 2; }
.about .kick { margin-bottom: 14px; opacity: .85; }
.about h2 { margin: 0 0 22px; font-size: clamp(3rem, 12vw, 7rem); line-height: .9; text-wrap: balance; }
.about p { margin: 0 0 18px; font-size: clamp(1.12rem, 2.6vw, 1.5rem); line-height: 1.5; font-weight: 600; max-width: 34ch; text-wrap: pretty; }
.about p strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; font-size: 1.35em; line-height: 1.05; display: block; margin-top: 6px; }
.about h2, .about p { text-shadow: 0 2px 14px var(--carglow); }
@media (min-width: 820px) { .about .wrap { padding-block: 150px 250px; } }

/* floaters: .fl drifts with scroll (speed = data-s, bigger = nearer); inside it a .disc tilts in 3D or a .prop bobs.
   --x/--y/--w place it on phones, --xd/--yd/--wd from 820px. .desk ones only show on wide screens. */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fl { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; will-change: transform; }
.fl.desk { display: none; }
@media (min-width: 820px) {
  .fl { width: var(--wd, var(--w)); left: var(--xd, var(--x)); top: var(--yd, var(--y)); }
  .fl.desk { display: block; }
}
/* a disc is three stacked copies of the same khakhra: two darker ones behind give it a baked edge */
.disc { position: relative; aspect-ratio: 1; transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); filter: drop-shadow(0 18px 16px rgba(0,0,0,.45)); }
.disc img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.disc img.edge { transform: translateZ(-7px); filter: brightness(.66) sepia(.3) saturate(1.5); }
.disc img.edge2 { transform: translateZ(-3.5px); filter: brightness(.8) sepia(.2) saturate(1.4); }
.prop img { width: 100%; display: block; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 16px 14px rgba(0,0,0,.45)); }
@media (prefers-reduced-motion: no-preference) {
  .disc { animation: tumble var(--t, 9s) ease-in-out var(--d, 0s) infinite alternate; }
  .prop img { animation: bob var(--t, 7s) ease-in-out var(--d, 0s) infinite alternate; }
  @keyframes tumble { to { transform: perspective(900px) rotateX(calc(var(--rx) + 10deg)) rotateY(calc(var(--ry) - 10deg)) rotateZ(calc(var(--rz) + 10deg)); } }
  @keyframes bob { to { transform: rotate(calc(var(--r, 0deg) + 7deg)) translateY(-10px); } }
}

/* ===== house rules: four sticky cards that stack as you scroll (js/components/house-rules.js shrinks the one underneath) ===== */
.rules { background: var(--paper); padding-top: 64px; padding-bottom: 10vh; }
.section-head { color: var(--green); }
.section-head .kick { color: var(--muted); }
.section-head h2 { margin: 6px 0 0; font-size: clamp(2.6rem, 9vw, 5rem); }
.rules .section-head { padding-block: 8px 28px; }
.rule { position: sticky; top: calc(var(--hdr, 60px) + 16px); min-height: min(64svh, 540px); margin-bottom: 16px; padding: clamp(22px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 12px;
  border-radius: 22px; color: var(--cream); background: var(--c); overflow: hidden; box-shadow: 0 -6px 30px rgba(32,38,28,.22); transform-origin: 50% 0; will-change: transform; }
.rule:nth-child(2) { top: calc(var(--hdr, 60px) + 30px); }
.rule:nth-child(3) { top: calc(var(--hdr, 60px) + 44px); }
.rule:nth-child(4) { top: calc(var(--hdr, 60px) + 58px); }
.rule .txt { display: grid; gap: 14px; min-width: 0; position: relative; z-index: 1; }
.rule .no { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.rule h3 { margin: 0; font-size: clamp(2.6rem, 9vw, 6.2rem); line-height: .92; text-shadow: 0 3px 16px rgba(0,0,0,.3); }
.rule p { margin: 0; max-width: 32ch; font-size: clamp(.98rem, 2vw, 1.15rem); }
.rule .art { position: relative; align-self: stretch; min-height: 180px; }
/* --mw: a per-image max width (narrower props) */
.rule .art img { position: absolute; left: 50%; top: 50%; width: 100%; max-width: var(--mw, 380px); translate: -50% -50%; rotate: var(--r, 0deg); filter: drop-shadow(0 22px 22px rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: no-preference) { .rule .art img { animation: rbob 6s ease-in-out infinite alternate; } @keyframes rbob { to { transform: translateY(-14px) rotate(5deg); } } }
@media (max-width: 700px) {
  .rule { grid-template-columns: 1fr; align-content: start; min-height: 0; padding-bottom: 32px; }
  .rule .art { min-height: 0; height: 20svh; order: -1; }
  .rule .art img { width: auto; height: 100%; max-width: var(--mw, 80%); }
}

/* ===== photo line: polaroids pegged to a sagging string, drifting along it (js/components/photo-line.js) ===== */
.album { background: var(--paper); color: var(--green); overflow: hidden; padding-block: 56px 40px; }
.line { --pw: clamp(128px, 34vw, 210px); position: relative; height: calc(var(--pw) * 1.4 + 70px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.line path { fill: none; stroke: #8a6b4a; stroke-width: 2; }
.snap { position: absolute; left: 0; top: 0; width: var(--pw); margin: 0; transform-origin: 50% 0; will-change: transform; }
.snap .pc { background: #fffdf7; padding: 8px 8px 0; box-shadow: 0 10px 22px rgba(32,38,28,.18), 0 1px 0 var(--line); margin-top: 10px; }
.snap .ph { aspect-ratio: 1; display: grid; background: #e9e1cf; }
.snap .ph img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.snap .cap { font-family: var(--hand); font-size: 1.5rem; line-height: 1; color: var(--ink); padding: 6px 2px 10px; text-align: center; }
.snap .peg { position: absolute; left: 50%; top: -6px; width: 9px; height: 26px; translate: -50% 0; background: linear-gradient(90deg, #b88a55, #d9b07a 50%, #a77a47); border-radius: 2px; box-shadow: 0 2px 3px rgba(0,0,0,.2); z-index: 1; }
.album .hint { text-align: center; font-size: .82rem; color: var(--muted); margin: 6px 0 0; }

/* ===== founder note (placeholder until the founder's copy and photo arrive) ===== */
.fnote { background: var(--paper); }
.fnote .wrap { padding-block: 24px 96px; }
.fcard { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); rotate: -1deg;
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: center;
  background: #fffaf0; border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 24px 50px rgba(32,38,28,.12); }
.fcard::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; translate: -50% 0; rotate: 2deg; background: rgba(201,168,221,.7); }  /* tape */
.fcard .face { width: 180px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--muted); display: grid; place-items: center; text-align: center; font-size: .78rem; font-weight: 800; color: var(--muted); padding: 20px; }
.fcard .kick { color: var(--muted); }
.fcard .tbd { display: inline-block; background: var(--lilac); color: var(--green); font: 800 .66rem var(--body); letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.fcard blockquote { margin: 10px 0 0; font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.55; color: var(--muted); font-style: italic; }
.fcard .sig { margin-top: 18px; font-family: var(--hand); font-size: 2.6rem; line-height: 1; color: var(--green); }
.fcard .sig small { display: block; font-family: var(--body); font-size: .8rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 700px) { .fcard { grid-template-columns: 1fr; justify-items: start; gap: 20px; } .fcard .face { width: 130px; } }