/* LT UK, direction B: the home page only (index.html). The system is in ../site.css.
   1 the entrance   2 how she works (held steps)   3 the four rooms: the house and its boxes   4 meet Laura   5 the free call */

/* ---------- 1. the entrance ---------- */
/* below 1100 px the entrance starts at the top, so a late font never moves the window (no layout shift) */
.entrance { position: relative; display: flex; align-items: flex-start; min-height: calc(100svh - 84px); padding: 10px 0 72px; --wall-at: 100% 0%; }
.entrance__grid { position: relative; z-index: 1; display: grid; gap: 4px; justify-items: center; }
.entrance__look { display: grid; place-items: center; --d: min(76vw, 300px, 35svh); }

.entrance__words { display: grid; gap: 14px; width: 100%; max-width: 600px; justify-items: start; }
/* the entrance's h1 runs smaller than the system's on wide screens so the first screen holds the words and the button (a recorded deviation);
   its letter-spacing (.014em) keeps every reading cell of the brush lettering on a stroke, not on a lone anti-aliased edge */
.entrance__words { gap: 12px; }
.entrance__words h1 { margin-top: 4px; font-size: clamp(2.15rem, 1rem + 3.3vw, 4.6rem); line-height: .97; letter-spacing: .014em; }
.entrance__hers { margin-top: 2px; }
.entrance__act { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.entrance__act .btn { width: 100%; }
.entrance .place { font-size: .9375rem; color: var(--ink-2); }
@media (max-width: 767px) {
  .entrance .kicker { display: none; }
  .entrance .lead { font-size: 1.125rem; }
  .entrance .place { order: 9; }
}
/* a phone of ordinary height: the place line would sit under the navigation on the first screen, so it is left to
   "Where she works", the call and the foot, which say it in full (a judgement call of the lead's walk) */
@media (max-width: 767px) and (max-height: 940px) { .entrance .place { display: none; } }
/* a short phone shortens the lead to its first clause, so the button stays on the first screen */
@media (max-width: 767px) and (max-height: 800px) { .lead__rest { display: none; } }
@media (min-width: 768px) {
  .entrance { padding: 40px 0 72px; }
  .entrance__look { --d: min(60vw, 40svh); }
  .entrance__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; width: auto; }
  .entrance__act .btn { width: auto; }
}
@media (min-width: 1100px) {
  .entrance { align-items: center; min-height: calc(100svh - 96px); padding: 48px 0 96px; }
  .entrance__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: center; justify-items: stretch; }
  .entrance__words { grid-column: 1 / 7; grid-row: 1; max-width: none; gap: 18px; }
  .entrance__look { grid-column: 7 / 13; grid-row: 1; }
  .entrance__look { --d: min(44vw, 70svh, 620px); }
  .entrance .lead { max-width: 34ch; }
}
/* THE NOREN at the entrance: one cloth of four panels in the four room colours, hung from a thin timber rod across the
   top of the round window (the rod a little wider than the circle there, its ends just past the edge; the cloth clipped
   to the circle by the window). The panels touch, with slits between them from the foot to a quarter below the rod, a
   faint weave and a soft lower edge. Once a visit it parts from the centre and settles, drawn up, as a short valance
   over the top 14 per cent of the window (the house's roof, never its rooms). Decorative, aria-hidden, never takes a
   click, never sways. The cloth hangs from 6 per cent down; while it waits it reaches 58 per cent. */
.entrance__look { position: relative; }
.ent-noren { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ent-noren__cloths { position: absolute; left: 50%; top: 6%; width: calc(var(--d) * .475 + 16px); height: 52%; transform: translateX(-50%); overflow: hidden;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ent-noren__cloth { --k: 1; position: relative; height: 100%; background-color: var(--c); transform: translateY(-84.6%);
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 10px), rgb(28 26 24 / .12) calc(100% - 10px)),
    linear-gradient(90deg, rgb(28 26 24 / .14), transparent 18%, rgb(255 255 255 / .22) 42%, rgb(28 26 24 / .06) 58%, transparent 80%, rgb(28 26 24 / .14)), var(--weave), var(--cloth);
  border-radius: 0 0 46% 46% / 0 0 7% 7%;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3px), rgb(0 0 0 / .35) 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 3px), rgb(0 0 0 / .35) 100%);
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / .18)); }
/* the slits: each panel gives up one pixel at its inner sides, from a quarter below the rod to its foot */
.ent-noren__cloth:nth-child(1) { clip-path: polygon(0 0, 100% 0, 100% 25%, calc(100% - 1px) 25%, calc(100% - 1px) 100%, 0 100%); }
.ent-noren__cloth:nth-child(2), .ent-noren__cloth:nth-child(3) { clip-path: polygon(0 0, 100% 0, 100% 25%, calc(100% - 1px) 25%, calc(100% - 1px) 100%, 1px 100%, 1px 25%, 0 25%); }
.ent-noren__cloth:nth-child(4) { clip-path: polygon(0 0, 100% 0, 100% 100%, 1px 100%, 1px 25%, 0 25%); }
.ent-noren__cloth:nth-child(1), .ent-noren__cloth:nth-child(4) { --k: .5; }
.ent-noren__cloth:nth-child(-n+2) { --dir: -1; }
.ent-noren__cloth:nth-child(n+3) { --dir: 1; }
/* the rod: outside the window's clip, so its ends show just past the circle (inside the string ring's gap) */
.ent-noren__rod { position: absolute; z-index: 4; left: 50%; top: calc(50% - var(--d) * .44 - 2px); width: calc(var(--d) * .475 + 16px); height: 4px; transform: translateX(-50%);
  border-radius: 2px; background: linear-gradient(#9a7a58, #6b5038); box-shadow: 0 1px 2px rgb(0 0 0 / .35); pointer-events: none; }
.ent-noren__rod::before, .ent-noren__rod::after { content: ""; position: absolute; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #6b5038; }
.ent-noren__rod::before { left: -3px; } .ent-noren__rod::after { right: -3px; }
html.op .ent-noren__cloth { transform: none; }
.ent-noren.is-parting .ent-noren__cloth { animation: noren-part 1.1s var(--ease) both; }
@keyframes noren-part {
  0% { transform: none; }
  45% { transform: translateX(calc(var(--dir) * 24% * var(--k))) rotate(calc(var(--dir) * -3deg * var(--k))); }
  100% { transform: translateY(-84.6%); }
}
/* the words arrive (0.6 s) once the noren has parted */
html.op .entrance__words { opacity: 0; transform: translateY(14px); }
.entrance__words { transition: opacity .6s var(--ease) 1s, transform .6s var(--ease) 1s; }

/* the four rooms rise by themselves over the foot of the entrance as a new sheet: 32 px of its empty bottom padding (72 px or more), never its words */
.entrance + .rise-mark + .rise-sheet { margin-top: -32px; }

/* ---------- 2. how she works: three held steps (the layout is site.css 14b, .steps) ---------- */
.how { --n: 3; }

/* ---------- 3. the four rooms: THE HOUSE (two up, two down, under a shallow timber roof) and its four boxes ---------- */
.rooms { padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 8vw, 120px); }
.rooms__head { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 56px); }
.rooms__grid { display: grid; gap: 56px; }
.rooms__boxes { display: grid; gap: 14px; align-content: start; }
.rooms__key { font: 700 .8125rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 1100px) {
  .rooms__grid { grid-template-columns: min(52vw, 760px) minmax(0, 1fr); gap: clamp(32px, 3.4vw, 56px); align-items: start; }
}
.house { container-type: inline-size; width: 100%; --beam: 4px; --hb: 14px; }
@media (min-width: 768px) { .house { --beam: 6px; --hb: 20px; } }
/* the wall: wide enough for the string's band (1.18 times its height) with 5 px of timber either side, so the string runs
   on the timber and never over a room picture; the ring round her seal's window is cut out of the four rooms' inner
   corners (the room's own mask), so it never crosses a picture either */
.house { --wall: calc(1.18 * var(--hb) + 10px); --seal-d: max(96px, 30cqi); }
@media (min-width: 768px) { .house { --seal-d: max(96px, 26cqi); } }
/* the roof: two thin timber lines meeting at a shallow pitch (12 per cent of the width: 13.5 degrees), eaves overhanging */
.house__roof { position: relative; aspect-ratio: 100 / 12; }
@media (min-width: 768px) { .house__roof { margin-inline: -2.5%; } }
.house__roof::before, .house__roof::after { content: ""; position: absolute; bottom: 0; width: 51.42%; height: 3px; background: var(--timber); border-radius: 2px; }
.house__roof::before { left: 0; transform-origin: 0 100%; transform: rotate(-13.5deg); }
.house__roof::after { right: 0; transform-origin: 100% 100%; transform: rotate(13.5deg); }
.house__body { position: relative; }
.house__rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--beam) var(--wall); padding: var(--beam); background: var(--timber); }
.house__rooms > li { display: grid; }
.room { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); color: var(--on-room); text-decoration: none; outline: none;
  --cut: calc(var(--seal-d) / 2 + var(--beam) + 6px + 1.18 * var(--hb) + 3px);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--cut), #000 calc(var(--cut) + .5px));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--cut), #000 calc(var(--cut) + .5px)); }
/* where the crossing sits from each room (its inner corner, out by half the wall and half the floor) */
.house__rooms > li:nth-child(1) .room { --cx: calc(100% + var(--wall) / 2); --cy: calc(100% + var(--beam) / 2); }
.house__rooms > li:nth-child(2) .room { --cx: calc(var(--wall) / -2); --cy: calc(100% + var(--beam) / 2); }
.house__rooms > li:nth-child(3) .room { --cx: calc(100% + var(--wall) / 2); --cy: calc(var(--beam) / -2); }
.house__rooms > li:nth-child(4) .room { --cx: calc(var(--wall) / -2); --cy: calc(var(--beam) / -2); }
/* a phone: taller rooms and larger names, so the house reads room by room at a glance; the lower rooms carry their
   names at their foot, clear of the round window at the crossing */
@media (max-width: 767px) {
  .room { aspect-ratio: 1; }
  .house__rooms > li:nth-child(n+3) .room__tab { top: auto; bottom: 0; }
}
.room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s var(--ease); }
.room.is-pick img { transform: scale(1.03); }
@media (hover: hover) { .room:hover img { transform: scale(1.03); } }
.house.has-pick .room:not(.is-pick) img { filter: brightness(.6); }
/* the room's noren tab and name, inside the picture at its top edge (left rooms at the left, right rooms at the right) */
.room__tab { position: absolute; z-index: 2; top: 0; font-size: clamp(15px, 2.6cqi, 22px); --slit: rgb(28 26 24 / .28); }
.room__tab::before { left: -8px; right: -8px; height: 3px; background: rgba(85, 80, 74, .85); }
.house__rooms > li:nth-child(odd) .room__tab { left: 6%; }
.house__rooms > li:nth-child(even) .room__tab { right: 6%; }
.room__tab .noren__cloth { padding: .5em .8em 1em; box-shadow: 0 6px 14px -8px rgb(0 0 0 / .45); }
/* focus: an ink ring with a paper ring inside it and an orange one inside that, so one of them stands out on any picture */
.room:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 4px solid #1c1a18; box-shadow: inset 0 0 0 4px #fcfbf8, inset 0 0 0 7px #a3461a; }
/* on the lamplight pictures the paper ring goes outside, where the picture is darkest */
:root[data-theme="dark"] .room:focus-visible::after { border-color: #fcfbf8; box-shadow: inset 0 0 0 3px #1c1a18, inset 0 0 0 6px #ffa46e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .room:focus-visible::after { border-color: #fcfbf8; box-shadow: inset 0 0 0 3px #1c1a18, inset 0 0 0 6px #ffa46e; } }
/* the small round window where the floor and the wall cross: a paper disc holding her seal, exactly centred */
.house__seal { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--seal-d); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 var(--beam) var(--timber); }
/* her seal (.seal) is placed by site.css section 27: its drawn centre on the crossing (P22) */

/* ---------- 4. meet Laura ---------- */
.meet__grid { display: grid; gap: 32px; align-items: center; }
.meet__pic { width: 72%; max-width: 520px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.meet__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
.meet__words { display: grid; gap: 14px; justify-items: start; }
.meet__words > p:not(.kicker):not(.hers-line):not(.hers-line__note) { max-width: 44ch; }
@media (min-width: 768px) { .meet__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); } .meet__pic { grid-column: 1 / 6; width: 100%; } .meet__words { grid-column: 7 / 13; } }
@media (min-width: 1100px) { .meet__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 120px); } .meet__pic { grid-column: 1; justify-self: end; } .meet__words { grid-column: 2; } .meet__words h2 { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4.2rem); } .meet .section, .meet { padding-block: clamp(56px, 7vw, 104px); } }

/* ---------- 6. where she works: the line, large, beside a small round window on the house's front step ---------- */
.where__grid { display: grid; gap: 20px; align-items: center; justify-items: start; }
.win--where { --d: 160px; }
.win--where img { object-position: 50% 100%; transform: scale(1.9); transform-origin: 50% 88%; }
.where__words { display: grid; gap: 14px; }
.where__words h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3.2rem); line-height: 1.05; }
.where__words .lead { max-width: 52ch; }
.where__words .where__more { max-width: 52ch; color: var(--ink-2); }
@media (min-width: 768px) { .where__grid { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); } .win--where { --d: clamp(180px, 18vw, 240px); } }