/* bointeriors — site styles
   Layout and motion follow the reference site, measured at 1440 x 900 (1 unit = 60px = 4.1667vw).
   Brand: burgundy #4E2A31 only on o-shaped elements; the logo is the master cut-out, never altered. */

@font-face{font-family:"Italiana";font-weight:400;font-display:swap;src:url(/assets/fonts/italiana-regular.woff2) format("woff2")}
@font-face{font-family:"TT";font-weight:300;font-display:swap;src:url(/assets/fonts/ttnorms-light.woff2) format("woff2")}
@font-face{font-family:"TT";font-weight:400;font-display:swap;src:url(/assets/fonts/ttnorms-regular.woff2) format("woff2")}
@font-face{font-family:"TT";font-weight:500;font-display:swap;src:url(/assets/fonts/ttnorms-medium.woff2) format("woff2")}

:root{
  --bg:#F0F0F0; --fg:#141414; --dk:#141414; --dk-fg:#F0F0F0; --o:#4E2A31;
  --line:rgba(20,20,20,.16);
  --serif:"Italiana","Didot","Bodoni 72",serif;
  --sans:"TT","Helvetica Neue",Arial,sans-serif;
  --g:max(20px,4.1667vw);                 /* 60px gutter */
  --f:clamp(13px,1.0417vw,17px);          /* 15px body */
  --fs:clamp(11px,.8333vw,14px);          /* 12px labels */
  --h-s:16vw;                             /* 230px serif title: nearly the width of the page, as on the reference site (owner, 2026-11-02) */
  --h-g:13.8vw;                           /* 199px grotesk title */
  --t1:7.25vw;                            /* 104px list titles */
  --t2:6.25vw;                            /* 90px marquee grotesk */
  --lead:clamp(24px,3.125vw,54px);        /* 45px lead */
  --vh:1vh;                               /* 1svh where it exists, see below */
  --ease:cubic-bezier(.32,.94,.6,1);
  --io:cubic-bezier(.76,0,.24,1);
  --out:cubic-bezier(.19,1,.22,1);
  color-scheme:light;
}
html[data-page="dark"],html[data-mode="dark"]{--bg:#141414;--fg:#F0F0F0;--line:rgba(240,240,240,.18);color-scheme:dark}
html[data-mode="dark"]{--dk:#0B0B0B}
/* svh written inside var() or a custom property is not checked when the css is read: browsers without it would drop the
   whole value, so those rules use var(--vh), which is vh there */
@supports (height:1svh){:root{--vh:1svh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:var(--f);
  letter-spacing:-.01em;line-height:1.35;-webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background-color .6s var(--io),color .6s var(--io)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
img{display:block;max-width:100%}
/* pictures stay on the page (owner, 2026-11-03): pictures, drawings and the canvases (the 3D stand, the phone flip-book)
   are never dragged out or selected, and a long press on iOS opens no save or preview menu; site.js keeps the right-click
   menu off them. Text and links keep their own */
img,picture,video,canvas{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* a picture inside a link (the circle's slides, the header logo) lets the pointer through to its link, as the gallery's
   cards already do: a right click or a long press opens the link's own menu, never the picture's; and the link is not
   dragged out either, since the browser would carry the picture along in it (owner, 2026-11-03) */
a :is(img,picture,video,canvas){pointer-events:none}
a:has(img,picture,video,canvas){-webkit-user-drag:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:400}
::selection{background:var(--fg);color:var(--bg)}
.s-dark ::selection{background:var(--dk-fg);color:var(--dk)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
#main:focus{outline:none}
.skip{position:fixed;left:-999px;top:8px;z-index:200;background:var(--fg);color:var(--bg);padding:8px 12px;font-size:var(--fs)}
.skip:focus{left:8px}

/* ---------- labels, pills, underline links ---------- */
.pill{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:99px;padding:.22em .8em .18em;
  font-size:var(--fs);line-height:1.1;text-transform:uppercase;transition:background .4s,color .4s}
.pill:hover{background:var(--fg);color:var(--bg)}
.s-dark .pill:hover{background:var(--dk-fg);color:var(--dk)}
.mode-l{display:none}
html[data-mode="dark"] .mode-l{display:inline}
html[data-mode="dark"] .mode-d{display:none}
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:left;transition:transform .7s var(--io)}
.ul:hover::after{animation:ulr .9s var(--io)}
@keyframes ulr{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* ---------- the o: buttons and dots ---------- */
.o-btn{--s:60px;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;flex:0 0 auto;
  background:var(--o);color:#F0F0F0;transition:transform .7s var(--ease)}
.o-btn svg{width:32%;height:32%;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible}
a:hover>.o-btn,button:hover>.o-btn,.o-btn:hover{transform:scale(1.1)}
.o-sm{--s:40px}.o-md{--s:60px}
.o-xl{--s:120px;font-size:var(--fs);text-transform:uppercase;letter-spacing:0}
.o-up svg{transform:rotate(-90deg)}
.o-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--o)}

/* ---------- header ---------- */
.hd-logo{position:fixed;z-index:40;top:calc(var(--g)*.55);left:var(--g);display:block;--lw:clamp(130px,14vw,224px);width:var(--lw);
  transition:transform .8s var(--ease),opacity .6s var(--io)}
.hd-logo img{width:100%;height:auto}
/* the icon is the extended logo's own 'bo' (export.py bo_matched): sized and set off from the extended logo's width so
   the 'bo' stays exactly where it is when one replaces the other (.35846 of the width; .00141 / .00199 in from its corner) */
.hd-logo .lg-ico{display:none;width:calc(var(--lw) * .35846);translate:calc(var(--lw) * .00141) calc(var(--lw) * .00199)}
/* the extended master on light grounds at the top; the icon master once scrolled, on dark pages and in dark mode */
html.is-scrolled .hd-logo .lg-ext,html[data-page="dark"] .hd-logo .lg-ext,html[data-mode="dark"] .hd-logo .lg-ext{display:none}
html.is-scrolled .hd-logo .lg-ico,html[data-page="dark"] .hd-logo .lg-ico,html[data-mode="dark"] .hd-logo .lg-ico{display:block}
/* never over photography, and out of the way of the footer */
html.hd-hide .hd-logo{transform:translateY(calc(-100% - var(--g)));pointer-events:none}
/* touch screens: the menu steps aside too while text passes under it (site.js textUnder) */
html.hd-hide-nav:not(.menu-open) .hd-nav{transform:translateY(calc(-100% - var(--g)*2));pointer-events:none}
.hd-tools{position:absolute;z-index:40;top:calc(var(--g)*.85);left:72.5vw;display:flex;gap:8px;align-items:center;transition:opacity .6s var(--io)}
html.is-leaving .hd-tools{opacity:0}
.hd-tools .pill{position:relative}
.mi{display:inline-block;flex:0 0 auto;width:.9em;height:.9em;margin-right:.5em;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
html[data-mode="dark"] .mi{background:linear-gradient(90deg,transparent 50%,currentColor 50%)}
.nav-mode{display:inline-flex;align-items:center;margin-top:16px;font-size:var(--fs);text-transform:uppercase}
.hd-nav{position:fixed;z-index:50;top:calc(var(--g)*.78);right:calc(var(--g)*.5);width:8.33vw;min-width:110px;transition:transform .8s var(--ease)}
@media (min-width:768px){html.ft-over .hd-nav{transform:translateY(calc(var(--g)*-2));pointer-events:none}}
.nav-ul li{overflow:hidden}
.nav-ul a{display:block;position:relative;width:max-content;font-size:var(--f);line-height:1.2;text-transform:uppercase;
  transition:transform .8s var(--io);transition-delay:calc(var(--n,0)*50ms)}
.nav-ul li:nth-child(2) a{--n:1}.nav-ul li:nth-child(3) a{--n:2}.nav-ul li:nth-child(4) a{--n:3}
.hd-nav .u{position:absolute;left:0;right:0;bottom:.08em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--io)}
.hd-nav a:hover .u,.hd-nav a.on .u{transform:scaleX(1);transform-origin:left}
html.is-scrolled .nav-ul a{transform:translateY(-110%)}
.nav-menu{position:absolute;right:0;top:0;z-index:2;padding:.28em .85em .22em;border-radius:99px;background:var(--fg);color:var(--bg);
  font-size:var(--fs);line-height:1.1;text-transform:uppercase;opacity:0;transform:translateY(-8px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--io),transform .6s var(--io),background .4s,color .4s}
html.is-scrolled .nav-menu{opacity:1;transform:none;pointer-events:auto}
.nav-panel{position:absolute;right:0;top:0;width:180px;padding:48px 24px 22px;border-radius:30px;background:var(--dk);color:var(--dk-fg);
  clip-path:inset(0 0 calc(100% - 26px) calc(100% - 70px) round 30px);opacity:0;pointer-events:none;
  transition:clip-path .8s var(--io),opacity .3s .5s}
.nav-panel li{overflow:hidden}
.nav-panel ul a{transform:translateY(110%);transition:transform .7s var(--ease);transition-delay:calc(var(--n,0)*50ms)}
.nav-panel li:nth-child(2) a{--n:1}.nav-panel li:nth-child(3) a{--n:2}.nav-panel li:nth-child(4) a{--n:3}
html.menu-open .nav-panel ul a{transform:none}
.nav-panel ul a{display:block;font-size:var(--f);text-transform:uppercase;line-height:1.5;position:relative;width:max-content}
.nav-lang{display:flex;gap:14px;margin-top:22px;font-size:var(--fs);text-transform:uppercase}
.nav-lang button{opacity:.5;border:1px solid transparent;border-radius:99px;padding:.15em .6em}.nav-lang button.on{opacity:1;border-color:currentColor}
html.menu-open .nav-panel{clip-path:inset(0 round 30px);opacity:1;pointer-events:auto;transition:clip-path .8s var(--io),opacity 0s}
/* over black bands the header turns light; over a light band in dark mode it turns dark */
html.hd-dark .nav-menu{background:var(--dk-fg);color:var(--dk)}
html.hd-dark .nav-ul a{color:var(--dk-fg)}
html.hd-light .nav-menu{background:#141414;color:#F0F0F0}
html.hd-light .nav-ul a{color:#141414}
html.menu-open .nav-menu{background:var(--dk-fg);color:var(--dk)}

/* ---------- cursor: the burgundy o ---------- */
.cursor{position:fixed;left:0;top:0;z-index:120;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;display:none}
html.has-cursor .cursor{display:block}
.cur-dot{position:absolute;inset:0;border-radius:50%;background:var(--o);transform:scale(.5);transition:transform .6s var(--ease)}
.cursor.is-link .cur-dot{transform:scale(.14)}
.cursor.is-view .cur-dot{transform:scale(1)}   /* 60px, as the drag's (owner, 2026-11-03; it was 75) */
.cursor.is-big .cur-dot{transform:scale(2)}
.cursor.is-big.is-drag .cur-dot{transform:scale(1)}   /* the projects gallery's drag: 60px; 120, then 84, read too big (owner, 2026-11-03) */
/* on dark grounds the o keeps a faint light rim, like the cut-out icon master on black */
/* no light rim on dark grounds: the owner did not want it (2026-11-03) */
.cursor.is-hidden .cur-dot,.cursor.on-o .cur-dot{transform:scale(0)}
.cur-lbl{position:absolute;inset:0;display:grid;place-items:center;color:#F0F0F0;font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .5s var(--ease)}
.cursor.is-big .cur-lbl,.cursor.is-view .cur-lbl{opacity:1;transform:none}

/* ---------- page veil (transitions) ---------- */
.veil{position:fixed;inset:0;z-index:30;background:var(--veil,#F0F0F0);opacity:0;pointer-events:none;transition:opacity .55s var(--io)}
html.is-leaving .veil{opacity:1;pointer-events:auto}
html.is-leaving .hthumb{opacity:0}

/* ---------- reveal primitives ---------- */
.c{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0;margin:-.08em 0}
.c i{display:inline-block;font-style:normal;transform:translate3d(0,112%,0);
  transition:transform 1.25s var(--out);transition-delay:calc(var(--d,0s) + var(--ci,0)*24ms)}
.w{display:inline-block;white-space:nowrap}
[data-split].in .c i,[data-words].in .c i{transform:none}
[data-words] .c i{transition-delay:calc(var(--d,0s) + var(--ci,0)*14ms)}
:is(.ph-t,.sp-t,.ft-next-t,.bl-t,.hh-t)[data-split] .l,.cred-t[data-split]{perspective:25vw}
:is(.ph-t,.sp-t,.ft-next-t,.bl-t,.hh-t,.cred-t)[data-split] .w{transform:rotateX(-90deg);transform-origin:center bottom;transition:transform 1.2s cubic-bezier(.26,1,.48,1);transition-delay:var(--d,0s)}
:is(.ph-t,.sp-t,.ft-next-t,.bl-t,.hh-t,.cred-t)[data-split].in .w{transform:none}
:is(.ph-t,.sp-t,.ft-next-t,.bl-t,.hh-t,.cred-t)[data-split] .c i{transition:transform 1.2s cubic-bezier(.26,1,.48,1);transition-delay:calc(var(--d,0s) + var(--ci,0)*25ms)}
.fa-t .l{perspective:25vw}
.fa-t .w{transform:rotateX(-90deg);transform-origin:center bottom;transition:transform .8s var(--ease)}
.fa-t.in .w{transform:none}
.fa-t .c i{transition:transform .8s var(--ease);transition-delay:calc(var(--ci,0)*25ms)}
html.js [data-fade]{opacity:0;translate:0 22px;transition:opacity 1.1s var(--out),translate 1.3s var(--out);transition-delay:var(--d,0s)}
html.js [data-fade].in{opacity:1;translate:none}
html.js [data-split]:not(.is-split),html.js [data-words]:not(.is-split){visibility:hidden}
.bd{display:block;height:1px;background:currentColor;opacity:.9}
html.js .bd{transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--io)}
html.js .bd.in{transform:none}

/* media: clip-path lives on the child so the observer keeps seeing the parent */
.m-in{position:relative;overflow:hidden}
html.js .m-in{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--io)}
html.js .m.in .m-in,html.js .ab-por.in .m-in{clip-path:inset(0)}
html.js .m img,html.js .ab-por img{transform:scale(1.14);transition:transform 2.2s var(--out)}
/* photos settle after the reveal; full-bleed photos keep the slight zoom that covers their parallax travel */
html.js .m.in:not(.m-full) img,html.js .ab-por.in img{transform:none}
/* drawings and sketches on white melt into the page: multiply needs an opaque parent of the same colour */
.mul .m-in,.ps.mul,.ps.mul .rv{background:var(--bg)}
/* a drawing's outermost pixel row is blank paper: leaving it out keeps a hairline from showing at the box's edge */
.mul .m-in img{clip-path:inset(1px)}
/* those grounds follow the page's own fade when the mode changes, so the stage never flashes ahead of it */
.ps.mul,.ps-r{transition:opacity .9s var(--io),background-color .6s var(--io)}
.ps.mul .rv,.mood,.mul .m-in{transition:background-color .6s var(--io)}
html.js .mul .m-in{transition:clip-path 1.5s var(--io),background-color .6s var(--io)}
.mul img{mix-blend-mode:multiply}
html[data-mode="dark"] .mul img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}

/* ---------- section titles (small, centred, with the rule) ---------- */
.sec-h{position:relative;padding:0 var(--g);text-align:center}
.sec-t{min-height:calc(var(--g)*2);display:flex;flex-direction:column;justify-content:center;align-items:center;
  font-size:var(--f);line-height:1.2;text-transform:uppercase}
.sec-t .l{display:block;font-family:var(--sans);font-size:var(--f);letter-spacing:-.01em;line-height:1.2}
.sec-sw{display:flex;align-items:center;justify-content:center;height:calc(var(--g)*2);margin-top:calc(var(--g)*1.67)}
.sec-sup{font-size:var(--fs);text-transform:uppercase}
.sec-r,.sec-l{position:absolute;bottom:12px;font-size:var(--fs);text-transform:uppercase}
.sec-r{right:var(--g)}.sec-l{left:var(--g)}

/* serif and grotesk display lines */
.l{display:block}
/* language switch: the changing head-title rows fold back on their bottom edge (lang-fold), are rebuilt folded down
   (lang-hide), then fold up with the arrival motion, one row after another (lang-in); the brand line steps out meanwhile */
:is(.hh-t,.sp-t)[data-split] .l.lang-fold .w{transform:rotateX(-90deg);transition:transform .42s cubic-bezier(.55,0,.45,1);transition-delay:var(--row,0s)}
:is(.hh-t,.sp-t)[data-split] .l.lang-fold .c i{transform:translate3d(0,112%,0);transition:transform .38s cubic-bezier(.55,0,.45,1);transition-delay:calc(var(--row,0s) + var(--ci,0)*10ms)}
:is(.hh-t,.sp-t)[data-split] .l.lang-hide .w{transform:rotateX(-90deg);transition:none}
:is(.hh-t,.sp-t)[data-split] .l.lang-hide .c i{transform:translate3d(0,112%,0);transition:none}
:is(.hh-t,.sp-t)[data-split] .l.lang-in{--d:var(--row,0s)}
.l-s{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;text-transform:uppercase}
.l-g{font-family:var(--sans);font-weight:400;letter-spacing:-.035em;text-transform:uppercase}

/* dark bands */
.s-dark{background:var(--dk);color:var(--dk-fg);transition:background-color .6s var(--io)}

/* ================================================================== HOME */
.hh{position:relative;height:100vh;height:100svh;min-height:480px}
/* the title block is as wide as its longest row and centred on the page;
   rows one and three end on the same right edge, row two starts on the left */
.hh{--hd:calc(var(--g)*.78 + var(--f)*4.8);--cd:max(200px,22.7vw)}     /* header bottom (the nav's last line), circle diameter */
/* centred between the header and the circle's label, whatever the screen height */
/* the title sits midway between the header and the 'projects' label above the circle */
.hh-mid{position:absolute;left:calc(50% + var(--hx,0px));top:calc((var(--hd) + 100*var(--vh) - var(--cd) / 2 - 12px - var(--fs) * 1.35) / 2);transform:translate(-50%,-50%);display:grid;grid-template-columns:max-content}
.hh-mid.hx-back{transition:left .9s var(--io)}
.hh-t{display:contents}
.hh-t .l{grid-column:1;white-space:nowrap}
.hh-t .l:nth-child(1){grid-row:1;text-align:right}
.hh-t .l:nth-child(2){grid-row:2;text-align:left}
.hh-t .l:nth-child(3){grid-row:3;text-align:right}
.hh-t .l-s{font-size:min(var(--h-s),23*var(--vh));line-height:.8}
.hh-t .l-g{font-size:min(var(--h-g),19.8*var(--vh));line-height:.94;margin:.02em 0 .05em}
/* the brand line, one word per row, centred between the first and the last row, the words ending under the y of 'thoughtfully' */
.hh-tag{grid-row:2;grid-column:1;justify-self:end;align-self:center;display:flex;flex-direction:column;text-align:right;font-size:var(--fs);line-height:1.3;letter-spacing:-.01em;text-transform:uppercase}
.hh-where{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:var(--fs);text-transform:uppercase;white-space:nowrap}
.hh-clock{position:absolute;left:var(--g);bottom:6%;display:flex;gap:.6em;font-size:var(--fs);text-transform:uppercase;font-variant-numeric:tabular-nums}
.pk-count{position:absolute;left:68.75vw;bottom:6%;font-size:var(--fs);font-variant-numeric:tabular-nums;white-space:nowrap}
.roll{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom;line-height:1.2}
.roll span{display:block;transition:transform .9s var(--io);transform:translateY(calc(var(--r,0)*-100%))}
/* a circle with the arch's perimeter, cut exactly in half by the fold: half in the opening, half in the next section */
.pk{position:absolute;right:var(--g);bottom:calc(var(--cd) / -2);width:var(--cd);z-index:2}
.pk-head{text-align:center;padding-bottom:12px;font-size:var(--fs);text-transform:uppercase}
.pk-win{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--line);isolation:isolate;transform:translateZ(0)}
/* the wipe: the slide rises into the circle while its picture is held back by as much, so the picture stays put and
   only its edge moves. Two transforms the compositor plays however busy the page is; the clip-path wipe was redrawn by
   the page every frame and stuttered on the iphone's first load (owner, 2026-11-02: 'not 100% fluid') */
.pk-s{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,100%,0);transition:transform 1.25s var(--io);will-change:transform}
.pk-s.was{transform:none;z-index:1}
.pk-s.on{transform:none;z-index:2}
.pk-s img{width:100%;height:100%;object-fit:cover;translate:0 -100%;transform:scale(1.3) translateY(6%);transition:transform 2.4s var(--out),translate 1.25s var(--io);will-change:transform}
.pk-s.on img,.pk-s.was img{translate:none}
.pk-s.on img{transform:scale(1.08)}
.pk-win:hover .pk-s.on img{transform:scale(1.02)}
/* the arrow keeps to the corner of the circle that shows above the fold */
.pk-next{position:absolute;right:0;bottom:calc(var(--cd) - 60px);z-index:3;transform:translate(0,0)}

.s-what{padding:calc(var(--g)*3) 0 calc(var(--g)*4.5);text-align:center;min-height:100vh}
.lead-xl{width:66.67vw;margin:calc(var(--g)*.7) auto calc(var(--g)*1);font-size:var(--lead);line-height:1.2;letter-spacing:-.04em;text-wrap:balance}

/* ---------- process: concept, plan, elevation, render ---------- */
.s-proc{padding-top:calc(var(--g)*3)}
.proc{position:relative;height:652vh}
.proc-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:31vw 1fr;gap:var(--g);align-items:center;padding:calc(var(--g)*1.2) var(--g) var(--g)}
.proc-n{font-size:var(--fs);font-variant-numeric:tabular-nums}
.proc-words{height:calc(var(--t1)*.84);overflow:hidden;margin:calc(var(--g)*.35) 0 calc(var(--g)*.5)}
.proc-wr{transition:transform 1.1s var(--io);transform:translateY(calc(var(--s,0)*var(--t1)*-.84))}
.proc-wr span{display:block;height:calc(var(--t1)*.84);font-family:var(--serif);font-size:calc(var(--t1)*.86);line-height:1;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.proc-caps{position:relative;min-height:7.5em}
.proc-cap{position:absolute;inset:0 auto auto 0;max-width:24em;font-size:var(--f);line-height:1.45;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .9s var(--out)}
.proc-cap.on{opacity:1;transform:none;transition-delay:.15s}
.proc-bar{position:relative;height:1px;margin-top:calc(var(--g)*.4);background:var(--line)}
.proc-bar i{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(var(--p,0))}
.proc-stage{position:relative;height:72vh;height:72svh}
/* each step is the drawing exactly as exported from the pdf; drawings on white multiply into the page */
.ps{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .9s var(--io)}
.ps.on{opacity:1}
.ps .rv{position:relative;display:block;line-height:0;max-width:100%}
.ps img{display:block;max-width:100%;max-height:72vh;max-height:72svh;width:auto;height:auto;object-fit:contain}
/* plan: drawn left to right; section: rises from the ground; 3d model: assembles along the diagonal */
.ps-sweep-x img{clip-path:inset(0 calc((1 - var(--k,0))*100%) 0 0)}
.ps-sweep-y img{clip-path:inset(calc((1 - var(--k,0))*100%) 0 0 0)}
.ps-sweep-d img{clip-path:polygon(0 0,calc(var(--k,0)*150%) 0,calc(var(--k,0)*150% - 50%) 100%,0 100%)}
/* section beside the words: its ground line on the progress line, sized so the tent tips meet the top of the word (site.js) */
.ps.seat .rv{position:absolute;left:50%;top:var(--sy);max-width:none;translate:-50% 0}
.ps.seat img{height:var(--sh);width:auto;max-width:none;max-height:none}
/* step 04 live: the canvas fills the stage, the drawing underneath gives way once the model is ready;
   the model draws its own dark mode (dark clay, dark shadows), so the canvas is never inverted */
.ps .gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--io)}
.ps.gl-on .gl{opacity:1}
.ps.gl-on .rv{opacity:0;transition:opacity .8s var(--io)}
/* the phone's flip-book steps out when the mode changes (site.js standFrames), quickly, before the page's ground has
   moved far from the one its frames were drawn for; the drawing stays hidden, and the stand fades back in as above */
.ps .gl.gl-out{opacity:0;transition:opacity .2s ease-out}
/* and where the new look cannot come, the drawing fades back in for it (phones only) */
.ps.fb .rv{transition:opacity .8s var(--io),background-color .6s var(--io)}
.scan{position:absolute;pointer-events:none;background:var(--fg);opacity:calc(min(var(--k,0)*12,(1 - var(--k,0))*12,1)*.55)}
.ps-sweep-x .scan{top:0;bottom:0;width:1px;left:calc(var(--k,0)*100%)}
.ps-sweep-y .scan{left:0;right:0;height:1px;top:calc((1 - var(--k,0))*100%)}
/* research: the owner's four references mashed up into one board */
.ps-r{display:block;container-type:size;background:var(--bg)}
/* the board keeps its 5:4 proportions whatever the stage: as wide as it fits, centred */
.mood{position:absolute;left:50%;top:50%;width:100%;width:min(100cqw,125cqh);aspect-ratio:5/4;translate:-50% -50%;background:var(--bg)}
/* the pictures are laid down one after another over the step (--d: when each starts), each wiped in from its own side
   while it settles a little; they multiply into the ground like the drawings (the board is their opaque ground:
   its translate makes it a group of its own) */
.mood-i{position:absolute;margin:0;mix-blend-mode:multiply;--p:clamp(0,(var(--k,0) - var(--d)) / .3,1);
  transform:translate3d(calc((1 - var(--p)) * var(--dx,0cqw)),calc((1 - var(--p)) * var(--dy,0cqw)),0)}
.mood-im{display:block;overflow:hidden}
.ps .mood-im img{width:100%;height:auto;max-width:none;max-height:none;transform:scale(calc(1.08 - var(--p) * .08))}
.mood-dunes{left:0;top:19%;width:64%;--d:0;--dx:-2cqw}
.mood-dunes .mood-im{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.mood-fibres{left:58%;bottom:36%;width:37%;--d:.23;--dy:-2cqw}
.mood-fibres .mood-im{clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}
.mood-marble{left:18%;top:67%;width:12%;--d:.46;--dy:2cqw}
.mood-marble .mood-im{clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0)}
.mood-landscape{left:46%;top:67%;width:21%;--d:.7;--dx:2cqw}
.mood-landscape .mood-im{clip-path:inset(0 0 0 calc((1 - var(--p)) * 100%))}
/* the credits, smaller than the labels (9px at 1440): over the dunes, down the side of the fibres */
.mood-cr{position:absolute;font-size:clamp(9px,.625vw,11px);line-height:1.2;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;opacity:var(--p)}
.mood-dunes .mood-cr{left:0;bottom:calc(100% + .8em)}
.mood-fibres .mood-cr{left:calc(100% + .7em);top:0;writing-mode:vertical-rl}
/* dark: the photographs keep their light (people never turn into negatives), a little lowered into the ground */
html[data-mode="dark"] .mood-i{mix-blend-mode:normal}
html[data-mode="dark"] .mood-im img{filter:brightness(.82)}
/* render: shown whole, it settles in */
.ps-4 img{transform:scale(1.06);transition:transform 2.2s var(--out)}
.ps-4.on img{transform:none}

/* ---------- selected projects ---------- */
.s-feat{padding-top:calc(var(--g)*3)}
.feat{padding:0 var(--g)}
.fa{display:block;position:relative;padding:calc(var(--g)*1.2) 0 calc(var(--g)*1.15);text-align:left}
.fa-n{position:absolute;left:calc(var(--g)*2);top:calc(var(--g)*1.2 + 1.2em);font-size:var(--fs);font-variant-numeric:tabular-nums}
.fa-t{display:block;padding-left:calc(var(--g)*3);font-family:var(--serif);font-size:var(--t1);line-height:.86;letter-spacing:-.02em;text-transform:uppercase}
.fa-t .l{display:block}
.fa-t,.fa-n{transition:transform .6s var(--ease)}
.fa-m{position:absolute;right:calc(var(--g)*2);top:calc(var(--g)*1.2);margin:0;overflow:hidden;font-size:var(--fs);text-transform:uppercase}
.fa-m>span{display:block;transform:translateY(105%);transition:transform .6s var(--ease)}
.fa .bd{position:absolute;left:0;right:0;bottom:0}
@media (hover:hover){.fa:hover .fa-t,.fa:hover .fa-n{transform:translateX(calc(var(--g)*-2))}.fa:hover .fa-m>span{transform:none}}
@media (hover:none){.fa-m>span{transform:none}}
.hthumb{position:fixed;left:0;top:0;z-index:70;width:33.33vw;aspect-ratio:3/2;margin:-11.11vw 0 0 40px;overflow:hidden;
  pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .45s var(--io),transform .7s var(--ease)}
.hthumb.left{margin-left:calc(-33.33vw - 40px)}
.hthumb.on{opacity:1;transform:scale(1)}
.hthumb.flip{opacity:0;transition:opacity .16s var(--io),transform .7s var(--ease)}
/* a drawing as preview: no white box, it multiplies into the ground like the drawings on the page */
.hthumb.mul{mix-blend-mode:multiply}
.hthumb.mul.dk{mix-blend-mode:screen}
.hthumb.mul.dk img{filter:invert(1) hue-rotate(180deg)}
.hthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.hthumb img.on{opacity:1}

/* ---------- territory and fields: marquees ---------- */
.s-terr{padding:0 0 calc(var(--g)*4.5)}
.s-terr .sec-h{padding-top:calc(var(--g)*1.5)}
.mq{overflow:hidden;white-space:nowrap;line-height:1}
.s-terr .sec-h+.mq,.p-field .sec-h+.mq{margin-top:var(--g)}
.mq-in{display:inline-flex;will-change:transform}
.mq-g{display:inline-flex;align-items:center;flex:0 0 auto}
.mq-w{font-family:var(--serif);font-size:var(--t1);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;padding:0 .22em}
.mq-g2 .mq-w{font-family:var(--sans);font-size:var(--t2);letter-spacing:-.035em}
.mq-o{display:inline-block;flex:0 0 auto;width:calc(var(--t1)*.22);height:calc(var(--t1)*.22);border-radius:50%;background:var(--o)}
.mq-g2 .mq-o{width:calc(var(--t2)*.2);height:calc(var(--t2)*.2)}

/* ---------- footer ---------- */
.ft{padding-top:calc(var(--g)*1);min-height:100vh;display:flex;flex-direction:column}
.ft>.bd{margin:0 var(--g)}
.ft-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--g);padding:0 var(--g);min-height:calc(var(--g)*2)}
.ft-l{justify-self:start}.ft-r{justify-self:end}
.ft-c .sec-h{padding:0}
.ft-c .sec-h .bd{display:none}
.ft-top{display:inline-flex;align-items:center;gap:14px;font-size:var(--f);text-transform:uppercase}
.ft-cta{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--g)*.5);padding:calc(var(--g)*2) var(--g)}
.ft-big{display:block;text-align:center}
.ft-cta>.ft-big,.ft-cta>.ft-next{align-self:stretch}
.ft-big .l{font-size:var(--h-g);line-height:.9}
.ft-mail{display:inline-flex;gap:2.4em;font-size:var(--fs);text-transform:uppercase}
.ft-mail-k{opacity:.6}
.ft-next{display:block;text-align:center}
.ft-next .l-s{font-size:var(--h-s);line-height:.84}
.ft-next .l-g{font-size:var(--h-g);line-height:.9}
.ft-bot{font-size:var(--fs);text-transform:uppercase;padding-bottom:calc(var(--g)*.4);min-height:calc(var(--g)*1.6)}

/* ================================================================== PROJECTS (dark) */
.pj{position:relative;height:100vh;height:100svh;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pj-clip{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 110px,#000 150px);mask-image:linear-gradient(180deg,transparent 0,transparent 110px,#000 150px)}
/* the gallery's unit is the width, capped by the height on short wide windows (900px tall and up unchanged) */
.pj{--u:min(1vw,2.79*var(--vh) - 8.4px)}
.pj-rot{position:absolute;left:calc(50% - 62*var(--u));top:50%;width:calc(124*var(--u));transform:translateY(-50%) rotate(15deg);transform-origin:50% 50%}
/* room at both ends so the first and last names and titles read in full */
.pj-track{display:flex;align-items:center;gap:calc(6.5*var(--u));padding:0 calc(30*var(--u)) 0 calc(25*var(--u));width:max-content;will-change:transform}
.pc{position:relative;flex:0 0 auto;width:calc(23.33*var(--u));aspect-ratio:2/3}
.pc:nth-child(odd){margin-top:calc(5*var(--u))}
.pc:nth-child(even){margin-bottom:calc(5*var(--u))}
.pj a,.pj img{-webkit-user-drag:none}
.pc:hover,.pc:has(a:focus-visible){z-index:3}
html.js .pc{opacity:0;transform:translate3d(70vw,0,0)}
html.js .pj.in .pc{opacity:1;transform:translate3d(0,0,0) skewX(var(--sk,0deg));transition:transform 1.8s var(--out),opacity 1s var(--io);transition-delay:calc(var(--i)*70ms)}
html.js .pj.in.ready .pc{transition:transform .5s var(--out)}
.pc a{position:absolute;inset:0;display:block}
.pc-img{position:absolute;inset:0;overflow:hidden;background:#222}
.pc-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);transform:scale(1.06);transition:filter .9s var(--io),transform 1.4s var(--out);pointer-events:none}
.pc:hover .pc-img img,.pc:has(a:focus-visible) .pc-img img{filter:none;transform:scale(1)}
.pc-ov{position:absolute;inset:0;pointer-events:none;color:#F0F0F0}
.pc-t{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-15deg);white-space:nowrap;text-align:center;z-index:2}
.pc-t .l-s{font-size:calc(7.25*var(--u));line-height:.86}
.pc-t .l-g{font-size:calc(6.25*var(--u));line-height:.9}
.pc-t .c i{transition-duration:.9s}
.pc:hover .pc-t .c i,.pc:has(a:focus-visible) .pc-t .c i{transform:none}
.pc-y{position:absolute;left:calc(100% + 10px);top:0;writing-mode:vertical-rl;font-size:11px;letter-spacing:.02em;opacity:0;transition:opacity .5s}
.pc-n{position:absolute;left:0;top:calc(100% + 10px);font-size:11px;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .5s}
.pc:hover .pc-y,.pc:hover .pc-n,.pc:has(a:focus-visible) .pc-y,.pc:has(a:focus-visible) .pc-n{opacity:1}
/* a third-party card picture's credit, under the card on the right, small like the moodboard credits */
.pc-cr{position:absolute;right:0;top:calc(100% + 11px);font-size:9px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .5s}
.pc:hover .pc-cr,.pc:has(a:focus-visible) .pc-cr{opacity:1}
.pc-o{position:absolute;right:6%;bottom:5%;transform:scale(0);transition:transform .7s var(--ease);pointer-events:auto}
.pc:hover .pc-o,.pc:has(a:focus-visible) .pc-o{transform:scale(1)}
.pj-prog{position:absolute;z-index:5;top:calc(var(--g)*.85);left:50%;transform:translateX(-50%);font-size:var(--fs);font-variant-numeric:tabular-nums}
.pj-map{position:absolute;z-index:5;left:var(--g);bottom:calc(var(--g)*.6);display:flex;gap:8px;align-items:center}
.pj-map i{display:block;width:8px;height:12px;border-radius:2px;background:currentColor;opacity:.12;transition:opacity .4s}
.pj-map i:nth-child(even){translate:0 -2.4px}
.pj-map i:nth-child(odd){translate:0 2.4px}
.pj-map i.on{opacity:1}
.pj-map b{position:absolute;top:-14px;height:40px;left:-6px;width:20px;border:1px solid currentColor;border-radius:4px;transition:left .35s var(--ease),width .35s var(--ease)}
.pj-drag{position:absolute;z-index:5;right:var(--g);bottom:calc(var(--g)*.6);font-size:var(--fs);text-transform:uppercase}

/* touch screens of any width: nothing hovers, so every card shows its title, name, year and arrow (owner, 2026-11-02) */
@media (hover:none){
  .pc-n{font-size:12px}
  .pc-img img{filter:grayscale(1) brightness(.6)}
  .pc.focus .pc-y,.pc.focus .pc-n,.pc.focus .pc-cr{opacity:1}   /* the name under comes with the title over (owner) */
  /* the cards are narrower here: a credit takes the line under the name instead of running into it (owner, 2026-11-02) */
  .pc-cr{top:calc(100% + 30px)}
  /* the card nearest the middle (site.js) shows its title, its colour and its arrow, like a hovered card */
  .pc.focus{z-index:3}
  .pc.focus .pc-t .c i{transform:none}
  .pc.focus .pc-o{transform:scale(1)}
  .pc.focus .pc-img img{filter:none;transform:scale(1)}
  .pj a,.pj img{-webkit-touch-callout:none}
  .pj{touch-action:none}
}
/* touch: no grey tap flash over whole cards and rows; the few controls get room for a finger */
a,button{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  :root{--f:clamp(15px,1.3vw,17px);--fs:clamp(12px,1vw,14px)}
  .nav-ul a{padding:.3em 0}
  .pc-cr{font-size:11px}
}
/* the notch and the home indicator (viewport-fit=cover): the fixed corners keep clear of them */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px)}
/* a phone turned sideways: the page's own gutter widens to clear the dynamic island (owner, 2026-11-02); the insets are
   zero everywhere else, so nothing else moves (phones upright keep their 20px below) */
:root{--g:max(20px,4.1667vw,var(--sl),var(--sr))}
.hd-logo{left:max(var(--g),var(--sl))}
.hd-nav{right:max(calc(var(--g)*.5),var(--sr))}
.hh-clock,.pj-map{left:max(var(--g),var(--sl))}
.pj-drag{right:max(var(--g),var(--sr))}
.pj-map,.pj-drag{bottom:calc(max(var(--g)*.6,var(--sb)) + 2px)}

/* ================================================================== PROJECT */
.ph{position:relative;height:87vh;height:87svh;min-height:520px}
.ph-t{position:absolute;left:var(--g);right:var(--g);top:47%;transform:translateY(-50%);text-align:center}
.ph-t .l-s{font-size:var(--h-s);line-height:.84}
.ph-t .l-g{font-size:var(--h-g);line-height:.9}
.ph-bar{position:absolute;left:var(--g);right:var(--g);bottom:7.5%;display:grid;grid-template-columns:1fr auto 1fr;font-size:var(--fs);text-transform:uppercase}
.ph-bar a{justify-self:start;width:max-content}
.ph-bar a:last-child{justify-self:end}
.ph-sc{justify-self:center}
.m-full .m-in{aspect-ratio:1/var(--ar)}
.m-par{position:absolute;left:0;right:0;top:-12%;height:124%;will-change:transform}
.m-par img{width:100%;height:100%;object-fit:cover}
.m-thumb{width:66.67vw;margin:0 auto}
.m-thumb .m-in{aspect-ratio:1/var(--ar);max-height:150vh}
.m-thumb img{width:100%;height:100%;object-fit:cover}
.m-thumb.mul img{object-fit:contain}
.m-band{padding:calc(var(--g)*3) 0}
/* a drawing that fits the screen whole: as wide as allowed, never taller than allowed; its name under it */
.m-dw{width:min(var(--mw),calc(var(--mh) / var(--ar)));margin:0 auto}
.m-dw .m-in{aspect-ratio:1/var(--ar)}
.m-dw img{width:100%;height:100%;object-fit:contain}
.m-bleed{width:100vw;margin:0}
.m-bleed .m-in{aspect-ratio:1/var(--ar)}
.m-bleed img{width:100%;height:100%;object-fit:contain}
.m-small{width:40vw;margin:0 auto}
.m-small .m-in{aspect-ratio:1/var(--ar);max-height:120vh}
.m-small img{width:100%;height:100%;object-fit:contain}
/* shaped: the project's question, as large as a title */
/* shaped: the project's question holds the screen, then the wind wears it into dust and pulls it away to the right
   as the page scrolls (site.js winds: --p from 0 to 1 over the section; the words fade under a moving edge, --m0 to
   --m1, while the canvas draws their grains flying off) */
.p-wind{position:relative;height:220vh}
main[data-ns="project"]>.p-wind{margin-top:0}
.wind-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--g);text-align:center;overflow:hidden}
.wind-q{width:100%;margin:0;font-family:var(--serif);font-size:calc(var(--t1)*1.15);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
.wind-q .l{display:block;white-space:nowrap}
.p-wind.dusting .wind-q{-webkit-mask-image:linear-gradient(90deg,#000 var(--m0,200vw),transparent var(--m1,200vw));
  mask-image:linear-gradient(90deg,#000 var(--m0,200vw),transparent var(--m1,200vw))}
.wind-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wind-t{margin-top:calc(var(--g)*.6);font-size:var(--fs);text-transform:uppercase;opacity:calc(1 - var(--p,0) * 3)}
.wind-t:empty{display:none}
.p-part .sec-h{padding-top:calc(var(--g)*1)}
/* a drawing across the whole page */
.m-wide{width:calc(100vw - 2*var(--g));margin:0 auto}
.m-wide .m-in{aspect-ratio:1/var(--ar)}
.m-wide img{width:100%;height:100%;object-fit:contain}
/* tld: the showroom's elements without measures. the pivot walls, the display units at one scale, the semprepronti
   standing on one floor line at their real heights, with viabizzuno's credit under it */
.tr{position:relative;overflow-x:clip;padding:calc(var(--g)*.5) 0 calc(var(--g)*1.5)}
.tr .m-in{aspect-ratio:1/var(--ar)}
.tr img{width:100%;height:100%;object-fit:contain}
.tr-walls{width:50vw;margin-left:22vw}
.tr-units{position:relative;height:52vw;margin-top:calc(var(--g)*1.5)}
.tr-u{position:absolute;width:calc(34vw * var(--w))}
.tr-a{left:var(--g);top:0}
.tr-b{right:var(--g);top:9vw}
.tr-c{left:41vw;top:36vw}
.tr-sempre{display:flex;align-items:flex-end;justify-content:space-evenly;margin:calc(var(--g)*2) var(--g) 0;border-bottom:1px solid var(--line)}
.tr-s{height:calc(var(--mm) * .0187vw);aspect-ratio:1/var(--ar)}
.tr-s .m-in{height:100%}
.tr-cr{margin:.8em var(--g) 0;font-size:clamp(9px,.625vw,11px);line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
/* the semprepronti are ink on clear: in dark mode the ink turns light */
html[data-mode="dark"] .tr-s img{filter:invert(1);mix-blend-mode:normal}
/* the owner's own words about the project, signed */
.pq-f{margin-top:calc(var(--g)*1.2);margin-bottom:0}
.pq-q{margin:0}
.pq-q p+p{margin-top:2em}
.pq-sig{margin-top:2em;text-align:right}
/* drawings of one height side by side, each as wide as it is drawn, so they share a scale (the sections' floors line
   up); the pair is never taller than 90% of the screen */
.m-pair{display:flex;align-items:flex-start;gap:var(--g);width:min(calc(100vw - 2*var(--g)),calc(90 * var(--vh) * var(--pw) + var(--g)));margin-left:auto;margin-right:auto}
.m-pr{flex:var(--w) 1 0;min-width:0;margin-top:calc((100% - var(--g)) * var(--dy,0))}   /* the drop, as a share of the row */
.m-al{align-items:stretch}   /* one thing drawn in each, level across the row; the names on one line below */
.m-al .m-pr{display:flex;flex-direction:column}
.m-al .m-in{flex:none}
.m-al .m-cap{margin-top:auto;padding-top:.9em}
/* moodboards: a project's references on one board (build.py BOARDS), its proportions kept (--ar) whatever the width:
   the drawings on the left, the photographs on the right, above and below one line, each growing out of that line in
   turn (--i) and settling. Positions are shares of the board (--x, --w; --b / --t: the two sides of the line) */
.nm{position:relative;width:min(calc(100vw - 2*var(--g)),calc(88 * var(--vh) * var(--ar)));aspect-ratio:var(--ar);margin:0 auto}
.nm-i{position:absolute;left:var(--x);width:var(--w);--i:var(--o)}
.nm-hi{bottom:var(--b)}
.nm-lo{top:var(--t)}
/* a board with many pieces is a grid of four below 1100 px, drawings first; each piece grows in by its column */
@media (max-width:1100px){
  .nm-dense{aspect-ratio:auto;width:calc(100% - 2*var(--g));display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px;align-items:center}
  .nm-dense .nm-i{position:static;width:auto;--i:var(--c4)}
}
.nm-im{display:block;overflow:hidden}
.nm-im img{display:block;width:100%;height:auto;transform-origin:50% 100%}
.nm-lo .nm-im img{transform-origin:50% 0}
html.js .nm-im{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--io) calc(var(--i) * .14s)}
html.js .nm-lo .nm-im{clip-path:inset(0 0 100% 0)}
html.js .nm-i.in .nm-im{clip-path:inset(0)}
html.js .nm-im img{transform:scale(1.1);transition:transform 2.2s var(--out) calc(var(--i) * .14s)}
html.js .nm-i.in .nm-im img{transform:none}
/* the drawings multiply into the page like the others (an opaque ground of its colour under them) */
.nm-i.mul .nm-im{background:var(--bg)}
html.js .nm-i.mul .nm-im{transition:clip-path 1.4s var(--io) calc(var(--i) * .14s),background-color .6s var(--io)}
.nm-i.mul img{clip-path:inset(1px)}
/* photographs multiply into the ground too in light mode, so a white backdrop never shows as a white patch (as on the
   home's moodboard); in dark they keep their light, a little lowered into the ground, never inverted */
.nm-ph .nm-im{background:var(--bg)}
html.js .nm-ph .nm-im{transition:clip-path 1.4s var(--io) calc(var(--i) * .14s),background-color .6s var(--io)}
.nm-ph img{mix-blend-mode:multiply}
html[data-mode="dark"] .nm-ph img{mix-blend-mode:normal;filter:brightness(.82)}
.m-pr .m-in{aspect-ratio:1/var(--ar)}
.m-pr img{width:100%;height:100%;object-fit:contain}
.m-cap{display:block;margin-top:.9em;font-size:var(--fs);text-transform:uppercase;text-align:center}
/* floor plans in register: the frame stays pinned while they crossfade with the scroll (site.js seqs). The pin is a
   screen tall with the frame in its middle; the empty part above and below (--e) is taken back from the margins, so the
   gaps to the blocks before and after stay the page's usual ones */
.m-seq{position:relative;height:calc(var(--n)*70vh + 100vh);
  --bw:min(66.67vw,calc(76 * var(--vh) / var(--ar)));--e:max(0px,(100 * var(--vh) - var(--bw) * var(--ar) - 5em) / 2)}
main[data-ns="project"]>.m-seq{margin-top:calc(var(--g)*3 - var(--e));margin-bottom:calc(var(--e) * -1)}
.m-seq-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--g)*.45)}
.m-seq-box{width:var(--bw)}
.m-seq-box .m-in{aspect-ratio:1/var(--ar)}
.m-seq-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
html.js .m-seq-box img{opacity:0}
html.js .m-seq-box img:first-child{opacity:1}
.m-seq-lab{display:flex;gap:1.6em;font-size:var(--fs);text-transform:uppercase;font-variant-numeric:tabular-nums}
.m-seq-t{display:grid;text-align:center}   /* every floor's name centred, not just the widest */
.m-seq-t>span{grid-area:1/1;opacity:0;transition:opacity .5s var(--io)}
.m-seq-t>span.on{opacity:1}
.p-info .info{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);padding:calc(var(--g)*.4) var(--g) 0}
.inf-k,.inf-v{display:block;font-size:var(--fs);text-transform:uppercase}
.inf-k{margin-bottom:.5em}
.inf-v{opacity:.75}
.ed{width:38.75vw;margin-left:29.17vw;font-size:clamp(14px,1.111vw,18px);font-weight:300;line-height:1.375}
.ed p+p{margin-top:2em}
.ed p{text-wrap:pretty}
[data-ns="project"] main>*,main[data-ns="project"]>*{margin-top:calc(var(--g)*3)}
main[data-ns="project"]>.ph{margin-top:0}
main[data-ns="project"]>.m-full:first-of-type{margin-top:0}
main[data-ns="project"]>.ft{margin-top:calc(var(--g)*4)}
.p-field .ed{margin-top:calc(var(--g)*2)}
.p-cred{padding:0 var(--g);text-align:center}
.cred-t{font-size:var(--t1);line-height:.9}
.p-cred .o-dot{margin:calc(var(--g)*.9) auto}
.cred-g{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--g)*.5) var(--g);padding:calc(var(--g)*1.6) calc(var(--g)*3) 0;text-align:left}
.cr-k,.cr-v{display:block;font-size:var(--fs);text-transform:uppercase}
.cr-k{margin-bottom:.5em}.cr-v{opacity:.75}
.cr-v .n{display:block}
.cr-v .n+.n{margin-top:.35em}

/* ================================================================== ABOUT + BLOG */
/* the blog's 'bolle in pentola' simmers, in italian only: hairlines of steam rise off 'bol' and 'ola', three a source in
   turn, each a short stroke travelling up its curve and fading, the whole drifting a little (site.js steams places the
   boxes; each path carries its own beat); not while the title is coming in or switching language, never with reduced
   motion */
.sp-steam{position:absolute;left:var(--sx,0);top:var(--sy,0);width:var(--sw,0);height:var(--sh,0);pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .6s var(--io),visibility 0s .6s}
.sp-steam svg{display:block;width:100%;height:100%;overflow:visible;animation:steam-drift 7s ease-in-out infinite}
.sp-steam path{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:40 100;stroke-dashoffset:40;opacity:0;animation:steam-rise 3.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes steam-rise{0%{stroke-dashoffset:40;opacity:0}22%{opacity:.75}70%{opacity:.35}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes steam-drift{0%,100%{transform:translateX(-4%)}50%{transform:translateX(4%)}}
html[lang="it"] .sp-t.in:not([data-hold]) ~ .sp-steam[data-ready]{opacity:1;visibility:visible;transition:opacity 1.2s var(--io) 1.1s,visibility 0s}
.sp-h{position:relative;height:87vh;height:87svh;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sp-t{width:calc(100% - 2*var(--g))}
.sp-t .l-s{font-size:var(--h-s);line-height:.84}
.sp-t .l-g{font-size:var(--h-g);line-height:.9}
.sp-sup{margin-top:calc(var(--g)*.5);font-size:var(--fs);line-height:1.25;text-transform:uppercase}
.sp-sup .l{font-family:var(--sans);font-size:var(--fs);letter-spacing:-.01em}
.sp-sc{position:absolute;left:50%;bottom:7.5%;transform:translateX(-50%);font-size:var(--fs);text-transform:uppercase}
main[data-ns="about"]>*+*,main[data-ns="blog"]>*+*{margin-top:calc(var(--g)*3)}
main[data-ns="about"]>.ft,main[data-ns="blog"]>.ft{margin-top:calc(var(--g)*4)}
main[data-ns="about"]>.s-terr+.ft,main[data-ns="blog"]>.s-terr+.ft{margin-top:0}
.ab-grid{display:grid;grid-template-columns:44vw 1fr;gap:calc(var(--g)*1.5);padding:calc(var(--g)*1.2) var(--g) 0 0;align-items:start}
/* the portrait in its own proportions (900 x 921), with only a little room for a slow parallax, so it shows almost
   the whole photo: the owner found the 4:5 crop too close, his face too big */
.ab-por .m-in{aspect-ratio:900/921}
.ab-por .m-par{position:absolute;left:0;right:0;top:-6%;height:112%}
.ab-por img{width:100%;height:100%;object-fit:cover}
.ab-txt{align-self:end}
.lead-l{font-size:var(--lead);line-height:1.15;letter-spacing:-.04em;text-wrap:balance}
.ab-txt .lead-l{margin-bottom:calc(var(--g)*1)}
.ed-cols{width:auto;margin:0;columns:2;column-gap:var(--g)}
.ed-cols p{break-inside:avoid}
/* about: no empty line between the two paragraphs (the owner, 2026-10-29) */
.ab-txt .ed p+p{margin-top:0}
/* the extended master keeps its own light ground in dark mode: never recoloured */
html[data-mode="dark"] .ab-mark{--bg:#F0F0F0;--fg:#141414;--line:rgba(20,20,20,.16);background:var(--bg);color:var(--fg);padding:calc(var(--g)*1) 0 calc(var(--g)*1.5)}
.mk-logo{width:min(56vw,900px);margin:calc(var(--g)*1.5) auto calc(var(--g)*1)}
.mk-logo img{width:100%;height:auto}
.mk-lead{text-align:center;width:66.67vw;margin:0 auto}
.mk-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);padding:calc(var(--g)*1.2) var(--g) 0}
.mk-k{display:block;font-family:var(--serif);font-size:calc(var(--t1)*.5);line-height:1;margin-bottom:.4em}
.mk-parts li:nth-child(2) .mk-k{font-size:0;width:calc(var(--t1)*.34);height:calc(var(--t1)*.34);border-radius:50%;background:var(--o);margin-bottom:calc(var(--t1)*.16)}
.mk-v{display:block;font-size:var(--f);line-height:1.45;max-width:24em;text-wrap:balance}
.ab-info{padding:0 var(--g)}
.info-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);padding-top:calc(var(--g)*.5)}
.info-4 .inf-v{margin-top:.25em}
.bl-e .sec-h .bd{margin-top:0}
.bl-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g);margin-top:calc(var(--g)*1.2);align-items:start}
.bl-f{margin:0}
.bl-f img{width:100%;height:100%;object-fit:cover}
.bl-t{position:relative;z-index:2;margin:calc(var(--g)*1.4) var(--g) calc(var(--g)*.4);text-align:center}
.bl-t .l-s{font-size:var(--h-s);line-height:.86}
.bl-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em 2em;font-size:var(--fs);text-transform:uppercase}
.bl-g+.bl-t{margin-top:calc(var(--g)*2.4)}
.bl-defs{margin-top:calc(var(--g)*1)}
/* a sketch merged over its plan: one drawing, the sketch over the open-plan desks; the layer itself carries the blend,
   since its drift makes it a group of its own */
.bl-sk{position:absolute;left:4%;top:30%;width:92%;mix-blend-mode:multiply;pointer-events:none}
.bl-f .bl-sk img{height:auto}
html[data-mode="dark"] .bl-sk{mix-blend-mode:screen}
.bl-defs p:first-letter{text-transform:lowercase}
.bl-defs .bl-term{margin-bottom:.35em;font-size:2.4em;line-height:1.05;letter-spacing:-.02em}   /* a headword on its own line, the definition under it (owner, 2026-11-03) */

/* ================================================================== SMALL SCREENS */
@media (min-width:768px) and (max-width:1100px){.hd-tools{left:auto;right:calc(var(--g)*.5 + max(110px,8.33vw) + 20px)}}
/* shorter laptop screens: the title steps down a little faster, so it keeps its air above the circle (900px tall and up unchanged) */
/* the title as big as the screen's height allows (a third taller than before, owner 2026-11-02); the last term keeps short windows in bounds */
@media (min-width:768px){.hh-t .l-s{font-size:min(var(--h-s),23*var(--vh),29.7*var(--vh) - 60px)}.hh-t .l-g{font-size:min(var(--h-g),19.8*var(--vh),25.6*var(--vh) - 52px)}}
/* phones held sideways get the desktop hero: the fold stays at the screen edge, the circle shrinks to fit under the title,
   and the brand line drops below row 3 instead of squeezing it */
@media (min-width:768px) and (max-height:500px){
  .hh{min-height:0;--cd:min(max(200px,22.7vw),45*var(--vh))}
  .hh-tag{grid-row:4;justify-self:end;flex-direction:row;gap:.4em;margin-top:.5em}
}
/* there it never sets the width of the title block either: when longer than the title it wraps, right-aligned, under row 3 */
@media (orientation:landscape) and (max-height:500px){.hh-tag{width:0;min-width:100%;flex-wrap:wrap;justify-content:flex-end;column-gap:.4em}}
/* sideways on a phone the small viewport stays the height with Safari's bars out (310 of 420): the hero, its title and
   circle measure the large one, so the title keeps its size and the bars simply cover the hero's foot (owner, 2026-11-02) */
@media (orientation:landscape) and (max-height:500px) and (hover:none){.hh{--vh:1lvh;height:100lvh}}
/* and the hero composed as on a laptop, only smaller (owner, 2026-11-02: 'the same but proportioned'): the title at the
   share of the height it has on a 768px-tall laptop, the brand line beside row 2 again, the circle as it was */
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:768px){
  .hh-t .l-s{font-size:min(var(--h-s),21.9*var(--vh))}
  .hh-t .l-g{font-size:min(var(--h-g),18.8*var(--vh))}
  .hh-tag{grid-row:2;justify-self:end;align-self:center;flex-direction:column;gap:0;margin-top:0;width:auto;min-width:0;flex-wrap:nowrap}
  .pk-count{display:none}   /* no room for the projects count beside the circle here (owner, 2026-11-02) */
}
/* projects on a phone held sideways: the cards fit the band between the header and the map / drag line and sit in its
   middle, so the header never covers them (owner, 2026-11-02); the fade starts above them */
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:768px){
  html .pj{--u:min(1vw,(100*var(--vh) - 140px) / 42)}
  html .pj-rot{top:calc(85px + (100*var(--vh) - 140px) / 2)}
  html .pj-clip{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 56px,#000 84px);mask-image:linear-gradient(180deg,transparent 0,transparent 56px,#000 84px)}
}
/* there the selected projects' titles reach across the row: the category, place and year go under the title, where
   it starts, instead of into it (owner, 2026-11-02) */
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:768px){.fa-m{display:block;position:static;margin-top:.9em;padding-left:calc(var(--g)*3)}}
/* about: the lead stays beside the portrait and the story runs under both, in two full columns, instead of two
   slivers in the narrow column beside it (owner, 2026-11-02: 'very long on the right') */
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:768px){
  .ab-txt{display:contents}
  .ab-txt .lead-l{grid-column:2;align-self:end;margin:0}
  .ab-txt .ed{grid-column:1/-1;padding-left:var(--g)}
}
/* and the language and mode buttons end where the menu begins, whatever the notch does to the menu's place */
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:768px){
  /* the four links have no room over a title on a phone held sideways: the menu button from the start, as once scrolled */
  .nav-ul a{transform:translateY(-110%)}
  .nav-menu{opacity:1;transform:none;pointer-events:auto}
  .hd-tools{left:auto;right:calc(max(var(--g)*.5,var(--sr)) + max(8.33vw,110px) + 16px)}
}
/* projects on touch screens held sideways: no hover labels to keep in view, so the cards take more of the height */
@media (max-height:500px) and (hover:none){
  .pj{--u:min(1vw,1.75*var(--vh))}
  .pj-clip{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 80px,#000 105px);mask-image:linear-gradient(180deg,transparent 0,transparent 80px,#000 105px)}
}
/* tablets in portrait keep the desktop composition, like the reference site */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .hh{--cd:34vw}
  .pk-count{left:auto;right:calc(var(--g) + 37vw)}
  .hh-where{left:var(--g);transform:none;bottom:calc(6% + 1.7em)}
  /* the process stacks like on phones, so the drawings get the full width */
  .proc-pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:24px}
  .proc-caps{min-height:4.6em}
  .proc-stage{height:auto;aspect-ratio:4/3}
  .ps img{max-height:calc((100vw - 2*var(--g))*.75)}
  /* about: the text column keeps to the screen; blog: the photos stay still, the gaps are too small for parallax */
  .ab-grid{grid-template-columns:44vw minmax(0,1fr)}
  .ab-txt .ed{width:auto;margin:0}
  .ed-cols{columns:1}
  .bl-f,.bl-sk{translate:none!important}
  .ed{width:58vw;margin-left:21vw}
}
@media (max-width:767px){
  :root{--g:20px;--h-s:16.5vw;--h-g:14vw;--t1:12.5vw;--t2:11vw;--lead:clamp(24px,6.6vw,34px)}
  .hd-logo{top:16px;--lw:164px}
  .hd-tools{top:22px;left:auto;right:92px;gap:6px}
  .hd-mode .mode-d,.hd-mode .mode-l{display:none!important}
  .hd-mode .mi{margin:0}
  .hd-nav{top:22px;right:20px;width:auto;min-width:0}
  .nav-ul{display:none}
  .nav-menu{opacity:1;transform:none;pointer-events:auto;position:relative}
  .nav-panel{width:min(220px,70vw)}
  .hd-tools .pill::after,.nav-menu::after{content:"";position:absolute;inset:-12px -4px}
  .nav-lang{gap:6px}
  .nav-lang button{padding:8px 6px;font-size:13px}
  /* home hero */
  .hh{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:118px var(--g) 24px}
  .hh-mid,.hh-clock,.hh-where,.pk-count{position:static;transform:none}
  .hh-mid{position:relative;top:auto;left:var(--hx,0px);margin:0 auto;translate:none!important}
  .hh-t .l-s{font-size:13vw}
  .hh-t .l-g{font-size:11.2vw;margin:.04em 0 .06em}
  .hh-tag{grid-row:4;margin-top:18px}
  .hh-where{order:8;margin-top:6px}
  .pk{position:relative;top:auto;right:auto;bottom:auto;order:5;width:50vw;min-width:0;margin:40px auto 0}
  .pk-head{text-align:center;padding-bottom:12px}
  .pk-next{bottom:0}
  .pk-count{order:6;margin:14px auto 0;text-align:center}
  .hh-clock{order:7;margin-top:28px}
  .hh-clock > span:first-child{display:none}   /* 'turin' is in the line below */
  /* what i do */
  .s-what{min-height:0;padding:96px 0 120px}
  .lead-xl,.mk-lead{width:auto;margin-left:var(--g);margin-right:var(--g)}
  .s-what .lead-xl{text-align:left;font-size:22px;line-height:1.25}
  .o-xl{--s:96px}
  /* process */
  .mood{width:min(100cqw - 2*var(--g),125cqh)}   /* the board keeps to the text's gutter */
  .proc{height:532vh}
  .proc-pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:24px;padding:72px var(--g) 24px}
  .proc-caps{min-height:4.6em}
  /* the stage as tall as the screen allows under the words (owner, 2026-11-02: the model was small on phones) */
  .proc-stage{height:auto;aspect-ratio:1;max-height:calc(100svh - 230px);margin:0 calc(var(--g)*-1)}
  .ps img{max-height:min(100vw,calc(100svh - 230px))}
  .ps.mul .rv{max-width:calc(100% - 2*var(--g))}   /* drawings keep the gutter, so their ends never touch the screen's edge */
  /* lists and section heads */
  .fa{text-align:center}
  .fa-t{padding-left:0}
  .fa-n{position:static;display:block;margin-bottom:12px}
  .fa-m{position:static;margin-top:12px}
  .sec-sw{height:auto;margin:14px 0}
  /* footer */
  .ft-row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding-top:18px;padding-bottom:18px}
  .ft-l,.ft-r{justify-self:center}
  .ft-mail{flex-direction:column;gap:.3em;align-items:center}
  /* projects: keep the tilt, smaller cards, monochrome until opened */
  .pj-clip{-webkit-mask-image:none;mask-image:none}
  .pj-rot{left:-40vw;width:180vw;transform:translateY(-50%) rotate(15deg)}
  .pj-track{gap:12vw;padding:0 60vw 0 56vw}
  .pc{width:50vw}
  /* project, about, blog: the opening fills the screen, so the first picture or entry only comes in on scroll */
  .ph,.sp-h{height:100vh;height:100svh;min-height:0}
  .p-info .info,.cred-g,.info-4{grid-template-columns:1fr 1fr}
  .cred-g{padding-left:0;padding-right:0}
  .m-thumb{width:calc(100% - 2*var(--g))}
  .m-pair{flex-direction:column;width:calc(100% - 2*var(--g))}
  .m-wide{width:calc(100vw - 2*var(--g))}
  .m-small{width:calc(100% - 2*var(--g))}
  .m-dw{width:min(calc(100vw - 2*var(--g)),calc(var(--mh) / var(--ar)))}
  .wind-q{font-size:8.6vw}   /* both lines the same size, the longer one fitting the width */
  .tr-walls{width:calc(100% - 2*var(--g));margin:0 var(--g)}
  .tr-units{height:auto;display:flex;flex-direction:column;align-items:center;gap:24px}
  .tr-u{position:static;width:calc(90vw * var(--w))}
  .tr-sempre{margin-left:var(--g);margin-right:var(--g)}
  .tr-s{height:calc(var(--mm) * .037vw)}

  .m-pr{width:100%;flex:none;margin-top:0}
  .nm{aspect-ratio:auto;width:calc(100% - 2*var(--g));display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;align-items:center}
  .nm .nm-i{position:static;width:auto;--i:var(--c2)}
  .m-seq{height:calc(var(--n)*55vh + 100vh);--bw:min(calc(100vw - 2*var(--g)),calc(70 * var(--vh) / var(--ar)))}
  .m-seq-lab{flex-direction:column;align-items:center;gap:.3em}
  .ed{width:auto;max-width:34em;margin-left:var(--g);margin-right:var(--g)}
  .ab-grid{grid-template-columns:1fr;padding:24px 0 0}
  .ab-por{width:100%;margin:0}
  .ab-txt{padding:0 var(--g)}
  .ab-txt .ed{margin-left:0;margin-right:0}
  .bl-g{grid-template-columns:1fr;row-gap:16px}
  .bl-c{grid-column:1 / -1!important;margin-top:0!important}
  /* stacked in one column the photos stay still, or they would slide into each other */
  .bl-f,.bl-sk{translate:none!important}
  .ed-cols{columns:1}
  .mk-logo{width:calc(100% - 2*var(--g))}
  .mk-parts{grid-template-columns:1fr}
  .hthumb{display:none}
}
/* phones narrower than 768 held sideways get the same compact hero as the wider ones, not the portrait stack */
@media (max-width:767px) and (orientation:landscape) and (max-height:500px){
  .hh{display:block;height:100vh;height:100svh;min-height:0;padding:0;--cd:min(max(200px,22.7vw),45*var(--vh))}
  .hh-mid{position:absolute;left:calc(50% + var(--hx,0px));transform:translate(-50%,-50%);margin:0}
  .hh-clock,.hh-where,.pk-count{position:absolute;margin:0}
  .hh-where{left:var(--g);transform:none;bottom:calc(6% + 1.7em)}
  .pk-count{left:auto;right:calc(var(--g) + var(--cd) + 12px);text-align:left}
  .hh-t .l-s{font-size:min(var(--h-s),18*var(--vh),23.25*var(--vh) - 47.25px)}
  .hh-t .l-g{font-size:min(var(--h-g),15.5*var(--vh),20*var(--vh) - 40.5px);margin:.02em 0 .05em}
  .hh-tag{grid-row:4;justify-self:end;flex-direction:row;gap:.4em;margin-top:.5em}
  .pk{position:absolute;top:auto;right:var(--g);bottom:calc(var(--cd) / -2);width:var(--cd);margin:0}
  .pk-next{bottom:calc(var(--cd) - 60px)}
}
/* phones narrower than 768 held sideways: the pinned process keeps to one screen (two columns, a short stage) */
@media (max-width:767px) and (orientation:landscape) and (max-height:500px){
  .proc-pin{grid-template-columns:31vw 1fr;grid-template-rows:none;gap:var(--g);padding:16px var(--g)}
  .proc-stage{aspect-ratio:auto;height:72svh;margin:0}
  .ps img{max-height:72svh}
}
/* without the script (it failed, or it is switched off) the pages stay usable: the first slide shows, the clock that
   cannot tick hides, the gallery is a plain wrapping row, and the phone menu opens on tap */
html:not(.js) .pk-s:first-child{transform:none}
html:not(.js) .pk-s:first-child img{translate:none}
html:not(.js) [data-clock]{visibility:hidden}
html:not(.js) .hh-tag{grid-row:4;justify-self:end;flex-direction:row;gap:.4em;margin-top:.5em}
html:not(.js) .pc-t{display:none}
html:not(.js) .m-seq{height:auto}
html:not(.js) main[data-ns="project"]>.m-seq{margin-top:calc(var(--g)*3);margin-bottom:0}
html:not(.js) .m-seq-pin{position:static;height:auto}
html:not(.js) .m-seq-box .m-in{aspect-ratio:auto}
html:not(.js) .m-seq-box img{position:relative;height:auto}
html:not(.js) .m-seq-lab{display:none}
html:not(.js) .pj{height:auto;overflow:visible}
html:not(.js) .pj-clip{position:static;-webkit-mask-image:none;mask-image:none}
html:not(.js) .pj-rot{position:static;transform:none;width:auto}
html:not(.js) .pj-track{flex-wrap:wrap;justify-content:center;width:auto;padding:160px var(--g) 80px;transform:none!important}
html:not(.js) .hd-nav:is(:hover,:focus-within) .nav-panel{clip-path:inset(0 round 30px);opacity:1;pointer-events:auto}
html:not(.js) .hd-nav:is(:hover,:focus-within) .nav-panel ul a{transform:none}
/* the script came late, after the page had been shown plainly: what is on screen appears at once, without its intro */
.no-intro :is(.c i,.w,[data-fade],.bd,.m-in,.m img,.ab-por img,.pc,.nm-im,.nm-im img){transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important}
  /* the home title changes width with the language while its brand line stays put: no one-frame step in between */
  .hh-mid,.hh-mid *{transition:none!important}
  /* the about portrait too: shown at once by the clip-path line below, it kept its 1.14 zoom and snapped to size mid-scroll
     (the owner saw his picture resize on the iPad, 2026-11-02) */
  .c i,.m img,.ab-por img{transform:none!important}
  /* the gallery's titles cannot rise in, so they fade: only the hovered or middle card shows its own (owner, 2026-11-02) */
  .pc-t{opacity:0}
  .pc:hover .pc-t,.pc.focus .pc-t,.pc:has(a:focus-visible) .pc-t{opacity:1}
  [data-fade]{translate:none!important;opacity:1!important}
  .m-in,.nm-im{clip-path:none!important}
  .sp-steam{display:none}
  .nm-im img{transform:none!important}
  .bl-sk{translate:none!important}
  .bd{transform:none!important}
  .ps img{clip-path:none!important;transform:none!important}
  .w{transform:none!important}
}

/* parallax on touch screens: each moving element rides a scroll timeline of its frame, as the desktop script does
   (−p · speed · 10% of the screen); phones move less. Reduced motion keeps everything still (owner, 2026-11-02) */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  html.px-css :has(> [data-speed]){view-timeline:--px block}
  html.px-css [data-speed]{will-change:translate;animation:bo-px linear both;animation-timeline:--px;animation-range:cover 0% cover 100%}
}
@media (hover:none) and (max-width:767px){html.px-css [data-speed]{--pk:.7}}
@keyframes bo-px{from{translate:0 calc(var(--ps,0) * var(--pk,1) * -5lvh)}to{translate:0 calc(var(--ps,0) * var(--pk,1) * 5lvh)}}

/* the flame after "blog" in the nav and the menu (owner, 2026-11-03): a faint outer flame and a solid core in the
   nav's own colour, each flickering on its own beat with transforms only; still under reduced motion */
.fl-on{position:relative}
/* larger, so it reads at a glance (owner, 2026-11-03: 'too small to be barely seen') */
.fl{position:absolute;left:calc(100% + .28em);top:var(--fl-t,-.04em);width:.52em;height:.82em;pointer-events:none}
.fl i{position:absolute;inset:0;background:currentColor;transform-origin:50% 100%;
  -webkit-mask:var(--fl-m) center bottom/contain no-repeat;mask:var(--fl-m) center bottom/contain no-repeat}
.fl{--fl-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5.4 0C5.9 3.2 10 5.4 10 10.4 10 13.6 7.8 16 5 16S0 13.6 0 10.6C0 8 1.6 6.6 2.6 4.6 3.1 6.2 3.7 6.9 4.3 7.1 4.1 4.6 4.6 2 5.4 0Z'/%3E%3C/svg%3E")}
.fl i:first-child{opacity:.45;animation:fl-o 1.9s steps(1,end) infinite}
.fl i:last-child{transform:scale(.5);animation:fl-c 1.3s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes fl-o{0%{transform:none}17%{transform:scale(.96,1.05) skewX(-3deg)}31%{transform:scale(1.02,.94)}
  46%{transform:scale(.94,1.08) skewX(3deg)}63%{transform:scale(1,.97) skewX(-1deg)}81%{transform:scale(.97,1.04) skewX(2deg)}}
@keyframes fl-c{0%{transform:scale(.5,.46)}35%{transform:scale(.44,.54) skewX(2deg)}70%{transform:scale(.52,.44) skewX(-2deg)}100%{transform:scale(.46,.52)}}
@media (prefers-reduced-motion:reduce){.fl i{animation:none!important}}

/* the gallery hint: "drag" for a mouse, "swipe" for a finger (owner, 2026-11-03) */
.pj-h-t{display:none}
@media (hover:none){.pj-h-m{display:none}.pj-h-t{display:inline}}

/* printing (owner, 2026-11-03): the pages are not for printing. Print and "save as pdf" give one page with only the
   logo and the notice (build.py .pn), centred, in the site's own type; everything else is left out, the browser's own
   header and footer too (no page margin). No ground of its own: the paper shows, in either mode, so the notice is set
   in the light mode's ink. On screen it is never shown (and screen readers skip it: aria-hidden) */
.pn{display:none}
@media print{
  @page{margin:0}
  html{color-scheme:light!important}   /* dark mode's scheme would paint the page's own ground dark behind it */
  html,body{background:none!important;transition:none!important;height:auto!important;min-height:0!important;overflow:visible!important}
  body>:not(.pn){display:none!important}
  .pn{position:fixed;inset:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:9mm;
    padding:0 20mm;color:#141414;font-family:var(--sans);font-weight:400;font-size:10pt;line-height:1.45;letter-spacing:-.01em;text-align:center}
  .pn img{width:60mm;height:auto}
  .pn p{max-width:110mm}
}

/* ================================================================== THE SITE'S LOOK (owner, 2026-11-03)
   The look the owner chose for the site, now the only one: build.py writes html[data-v="2"] on every page, so it
   applies from the first paint, with no switch. Everything it changes in the styles is here, under that attribute
   (site.js has its own branches on it); the older look's rules above stay where these override them.
   - type: Gallery Modern (Tropical Type) takes the serif role, TWK Everett (Weltkern) the sans, at the weights the site
     uses (300 Light, 400 Regular, 500 Medium): the owner's licensed woff2 files, unchanged. The few characters they lack
     (the ™ in a blog title, the Greek and phonetic letters of the blog's definitions) come from Italiana and TT
   - the home title as on the reference site's home page (h1.page-home-title, measured 2026-11-03 from 390 to 1920
     wide): its sizes, its line spacing (baselines .81 of the serif size apart) and its places, on bointeriors' own
     three lines
   - the circle's arrow on the circle's lowest point; the header logo at 80% */
@font-face{font-family:"Gallery Modern";font-weight:400;font-display:swap;src:url(/assets/fonts/gallerymodern-regular.woff2) format("woff2")}
@font-face{font-family:"TWK Everett";font-weight:300;font-display:swap;src:url(/assets/fonts/twkeverett-light.woff2) format("woff2")}
@font-face{font-family:"TWK Everett";font-weight:400;font-display:swap;src:url(/assets/fonts/twkeverett-regular.woff2) format("woff2")}
@font-face{font-family:"TWK Everett";font-weight:500;font-display:swap;src:url(/assets/fonts/twkeverett-medium.woff2) format("woff2")}
html[data-v="2"]{--serif:"Gallery Modern","Italiana","Didot","Bodoni 72",serif;--sans:"TWK Everett","TT","Helvetica Neue",Arial,sans-serif}
html[data-v="2"] .l-s,html[data-v="2"] .l-g{letter-spacing:-.035em}   /* both lines, as there */
/* Everett's capitals stand about 8% wider and taller than TT's: in the project facts, the credits and the about page's
   facts (all capitals, in tight columns) they are set at .92, the same height as before, so names like 'poltrona
   frau®' or 'interior & spatial design' keep to one line as they do now (iPad, iPhone) */
html[data-v="2"] :is(.inf-k,.inf-v,.cr-k,.cr-v){font-size:calc(var(--fs)*.92)}

/* the logo at 80% of its size everywhere; it keeps its corner, so its top stays level with the menu's */
html[data-v="2"] .hd-logo{--lw:clamp(104px,11.2vw,179.2px)}
@media (max-width:767px){html[data-v="2"] .hd-logo{--lw:131.2px}}

/* the home title. --so is the serif size, --se the sans (.8621 of it at every size, as there); --sw is the reference
   site's own size for the width, --sc keeps it clear of the header and the circle's label on screens shorter than
   theirs (it never binds at 1280x800, 1440x900, 1920x1080 or on the iPads). The lines are one em tall (line-height
   1: Gallery Modern's baseline .787em, its caps .657em; Everett's .899 and .76), and their margins set the baselines
   where theirs are:
   --m1 / --m2 the gaps under lines one and two, in serif sizes; the block's top --tk serif sizes above the screen's middle */
html[data-v="2"] .hh{--sw:11.277vw;--so:min(var(--sw),var(--sc));--se:calc(var(--so)*.8621);
  --sc:min((50*var(--vh) - var(--cd)/2 - 12px - var(--fs)*1.35 - 24px)/1.1377,(50*var(--vh) - 130px)/1.1317);
  --tp:calc(var(--g)*3);--m1:-.1773;--m2:-.0661;--tk:1.2617}
@media (min-width:1680px){html[data-v="2"] .hh{--sw:10.149vw}}
/* 1024 and narrower, their sizes in pixels and a little more air under line one (measured at 744 and 820) */
@media (max-width:1024px){html[data-v="2"] .hh{--sw:121.8px;--m1:-.1665;--m2:-.0766;--tk:1.1805}}
@media (max-width:768px){html[data-v="2"] .hh{--sw:104.4px;--tp:4.1667vw}}
@media (max-width:640px){html[data-v="2"] .hh{--sw:14.5vw;--tp:20px}}
/* as wide as the page inside their margins (three units, one under 769, 20px under 641); lines one and three centred,
   line two from the left margin; the block centred in the screen */
html[data-v="2"] .hh-mid{left:var(--hx,0px);width:100%;padding:0 var(--tp);top:calc(50% - var(--tk)*var(--so));transform:none;grid-template-columns:minmax(0,1fr)}
html[data-v="2"] .hh-t .l{line-height:1}
html[data-v="2"] .hh-t .l-s{font-size:var(--so)}
html[data-v="2"] .hh-t .l-g{font-size:var(--se)}
/* (a centred line longer than the room inside the margins, as a long Italian row can be at 820, stays centred: its box
   reaches the screen's edges, as their centred lines do) */
html[data-v="2"] .hh-t .l:nth-child(1){text-align:center;margin:0 calc(var(--tp)*-1) calc(var(--m1)*var(--so))}
html[data-v="2"] .hh-t .l:nth-child(2){text-align:left;margin:0 0 calc(var(--m2)*var(--so))}
html[data-v="2"] .hh-t .l:nth-child(3){text-align:center;margin:0 calc(var(--tp)*-1)}
/* the brand line keeps its place beside row 2, ending on the right margin; on screens upright up to 1024 wide row 2
   reaches that margin, so it goes under row 3 there, still ending on the right margin */
@media (max-width:1024px) and (orientation:portrait){
  html[data-v="2"] .hh-tag{grid-row:4;justify-self:end;align-self:start;margin-top:calc(var(--so)*.3)}
}
/* phones upright: the stacked hero as before, the title on top of it where theirs is (its caps 166px down); held
   sideways they keep the hero below */
@media (max-width:767px) and (orientation:portrait),(max-width:767px) and (min-height:501px){
  html[data-v="2"] .hh{--sc:9999px;justify-content:flex-start;padding-top:calc(166px - .13*var(--so))}
  html[data-v="2"] .hh-mid{top:auto;padding:0 calc(var(--tp) - var(--g));margin:0}
  html[data-v="2"] .hh-tag{margin-top:18px}
  /* the arrow now hangs 30px under the circle: the count steps down by as much; the circle, the clock and the foot
     come a little closer instead, so the hero still fits a 786px-tall iPhone screen */
  html[data-v="2"] .pk-count{margin-top:42px}
  html[data-v="2"] .pk{margin-top:24px}
  html[data-v="2"] .hh-clock{margin-top:18px}
  html[data-v="2"] .hh{padding-bottom:16px}
}
/* up to 640 wide, line one from the left, two in the middle, three to the right */
@media (max-width:640px){
  html[data-v="2"] .hh-t .l:nth-child(1){text-align:left;margin-left:0;margin-right:0}
  html[data-v="2"] .hh-t .l:nth-child(2){text-align:center}
  html[data-v="2"] .hh-t .l:nth-child(3){text-align:right;margin-left:0;margin-right:0}
}
/* phones held sideways: their phone lines (left, middle, right), sized to the height (theirs runs off the screen there),
   centred between the header (60px) and the circle's label; line three ends where the language and mode buttons end
   (site.js alignTools), clear of the menu; the brand line stands left of row 2, where there is room */
@media (orientation:landscape) and (max-height:500px){
  html[data-v="2"] .hh{--sw:121.8px;--lt:calc(100*var(--vh) - var(--cd)/2 - 12px - var(--fs)*1.35);
    --sc:min(21.9*var(--vh),(var(--lt) - 92px)/2.2754);--m1:-.1665;--m2:-.0766;--tr:var(--g)}
  html[data-v="2"] .hh-mid{top:calc((60px + var(--lt))/2 - 1.2679*var(--so));padding:0 var(--tr) 0 var(--g)}
  html[data-v="2"] .hh-t .l:nth-child(1){text-align:left;margin-left:0;margin-right:0}
  html[data-v="2"] .hh-t .l:nth-child(2){text-align:center}
  html[data-v="2"] .hh-t .l:nth-child(3){text-align:right;margin-left:0;margin-right:0}
  html[data-v="2"] .hh-tag{grid-row:2;justify-self:start;align-self:center;flex-direction:column;flex-wrap:nowrap;gap:0;
    width:auto;min-width:0;margin:0;text-align:left}
  /* with clear air under line one (owner, 2026-11-03): its capitals start 24px under that line's baseline, not 7, so it
     no longer reads as a fifth line of the title. Row two's top is (1 + --m1 - .787) serif sizes under that baseline,
     Everett's capitals .289em under the top of a 1.3 line; the margin below gives back what the one above takes, so
     the row keeps its height and the title its place (the brand line's foot reaches row three's height on the left,
     where row three, set right, leaves the room) */
  html[data-v="2"] .hh-tag{--tg:calc(24px - (1 + var(--m1) - .787)*var(--so) - .289*var(--fs));align-self:start;
    margin:var(--tg) 0 calc(var(--tg)*-1)}
}
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:768px){
  html[data-v="2"] .hh{--tr:calc(max(var(--g)*.5,var(--sr)) + max(8.33vw,110px) + 16px)}
}

/* the circle's arrow sits on its lowest point, centred, the same 60px o */
html[data-v="2"] .pk-next{right:auto;left:50%;bottom:-30px;transform:translateX(-50%)}
/* no light rim on dark grounds, as the pointer has none (owner, 2026-11-03) */

/* the circle's "projects" label stands over its right edge from 768 wide, as the reference site's over its pick-up there;
   narrower it stays centred over the circle, as theirs on phones (owner, 2026-11-03) */
@media (min-width:768px){html[data-v="2"] .pk-head{text-align:right}}
/* the brand line beside row 2 is set from its left, where rows one and three end (site.js fitHeroRow) (owner, 2026-11-03) */
html[data-v="2"] .hh-tag.tag-at{justify-self:start;text-align:left}
/* the project count as far from the circle as theirs from their pick-up: 78px at 1512 wide, 5.16vw (owner, 2026-11-03) */
@media (min-width:1025px) and (min-height:501px){html[data-v="2"] .pk-count{left:auto;right:calc(var(--g) + var(--cd) + 5.16vw)}}
/* the 'projects' label's baseline 20px above the circle at every size (its own 12px and the line's foot give 16; from
   768 wide site.js placeCount brings it 20px from the curve) (owner, 2026-11-03) */
html[data-v="2"] .pk-head{padding-bottom:16px}
/* the IT and mode buttons end where the home title's first row ends, on every page however it was reached (owner,
   2026-11-03): --tx is that end from the page's left edge, for this width, height and language, set before the first
   paint by build.py's head script from what was kept (localStorage bo-tx) and by site.js alignTools after; anchored on
   their right, so a longer 'light mode' or 'tema scuro' keeps the end where it is. Not on phones held sideways. With
   nothing kept for the screen yet (a first visit), they stay unseen until site.js has measured the place and then
   fade in there (html[data-tx-wait], at most 1.5 s), instead of jumping to it after the first paint */
@media (min-width:768px){
  html[data-v="2"][data-tx] .hd-tools{left:auto;right:calc(100% - var(--tx))}
  html.js[data-v="2"][data-tx-wait] .hd-tools{opacity:0}
}
/* phones upright: the label's extra 4px comes out of the room above it, so the hero still fits a 786px-tall iPhone */
@media (max-width:767px) and (orientation:portrait),(max-width:767px) and (min-height:501px){html[data-v="2"] .pk{margin-top:20px}}
/* co-existere's circle picture is its axonometric drawing: it melts into the page as the site's drawings do (multiplied
   into the ground, inverted onto it in dark mode), on a slide of the page's own ground so the wipe stays clean; the
   other pictures are photographs and stay as they are (owner, 2026-11-03) */
.pk-s.mul{background:var(--bg);transition:transform 1.25s var(--io),background-color .6s var(--io)}

/* ================================================================== THE HOME ENTRY (owner, 2026-11-03)
   The first time the site is opened (build.py's head script sets html.bo-entry before the first paint; site.js entry
   plays it): the title alone on the page's ground, the brand line's four words one by one, and both stay; then the
   rest of the page fades in around them. Opacity only; the title's words stand as they will (no tilt) and keep */
/* the page held still on the root alone: hidden on the body too made the body its own scroller, the title's touch
   parallax (bo-px) read its place from it and stood the title 66px low, so it jumped up as the entry ended (owner,
   2026-11-03: iPad sideways) */
html.bo-entry{overflow:hidden}
html.bo-entry :is(.hd,.cursor,.skip,main > :not(.hh),.hh > :not(.hh-mid),.hh-mid > :not(.hh-t):not(.hh-tag)){opacity:0!important;visibility:hidden!important;transition:none!important}
html.bo-entry .hh-t{opacity:0;transition:opacity .7s var(--out)}
html.bo-entry.bo-e1 .hh-t{opacity:1}
html.bo-entry .hh-t :is(.w,.c i){transform:none!important;transition:none!important}
html.bo-entry .hh-tag{opacity:1!important;translate:none!important;transition:none!important}
html.bo-entry .hh-tag > span{opacity:0;transition:opacity .6s var(--out)}
html.bo-entry .hh-tag > span.bo-on{opacity:1}
/* then the circle and its arrow fade in with the rest (the labels, clock and count fade in by their own reveal) */
html.bo-e2 :is(.pk-win,.pk-next){animation:bo-in .9s var(--io) both}
@keyframes bo-in{from{opacity:0}}
/* the header comes back with the home */
html[data-v="2"] .hd{transition:opacity .8s var(--io)}
/* phones upright (owner, 2026-11-03): the logo smaller (site.js alignLogo sets its foot on the
   buttons'); the clock and the 'where' line close the first screen (site.js placeCount), the circle after the first
   scroll; "what i do" centred */
@media (max-width:767px){html[data-v="2"] .hd-logo{--lw:104.96px}}
@media (max-width:767px) and (orientation:portrait),(max-width:767px) and (min-height:501px){
  html[data-v="2"] .hh-clock{order:3}
  html[data-v="2"] .hh-where{order:4}
  html[data-v="2"] .pk{margin-top:64px}
  html[data-v="2"] .hh{padding-bottom:40px}
  html[data-v="2"] .s-what .lead-xl{text-align:center}
}
/* phones upright: the first screen ends on the clock, with the project pages' "( scroll )"
   centred above it, as the circle now comes after the first scroll (owner, 2026-11-03); elsewhere it is not shown */
.hh-sc{display:none}
@media (max-width:767px) and (orientation:portrait),(max-width:767px) and (min-height:501px){
  html[data-v="2"] .hh-clock{display:flex;flex-wrap:wrap;align-items:baseline;align-self:stretch}
  html[data-v="2"] .hh-sc{display:block;order:-1;flex:0 0 100%;margin-bottom:28px;text-align:center;text-transform:uppercase}
}
/* phones upright: the time and the 'where' line centred under the "( scroll )" (owner, 2026-11-03) */
@media (max-width:767px) and (orientation:portrait),(max-width:767px) and (min-height:501px){
  html[data-v="2"] .hh-clock{justify-content:center}
  html[data-v="2"] .hh-where{align-self:stretch;text-align:center}
}
/* phones held sideways: the title in the laptop's shape (site.js shapeTitle) and the brand line beside
   row two on the right, from where rows one and three end, as on the laptop (site.js fitHeroRow) (owner, 2026-11-03) */
@media (orientation:landscape) and (max-height:500px){
  /* beside all three rows, centred on them (so on row two's height): taller than row two on a short screen, it no
     longer pushes row three down */
  html[data-v="2"] .hh-tag{grid-row:1 / 4;justify-self:end;align-self:center;margin:0}
}
/* phones upright: no projects circle on the home (its label, arrow and count go with it); the first
   screen stays the title, the brand line and the clock, at least as tall as the screen gets with Safari's bars away.
   Held sideways the circle stays (owner, 2026-11-03) */
@media (max-width:767px) and (orientation:portrait),(max-width:767px) and (min-height:501px){
  html[data-v="2"] :is(.pk,.pk-count){display:none}
  html[data-v="2"] .hh{min-height:100lvh}
}
/* the circle (owner, 2026-11-03): each picture is a quick close shot on a detail chosen for it, sharp
   throughout (owner: the focus blur read odd), at the pictures' full size (site.js), the crop's own zoom set aside, the
   detail brought to the circle's middle as far as the picture's edges allow (its place in the crop, % of the circle):
   co-existere its middle floor, from the person bending down past the trees to the dog, very close as it is a
   vector drawing (owner: the middle floors' people); tld the glass on the table; shaped the inflated stand's right-hand tiers, tilting up along them (owner: clear of the
   curve on the left, where the model's layers cross); nude the round wall
   lamp; bellagio a tilt up the table lamp, from its dish up the stem to
   the shade (owner: not from the bag); concrete amente a wider, slower pan across the whole shelving wall (owner: not
   the sailboat, the rings or the figurine); il perturbante from one dome to the other. The shot is the picture's transform, carried on while the
   next comes in over it, so it never jumps */
html[data-v="2"] .pk-s img{translate:none;scale:none!important;transition:none}
html[data-v="2"] :is(.pk-s.on,.pk-s.was) img{animation:var(--mv) 4.4s cubic-bezier(.2,.7,.25,1) both}
html[data-v="2"] .pk-s:nth-child(7n+1) img{transform-origin:50% 50%!important;--mv:shot-0;--sz:3.9}
html[data-v="2"] .pk-s:nth-child(7n+2) img{transform-origin:50% 50%!important;--mv:shot-1;--sz:2.6}
html[data-v="2"] .pk-s:nth-child(7n+3) img{transform-origin:50% 50%!important;--mv:shot-2;--sz:2.8}
html[data-v="2"] .pk-s:nth-child(7n+4) img{transform-origin:50% 50%!important;--mv:shot-3;--sz:2.7}
html[data-v="2"] .pk-s:nth-child(7n+5) img{transform-origin:50% 50%!important;--mv:shot-4;--sz:3.3}
html[data-v="2"] .pk-s:nth-child(7n+6) img{transform-origin:50% 50%!important;--mv:shot-5;--sz:1.45}
html[data-v="2"] .pk-s:nth-child(7n+7) img{transform-origin:50% 50%!important;--mv:shot-6;--sz:2.3}
/* sharp in Safari (owner, 2026-11-03, the iPad and the iPhone sideways: "pictures in the circle are blurry"): Safari
   draws a picture at its box's size and enlarges that drawing when a transform zooms it, so each picture's box is as
   large as its shot's closest zoom (--sz circles wide, centred on the circle) and the shot zooms it down to the same
   framing as before: translate / --sz, scale / --sz. Under Reduce Motion there is no shot, and the box stays the circle */
@media (prefers-reduced-motion:no-preference){
  html[data-v="2"] .pk-s img{position:absolute;width:calc(var(--sz,1)*100%);height:calc(var(--sz,1)*100%);
    left:calc((1 - var(--sz,1))*50%);top:calc((1 - var(--sz,1))*50%);max-width:none}
}
@keyframes shot-0{0%{transform:translate(-16.615%,5.538%) scale(.9231)}100%{transform:translate(-28%,11%) scale(1)}}
@keyframes shot-1{0%{transform:translate(0%,-1.385%) scale(.6923)}100%{transform:translate(0%,-2%) scale(1)}}
@keyframes shot-2{0%{transform:translate(-27.857%,-28.571%) scale(.9286)}100%{transform:translate(-32%,-12%) scale(1)}}
@keyframes shot-3{0%{transform:translate(14.815%,11.333%) scale(.6667)}100%{transform:translate(31.481%,17%) scale(1)}}
@keyframes shot-4{0%{transform:translate(-1.364%,-15.455%) scale(.9091)}100%{transform:translate(-1.485%,3%) scale(1)}}
@keyframes shot-5{0%{transform:translate(12.069%,9.31%) scale(.931)}100%{transform:translate(-12.966%,12%) scale(1)}}
@keyframes shot-6{0%{transform:translate(21.043%,1.913%) scale(.9565)}100%{transform:translate(-5%,14%) scale(1)}}
/* the cuts take turns (site.js pickup sets .pk-win[data-cut]): a push through (the shot leaving drifts forward as the
   next fades in over it), a slide in from the right and a rise from below (the shot leaving moves on by a third, never
   leaving a gap), a plain crossfade. The slide's own translate, scale and opacity; the slides waiting their turn jump
   to the next cut's start unseen (cut-jump) */
html[data-v="2"] .pk-s{transform:none;transition:opacity .7s cubic-bezier(.7,0,.2,1),translate .75s cubic-bezier(.7,0,.2,1),scale .75s cubic-bezier(.7,0,.2,1)}
html[data-v="2"] .pk-s:not(.on):not(.was){opacity:0}
html[data-v="2"] .pk-s.on{opacity:1;translate:none;scale:none}
html[data-v="2"] .pk-s.was{opacity:1}
html[data-v="2"] .pk-win.cut-jump .pk-s:not(.on):not(.was){transition:none!important}
html[data-v="2"] .pk-win[data-cut="push"] .pk-s:not(.on):not(.was){scale:1.12}
html[data-v="2"] .pk-win[data-cut="push"] .pk-s.was{scale:1.18}
html[data-v="2"] .pk-win[data-cut="right"] .pk-s:not(.on):not(.was){opacity:1;translate:100% 0}
html[data-v="2"] .pk-win[data-cut="right"] .pk-s.was{translate:-30% 0}
html[data-v="2"] .pk-win[data-cut="up"] .pk-s:not(.on):not(.was){opacity:1;translate:0 100%}
html[data-v="2"] .pk-win[data-cut="up"] .pk-s.was{translate:0 -30%}
@media (prefers-reduced-motion:reduce){html[data-v="2"] :is(.pk-s.on,.pk-s.was) img{animation:none}}
/* tablets upright (owner, 2026-11-03, on the iPad): the "what i do" heading's line clear of the
   circle's arrow, which hangs below the circle; no full screen of empty room under its "about me" */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  html[data-v="2"] .s-what{min-height:0;padding-top:calc(var(--g)*3 + 32px);padding-bottom:calc(var(--g)*3)}
}
/* touch screens: a card keeps its hover after it has been touched, so hover shows nothing there; only the card in
   the middle (site.js, .focus) shows its title, colour, name and arrow, never two at once (owner, 2026-11-03, the
   iPad: bellagio's and concrete amente's titles over each other while swiping) */
@media (hover:none){
  .pc:hover:not(.focus){z-index:auto}
  .pc:hover:not(.focus) .pc-img img{filter:grayscale(1) brightness(.6);transform:scale(1.06)}
  .pc:hover:not(.focus) .pc-t{opacity:0}
  .pc:hover:not(.focus) :is(.pc-y,.pc-n,.pc-cr){opacity:0}
  .pc:hover:not(.focus) .pc-o{transform:scale(0)}
}
/* the territory's two marquee rows centred by their ink between the line under "about me" and the footer's line
   (owner, 2026-11-03: on every page that has them, phone and desktop). The two lines stay where they were: the room
   above the rows and the room below (with the footer's own --g) are evened out, less the rows' ink insets, measured on
   their capitals: .085 serif sizes over row one, .065 sans sizes under row two */
html[data-v="2"] .s-terr .sec-h+.mq{margin-top:calc(var(--g)*3.25 + var(--t2)*.0325 - var(--t1)*.0425)}
html[data-v="2"] .s-terr{padding-bottom:calc(var(--g)*2.25 - var(--t2)*.0325 + var(--t1)*.0425)}
/* the blog's title keeps its capitals 24px under the menu's last link (owner, 2026-11-03, iPad sideways: the g of
   'something' stood 3px from the a of 'about'). On touch screens the links have room for a finger, so the list reaches
   lower (its last capitals 6.6 link sizes under its top); the title stays centred where it is already clear */
@media (pointer:coarse) and (min-width:768px) and (min-height:501px){
  html[data-v="2"] main[data-ns="blog"] .sp-h{justify-content:flex-start}
  html[data-v="2"] main[data-ns="blog"] .sp-h::before,html[data-v="2"] main[data-ns="blog"] .sp-h::after{content:"";flex:1 1 0}
  html[data-v="2"] main[data-ns="blog"] .sp-h::before{min-height:calc(var(--g)*.78 + 6.6*var(--f) + 24px - .04*var(--h-s))}
}
/* tablets upright (owner, 2026-11-03, the iPad: "head title too small", "not centred before and after", "hour stays
   under the based text, should be the opposite"): the title as large as the phone's, row two from the page margin
   (site.js shapeTitle), and the brand line beside row two from where rows one and three end, as on the laptop
   (site.js fitHeroRow), so the title and the brand line stand together in the middle where the entry shows them; the
   time over the 'where' line */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  html[data-v="2"] .hh{--tp:var(--g)}
  html[data-v="2"] .hh-tag{grid-row:2;justify-self:end;align-self:center;margin-top:0}
  html[data-v="2"] .hh-clock{bottom:calc(6% + 1.7em)}
  html[data-v="2"] .hh-where{bottom:6%}
}