/* Home: the first screen is the work. The artefact, three plain labels, one line, one project.
   Ported from 05-Motion-Prototype/css/home.css. Changes: sizes from tokens (rem type, the nav band, the plate and
   loupe caps that grow on large screens), text measures in rem so line breaks hold when type grows, the
   positioning line, and the reserved slots for later chapters. */

/* The first screen is one 12-column grid with four rows: nav band, intro, the object's band, and the foot
   (headline left, the project block right). Nothing in it is placed in fixed pixels from the top:
   - the object's size comes from the stage it is given (container units), never from the viewport alone;
   - labels live in rails (columns) and in the band between the furniture above and the foot below (JS sets
     their height from the object's resting pins, clamped to that band), so they cannot reach the project block;
   - the hero grows taller than the screen rather than letting rows overlap on short screens. */
.hero { position: relative; overflow: clip; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  grid-template-rows: var(--nav-h) auto minmax(var(--art-min), 1fr) auto; padding: 0 var(--m) 64px;
  min-height: clamp(600px, 100svh, 62vw + 160px); --art-min: 210px; }
.hero .rule-h.top { top: var(--nav-h); }
.hero .rule-h.bottom { bottom: 40px; }

.hero-title { grid-column: 1 / span 8; grid-row: 4; align-self: end; position: relative; z-index: 8; margin-top: 24px; font-size: var(--fs-hero); }
/* when "Interfaces," alone is wider than the page (enlarged text) js/keep.js gives it its soft hyphen, "Inter- / faces,",
   never a break inside the word without one (was overflow-wrap: anywhere, P06 200% text fix) */
.intro { grid-column: 1 / span 3; grid-row: 2; position: relative; z-index: 6; padding-top: 40px; max-width: 18.75rem; }
.intro .small { margin-top: 12px; max-width: 16.875rem; }
/* the positioning line (P4-BRIEF line A): the copy style of P4 frame 1, 14 px under the figure label, the 270 px
   measure in rem. Its non-breaking spaces keep "through interface," and "interaction and motion." whole. */
.intro .positioning { margin-top: 14px; }
.intro .placeholder { margin-top: 14px; display: block; }

/* the stage holds the artefact. Its size is one variable, the plate width, fitted to the stage box. */
.stage { grid-column: 4 / span 6; grid-row: 2 / span 2; position: relative; z-index: 3; margin: 8px 0 16px; min-height: 0;
  container-type: size; --pw: clamp(150px, min(100cqw / 1.45, 100cqh / 1.42), var(--pw-max));
  cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1280px) { .stage { grid-column: 4 / span 7; } }
.art-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 1700px; perspective-origin: 0 0; }
.art-group { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.plate, .rod, .wire { position: absolute; left: 0; top: 0; backface-visibility: visible; will-change: transform; }
.plate { width: var(--pw); height: calc(var(--pw) * 1.2667); margin-left: calc(var(--pw) * -0.5); margin-top: calc(var(--pw) * -0.63335);
  transform-style: flat; border-radius: 1.5px; }
.plate .tex { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
/* glass: a thin tinted sheet, a bright inner edge and a darker outer edge, and haze that thins when you come near */
.plate.glass, .plate.frost, .ghost .skin {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.08) 100%),
    rgba(240, 236, 227, var(--haze, 0.12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(60, 64, 60, 0.30), inset 1px 1px 0 1px rgba(255, 255, 255, 0.25); }
.plate.frost { --haze: 0.30; }
.plate.paper { background: none; box-shadow: none; }
.collar { position: absolute; width: calc(var(--pw) * 0.022); height: calc(var(--pw) * 0.022); border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #8d918f 0%, #3a3e3d 55%, #23262a 100%); box-shadow: 0 0.5px 1px rgba(20, 20, 18, 0.4); opacity: var(--rod-op, 1); }
.rod { height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: linear-gradient(to bottom, #8f8d86 0%, #f1efe9 38%, #b7b5ad 60%, #5f5d58 100%); }
.wire { width: 1px; background: linear-gradient(to top, rgba(70, 72, 70, 0.55), rgba(70, 72, 70, 0.35) 70%, rgba(70, 72, 70, 0)); }
.pin { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 92, 82, 0.18); opacity: 0; transition: opacity 500ms var(--expo); }
.show-pins .pin { opacity: 1; }
.pin.is-focus { box-shadow: 0 0 0 5px rgba(47, 92, 82, 0.22); }

/* leaders and labels */
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.leaders line { stroke: rgba(31, 30, 27, 0.42); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity 260ms var(--expo); }
.legend { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.legend button { position: absolute; pointer-events: auto; padding: 8px 2px; color: var(--ink); text-align: left; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--expo), transform 700ms var(--expo), color var(--t-micro) var(--expo); }
.show-pins .legend button { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms); }
.legend button .n { color: var(--ink); margin-right: 1.4em; }
.legend button .t { color: var(--ink-2); }
.legend button:hover .t, .legend button.is-focus .t { color: var(--ink); }
.legend .cap { display: block; margin-top: 4px; font: 400 0.8125rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2);
  max-width: 15.625rem; white-space: normal; opacity: 0; transform: translateY(-4px); transition: opacity 360ms var(--expo), transform 500ms var(--expo); }
.legend button.is-focus .cap { opacity: 1; transform: none; }
/* rails: left labels start at column 1 (column 2 when there is room), right labels at column 10.
   Their height is set by js/home.js (layoutLegend) as --y; until then they wait at the middle of the hero. */
.legend { --rail-l: 0; }
.legend button { top: var(--y, 50%); }
.legend [data-rail="l"] { left: calc(var(--m) + var(--rail-l) * var(--u)); }
.legend [data-rail="r"] { left: calc(var(--m) + 9 * var(--u)); }
@media (min-width: 1280px) { .legend { --rail-l: 1; } }
/* a caption never runs past its rail (the legend spans the hero, so its container width is the page column width) */
.legend { container-type: inline-size; --cu: calc((100cqw - 2 * var(--m) + var(--g)) / 12); }
.legend [data-rail] .cap { max-width: min(15.625rem, calc((3 - var(--rail-l)) * var(--cu) - var(--g))); }
.legend [data-rail="r"] .cap { max-width: min(15.625rem, calc(3 * var(--cu) - var(--g))); }

/* the loupe: the real Home screen, sharp, when you come near it */
.loupe { position: absolute; z-index: 6; left: calc(var(--m) + 9 * var(--u)); top: var(--loupe-y, 136px); width: var(--loupe-w, calc(3 * var(--u) - var(--g))); max-width: var(--loupe-max);
  aspect-ratio: 1170 / 1290; overflow: hidden; background: #131615; border-radius: 2px;
  box-shadow: 0 30px 50px -30px rgba(40, 32, 20, 0.55), 0 0 0 1px rgba(31, 30, 27, 0.10);
  clip-path: inset(0 0 100% 0); transition: clip-path 560ms var(--expo); pointer-events: none; }
.loupe img { width: 100%; height: auto; transform: translateY(-1.5%) scale(1.02); transform-origin: 50% 0; transition: transform 900ms var(--expo); }
.loupe.is-open { clip-path: inset(0 0 0 0); }
.loupe.is-open img { transform: none; }

/* the one project on the first screen */
.entry { grid-column: 9 / span 4; grid-row: 4; align-self: end; position: relative; z-index: 8; margin-bottom: 10px; max-width: calc(20.625rem * var(--display-boost)); }
@media (min-width: 1280px) { .entry { grid-column: 10 / span 3; } }
.entry .t { font-family: var(--serif); font-weight: 600; font-size: calc(1.875rem * var(--display-boost)); letter-spacing: -0.04em; line-height: 1; margin: 12px 0 10px; }
.entry .t em { font-style: italic; font-weight: 400; letter-spacing: -0.05em; }
.entry .small { margin-bottom: 16px; }

/* "Provly, opened.": the transition state. Paper stays paper. */
.opened { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.opened[hidden] { display: none; }   /* at rest it is not there at all, on every engine and every layout */
.opened .hair { position: absolute; left: var(--m); width: calc(8 * var(--u)); bottom: calc(64px + var(--fs-hero) * 1.05 + 26px); height: 1px; background: var(--ink); opacity: 0.85; }
.opened .display { position: absolute; left: var(--m); bottom: 64px; font-size: var(--fs-hero); white-space: nowrap; }
.opened .display .line { display: inline-block; vertical-align: top; }
.opened .display .line + .line { margin-left: 0.22em; }
.opened .note { position: absolute; left: calc(var(--m) + 10 * var(--u)); bottom: 150px; color: var(--ink-2); opacity: 0; transition: opacity 600ms var(--expo); }
.opened.is-on .note { opacity: 1; transition-delay: 320ms; }
.opened .clock { position: absolute; right: var(--m); bottom: 54px; width: calc(2 * var(--u)); height: 1px; background: var(--hair); overflow: hidden; }
.opened .clock i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.opened.is-on .clock i { transform: scaleX(1); transition: transform 1000ms var(--expo); }

/* fades for the furniture around the artefact during the transition */
.hero .furn { transition: opacity 260ms var(--expo); }
.hero.is-opening .furn { opacity: 0; pointer-events: none; }

/* below the first screen: the index presents only what exists */
.index { position: relative; padding: 120px 0 120px; }
.index .rule-h { top: 0; }
.idx-item { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: 0 var(--m); }
.idx-item .folio { grid-column: 1 / span 2; }
.idx-item .folio .display { font-size: clamp(4.5rem, 9.5vw, calc(8.75rem * var(--display-boost))); font-style: italic; font-weight: 400; letter-spacing: -0.055em; margin-top: 8px; }
.idx-item .plate-img { grid-column: 3 / span 7; position: relative; display: block; overflow: hidden; border-radius: 1px;
  box-shadow: 0 40px 60px -40px rgba(40, 32, 20, 0.45); }
.idx-item .plate-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: scale(1.0); transition: transform 900ms var(--expo); }
.idx-item .plate-img:hover img { transform: scale(1.015); }
.idx-item + .idx-item { margin-top: clamp(120px, 11vw, 240px); }   /* the second project on (Shelfsy, 12 Oct 2026): until then the list held one */
.idx-item figcaption { margin-top: 14px; }
.idx-item .side { grid-column: 10 / span 3; }
.idx-item .side .t { font-family: var(--serif); font-weight: 600; font-size: var(--fs-section); letter-spacing: -0.045em; line-height: 0.98; margin: 14px 0 16px; }
.idx-item .side .t em { font-style: italic; font-weight: 400; letter-spacing: -0.055em; }
.idx-item dl { margin: 22px 0 28px; }
.idx-item dt { margin-top: 14px; }
.idx-item dd { font-size: 0.9375rem; color: var(--ink); margin-top: 2px; }

/* the old Profile slot is now About David (P04): css/about.css */

/* phones and small tablets: the artefact on top, then the line, then the labels as a plain list */
@media (max-width: 819px) {
  .hero { height: auto; min-height: 0; padding: 64px 0 56px; display: flex; flex-direction: column; overflow: clip; --stage-h: clamp(340px, 62svh, 600px); }
  .hero .rule-h.top { top: 64px; }
  .hero .rule-h.bottom { display: none; }
  .stage { order: 1; width: 100%; margin: 0; height: var(--stage-h); --pw: clamp(150px, min(54cqw, 64cqh), 300px); }
  .hero-title { order: 2; align-self: stretch; padding: 0 var(--m); margin-top: 8px; font-size: var(--fs-hero-phone); }
  .intro { order: 3; max-width: none; padding: 18px var(--m) 0; }
  .intro .label { display: none; }
  /* the phone column is the measure (two lines at 390); on wide tablets about 68 characters at this size */
  .intro .positioning { max-width: 27rem; }
  .legend { position: relative; order: 4; inset: auto; padding: 22px var(--m) 0; display: grid; gap: 0; pointer-events: auto; }
  .legend button { position: static; top: auto; display: block; padding: 12px 0; border-top: 1px solid var(--hair); white-space: normal; min-height: 44px; }
  .legend button:last-child { border-bottom: 1px solid var(--hair); }
  .legend .cap { display: none; }
  .legend button.is-focus .cap { display: block; }
  .leaders, .loupe { display: none; }
  .entry { order: 5; align-self: stretch; max-width: none; margin: 0; padding: 34px var(--m) 0; }
  /* "Provly, opened." on a phone: one block resting at the foot of the first screen, always whole inside it */
  .opened { inset: 0 0 auto 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--m) 28px; }
  .opened .hair { position: relative; left: auto; bottom: auto; width: 100%; flex: none; margin-bottom: 18px; }
  .opened .display { position: relative; left: auto; bottom: auto; white-space: normal; font-size: var(--fs-hero-phone); }
  .opened .display .line { display: block; }
  .opened .display .line + .line { margin-left: 0; }
  .opened .note { position: relative; left: auto; bottom: auto; margin-top: 16px; }
  .opened .clock { display: none; }
  .index { padding: 72px 0; }
  .idx-item { display: block; }
  .idx-item .folio .display { font-size: 4.5rem; }
  .idx-item .plate-img { margin: 18px 0 0; }
  .idx-item .side { margin-top: 26px; }
  .idx-item + .idx-item { margin-top: 88px; }
}

/* shared elements in flight between Work and the case study (js/handoff.js): above the page, under the nav */
.ghost { position: fixed; left: 0; top: 0; z-index: 25; overflow: hidden; pointer-events: none; border-radius: 1.5px; will-change: transform, width, height; }
.ghost .skin { position: absolute; inset: 0; }
.ghost .tex { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; }
.ghost .film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 420ms var(--expo); }
.ghost.show-film .film { opacity: 1; }
.ghost.instant .film { transition: none; }
.ghost-hair { position: fixed; left: 0; top: 0; z-index: 25; height: 1px; background: var(--ink); opacity: 0.85; pointer-events: none; }