/* websites.css: the Websites page's own placing (plan.md, "Websites"). Every component and token comes from
   components.css and system.css; this file only places and sizes the page's parts. */

/* ---------- #top: the copy and the picker on the ivory; the laptop at dusk bleeding off the right edge ---------- */
.web-top { position: relative; padding-top: clamp(0.75rem, 1.5vw, 1.75rem); }
.web-top__grid { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); grid-template-areas: "copy media" "pick media"; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: var(--space-4); padding-left: max(var(--gutter), (100% - var(--max-w)) / 2); }
.web-top__copy { grid-area: copy; align-self: end; display: grid; gap: var(--space-3); padding-top: 2.4rem; }
.web-top h1 { font-size: clamp(2.2rem, 1.2rem + 2.1vw, 3.3rem); max-width: 14ch; }
.web-top__line { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 29rem; }
.web-top__picker { grid-area: pick; align-self: start; margin: 28px 0 0; }
.web-top__media { grid-area: media; position: relative; height: clamp(600px, calc(100vh - var(--header-h) - 2.25rem), 800px); overflow: hidden; isolation: isolate; border-radius: var(--radius-l) 0 0 var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
/* the photo fills its box 1 px past each side (kit.md, "Video"): the screen is placed by the photo's own crop */
.web-top__media .web-top__screen { position: absolute; inset: -1px; height: calc(100% + 2px); }
.web-top__screen > img { max-width: none; object-position: 33% 50%; }
/* the note rises over the dusk window, above and right of the laptop */
.web-top__media .web-top__note { position: absolute; z-index: 3; top: 7%; right: 5%; left: auto; width: min(320px, 44%); }
.web-top__stop { left: 16px; right: auto; top: 16px; }
@media (max-width: 1100px) {
  .web-top__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "pick"; padding-left: 0; row-gap: var(--space-4); }
  .web-top__copy { padding: 1.5rem var(--gutter) 0; }
  .web-top h1 { max-width: 18ch; }
  .web-top__media { height: clamp(460px, 62vw, 640px); margin-left: var(--gutter); }
  .web-top__screen > img { object-position: 30% 60%; }
  .web-top__picker { margin-inline: var(--gutter); max-width: 40rem; }
}
@media (max-width: 760px) {
  .web-top__media { height: 440px; }
  .web-top__screen > img { object-position: 25% 50%; }
  /* the screen's words are too small to read on a phone: the request plays as a glass card over the laptop */
  .web-top__screen [data-scene="site-request"] { visibility: hidden; }
  /* the notes at the top, the request card under them over the laptop, the lamp between */
  .web-top__media .web-top__note { top: 14px; left: 12px; right: 12px; width: auto; --sr-gap: 64px; }
  .web-top__stop { left: auto; right: 12px; top: auto; bottom: 12px; }
}

/* ---------- #remake: the signature on the ivory with a faint drafting grid ---------- */
.remake::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--c-ink) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 6%, transparent) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 58%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 70% 62% at 50% 58%, #000 30%, transparent 78%); }
.remake__k { left: -12%; top: -14%; }
/* the head and the whole scene fit one screen at 1440 x 900 */
.remake { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.remake .head { margin-bottom: var(--space-3); }
.remake__stage { position: relative; width: min(100%, 960px); aspect-ratio: 1040 / 600; margin: 0 auto; }
.remake__stage .remake__scene { position: absolute; inset: 0; }
/* the stop icon beside the window's top left corner, clear of the notes */
.remake__stop { top: 20px; left: calc(17% - 46px); right: auto; }
/* a narrower window needs a taller one: its site's headline stays clear of its header row */
@media (min-width: 761px) and (max-width: 999px) {
  .remake__stage { aspect-ratio: 1040 / 700; }
}
@media (max-width: 760px) {
  .remake__stage { aspect-ratio: auto; height: 700px; width: min(100%, 420px); }
  .remake__stop { left: auto; right: -8px; top: calc(50% - 18px); }
}

/* ---------- #easy: the photo first, the page in glass on its calm left; the words beside it ---------- */
.easy__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.easy__stage { aspect-ratio: 3 / 2; }
.easy__stage img { object-position: 50% 40%; }
.easy__stage .easy__scene { position: absolute; z-index: 2; top: 6%; bottom: 6%; left: 4%; right: auto; width: min(320px, 41%); }
.easy__stop { right: 14px; top: 14px; }
.easy__head { padding-bottom: clamp(0rem, 4vw, 3rem); }
@media (max-width: 900px) { .easy__grid { grid-template-columns: 1fr; } .easy__head { order: -1; padding-bottom: 0; } }
@media (max-width: 600px) {
  .easy__stage { aspect-ratio: auto; height: 620px; }
  .easy__stage img { object-position: 64% 30%; }
  /* the page card at the stage's foot, her face clear above it */
  .easy__stage .easy__scene { top: auto; bottom: 14px; left: 14px; right: 14px; width: auto; }
}

/* ---------- #jobs: the board of booked jobs beside the words ---------- */
.jobs__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.jobs__head { display: grid; gap: var(--space-3); }
.jobs__cta { margin-top: var(--space-2); }
.jobs__stage { position: relative; aspect-ratio: 820 / 520; }
.jobs__stage .jobs__scene { position: absolute; inset: 0; }
/* the stop icon just above the board's top right corner, clear of its tape label */
.jobs__stop { top: -44px; right: 0; }
@media (max-width: 900px) { .jobs__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .jobs__stage { aspect-ratio: auto; height: 640px; width: min(100%, 400px); margin-inline: auto; } }

/* ---------- #close: the customer at her kitchen table, from a third across ---------- */
#close .close-band__media video { object-position: 70% 40%; }
@media (max-width: 760px) { #close .close-band__media video { object-position: 72% 30%; } }