/* ══════════════════════════════════════════════════════════════════════════════
   RTM AUDIO v2 — THE HOMEPAGE, and only the homepage.

   Requires /v2/base.css, which owns the tokens, the reset, the bar and the ground.

   THE STRUCTURE, and it is the part that is actually different:
     THRESHOLD   one screen, the mark, one way in. Nothing scrolls. You choose to enter.
     THE ROOM    the six plug-ins as a place you move through, one at a time, each playable.
     THE COUNTER where you buy.

   Reference register: Thorgal and Parallel Universe open with an entrance rather than a homepage;
   Santioni holds a single mark in the dark and makes you wait a beat; Dirac makes the products
   themselves the navigation. All four are brand first and page second.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══ THRESHOLD ═══════════════════════════════════════════════════════════════ */
.threshold{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  background:var(--air);
  transition:opacity 1.1s var(--slow), visibility 1.1s;
  overflow:hidden
}
/* the room you are standing in before you come in. Held far down so the type is the subject and
   the place is only the ground it sits on. */
.th-bg{position:absolute;inset:0;z-index:0;
  background:url("/room/threshold.jpg") center 62% / cover no-repeat;
  opacity:.5;
  transform:scale(1.06);
  animation:settle 9s var(--slow) forwards}
.th-veil{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(70vw 60vh at 50% 46%, rgba(11,11,13,.86), rgba(11,11,13,.55) 55%, rgba(11,11,13,.92)),
    linear-gradient(180deg, rgba(11,11,13,.92), rgba(11,11,13,.35) 45%, rgba(11,11,13,.95))}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1.0)}}
@media(prefers-reduced-motion:reduce){.th-bg{animation:none;transform:none}}
.threshold[data-open="1"]{opacity:0;visibility:hidden}

.th-in{text-align:center;position:relative;z-index:2}
.th-mark{
  font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:.42em;text-indent:.42em;
  font-size:clamp(.7rem,1.3vw,.95rem);
  color:var(--dust);
  opacity:0;animation:rise 1.4s var(--slow) .25s forwards
}
.th-word{
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(3.4rem,13vw,12rem);
  letter-spacing:-.05em;line-height:.84;
  margin-top:calc(var(--u)*3);
  color:var(--chalk);
  opacity:0;animation:rise 1.6s var(--slow) .5s forwards
}
.th-sub{
  margin-top:calc(var(--u)*4);
  font-family:var(--mark);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dust);
  opacity:0;animation:rise 1.4s var(--slow) .95s forwards
}
.th-enter{
  margin-top:calc(var(--u)*6);
  display:inline-flex;align-items:center;gap:calc(var(--u)*2);
  background:transparent;border:1px solid var(--edge);color:var(--chalk);
  font-family:var(--mark);font-size:var(--t-act);letter-spacing:.2em;text-transform:uppercase;
  padding:calc(var(--u)*2.25) calc(var(--u)*4);cursor:pointer;
  opacity:0;animation:rise 1.4s var(--slow) 1.25s forwards;
  transition:border-color .5s var(--slow),background .5s var(--slow),color .5s var(--slow)
}
.th-enter:hover{border-color:var(--lamp);color:var(--lamp)}
.th-enter i{width:6px;height:6px;border-radius:50%;background:var(--lamp);display:block;
  animation:pulse 2.6s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .th-mark,.th-word,.th-sub,.th-enter{animation:none;opacity:1}
  .th-enter i{animation:none}
}

/* the threshold breathes with the room tone once it is audible */
.th-ring{
  position:absolute;left:50%;top:50%;width:min(78vmin,760px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(var(--ring,1));
  border:1px solid var(--edge-2);border-radius:50%;
  transition:transform .12s linear,border-color .6s var(--slow);
  z-index:1;pointer-events:none
}

/* ══ THE ROOM ════════════════════════════════════════════════════════════════ */
/* ⚠ `visibility` here is not decoration: an opacity-0 world is still in the TAB ORDER and the
   accessibility tree, so a keyboard user at the threshold could Tab straight past Enter into
   sixty invisible controls behind the overlay. Hidden means hidden for the keyboard too. */
.world{position:relative;z-index:1;opacity:0;visibility:hidden;
  transition:opacity 1.2s var(--slow) .2s,visibility 0s .2s}
.world[data-open="1"]{opacity:1;visibility:visible;transition:opacity 1.2s var(--slow) .2s,visibility 0s}


/* ── the six, as rooms you move through one at a time ─────────────────────────
   Not a grid, not a list, not sections on a scroll. One product occupies the screen; you move to
   the next. Dirac makes the products the navigation; this goes further and makes them the site. */
.rooms{position:relative}
.room{
  position:relative;min-height:100svh;display:grid;
  grid-template-rows:auto 1fr auto;
  padding:calc(var(--u)*12) calc(var(--u)*4) calc(var(--u)*5);
  /* the room seam: a lit line over a shadow line — a stitch, not a whisper */
  border-bottom:1px solid rgba(239,236,229,.14);
  box-shadow:0 1px 0 rgba(0,0,0,.6)
}
.room-head{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u)*3);
  font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust)}
.room-head .r-no{color:var(--tone)}
/* .82/1.18, not 1/1: a 50/50 split is the one ratio that reads as a template. The render is
   the hero; the type sits on the shared baseline (align end), not floated in the middle. */
.room-body{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:calc(var(--u)*6);align-items:end}
.room-name{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.038em;line-height:.84;
  font-size:clamp(3rem,10.5vw,10rem);color:var(--chalk)
}
.room-line{margin-top:calc(var(--u)*3);font-size:clamp(1rem,1.5vw,1.35rem);
  color:var(--chalk-2);max-width:34ch;line-height:1.55;font-weight:300}
.room-facts{margin-top:calc(var(--u)*4);display:flex;gap:calc(var(--u)*4);flex-wrap:wrap;
  font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.room-facts b{color:var(--tone);font-weight:400}
.room-do{margin-top:calc(var(--u)*5);display:flex;gap:calc(var(--u)*2.5);flex-wrap:wrap;align-items:center}
/* ⚠ One colour for the buy gesture. --tone here made the SAME action a different colour in
   every room — and in room 06 a white button. Identity lives in the number, the facts and the
   instrument; the action is always the lamp. */
.do-play{font-size:var(--t-act)!important;letter-spacing:.14em!important;color:var(--air);
  background:var(--lamp)!important;

  background:var(--tone);color:var(--air);border:0;cursor:pointer;
  font-family:var(--mark);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:calc(var(--u)*2) calc(var(--u)*3.5);transition:filter .3s var(--slow)}
.do-play:hover{filter:brightness(1.12)}
.do-more{font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);border-bottom:1px solid var(--edge);padding-bottom:5px;transition:.3s var(--slow)}
.do-more:hover{color:var(--tone);border-color:var(--tone)}

/* the stage: where the plug-in actually runs, inside the room, not on another page */
.room-stage{position:relative;min-height:min(56vh,520px);border:1px solid var(--edge-2);
  background:#08080a;overflow:hidden}
.room-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
/* The product, photographed. Rendered in Blender on the house rig: HDRI room, one finite area key
   raking, denoising OFF because it eats the surface grain, Standard view transform because filmic
   lifts the black floor. The accent is the only lit hue in the frame. */
.room-shot{width:100%;height:100%;object-fit:cover;display:block}
/* the hover zoom is gone: a photograph that swells on hover is a product card, and it drags a
   measured render down to a marketplace gesture. The render holds still, as objects do. */
.room-stage:has(.inst) .room-shot{display:none}
.room-foot{display:flex;justify-content:space-between;gap:calc(var(--u)*3);flex-wrap:wrap;
  font-family:var(--mark);font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);opacity:.75}

@media(max-width:900px){
  .room{padding:calc(var(--u)*10) calc(var(--u)*2.5) calc(var(--u)*4)}
  .room-body{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .room-name{font-size:14vw}
  .room-stage{min-height:44vh}
}

/* ══ THE COUNTER ═════════════════════════════════════════════════════════════ */
.counter{padding:calc(var(--u)*14) calc(var(--u)*4);text-align:center}
.counter h2{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.032em;line-height:.88;
  font-size:clamp(2.4rem,7vw,6rem);color:var(--chalk);max-width:16ch;margin:0 auto}
.counter p{margin-top:calc(var(--u)*4);color:var(--chalk-2);max-width:44ch;margin-left:auto;
  margin-right:auto;line-height:1.65}
.counter .buy{display:inline-block;margin-top:calc(var(--u)*5);background:var(--lamp);color:var(--air);
  font-family:var(--mark);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding:calc(var(--u)*2.25) calc(var(--u)*4.5);transition:filter .3s var(--slow)}
.counter .buy:hover{filter:brightness(1.1)}
.counter .terms{display:block;margin-top:calc(var(--u)*3);font-family:var(--mark);font-size:var(--t-fine);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}


/* The instrument, mounted inside a room's stage.
   ⚠ `.room-stage.inst`, NOT `.room-stage .inst`. instrument.js adds the class to the mount
   element ITSELF, so the descendant selector never matched a single one of these rules — which
   is why the room showed the player's duplicate product name, blurb and second Buy button under
   a room that had already said all three. One missing character. */
.room-stage.inst{background:transparent;border:0}
.room-stage.inst .inst-ui{padding:calc(var(--u)*3)}
.room-stage.inst .inst-tell{display:none}   /* the room already tells you; no need to repeat it */

/* ══ THE LANES ═══════════════════════════════════════════════════════════════
   A visitor who already knows our names walks the rooms. One who does not arrives with a
   PROBLEM, and this is the door built for them. Generated from the same product table as the
   rooms, so a seventh plug-in brings its lane with it and nothing here is edited by hand.

   Set as a list of questions, not a menu of categories: the question is the thing the visitor
   recognises, and the category name is only how we file it. */
.lanes-v2{padding:calc(var(--u)*14) calc(var(--u)*4) calc(var(--u)*6);max-width:1180px;margin:0 auto}
.lv-head{margin-bottom:calc(var(--u)*7)}
.lv-head h2{margin-top:calc(var(--u)*3);
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.035em;
  line-height:.9;font-size:clamp(2rem,5.5vw,4rem);color:var(--chalk)}
.lv-list{list-style:none;border-top:1px solid var(--edge-2)}
.lv-list a{display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*4);align-items:center;
  padding:calc(var(--u)*3.5) 0;border-bottom:1px solid var(--edge-2);
  transition:background .5s var(--slow),padding-left .5s var(--slow)}
.lv-list a:hover{background:linear-gradient(90deg,rgba(255,255,255,.022),transparent 70%);
  padding-left:calc(var(--u)*2)}
.lv-q{font-size:clamp(1rem,1.8vw,1.45rem);line-height:1.4;color:var(--chalk);font-weight:300}
.lv-l{display:inline-flex;align-items:center;gap:calc(var(--u)*1.5);white-space:nowrap;
  font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust)}
.lv-l i{width:18px;height:1px;background:var(--dust);display:block;
  transition:width .5s var(--slow),background .5s var(--slow)}
.lv-list a:hover .lv-l{color:var(--lamp)}
.lv-list a:hover .lv-l i{width:32px;background:var(--lamp)}
@media(max-width:640px){
  .lv-list a{grid-template-columns:1fr;gap:calc(var(--u)*1.5)}
}

/* ══ THE HOUSE RULES ═════════════════════════════════════════════════════════
   Four promises, and every number in them reads from _data/fleet.json. None is written twice. */
.rules{padding:calc(var(--u)*10) calc(var(--u)*4);max-width:1180px;margin:0 auto}
.rules-lede{margin-top:calc(var(--u)*3);color:var(--chalk-2);max-width:46ch;line-height:1.6;font-weight:300}
.rules-list{list-style:none;counter-reset:r;display:grid;grid-template-columns:1fr 1fr;
  gap:calc(var(--u)*4) calc(var(--u)*7)}
.rules-list li{counter-increment:r;border-top:1px solid var(--edge-2);padding-top:calc(var(--u)*2.5)}
.rules-list li::before{content:counter(r,decimal-leading-zero);display:block;
  font-family:var(--mark);font-size:11px;letter-spacing:.2em;color:var(--lamp);
  margin-bottom:calc(var(--u)*1.5)}
.rules-list b{display:block;font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:-.025em;font-size:1.3rem;color:var(--chalk);margin-bottom:calc(var(--u)*1.5)}
.rules-list span{color:var(--chalk-2);line-height:1.6;font-weight:300}
@media(max-width:760px){.rules-list{grid-template-columns:1fr}}

/* ══ THE REVEAL ══════════════════════════════════════════════════════════════
   Applied by rooms.js only when the reader has NOT asked for reduced motion, so the base state
   here is fully visible: a browser with no JS, or a reader with reduced motion, sees the page
   complete and still. The moving version is the enhancement, never the requirement. */
.will-reveal .slide-core,
.will-reveal .slide-line,
.will-reveal .slide-do,
.will-reveal .mani-grid,
.will-reveal .work,
.will-reveal .room-name,
.will-reveal .room-line,
.will-reveal .room-facts,
.will-reveal .room-do,
.will-reveal .room-stage,
.will-reveal .lv-head,
.will-reveal .lv-list li,
.will-reveal .rules-list li,
.will-reveal h2,
.will-reveal .counter-in{
  opacity:0;transform:translateY(18px)
}
.will-reveal.seen .slide-core,
.will-reveal.seen .slide-line,
.will-reveal.seen .slide-do,
.will-reveal.seen .mani-grid,
.will-reveal.seen .work,
.will-reveal.seen .room-name,
.will-reveal.seen .room-line,
.will-reveal.seen .room-facts,
.will-reveal.seen .room-do,
.will-reveal.seen .room-stage,
.will-reveal.seen .lv-head,
.will-reveal.seen .lv-list li,
.will-reveal.seen .rules-list li,
.will-reveal.seen h2,
.will-reveal.seen .counter-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--slow),transform .7s var(--slow)
}
/* the stagger: each element a beat after the one before it */
.will-reveal.seen .slide-line,.will-reveal.seen .work:nth-child(2){transition-delay:.1s}
.will-reveal.seen .slide-do,.will-reveal.seen .work:nth-child(3){transition-delay:.2s}
.will-reveal.seen .work:nth-child(4){transition-delay:.3s}
.will-reveal.seen .room-line,.will-reveal.seen .lv-list li:nth-child(2),.will-reveal.seen .rules-list li:nth-child(2){transition-delay:.08s}
.will-reveal.seen .room-facts,.will-reveal.seen .lv-list li:nth-child(3),.will-reveal.seen .rules-list li:nth-child(3){transition-delay:.16s}
.will-reveal.seen .room-do,.will-reveal.seen .lv-list li:nth-child(4),.will-reveal.seen .rules-list li:nth-child(4){transition-delay:.24s}
.will-reveal.seen .room-stage,.will-reveal.seen .lv-list li:nth-child(5){transition-delay:.2s}
.will-reveal.seen .lv-list li:nth-child(6){transition-delay:.4s}

/* the product, photographed — lifted at DISPLAY time. The renders are true to the rig; the
   room they hang in is darker than the room they were lit for. */
.room-shot{filter:brightness(1.28) contrast(1.02)}

/* ══════════════════════════════════════════════════════════════════════════════
   THE REFERENCE REBUILD — 2026-09-01, from studying the four sites themselves.
   Dirac: products as numbered pills in the nav; a split problem/answer argument.
   Parallel Universe: the blur reveal; the indexed object catalogue.
   Santioni: one product per screen, the SCREEN IS THE COLOUR, the name colossal
   behind the object, neighbours whispered at the edges.
   Thorgal: the gate (already ours) and content floating in a full-bleed world.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the pills: the catalogue lives in the nav (Dirac) ─────────────────────── */
.b-pills{display:flex;gap:calc(var(--u)*1);align-items:center}
.b-pills a{display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(239,236,229,.22);border-radius:99px;
  padding:6px 12px;font-family:var(--mark);font-size:10px;letter-spacing:.14em;
  transition:border-color .3s var(--slow),color .3s var(--slow)}
.b-pills a i{width:12px;height:12px;border-radius:50%;background:var(--pill);display:block}
.b-pills a span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .45s var(--slow),opacity .3s var(--slow),margin .45s var(--slow)}
.b-pills a:hover{border-color:var(--pill)}
.b-pills a:hover span{max-width:10ch;opacity:1;margin-left:2px}
@media(max-width:1100px){.b-pills{display:none}}

/* ── the manifesto (Dirac split + PU blur) ─────────────────────────────────── */
.manifesto{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--u)*14) calc(var(--u)*4) calc(var(--u)*10);position:relative}
.mani-grid{display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*6);
  max-width:1280px;margin:0 auto;width:100%}
.manifesto h2{font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:-.035em;line-height:.92;color:var(--chalk);
  font-size:clamp(2.2rem,5.6vw,5rem)}
.mani-r{text-align:right;color:var(--lamp)!important;align-self:end}
#mani-wave{display:block;width:100%;max-width:1280px;height:180px;margin:calc(var(--u)*6) auto}
.mani-body{max-width:56ch;margin:0 auto;text-align:center;color:var(--chalk-2);
  font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.7;font-weight:300}
.mani-body span{filter:blur(7px);opacity:.15;transition:filter .5s var(--slow),opacity .5s var(--slow)}
.mani-body span.in{filter:none;opacity:1}
@media(max-width:800px){.mani-grid{grid-template-columns:1fr}.mani-r{text-align:left}}
@media(prefers-reduced-motion:reduce){.mani-body span{filter:none;opacity:1}}

/* ── THE COLLECTION (Santioni, exactly) ────────────────────────────────────── */
.slide{position:relative;min-height:100svh;overflow:hidden;
  background:var(--field);color:var(--air);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--u)*11) calc(var(--u)*4) calc(var(--u)*5)}
.slide-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:calc(var(--u)*9) calc(var(--u)*4) 0;
  font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(11,11,13,.62)}
/* the neighbours, whispered at the edges */
.slide-prev,.slide-next{position:absolute;top:50%;font-family:var(--mark);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(11,11,13,.4);white-space:nowrap}
.slide-prev{left:calc(var(--u)*2);transform:rotate(180deg) translateY(50%);writing-mode:vertical-rl}
.slide-next{right:calc(var(--u)*2);transform:translateY(-50%);writing-mode:vertical-rl}
/* the core: colossal name BEHIND the object */
.slide-core{position:relative;width:min(92vw,1100px);flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center}
.slide-name{position:absolute;inset:auto 0;top:6%;text-align:center;
  font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:-.03em;line-height:.8;color:rgba(11,11,13,.92);
  font-size:clamp(3.4rem,13.5vw,12.5rem);user-select:none;pointer-events:none;
  white-space:nowrap}
.slide-cut{position:relative;z-index:2;width:min(78vw,880px);height:auto;
  margin-top:8%;
  transform:rotate(-7deg);
  filter:drop-shadow(0 34px 60px rgba(11,11,13,.45))}
.slide-cut.missing{display:none}
.slide-title{position:absolute;left:-9999px}   /* the real heading for readers; the display name above is drawn */
.slide-line{position:relative;z-index:3;max-width:52ch;text-align:center;
  color:rgba(11,11,13,.8);line-height:1.6;font-weight:400;margin-top:calc(var(--u)*2)}
.slide-do{position:relative;z-index:3;display:flex;gap:calc(var(--u)*2.5);align-items:center;
  flex-wrap:wrap;justify-content:center;margin-top:calc(var(--u)*3.5)}
.slide .do-play{background:var(--air)!important;color:var(--field)!important;border:0}
.slide .do-more{color:rgba(11,11,13,.85);border-bottom:1px solid rgba(11,11,13,.5);
  font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:2px}
.slide .do-more:hover{color:var(--air);border-color:var(--air)}
.slide-price{font-family:var(--display);font-weight:var(--display-weight);font-size:1.5rem;color:var(--air)}
.slide-stage{position:relative;z-index:4;width:min(96vw,1000px)}
.slide-stage .inst{margin-top:calc(var(--u)*3)}
.slide-foot{position:relative;z-index:3;margin-top:calc(var(--u)*3);
  font-family:var(--mark);font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(11,11,13,.55)}
@media(max-width:700px){
  .slide-prev,.slide-next{display:none}
  .slide-name{white-space:normal}
  .slide-cut{width:94vw;transform:rotate(-5deg)}
}

/* ── THE WORKS (Parallel Universe's catalogue) ─────────────────────────────── */
.works{padding:calc(var(--u)*14) calc(var(--u)*4);max-width:1280px;margin:0 auto}
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10) calc(var(--u)*8);
  margin-top:calc(var(--u)*7)}
.work{display:block}
.work:nth-child(even){transform:translateY(calc(var(--u)*8))}
.work-frame{display:block;border:1px solid var(--edge);padding:calc(var(--u)*1.5);
  transition:border-color .4s var(--slow)}
.work-frame img{display:block;width:100%;height:auto;filter:brightness(1.22)}
.work:hover .work-frame{border-color:var(--chalk-2)}
.work-cap{display:flex;gap:calc(var(--u)*2);align-items:baseline;margin-top:calc(var(--u)*2);
  font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.work-cap b{color:var(--chalk);font-weight:400;letter-spacing:.2em}
.work-cap .wd{margin-left:auto}
@media(max-width:760px){.works-grid{grid-template-columns:1fr}.work:nth-child(even){transform:none}}