/* pages.css - owner: lane pages (v2.0). Projects, notice and notes pages, plus the previous-projects portfolio and the
   concept renders, which the home page also shows (#previous, #pipeline), so every rule here is scoped: nothing below
   restyles a home class it does not own. Contract: BUILD-CONTRACT.md s7-s8. Lane tokens use --pg-*; global tokens come
   from css/site.css and are never redefined. Light only; contrast by ink: text sits on solid sky or white.
   Fluid grammar (DOSSIER s9): continuous curves, Lake lines as dividers only, the leaf only in the brand mark. */
:root{
  --pg-wide:1240px;
  --pg-rule:rgba(111, 168, 207, .55);   /* Lake hairline rules (decorative lines only, never text) */
  --pg-radius:20px;
}
.pg-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ================= reading pages (notice, notes) ================= */
.pg-read .measure{ max-width:46rem; }
.pg-read h1{ font-size:clamp(44px, 5vw, 72px); margin:0 0 .25em; }
.pg-read h2{ font-size:clamp(26px, 2.4vw, 34px); margin:1.7em 0 .45em; }
.pg-read p, .pg-read li{ color:var(--c-ink-2); max-width:44rem; }
.pg-read .lede{ color:var(--c-ink); }
.pg-read p + p{ margin-top:10px; }
.pg-read ol, .pg-read ul{ padding-left:1.3em; margin:0; }
.pg-read li + li{ margin-top:10px; }
.pg-read a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.pg-read .pg-back{ margin-top:40px; }
.pg-read section{ scroll-margin-top:calc(var(--head-h) + 24px); }
.pg-read .pg-edge{ display:block; width:100%; height:48px; margin:28px 0 0; }
.pg-read .pg-edge path{ fill:none; stroke:var(--c-lake); stroke-width:1; vector-effect:non-scaling-stroke; }

/* notes: the approval record table scrolls in its own region (v2.1) */
.table-scroll{ overflow:auto; max-width:100%; max-height:min(70vh, 720px); border-top:1px solid var(--c-ink); background:var(--c-white); border-radius:0 0 18px 18px; }
.table-scroll:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; }
.rec{ border-collapse:collapse; width:100%; font-size:14px; line-height:1.5; }
.rec th{ position:sticky; top:0; background:var(--c-white); font:500 12px/1.4 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink); }
.rec th, .rec td{ text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--pg-rule); color:var(--c-ink); }
.rec td.k, .rec td.s{ font:400 12px/1.5 var(--f-mono); white-space:nowrap; color:var(--c-ink-2); }
.rec td:nth-child(2){ min-width:16rem; }

/* ================= projects page ================= */
.pg-proj{ padding-left:0; padding-right:0; }
.pg-proj > *{ max-width:calc(var(--pg-wide) + 2 * var(--gut)); margin-inline:0; padding-inline:var(--gut); }
.pg-proj h1, .pg-proj h2{ text-wrap:balance; }
.pg-proj .eyebrow{ margin-bottom:14px; }
.pg-intro{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:32px 56px; align-items:end; padding-top:44px; }
.pg-intro h1{ font-size:clamp(46px, 7vw, 100px); line-height:.98; margin:6px 0 0; }
.pg-intro .lede{ max-width:46ch; margin-top:24px; text-wrap:pretty; }
.pg-idx{ border-top:1px solid var(--c-ink); padding-top:14px; }
.pg-idx h2{ font:500 12px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink); margin:0 0 6px; }
.pg-idx ul{ list-style:none; margin:0; padding:0; }
.pg-idx a{ display:flex; align-items:center; min-height:52px; padding:8px 2px; border-bottom:1px solid var(--pg-rule); text-decoration:none;
  font:400 22px/1.2 var(--f-display); color:var(--c-ink); border-radius:14px 14px 0 0; transition:padding var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.pg-idx a:hover{ padding-left:12px; background:var(--c-frost); }
.pg-proj .pg-sec{ padding-block:56px 72px; scroll-margin-top:var(--head-h); border-top:1px solid var(--pg-rule); margin-top:24px; }
.pg-proj .pg-intro + .pg-sec{ border-top:0; }
.pg-sec h2{ font-size:clamp(32px, 3.6vw, 52px); line-height:1.04; margin:0; }
.pg-head{ max-width:44rem; }
.pg-head .pg-body{ margin:14px 0 0; color:var(--c-ink-2); max-width:46ch; }
.pg-head .motto{ margin:22px 0; }
.pg-areas{ max-width:44rem; margin-top:64px; }
.pg-areas h3{ margin:0; }

/* Canadian Property Activity: the Richmond Hill rental photographs, a calm still gallery (v2.1; nothing moves) */
.pg-canada__media{ display:grid; grid-template-columns:minmax(0, 1fr); margin-top:40px; max-width:1000px; }
.rh-grid{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap:12px; }
.rh-grid li{ min-width:0; }
.rh-grid li:not(.rh-g-lead) img{ aspect-ratio:4 / 3; }
.rh-g-lead{ grid-row:1 / span 2; }
.pg-canada .rh-photos figcaption{ margin-top:12px; }
/* the closing International projects note (r1: moved out of the intro, last on the page, text only, never next to the #previous photographs) */
.pg-proj .pg-intl{ padding-block:48px 24px; }
.pg-intl h2{ font-size:clamp(26px, 2.6vw, 36px); }


#previous .portfolio{ grid-template-columns:repeat(10, minmax(0, 1fr)); gap:36px 20px; max-width:1180px; align-items:start; }
#previous .portfolio > .reel{ grid-column:1 / span 6; grid-row:1 / span 2; display:block; }
#previous .portfolio > .pan{ grid-column:7 / span 4; }
.pg-proj .portfolio{ margin-top:40px; }

/* shared buttons (44 px desktop, 48 px phones via --tap) */
.rbtn{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap); min-height:var(--tap); padding:0 16px; border:1px solid var(--c-ink); background:var(--c-sky); color:var(--c-ink);
  border-radius:var(--r-pill); cursor:pointer; font:500 14px/1 var(--f-text); transition:background-color var(--t-state) var(--ease); }
.rbtn:hover{ background:var(--c-frost); }
.rbtn:focus-visible, .reel__step:focus-visible, .reel:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; }
.rbtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.reel__prev, .reel__next{ padding:0; }

/* the tower reel. Without JS: the four photographs in a 2 x 2 grid, each with its caption. Live: one frame, a slow
   cross-dissolve and push-in (paused whenever the reel is held, paused or off-screen), stepped by buttons, keys or a tap. */
.reel{ outline:none; border-radius:var(--pg-radius); }
.reel__frame{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.reel__slide{ margin:0; }
.reel__slide img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--pg-radius); background:var(--c-white); }
.reel__slide figcaption{ display:grid; gap:2px; margin-top:10px; }
.reel.is-live .reel__frame{ display:block; position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--c-white); cursor:pointer; border-radius:var(--pg-radius); }
.reel.is-live .reel__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--ease); }
.reel.is-live .reel__slide.is-on{ opacity:1; }
.reel.is-live .reel__slide img{ height:100%; aspect-ratio:auto; border-radius:0; transform-origin:50% 40%; }
.reel.is-live .reel__slide.is-on img{ animation:pg-push 9s cubic-bezier(.2, .5, .25, 1) forwards; }
.reel.is-live.is-held .reel__slide img{ animation-play-state:paused; }
@keyframes pg-push{ from{ transform:scale(1); } to{ transform:scale(1.075); } }
.reel.is-live .reel__slide figcaption{ display:none; }
.reel__cap{ display:flex; gap:16px; align-items:baseline; margin:12px 0 0; }
.reel__num{ font:500 13px/1.6 var(--f-mono); color:var(--c-ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.reel__txts{ display:grid; min-width:0; }
.reel__t{ grid-area:1 / 1; display:grid; gap:2px; visibility:hidden; }
.reel__t.is-on{ visibility:visible; }
.reel__bar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.reel__bar .dtag{ margin-left:0; }
.reel__steps{ flex:1 1 120px; display:flex; gap:6px; min-width:0; }
.reel__step{ flex:1; min-width:var(--tap); height:var(--tap); padding:0; border:0; background:none; cursor:pointer; position:relative; border-radius:10px; }
.reel__step::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--c-ink-2); border-radius:1px; }
.reel__step i{ position:absolute; left:0; top:50%; height:4px; margin-top:-2px; width:0; background:var(--c-ink); border-radius:2px; }
.reel__step:focus-visible{ outline-offset:-2px; }
.reel__step.is-past i, .reel__step.is-on i{ width:100%; }
.reel__step.is-run i{ width:0; animation:pg-fill var(--dwell, 6.5s) linear forwards; }
@keyframes pg-fill{ to{ width:100%; } }

/* the hillside photo: a slow pan (Pause, Show the whole photo) */
.pan{ margin:0; }
.pan__frame{ position:relative; overflow:hidden; aspect-ratio:754 / 628; background:var(--c-white); border-radius:var(--pg-radius); }
.pan__frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.pan.is-panning .pan__frame{ cursor:pointer; }
.pan.is-panning .pan__frame img{ position:absolute; left:0; top:0; width:136%; height:136%; max-width:none; animation:pg-drift 34s ease-in-out infinite alternate; }
.pan.is-paused .pan__frame img{ animation-play-state:paused; }
@keyframes pg-drift{
  0%{ transform:translate(-3%, -2%); }
  34%{ transform:translate(-24%, -7%); }
  68%{ transform:translate(-13%, -24%); }
  100%{ transform:translate(-2%, -17%); }
}
.pan__ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.pan__ctl .dtag{ margin-left:0; }

/* ================= concept renders (home #pipeline inside the copy column; projects #pipeline wider) =================
   Cropped perspective / aerial renders only; shown no wider than about 560 CSS px (they are 800 px upscales). */
.render-slot .renders{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
.render-slot .renders img{ display:block; width:100%; height:auto; border-radius:14px; background:var(--c-white); }
.render-slot .r-front{ grid-column:1 / -1; }
.render-slot figcaption{ display:block; margin-top:12px; }
.pg-pipe .render-slot{ margin-top:40px; max-width:1000px; }
.pg-pipe .renders{ grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:14px; align-items:start; }
.pg-pipe .r-front{ grid-column:1; grid-row:1 / span 2; max-width:560px; }
.pg-pipe .r-street, .pg-pipe .r-rear{ grid-column:2; }

/* tablet */
@media (max-width:1040px){
  #previous .portfolio > .reel{ grid-column:1 / -1; grid-row:auto; }
  #previous .portfolio > .pan{ grid-column:span 5; }
  .pg-intro{ grid-template-columns:1fr; }
}
/* phones (the site's phone query) */
@media (max-width:767px){
  .pg-proj > *{ padding-inline:16px; }
  .pg-intro{ padding-top:24px; }
  .pg-idx a{ font-size:20px; min-height:var(--tap); }
  .pg-idx a:hover{ padding-left:2px; }
  .pg-proj .pg-sec{ padding-block:40px 56px; }
  #previous .portfolio{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px 12px; }
  #previous .portfolio > .reel, #previous .portfolio > .pan{ grid-column:1 / -1; }
  .rh-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
  .rh-g-lead{ grid-column:1 / -1; grid-row:auto; }
  .rh-g-lead img{ height:auto; aspect-ratio:1200 / 829; }
  .reel__frame{ gap:8px; }
  .reel__bar{ gap:6px; }
  .reel__steps{ flex:1 1 calc(100% - 2 * var(--tap) - 12px); }   /* prev, 4 steps (each >= 48 px), next on row 1; Pause on row 2 */
  .reel__play{ order:3; }
  .reel__bar .dtag{ order:4; }
  .reel__cap{ flex-direction:column; gap:2px; }
  .rbtn{ padding:0 14px; }
  .pg-canada__media{ grid-template-columns:minmax(0, 1fr); }
  .pg-pipe .renders{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
  .pg-pipe .r-front{ grid-column:1 / -1; grid-row:auto; max-width:none; }
  .pg-pipe .r-street, .pg-pipe .r-rear{ grid-column:auto; }
  .table-scroll{ max-height:60vh; }
  /* phones: each record row stacks (key, line) so the region scrolls only vertically */
  .rec thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
  .rec, .rec tbody, .rec tr, .rec td{ display:block; width:auto; }
  .rec tr{ padding:10px 12px; border-bottom:1px solid var(--pg-rule); }
  .rec td{ padding:0; border:0; min-width:0 !important; }
  .rec td.k{ white-space:normal; overflow-wrap:anywhere; }
  .rec td + td{ margin-top:4px; }
}
/* short viewports (landscape phones, small laptop windows): a photo is never taller than about 3/4 of the view */
.reel.is-live .reel__frame{ max-width:min(100%, calc(76vh * 4 / 3)); max-width:min(100%, calc(76svh * 4 / 3)); }
.pan__frame{ max-width:min(100%, calc(76vh * 754 / 628)); max-width:min(100%, calc(76svh * 754 / 628)); }
.render-slot .r-front{ max-width:min(100%, calc(76vh * 800 / 689)); max-width:min(100%, calc(76svh * 800 / 689)); }
/* reduced motion: site.css stops every transition and animation; here the designed stills */
@media (prefers-reduced-motion: reduce){
  .reel.is-live .reel__slide.is-on img{ animation:none; transform:none; }
  .pan .pan__frame img{ position:static; width:100%; height:100%; animation:none; transform:none; }
}