/* Thibaud Teti — website v6
   Clean frames, slightly odd motion. Every number lives in js/config.js (editable in the back office,
   "design" page), which writes the CSS variables below at boot.

   THE SYSTEM
   --m        page margin: left, right, top, bottom of everything
   --g        column gap: between grid columns, between images, between About's blocks horizontally
   grid       12 columns (4 on phones) between the margins. About uses the same grid halved (24 / 8),
              so every About edge is also a grid edge.
   --b        one line of body text: the unit for vertical spacing (blocks are 2 lines apart)
   --nav-gap  between nav items, and between the socials at the bottom of About (mirror of the nav)
   type       --fs-1 body · --fs-2 nav + contact · --fs-3 titles + menu · --fs-4 landing · --fs-5 about statement
              labels (how i work, selected clients…) are the serif at body size */

@font-face { font-family: "Inter T"; src: url(fonts/inter-18-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter T"; src: url(fonts/inter-24-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter D"; src: url(fonts/inter-28-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter D"; src: url(fonts/inter-28-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }   /* only loads when selected */
/* Tapeworm's own vertical metrics are very tall; normalise them to Inter's proportions so it aligns */
@font-face { font-family: "Tapeworm"; src: url(fonts/tapeworm.woff2) format("woff2"); font-weight: 400; font-display: swap;
  ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }

:root {
  --fg: #545454;
  --muted: #aaabb2;
  --bg: #fff;
  --font: "Inter T", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-big: "Inter D", var(--font);
  --font-title: "Tapeworm", var(--font);
  --font-serif: "Times New Roman", Times, serif;

  --m: clamp(12px, 1vw, 22px);
  --g: clamp(10px, 0.9vw, 20px);
  --cols: 12;
  --col: calc((100vw - 2 * var(--m) - (var(--cols) - 1) * var(--g)) / var(--cols));
  --nav-gap: clamp(20px, 2.6vw, 56px);

  --fs-1: calc(clamp(13px, 0.95vw, 18px) * var(--t-text, 1));   /* type sizes: × the Typography settings */
  --fs-2: calc(clamp(15px, 1.25vw, 24px) * var(--header-size, 0.9) * var(--t-text, 1));   /* header (name, tagline, work / about) */
  --fs-3: calc(clamp(20px, 1.75vw, 34px) * var(--t-title, 1));
  --fs-4: calc(clamp(22px, 2.1vw, 40px) * var(--t-big, 1));
  --fs-5: calc(clamp(26px, 3.3vw, 64px) * var(--t-big, 1));
  --lh: 1.28;
  --b: calc(var(--fs-1) * var(--lh));
  --nav-h: calc(var(--fs-2) * 1.2);
  --row2: calc(var(--mt, var(--m)) + var(--nav-h) + var(--m));   /* first row under the nav */
  --text-gap: 10px;

  /* set by js from the measured info; fallbacks */
  --info-top: var(--row2);
  --box-top: calc(var(--row2) + 5em);
  --box-bottom: calc(var(--m) + 4em);

  --t-hover-in: 0.22s; --t-hover-out: 0.45s;
  --ease-hover: cubic-bezier(.25, .8, .25, 1);
  --hover-stroke: 0.3px; --hover-glow1: 6px; --hover-glow2: 3px; --hover-shadow: rgba(84, 84, 84, 0.55);
  --menu-blur: 22px; --menu-veil: 0.25;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--fs-1)/var(--lh) var(--font); letter-spacing: var(--ls-text, 0);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: "kern", "calt";
}
/* ragged lines: paragraphs avoid lone last words and jagged edges; short blocks are fully balanced */
p, li, .sheet-in, .about .blk { text-wrap: pretty; }
.statement, .about .big, .i-cap, .lbl, h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; font-weight: 400; }
ul { list-style: none; padding: 0; }
img, video { display: block; }
:focus-visible { outline: 1px dotted currentColor; outline-offset: 3px; }

/* ---------- hover: bold + drop shadow, animated (no layout shift) ---------- */
.hov {
  --hb: calc(var(--hover-stroke) * 0.5);
  text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  transition: text-shadow var(--t-hover-out) var(--ease-hover);
}
.hov:focus-visible, .hov.is-hot {
  text-shadow: var(--hb) 0 0 currentColor, calc(var(--hb) * -1) 0 0 currentColor,
    0 0 var(--hover-glow1) var(--hover-shadow), 0 0 var(--hover-glow2) var(--hover-shadow);
  transition-duration: var(--t-hover-in);
}
@media (hover: hover) {
  .hov:hover {
    text-shadow: var(--hb) 0 0 currentColor, calc(var(--hb) * -1) 0 0 currentColor,
      0 0 var(--hover-glow1) var(--hover-shadow), 0 0 var(--hover-glow2) var(--hover-shadow);
    transition-duration: var(--t-hover-in);
  }
}

/* ---------- selection: native highlight hidden, letters redrawn by js/select.js ---------- */
html.sel-custom ::selection { background: transparent; text-shadow: none; }   /* letters stay: the drawn ones cover them (js/select.js) */
.sel-layer, .sel-layer > div { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.sel-layer span { position: absolute; transform: translateX(-50%); white-space: pre; letter-spacing: 0; font-synthesis: none; paint-order: stroke fill; -webkit-font-smoothing: antialiased; }
.sel-layer.on-page, .sel-layer.on-page > div { position: absolute; top: 0; left: 0; right: auto; bottom: auto; width: 0; height: 0; overflow: visible; }
.flashing, .flashing * { color: transparent !important; }   /* lines appearing in the selected look (About, landing) */

/* ---------- blinds transition (js/wave.js animates --p from 0 to one band) ---------- */
@property --p { syntax: "<length>"; inherits: false; initial-value: 0px; }
.blind-out { -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 calc(var(--band, 6px) - var(--p)), transparent calc(var(--band, 6px) - var(--p)) var(--band, 6px));
  mask-image: repeating-linear-gradient(to bottom, #000 0 calc(var(--band, 6px) - var(--p)), transparent calc(var(--band, 6px) - var(--p)) var(--band, 6px)); }
.blind-in { -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--band, 6px) - var(--p)), #000 calc(var(--band, 6px) - var(--p)) var(--band, 6px));
  mask-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--band, 6px) - var(--p)), #000 calc(var(--band, 6px) - var(--p)) var(--band, 6px)); }
/* .down: bands open from their top edge downwards (scrolling down, next view) */
.blind-out.down { -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 var(--p), #000 var(--p) var(--band, 6px));
  mask-image: repeating-linear-gradient(to bottom, transparent 0 var(--p), #000 var(--p) var(--band, 6px)); }
.blind-in.down { -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 var(--p), transparent var(--p) var(--band, 6px));
  mask-image: repeating-linear-gradient(to bottom, #000 0 var(--p), transparent var(--p) var(--band, 6px)); }

/* ---------- waiting for their entrance (js removes .pre); safety net if js never runs ---------- */
html.js .pre { opacity: 0; animation: pre-reveal 0s 2.5s forwards; }
@keyframes pre-reveal { to { opacity: 1; } }
html.booting body { opacity: 0; animation: pre-reveal 0s 1.5s forwards; }   /* until settings, scroll and fonts are in place (js/main.js) */
.w { display: inline; }

/* ---------- nav (permanent): one row, margins all round, one gap between items ---------- */
.nav {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: baseline; gap: var(--nav-gap);
  /* optical margin: top edge -> top of the capitals = the side margin (Inter: line box adds ~0.34em above caps) */
  padding: calc(var(--mt, var(--m)) - var(--fs-2) * 0.34 + var(--safe-top, 0px)) var(--m) 0;   /* top margin, optically: the caps sit --mt from the edge */
  font-size: var(--fs-2); line-height: 1.2; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
html.nav-away .nav { transform: translateY(-110%); opacity: 0; }   /* phone, scrolling down the projects (js/header.js) */
/* ...and the room it leaves goes to the project: title up to the top margin, image area taller */
.info-top { transition: top .3s ease; }
html.nav-away .info-top { top: calc(var(--info-top) - var(--nav-shift, 0px)); }
html.nav-away .stage, html.nav-away .zone { top: calc(var(--box-top) - var(--nav-shift, 0px)); }
html.nav-anim .m { transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
html.measuring .nav, html.measuring .info-top { transition: none !important; }   /* js/projects.js stageBox */
.nav > * { pointer-events: auto; white-space: nowrap; }
.nav-links { display: flex; gap: var(--nav-gap); margin-left: auto; }

/* ---------- landing ---------- */
.landing { position: relative; }
/* the first screen plus some room below it, where images may spill (js/field.js); clipped on the sides only */
.landing { height: calc(100svh + var(--landing-space, 300px)); overflow-x: clip; overflow-y: visible; }
.field { position: absolute; left: 0; top: 0; width: 100%; }
.field .sp { display: none; }                      /* templates, until js/field.js takes them */
.fi {
  position: absolute; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition-property: left, top, width, height; transition-timing-function: cubic-bezier(.45, 0, .25, 1);
}
.fi .pop { display: block; width: 100%; height: 100%; background: var(--c, #eee); }
.fi img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.fi.v .pop { position: relative; overflow: hidden; }
.fi.v .poster, .fi.v video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.statement {
  position: absolute; z-index: 10; left: 50%; top: 50svh; transform: translate(-50%, -50%);   /* centre of the first screen; above the landing images, under the works menu (40) */
  width: max-content; max-width: calc(100vw - 2 * var(--m)); text-align: center;
  font: 400 var(--fs-4)/var(--lh-big, 1.15) var(--font-big); letter-spacing: var(--ls-big, 0);
  -webkit-user-select: text; user-select: text; cursor: text;   /* selectable, like every text on the site */
}

/* ---------- projects: stage = margin to margin, up to --text-gap from the text ---------- */
.project {
  position: relative; height: 100svh; overflow: hidden;
  content-visibility: auto; contain-intrinsic-size: auto 100svh;
}
.stage { position: absolute; top: var(--box-top); bottom: var(--box-bottom); left: var(--m); right: var(--m); }
.layout { position: absolute; inset: 0; visibility: hidden; }
.layout.on { visibility: visible; }
.m { position: absolute; margin: 0; overflow: hidden; background: var(--c, #f1f1f1); }
.m picture, .m img, .m video { width: 100%; height: 100%; }
.m img, .m video { object-fit: cover; }
.m.v .poster, .m.v video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }   /* 1 px over every edge (clipped by the frame): a sub-pixel gap never shows the frame's colour as an outline */
/* The video is never hidden (an iPhone only starts a muted clip by itself if it can see it): the still frame
   sits on top of it and fades away once the clip plays (.ready), then comes back if the clip is released */
.m.v .poster, .fi.v .poster { z-index: 1; transition: opacity var(--t-video, .28s) ease; }
.m.v.ready .poster, .fi.v.ready .poster { opacity: 0; }
/* never the phone's own play button */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }
/* idle pulse: a clip that should play and doesn't yet (still downloading, not started) gets a white veil over it,
   softly coming and going (video.idleCycle, idlePulse); it fades out from wherever it is once the clip plays */
.m.v, .fi.v .pop { isolation: isolate; }
.m.v::after, .fi.v .pop::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.m.v.loading::after, .fi.v.loading .pop::after { animation: idle-pulse var(--idle-cycle, 1s) ease-in-out infinite; }
.m.v.veil-out::after, .fi.v.veil-out .pop::after { animation: veil-out var(--t-video, .28s) ease-out forwards; }
@keyframes idle-pulse { 50% { opacity: var(--idle-pulse, .5); } }
@keyframes veil-out { from { opacity: var(--veil-from, 0); } to { opacity: 0; } }
.m.ph { background: #f2f2f2; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-1); }
.pinfo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; user-select: none; -webkit-user-select: none; }   /* for screen readers only */

/* left / right halves switch views; the cursor is the arrow. The halves are found by js (projects.js), not
   by overlays, so the images themselves get the right-click (save, open in a new tab, drag out). The two
   buttons stay for keyboards and screen readers. */
.zone { position: absolute; z-index: 3; top: var(--box-top); bottom: var(--box-bottom); width: 50%; pointer-events: none; }
.zone.prev { left: 0; }
.zone.next { right: 0; }
.project.go-prev, .project.go-prev * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Cpath d='M33 8H2M9 1 2 8l7 7' fill='none' stroke='%23545454' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 2 8, w-resize; }
.project.go-next, .project.go-next * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Cpath d='M1 8h31M25 1l7 7-7 7' fill='none' stroke='%23545454' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 32 8, e-resize; }
/* ---------- project info (fixed, follows the project on screen) ---------- */
.info { position: fixed; z-index: 20; left: var(--m); right: var(--m); text-align: center; pointer-events: none; }
.info .ln { display: block; line-height: var(--info-lh, 1.12); }
.info-top { top: var(--info-top); }
.i-title { font: 400 calc(var(--fs-3) * var(--title-size, 0.7))/var(--info-lh, 1.12) var(--font-title); letter-spacing: var(--ls-title, 0); white-space: nowrap; text-transform: uppercase; }
.info .i-count { display: flex; justify-content: center; gap: var(--count-gap, 64px); pointer-events: auto; font-size: calc(var(--fs-1) * var(--count-size, 0.7)); }
.i-count button { min-width: 1.2em; }
.i-count .cur { -webkit-text-stroke: var(--hover-stroke) currentColor; }
.info-bottom { bottom: calc(var(--mb, var(--m)) + var(--info-lift, 0px) + var(--safe-bottom, 0px)); }
/* opened from the home screen (full screen, no browser bars): clear of the clock and the home bar */
@media (display-mode: standalone) {
  :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
}
.i-cap { max-width: var(--cap-w, 21ch); margin-inline: auto; text-wrap: balance; }   /* width set by projects.js */
.i-cap, .sheet-in p { white-space: pre-line; }   /* line breaks written in Notion */
/* the text lines themselves can be selected (the rest of .info lets clicks through to the images) */
.info .i-title, .info .i-disc, .info .i-year, .info .i-cap { pointer-events: auto; width: fit-content; margin-inline: auto; cursor: text; }
.info .i-links { display: flex; justify-content: center; gap: var(--count-gap, 64px); font-weight: 600; pointer-events: auto; }
.i-links .todo { font-weight: 400; color: var(--muted); }
.info .empty { color: var(--muted); }

/* project text + credits sheet ("info"): 6 columns wide */
.sheet {
  position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: var(--row2) var(--m);
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sheet[hidden] { display: none; }
.sheet-in { width: min(100%, calc(var(--col) * var(--sheet-cols, 4) + var(--g) * (var(--sheet-cols, 4) - 1))); text-align: center; line-height: var(--lh); }
.sheet-in p + p, .sheet-in ul { margin-top: var(--b); }

/* ---------- works menu ---------- */
.menu { position: fixed; z-index: 40; inset: 0; display: none; place-items: center; overflow: auto; }
.menu:target, .menu.open { display: grid; }
.menu-veil, .menu-veil > div { position: fixed; inset: 0; }
.menu-veil > div { will-change: opacity; }   /* fixed blurs set by js/menu.js; only their opacity moves */
html.no-js .menu-veil > div:first-child { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.menu-list { position: relative; padding: var(--row2) var(--m); text-align: center; font: 400 var(--fs-3)/var(--lh-title, 1.12) var(--font-title); letter-spacing: var(--ls-title, 0); text-transform: uppercase; }
.menu-list a { display: inline-block; }
/* only the hovered name changes colour: set by menu.js from the lightness of the picture under it */
.menu-list a.hov { transition: text-shadow var(--t-hover-out) var(--ease-hover), color .2s ease; }
/* the page can't scroll while the list is open; a list taller than the screen scrolls by itself */
html.menu-open { overflow: hidden; }
.menu { overscroll-behavior: contain; }

/* ---------- about: the statement on top, then (after a gap that takes the free height) four columns:
   contact | clients + services/teaching | first text | other texts + copyright. The two text columns are a
   little wider; columns are separated by --about-gap. Phone: one column, gaps in vh (--about-gap-*). ---------- */
.about {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: var(--row2) calc(var(--m) + var(--about-side, 1.1vw)) calc(var(--mb, var(--m)) + var(--about-bottom, 40px));   /* more air on the sides and below */
  --fs: calc(var(--fs-1) * var(--about-text, 1) * var(--k, 1));   /* every About size below follows this */
  font-size: var(--fs); line-height: var(--lh);
}
.about.fit { height: 100svh; overflow: hidden; }
.about .big { font: 400 calc(var(--fs-5) * var(--about-big, 0.9) * var(--k, 1))/var(--lh-big, 1.15) var(--font-big); letter-spacing: var(--ls-big, 0); margin: 0;
  text-wrap: wrap; }   /* About's statement fills its block's width (lines break late, not balanced) */
.about .grid {
  margin-top: auto; padding-top: calc(var(--b) * var(--about-group, 3) * var(--k, 1));     /* free height goes above the columns */
  display: grid; grid-template-columns: 1fr 1.3fr 1.45fr 1.45fr; column-gap: var(--about-gap, 4vw); align-items: start;
}
.about .lbl { font: 400 calc(var(--fs) * 1.1 * var(--t-label, 1))/var(--lh) var(--font-serif); letter-spacing: var(--ls-label, 0); margin: 0; }
.about .a-contact { grid-column: 1; grid-row: 1; }
.about .a-lists   { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
.about .a-c3      { grid-column: 3; grid-row: 1; }
.about .a-c4      { grid-column: 4; grid-row: 1; }
.about .a-side > * + *, .about .a-col > * + * { margin-top: calc(var(--b) * var(--about-block, 2) * var(--k, 1)); }
.about .blk p + p { text-indent: calc(var(--space, 0.27em) * var(--about-indent, 5)); }   /* new paragraph: N spaces (js measures a space) */
.about .mail, .about .a-socials { font-size: calc(var(--fs) * 1.4); line-height: 1.15; }
.about .a-soc-lbl { margin-top: calc(var(--b) * var(--about-block, 2) * var(--k, 1)); }
.about .a-clients .cm { display: none; }     /* commas only where the clients run on one line (phone) */

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .about .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--b) * var(--about-group, 3) * var(--k, 1)); }
  .about .a-lists   { grid-column: 1; grid-row: 1; }
  .about .a-contact { grid-column: 2; grid-row: 1; }
  .about .a-c3      { grid-column: 1; grid-row: 2; }
  .about .a-c4      { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  :root { --cols: 4; }
  .i-title { white-space: normal; }
  .about { --fs: calc(15px * var(--about-text, 1) * var(--t-text, 1)); }
  .about .big { font-size: calc(26px * var(--about-big, 0.9) * var(--t-big, 1)); }
  /* phone: one column in reading order; clients run on one line, services in two short columns beside teaching */
  /* first screen (js/about.js groups them): statement at the top, lists at the bottom, the free height between */
  .about > .a-first { display: flex; flex-direction: column; min-height: calc(100svh - var(--row2) - var(--mb, var(--m))); }
  .about > .a-first > .a-lists { margin-top: auto; padding-top: var(--about-gap-top, 6vh); }   /* at least this gap */
  .about .grid { margin-top: calc(var(--b) * var(--about-group, 3)); padding-top: 0; grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--b) * var(--about-group, 3)); }
  .about .a-lists, .about .a-c3, .about .a-c4, .about .a-contact { grid-column: 1; grid-row: auto; }
  .about .a-lists   { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--b) * var(--about-group, 3)); }
  .about .a-clients ul { font-size: 1.15em; line-height: 1.2; }
  .about .a-clients li { display: inline; }
  .about .a-clients .cm { display: inline; }
  .about .a-side    { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); }
  .about .a-side > * + * { margin-top: 0; }
  .about .a-services ul { column-count: 2; column-gap: var(--g); }
  .about .a-contact { margin-top: max(0px, calc(var(--about-gap-bottom, 18vh) - var(--b) * var(--about-group, 3))); }   /* the row gap is part of it */
  .about .mail, .about .a-socials { font-size: 1.7em; }
  .about .a-soc-lbl { margin-top: calc(var(--b) * var(--about-block, 2)); }
  /* the copyright moves here (js/about.js): last thing on the page, centred */
  .about > .a-copy { margin: auto 0 0; padding-top: calc(var(--b) * var(--about-group, 3)); text-align: center; font-size: 0.5em; }
}
@media (max-width: 520px) { .nav-tag { display: none; } }

/* ---------- without js: everything simply stacks ---------- */
html.no-js .field .sp { position: static; display: inline-block; width: 22vw; height: 16vw; margin: 1vw; }
html.no-js .field .sp .pop, html.no-js .field .sp img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.no-js .field { position: static; padding: var(--row2) var(--m) 0; text-align: center; }
html.no-js .landing { height: auto; }
html.no-js .statement { position: static; transform: none; margin: var(--row2) auto; }
html.no-js .project { height: auto; content-visibility: visible; padding: var(--m); }
html.no-js .pinfo { position: static; width: auto; height: auto; clip: auto; white-space: normal; user-select: text; -webkit-user-select: text; text-align: center; margin-bottom: var(--m); }
html.no-js .stage { position: static; }
html.no-js .layout { position: static; visibility: visible; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); margin-bottom: var(--g); }
html.no-js .m { position: relative; width: 30vw; }
html.no-js .zone, html.no-js .info { display: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }