/* Ornate Werks v1 — type system taken from Office Commun: Inter 400/500 with ss01 + cv11, 15/24, +0.005em */
:root {
  --paper: #f3f0e9;
  --paper-2: #e9e5dc;
  --ink: #121211;
  --mute: rgba(18, 18, 17, .5);
  --hair: rgba(18, 18, 17, .12);
  --accent: #d9531e;
  --gold: #a8874f;
  --m: 24px;
  --u: 8px;
  --t: 15px;
  --lh: 24px;
  --max: 1440px;
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --strip-h: clamp(200px, 21vw, 330px);
  --bar-h: 64px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-size: var(--t);
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: .005em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* paper grain, like Contra's sheet */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: var(--grain);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--m); }
.mute { color: var(--mute); }
.label { color: var(--mute); }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--bar-h); color: var(--ink);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.bar.is-scrolled { background: rgba(243, 240, 233, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }
.bar__in { max-width: var(--max); margin: 0 auto; height: 100%; padding: 0 var(--m); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }
.bar__name { font-weight: 500; letter-spacing: -.005em; }
.bar__nav { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.bar__link { color: var(--mute); transition: color .2s; }
.bar__link:hover, .bar__link.is-current { color: var(--ink); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  white-space: nowrap;
  transition: opacity .3s var(--ease-out), background-color .3s, color .3s;
  cursor: pointer;
}
.pill:hover { opacity: .78; }
.pill--ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.pill--ghost:hover { opacity: 1; border-color: var(--ink); }
.pill--lg { height: 44px; padding: 0 20px; }

/* ---------- hero ---------- */
.hero { padding-top: calc(var(--bar-h) + clamp(48px, 8vw, 120px)); }
.hero__title {
  margin: 0;
  max-width: 17em;
  font-size: clamp(38px, 5.5vw, 88px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.hero__foot {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 34em) auto; justify-content: space-between; align-items: end; gap: calc(var(--u) * 4);
}
.hero__lede { margin: 0; font-size: 17px; line-height: 27px; letter-spacing: -.003em; color: var(--ink); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--u); }
.hero__foot > * { min-width: 0; }
.hero__art {
  position: relative;
  margin: clamp(40px, 5vw, 72px) 0 0;
  aspect-ratio: 2400 / 1343;
  background: var(--paper-2);
  overflow: hidden;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }
.hero__caption { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 1.5); }

/* ---------- sections ---------- */
.section { padding-top: clamp(96px, 12vw, 184px); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--u) * 3); }
.statement { grid-column: 4 / span 8; margin: 0; font-size: clamp(24px, 2.55vw, 38px); line-height: 1.24; letter-spacing: -.022em; text-wrap: pretty; }
.statement + .statement { margin-top: .9em; color: var(--mute); }
.side-label { grid-column: 1 / span 3; padding-top: .5em; }

/* collection strip (Office Commun rows) */
.strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u); margin-bottom: calc(var(--u) * 2); }
.strip__head .dot { color: var(--mute); }
.strip__scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; outline: none; }
.strip__scroll::-webkit-scrollbar { display: none; }
.strip__scroll.is-dragging { cursor: grabbing; }
.strip__scroll.is-dragging .tile { pointer-events: none; }
.strip__track { display: flex; gap: var(--u); width: max-content; padding: 0 max(var(--m), calc((100vw - var(--max)) / 2 + var(--m))); }
.tile { position: relative; flex: none; height: var(--strip-h); aspect-ratio: var(--ar, 4 / 3); padding: 0; border: 0; background: var(--paper-2); overflow: hidden; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out), transform 1.2s var(--ease); }
.tile.is-loaded img { opacity: 1; }
.tile:hover img { transform: scale(1.025); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; color: #fff; text-align: left; font-size: 13px; line-height: 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .3s var(--ease-out); }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; }

/* what we make */
.make__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--u) * 3); }
.make { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6) calc(var(--u) * 3); }
.card__art { position: relative; margin: 0; overflow: hidden; background: var(--paper-2); }
.card__art img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.card:hover .card__art img { transform: scale(1.025); }
.card__meta { margin-top: calc(var(--u) * 2); }
.card__title { margin: 0; font-size: var(--t); line-height: var(--lh); font-weight: 500; }
.card__text { margin: 2px 0 0; color: var(--mute); max-width: 32em; text-wrap: pretty; }

/* founder */
.founder { align-items: center; }
.founder__art { grid-column: 1 / span 6; margin: 0; background: var(--paper-2); overflow: hidden; }
.founder__art img { width: 100%; height: auto; }
.founder__text { grid-column: 8 / span 5; }
.founder__text p { margin: calc(var(--u) * 2) 0 0; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.32; letter-spacing: -.016em; text-wrap: pretty; }
.founder__sign { margin-top: calc(var(--u) * 3); color: var(--mute); }

/* commission */
.commission { align-items: start; }
.commission__text { grid-column: 1 / span 5; }
.commission__text .pill { margin-top: calc(var(--u) * 1); }
.commission__alt { margin: calc(var(--u) * 3) 0 0; color: var(--mute); }
.commission__alt a { color: var(--ink); border-bottom: 1px solid var(--hair); transition: border-color .2s; }
.commission__alt a:hover { border-bottom-color: var(--ink); }
.commission__title { margin: 0; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -.034em; font-weight: 400; }
.commission__note { margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); color: var(--mute); max-width: 30em; }
.commission__note a { color: var(--ink); border-bottom: 1px solid var(--hair); transition: border-color .2s; }
.commission__note a:hover { border-bottom-color: var(--ink); }
.commission__art { grid-column: 7 / span 6; position: sticky; top: calc(var(--bar-h) + 24px); margin: 0; background: var(--paper-2); overflow: hidden; }
.commission__art img { width: 100%; height: auto; }


/* ---------- footer ---------- */
.foot { margin-top: clamp(120px, 14vw, 220px); padding-bottom: clamp(14px, 1.8vw, 28px); border-top: 1px solid var(--hair); overflow: hidden; }   /* a strip of floor under the procession */
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 6); }
.foot__mark { margin: 0; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 400; }
.foot__line { margin: calc(var(--u) * 2) 0 0; color: var(--mute); }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot__list a { color: var(--mute); transition: color .2s; }
.foot__list a:hover { color: var(--ink); }
.foot__cta { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2); }
.foot__legal { display: flex; justify-content: space-between; gap: var(--u); padding-top: calc(var(--u) * 8); color: var(--mute); font-size: 13px; }

/* the procession: the house's cast walks along the bottom of every page.
   Each walker is a looping video drawn over white and multiplied into the paper, so white vanishes.
   The parade speed matches each walker's planted foot, so nobody slides. */
.procession {
  --foot: 4px;                                     /* set by JS: where the feet touch the ground */
  position: relative; height: calc(clamp(150px, 15.5vw, 236px) + 24px); margin-top: var(--u);   /* +24px: room for the name labels */
  overflow: hidden; background: var(--paper); isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.procession::before {                              /* the ledge they walk on */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--foot) - 1px); height: 1px; background: var(--hair);
}
.pf { position: absolute; left: 0; bottom: 0; mix-blend-mode: multiply; will-change: transform; }
.pf video, .pf img { display: block; width: 100%; height: 100%; }   /* contact shadows are baked into each clip */
.pf__name {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px); white-space: nowrap;
  font-size: 12px; line-height: 18px; color: var(--mute); opacity: 0; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.pf:hover .pf__name { opacity: 1; transform: translate(-50%, 0); }

/* living paintings: a muted loop fades in over the still once it is actually playing */
[data-living] { position: relative; }
.living { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease-out); pointer-events: none; }
.living.is-playing { opacity: 1; }
.tile .living { transition: opacity .6s var(--ease-out), transform 1.2s var(--ease); }
.tile:hover .living { transform: scale(1.025); }
.card:hover .living { transform: scale(1.025); transition: opacity .9s var(--ease-out), transform 1.4s var(--ease); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(14px); }
  .js .rise.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) var(--delay, 0s), transform .9s var(--ease-out) var(--delay, 0s); }
  .js .hero__title .line > span { transform: translateY(105%); }
  .js.is-ready .hero__title .line > span { transform: none; transition: transform 1.1s var(--ease) var(--delay, 0s); }
  .js .hero__foot, .js .hero__caption { opacity: 0; }
  .js.is-ready .hero__foot, .js.is-ready .hero__caption { opacity: 1; transition: opacity 1s var(--ease-out) .45s; }
}

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: grid; place-items: center; }
.loader::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: multiply; background-image: var(--grain); }
.loader__mark { position: absolute; font-weight: 500; font-size: 20px; letter-spacing: -.01em; opacity: 0; animation: fadeIn .7s var(--ease-out) .1s forwards; }
.loader__stage { position: absolute; left: 50%; top: 50%; width: min(36vw, 560px); aspect-ratio: 2400 / 1343; transform: translate(-50%, -50%); }
.loader__art { position: absolute; inset: 0; overflow: hidden; clip-path: inset(50% 50% 50% 50%); }
.loader__art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.loader__corner { position: absolute; width: 46px; height: 46px; color: var(--gold); opacity: 0; }
.loader__corner path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; }
.loader__corner circle { fill: currentColor; opacity: 0; }
.loader__corner--tl { left: -22px; top: -22px; }
.loader__corner--tr { right: -22px; top: -22px; transform: rotate(90deg); }
.loader__corner--br { right: -22px; bottom: -22px; transform: rotate(180deg); }
.loader__corner--bl { left: -22px; bottom: -22px; transform: rotate(270deg); }
.loader__count { position: absolute; left: 50%; top: calc(50% + min(36vw, 560px) * 1343 / 4800 + 34px); transform: translateX(-50%); color: var(--mute); font-variant-numeric: tabular-nums; font-size: 13px; opacity: 0; }

.loader.is-framing .loader__mark { animation: fadeUp .6s var(--ease-out) forwards; }
.loader.is-framing .loader__corner { opacity: 1; transition: opacity .3s; }
.loader.is-framing .loader__corner path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) .1s; }
.loader.is-framing .loader__corner circle { opacity: 1; transition: opacity .4s .8s; }
.loader.is-framing .loader__art { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) .25s; }
.loader.is-framing .loader__art img { transform: scale(1); transition: transform 1.6s var(--ease) .25s; }
.loader.is-framing .loader__count { opacity: 1; transition: opacity .4s .3s; }
.loader.is-opening .loader__corner { opacity: 0; transition: opacity .35s; }
.loader.is-opening .loader__corner--tl { transform: translate(-24px, -24px); transition: transform .5s var(--ease), opacity .35s; }
.loader.is-opening .loader__corner--tr { transform: rotate(90deg) translate(-24px, -24px); transition: transform .5s var(--ease), opacity .35s; }
.loader.is-opening .loader__corner--br { transform: rotate(180deg) translate(-24px, -24px); transition: transform .5s var(--ease), opacity .35s; }
.loader.is-opening .loader__corner--bl { transform: rotate(270deg) translate(-24px, -24px); transition: transform .5s var(--ease), opacity .35s; }
.loader.is-opening .loader__count { opacity: 0; transition: opacity .25s; }
.loader.is-done { opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--bar-h) + 8px) var(--m) var(--m); background: rgba(243, 240, 233, .97); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__stage { position: relative; place-self: center; line-height: 0; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .45); }
.lightbox__img { max-width: calc(100vw - 2 * var(--m)); max-height: calc(100vh - var(--bar-h) - 96px); width: auto; height: auto; }
.lightbox__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease-out); }
.lightbox__video.is-playing { opacity: 1; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding-top: calc(var(--u) * 2); }
.lightbox__btns { display: flex; gap: var(--u); }
.lightbox__close { position: absolute; top: 14px; right: var(--m); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --m: 16px; --strip-h: 190px; --bar-h: 56px; }
  .bar__link { display: none; }
  .bar__link.is-keep { display: inline; }
  .bar__nav { gap: calc(var(--u) * 2); }
  .hero__foot { grid-template-columns: 1fr; align-items: start; }
  .hero__ctas .pill { flex: 1 1 auto; justify-content: center; }
  .statement, .side-label { grid-column: 1 / -1; }
  .side-label { margin-bottom: calc(var(--u) * 2); }
  .make { grid-template-columns: 1fr; }
  .founder__art, .founder__text, .commission__text, .commission__art { grid-column: 1 / -1; }
  .founder__text { margin-top: calc(var(--u) * 4); }
  .commission__art { position: relative; top: 0; margin-top: calc(var(--u) * 6); }
  .foot__top { grid-template-columns: 1fr; }
  .foot__legal { flex-direction: column; }
  .loader__stage { width: 78vw; }
  .loader__count { top: calc(50% + 78vw * 1343 / 4800 + 30px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .living { display: none; }
}

/* review mode (?noloader): everything shown, no transitions */
.static *, .static *::before, .static *::after { transition: none !important; }

/* The panther mark (logo round 10, Oct 2026): header, loader and footer */
.mark { display: block; width: auto; flex: none; }
.bar__name { display: inline-flex; align-items: center; gap: 11px; }
.bar__name .mark { height: 26px; }
.bar__word { font-size: 12.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; margin-right: -.2em; }
.foot__mark { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.foot__mark .mark { height: clamp(64px, 7vw, 104px); }
.foot__word { font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; }
.loader__mark { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.loader__mark .mark { height: 58px; }
.loader__mark span { font-size: 12.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; margin-right: -.2em; }
@media (max-width: 760px) {
  .bar__name { gap: 9px; }
  .bar__name .mark { height: 23px; }
  .bar__word { font-size: 11px; letter-spacing: .14em; margin-right: -.14em; }
}
.bar__word { white-space: nowrap; }
@media (max-width: 520px) {
  .bar__name .mark { height: 27px; }
  .bar__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
}

/* ---------- the hero, hung in a carved gilt frame (Oct 22, 2026) ---------- */
/* The whole frame always fits the screen with wall around it; the living loop plays inside the opening. */
.hero { --frame-w: min(1040px, 100%, calc((100vh - var(--bar-h) - 190px) * 2400 / 1792)); overflow-x: clip; }   /* clip: the wall glow never widens the page on phones */
.hero__art--framed { position: relative; aspect-ratio: auto; background: none; overflow: visible; width: var(--frame-w); max-width: none;
  margin: clamp(72px, 9vw, 140px) auto 0; }
.hero__art--framed::before { content: ""; position: absolute; inset: -16% -20%; z-index: -1; pointer-events: none;   /* a gallery picture light on the wall */
  background: radial-gradient(closest-side, rgba(255, 252, 243, .95), rgba(255, 252, 243, .5) 55%, rgba(255, 252, 243, 0)); }
.hero__art--framed .frame { position: relative; aspect-ratio: 2400 / 1792; --ox: 18.1%; --oy: 24.3%; --ow: 63.7%; --oh: 52.0%;   /* the Florentine frame's opening */
  filter: drop-shadow(0 24px 30px rgba(45, 32, 12, .30)) drop-shadow(0 4px 6px rgba(45, 32, 12, .22)); }
.hero__art--framed .frame__opening { position: absolute; z-index: 0; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); overflow: hidden; }
.hero__art--framed .frame__opening .frame__painting { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the panel sits behind the frame's lip: the lip casts a soft shadow onto it, mostly from the top and left, and the old varnish catches a faint sheen */
.hero__art--framed .frame::before { content: ""; position: absolute; z-index: 1; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); pointer-events: none;
  box-shadow: inset 0 16px 20px -8px rgba(24, 14, 4, .58), inset 14px 0 18px -8px rgba(24, 14, 4, .42), inset -8px 0 14px -8px rgba(24, 14, 4, .26), inset 0 -8px 14px -8px rgba(24, 14, 4, .26);
  background: linear-gradient(116deg, rgba(255, 249, 232, .085) 0%, rgba(255, 249, 232, 0) 34%, rgba(255, 249, 232, 0) 72%, rgba(255, 249, 232, .04) 100%); }
.hero__art--framed .frame__gilt { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.hero__art--framed + .hero__caption { width: var(--frame-w); margin: 26px auto 0; justify-content: center; gap: 28px; }

/* ---------- the footer: the Balcony (Oct 22, 2026) ----------
   The words sit on the paper; beneath them the courtiers lean over the rail, film you as you leave and wave goodbye.
   The painting runs full width and off the bottom of the page, after Contra Labs. It replaces the procession. */
.foot { padding-bottom: 0; }
.foot__art { position: relative; margin: clamp(56px, 7vw, 104px) 0 0; width: 100%; aspect-ratio: 2 / 1; max-height: 92vh; overflow: hidden; background: #0c0d24; }   /* very wide screens crop the starry sky first */
.foot__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.foot__art .living { z-index: 1; object-position: 50% 100%; }
.foot__over { position: absolute; z-index: 2; left: 0; right: 0; top: 0; pointer-events: none; }
.foot__over .foot__legal { padding-top: clamp(14px, 1.9vw, 30px); color: rgba(243, 240, 233, .72); }
.foot__over a { pointer-events: auto; }
@media (max-width: 760px) {
  .foot__over .foot__legal { flex-direction: row; justify-content: space-between; font-size: 12px; }
}

/* ---------- phones (Oct 22, 2026): the art on the first screen, bigger paintings, a tidier footer ---------- */
.hero__art--framed[data-slug] { cursor: zoom-in; }                 /* tap the painting to see it large */
.lightbox { grid-template-columns: minmax(0, 1fr); }               /* a long title wraps instead of widening the page */
.lightbox__bar { flex-wrap: wrap; gap: 10px var(--u); }
@media (max-width: 760px) {
  :root { --strip-h: 224px; }
  /* the framed painting comes straight after the headline, so it is on the first screen */
  .hero { display: flex; flex-direction: column; }
  .hero__title { order: 1; }
  .hero__art--framed { order: 2; margin-top: 40px; }
  .hero__caption { order: 3; }
  .hero__art--framed + .hero__caption { margin-top: 16px; }
  .hero__foot { order: 4; margin-top: 40px; }
  /* the collection heading stacks instead of wrapping into two cramped columns */
  .strip__head { display: block; }
  .strip__head .dot, .strip__head > span:last-child { display: none; }
  .strip__head > :first-child .mute { display: block; }
  /* footer: two short columns instead of one long list */
  .foot { margin-top: 96px; }
  .foot__top { grid-template-columns: auto 1fr; gap: 28px 48px; padding-top: 40px; }
  .foot__top > div:first-child { grid-column: 1 / -1; }
  .foot__mark { gap: 16px; }
  .foot__mark .mark { height: 52px; }
  .foot__cta { display: contents; }
  .foot__top .foot__list { align-self: start; }                   /* each list keeps its own spacing */
  .foot__cta .pill { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- the loader hangs the painting in the hero's carved frame (Will's pick, Oct 23, 2026): data-border="frame" on #loader ---------- */
.loader__gilt { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transform: scale(1.05); }
.loader[data-border] .loader__corner { display: none; }
.loader[data-border] { overflow: hidden; }                       /* the huge frame stays outside the screen while the curtain lifts */
.loader[data-border="frame"] { --fw: min(46vw, 700px); --far: 1.3393; --ox: 18.1%; --oy: 24.3%; --ow: 63.7%; --oh: 52%; }      /* the hero's carved Florentine frame */
.loader[data-border="frame"] .loader__gilt--frame { display: block; }
.loader[data-border] .loader__stage { width: var(--fw); aspect-ratio: var(--far); }
.loader[data-border] .loader__stage::before { content: ""; position: absolute; inset: 1% .6%; opacity: 0; pointer-events: none;   /* the frame's shadow on the wall */
  box-shadow: 0 28px 46px -26px rgba(45, 32, 12, .42), 0 4px 10px -4px rgba(45, 32, 12, .2); }
.loader[data-border] .loader__art { inset: auto; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); }
.loader[data-border] .loader__count { top: calc(50% + var(--fw) / var(--far) / 2 + 26px); }
.loader.is-framing .loader__gilt, .loader.is-framing .loader__stage::before { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) .1s, transform 1.5s var(--ease) .1s; }
@media (max-width: 900px) {
  .loader[data-border="frame"] { --fw: 88vw; }
}

/* ---------- centred hero and commission (Oct 23, 2026) ----------
   The headline, the line under it and the two buttons sit on the same centre line as the framed painting;
   "Begin a commission" sits halfway down the Messenger instead of at its top. */
.hero__title { margin-left: auto; margin-right: auto; text-align: center; }
.hero__foot { grid-template-columns: minmax(0, 40em); justify-content: center; justify-items: center; align-items: start; text-align: center; gap: calc(var(--u) * 3); }
.hero__ctas { justify-content: center; }
.commission { align-items: center; }
.commission__art { position: relative; top: auto; }
@media (max-width: 900px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
}

/* ---------- the phone footer (Oct 23, 2026): built for the phone, after Contra Labs' own phone footer ----------
   Everything centred and stacked: the mark, the name, the line, the pages, the button, then the contact row.
   Beneath it the whole Balcony runs edge to edge at 2:1, exactly as on desktop (Will: "i want the full image on mobile"). */
@media (max-width: 760px) {
  .foot { margin-top: 112px; }
  .foot__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding-top: 64px; }
  .foot__mark { align-items: center; gap: 18px; }
  .foot__mark .mark { height: 56px; }
  .foot__word { margin-right: -.2em; }                                  /* the tracking would push the name off centre */
  .foot__line { margin-top: 12px; font-size: 15px; }
  .foot__top > .foot__list, .foot__top .foot__cta .foot__list { align-self: center; }
  .foot__top > .foot__list { margin-top: 44px; gap: 14px; justify-items: center; }
  .foot__top > .foot__list a { color: var(--ink); font-size: 18px; line-height: 24px; }
  .foot__cta { display: flex; flex-direction: column-reverse; align-items: center; gap: 28px; margin-top: 40px; }
  .foot__cta .pill { height: 48px; padding: 0 26px; font-size: 16px; }
  .foot__cta .foot__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
  .foot__cta .foot__list a { font-size: 15px; }
  .foot__art { margin-top: 64px; aspect-ratio: 2 / 1; }                     /* the whole painting, as on desktop (Will) */
  .foot__art img, .foot__art .living { object-position: 50% 50%; }
}

/* ---------- the founder's portrait in its own frame (test, Oct 23, 2026) ----------
   Gold, but not the hero's Florentine frame (Will: "i dont like the black frame. i want a differnt golden one"). Three new carved
   frames: a Florentine tabernacle, a Venetian Sansovino and a Dutch auricular, plus the Baroque from the hero round (Will's pick, Oct 23).
   ?frames shows a switcher; ?frame=tabernacle|sansovino|auricular|gold|none picks one. */
.founder__art--framed { background: none; overflow: visible; }
.founder__art--framed .frame { position: relative; aspect-ratio: 1800 / 1344; --ox: 12.3%; --oy: 16.55%; --ow: 75.3%; --oh: 66.65%;   /* the Baroque frame's opening */
  filter: drop-shadow(0 22px 28px rgba(30, 22, 10, .28)) drop-shadow(0 4px 6px rgba(30, 22, 10, .2)); }
.founder__art--framed .frame__opening { position: absolute; z-index: 0; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); overflow: hidden; background: var(--paper-2); }
.founder__art--framed .frame__painting, .founder__art--framed .frame__opening .living { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }   /* keeps the crown */
.founder__art--framed .frame::before { content: ""; position: absolute; z-index: 1; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); pointer-events: none;
  box-shadow: inset 0 14px 18px -8px rgba(16, 10, 4, .55), inset 12px 0 16px -8px rgba(16, 10, 4, .4), inset -8px 0 12px -8px rgba(16, 10, 4, .25), inset 0 -8px 12px -8px rgba(16, 10, 4, .25); }
.founder__art--framed .frame__gilt { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.founder__art--framed[data-frame="tabernacle"] .frame { aspect-ratio: 1600 / 1707; --ox: 16.44%; --oy: 34.87%; --ow: 67.24%; --oh: 46.95%; }
.founder__art--framed[data-frame="sansovino"] .frame { aspect-ratio: 1600 / 1365; --ox: 18.37%; --oy: 22.62%; --ow: 63.21%; --oh: 53.54%; }
.founder__art--framed[data-frame="auricular"] .frame { aspect-ratio: 1600 / 1365; --ox: 18.54%; --oy: 21.16%; --ow: 63.22%; --oh: 57.62%; }
.founder__art--framed[data-frame="none"] .frame { aspect-ratio: 1800 / 1347; filter: none; }
.founder__art--framed[data-frame="none"] .frame__opening { inset: 0; width: 100%; height: 100%; }
.founder__art--framed[data-frame="none"] .frame__gilt, .founder__art--framed[data-frame="none"] .frame::before { display: none; }
.ff-switch { position: fixed; z-index: 90; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 999px; background: rgba(18, 18, 17, .86); color: var(--paper); font-size: 13px; line-height: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ff-switch span { padding: 0 6px; opacity: .7; }
.ff-switch button { appearance: none; border: 0; border-radius: 999px; padding: 5px 11px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ff-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* ---------- framed paintings (Oct 23, 2026): the collection and the Messenger; see assets/js/frames.js ----------
   Each painting hangs whole in a carved gold frame cut for its shape; a dark slip takes up the last few per cent. */
.framed .is-framed { background: none; overflow: visible; }
.fr { position: relative; display: block; width: 100%; aspect-ratio: var(--fa);
  filter: drop-shadow(0 14px 18px rgba(30, 22, 10, .26)) drop-shadow(0 3px 4px rgba(30, 22, 10, .18)); }
.fr .fr__win { position: absolute; z-index: 0; overflow: hidden; background: #1c150f; }
.fr .fr__win > img, .fr .fr__win .living { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fr .fr__win::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* the lip of the frame shades the panel */
  box-shadow: inset 0 10px 14px -6px rgba(16, 10, 4, .55), inset 8px 0 12px -6px rgba(16, 10, 4, .4), inset -6px 0 10px -6px rgba(16, 10, 4, .25), inset 0 -6px 10px -6px rgba(16, 10, 4, .25); }
.fr .fr__gilt { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: 1; transform: none; }
.framed .tile.is-framed:hover .fr__gilt, .framed .card:hover .fr__gilt { transform: none; }
.framed .tile.is-framed .tile__cap { display: none; }                 /* the lightbox gives the title */
.framed .card:hover .card__art .fr__win > img { transform: scale(1.02); }
.framed .strip__track { gap: clamp(20px, 2.4vw, 40px); padding-top: 8px; padding-bottom: 28px; }   /* air between the frames, and room for their shadows */
.ff-switch b { padding: 5px 11px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 500; }
/* in the collection strip the frames cast a soft shadow from a blurred ellipse, not a CSS filter: filters inside the scrolling
   strip lift it onto its own layer and the paper grain stops reaching it, which showed as a pale band */
.framed .strip .fr, .framed .strip__track .fr { filter: none; }
.framed .strip__track .fr::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -4%; height: 12%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(30, 22, 10, .34), rgba(30, 22, 10, 0)); }
.framed { --strip-h: clamp(250px, 27vw, 430px); }                     /* the frames take room, so the strip grows to keep the paintings readable */
@media (max-width: 760px) { .framed { --strip-h: 270px; } }

/* ---------- the words above the footer painting (Oct 23, 2026), after Contra Labs' footer ----------
   Will: "fix the wording layout so it looks better right above the footer and put the words © 2026 Ornate Werks and Made the
   old way, with new tools in the white". Desktop: the house on the left, the pages in ink in the middle, the button and the
   contact on the right. Beneath them a hairline and the © line on the paper, then the painting. Phones keep the centred stack. */
.foot__base { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(64px, 7vw, 104px); padding-top: 18px;
  border-top: 1px solid var(--hair); color: var(--mute); font-size: 13px; line-height: 18px; }
.foot__art { margin-top: clamp(24px, 2.6vw, 36px); }
@media (min-width: 761px) {
  .foot__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 40px; align-items: start; padding-top: clamp(64px, 7vw, 112px); }
  .foot__top > .foot__list { gap: 12px; }
  .foot__top > .foot__list a { color: var(--ink); font-size: 16px; line-height: 22px; transition: opacity .2s; }
  .foot__top > .foot__list a:hover { opacity: .55; }
  .foot__cta { flex-direction: column-reverse; align-items: flex-end; gap: 22px; text-align: right; }
  .foot__cta .foot__list { gap: 6px; justify-items: end; }
}
@media (max-width: 760px) {
  .foot__base { flex-direction: column; align-items: center; gap: 4px; margin-top: 48px; text-align: center; font-size: 12.5px; }
  .foot__art { margin-top: 24px; }
}

/* ---------- Begin a commission on phones (Oct 23, 2026) ----------
   Centred like the hero and the footer, and in the hero's order: the title, the Messenger in its frame, the note, a full-width
   button, then the email. */
@media (max-width: 760px) {
  .commission { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .commission__text { display: contents; }
  .commission__title { order: 1; font-size: 36px; line-height: 1.05; }
  .commission__art { order: 2; width: 100%; margin-top: 32px; }
  .commission__note { order: 3; margin: 32px auto 0; max-width: 30em; font-size: 16px; line-height: 25px; }
  .commission .pill { order: 4; align-self: stretch; justify-content: center; margin-top: 24px; }
  .commission__alt { order: 5; margin-top: 18px; }
}

/* ---------- section names as real headings (Oct 24, 2026) ----------
   "What we believe", "The collection", "What we make" and "Who you'll work with" are h2s now, so search engines and AI
   assistants read the page's outline. :where() adds no weight, so each name keeps exactly the look its classes give it. */
:where(#believe h2, .strip__head h2, .make__head h2, .founder__text h2) { margin: 0; font: inherit; }