/*
  APNASCHOOL CASE STUDY — STANDALONE CSS
  Content only: no header, no footer, no links or buttons. Images and videos
  are for viewing, not clicking. Colours and fonts are in :root.

  01 Tokens + base     04 Overview + numbers   07 Design system
  02 Animated cover    05 Approach             08 Deliverables + all pages
  03 Title + meta      06 Key screens          09 Mobile · 10 Reduced motion
*/

/* 01. TOKENS + BASE ------------------------------------------------------- */
:root {
  --teal: #00DEBD; --teal-d: #00A58C; --ink: #101212; --sky: #DDECF6;
  --paper: #FFFFFF; --soft: #F6F7F8; --line: #E3E5E8; --mute: #6E7275;
  --sans: "Inter", Arial, sans-serif;
  --mono: "Inter", ui-monospace, monospace;
  --gutter: clamp(20px, 5.5vw, 110px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
/* Media is for viewing only: no clicks, drags or long-press menus */
img, video, picture { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.wrap { padding-inline: var(--gutter); }
.mono { font: 400 clamp(10px, .75vw, 13px)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform 1.1s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* 02. ANIMATED COVER: full width, first thing on the page ------------------ */
.cover { background: var(--teal); }
.cover .media { width: 100%; aspect-ratio: 16 / 9; max-height: 100svh; object-fit: cover; }

/* 03. TITLE + STATEMENT + META --------------------------------------------- */
.intro { padding-top: clamp(60px, 7vw, 120px); padding-bottom: clamp(70px, 8vw, 140px); }
.kick { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 clamp(36px, 4.5vw, 80px); padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--mute); }
.title { margin: 0 0 clamp(30px, 3.6vw, 64px); font: 600 clamp(52px, 8.4vw, 160px)/.92 var(--sans); letter-spacing: -.05em; }
.statement { max-width: 28ch; margin: 0; font: 500 clamp(26px, 3.4vw, 64px)/1.12 var(--sans); letter-spacing: -.035em; }
.statement .w { color: #CDD1D4; transition: color .5s ease; }
.statement .w.is-lit { color: var(--ink); }
.statement strong { font-weight: 600; }
.statement strong .w.is-lit { color: var(--teal-d); }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(56px, 6vw, 110px) 0 0; border-top: 1px solid var(--line); }
.meta div { padding: 22px 20px 0 0; }
.meta dt { margin-bottom: 12px; color: var(--mute); font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.meta dd { margin: 0; font: 500 clamp(16px, 1.25vw, 22px)/1.3 var(--sans); }

/* Section titles, shared */
.sec-title { display: flex; align-items: baseline; gap: 18px; margin: 0; font: 600 clamp(32px, 3.4vw, 64px)/1 var(--sans); letter-spacing: -.035em; }
.sec-title .mono { color: var(--mute); font-weight: 400; letter-spacing: .14em; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 30px; margin-bottom: clamp(36px, 4vw, 70px); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.sec-head p { margin: 0; color: var(--mute); font: 400 clamp(14px, 1.05vw, 18px)/1.4 var(--sans); }

/* 04. OVERVIEW + NUMBERS --------------------------------------------------- */
.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(30px, 5vw, 100px); padding-top: clamp(30px, 3vw, 60px); padding-bottom: clamp(90px, 9vw, 160px); }
.overview .sec-title { position: sticky; top: 60px; align-self: start; }
.ov-body > p { max-width: 62ch; margin: 0 0 1.1em; color: #4A4E51; font: 400 clamp(16px, 1.25vw, 22px)/1.6 var(--sans); }
.ov-body > p.lead { max-width: 34ch; color: var(--ink); font: 400 clamp(22px, 2vw, 36px)/1.3 var(--sans); letter-spacing: -.02em; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(40px, 4vw, 70px); }
.facts > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.facts h3 { margin: 0 0 14px; color: var(--mute); font-weight: 400; }
.facts p { margin: 0; font: 500 clamp(15px, 1.15vw, 20px)/1.45 var(--sans); }
.numbers { background: var(--sky); }
.num-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.num-grid > div { padding: clamp(44px, 4.4vw, 80px) clamp(14px, 1.6vw, 30px); border-left: 1px solid rgb(16 18 18 / 12%); }
.num-grid > div:first-child { border-left: 0; padding-left: 0; }
.num-grid b { display: block; font: 600 clamp(60px, 6.6vw, 128px)/.9 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.num-grid p { max-width: 26ch; margin: 18px 0 0; color: #3E4245; font: 400 clamp(14px, 1vw, 17px)/1.5 var(--sans); }

/* 05. APPROACH: dark band, six steps shown at once -------------------------- */
.approach { background: var(--ink); color: #fff; }
.approach-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(30px, 5vw, 100px); padding-top: clamp(100px, 10vw, 180px); padding-bottom: clamp(100px, 10vw, 180px); }
.ap-left { position: sticky; top: 60px; align-self: start; }
.ap-left p { max-width: 36ch; margin: 26px 0 0; color: #A7ABAE; font: 400 clamp(15px, 1.1vw, 19px)/1.6 var(--sans); }
.approach .sec-title .mono { color: var(--teal); }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 60px); margin: 0; padding: 0; list-style: none; }
.steps li { padding: clamp(22px, 2vw, 34px) 0 clamp(26px, 2.4vw, 40px); border-top: 1px solid #2A2E2F; }
.steps li:nth-child(even) { transition-delay: .08s; }
.steps .mono { color: var(--teal); }
.steps h3 { margin: 14px 0 12px; font: 500 clamp(24px, 2.3vw, 42px)/1 var(--sans); letter-spacing: -.03em; }
.steps p { max-width: 34ch; margin: 0; color: #A7ABAE; font: 400 clamp(15px, 1.05vw, 18px)/1.55 var(--sans); }

/* 06. KEY SCREENS: still images, top of each page -------------------------- */
.screens { padding-top: clamp(100px, 10vw, 180px); padding-bottom: clamp(100px, 10vw, 180px); }
.shot { margin: 0; }
.shot .frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: clamp(12px, 1vw, 18px); background: var(--soft); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgb(16 18 18 / 35%); }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot--tall .frame { aspect-ratio: auto; height: 100%; min-height: 100%; }
.shot--tall .frame img { position: absolute; inset: 0; }
.shot--video .frame { aspect-ratio: 16 / 9; }
.shot--video video { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { display: grid; grid-template-columns: minmax(120px, .3fr) 1fr; gap: 20px; padding: 16px 2px 0; font: 400 clamp(13px, .95vw, 16px)/1.5 var(--sans); }
.shot figcaption b { font-weight: 600; }
.shot figcaption span { color: var(--mute); }
.shot--wide { margin-bottom: clamp(30px, 3vw, 56px); }
.shot--video { margin: clamp(40px, 4vw, 72px) 0 0; }
.bento { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 2.2vw, 40px); align-items: stretch; }
.bento > .shot--tall { display: flex; flex-direction: column; }
.bento > .shot--tall .frame { flex: 1; }
.bento-col { display: grid; gap: clamp(30px, 3vw, 56px); }

/* 07. DESIGN SYSTEM: one image (a phone gets a stacked version) ------------- */
.system { padding-bottom: clamp(100px, 10vw, 180px); }
.sys-image { margin: 0; }
.sys-image img { width: 100%; height: auto; }

/* 08. DELIVERABLES + ALL PAGES ------------------------------------------------ */
.deliver { padding-bottom: clamp(100px, 10vw, 180px); }
.deliver .sec-title { margin-bottom: clamp(36px, 4vw, 70px); }
.deliver-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.deliver-grid > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.deliver-grid h3 { margin: 0 0 14px; color: var(--mute); font-weight: 400; }
.deliver-grid ul { margin: 0; padding: 0; list-style: none; }
.deliver-grid li { padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 clamp(15px, 1.1vw, 19px)/1.3 var(--sans); }
.pages { padding-bottom: clamp(100px, 10vw, 180px); }
.pages-frame { margin: 0; }
.pages-frame .frame { overflow: hidden; border-radius: clamp(14px, 1.2vw, 22px); background: var(--ink); }
.pages-frame .media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* 09. MOBILE -------------------------------------------------------------- */
@media (max-width: 900px) {
  .kick span:nth-child(3) { display: none; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .overview, .approach-in { grid-template-columns: minmax(0, 1fr); }
  .overview .sec-title, .ap-left { position: static; }
  .facts { grid-template-columns: 1fr; }
  .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num-grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .num-grid > div { padding-block: 36px; border-top: 1px solid rgb(16 18 18 / 12%); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-col, .bento > * { min-width: 0; }
  .shot--tall .frame { aspect-ratio: 715 / 1100; height: auto; }
  .deliver-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot figcaption { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
  .kick span:nth-child(2) { display: none; }
  .title { font-size: 15.5vw; }
  .meta, .deliver-grid, .steps { grid-template-columns: 1fr; }
  .num-grid > div { border-left: 0 !important; padding-left: 0 !important; }
  .sec-title { font-size: 8.6vw; }
}

/* 10. REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .statement .w { color: inherit; }
}