/* d11-final: the approval card and its stationery (07's layout) in Monument's colours, type and motion (01). */

:root {
  /* Monument colours (01) */
  --bg: #2B0F5C;
  --surface: #3A1A78;
  --ink: #FFFFFF;
  --muted: #D9CCF7;
  --accent: #7CF0C2;
  --accent-hover: #B4F8DD;
  --accent-ink: #1A0838;
  --butter: #FFE58A;
  --light: #F3EEFF;
  --light-ink: #2B0F5C;
  --light-muted: #6A55A0;
  --light-tone: #E2D7FA;

  --font: 'TikTok Sans', system-ui, sans-serif;

  --card-w: min(55vw, 900px);
  --margin: clamp(1rem, 2.8vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(96px, 12vw, 180px);

  --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.25rem, 1.05rem + 0.6vw, 1.625rem);
  --step-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --step-head: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

  /* Cut-outs: round notches punched where two pieces of the card meet (07). */
  --cut-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle cx='0' cy='100%25' r='14' fill='black'/%3E%3Ccircle cx='100%25' cy='100%25' r='14' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)'/%3E%3C/svg%3E");
  --cut-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle cx='0' cy='0' r='14' fill='black'/%3E%3Ccircle cx='100%25' cy='0' r='14' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)'/%3E%3C/svg%3E");
  --cut-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle cx='100%25' cy='0' r='14' fill='black'/%3E%3Ccircle cx='100%25' cy='100%25' r='14' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)'/%3E%3C/svg%3E");
  --cut-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle cx='0' cy='0' r='14' fill='black'/%3E%3Ccircle cx='0' cy='100%25' r='14' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.45;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

h1, h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: var(--step-h2); }
.lead { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.small { font-size: var(--step-small); font-weight: 600; }

.wrap { padding-inline: var(--margin); }

/* Actions: one shape on every page, square corners. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.4rem;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: var(--step-body);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.96); }
.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
  transition: text-underline-offset var(--t-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-hover); }
  .link:hover { text-underline-offset: 0.36em; }
}

.lock { width: 0.9em; height: 0.9em; flex: none; vertical-align: -0.08em; }

/* ---------- Hero: the approval card over the city at night ---------- */

.hero { position: relative; background: var(--bg); }
.hero__stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px var(--margin);
  overflow: hidden;
}
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
  filter: brightness(0.6) saturate(0.85);
}
.card {
  position: relative;
  width: var(--card-w);
  display: grid;
  transform-origin: 0 100%;
  color: var(--light-ink);
  --focus: var(--light-ink);
}
.card__body {
  background: var(--light);
  padding: 28px 32px 36px;
  display: grid;
  gap: clamp(24px, 3.2svh, 40px);
  -webkit-mask: var(--cut-bottom) 0 0 / 100% 100%;
  mask: var(--cut-bottom) 0 0 / 100% 100%;
}
.card__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: var(--step-small); font-weight: 600;
}
.card__top a { text-decoration: none; }
/* Tap areas reach 44px without changing the look. */
.card__top a, .card__stub .link, .findme__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.card__top .wordmark { font-weight: 800; font-size: var(--step-body); font-stretch: 125%; letter-spacing: -0.02em; }
@media (hover: hover) and (pointer: fine) {
  .card__top a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
}
.hero h1 { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.03em; }
.hero h1 .line { display: block; }
.hero__lede { max-width: 38ch; }
/* Control: the owner's door, top right over the photograph, outside the card. */
.hero__control {
  position: absolute; top: 20px; right: var(--margin); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--step-small); font-weight: 700; text-decoration: none;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.hero__control:active { transform: scale(0.96); }
.hero__control:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .hero__control:hover { background: var(--accent-hover); } }

@media (max-width: 1100px) { :root { --card-w: min(82vw, 900px); } }
.card__stub {
  background: var(--light);
  border-top: 6px dotted var(--light-ink);
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  -webkit-mask: var(--cut-top) 0 0 / 100% 100%;
  mask: var(--cut-top) 0 0 / 100% 100%;
}
.card__stub .credit { font-size: var(--step-small); color: var(--light-muted); font-weight: 600; }
.card__stub .credit a { text-decoration: none; }
.card__stub .link { justify-self: end; }
.card__stub .button { outline: 2px solid var(--light-ink); outline-offset: -2px; }

@media (max-width: 760px) {
  .hero__stage { padding: 76px 16px 16px; }
  .hero__photo { object-position: 30% 80%; }
  .card { width: 100%; min-height: 70svh; }
  .card__body { padding: 20px 20px 28px; align-content: start; }
  .card__top .hide-phone { display: none; }
  .hero h1 { font-size: clamp(2rem, 9.4vw, 2.75rem); }
  .card__stub { grid-template-columns: 1fr 1fr; padding: 18px 20px 20px; }
  .card__stub .button { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .card__stub .link { justify-self: end; }
}

/* ---------- Things I built: spines on a shelf, each with its picture ---------- */

.built { background: var(--light); color: var(--light-ink); --focus: var(--light-ink); padding-block: var(--section); }
.built__head { margin-bottom: 40px; }
.shelf { display: flex; gap: 6px; align-items: stretch; }
.spine { flex: 1 1 0; min-width: 0; --sp-bg: var(--bg); --sp-ink: var(--ink); }
.spine--b { --sp-bg: var(--surface); --sp-ink: var(--ink); }
.spine--c { --sp-bg: var(--light-tone); --sp-ink: var(--light-ink); }
.spine--d { --sp-bg: var(--light-muted); --sp-ink: var(--ink); }
.spine__hit {
  height: 100%;
  min-height: 560px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px 12px 14px;
  background: var(--sp-bg); color: var(--sp-ink);
  text-decoration: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
a.spine__hit:active { transform: translateY(4px); }
/* The picture runs edge to edge across the spine at 3:4, so it reads as the real thing, not texture. */
.spine__label { width: calc(100% + 24px); max-width: none; margin: -12px -12px 0; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.spine__text {
  flex: 1;
  writing-mode: vertical-rl;
  display: flex; gap: 10px;
  align-self: center;
}
.spine__name { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.spine__line { font-size: var(--step-body); line-height: 1.3; }
.spine__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: var(--step-small); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  a.spine__hit:hover { background: var(--accent); color: var(--accent-ink); }
}
@media (max-width: 1100px) {
  .shelf { flex-wrap: wrap; }
  .spine { flex: 1 1 calc(20% - 6px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spine { flex: none; }
  .spine__hit { min-height: 0; }
  .spine__text { writing-mode: horizontal-tb; flex-direction: column; gap: 6px; }
}
@media (max-width: 760px) {
  .built__head { margin-bottom: 24px; }
  .shelf { flex-direction: column; gap: 6px; }
  .spine__hit { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
  .spine__label { width: 96px; max-width: none; margin: 0; flex: none; aspect-ratio: 3 / 4; }
  .spine__text { writing-mode: horizontal-tb; flex-direction: column; gap: 4px; align-self: center; }
  .spine__foot { margin-left: auto; }
}

/* ---------- About: the spec label, side facts and a wide paragraph ---------- */

.about { background: var(--bg); color: var(--ink); --focus: var(--accent); padding-block: var(--section); }
.sheet {
  background: var(--light);
  color: var(--light-ink);
  --focus: var(--light-ink);
  padding: clamp(32px, 4vw, 64px) clamp(20px, 4vw, 64px) calc(clamp(32px, 4vw, 64px) + 14px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), 96.88% calc(100% - 14px), 93.75% calc(100% - 0px), 90.62% calc(100% - 14px), 87.5% calc(100% - 0px), 84.38% calc(100% - 14px), 81.25% calc(100% - 0px), 78.12% calc(100% - 14px), 75% calc(100% - 0px), 71.88% calc(100% - 14px), 68.75% calc(100% - 0px), 65.62% calc(100% - 14px), 62.5% calc(100% - 0px), 59.38% calc(100% - 14px), 56.25% calc(100% - 0px), 53.12% calc(100% - 14px), 50% calc(100% - 0px), 46.88% calc(100% - 14px), 43.75% calc(100% - 0px), 40.62% calc(100% - 14px), 37.5% calc(100% - 0px), 34.38% calc(100% - 14px), 31.25% calc(100% - 0px), 28.12% calc(100% - 14px), 25% calc(100% - 0px), 21.88% calc(100% - 14px), 18.75% calc(100% - 0px), 15.62% calc(100% - 14px), 12.5% calc(100% - 0px), 9.375% calc(100% - 14px), 6.25% calc(100% - 0px), 3.125% calc(100% - 14px), 0% calc(100% - 0px));
}
.spec { display: grid; grid-template-columns: 30% 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.spec + .spec { margin-top: 96px; }
.spec h2 { font-size: var(--step-h2); }
.facts { display: grid; gap: 20px; align-content: start; }
.facts dt { font-size: var(--step-small); font-weight: 600; color: var(--light-muted); }
.facts dd { font-size: var(--step-body); font-weight: 600; }
.spec__para { font-size: var(--step-lead); line-height: 1.32; letter-spacing: -0.01em; max-width: 46ch; }
.spec__word { font-size: var(--step-body); font-weight: 700; }
.spec__also { display: grid; gap: 20px; justify-items: start; max-width: 52ch; }
.spec__body { display: grid; gap: 40px; }
@media (max-width: 760px) {
  .spec { grid-template-columns: 1fr; gap: 28px; }
  .spec .facts { order: 1; }
  .facts { grid-template-columns: 1fr 1fr; gap: 16px; }
  .spec + .spec { margin-top: 56px; }
  .spec__also { gap: 16px; }
}

/* About page plates: real pictures of the tools, on paper slips. */
.plates { display: grid; grid-template-columns: 1.2fr 1fr 0.55fr; gap: 12px; align-items: start; }
.plates--two { grid-template-columns: 1fr 1fr; max-width: 46rem; }
.slip { background: var(--light-tone); padding: 8px 8px 14px; }
.plates .slip:nth-child(2) { margin-top: 32px; transform: rotate(-1.5deg); }
.slip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
@media (max-width: 760px) {
  .plates { grid-template-columns: 1fr 1fr; }
  .plates .slip:nth-child(3) { grid-column: span 1; }
}

/* ---------- Find me: the email as display type on the mint field (01) ---------- */

.findme { background: var(--accent); color: var(--accent-ink); --focus: var(--accent-ink); min-height: 82svh; display: flex; flex-direction: column; padding: var(--section) var(--margin) 2rem; }
.findme h2 { font-size: var(--step-h2); }
.findme__mail { margin-top: auto; margin-bottom: 12vh; text-decoration: none; display: block; }
.findme__mail span {
  display: inline-block;
  font-weight: 400; letter-spacing: -0.045em; line-height: 1; white-space: nowrap;
  font-size: 7.4vw;
  text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.12em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .findme__mail:hover span { text-decoration-color: currentColor; } }
.narrow-br { display: none; }
.findme__links { display: flex; gap: 0.75rem 2rem; flex-wrap: wrap; font-size: var(--step-body); }
@media (max-width: 760px) {
  .findme { min-height: 86svh; }
  .findme__mail { margin-bottom: 4rem; }
  .findme__mail span { font-size: 11.5vw; }
  .narrow-br { display: inline; }
  .findme__links { flex-direction: column; gap: 0.75rem; }
}

/* ---------- Footer: the name returns full width, in the inverse colours (01) ---------- */

.footer { background: var(--light); color: var(--light-ink); --focus: var(--light-ink); padding: 3rem var(--margin) 1.5rem; min-height: 80svh; display: flex; flex-direction: column; overflow: hidden; }
.footer__name { font-weight: 800; font-stretch: 150%; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.82; }
.footer__name span { display: inline-block; white-space: nowrap; font-size: 11vw; }
.footer__links { margin-top: 4.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--step-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.footer__legal { margin-top: auto; padding-top: 4rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-size: var(--step-small); color: var(--light-muted); }
.footer__legal a { color: var(--light-ink); }
@media (max-width: 760px) {
  .footer { min-height: 0; }
  .footer__links { margin-top: 2.5rem; font-size: clamp(1.25rem, 5.6vw, 1.75rem); flex-direction: column; gap: 0.6rem; }
  .footer__legal { padding-top: 3rem; }
}

/* ---------- Motion (01's timings and easing; 07's hero landing) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__photo { animation: drift 28s var(--ease-in-out) infinite alternate; }
  @keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }

  .js [data-rise] {
    opacity: 0; transform: translateY(20px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  .js .hero h1 .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .hero h1 .line > span { display: block; transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 200ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes line-up { to { transform: none; } }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .slip[data-reveal]:not(.is-in) { transform: translateY(48px); }
  .js .plates .slip[data-reveal].is-in:nth-child(2) { transform: rotate(-1.5deg); }
  .js .spine[data-reveal] { transform: translateY(40px); transition-duration: 500ms, 700ms; transition-delay: calc(var(--i, 0) * 40ms); }
  .js .spine[data-reveal].is-in { transform: none; }
}

/* Signature: the approval card holds its place, then shrinks into a ticket stub at the bottom-left
   and stays there, pinned, while the city stays on screen. The pinned stretch after the landing
   (190svh hero minus the 100svh stage, past the 60svh range end) is what lets the stub read as landed
   before the built section scrolls in. Desktop only; the phone keeps the full card. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .hero:not(.hero--still) { height: 190svh; }
    .hero:not(.hero--still) .hero__stage { position: sticky; top: 0; height: 100svh; }
    .hero:not(.hero--still) .card { animation: to-stub linear both; animation-timeline: scroll(root); animation-range: 8svh 60svh; }
    @keyframes to-stub {
      to { transform: translate(calc(-1 * (100vw - var(--card-w)) / 2 + var(--margin)), calc((100svh - 100%) / 2 - 32px)) scale(0.5); }
    }
  }
}

/* ---------- About page ---------- */

.hero--still .hero__stage { min-height: 86svh; }
@media (max-width: 760px) { .hero--still .card { min-height: 0; } .hero--still .hero__stage { min-height: 88svh; } }