/* Home page only (index.html). From the Paste-up prototype. */

.pstep .demo .pinsheet { width: min(300px, 86%); }
.pstep[data-act="know"] .demo .art { filter: var(--art-filter) saturate(.8); opacity: .9; }

.who3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.who { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; }
.who p { margin-top: 6px; color: var(--ink2); font-size: 15.5px; }
@media (max-width: 900px) { .who3 { grid-template-columns: 1fr; } }

.status-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.vocab { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voc { padding: 18px; }
.voc .plates { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 12px; }
@media (max-width: 960px) { .status-band { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vocab { grid-template-columns: 1fr; } }

.campus { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.campus-art { position: relative; }
.campus-art .art { border-radius: 8px; }
.campus-tag { position: absolute; left: 14px; top: 14px; background: var(--sheet); }
.decoder { margin-top: 26px; padding: 18px; display: grid; gap: 12px; max-width: 520px; }
.room-in { height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--well); font-weight: 800; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; }
.room-in:focus { outline: 2.5px solid var(--green); outline-offset: 1px; }
.room-out { color: var(--ink2); font-size: 15.5px; }
.room-out b { color: var(--ink); }
.decode span { transition: transform 300ms var(--ease-spring), background-color 200ms ease; }
.decode span.pop { transform: translateY(-4px); }
@media (max-width: 900px) { .campus { grid-template-columns: 1fr; } }

/* The app: the App Store frames in one strip that scrolls inside itself.
   --per is how many frames show at once; the fraction is the next one
   peeking in, so the strip says there is more without a word. The frames are
   the real app and its own collage, so they are never cut (site/paper.css). */
.shots { --sg: clamp(14px, 1.6vw, 24px); --per: 4.15; }
.shots-row { display: flex; gap: var(--sg); margin: -14px -4px 0; padding: 14px 4px 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; }
.shots-row::-webkit-scrollbar { display: none; }
.shots-row > li { flex: 0 0 calc((100% - (var(--per) - 1) * var(--sg)) / var(--per)); min-width: 0; list-style: none; scroll-snap-align: start; }
.shots-row img { display: block; width: 100%; height: auto; aspect-ratio: 440 / 956; border-radius: 14px; background: var(--well); box-shadow: var(--shadow); rotate: -.5deg; }
.shots-row > li:nth-child(even) img { rotate: .45deg; }
.shots-row:focus-visible { outline-offset: -2px; border-radius: 16px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .shots-row img { transition: rotate .4s cubic-bezier(.2,.8,.2,1); } .shots-row > li:hover img { rotate: 0deg; } }

/* Controls exist only once the script can drive them; without it the strip
   still scrolls on its own. The screens in view are underlined, never filled. */
.shots-ctl { display: none; }
.js .shots-ctl { display: flex; align-items: center; gap: 16px 24px; margin-top: 10px; }
.shots-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; }
.shots-tabs li { list-style: none; }
.shots-tabs button { position: relative; padding: 8px 9px 13px; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ink3); transition: color 200ms ease; }
.shots-tabs button::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 2.5px; border-radius: 2px; background: var(--ink); scale: 0 1; transform-origin: left; transition: scale 320ms var(--ease-out); }
.shots-tabs button[aria-current="true"] { color: var(--ink); }
.shots-tabs button[aria-current="true"]::after { scale: 1 1; }
@media (hover: hover) { .shots-tabs button:hover { color: var(--ink); } }
.shots-count { display: none; font-size: 15px; font-weight: 650; color: var(--ink3); }
.shots-count b { font-weight: 800; color: var(--ink); }
.shots-arrows { display: flex; flex: none; gap: 10px; margin-left: auto; }
.shots-arrows .btn { width: var(--bh); padding: 0; }
@media (max-width: 1100px) { .shots { --per: 2.6; } .shots-tabs { display: none; } .js .shots-count { display: block; } }
/* Phones: the strip runs to the screen edges (inside the page, which never
   scrolls sideways) and shows a frame and a fifth. */
@media (max-width: 700px) {
  .shots { --per: 1.22; }
  .shots-row { margin: -14px calc(var(--gut) * -1) 0; padding: 14px var(--gut) 22px; scroll-padding-inline: var(--gut); }
}

.expiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.ledger-card { padding: 24px 22px 12px; }
.ledger td:last-child { width: 40%; }
.ledger .drain i { transform: scaleX(var(--w)); transition: transform 1.4s var(--ease-out); }
.js .ledger:not(.in) .drain i { transform: scaleX(0); }
.ask { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 26px; padding: 14px; max-width: 420px; }
@media (max-width: 900px) { .expiry { grid-template-columns: 1fr; } }

.groups { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.switcher { padding: 20px; }
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; padding: 5px; border-radius: 12px; background: var(--well); }
.aud button { display: grid; gap: 2px; padding: 10px 12px; border-radius: 9px; text-align: left; transition: background-color 180ms ease; }
.aud button b { font-size: 14px; font-weight: 750; }
.aud button small { color: var(--ink3); font-size: 13px; }
.aud button[aria-checked="true"] { background: var(--sheet); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.audmap { position: relative; margin-top: 14px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; min-height: 300px; }
.audmap .art { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.audsheet { position: relative; transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.audsheet.swap { transform: translateY(8px); opacity: 0; }
@media (max-width: 900px) { .groups { grid-template-columns: 1fr; } .groups > :first-child { order: 2; } .aud { grid-template-columns: 1fr; } }

.biz { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.bizdemo { display: grid; place-items: center; }
@media (max-width: 960px) { .biz { grid-template-columns: 1fr; } }

.made { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.made-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.mp img { width: 100%; height: auto; border-radius: 8px; filter: var(--art-filter); box-shadow: var(--shadow); }
/* Pinned up, not lined up: each plate sits at its own height and lean.
   margin and rotate rather than transform, so the scroll-in reveal (which
   owns transform) can't flatten them back into a row. */
.made-plates { align-items: start; }
.mp:nth-child(1) { margin-top: 8px; rotate: -2.2deg; }
.mp:nth-child(2) { margin-top: 72px; rotate: 1.6deg; }
.mp:nth-child(3) { margin-top: 28px; rotate: -.8deg; }
.mp figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-top: 10px; }
.mp figcaption span { white-space: nowrap; }
.mp figcaption b { font-weight: 800; letter-spacing: -.02em; }
.mp figcaption span { font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
@media (max-width: 860px) { .made { grid-template-columns: 1fr; } .mp:nth-child(2) { margin-top: 40px; } .mp:nth-child(3) { margin-top: 16px; } }
@media (prefers-reduced-motion: no-preference) { .mp { transition: rotate .4s cubic-bezier(.2,.8,.2,1); } .mp:hover { rotate: 0deg; } }
@media (max-width: 420px) { .mp figcaption { flex-direction: column; gap: 2px; } }

/* Live-site additions */
.home-trust .trust { padding: 22px 4px 0; justify-content: center; }
.intro-legend b { color: var(--ink2); font-weight: 750; }
.pstep.acts:focus-visible { outline-offset: 6px; border-radius: 10px; }
.intro-legend .intro-by { display: inline; text-align: center; }
.campus > *, .expiry > *, .groups > *, .made > * { min-width: 0; }
.room-in { width: 100%; min-width: 0; }
@media (max-width: 900px) { .campus, .expiry, .groups, .made, .status-band, .biz { grid-template-columns: minmax(0, 1fr); } }

/* Paper and ink (site/paper.css) */
.intro-copy .hero-spark { left: calc(8% - 16px); top: -24px; width: 54px; --sw: 2.6; rotate: -18deg; }
.intro:not(.intro-done) .ink path { stroke-dashoffset: 1.03; }
.intro .sq .ink { --dd: 400ms; }
#how .sec-head { margin-bottom: clamp(60px, 7.4vw, 120px); }
#how .psteps { position: relative; }
.how-coil { left: 4%; width: 94%; top: clamp(-92px, -5.6vw, -56px); height: clamp(44px, 4.4vw, 74px); --sw: 2; --dur: 2.4s; }
.pstep .demo .cut { padding: 16px 16px 18px; }
.campus-copy { position: relative; }
.campus-arrow { position: relative; display: block; width: 116px; margin: -6px 2% -58px auto; scale: -1 1; rotate: 8deg; --sw: 2.6; }
.decoder .room-in { background: transparent; border-radius: 0; box-shadow: inset 0 -2px 0 rgba(29,31,34,.75); padding: 0 4px; }
.cut .decode span { background: #FBF6EA; border-radius: 2px; box-shadow: 0 1px 0 rgba(70,50,20,.14), 0 6px 8px -6px rgba(50,34,12,.4); rotate: -1.5deg; }
.cut .decode div:nth-child(2) span { rotate: 1.2deg; } .cut .decode div:nth-child(3) span { rotate: -.4deg; }
.status-sec { position: relative; }
.band-waves { right: 6%; top: calc(clamp(72px, 9vw, 140px) - 40px); width: clamp(160px, 16vw, 260px); --sw: 2.2; --dur: 1.6s; }
.aud { background: transparent; box-shadow: inset 0 -1px 0 var(--rule); border-radius: 0; }
.cut .aud button[aria-checked="true"] { background: #1D1F22; color: var(--paper); box-shadow: none; }
.cut .aud button[aria-checked="true"] small { color: rgba(245,237,219,.72); }
.audmap .cut { width: min(300px, 88%); }
@media (max-width: 900px) { .how-coil, .campus-arrow { display: none; } }
@media (max-width: 700px) { .intro-copy .hero-spark { display: none; } }
.intro-legend { font-size: 13.5px; }

/* The map switch: the selected map is underlined, and the line slides. */
.aud { position: relative; }
.aud button[aria-checked="true"], .cut .aud button[aria-checked="true"] { background: none; color: var(--ink); box-shadow: none; }
.cut .aud button[aria-checked="true"] small { color: var(--ink3); }
.aud::after { --i: 0; content: ''; position: absolute; left: 17px; bottom: 7px; width: calc((100% - 22px) / 3 - 24px); height: 2.5px; border-radius: 2px; background: var(--ink); translate: calc((100% + 30px) * var(--i)) 0; transition: translate 320ms var(--ease-out); }
.aud:has([data-aud="flat"][aria-checked="true"])::after { --i: 1; }
.aud:has([data-aud="crew"][aria-checked="true"])::after { --i: 2; }
.aud button { padding-bottom: 14px; }
@media (max-width: 900px) { .aud::after { display: none; } .aud button[aria-checked="true"] b { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 5px; } }

/* The statement above the collage: one bold sentence, then the rest in the
   same size and a lighter weight, set wide like a printed masthead. */
.lead-statement { padding-top: clamp(28px, 5vw, 76px); padding-bottom: clamp(26px, 4vw, 56px); }
.lead-statement h1 { max-width: 30em; font-size: clamp(27px, 3.5vw, 56px); font-weight: 420; line-height: 1.16; letter-spacing: -.028em; color: var(--ink); text-wrap: pretty; }
.lead-statement h1 b { font-weight: 800; letter-spacing: -.035em; }
@media (max-width: 600px) { .lead-statement h1 { font-size: 26px; line-height: 1.2; } }
/* The collage panel is the same ground the canvas paints, so nothing flashes on load. */
.intro { background: var(--ground); }
/* The example under each kind of post: its own line, as a little paper slip
   with a dashed edge, so it reads as a sample and not as more of the sentence.
   Light paper in both themes, like every other cut-out on the page. */
.spec p .tag { display: flex; width: fit-content; max-width: 100%; height: auto; min-height: 30px; margin-top: 12px !important; padding: 5px 12px; border-radius: 4px; background: #F4EEE2; color: #1D1F22; font-size: 12.5px; line-height: 1.35; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 14px -8px rgba(0,0,0,.45); outline: 1.3px dashed rgba(29,31,34,.42); outline-offset: -4px; rotate: -.6deg; }
.spec:nth-child(even) p .tag { rotate: .5deg; }