/* OG Web Art Director
   Layout: white graph paper (56px squares). Home opener = big animated logo + stacked nav;
   a white sticky bar with the small logo everywhere else. One accent: a black marker stroke. */
:root{
  --paper:#ffffff;
  --ink:#0b0b0a;
  --grid:rgba(11,11,10,.07);
  --mute:#64645f;
  --soft:#efefec;
  --film-mute:#a9a9a4;
  --ink-2:#1c1c1a;
  --rule-dark:#3a3a37;
  --display:"Archivo","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cell:56px;
  --gut:clamp(16px,3.2vw,48px);
  --sweep:.55s cubic-bezier(.7,0,.2,1);
  --adminbar:0px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
body.admin-bar{--adminbar:32px}
@media (max-width:782px){ body.admin-bar{--adminbar:46px} }
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
[hidden]{display:none!important}
.wrap{padding-inline:var(--gut);max-width:1680px;margin-inline:auto}
.mono{font-family:var(--mono);font-size:12px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 12px;text-decoration:none}
.skip:focus{left:8px}
#projets,#apropos,#blog,#contact{scroll-margin-top:96px}

/* ---------- marker: black bar sweeps left to right, letters turn white exactly behind it ---------- */
.mk{position:relative;display:inline-block;isolation:isolate;padding:0 .1em;margin-inline:-.1em;max-width:calc(100% + .2em)}
.mk::before{content:"";position:absolute;inset:.02em 0 .04em;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform var(--sweep);z-index:0}
.mk > span{position:relative;z-index:1;color:transparent;
  background:linear-gradient(90deg,var(--paper) 50%,var(--ink) 50%);background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;transition:background-position var(--sweep)}
.mk.on::before,.is-current .mk::before{transform:scaleX(1)}
.mk.on > span,.is-current .mk > span{background-position:0 0}
.hov{text-decoration:none}
.hov:hover .mk::before,.hov:focus-visible .mk::before{transform:scaleX(1)}
.hov:hover .mk > span,.hov:focus-visible .mk > span{background-position:0 0}
@media (hover:none){ .hov:hover:not(.is-current) .mk::before{transform:scaleX(0)} .hov:hover:not(.is-current) .mk > span{background-position:100% 0} }
.on-dark .mk::before,.contact .mk::before{background:var(--paper)}
.on-dark .mk > span,.contact .mk > span{background-image:linear-gradient(90deg,var(--ink) 50%,var(--paper) 50%)}

/* ---------- white bar ---------- */
.bar{position:fixed;left:0;right:0;top:var(--adminbar);z-index:40;background:var(--paper);padding-top:env(safe-area-inset-top,0px);
  transform:translateY(-130%);transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.bar.on{transform:none}
.bar.always{position:sticky;transform:none}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.bar-logo{display:block;width:clamp(108px,11vw,160px);line-height:0;flex:none}
.bar-logo video{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.nav-bar{display:flex;gap:clamp(6px,1.6vw,22px);flex-wrap:wrap;justify-content:flex-end}
.nav-bar a{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(19px,1.9vw,30px);line-height:1}

/* ---------- home opener ---------- */
.opener{padding-block:clamp(16px,2.6vw,36px) 0}
.op-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,4vw,64px);align-items:center}
.big-logo{display:block;width:min(100%,920px);line-height:0}
.big-logo video{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.nav-big{display:flex;flex-direction:column;align-items:flex-end;gap:4px;align-self:center}
.nav-big a{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.4vw,72px);line-height:.92}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:clamp(16px,2.4vw,32px)}
.meta > *{padding-block:10px 12px;padding-right:12px;min-width:0}
.meta > * + *{padding-left:12px;border-left:1px solid var(--ink)}
.m-cell{display:flex;flex-direction:column;gap:3px}
.m-k{color:var(--mute)}
.m-v{color:var(--ink);font-weight:500;align-self:flex-start;max-width:100%}
a.m-v{text-decoration:none}
.since{font-variant-numeric:tabular-nums;text-transform:none}
.dot{display:inline-block;width:.62em;height:.62em;background:var(--ink);margin-right:.55em;vertical-align:.02em;animation:og-blink 1.6s steps(1,end) infinite}
@keyframes og-blink{50%{opacity:0}}

/* ---------- statement ---------- */
.hero{padding-block:clamp(28px,5vw,72px) clamp(28px,5vw,64px)}
.statement{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;
  font-size:clamp(54px,12.4vw,224px);line-height:.9;letter-spacing:-.005em;overflow-wrap:break-word}
.statement .asd{font-family:var(--serif);font-weight:400;font-style:normal;text-transform:none;font-stretch:100%;font-size:.72em;letter-spacing:-.012em;padding-inline:.04em}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(24px,3.4vw,44px)}
.hero-foot p{margin:0;max-width:44ch}

/* ---------- band ---------- */
.band{background:var(--ink);color:var(--paper);overflow:hidden}
.band-track{display:flex;width:max-content;animation:og-slide 38s linear infinite}
.band-track span{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.4vw,48px);line-height:1;padding:.32em .5em;white-space:nowrap;display:flex;align-items:center;gap:1em}
.band-track span::after{content:"";width:.34em;height:.34em;background:var(--paper);display:inline-block}
@keyframes og-slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,8vw,128px) 0}
.sec.first,.first{padding-top:clamp(32px,5vw,80px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;padding-bottom:14px}
.sec-title{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(48px,8vw,128px);line-height:.86;overflow-wrap:break-word}
.sec-side{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--ink);background:var(--paper)}
.toggle button{font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:0;padding:8px 14px;cursor:pointer}
.toggle button + button{border-left:1px solid var(--ink)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.all-link{white-space:nowrap}

/* ---------- projects: list ---------- */
.proj:not(.all) .more{display:none}
.plist{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem) auto;align-items:center;gap:0 20px;border-top:1px solid var(--ink);padding:12px 12px;color:inherit;transition:color .2s}
.r-type{color:var(--mute)}
.r-go{text-align:right;white-space:nowrap}
.row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.r-name{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,108px);line-height:1.02;letter-spacing:-.012em;min-width:0}
.r-thumb{display:none}
@media (hover:hover) and (pointer:fine){
  .plist:hover .row:not(:hover){color:var(--mute)}
  .plist:hover .row:not(:hover) .mk > span{background-image:linear-gradient(90deg,var(--paper) 50%,var(--mute) 50%)}
}
.empty{padding-block:24px;border-top:1px solid var(--ink)}

/* ---------- projects: contact sheet ---------- */
.sheet{padding-top:6px;padding-bottom:6px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.tile{display:block;text-decoration:none;color:inherit}
.t-img{position:relative;display:block;aspect-ratio:1;max-width:100%;overflow:hidden;background:var(--ink-2)}
.t-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.1,1),filter .6s}
.t-img::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:180px;opacity:.2;mix-blend-mode:overlay;pointer-events:none;transition:opacity .6s}
.tile .cap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 16px;padding:10px 0;border-bottom:1px solid var(--ink)}
.cap-tx{display:flex;flex-direction:column;gap:7px;min-width:0}
.tile .cap strong{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:-.01em}
.cap-tx .mono{color:var(--mute)}
.cap-go{white-space:nowrap;padding-bottom:1px}
.is-photo{filter:grayscale(1) contrast(1.06)}
@media (hover:hover) and (pointer:fine){ .tile:hover .t-img img{transform:scale(1.035);filter:invert(1)} .tile:hover .t-img img.is-photo{filter:none} .tile:hover .t-img::after{opacity:0} }
.tile.is-on .t-img img.is-photo{filter:none}
.tile.is-on .t-img::after{opacity:0}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(14px,2vw,24px);color:var(--mute)}
.sheet-foot a{color:var(--ink)}

/* the big plus */
.more-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,28px);width:100%;border-bottom:1px solid var(--ink);padding:14px 12px;cursor:pointer}
.more-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.plus{position:relative;width:clamp(44px,5vw,76px);aspect-ratio:1;background:var(--ink);transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--paper);transform:translate(-50%,-50%)}
.plus::before{width:56%;height:12%}
.plus::after{width:12%;height:56%;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.more-btn:hover .plus{transform:rotate(90deg)}
.proj.all .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.more-label{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.4vw,72px);line-height:.95;min-width:0}

/* floating frame */
.cf{position:fixed;left:0;top:0;width:clamp(220px,23vw,360px);pointer-events:none;z-index:50;opacity:0;transition:opacity .18s;will-change:transform}
.cf.on{opacity:1}
.cf img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--soft);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.cf .mono{background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-top:0;padding:6px 8px}

/* ---------- services ---------- */
.svc{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.svc li{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:center;gap:8px 24px;border-top:1px solid var(--ink);padding:16px 14px 18px;transition:color .3s .05s}
.svc li::before{content:"";position:absolute;inset:-1px 0 0;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform var(--sweep);z-index:-1}
.svc-name{display:flex;align-items:center;gap:.26em}
.svc-name::before{content:"";flex:none;width:.2em;height:.2em;background:currentColor;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.svc-tags{display:block;margin-top:10px;color:var(--mute);transition:color .3s .05s}
.svc li:hover,.svc li.is-on{color:var(--paper)}
.svc li:hover::before,.svc li.is-on::before{transform:scaleX(1)}
.svc li:hover .svc-name::before,.svc li.is-on .svc-name::before{transform:rotate(45deg) scale(.8)}
.svc li:hover .svc-tags,.svc li.is-on .svc-tags{color:var(--film-mute)}
.svc-name{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,90px);line-height:1;letter-spacing:-.012em;min-width:0}
/* the way into "De l’idée à la page": a black block under the list */
.proc-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,72px);margin-top:clamp(28px,4vw,56px);padding:clamp(26px,4vw,64px);background:var(--ink);color:var(--paper);text-decoration:none;overflow:hidden}
.pb-tx{display:flex;flex-direction:column;min-width:0}
.pb-kick{color:var(--film-mute)}
.pb-title{display:block;margin-top:clamp(12px,1.4vw,20px);font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(52px,6.6vw,124px);line-height:.86}
.pb-title .asd{font-family:var(--serif);font-weight:400;text-transform:none;font-stretch:100%;font-size:.7em;letter-spacing:-.012em}
.pb-sub{display:block;margin-top:clamp(16px,1.8vw,26px);font-family:var(--serif);font-size:clamp(21px,1.9vw,32px);line-height:1.1;letter-spacing:-.01em;max-width:26ch}
.pb-go{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,3vw,44px)}
.pb-arrow{position:relative;display:block;width:clamp(72px,8vw,140px);height:2px;background:currentColor;transition:width .7s cubic-bezier(.2,.7,.1,1)}
.pb-arrow::after{content:"";position:absolute;right:1px;top:50%;width:13px;height:13px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.proc-band:hover .pb-arrow,.proc-band:focus-visible .pb-arrow{width:clamp(120px,14vw,240px)}
.proc-band:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pb-skw{position:relative;display:block;aspect-ratio:880/640;min-width:0}
.pb-sk{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--paper);stroke-linecap:round;stroke-linejoin:round}
.pb-sk path{stroke-dasharray:1 1;stroke-dashoffset:0}
.proc-band.is-drawn .pb-sk path{animation:pt-draw 2.4s cubic-bezier(.55,.1,.3,1) both}
.proc-band:hover .pb-sk path{animation:pb-redraw 1.8s cubic-bezier(.55,.1,.3,1) both}
@keyframes pb-redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .proc-band .pb-sk path{animation:none !important} }
.svc p{margin:0;font-size:clamp(16px,1.25vw,19px);max-width:40ch}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}
.lede{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,56px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
.nw{white-space:nowrap}
.about-text > p{margin:0 0 1em;font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:46ch}
.about-text > p:first-child strong,.lede strong{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:1.02em;letter-spacing:0}
.about-text > p:first-child{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,56px);line-height:1.04;letter-spacing:-.012em;max-width:none;text-wrap:balance;margin-bottom:.7em}
.about-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}
.about-split.no-pt{grid-template-columns:minmax(0,1fr)}
.about-col{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,48px);min-width:0}
.portrait{position:relative;margin:0;min-width:0}
.pt-img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1);background:var(--ink-2)}
.portrait::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:3/4;background-image:var(--grain);background-size:180px;opacity:.1;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.portrait figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--ink);color:var(--mute)}
.pt-legend{flex-basis:100%;color:var(--mute);border-top:1px solid var(--soft);padding-top:6px}
.portrait figcaption span:first-child{color:var(--ink)}
.facts{margin:0;display:grid;border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:12px;border-bottom:1px solid var(--ink);padding-block:12px}
.facts dt{color:var(--mute)}
.facts dd{margin:0;font-family:var(--sans);font-size:17px;letter-spacing:0;text-transform:none;min-width:0;overflow-wrap:anywhere}

/* ---------- about: home block ---------- */
.about-intro{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px)}
.lede-2{margin:0;font-family:var(--serif);font-size:clamp(24px,2.3vw,36px);line-height:1.12;letter-spacing:-.01em;max-width:30ch;text-wrap:pretty}
.about-sub{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.62;max-width:52ch}
.about-info{display:flex;flex-direction:column}
.about-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:12px;border-top:1px solid var(--ink);padding-block:14px 18px}
.about-row > .mono{color:var(--mute);padding-top:.3em}
.about-row p{margin:0;font-size:17px;line-height:1.6;max-width:56ch}
.about-more{display:inline-block;margin-top:clamp(16px,2vw,24px);color:var(--ink)}
.about-split.is-home{align-items:stretch}
.is-home .portrait{min-height:420px}
.is-home .pt-img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.is-home .portrait::before{bottom:0;aspect-ratio:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- about page: the way into "De l’idée à la page" (next to the portrait) ---------- */
.about-split.is-page{align-items:stretch}
.is-page .portrait{width:100%;aspect-ratio:3/4}
.is-page .pt-img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.is-page .portrait::before{bottom:0;aspect-ratio:auto}
.pt-teaser{flex:1 1 auto;min-height:clamp(190px,14vw,240px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);gap:clamp(16px,2.2vw,36px);border-top:1px solid var(--ink);padding-top:clamp(14px,1.6vw,22px);color:var(--ink);text-decoration:none}
.pt-tx{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-width:0}
.pt-kick{display:block;color:var(--mute)}
.pt-title{display:block;margin-top:8px;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(28px,2.5vw,46px);line-height:.92}
.pt-sub{display:block;margin-top:10px;font-family:var(--serif);font-size:clamp(19px,1.5vw,25px);line-height:1.12;letter-spacing:-.01em;max-width:21ch}
.pt-go{display:inline-block;align-self:flex-start}
.pt-skw{position:relative;display:block;min-width:0}
.pt-sk{position:absolute;inset:0;display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.pt-sk path{stroke-dasharray:1 1;stroke-dashoffset:0}
.pt-teaser:hover .pt-sk path,.pt-teaser:focus-visible .pt-sk path{animation:pt-draw 1.8s cubic-bezier(.55,.1,.3,1) both}
@keyframes pt-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .pt-teaser:hover .pt-sk path{animation:none} }

/* ---------- about page: the four dates ---------- */
.tl{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.tl-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(18px,2.2vw,32px) clamp(20px,4vw,72px);border-top:1px solid var(--ink);padding-block:clamp(10px,1.4vw,18px) clamp(40px,5vw,80px)}
.tl-side,.tl-body{grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;min-width:0}
.tl-side{grid-column:1;justify-self:start}
.tl-body{grid-column:2;max-width:36rem}
.tl-item:nth-child(even) .tl-side{grid-column:2;justify-self:end}
.tl-item:nth-child(even) .tl-body{grid-column:1}
@supports not (grid-template-rows:subgrid){ .tl-side,.tl-body{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2.2vw,32px)} }
.tl-year{display:block;align-self:start;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:clamp(120px,19vw,340px);line-height:.76;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.tl-item:nth-child(even) .tl-year{text-align:right}
.tl-head{align-self:end}
.tl-text{align-self:start}
.tl-ph{position:relative;margin:0;width:0;min-width:100%;background:var(--ink-2);overflow:hidden}
.tl-ph::before{content:"";display:block;padding-top:50%}
.tl-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){ .tl-img{animation:tl-in linear both;animation-timeline:view();animation-range:entry 0% cover 38%} }
}
@keyframes tl-in{from{clip-path:inset(0 100% 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
.tl-name{margin:0 0 .3em;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.2vw,52px);line-height:.95}
.tl-quote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,54px);line-height:1.04;letter-spacing:-.014em;text-wrap:balance}
.tl-txt{margin:0 0 .9em;font-size:clamp(16px,1.2vw,18px);line-height:1.62;max-width:48ch}
.tl-txt:last-child{margin-bottom:0}

/* ---------- about page: point of view ---------- */
.vis-title{line-height:1}
.vis-title .mk::before{top:-.06em}
.vis-title .mk + .mk::before,.vis-title .mk + .mk > span{transition-delay:.12s}
.hov.vis-title.is-on .mk::before{transform:scaleX(1)}
.hov.vis-title.is-on .mk > span{background-position:0 0}
.vis-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:start;padding-top:clamp(20px,3vw,40px)}
.vis-txt p{margin:0 0 1em;font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:46ch}
.manifesto{margin-top:clamp(80px,12vw,200px);padding-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--ink)}

/* ---------- articles: cards ---------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.posts.n-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.posts.n-1{grid-template-columns:minmax(0,1fr)}
.post{min-width:0;border-left:1px solid var(--ink)}
.post:nth-child(3n+1){border-left:0}
.posts-all .post:nth-child(n+4){border-top:1px solid var(--ink)}
.post a{display:flex;flex-direction:column;gap:14px;height:100%;padding:18px 20px 22px}
.post:nth-child(3n+1) a{padding-left:12px}
.post h3{margin:0;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3vw,50px);line-height:.96;text-wrap:balance}
.post p{margin:0;max-width:38ch}
.post .read{margin-top:auto}
.post .cat{color:var(--mute)}
.og-pages,.navigation.pagination{margin-top:28px}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav-links .page-numbers{border:1px solid var(--ink);padding:8px 12px;text-decoration:none;background:var(--paper)}
.nav-links .page-numbers.current{background:var(--ink);color:var(--paper)}

/* ---------- an article: the top line (the way back, the date) ---------- */
.ps-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:12px}

/* ---------- an article ---------- */
.article{max-width:1680px}
.art-head{max-width:1100px}
.art-title{margin:clamp(20px,3vw,40px) 0 0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(48px,7.4vw,132px);line-height:.88;text-wrap:balance;overflow-wrap:break-word}
.art-lede{margin:clamp(18px,2.4vw,28px) 0 0;font-family:var(--serif);font-size:clamp(26px,2.8vw,42px);line-height:1.1;letter-spacing:-.012em;max-width:30ch}
.art-cover{margin:clamp(28px,4vw,56px) 0 0}
.art-cover img{width:100%;height:auto;display:block}
.article .entry{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--ink);padding-top:clamp(24px,3vw,40px)}
.art-sign{margin-top:40px;color:var(--mute)}

/* ---------- running text ---------- */
.entry{font-size:clamp(17px,1.3vw,20px);line-height:1.62}
.entry > *{max-width:68ch}
.entry > .alignwide,.entry > .alignfull,.entry > figure{max-width:100%}
.entry p{margin:0 0 1.1em}
.entry h2{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(32px,3.4vw,54px);line-height:.95;margin:1.6em 0 .5em}
.entry h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1.1;margin:1.4em 0 .4em}
.entry a{text-decoration-thickness:1px;text-underline-offset:.18em}
.entry blockquote{margin:1.6em 0;padding-left:20px;border-left:4px solid var(--ink);font-family:var(--serif);font-size:clamp(26px,2.4vw,38px);line-height:1.15}
.entry img{height:auto}
.entry ul,.entry ol{padding-left:1.2em}
.page-entry{border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}

/* ---------- contact page: the text and the links at the left, the form at the right ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px);align-items:start}
.contact-side{display:flex;flex-direction:column;gap:clamp(20px,3vw,40px);min-width:0}
.contact-side .about-text > p{max-width:30ch}
.contact-side .about-text > p:first-child{font-size:clamp(26px,2.6vw,40px);line-height:1.08}
.contact-links{display:grid;border-top:1px solid var(--ink)}
.contact-links a{display:flex;flex-direction:column;gap:8px;padding-block:14px 18px;border-bottom:1px solid var(--ink);min-width:0}
.contact-links .big{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,54px);line-height:.95;overflow-wrap:anywhere}
/* the form: a label over each box, a thin frame on the paper, a thick one while writing */
.cform{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,22px)}
.cf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,22px)}
.cf-field{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0}
.cf-field label{color:var(--mute)}
.cf-field input,.cf-field textarea{all:unset;box-sizing:border-box;display:block;width:100%;min-width:0;font-family:var(--sans);font-size:clamp(17px,1.3vw,20px);line-height:1.4;color:var(--ink);padding:13px 16px;border:1px solid var(--ink);background:var(--paper);border-radius:0;transition:box-shadow .15s}
.cf-field input:focus,.cf-field textarea:focus{box-shadow:inset 0 0 0 1px var(--ink)}
.cf-field textarea{min-height:10em;resize:none;white-space:pre-wrap;overflow-wrap:anywhere}
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0}
.cf-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-top:4px}
.cf-foot .mono{color:var(--mute)}
.cf-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.45em;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1;padding:.58em .95em .62em;background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);transition:background .2s,color .2s}
.cf-btn:hover,.cf-btn:focus-visible{background:var(--paper);color:var(--ink)}
.cf-note{margin:0 0 clamp(16px,2vw,24px);font-family:var(--serif);font-size:clamp(22px,2vw,32px);line-height:1.1;letter-spacing:-.01em;text-wrap:pretty}

/* ---------- 404 ---------- */
.nf .lede{margin:24px 0 32px}

/* ---------- footer ---------- */
.contact{background:var(--ink);color:var(--paper);margin-top:clamp(64px,9vw,140px)}
.contact .wrap{padding-block:clamp(40px,6vw,96px) 0}
.contact.slim .wrap{padding-top:0}
.c-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.c-title{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(56px,11vw,200px);line-height:.84}
.c-title a{text-decoration:none}
.c-head .mono{color:var(--film-mute);max-width:30ch;margin:0}
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--paper);margin-top:clamp(24px,3.4vw,48px)}
.links a{display:flex;flex-direction:column;gap:8px;padding:16px 16px 20px 0;min-width:0}
.links a + a{padding-left:16px;border-left:1px solid var(--paper)}
.links .big{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.2vw,64px);line-height:.95;overflow-wrap:anywhere}
.links .mono{color:var(--film-mute)}
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;border-top:1px solid var(--rule-dark);margin-top:clamp(40px,6vw,80px);padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));color:var(--film-mute)}
.contact.slim .foot{margin-top:0;border-top:0}
.foot-logo{display:block;width:120px;line-height:0}
.foot-logo video{width:100%;height:auto;display:block;filter:invert(1);mix-blend-mode:screen}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--paper);text-decoration:underline}

/* ---------- responsive ---------- */
/* ---------- shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px) clamp(14px,2vw,28px);border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}
.prod{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.prod-img{display:block;aspect-ratio:1;overflow:hidden;background:var(--soft)}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.prod-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 16px;padding:10px 0;border-bottom:1px solid var(--ink)}
.prod-tx{display:flex;flex-direction:column;gap:7px;min-width:0}
.prod-cap strong{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:-.01em}
.prod-tx .mono{color:var(--mute)}
.prod-price{white-space:nowrap;padding-bottom:1px}
.og-btn{align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;gap:.45em;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(18px,1.5vw,24px);line-height:1;padding:.55em .9em .6em;background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);transition:background .2s,color .2s}
@media (hover:hover) and (pointer:fine){ .prod:hover .prod-img img{transform:scale(1.035)} .prod:hover .og-btn,.prod:focus-visible .og-btn{background:var(--paper);color:var(--ink)} }
.prod-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,40px)}
.slider{min-width:0}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:var(--soft);outline-offset:4px}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;margin:0;scroll-snap-align:start;aspect-ratio:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.sl-stage{position:relative}
.sl-arrow{all:unset;box-sizing:border-box;position:absolute;top:50%;transform:translateY(-50%);width:clamp(44px,4.2vw,60px);aspect-ratio:1;display:grid;place-items:center;background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer;transition:background .2s,color .2s}
.sl-arrow.prev{left:0}
.sl-arrow.next{right:0}
.sl-arrow svg{width:56%;height:auto;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.sl-arrow:hover,.sl-arrow:focus-visible{background:var(--paper);color:var(--ink)}
.sl-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.slider-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ink)}
.thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-top:12px}
.thumb{all:unset;box-sizing:border-box;cursor:pointer;display:block;aspect-ratio:1;background:var(--soft);outline:1px solid transparent;outline-offset:-1px;opacity:.5;transition:opacity .2s}
.thumb.is-on{opacity:1;outline-color:var(--ink)}
.thumb:focus-visible{outline:2px solid var(--ink);outline-offset:2px;opacity:1}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prod-side{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);min-width:0}
.prod-title{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(40px,5vw,84px);line-height:.9;overflow-wrap:break-word}
.prod-price-big{margin:0;font-family:var(--serif);font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.01em}
.prod-text > p{margin:0 0 1em;font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:46ch}
.prod-text > p:last-child{margin-bottom:0}
.buy{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,22px);border-top:1px solid var(--ink);padding-top:clamp(16px,2vw,24px)}
.sizes{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;min-width:0}
.sizes legend{color:var(--mute);padding:0;margin-bottom:10px}
.size{position:relative;display:inline-block}
.size input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.size span{display:inline-flex;align-items:center;justify-content:center;min-width:3.6em;padding:12px 14px;border:1px solid var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.08em;line-height:1;cursor:pointer;background:var(--paper);color:var(--ink);transition:background .15s,color .15s}
.size input:checked + span{background:var(--ink);color:var(--paper)}
.size input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
#formulaire{scroll-margin-top:calc(var(--adminbar) + 110px)}
@media (max-width:900px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meta > :nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--ink)}
  .meta > :nth-child(4){border-top:1px solid var(--ink)}
  .row{grid-template-columns:minmax(0,1fr) minmax(0,12rem)}
  .row .r-go{display:none}
  .svc li{grid-template-columns:minmax(0,1fr)}
  .proc-band{grid-template-columns:minmax(0,1fr)}
  .pb-skw{order:-1;max-width:440px}
  .about-grid,.about-split,.vis-grid,.contact-grid,.prod-grid{grid-template-columns:minmax(0,1fr)}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-item{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:clamp(14px,4vw,24px) 0}
  .tl-side,.tl-body{display:contents}
  .tl-year{order:1}
  .tl-head{order:2}
  .tl-ph{order:3;width:100%;min-width:0;max-width:560px}
  .tl-ph::before{padding-top:60%}
  .tl-text{order:4;max-width:36rem}
  .tl-item:nth-child(even) .tl-ph{justify-self:end}
  .pt-teaser{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0}
  .pt-skw{aspect-ratio:880/640;max-height:260px}
  .portrait{order:-1;max-width:560px}
  .is-home .portrait{min-height:0;aspect-ratio:3/4}
  .posts{grid-template-columns:minmax(0,1fr)}
  .post{border-left:0}
  .post + .post{border-top:1px solid var(--ink)}
  .post a,.post:nth-child(3n+1) a{padding-inline:0}
}
@media (max-width:640px){
  .op-inner{grid-template-columns:minmax(0,1fr)}
  .nav-big{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 14px;padding-top:0}
  .nav-big{gap:2px 12px}
  .nav-big a{font-size:clamp(21px,6.4vw,28px)}
  .since{white-space:normal}
  .nav-bar a{font-size:17px}
  .nav-bar{gap:4px 10px}
  .row{grid-template-columns:minmax(0,1fr) 72px;gap:4px 14px;padding:12px 0}
  .row .r-name{grid-column:1;grid-row:1}
  .row .r-type{grid-column:1;grid-row:2;color:var(--mute)}
  .r-thumb{display:block;grid-column:2;grid-row:1 / span 2;width:72px;height:72px;object-fit:cover;background:var(--soft);align-self:center}
  .svc li{padding:14px 10px 16px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile .cap{grid-template-columns:minmax(0,1fr);gap:8px}
  .cap-go{justify-self:end}
  .more-btn{grid-template-columns:auto minmax(0,1fr);padding:12px 0}
  .more-btn .mono{grid-column:2}
  .links{grid-template-columns:minmax(0,1fr)}
  .cf-two{grid-template-columns:minmax(0,1fr)}
  .shop-grid{grid-template-columns:minmax(0,1fr)}
  .prod-cap{grid-template-columns:minmax(0,1fr)}
  .thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .links a + a{padding-left:0;border-left:0;border-top:1px solid var(--paper)}
  .facts div{grid-template-columns:5.5rem minmax(0,1fr)}
  .about-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .about-row p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--sweep:0s linear}
  .band-track{animation:none}
  .bar,.t-img img,.plus,.plus::after,.svc li,.svc li::before,.prod-img img{transition:none}
  .slides{scroll-behavior:auto}
}

/* ---------- a project's page: only for a project with a write-up (the others open the client's site) ---------- */
.cs-title{margin:clamp(20px,3vw,40px) 0 0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(64px,14vw,248px);line-height:.86;letter-spacing:-.005em;overflow-wrap:break-word}
.cs-lede{margin:clamp(18px,2.4vw,32px) 0 0;font-size:clamp(20px,1.9vw,30px);font-weight:500;line-height:1.3;max-width:46ch;text-wrap:pretty}
.cs-body{margin-top:clamp(28px,4vw,56px)}
.cs-shot{margin:0;border:1px solid var(--ink);background:var(--paper);min-width:0}
.cs-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-bottom:1px solid var(--ink)}
.cs-bar i{flex:none;width:10px;height:10px;border:1px solid var(--ink);border-radius:50%}
.cs-bar span{margin-left:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-shot img{display:block;width:100%;height:auto}
.cs-sec{padding-top:clamp(64px,9vw,140px)}
.cs-k{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding-top:10px}
.cs-k span + span{color:var(--mute)}
.cs-h{margin:clamp(16px,2vw,28px) 0 0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(48px,8vw,128px);line-height:.86;text-wrap:balance;overflow-wrap:break-word}
.cs-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,4vw,72px);align-items:end}
.cs-p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:44ch;text-wrap:pretty}
.cs-sec > .cs-shot,.cs-sec > .cs-duo,.cs-sec > .cs-sw,.cs-sec > .cs-phones,.cs-sec > .cs-scores{margin-top:clamp(28px,4vw,56px)}
.cs-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.cs-duo > :nth-child(2){margin-top:clamp(40px,7vw,120px)}
.cs-sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink)}
.cs-sw li{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0;min-height:clamp(180px,24vw,380px);padding:clamp(14px,1.6vw,22px);background:var(--c,var(--ink));color:var(--t,var(--paper))}
.cs-sw strong{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:clamp(28px,3.4vw,56px);line-height:1;overflow-wrap:anywhere}
.cs-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--ink);border-top:0;background:var(--paper)}
.cs-aa{display:flex;align-items:center;justify-content:center;padding:.1em 0;border-right:1px solid var(--ink);font-family:var(--display);font-stretch:62%;font-weight:900;font-size:clamp(120px,18vw,300px);line-height:.8;color:var(--a,var(--ink))}
.cs-type-tx{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(18px,2.4vw,36px);min-width:0}
.cs-type-tx .mono{color:var(--mute)}
.cs-sample{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(44px,6vw,104px);line-height:.88;color:var(--a,var(--ink))}
.cs-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,48px);max-width:1180px;margin-inline:auto}
.cs-phone{margin:0;min-width:0}
.cs-phone:nth-child(odd){margin-top:clamp(28px,5vw,80px)}
.cs-ph{border:clamp(5px,.6vw,9px) solid var(--ink);border-radius:clamp(24px,3vw,44px);overflow:hidden;background:var(--ink)}
.cs-ph img{display:block;width:100%;height:auto}
.cs-phone figcaption{padding-top:12px}
.cs-sec.cs-perf{margin-top:clamp(64px,9vw,140px);padding:clamp(22px,4vw,64px);background:var(--ink);color:var(--paper)}
.cs-perf .cs-k{border-top:0;padding-top:0}
.cs-perf .cs-k span + span{color:var(--film-mute)}
.cs-scores{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--paper);border-bottom:1px solid var(--paper)}
.cs-scores div{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,3vw,48px);padding:14px 16px 18px 0;min-width:0}
.cs-scores div + div{padding-left:16px;border-left:1px solid var(--rule-dark)}
.cs-scores dt{color:var(--film-mute)}
.cs-scores dd{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:clamp(72px,11vw,200px);line-height:.8;font-variant-numeric:lining-nums}
.cs-src{margin:16px 0 0;color:var(--film-mute)}
.cs-end{margin-top:clamp(64px,9vw,140px);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.cs-site{display:flex;flex-direction:column;gap:10px;padding:14px 0 20px;color:var(--ink)}
.cs-site-big{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(30px,8vw,140px);line-height:.88;overflow-wrap:anywhere}
.cs-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:14px;color:var(--mute)}
.cs-foot a{color:var(--ink)}
.cs-perf .cs-h{font-size:clamp(34px,6vw,104px)}
.cs-crop{overflow:hidden}
.cs-crop img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (max-width:900px){
.cs-split{grid-template-columns:minmax(0,1fr);align-items:start}
.cs-sw{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-scores{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-scores div:nth-child(3){padding-left:0;border-left:0}
.cs-scores div:nth-child(n+3){border-top:1px solid var(--rule-dark)}
}
@media (max-width:640px){
.cs-duo{grid-template-columns:minmax(0,1fr)}
.cs-duo > :nth-child(2){margin-top:0}
.cs-type{grid-template-columns:minmax(0,1fr)}
.cs-aa{border-right:0;border-bottom:1px solid var(--ink)}
.cs-phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
.cs-phones::-webkit-scrollbar{display:none}
.cs-phone{flex:0 0 68%;scroll-snap-align:center}
.cs-phone:nth-child(odd){margin-top:0}
.cs-bar{height:28px;padding:0 10px}
.cs-bar i{width:8px;height:8px}
}

.cs-sec > .cs-logos,.cs-sec > .cs-trio{margin-top:clamp(28px,4vw,56px)}
.cs-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.cs-logo{margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:13/7;border:1px solid var(--ink);background:var(--c,var(--paper));overflow:hidden;min-width:0}
.cs-logo.is-wide{grid-column:1 / -1;aspect-ratio:13/5}
.cs-logo img{display:block;width:100%;height:100%;object-fit:contain}
.cs-logo.is-pad img{box-sizing:border-box;padding:5%}
.cs-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--ink);border-top:0;background:var(--paper)}
.cs-spec > div{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.4vw,36px);min-width:0}
.cs-spec > div + div{border-left:1px solid var(--ink)}
.cs-spec .mono{color:var(--mute)}
.cs-spec-aa{font-size:clamp(96px,13vw,220px);line-height:.85;color:var(--a,var(--ink))}
.cs-spec-tx{font-size:clamp(18px,1.6vw,26px);line-height:1.35;color:var(--a,var(--ink));max-width:30ch}
.cs-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.cs-bottle{margin:0;min-width:0}
.cs-b-img{aspect-ratio:4/5;border:1px solid var(--ink);overflow:hidden;background:#f4ebdd}
.cs-b-img img{display:block;width:100%;height:100%;object-fit:cover}
.cs-bottle figcaption{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.cs-b-name{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.2vw,52px);line-height:.9}
.cs-b-meta{display:flex;align-items:center;gap:8px}
.cs-b-meta i{flex:none;width:12px;height:12px;background:var(--c,var(--ink))}
@media (max-width:640px){
.cs-logos{grid-template-columns:minmax(0,1fr)}
.cs-spec{grid-template-columns:minmax(0,1fr)}
.cs-spec > div + div{border-left:0;border-top:1px solid var(--ink)}
.cs-trio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
.cs-trio::-webkit-scrollbar{display:none}
.cs-bottle{flex:0 0 72%;scroll-snap-align:center}
}

/* numbers on paper (same grid as the scores) and a ruled list of decisions */
.cs-scores.cs-facts{border-color:var(--ink)}
.cs-facts div + div{border-left-color:var(--ink)}
.cs-facts dt{color:var(--mute)}
.cs-facts dd{font-size:clamp(64px,9vw,168px)}
.cs-sec:not(.cs-perf) .cs-src{color:var(--mute)}
.cs-sec > .cs-list{margin-top:clamp(28px,4vw,56px)}
.cs-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.cs-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,7fr) minmax(0,5fr);gap:clamp(12px,3vw,48px);align-items:baseline;padding:clamp(16px,2vw,26px) 0;border-top:1px solid var(--ink)}
.cs-list .mono{color:var(--mute)}
.cs-list strong{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,56px);line-height:.9;overflow-wrap:break-word}
.cs-list p{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.55;max-width:46ch;text-wrap:pretty}
.cs-list code{font-family:var(--mono);font-size:.9em}
@media (max-width:900px){
.cs-facts div:nth-child(n+3){border-top-color:var(--ink)}
.cs-list li{grid-template-columns:minmax(0,1fr) minmax(0,9fr)}
.cs-list p{grid-column:2}
}
@media (max-width:640px){
.cs-list li{grid-template-columns:minmax(0,1fr);gap:10px}
.cs-list p{grid-column:auto}
}