/* RythuBadi blueprint story. Palette from the field: tilled soil, rice husk, marigold (website), paddy (app), indigo dye (staff), kumkum (pins). */
:root { --soil: #241b14; --soil-2: #2f241a; --soil-3: #3b2e22; --husk: #f3ead8; --ash: #b8ac96; --marigold: #f2913d; --paddy: #a8c66c; --indigo: #9fb6f0; --kumkum: #d1432f; --accent: var(--marigold); --rule: rgba(243, 234, 216, .16); --rail: 132px; }
body[data-mode="staff"] { --accent: var(--indigo); }
* { box-sizing: border-box; }
html { background: var(--soil); }
html.zoom-open { overflow: hidden; }
body { margin: 0; background: var(--soil); color: var(--husk); font: 400 18px/1.55 "Anek Telugu", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#story { overflow-x: clip; }

/* top bar, toggle, jump */
#prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; }
#top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 20px 0 24px; background: rgba(36, 27, 20, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.brand { font-weight: 700; font-stretch: 112%; font-size: 17px; white-space: nowrap; }
#mode { position: fixed; z-index: 56; left: 12px; top: 10px; display: flex; background: var(--soil-2); border: 1px solid rgba(243, 234, 216, .24); border-radius: 6px; overflow: hidden; }
#mode button { padding: 8px 16px; border: 0; background: transparent; color: var(--ash); font-weight: 600; font-size: 16px; }
#mode button.on { background: var(--accent); color: var(--soil); }
.jumpwrap { position: relative; margin-left: auto; min-width: 0; }
#jump { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 14px; background: var(--soil-2); border: 1px solid rgba(243, 234, 216, .24); border-radius: 6px; font-size: 16px; }
#jump .j-label { color: var(--ash); white-space: nowrap; }
#jumpnow { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#jump .j-caret { width: 8px; height: 8px; border-right: 2px solid var(--husk); border-bottom: 2px solid var(--husk); transform: rotate(45deg) translateY(-2px); flex: 0 0 auto; }
#jump[aria-expanded="true"] .j-caret { transform: rotate(225deg) translateY(-2px); }
#jumpmenu { position: absolute; right: 0; top: calc(100% + 10px); width: min(480px, calc(100vw - 24px)); max-height: min(72vh, 680px); overflow: auto; padding: 6px; background: var(--soil-2); border: 1px solid rgba(243, 234, 216, .24); border-radius: 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
#jumpmenu button { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; width: 100%; padding: 10px 12px; text-align: left; background: transparent; border: 0; border-radius: 4px; font-size: 17px; }
#jumpmenu button:hover, #jumpmenu button.on { background: var(--soil-3); }
#jumpmenu .jm-n { color: var(--accent); font-weight: 700; }
#jumpmenu .jm-s { color: var(--ash); font-size: 14px; white-space: nowrap; }

/* text masks: words and lines rise out of a clipped box, as in the portfolio */
.st-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.st-mask-in { display: inline-block; }
h3.st-mask, p.st-mask { display: block; }
h3.st-mask > .st-mask-in, p.st-mask > .st-mask-in { display: block; }

/* website and app each keep one colour everywhere, so a step is recognised at a glance */
body[data-mode="user"] .on-web { --here: var(--marigold); }
body[data-mode="user"] .on-app { --here: var(--paddy); }

/* opening and chapter openings */
.st-hero, .st-intro, .st-after, .st-outro { padding-left: 20px; padding-right: 20px; }
.st-hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: 104px; padding-bottom: 60px; max-width: 980px; }
.st-num { color: var(--accent); font-weight: 600; font-size: 17px; }
h1 { font-size: clamp(42px, 8.2vw, 116px); line-height: 1; font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; max-width: 12ch; }
h2 { font-size: clamp(32px, 5.2vw, 72px); line-height: 1.04; font-weight: 750; font-stretch: 114%; letter-spacing: -.015em; max-width: 16ch; }
h3 { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; font-weight: 700; font-stretch: 108%; }
.st-lead { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; max-width: 60ch; }
.st-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; max-width: 900px; }
.st-plan h3 { font-size: 22px; color: var(--here); padding-bottom: 8px; border-bottom: 2px solid var(--here); }
.st-plan li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.4; }
.st-how { display: grid; max-width: 62ch; }
.st-how li { padding: 4px 0; color: var(--ash); }
.st-count { font-weight: 600; }
.st-ch { border-top: 1px solid var(--rule); }
.st-intro { display: flex; flex-direction: column; gap: 20px; padding-top: 96px; padding-bottom: 40px; max-width: 980px; }
.st-facts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 900px; }
.st-facts > div { flex: 1 1 200px; padding: 14px 18px 14px 0; }
.st-facts dt { color: var(--ash); font-size: 15px; }
.st-facts dd { font-weight: 600; font-size: 18px; line-height: 1.3; }
.st-cut { color: var(--accent); font-weight: 600; max-width: 60ch; }

/* devices: a phone for the app, a browser window for anything on the web */
.st-device { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; box-shadow: 0 40px 72px rgba(0, 0, 0, .5); }
.st-device.is-phone { padding: 9px; border-radius: 34px; background: #0f0b08; border: 1px solid rgba(243, 234, 216, .24); }
.st-device.is-browser { border: 1px solid rgba(243, 234, 216, .3); border-radius: 8px; overflow: hidden; background: #fff; }
.st-url { flex: 0 0 32px; display: flex; align-items: center; padding: 0 12px; background: #e6dfd2; color: #4a3f33; font: 500 13px/1 Inter, Arial, sans-serif; white-space: nowrap; overflow: hidden; }
.st-vp { position: relative; overflow: hidden; background: #fff; }
.is-phone .st-vp { border-radius: 26px; }
.st-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.st-fit { position: absolute; top: 0; transform-origin: 0 0; }
.st-big { padding: 4px 2px; background: transparent; border: 0; color: var(--ash); font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.st-big:hover { color: var(--husk); }
.st-under { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 12px; }
.st-bars { display: flex; gap: 4px; }
.st-bars i { width: 20px; height: 3px; background: rgba(243, 234, 216, .22); }
.st-bars i.on { background: var(--here, var(--accent)); }

/* the pinned stage: exactly one screen tall, nothing to scroll inside it */
.st-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; overflow: hidden; }
.st-col-text, .st-col-notes, .st-col-device { display: grid; min-width: 0; min-height: 0; }
.st-col-text > *, .st-col-notes > *, .st-col-device > * { grid-area: 1 / 1; }
.st-col-device { place-items: center; }
.st-scene-text { display: flex; flex-direction: column; gap: 10px; }
.st-step { color: var(--here, var(--accent)); font-weight: 600; font-size: 16px; }
.st-p { color: var(--ash); font-size: 18px; line-height: 1.5; }

/* notes: a rail that draws as you scroll, each note joining it in turn */
.st-rail { position: relative; display: flex; flex-direction: column; gap: 18px; align-self: start; }
.st-rail-line { position: absolute; left: 12px; top: 4px; bottom: 4px; width: 2px; background: rgba(243, 234, 216, .3); transform-origin: 50% 0; }
.st-note { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 17px; line-height: 1.4; }
.st-note-n { width: 26px; height: 26px; border-radius: 50%; background: var(--kumkum); color: #fff; font: 700 13px/26px Inter, Arial, sans-serif; text-align: center; }
.st-note.no-pin .st-note-n { background: var(--soil); border: 2px solid rgba(243, 234, 216, .4); color: var(--ash); line-height: 22px; }
.st-note.has-pin:hover .st-note-t, .st-note.has-pin:focus .st-note-t { text-decoration: underline; text-decoration-color: var(--kumkum); text-underline-offset: 4px; }

/* wide screens: words on the left, the screen takes the rest */
.is-wide .st-hero, .is-wide .st-intro, .is-wide .st-after, .is-wide .st-outro { padding-left: var(--rail); padding-right: 48px; }
.is-wide #mode { left: 20px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.st-herowrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: 48px; padding-right: 64px; }
.st-herowrap .st-hero { min-height: 0; justify-content: flex-start; padding-top: 112px; }
.st-herowrap h1 { font-size: clamp(40px, 4.7vw, 78px); max-width: 14ch; }
.st-hero-device { position: relative; min-width: 0; margin-top: 150px; display: flex; justify-content: center; }
.st-hero-phone { position: absolute; right: -14px; bottom: -70px; }
.is-wide .st-stage { grid-template-columns: minmax(280px, 26vw) minmax(0, 1fr); gap: 0 44px; padding: 72px 36px 12px var(--rail); }
.st-left { display: flex; flex-direction: column; justify-content: center; gap: 30px; min-width: 0; min-height: 0; }
.st-right { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }

/* phones: the same pinned story. Title on top, the screen fills the rest, each note is laid over it in turn */
.st-stage.is-narrow { grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 66px 10px 8px; }
.is-narrow .st-col-text { align-self: start; min-height: 62px; padding: 0 4px; }
.is-narrow .st-scene-text { gap: 0; }
.is-narrow .st-step { font-size: 14px; }
.is-narrow h3 { font-size: 20px; line-height: 1.15; }
.st-area { position: relative; display: grid; min-height: 0; min-width: 0; }
.st-col-cap { position: absolute; inset: 0; pointer-events: none; }
.st-cap { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 11px 13px; background: var(--soil-2); border: 1px solid rgba(243, 234, 216, .34); border-radius: 8px; font-size: 16px; line-height: 1.35; pointer-events: auto; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.st-cap.at-top { top: 4px; bottom: auto; }
.st-cap.st-note { grid-template-columns: 26px 1fr; gap: 10px; }
.is-narrow .st-under { padding-top: 4px; gap: 14px; }
.is-narrow .st-bars i { width: 12px; }

/* after a chapter */
.st-after { padding-top: 30px; padding-bottom: 100px; display: flex; flex-direction: column; gap: 20px; max-width: 1100px; }
.st-wrong { display: grid; border-top: 1px solid var(--rule); }
.st-wrong > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.st-wrong dt { font-weight: 600; }
.st-wrong dd { color: var(--ash); }
.st-more { align-self: flex-start; text-align: left; padding: 4px 0; background: transparent; border: 0; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.st-more:hover { color: var(--husk); }
.st-thumbs { display: flex; flex-wrap: wrap; gap: 18px; }
.st-thumb { display: flex; flex-direction: column; gap: 8px; padding: 0; background: transparent; border: 0; text-align: left; }
.st-thumb-box { overflow: hidden; border-radius: 3px; background: #fff; }
.st-thumb:hover .st-thumb-box { outline: 2px solid var(--accent); }
.st-thumb-cap { font-size: 14px; line-height: 1.3; color: var(--ash); max-width: 288px; }
.st-outro { padding-top: 100px; padding-bottom: 140px; display: flex; flex-direction: column; gap: 22px; max-width: 980px; border-top: 1px solid var(--rule); }
.st-ask { counter-reset: q; display: grid; border-top: 1px solid var(--rule); }
.st-ask li { counter-increment: q; display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 19px; }
.st-ask li::before { content: counter(q); color: var(--accent); font-weight: 700; }

/* big view */
#zoom { position: fixed; inset: 0; z-index: 80; background: #17110c; display: flex; flex-direction: column; }
#zoom[hidden] { display: none; }
.zoom-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
#zoomtitle { font-weight: 600; flex: 1 1 auto; min-width: 0; }
#zoomclose { padding: 8px 16px; background: var(--husk); color: var(--soil); border: 0; border-radius: 6px; font-weight: 700; }
#zoombody { flex: 1 1 auto; overflow: auto; padding: 20px 16px 60px; }
.st-zoom-holder { margin: 0 auto; overflow: hidden; }

@media (max-width: 999px) {
  body { font-size: 17px; }
  #top { padding: 0 10px 0 148px; gap: 10px; }
  .brand { display: none; }
  #mode button { padding: 8px 12px; }
  #jump .j-label { display: none; }
  .jumpwrap { flex: 1 1 auto; }
  #jump { width: 100%; justify-content: space-between; }
  .st-hero { min-height: 0; padding-top: 100px; }
  .st-plan { grid-template-columns: 1fr; gap: 22px; }
  .st-intro { padding-top: 70px; }
  .st-wrong > div { grid-template-columns: 1fr; gap: 4px; }
  .st-after { padding-bottom: 70px; }
}