/* SKALI v2 — the maison. Dressed as a luxury maison: one house in the window, the motto very wide and low, few
   words, long pauses, swing tags, a reply card, a door reserved for owners. Brand: graphite #212832, cream #E1DCCA.
   The one shape: the diagonal of the S (18.6°), used for the window and the wipe. Written for the phone first. */

:root {
  --bg: #212832;
  --surface: #2b333d;
  --ink: #e1dcca;
  --muted: #b9b3a2;
  --paper: #e1dcca;
  --paper-ink: #212832;
  --paper-muted: #4b535a;
  --stone: #c9c3b0;
  --accent: #e1dcca;
  --accent-ink: #212832;
  /* the protocol, graphite to cream */
  --t1: #2c343e; --t2: #3f4851; --t3: #626864; --t4: #a5a293; --t5: #d6d0bd;
  /* swing-tag strips */
  --s1: #212832; --s1-ink: #e1dcca;
  --s2: #c9c3b0; --s2-ink: #212832;
  --s3: #37424a; --s3-ink: #e1dcca;
  --s4: #efe9d8; --s4-ink: #212832;
  /* names the scene stage reads */
  --ground: var(--bg);
  --font-display: var(--serif);
  --font-text: var(--sans);

  --serif: "Boska", "Iowan Old Style", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.625rem, 1.1rem + 2vw, 2.375rem);
  --step-head: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);

  --margin: clamp(1.25rem, 3vw, 2rem);
  --gutter: clamp(0.75rem, 2vw, 1.5rem);
  --section: clamp(6rem, 14vw, 13rem);
  --slant: 0.3365;            /* tan 18.6°: the diagonal of the S */
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

main { position: relative; z-index: 1; background: var(--bg); }
.logo { height: 100%; width: auto; aspect-ratio: 3.98; fill: currentColor; }

/* ---------- controls: one square button, links that underline under the hand ---------- */
.button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.75rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-family: var(--sans); font-size: var(--step-small); font-weight: 500; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: transform 140ms var(--ease-out), color 400ms var(--ease-out); }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--stone); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 500ms var(--ease-expo); }
.button:active { transform: scale(0.98); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover::before { transform: scaleY(1); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- the bar: name left, owners and language right; its ink follows the chapter beneath ---------- */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem var(--margin); color: var(--bar-ink, var(--ink)); background: transparent; transition: color 300ms ease, background-color 300ms ease, opacity 400ms var(--ease-out), transform 600ms var(--ease-expo); }
/* past the door the bar is solid in the ground of the chapter beneath; it steps aside while reading down */
.bar.is-solid { background: var(--bar-bg, var(--bg)); }
.bar[data-ink="light"] { --bar-ink: var(--paper-ink); --bar-bg: var(--paper); }
.bar.is-tucked { transform: translateY(-100%); }
.bar.is-hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.bar__brand { display: block; height: 1.125rem; color: inherit; }
.bar__nav { display: flex; align-items: center; gap: 1.25rem; font-size: var(--step-small); }
.bar__nav .link { padding: 0.5rem 0; }
@media (min-width: 900px) { .bar { padding: 1.5rem var(--margin); } .bar__brand { height: 1.375rem; } }

/* ---------- the counter (the first screen) and the door (its scene) ---------- */
/* the counter, dressed like a fashion house's front page: the name as wide as the screen, one picture, the title,
   the facts and the action. Phone first. Live, the canvas draws the picture where it stands and grows it to the screen. */
.door__stage { position: relative; min-height: 100svh; overflow: hidden; }
.door__canvas { display: none; }
.door__counter { position: relative; z-index: 2; display: grid; gap: 1.25rem; align-content: start; grid-template-rows: auto auto auto 1fr; min-height: 100svh; padding: 4.25rem var(--margin) calc(1.5rem + env(safe-area-inset-bottom)); }
/* on the phone the title sits under the picture and the action waits at the foot, under the thumb */
@media (max-width: 899px) { .door__counter .door__foot { display: contents; } .door__counter .door__title { margin-top: 0.25rem; } .door__counter .door__go { align-self: end; } }
@media (min-width: 600px) and (max-width: 899px) { .door__window { aspect-ratio: auto; height: min(80vw, 46svh); } }
.door__name { width: 100%; height: auto; fill: var(--ink); display: block; }
.door__pic { margin: 0 calc(var(--margin) * -1); display: grid; grid-template-columns: 100%; gap: 0.4rem; }
.door__window { display: block; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; }
.door__window img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; display: block; }
.door__piccap { font-size: 0.6875rem; display: flex; justify-content: space-between; color: var(--muted); }
.door__piccap b { font-weight: 500; color: var(--ink); }
.door__foot { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; align-items: end; padding-top: 0.25rem; }
.door__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; }
.door__title span { display: block; }
.door__facts { margin: 0; font-size: 0.75rem; line-height: 1.5; text-align: right; color: var(--muted); }
.door__go { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; padding: 0 1.1rem; background: var(--paper); color: var(--paper-ink); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.door__go i { font-style: normal; font-family: var(--serif); font-size: 1.2rem; }
.door__end { display: none; }
/* on the first screen the name is the brand; the bar keeps only its links until the page moves on */
.bar:not(.is-solid) .bar__brand { visibility: hidden; }
@media (min-width: 900px) {
  /* on a wide screen, a spread: the name, the title and the action in a column at the left, the house filling the right */
  .door__counter { height: 100svh; min-height: 34rem; padding: 5.5rem var(--margin) var(--margin); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 0; }
  .door__name { grid-column: 1; grid-row: 1; }
  .door__pic { grid-column: 2; grid-row: 1 / 3; margin: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .door__window { aspect-ratio: auto; height: 100%; }
  .door__window img { object-position: 8% 50%; }
  .door__foot { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 2rem; justify-items: start; padding: 0; }
  .door__title { font-size: clamp(2.75rem, 0.8rem + 2.9vw, 4.75rem); line-height: 0.98; }
  .door__go { min-width: 18rem; min-height: 3.5rem; padding: 0 1.4rem; gap: 3rem; font-size: 0.9375rem; }
}
/* live: the stage holds; the canvas draws the picture, then grows it to the screen and walks */
/* the held stage follows the phone's browser bar (dvh), so no strip of ground shows under the walk when it folds away */
html.js .door.is-live > .door__stage { height: 100svh; height: 100dvh; min-height: 0; }
.door.is-live .door__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.door.is-live .door__counter { will-change: transform, opacity; }
.door.is-live .door__window img { will-change: transform; transform-origin: 50% 40%; }
/* the walk's captions: the room, small like the swing tags, then what sets it apart in the serif, at the lower left on
   a soft fall of the ground that comes and goes with them */
.door__day { display: none; }
.door.is-live .door__day { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; list-style: none; padding: 0; }
.door.is-live .door__day::before { content: ''; position: absolute; inset: 0; opacity: var(--shade, 0); background: linear-gradient(to top, color-mix(in srgb, var(--bg) 74%, transparent), transparent 52%), linear-gradient(to right, color-mix(in srgb, var(--bg) 40%, transparent), transparent 62%); } /* taste-skill-ignore: a neutral scrim over the film, under its captions */
.door__cap { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(5.5rem + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; }
.door__room { display: block; font-family: var(--sans); font-size: var(--step-small); line-height: 1; font-weight: 500; }
.door__moment { display: block; margin-top: 0.875rem; font-family: var(--serif); font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.02em; white-space: pre-line; }
@media (min-width: 900px) { .door__cap { bottom: clamp(3rem, 9vh, 6rem); } }
.door.is-live .door__end { display: block; position: absolute; z-index: 5; left: var(--margin); right: var(--margin); top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--serif); font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; opacity: 0; visibility: hidden; }

/* ---------- after the walk: the pages of a fashion house's book. Phone first. ---------- */
/* small captions under pictures, as on the cover */
.frg__item figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; font-size: 0.75rem; }
.frg__item figcaption b { font-weight: 500; }

/* the credo: a held screen. Still (no script, reduced motion): the first picture with the three lines on it. Moving:
   three screens of scroll, one line and one picture at a time, crossfading */
.mani { position: relative; }
.mani__stage { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-content: end; padding: 6rem var(--margin) calc(3rem + env(safe-area-inset-bottom)); }
.mani__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1100ms var(--ease-out), transform 6000ms var(--ease-out); }
.mani__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(33 40 50 / 0.92), rgb(33 40 50 / 0.45) 45%, rgb(33 40 50 / 0.15) 70%, rgb(33 40 50 / 0.35)); } /* taste-skill-ignore: scrim */
.mani__lines { position: relative; margin: 0; display: grid; font-family: var(--serif); font-size: clamp(3rem, 1.4rem + 7vw, 7.5rem); line-height: 0.96; letter-spacing: -0.025em; }
.mani__lines span { display: block; }
.mani__marks { position: relative; margin: 2rem 0 0; display: flex; gap: 0.4rem; }
.mani__marks i { width: 2rem; height: 2px; background: rgb(225 220 202 / 0.3); transition: background-color 600ms ease; }
.mani[data-k="0"] .mani__img:nth-of-type(1), .mani[data-k="1"] .mani__img:nth-of-type(2), .mani[data-k="2"] .mani__img:nth-of-type(3) { opacity: 1; transform: none; }
.mani[data-k="0"] .mani__marks i:nth-child(1), .mani[data-k="1"] .mani__marks i:nth-child(2), .mani[data-k="2"] .mani__marks i:nth-child(3) { background: var(--ink); }
.mani__marks { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .mani { height: 300svh; }
  .js .mani__stage { position: sticky; top: 0; height: 100svh; }
  .js .mani__lines { grid-template-areas: "l"; }
  .js .mani__lines span { grid-area: l; align-self: end; opacity: 0; transform: translateY(1.5rem); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .mani[data-k="0"] .mani__lines span:nth-child(1), .js .mani[data-k="1"] .mani__lines span:nth-child(2), .js .mani[data-k="2"] .mani__lines span:nth-child(3) { opacity: 1; transform: none; transition-delay: 250ms; }
  .js .mani__marks { display: flex; }
}
@media (min-width: 900px) {
  .mani__stage { padding: 7rem var(--margin) clamp(3rem, 9vh, 6rem); }
  .mani__lines { max-width: 14ch; font-size: clamp(3.5rem, 1rem + 4.2vw, 6rem); }
  .mani__shade { background: linear-gradient(to top, rgb(33 40 50 / 0.9), rgb(33 40 50 / 0.35) 50%, rgb(33 40 50 / 0.2) 75%, rgb(33 40 50 / 0.4)), linear-gradient(to right, rgb(33 40 50 / 0.55), transparent 60%); } /* taste-skill-ignore: scrim */
}

/* the protocol: a title and a sentence, then five steps, each a picture and its words */
.proto { padding: var(--section) var(--margin) 0; }  /* the request below brings its own space above */
.proto__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.proto__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); line-height: 0.98; letter-spacing: -0.025em; }
.proto__lead { margin: 0; max-width: 34ch; color: var(--muted); }
.proto__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.step { display: grid; grid-template-columns: 38% 1fr; gap: 1.1rem; align-items: start; }
.step img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.step__text { display: grid; gap: 0.6rem; align-content: start; }
.step__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: -0.015em; }
.step__text p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

/* what can be shown: on paper, a row of tall pictures the thumb slides through */
.frg { background: var(--paper); color: var(--paper-ink); padding: var(--section) 0; }
.frg__head { padding: 0 var(--margin); display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.frg__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); line-height: 0.98; letter-spacing: -0.025em; }
.frg__lead { margin: 0; max-width: 34ch; color: var(--paper-muted); }
.frg__rail { list-style: none; margin: 0; padding: 0 var(--margin); display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margin); scrollbar-width: none; }
.frg__rail::-webkit-scrollbar { display: none; }
.frg__item { flex: 0 0 74%; scroll-snap-align: start; }
.frg__item figure { margin: 0; }
.frg__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.frg__item figcaption span { color: var(--paper-muted); }

/* admission: the title, the plaque that takes the house's name, the form */
.adm { padding: var(--section) var(--margin); }
.adm__form { display: grid; gap: 2.5rem; }
.adm__head { display: grid; gap: 1.25rem; }
.adm__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); line-height: 0.98; letter-spacing: -0.025em; }
.adm__note { margin: 0; max-width: 34ch; color: var(--muted); }
.plaque { background: var(--paper); color: var(--paper-ink); padding: 1.5rem 1.25rem 1.25rem; display: grid; gap: 0.5rem; }
.plaque__name { margin: 0; font-family: var(--serif); font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4rem); line-height: 1; letter-spacing: -0.02em; text-transform: none; overflow-wrap: anywhere; }
.plaque__by { margin: 0; font-size: 0.8125rem; color: var(--paper-muted); }
.adm__fields { display: grid; gap: 0.75rem; }
.field input, .field select { width: 100%; min-height: 3.5rem; padding: 0 1rem; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radius); font-size: 1rem; -webkit-appearance: none; appearance: none; transition: background-color 250ms ease; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus { background: #36404b; outline: 2px solid var(--ink); outline-offset: -2px; }
.field [aria-invalid="true"] { outline: 2px solid var(--stone); outline-offset: -2px; }
.adm__fields .button { width: 100%; min-height: 3.5rem; margin-top: 0.5rem; }
.card__status { min-height: 1.5em; margin: 0; font-size: var(--step-small); color: var(--muted); }
.card__status:not(:empty) { color: var(--ink); }
.adm__legal { margin: clamp(4rem, 10vw, 7rem) 0 0; font-size: 0.75rem; color: var(--muted); }

@media (min-width: 900px) {
  .proto__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; align-items: end; }
  .proto__title { grid-column: 1 / 7; }
  .proto__lead { grid-column: 8 / -1; }
  .proto__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
  .step { grid-template-columns: 1fr; gap: 1.25rem; }
  .step:nth-child(even) { margin-top: 4rem; }
  .step__name { font-size: clamp(1.5rem, 0.8rem + 1.1vw, 2.1rem); }

  .frg__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; align-items: end; }
  .frg__title { grid-column: 1 / 8; }
  .frg__lead { grid-column: 9 / -1; }
  .frg__item { flex-basis: clamp(16rem, 24vw, 24rem); }

  .adm__form { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 2.5rem; align-items: start; }
  .adm__head { grid-column: 1 / 7; }

  .adm__fields { grid-column: 8 / -1; grid-row: 1 / 3; align-self: end; }
}

/* ---------- the close: the house at night, the name across it; uncovered from beneath the page ---------- */
.foot { position: sticky; bottom: 0; z-index: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 5rem var(--margin) 1.25rem; color: var(--ink); overflow: hidden; isolation: isolate; }
.foot__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(0.5) saturate(0.8); }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; font-size: var(--step-small); }
.foot__col { display: grid; gap: 0.25rem; align-content: start; justify-items: start; }
.foot__col > :first-child { color: var(--ink); }
.foot__col .link { padding: 0.25rem 0; text-align: left; }
.foot__name { grid-row: 3; display: grid; gap: 1rem; }
.foot__name .logo--full { width: 100%; height: auto; }
.foot__legal { font-size: var(--step-small); color: var(--muted); }
@media (min-width: 900px) {
  .foot { padding: 2.5rem var(--margin) 1.5rem; }
  .foot__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .foot__col { grid-column: span 3; }
}

/* ---------- the owners' door ---------- */
.owners { max-width: min(28rem, calc(100vw - 2rem)); padding: 2rem; border: 0; background: var(--bg); color: var(--ink); display: none; gap: 1.25rem; }
.owners[open] { display: grid; }
.owners::backdrop { background: rgba(33, 40, 50, 0.72); }
.owners__title { font-size: var(--step-lead); line-height: 1.1; }

/* ---------- quiet motion; content stays visible without script ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* a cover of the ground slides off the picture along the slant; the picture is never clipped, so it lazy-loads */
  .js .shutter { position: relative; overflow: hidden; }
  .js .shutter::after { content: ""; position: absolute; inset: -40% 0 -10%; background: var(--cover, var(--paper)); transform: skewY(18.6deg); transform-origin: 0 0; transition: transform 1100ms var(--ease-in-out); transition-delay: calc(var(--d, 0) * 90ms); pointer-events: none; }
  .js .shutter.is-in::after { transform: skewY(18.6deg) translateY(-150%); }
}
@media (prefers-reduced-motion: reduce) {
  .bar, .button::before, .tag__pic img, .stage { transition: none !important; }
}