/* New homepage (src/pages/preview/home.astro). Sizes come from system.css; this file only lays
   the sections out. Wide layout from 900px, phone layout below. Every section keeps to the page
   margins except the hero. */
.ph { --sec: clamp(72px, 7.6389vw, 120px); --sh-gap: clamp(32px, 3.3333vw, 56px); }
.ph-sec { padding-top: var(--sec); }
.ph-last { padding-bottom: var(--sec); }

/* ---- Hero: wall photo, the wordmark, then Aura cut out in front of it ---- */
/* the hero starts under the nav (as on the current homepage), so the photo sits a little higher */
.ph-hero { position: relative; margin-top: -59px; }
@media (max-width: 1079.98px) { .ph-hero { margin-top: -53px; } }
/* the photo is drawn 105% wide (Aura where the wordmark expects her); the stage is as tall as that
   makes the photo, so its whole floor shows (the wordmark's viewBox grows to match: 820 → 861) */
.ph-stage { position: relative; overflow: hidden; background: var(--beige); container-type: inline-size; aspect-ratio: 2400 / 1435; }
.ph-layer { position: absolute; left: -4.03%; top: 0; width: 105% !important; max-width: none !important; height: 100%; object-fit: cover; }
.ph-cut { z-index: 2; }
.ph-wm { position: absolute; inset: 0; z-index: 1; margin: 0; }
.ph-wm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* light, and large enough that the last A and the C pass just behind Aura's hair */
.ph .wm { font-family: var(--serif); font-weight: 300; font-size: 246px; fill: var(--maroon); }
.wm-m { display: none; }
/* the kicker a little under AURA (its baseline is at 21.7cqw), the hero line under it like a cover
   line, on the wall and well clear of the floor (which starts near 44.8cqw); both clear of Aura and
   the laptop (from 38cqw across). The kicker breaks only at its dots */
.ph-intro { position: absolute; z-index: 4; left: 4.4444%; top: 23.1cqw; width: 34cqw; }
.ph-kicker { font-size: 13.5px; } /* phones keep 12px (below), where it just fits one line */
.ph-kicker span { white-space: nowrap; }
.ph-kicker-m { display: none; }
/* a few lines, a little way below the kicker */
.ph-belief { margin-top: 5.2cqw !important; font-size: 2.9cqw; line-height: 1.08; text-wrap: balance; }
.ph-contents-d { position: absolute; z-index: 4; right: 4.4444%; top: 25.4cqw; width: max(21%, 290px); }
.ph-contents-m, .ph-belief-m { display: none; }

/* ---- Work: three staggered columns (two on phones), photos ending level at the bottom ---- */
.sh-r a { text-decoration-color: transparent; }
.wk { display: grid; gap: 0 4.1667vw; margin-top: var(--sh-gap); }
.wk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-2 { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-col { display: flex; flex-direction: column; gap: clamp(40px, 4.1667vw, 72px); }
.wk-card { display: flex; flex-direction: column; flex: 1 0 auto; text-decoration: none; container-type: inline-size; }
/* the category name large in light serif (regular case since 2026-11-02), its line under it, then View projects (its
   underline is enough to say the card is a link, so the name doesn't underline on hover) */
/* capped by the card's width too (cqi), so the longest name (Restaurant) stays on one line */
.wk-name { font: 300 min(clamp(34px, 3.75vw, 58px), calc(15.5cqi - 8px))/1 var(--serif); letter-spacing: -.01em; }
.wk-line { margin-top: 12px !important; max-width: 30em; line-height: 1.4; }
.wk-view { align-self: flex-start; margin-top: 14px; white-space: nowrap; text-decoration: underline; text-underline-offset: .32em; text-decoration-thickness: 1px; }
.wk-img { position: relative; overflow: hidden; margin-top: 18px; min-height: var(--h); flex: 1 0 auto; }
.wk-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease; }
.wk-card:hover .wk-img img { filter: brightness(1.06); }

/* ---- Philosophy: the flat-lay inside the margins, a white card over it; the photo is only as
   tall as the card plus a frame of it around ---- */
.ph-phil { position: relative; display: flex; justify-content: center; margin-top: var(--sh-gap); padding: clamp(80px, 9.7222vw, 150px) 0; }
.ph-phil-img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.ph-card { position: relative; width: min(60%, 880px); background: #FFFFFF; padding: clamp(56px, 6.6667vw, 104px) clamp(48px, 6.9444vw, 108px); box-sizing: border-box; }
/* the title set close (Philosophy's, About's and Services') */
.ph-card .t-h2, .ph-title { line-height: .98; }
/* body text in a narrower column than the heading, like an article's column (Philosophy's text,
   About's and Services' subtitle); Philosophy's is also justified */
.ph-col, .ph-just { max-width: 27em; line-height: 1.45; }
.ph-just { margin-top: 1.3em !important; text-align: justify; hyphens: auto; }
.ph-card .ph-just { margin-top: 1.9em !important; }
/* every section's CTA stands a clear step below what it follows (the arrow: system.css) */
.ph-card .cta-l, .ph-about-txt .cta-l, .ph-serv-txt .cta-l { display: inline-block; margin-top: 3.6em; }

/* ---- About: photo inside the left margin, text beside it ---- */
.ph-about { display: grid; grid-template-columns: 50% 1fr; gap: 5.5556vw; margin-top: var(--sh-gap); }
/* taller than the text beside it */
.ph-about-img { position: relative; aspect-ratio: 2 / 3; }
.ph-about-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ph-about-txt { align-self: center; }
/* as far under the title as Philosophy's text is under its title (.ph-card .ph-just) */
.ph-about-body { margin-top: 1.9em !important; }
/* the values kept to a narrow column on the right, so long lists wrap */
.ph-about-txt .rows { margin-top: 2.4em; }
.ph-about-txt .rows .rv { max-width: 22em; }

/* ---- Services: the title, the four services as ruled rows (name left, what it covers right), the
   CTA, and the whole photo beside; the text centered on the photo's height, as in About ---- */
.ph-serv { display: grid; grid-template-columns: 1fr 46%; gap: 5.5556vw; margin-top: var(--sh-gap); align-items: start; }
.ph-dek { margin-top: 1.1em !important; max-width: 32em; }
.ph-svc { margin-top: 3.6em !important; }
.ph-serv-txt { align-self: center; }
.ph-serv-txt .cta-l { margin-top: 4.4em; }
.ph-svc .t-label { color: var(--maroon-2); }
.ph-serv-img img { width: 100%; height: auto; }

/* ---- Contact: the short version (the form is on /contact), the details beside it ---- */
.ph-contact { display: grid; grid-template-columns: 1fr 37.5%; gap: 6.25vw; margin-top: var(--sh-gap); align-items: start; }
.ph-contact .t-body { margin-top: 1.2em; max-width: 30em; }
/* the list's top rule level with the top of the email's letters (not its line box) */
.ph-contact > .rows { margin-top: calc(var(--fs-h2) * .26); }
.ph-contact .cta-l { display: inline-block; margin-top: 1.8em; }

/* ---- 900 to 1199px: not enough room beside Aura for both, so the Contents list moves under the hero */
@media (max-width: 1199.98px) {
  .ph-contents-d { display: none; }
  .ph-contents-m { display: block; padding-top: 28px; }
}
.ph-contents-m .contents { max-width: 560px; }

/* ==== below 900px: the phone layout ==================================================== */
@media (max-width: 899.98px) {
  .ph-stage { aspect-ratio: auto; height: max(520px, min(calc(100svh - 52px - 150px), 720px)); background: linear-gradient(90deg, rgb(217,209,200) 0%, rgb(222,215,207) 50%, rgb(234,228,222) 100%); container-type: normal; }
  /* the photo drawn smaller and lower, so Aura's head only just reaches CHU and the wordmark reads */
  .ph-layer { left: 0; top: 26%; width: 100% !important; height: 74%; object-position: 58.8% 50%; }
  .ph-layer:not(.ph-cut) { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px); mask-image: linear-gradient(to bottom, transparent 0, #000 90px); }
  /* the kicker above the wordmark, the two lines of the wordmark set close */
  .ph-kicker-m { display: block; position: absolute; z-index: 4; top: 34px; font-size: 12px; left: var(--gutter); right: var(--gutter); }
  .ph-intro .ph-kicker { display: none; }
  .ph-wm { inset: 66px 0 auto 0; }
  .wm-d { display: none; }
  .ph .wm { font-size: calc(134px * .943); }
  .ph-hero { margin-top: 0; }
  .wm-m { display: block; position: static !important; height: auto !important; }
  /* the photo ends, and the hero line follows on plain white */
  .ph-intro { display: none; }
  .ph .ph-belief-m { display: block; margin-top: 0 !important; padding: 28px var(--gutter) 0; font-size: 32px; line-height: 1.08; text-wrap: balance; }
  .ph-contents-d { display: none; }
  .ph-contents-m { display: block; padding-top: 28px; }
  .ph-about { grid-template-columns: 1fr; gap: 32px; }
  .ph-serv, .ph-contact { grid-template-columns: 1fr; gap: 40px; }
  .ph-serv-img { order: -1; }
}
@media (max-width: 759.98px) {
  .sh { flex-direction: column; gap: 10px; }
  .sh-r { text-align: left; line-height: 2; }
  .wk-3 { display: none; }
  .wk-2 { display: grid; column-gap: 14px; }
  .wk-col { gap: 36px; }
  .wk-2 h3 { font-size: 26px; }
  /* the category's line kept, a little smaller to suit the narrow column */
  .wk-2 .wk-line { margin-top: 8px !important; font-size: 14.5px; line-height: 1.4; }
  .wk-2 .wk-view { display: none; }
  .wk-2 .wk-img { margin-top: 12px; }
  /* Philosophy: the photo behind the whole section (cropped to fit), the card inside a frame of it */
  .ph-phil { padding: 56px 14px; }
  .ph-card { width: auto; padding: 32px 24px 36px; }
  .ph-just, .ph-col { max-width: none; }
  .ph-svc > li { flex-direction: column; gap: 4px; }
  .ph-svc > li > :last-child { text-align: left; }
  .lv { grid-template-columns: 1fr; }
}