/* =====================================================================
   ABOUT — TEXT-BREAKING CONCEPTS (b2)
   Loads AFTER styles.css + pages.css. Adds visual structure to break up
   the heavy About copy: section markers, animated dividers, statement
   bands, an italic question stack, and a journey timeline. Copy stays
   verbatim (lines are repositioned/restyled, never reworded/duplicated).
   Three concept pages share this file; each uses the parts it needs.
   All motion is opacity/transform, IntersectionObserver-driven, and
   suppressed under prefers-reduced-motion.
   ===================================================================== */

/* ---------- review-only concept switcher (fixed pill, bottom-centre) ---------- */
.cswitch{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:80;display:flex;align-items:center;gap:4px;padding:6px 8px 6px 14px;
  background:rgba(23,19,16,.92);color:var(--on-dark-2);border-radius:999px;
  box-shadow:0 8px 28px rgba(23,19,16,.28);backdrop-filter:saturate(140%) blur(6px);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.cswitch span{opacity:.7;padding-right:4px;}
.cswitch a{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--on-dark);text-decoration:none;font-size:13px;letter-spacing:0;}
.cswitch a[aria-current="page"]{background:var(--accent);color:#fff;}

/* ---------- shared: staggered paragraph reveal ---------- */
.stagger > *{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.stagger.in > *{opacity:1;transform:none;}
.stagger.in > *:nth-child(1){transition-delay:.00s}
.stagger.in > *:nth-child(2){transition-delay:.07s}
.stagger.in > *:nth-child(3){transition-delay:.14s}
.stagger.in > *:nth-child(4){transition-delay:.21s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(6){transition-delay:.35s}
.stagger.in > *:nth-child(7){transition-delay:.42s}
.stagger.in > *:nth-child(8){transition-delay:.49s}

/* ---------- shared: section number marker ---------- */
.sec-no{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,11vw,3.6rem);
  line-height:.9;letter-spacing:-0.02em;color:var(--accent);opacity:.32;margin:0 0 6px;}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
/* M4: the section marker label is a real <h2> now (was <p>) so the narrative sections are
   skimmable headings for screen readers. .eyebrow's own class rule already wins the shared
   h1,h2,h3 rule (and the plain h2{font-size} rule) on font-size/weight/family/letter-spacing/
   margin, since a class selector outranks those element-only selectors regardless of source
   order - color is untouched here too (psec--sand's own alternating override still applies).
   The one property NOT set by .eyebrow is line-height, so the shared h1,h2,h3{line-height:1.04}
   rule would otherwise win and shrink the line box versus the old <p> (which inherited the
   page's normal line-height) - reset it back to inherited so the row's baseline alignment with
   .sec-no does not shift by even a pixel. */
.sec-head h2.eyebrow{margin:0 0 var(--s3);font-size:12px;font-weight:600;font-family:var(--sans);
  letter-spacing:0.2em;line-height:inherit;text-transform:uppercase;}

/* ---------- shared: divider rule that draws in on scroll ---------- */
.cdiv{height:2px;width:0;background:var(--accent);margin:clamp(36px,6vh,64px) 0;border:0;}
.cdiv.in{width:72px;transition:width 1s cubic-bezier(.16,.8,.24,1);}

/* ---------- shared: highlight a key clause inside prose ---------- */
.hl{color:var(--accent-deep);font-weight:600;}

/* =====================================================================
   CONCEPT 1 — EDITORIAL INDEX: the 4 questions as a numbered italic list
   ===================================================================== */
.qlist{list-style:none;margin:var(--s4) 0 0;padding:0;counter-reset:q;}
.qlist li{counter-increment:q;position:relative;padding:clamp(18px,3vh,26px) 0 clamp(18px,3vh,26px) 48px;
  border-top:1px solid var(--hairline);
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,5.2vw,1.95rem);line-height:1.22;letter-spacing:-0.01em;color:var(--ink);}
.qlist li:last-child{border-bottom:1px solid var(--hairline);}
.qlist li::before{content:"0" counter(q);position:absolute;left:0;top:calc(clamp(18px,3vh,26px) + .15em);
  font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--accent);font-family:var(--sans);}
/* reveal each question on arrival */
.qlist li{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.qlist.in li{opacity:1;transform:none;}
.qlist.in li:nth-child(2){transition-delay:.12s}
.qlist.in li:nth-child(3){transition-delay:.24s}
.qlist.in li:nth-child(4){transition-delay:.36s}

/* =====================================================================
   CONCEPT 2 — THE JOURNEY: vertical timeline spine with a drawing line
   ===================================================================== */
.tl{position:relative;margin-top:var(--s4);padding-left:34px;}
/* faint full-height rail */
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--hairline);}
/* accent line that grows as you scroll (height set by JS) */
.tl__fill{position:absolute;left:6px;top:10px;width:2px;height:0;background:var(--accent);
  box-shadow:0 0 12px rgba(142,93,38,.35);}
.tl__node{position:relative;padding:0 0 clamp(26px,4vh,40px);}
.tl__node:last-child{padding-bottom:0;}
.tl__node::before{content:"";position:absolute;left:-34px;top:.2em;width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:2px solid var(--hairline);transition:border-color .4s ease,background .4s ease,box-shadow .4s ease;}
.tl--sand .tl__node::before{background:var(--paper-3);}
.tl__node.lit::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px rgba(142,93,38,.14);}
.tl__node h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,4.4vw,1.5rem);
  line-height:1.16;letter-spacing:-0.01em;color:var(--accent-deep);margin:0 0 10px;}
.tl__node p{margin:0 0 12px;color:var(--ink-2);font-size:1.05rem;line-height:1.62;}
.tl__node p:last-child{margin-bottom:0;}
.tl__node .em{color:var(--ink);font-weight:600;font-size:1.12rem;}
/* node reveal */
.tl__node{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.tl__node.in{opacity:1;transform:none;}
/* a highlighted question node inside the spine */
.tl__q{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,5vw,1.9rem);line-height:1.22;color:var(--ink);}
.tl__q + .tl__q{margin-top:14px;}

/* ---------- MERGED (2+3): bold-statement emphasis nodes on the timeline ---------- */
/* big italic question block as a node */
.tl__qbig{margin:0;display:grid;gap:16px;}
.tl__qbig p{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,5.6vw,2.05rem);line-height:1.18;letter-spacing:-0.005em;color:var(--ink);}
/* large serif statement node (accent moment) */
.tl__node--statement p{margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.45rem,5.8vw,2.1rem);line-height:1.16;letter-spacing:-0.012em;color:var(--ink);}
.tl__node--statement .it{font-style:italic;color:var(--accent);}
/* dark inset pivot card (C3's dark gold band, kept inset so the spine stays intact) */
.tl__node--dark .card{background:var(--dark);border-radius:12px;padding:clamp(22px,5.5vw,34px);
  box-shadow:0 16px 44px rgba(23,19,16,.20);}
.tl__node--dark .card p{margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,6vw,2.15rem);line-height:1.14;letter-spacing:-0.012em;color:var(--on-dark);}
.tl__node--dark .card .it{font-style:italic;color:#C79A5E;}
/* the dark/accent nodes get a filled dot regardless of scroll, so they read as milestones */
.tl__node--dark::before,.tl__node--statement::before{border-color:var(--accent);}

/* =====================================================================
   CONCEPT 3 — BOLD STATEMENTS: full-bleed giant serif statements pulled
   from the copy, breaking the prose. Some on dark bands.
   ===================================================================== */
/* wider copy column at wide viewports — client: too much empty wing space, copy read compressed */
@media(min-width:1150px){
  .about-body .measure{max-width:820px;}
  .about-body .prose p{max-width:72ch;}
}
.sband{margin:clamp(34px,6vh,64px) 0;}
.sband p{margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,9vw,3.1rem);line-height:1.1;letter-spacing:-0.022em;color:var(--ink);max-width:15ch;}
.sband--accent p{color:var(--accent-deep);}
/* ember statement band — punchline colour + full column width (client: ember + stretch) */
.sband--ember p{color:var(--ember);max-width:none;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.22;}
@media(min-width:1150px){.measure .sband--ember p{margin-inline:-7vw;}}
.sband .it{font-style:italic;color:var(--accent);}
/* dark full-bleed band (breaks the page rhythm hard) */
.sband--dark{background:var(--dark);margin-inline:-24px;padding:clamp(48px,9vh,84px) 24px;}
.sband--dark p{color:var(--on-dark);max-width:18ch;}
.sband--dark .it{color:#C79A5E;}
/* reveal: rise + unblur */
.sband p{opacity:0;transform:translateY(20px);filter:blur(6px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .8s ease;}
.sband.in p{opacity:1;transform:none;filter:none;}
/* concept-3 big sequential questions */
.qbig{margin:var(--s4) 0 0;display:grid;gap:clamp(20px,4vh,34px);}
.qbig p{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,6.4vw,2.4rem);line-height:1.16;letter-spacing:-0.01em;color:var(--ink);
  padding-left:18px;border-left:3px solid var(--accent);
  opacity:0;transform:translateX(-10px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.qbig.in p{opacity:1;transform:none;}
.qbig.in p:nth-child(2){transition-delay:.18s}

/* =====================================================================
   reduced motion: show everything, no movement
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .stagger > *,.qlist li,.tl__node,.sband p,.qbig p,.pfig{opacity:1!important;transform:none!important;filter:none!important;}
  .cdiv{width:72px!important;transition:none!important;}
  .tl__fill{transition:none;}
}

/* ===== CONSTRUCTION SHOWCASE (about section 02): real construction-era photos, warm-graded,
   cream-matted, inline within the reading column. Complements the paper/ember theme. ===== */
.constr{margin:clamp(30px,5vh,60px) 0 clamp(24px,4vh,44px);}
.constr__eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);margin:0 0 16px;}
.constr__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);}
.constr__cell{margin:0;min-width:0;grid-column:1 / -1;}
.constr__ph{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:11px;
  box-shadow:0 16px 40px rgba(23,19,16,.16);border:1px solid rgba(23,19,16,.06);}
.constr__cell--feature .constr__ph{aspect-ratio:16/10;background-position:center top;}
.constr__cap{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;
  color:var(--ink-2);margin-top:9px;line-height:1.45;}
@media(max-width:680px){
  .constr__grid{grid-template-columns:1fr;}
  .constr__cell--feature .constr__ph{aspect-ratio:4/3;}
}

/* group workshop shot (About, "The shift"): 3:2 frame, its own aspect so it is not cropped to
   the construction showcase's ratio. Same warm treatment and caption rhythm as the rest. */
.constr--group .constr__ph{aspect-ratio:3/2;}

/* infinity family feature (About, section 02): the wide "with family" shot shown full-width at
   its own aspect ratio, so it reads the same width as the architectural award feature below it
   without cropping the panorama. Overrides the feature cell's default 16/10. */
.constr--famfull .constr__cell--feature .constr__ph{aspect-ratio:2200/1190;background-position:center;}

/* award badge (About, section 02): the "Asia Pacific Property Awards" seal used to sit baked
   into the corner of the architectural shot removed per Fil's feedback. Extracted from that
   photo and relaid over the family photo, top-left, at roughly the proportion it held on the
   original image (badge crop is 760/430 from a 3840-wide source, ~19.8% of frame width). */
.constr__ph{position:relative;}
.constr__badge{position:absolute;top:14px;left:14px;width:19.5%;min-width:72px;max-width:190px;
  height:auto;z-index:2;filter:drop-shadow(0 8px 18px rgba(23,19,16,.28));pointer-events:none;}
@media(max-width:680px){
  .constr__badge{top:10px;left:10px;width:27%;min-width:66px;max-width:150px;}
}