/* CornerSeen work pages: work/index.html and one case page per project.
   Form and scale from unseen.co, measured in style/ref/unseen/ (unseen-motion.md,
   unseen-pages.md): 1rem = 1% of the window; labels 0.8rem uppercase; body 1rem;
   lead 2rem; section heads 3rem; page title 4rem; one weight per face.
   The index sits on paper over the frosted wall of our own work (unseen's
   projects page sits in its white room); each case page wears the client's own
   dark ground (inline vars on <html>, from style/clearseen-work.json).
   Generated pages: edit style/build_clearseen_work.py and the JSON, not the HTML. */

@font-face { font-family: 'Zodiak'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/zodiak-400i.woff2) format('woff2'); }
@font-face { font-family: 'Noto Serif Display'; font-weight: 300; font-style: italic; font-display: swap; src: url(../fonts/noto-serif-display-300i.woff2) format('woff2'); }   /* the serif, after unseen's Saol Display */
@font-face { font-family: 'Zodiak'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/zodiak-400.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/switzer-400.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/switzer-500.woff2) format('woff2'); }

:root {
  color-scheme: only light;
  --ground: #f3f1ec;
  --ground-2: #ebe8e2;
  --ground-3: #dedbd4;
  --ink: #1c1d20;
  --muted: #4f525a;
  --line-rgb: 28, 29, 32;
  --line: rgba(var(--line-rgb), 0.16);
  --line-2: rgba(var(--line-rgb), 0.32);
  --glow: 255, 255, 255;
  --focus: #16754f;
  --serif: 'Noto Serif Display', 'Zodiak', Georgia, 'Times New Roman', serif;
  --sans: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --swap: cubic-bezier(0.87, 0, 0.13, 1);
  --section: 10rem;
  --r: 1.65rem;
  --r-s: 0.9rem;
}
html { font-size: clamp(14px, 1vw, 20px); -webkit-text-size-adjust: 100%; }
html.dark { color-scheme: dark; }
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.on-paper { background: var(--ground); }   /* the place itself is .loc, the island's lagoon (fly.css) */
body.on-paper::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(243, 241, 236, 0.42), rgba(243, 241, 236, 0.62) 40%, rgba(243, 241, 236, 0.72)); pointer-events: none; z-index: -1; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(76rem + 4rem); margin-inline: auto; padding-inline: 2rem; }
em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -0.015em; }
p { margin: 0; }

h1, h2, .display { font-weight: 400; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 3rem; line-height: 1.05; text-wrap: balance; }
.lede { font-size: 1.4rem; line-height: 1.45; color: var(--muted); max-width: 36rem; text-wrap: pretty; }
.label { font: 400 0.8rem/1.3 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }

/* ---------- header: logo left, links right (unseen's corners) ---------- */
.bar { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: max(1.6rem, env(safe-area-inset-top)) 2rem 0; }
.wordmark { display: inline-flex; }
.wordmark img { height: 2.8rem; min-height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 0.2rem; }
.nl { position: relative; display: inline-block; padding: 0.55rem 0.8rem; text-decoration: none; font-size: 1.05rem; line-height: 1; }
.nl-in { position: relative; display: block; overflow: clip; overflow-clip-margin: 0.25em; }
.nl-a, .nl-b { display: block; white-space: nowrap; }
.nl-b { position: absolute; inset: 0; font-family: var(--serif); font-style: italic; font-weight: 300; }
.ch { display: inline-block; transition: transform 0.55s var(--ease), opacity 0.4s var(--ease); transition-delay: calc(var(--i) * 30ms); }
.nl-b .ch { transform: translateY(105%); opacity: 0; }
.nl::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 999px; clip-path: inset(0 100% 0 0); transition: clip-path 0.5s var(--ease); }
.nl:hover .nl-a .ch, .nl:focus-visible .nl-a .ch { transform: translateY(-105%); opacity: 0; }
.nl:hover .nl-b .ch, .nl:focus-visible .nl-b .ch { transform: none; opacity: 1; }
.nl:hover::after, .nl:focus-visible::after { clip-path: inset(0 0 0 0); }
.nl[aria-current="page"] .nl-a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

/* ---------- the round button and the menu: the home page's, the same on every page ---------- */
.round { width: 3.7rem; height: 3.7rem; min-width: 44px; min-height: 44px; display: grid; place-items: center; margin-left: 0.6rem; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1c1d20; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; }
.round::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #1c1d20; scale: 0; transition: scale 0.4s var(--swap); }
.round:hover::before, .round[aria-expanded="true"]::before { scale: 1; }
.round:hover, .round[aria-expanded="true"] { color: #fff; }
.round svg { width: 1.15rem; height: 1.15rem; }
.round.dark { background: #1c1d20; color: #fff; margin: 0; }
.round.dark::before { background: #fff; }
.round.dark:hover { color: #1c1d20; }
.menu { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(36rem, 100%); background: #ebe8e2; color: #1c1d20; display: grid; grid-template-rows: auto 1fr auto; padding: max(1.6rem, env(safe-area-inset-top)) 2.4rem 2rem; transform: translateX(100%); transition: transform 0.7s var(--swap); visibility: hidden; }
.menu.is-open { transform: none; visibility: visible; }
.menu-top { display: flex; justify-content: flex-end; }
.menu nav { align-self: center; display: grid; gap: 0.4rem; }
.menu nav a { display: flex; align-items: flex-start; gap: 0.8rem; font: italic 300 4.5rem/1 var(--serif); text-decoration: none; color: #1c1d20; }
.menu nav a sup { font: 400 0.9rem/1 var(--sans); padding-top: 0.6rem; }
.menu nav a:hover, .menu nav a:focus-visible { font-style: normal; }
.menu nav a[aria-current="page"] { color: #6b6e75; }
.menu-foot { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; display: flex; justify-content: space-between; color: #4f525a; }
.scrim { position: fixed; inset: 0; z-index: 59; background: rgba(28, 29, 32, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- pill (the one action) ---------- */
.pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.6rem; min-height: 40px; padding: 0 1.4rem; border-radius: 999px; background: #16754f; color: #fff;   /* the action, in CornerSeen green */ text-decoration: none; font-size: 1.05rem; transition: color 0.4s var(--swap); }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground); transform: translateY(101%); transition: transform 0.45s var(--swap); }
.pill:hover, .pill:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill:hover::before, .pill:focus-visible::before { transform: none; }
.pill svg { width: 0.75rem; height: 0.75rem; }

/* ---------- index head: centred title, filters (unseen's projects page) ---------- */
.page-head { padding-top: 9rem; padding-bottom: 3.5rem; text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
.page-head h1 { font-size: 4rem; line-height: 1.1; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.filter { height: 1.9rem; min-height: 32px; padding: 0 0.9rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 400 0.8rem/1 var(--sans); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background 0.4s var(--swap), color 0.4s var(--swap); }
.filter sup { font-size: 0.62rem; margin-left: 0.15rem; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
.page-head .note { max-width: 34rem; font-size: 0.9rem; color: var(--muted); }

/* ---------- tiles: two columns, uniform, caption under each ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 1.75rem; }   /* the work close together (owner: "closer together under each other") */
.tile { display: block; text-decoration: none; perspective: 1400px; }
.tile-media { position: relative; transform-origin: 50% 100%; transform: rotateX(calc((var(--curl, 0) + var(--vel, 0)) * 1deg)); will-change: transform; }
.tile-frame { position: relative; overflow: hidden; border-radius: var(--r-s); aspect-ratio: 1.9 / 1; background: var(--ground-3); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(var(--line-rgb), 0.5); transform-style: preserve-3d; }
.tile-frame img, .tile-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.tile-frame video { opacity: 0; transition: opacity 0.45s var(--ease); }
.tile-frame video.is-playing { opacity: 1; }
.tile-cap { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1rem; padding: 0.8rem 0 0.7rem; border-bottom: 1px solid var(--line-2); }
.tile-name { grid-column: 1; font-weight: 500; font-size: 1rem; line-height: 1.35; }
.tile-line { grid-column: 1; color: var(--muted); font-size: 1rem; line-height: 1.35; }
.tile-arrow { grid-column: 2; grid-row: 1 / span 2; width: 0.9rem; height: 0.9rem; transition: transform 0.6s var(--ease); }
.tile:hover .tile-arrow, .tile:focus-visible .tile-arrow { transform: translate(3px, 3px); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .tile-frame { outline: 2px solid var(--focus); outline-offset: 4px; }
.tile.is-out { display: none; }
.badge { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); margin-left: 0.5rem; vertical-align: 0.1em; font-weight: 400; }

/* ---------- index close (unseen: "Looking for a creative partner...") ---------- */
.close { padding: 7rem 0 6rem; text-align: center; display: grid; justify-items: center; gap: 1.2rem; }
.close p { font-size: 1rem; }

/* ---------- footer ---------- */
.foot { padding-block: 1.6rem max(1.6rem, env(safe-area-inset-bottom)); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; font-size: 0.9rem; }
.foot-links { display: flex; gap: 1.5rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- case page ---------- */
.case-hero { padding-top: 9rem; }
.kicker { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.case-hero h1 { margin-top: 1.4rem; font-size: 5rem; line-height: 0.98; text-transform: uppercase; max-width: 16ch; }
.case-hero h1 .pre { display: block; font: italic 300 1.9rem/1.1 var(--serif); text-transform: none; letter-spacing: -0.01em; color: var(--muted); margin-bottom: 0.4rem; }
.case-hero .lede { margin-top: 1.4rem; }
.rise { animation: rise 1s var(--ease) both; }
html.fly-in:not(.fly-go) .rise { animation-play-state: paused; }   /* the head rises as the camera lands, not under the haze */
.rise-2 { animation-delay: 0.1s; }
.rise-3 { animation-delay: 0.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2rem); } }

.browser { position: relative; margin-top: 4rem; border-radius: var(--r); overflow: hidden; background: var(--ground-3); box-shadow: 0 0 0 1px var(--line), 0 60px 120px -70px rgba(0, 0, 0, 0.7); transform-origin: 50% 0; }
.browser-bar { display: flex; gap: 6px; align-items: center; height: 2.2rem; padding-inline: 1rem; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.browser-view { position: relative; aspect-ratio: 16 / 10; }
.browser-view img, .browser-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.browser-view video { opacity: 0; transition: opacity 0.6s var(--ease); }
.browser-view video.is-playing { opacity: 1; }

.overview { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 2.5rem; padding-top: var(--section); }
.overview-lead { grid-column: 1 / span 6; }
.overview-lead p:not(.label) { font-size: 2rem; line-height: 1.3; margin-top: 0.9rem; text-wrap: pretty; }
.meta { grid-column: 8 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.5rem; align-content: start; margin: 0; }
.meta dt { margin-bottom: 0.35rem; }
.meta dd { margin: 0; font-weight: 500; font-size: 1.2rem; line-height: 1.4; }
.meta .wide { grid-column: 1 / -1; }

.pair { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; padding-top: var(--section); align-items: start; }
.pair figure { margin: 0; }
.pair figure:first-child { grid-column: 1 / span 7; }
.pair figure:last-child { grid-column: 9 / -1; margin-top: 9rem; }
.pair--flip figure:first-child { grid-column: 1 / span 5; margin-top: 7rem; }
.pair--flip figure:last-child { grid-column: 7 / -1; margin-top: 0; }
.shot { border-radius: var(--r-s); overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--ground-3); }
.shot img { width: 100%; height: auto; }
figcaption { margin-top: 0.8rem; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }

.approach { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 2rem; padding-top: var(--section); }
.approach h2 { grid-column: 1 / span 6; }
.approach-body { grid-column: 8 / -1; display: grid; gap: 1.1rem; color: var(--muted); font-size: 1rem; line-height: 1.6; align-content: start; padding-top: 0.4rem; }

.wall { position: relative; margin-top: var(--section); height: 46rem; overflow: hidden; }
.wall::before, .wall::after { content: ""; position: absolute; inset: 0 0 auto; height: 20%; z-index: 2; background: linear-gradient(var(--ground), transparent); pointer-events: none; }
.wall::after { inset: auto 0 0; background: linear-gradient(transparent, var(--ground)); }
.wall-tilt { position: absolute; left: 50%; top: 50%; width: 150%; translate: -50% -50%; rotate: -11deg; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.wall-col { display: grid; gap: 1.4rem; will-change: transform; }
.wall-col:nth-child(even) { margin-top: -18%; }
.wall-col img { width: 100%; height: auto; border-radius: var(--r-s); box-shadow: 0 0 0 1px var(--line); }

.phones-band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; padding-top: var(--section); align-items: center; }
.phones-band .copy { grid-column: 1 / span 4; display: grid; gap: 1.1rem; }
.phones-band .copy .lede { font-size: 1rem; line-height: 1.6; }
.phones-band .pp { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.phones-band .pp .phone:last-child { margin-top: 7rem; }
.phone { position: relative; overflow: hidden; border-radius: 2.2rem; aspect-ratio: 780 / 1601; background: var(--ground-3); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -45px rgba(0, 0, 0, 0.75); width: 100%; max-width: 20rem; margin-inline: auto; }
.phone--m { aspect-ratio: 780 / 1688; }
.phone img, .phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.phone video { opacity: 0; transition: opacity 0.45s var(--ease); }
.phone video.is-playing { opacity: 1; }

.built { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 2rem; padding-top: var(--section); }
.built h2 { grid-column: 1 / span 4; }
.built dl { grid-column: 5 / -1; margin: 0; }
.built .row { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 0.4rem 2rem; padding: 0.95rem 0; border-top: 1px solid var(--line-2); align-items: baseline; }
.built .row:last-child { border-bottom: 1px solid var(--line-2); }
.built dt { font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.01em; }
.built dd { margin: 0; color: var(--muted); font-size: 0.9rem; }

.structure { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; padding-top: 5rem; align-items: start; }
.structure .phone { grid-column: 1 / span 4; max-width: 21rem; }
.structure-list { grid-column: 6 / -1; }
.structure-list ol { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: s; }
.structure-list li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; padding: 0.85rem 0; border-top: 1px solid var(--line-2); font-size: 1rem; }
.structure-list li:last-child { border-bottom: 1px solid var(--line-2); }
.structure-list li::before { content: counter(s, decimal-leading-zero); color: var(--muted); font-size: 0.8rem; padding-top: 0.15rem; }
.honest { margin-top: 1.8rem; padding: 1rem 1.2rem; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font-size: 0.9rem; }

/* next: "Next / NAME" over the next client's first screen, its colour rising (a link, not a scroll lock) */
.next { display: block; position: relative; isolation: isolate; margin-top: var(--section); min-height: 34rem; text-decoration: none; overflow: hidden; background: var(--next, var(--ground)); }
.next img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0.3; transform: scale(1.04); transition: opacity 0.8s var(--ease), transform 1.2s var(--ease); }
.next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ground) 0%, color-mix(in srgb, var(--next, var(--ground)) 55%, transparent) 45%, var(--next, var(--ground)) 100%); }
.next:hover img, .next:focus-visible img { opacity: 0.48; transform: scale(1); }
.next-in { display: grid; place-content: center; justify-items: center; text-align: center; min-height: inherit; gap: 0.2rem; padding: 4rem 2rem; color: #fff; }
.next .label { color: rgba(255, 255, 255, 0.8); margin-bottom: 0.6rem; }
.next .pre { font: italic 300 3rem/1 var(--serif); }
.next .display { font-size: 5rem; line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; }
.next .sub { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 0.8rem; color: rgba(255, 255, 255, 0.85); }
.next:focus-visible { outline: none; }
.next:focus-visible .display { outline: 2px solid var(--focus); outline-offset: 8px; border-radius: 6px; }

/* ---------- reveals (JS adds .js; nothing is hidden without it) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); }

/* ---------- page transition: a curtain in the destination's own colour ---------- */
.curtain { position: fixed; inset: 0; z-index: 100; background: var(--ground-2); pointer-events: none; transform: translateY(100%); }
.curtain.is-in { transition: transform 0.5s var(--swap); transform: translateY(0); }
html.pt-in::after { content: ""; position: fixed; inset: 0; z-index: 100; background: var(--ground); pointer-events: none; animation: pt-out 0.8s var(--ease) 0.05s forwards; }
@keyframes pt-out { to { transform: translateY(-100%); } }

@media (max-width: 900px) {
  html { font-size: 14px; }
  .wrap { padding-inline: 1rem; }
  .bar { padding-inline: 1rem; }
  .page-head { padding-top: 7rem; }
  .page-head h1 { font-size: 2.8rem; }
  .grid { grid-template-columns: 1fr; row-gap: 1.5rem; }
  h2 { font-size: 2.2rem; }
  .case-hero h1 { font-size: 2.8rem; }
  .case-hero h1 .pre { font-size: 1.4rem; }
  .overview-lead, .meta, .approach h2, .approach-body, .built h2, .built dl, .phones-band .copy, .phones-band .pp, .structure .phone, .structure-list { grid-column: 1 / -1; }
  .overview-lead p:not(.label) { font-size: 1.5rem; }
  .phones-band, .structure { row-gap: 3rem; }
  .structure .phone { width: min(18rem, 80%); }
  .pair figure:first-child, .pair figure:last-child, .pair--flip figure:first-child, .pair--flip figure:last-child { grid-column: 1 / -1; margin-top: 0; }
  .pair { row-gap: 2.5rem; }
  .built .row { grid-template-columns: 1fr; }
  .wall { height: 30rem; }
  .wall-tilt { grid-template-columns: repeat(3, 1fr); width: 190%; }
  .wall-col:nth-child(4) { display: none; }
  .next { min-height: 24rem; }
  .next .display { font-size: 2.6rem; }
  .next .pre { font-size: 1.9rem; }
  :root { --section: 6rem; }
}
@media (max-width: 760px) {
  .nav .nl { display: none; }
  .menu nav a { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .round::before, .menu, .scrim { transition: none; }
  .ch, .nl::after, .tile-arrow, .pill, .pill::before, .filter, .next img, .tile-frame video, .phone video, .browser-view video { transition: none; }
  .rise { animation: none; }
  .tile-media { transform: none; }
  html.pt-in::after { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- the Work index in its place (owner, 2026-10-11, after unseen's projects page) ----------
   No glass panels: the title, the filters, the work and the words sit straight on the island, as
   unseen's sit in its room, and the picture is never veiled. The island behind them is mostly dark
   (median luminance 0.08) with bright leaves, so the words are WHITE with a soft dark shade of their
   own (a text-shadow, not a box): it reads as nothing on the dark rock and only darkens around a
   letter that crosses a lit leaf. The place is muted under the work (.loc--muted, below), which
   darkens the pale water at the bottom too, so the words stay white everywhere (the old switch to
   ink over the water measured 3.2:1 once the water was muted). The filters ride unseen's white pill
   bar; the logo is the kit's reversed one. */
body.on-paper {
  --ink: #17181b; --muted: #17181b; --ground: #f3f1ec; color: #fff; background: transparent;
  --shade: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 10px rgba(0, 0, 0, 0.5), 0 0 26px rgba(0, 0, 0, 0.35);
  --aura: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 18px rgba(255, 255, 255, 0.4);
}
body.on-paper::before { content: none; }
body.on-paper .page-head h1, body.on-paper .page-head .note, body.on-paper .tile-cap, body.on-paper .close p, body.on-paper .foot-in, body.on-paper .bar .nl {
  color: #fff; text-shadow: var(--shade); transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
body.on-paper .page-head .note { font-size: 1rem; }
body.on-paper .bar .nl::after { border-color: #fff; }
body.on-paper .bar .wordmark img { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35)); }
body.on-paper .tile-line { color: inherit; }
body.on-paper .tile-cap { border-bottom-color: rgba(255, 255, 255, 0.6); }
body.on-paper .filters { padding: 0.25rem; gap: 0.25rem; background: #fff; border-radius: 999px; box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.6); }
body.on-paper .filter { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23, 24, 27, 0.16); }
body.on-paper .filter[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
body.on-paper .tile-frame { box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.7); }
body.on-paper .badge { background: #fff; color: var(--ink); box-shadow: none; text-shadow: none; }
/* over the pale water: ink, with a little light of its own */

/* an odd number of projects: the last one stands alone in the middle of its row, not in the left column
   with a hole beside it (three client sites since 2026-10-11) */
@media (min-width: 901px) {
  .grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 2.5rem) / 2); }
}

/* ---------- the place, muted under the work (owner, 2026-10-11: "the background is too colorful, it makes
   the websites and text on top not visible") ----------
   A third of its colour and a little over half its light, so the screens and the words sit in front of
   it. The dive from the home page lands on the picture exactly as it is (html.fly-in, before fly-go),
   so the muting eases in as the page settles; leaving (fly-out), it eases back to the frame the next
   place opens on. */
/* second pass (owner: "is there a way to make the view our work page content more visible"): the
   island's sharp leaves and rocks were what competed, not only its colour, so it also goes soft, as
   if the camera has focused on the work: a 7px blur, a little darker, and a 3% scale so the blur's
   soft edge stays off screen */
.loc--muted { filter: saturate(0.8) brightness(0.5) blur(3px); transform: scale(1.03);   /* the record corner stays recognisable behind the work (the island was 0.28 / 0.48 / 7px) */
   transition: filter 1.4s cubic-bezier(0.33, 0, 0.2, 1), transform 1.4s cubic-bezier(0.33, 0, 0.2, 1); }
/* About and SEO & care: their corners are lighter (white walls, the lit cork), so they are muted a step more
   (measured 2026-10-20: white over the brightest 2% behind each line was 4.06:1 at 0.5, before its shade) */
html[data-place="about"]:not(.fly-out) .loc--muted, html[data-place="seo"]:not(.fly-out) .loc--muted { filter: saturate(0.8) brightness(0.42) blur(3px); }
html.fly-in:not(.fly-go) .loc--muted { filter: none; transform: none; transition: none; }
html.fly-out .loc--muted { filter: none; transform: none; transition: filter 0.35s ease-in-out, transform 0.35s ease-in-out; }
html.fly-home .loc--muted { transition: filter 0.65s cubic-bezier(0.33, 0, 0.2, 1), transform 0.65s cubic-bezier(0.33, 0, 0.2, 1); }   /* back to the room: the mirror of the home's dimming */
/* the screens lift off it */
body.on-paper .tile-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 28px 60px -22px rgba(0, 0, 0, 0.75), 0 8px 18px -10px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) { .loc--muted { transition: none; } }

/* ---------- the record rack (owner, 2026-10-18: "a shelf with the records stacked like this video .. move
   the cursor or finger to scroll between them .. click one and it flips into the hero section, then turns
   into the business page"). After a Dumbling.FM concept: sleeves standing at an angle in a row, each with
   its title above it in a column; the one under the pointer turns to face you. work.js drives the angles
   (.rack.is-live); without it, or under reduced motion, the sleeves are a flat row that scrolls. ---------- */
.rack-band { position: relative; padding: 0.5rem 0 1rem; }
.rack { --S: min(46vh, 30vw, 27rem); --gap: calc(var(--S) * 0.34); position: relative; height: calc(var(--S) + 4.4rem); overflow: hidden; touch-action: pan-y; perspective: 2400px; perspective-origin: 50% 45%; }
.rack-row { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--S) + (var(--n) - 1) * var(--gap)); transform-style: preserve-3d; }
.rec { position: absolute; top: 0; left: calc(var(--i) * var(--gap)); width: var(--gap); height: 100%; display: block; color: #fff; text-decoration: none; transform-style: preserve-3d; outline: none; }
.rec-label { position: absolute; left: 0; top: 0; width: min(var(--S), 16rem); display: grid; gap: 0.15rem; font-size: 0.78rem; line-height: 1.3; text-shadow: var(--shade); opacity: 0.62; transition: opacity 0.4s var(--ease); }
.rec-label b { font-weight: 500; }
.rec-play { width: 0.7rem; height: 0.7rem; margin-top: 0.45rem; }
.rec:focus-visible .rec-label { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }
.rec-body { position: absolute; left: 0; bottom: 0; width: var(--S); height: var(--S); transform-origin: 0 50%; transform-style: preserve-3d; }
.rec-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 28px 48px -22px rgba(0, 0, 0, 0.8); backface-visibility: hidden; }
/* the sleeve's back: plain dark card, so a record seen from behind is a record and not a mirrored page */
.rec-body::before { content: ""; position: absolute; inset: 0; border-radius: 3px; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; background: linear-gradient(100deg, #26272b, #18191c 60%, #121315); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rec-body::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.22)); pointer-events: none; }
.rack-hint { margin: 0.6rem auto 0; text-align: center; font-size: 0.8rem; color: #fff; text-shadow: var(--shade); opacity: 0.8; }
.rack-hint-touch { display: none; }
@media (pointer: coarse) { .rack-hint-fine { display: none; } .rack-hint-touch { display: inline; } }
.rack-hint-still { display: none; }
@media (prefers-reduced-motion: reduce) { .rack-hint-fine, .rack-hint-touch { display: none !important; } .rack-hint-still { display: inline; } }
/* without work.js (or under reduced motion): a flat row of sleeves that scrolls */
.rack:not(.is-live) { overflow-x: auto; height: auto; perspective: none; }
.rack:not(.is-live) .rack-row { position: relative; display: flex; gap: 1.2rem; width: max-content; padding: 0 4vw 1rem; }
.rack:not(.is-live) .rec { position: relative; left: auto; width: var(--S); height: auto; display: grid; gap: 0.6rem; }
.rack:not(.is-live) .rec-label { position: static; width: auto; opacity: 1; }
.rack:not(.is-live) .rec-body { position: relative; }
@media (max-width: 760px) { .rack { --S: min(56vw, 34vh); } }
/* the flip: the chosen record turns over into its client's hero and fills the screen (work.js), and the
   client's page opens on that hero (the head script sets flip-in) and shrinks it into its browser frame */
.flip-card { position: fixed; z-index: 300; perspective: 1600px; pointer-events: none; }
.flip-card-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.flip-card-in > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; border-radius: 3px; }
.flip-card-in > .back { transform: rotateY(180deg); }
html.flip-in body::before { content: ""; position: fixed; inset: 0; z-index: 300; background: var(--flip-img) 50% 50% / cover no-repeat, var(--flip-ground, #000); }
.flip-cover { position: fixed; z-index: 300; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
/* live, each cover is placed by work.js (an accordion: an opening cover pushes the ones after it aside, so it
   never turns through its neighbour) */
.rack.is-live .rec { left: 0; }
@media (max-width: 760px) { .rack { --S: min(62vw, 36vh); } }
/* a closed cover's label is its name, cut to its slice; the open cover's label carries its line too */
.rack.is-live .rec-label > b, .rack.is-live .rec-label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rack.is-live .rec-label > span { opacity: var(--o, 1); }
/* the covers wait for work.js to stand them up: drawn flat for a frame first, they popped (2026-10-19) */
.js .rack:not(.is-live) { opacity: 0; }
.rack.is-live { animation: rack-in 0.6s cubic-bezier(0.33, 0, 0.2, 1) both; }
@keyframes rack-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rack.is-live { animation: none; } }

/* ---------- About and SEO & care (owner, 2026-10-20): two more corners of the studio, built like the Work
   index: the camera's close-up of the corner, muted, with white words over it in their own soft shade.
   About is the three owners, named by their roles; SEO & care is everything after the design, one row per
   service: what it is for, and what we do. ---------- */
body.on-paper .owner, body.on-paper .svc { color: #fff; text-shadow: var(--shade); }
.owners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; padding-bottom: 2rem; }
.owner { display: grid; justify-items: start; align-content: start; gap: 0.7rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.55); }
.owner-icon { width: 3.6rem; height: 3.6rem; min-width: 48px; min-height: 48px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45)); margin-bottom: 0.4rem; }
.owner h2 { margin: 0; font: italic 300 2.4rem/1.05 var(--serif); letter-spacing: -0.015em; }
.owner-leads { margin: 0; font: 400 0.8rem/1.3 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; }
.owner-history { margin: 0.3rem 0 0; font-size: 1rem; line-height: 1.6; max-width: 26rem; text-wrap: pretty; }

.svc { padding-bottom: 1rem; }
.svc-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.svc-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem 2.5rem; padding: 1.8rem 0; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.svc-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.svc-n { font: 400 0.8rem/1 var(--sans); letter-spacing: 0.04em; padding-top: 0.75rem; }
.svc-main h2 { margin: 0; font: 400 2rem/1.1 var(--sans); letter-spacing: -0.02em; }
.svc-why { margin: 0.6rem 0 0; font: italic 300 1.25rem/1.35 var(--serif); max-width: 24rem; }
.svc-do { list-style: none; margin: 0; padding: 0.35rem 0 0; display: grid; gap: 0.55rem; }
.svc-do li { position: relative; padding-left: 1.4rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.svc-do li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7rem; height: 1px; background: currentColor; box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); }
.svc-honest { margin: 2.5rem auto 0; max-width: 40rem; text-align: center; font: italic 300 1.35rem/1.45 var(--serif); }

@media (max-width: 900px) {
  .owners { grid-template-columns: 1fr; gap: 2.4rem; }
  .owner h2 { font-size: 2rem; }
  .svc-row { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem 1rem; padding: 1.4rem 0; }
  .svc-do { grid-column: 2; }
  .svc-main h2 { font-size: 1.6rem; }
  .svc-why { font-size: 1.1rem; }
}

/* ---------- Contact: the office's screen (owner, 2026-10-20: "zoom in on the top office screen .. the request a
   call container appears inside the pc screen as if the visitor is sending an email .. another tab, get a quote").
   The page opens on the camera's close-up of the office; the screen below is laid exactly over the monitor in
   that picture (work.js, from the render's own numbers), wakes over the picture of itself, and on a phone grows
   to fill the display. Everything inside is sized in the screen's own units (cqw), so it looks the same in the
   monitor at any window size and matches the picture the render put there. ---------- */
html[data-place="contact"] .foot { display: none; }
.loc--clear { filter: none; }
.desk-screen { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.screen { position: fixed; left: var(--l, 20%); top: var(--t, 20%); width: var(--w, 60%); height: var(--h, 60%);
  container-type: size; pointer-events: auto; overflow: hidden; border-radius: 0.35cqw; opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.33, 0, 0.2, 1); }
.screen[data-state="awake"] { opacity: 1; }
.screen[data-full] { border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
.mail { --u: clamp(9px, 1.55cqw, 24px); height: 100%; display: grid; grid-template-rows: auto 1fr; background: #f7f6f3;
  color: #1c1d20; font: 400 var(--u)/1.4 var(--sans); text-shadow: none; }
.screen[data-full] .mail { --u: max(16px, min(1.55cqw, 19px)); }   /* 16px at least where it fills a phone: iOS zooms smaller fields */
.mail-bar { display: flex; align-items: center; gap: 1.1em; padding: 0.6em 0.9em; background: #ebe9e4; border-bottom: 1px solid #d9d6cf; }
.dots { display: flex; gap: 0.45em; }
.dots i { width: 0.72em; height: 0.72em; border-radius: 50%; background: #cfccc5; }
.tabs { display: flex; gap: 0.3em; }
.tab { font: inherit; border: 0; background: transparent; padding: 0.4em 1em; border-radius: 999px; color: #4f525a; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease; }
.tab:hover { color: #1c1d20; }
.tab[aria-selected="true"] { background: #fff; color: #1c1d20; box-shadow: 0 0 0 1px #dedbd4, 0 1px 2px rgba(0, 0, 0, 0.06); }
.tab:focus-visible, .grow:focus-visible, .mail input:focus-visible, .mail textarea:focus-visible { outline: 2px solid #16754f; outline-offset: 2px; }
.grow { margin-left: auto; display: grid; place-items: center; width: 2.1em; height: 2.1em; border: 0; border-radius: 50%; background: transparent; color: #4f525a; cursor: pointer; }
.grow:hover { background: #fff; color: #1c1d20; }
.grow svg { width: 1.1em; height: 1.1em; }
.pane { min-height: 0; overflow: auto; }
.compose { display: grid; grid-template-rows: auto auto auto auto auto 1fr auto; height: 100%; }
.hdr { display: grid; grid-template-columns: 7.2em 1fr; align-items: center; gap: 0.6em; padding: 0.5em 1.2em; border-bottom: 1px solid #e3e0da; }
.hdr .k { color: #5d6068; }
.hdr input { width: 100%; min-width: 0; font: inherit; color: inherit; border: 0; background: transparent; padding: 0.15em 0; outline: none; }
.mail ::placeholder { color: #6f727a; opacity: 1; }   /* 4.7:1 on the window */
.hdr:focus-within { background: #fff; }
.msg { display: block; min-height: 4em; }
.msg textarea { display: block; width: 100%; height: 100%; min-height: 4em; border: 0; resize: none; padding: 0.9em 1.2em; font: inherit; color: inherit; background: transparent; outline: none; }
.send { display: flex; align-items: center; gap: 1em; padding: 0.7em 1.2em; border-top: 1px solid #e3e0da; }
.mail .pill--send { height: 2.3em; min-height: 0; padding: 0 1.4em; font-size: 1em; border: 0; cursor: pointer; background: #16754f; color: #fff; }
.mail .pill--send:hover, .mail .pill--send:focus-visible { background: #1c1d20; color: #fff; box-shadow: none; }
.send .note { margin: 0; color: #5d6068; font-size: 0.85em; }
#quoteFrame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.quote-away { display: grid; place-content: center; justify-items: center; gap: 1em; height: 100%; padding: 2em; text-align: center; color: #3b3e45; }
.quote-away p { margin: 0; max-width: 30em; }
@media (prefers-reduced-motion: reduce) { .screen { transition: none; } }

/* Contact's office is bright and unmuted: its header is ink, without the shade the dimmed corners need */
html[data-place="contact"] body.on-paper .bar .nl { color: var(--ink); text-shadow: none; }
html[data-place="contact"] body.on-paper .bar .nl::after { border-color: var(--ink); }
html[data-place="contact"] body.on-paper .bar .wordmark img { filter: none; }