/* Styles for the "rue" showcase variants. Every rule is scoped under .sc-rue-a / .sc-rue-b.
   The one hot accent of the site lives here and nowhere else. */
.sc-rue-a,.sc-rue-b{--rue:#d7361f}

/* ---------- host header recast: enormous serif title, first letter in the accent ---------- */
.sc-rue-a .sc-title,.sc-rue-b .sc-title{font-size:clamp(112px,24vw,400px);line-height:.8;letter-spacing:-.045em;margin-left:-.03em}
.sc-rue-a .sc-title::first-letter,.sc-rue-b .sc-title::first-letter{color:var(--rue)}
.sc-rue-a .sc-kicker .sc-num,.sc-rue-b .sc-kicker .sc-num{color:var(--rue)}
.sc-rue-a .sc-link:hover,.sc-rue-b .sc-link:hover{color:var(--rue)}
.sc-rue-a .rue-a,.sc-rue-b .rue-b{position:relative}

/* ======================================================================
   A · Cortège
   ====================================================================== */
.sc-rue-a .mq{position:relative;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-family:var(--sans);font-weight:600;font-size:clamp(16px,2.1vw,30px);letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--plaster)}
.sc-rue-a .mq-track{display:inline-flex;will-change:transform}
.sc-rue-a .mq-track>span{display:inline-block;padding-right:.9em}
.sc-rue-a .mq-track>span i{font-style:normal;color:var(--rue)}
.sc-rue-a .mq-notes{margin-top:5vh;padding:12px 0;font-family:var(--mono);font-weight:400;font-size:clamp(10px,.9vw,13px);letter-spacing:.22em;color:var(--dim)}
.sc-rue-a .is-still .mq-track{white-space:normal;display:block;padding:0 var(--gutter)}
.sc-rue-a .is-still .mq-track>span{display:inline}

.sc-rue-a .flow{display:flex;flex-direction:column;gap:clamp(18px,3vh,40px);padding:5vh 0 0;will-change:transform}
.sc-rue-a .cut{position:relative;width:var(--w,70vw);margin:0;overflow:hidden;will-change:transform}
.sc-rue-a .cut.from-right{margin-left:auto}
.sc-rue-a .cut a{display:block;overflow:hidden;background:#141110}
.sc-rue-a .cut .ph{position:relative;aspect-ratio:var(--ar,21/9);overflow:hidden}
.sc-rue-a .cut img{position:absolute;inset:-12% 0;height:124%;width:100%;object-fit:cover;object-position:var(--pos,50% 40%);filter:contrast(1.12) brightness(.88);transition:filter .5s;will-change:transform}
.sc-rue-a .cut a:hover img{filter:contrast(1.12) brightness(1)}
.sc-rue-a .is-still .cut img{inset:0;height:100%}
.sc-rue-a .cut figcaption{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding:12px var(--gutter) 0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sc-rue-a .cut.from-right figcaption{justify-content:flex-end;text-align:right}
.sc-rue-a .cut figcaption b{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:0;line-height:1;color:var(--rue)}
.sc-rue-a .cut figcaption q{quotes:"\201C" "\201D";font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--plaster);opacity:.85;max-width:44ch}
.sc-rue-a .cut figcaption q::before{content:open-quote}
.sc-rue-a .cut figcaption q::after{content:close-quote}
.sc-rue-a .pair{display:grid;grid-template-columns:var(--cols,2fr 3fr);gap:clamp(10px,1.6vw,24px);padding:0 var(--gutter);align-items:end}
.sc-rue-a .pair .cut{width:100%;margin:0}
.sc-rue-a .pair .cut figcaption{padding-left:0;padding-right:0}
.sc-rue-a .strip-wrap{position:relative;overflow:hidden;padding:2vh 0}
.sc-rue-a .strip{display:flex;gap:clamp(10px,1.4vw,22px);padding:0 var(--gutter);width:max-content;will-change:transform}
.sc-rue-a .strip .cut{width:min(46vw,560px);margin:0;flex:none}
.sc-rue-a .strip .cut:nth-child(even){margin-top:6vh}
.sc-rue-a .strip .cut .ph{aspect-ratio:4/3}
.sc-rue-a .strip .cut figcaption{padding-left:0;padding-right:0}
.sc-rue-a .is-still .strip-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sc-rue-a .redrule{height:4px;background:var(--rue);margin:6vh var(--gutter) 0;transform-origin:left;transform:scaleX(0)}
.sc-rue-a .is-still .redrule{transform:none}
@media (max-width:900px){
  .sc-rue-a .cut{--w:88vw}
  .sc-rue-a .pair{grid-template-columns:1fr 1fr}
  .sc-rue-a .strip .cut{width:74vw}
  .sc-rue-a .cut figcaption{padding:10px var(--gutter) 0;gap:10px}
  .sc-rue-a .cut figcaption q{font-size:14px;max-width:none}
  .sc-rue-a .cut figcaption b{font-size:19px}
}

/* ======================================================================
   B · Marche
   ====================================================================== */
.sc-rue-b .mr-pin{position:relative}
.sc-rue-b .mr-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--soot)}
.sc-rue-b .mr-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(rgba(10,9,8,.7),transparent);z-index:2;pointer-events:none}
.sc-rue-b .mr-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(transparent,rgba(10,9,8,.9));z-index:2;pointer-events:none}
/* the chant, huge, behind */
.sc-rue-b .mr-words{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:baseline;white-space:nowrap;font-family:var(--serif);font-size:clamp(120px,34vh,360px);line-height:1;letter-spacing:-.04em;color:rgba(233,225,212,.075);pointer-events:none;will-change:transform;padding-left:40vw}
.sc-rue-b .mr-words span{padding-right:.3em}
.sc-rue-b .mr-words span:nth-child(even){font-style:italic}
.sc-rue-b .mr-words i{font-style:normal;color:var(--rue);opacity:.5;padding-left:.3em}
/* the march */
.sc-rue-b .mr-track{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-start;width:max-content;will-change:transform}
.sc-rue-b .mr-cell{position:relative;flex:none;width:calc(var(--w,50) * 1vw);height:100%;margin:0 0 0 calc(var(--ml,0) * 1vw)}
.sc-rue-b .mr-cell.top{height:74%}
.sc-rue-b .mr-cell.bot{height:74%;align-self:flex-end}
.sc-rue-b .mr-cell.gap{pointer-events:none}
.sc-rue-b .mr-cell a{display:block;position:relative;height:100%;overflow:hidden;background:#141110;box-shadow:-18px 0 50px -20px rgba(0,0,0,.9)}
.sc-rue-b .mr-cell img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);filter:contrast(1.12) brightness(.86);transition:filter .5s}
.sc-rue-b .mr-cell a:hover img{filter:contrast(1.12) brightness(1)}
.sc-rue-b .mr-cell figcaption{position:absolute;left:18px;top:84px;z-index:3;display:flex;flex-direction:column;gap:6px;max-width:min(30ch,calc(100% - 36px));pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--plaster);text-shadow:0 1px 14px rgba(0,0,0,.9)}
.sc-rue-b .mr-cell.bot figcaption{top:18px}
.sc-rue-b .mr-cell figcaption b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1;letter-spacing:0;color:var(--rue)}
.sc-rue-b .mr-cell figcaption q{quotes:"\201C" "\201D";font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.3;letter-spacing:0;text-transform:none;opacity:.9}
.sc-rue-b .mr-cell figcaption q::before{content:open-quote}
.sc-rue-b .mr-cell figcaption q::after{content:close-quote}
/* lead and tail cells */
.sc-rue-b .mr-lead{width:min(46vw,640px);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) 22vh}
.sc-rue-b .mr-lead .k{margin:0 0 18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.sc-rue-b .mr-lead .t,.sc-rue-b .mr-tail .t{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,4.6vw,76px);line-height:.95;letter-spacing:-.02em;color:var(--plaster)}
.sc-rue-b .mr-lead .h{margin:26px 0 0;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rue)}
.sc-rue-b .mr-lead .h::after{content:"";width:48px;height:1px;background:var(--rue)}
.sc-rue-b .mr-tail{width:min(44vw,560px);display:flex;align-items:flex-end;padding:0 var(--gutter) 22vh}
.sc-rue-b .mr-tail .t{color:var(--rue)}
/* the date ticker along a red thread */
.sc-rue-b .mr-tick{position:absolute;left:var(--gutter);right:var(--gutter);bottom:5vh;z-index:3;pointer-events:none}
.sc-rue-b .mr-now{display:block;margin-bottom:16px;font-family:var(--serif);font-size:clamp(26px,3.4vw,54px);line-height:1;letter-spacing:-.01em;color:var(--plaster)}
.sc-rue-b .mr-now b{font-weight:400;color:var(--rue)}
.sc-rue-b .mr-rule{position:relative;height:1px;background:rgba(215,54,31,.5)}
.sc-rue-b .mr-dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--rue);box-shadow:0 0 18px rgba(215,54,31,.85)}
.sc-rue-b .mr-dates{position:relative;height:16px;margin-top:10px}
.sc-rue-b .mr-dates span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .3s}
.sc-rue-b .mr-dates span:first-child{transform:none}
.sc-rue-b .mr-dates span:last-child{transform:translateX(-100%)}
.sc-rue-b .mr-dates span.on{color:var(--rue)}
/* still version: a native horizontal scroller, every date shown */
.sc-rue-b .is-still .mr-stage{height:auto;overflow:visible}
.sc-rue-b .is-still .mr-stage::before,.sc-rue-b .is-still .mr-stage::after,.sc-rue-b .is-still .mr-words,.sc-rue-b .is-still .mr-dot{display:none}
.sc-rue-b .is-still .mr-track{position:relative;inset:auto;width:auto;height:72vh;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:0 var(--gutter)}
.sc-rue-b .is-still .mr-cell{scroll-snap-align:start}
.sc-rue-b .is-still .mr-cell figcaption{top:18px}
.sc-rue-b .is-still .mr-tick{position:relative;left:auto;right:auto;bottom:auto;margin:5vh var(--gutter) 0}
.sc-rue-b .is-still .mr-now{display:none}
@media (max-width:900px){
  .sc-rue-b .mr-cell{width:calc(var(--w,50) * 2.1vw);margin-left:calc(var(--ml,0) * 1.4vw)}
  .sc-rue-b .mr-cell.gap{width:calc(var(--w,10) * 1.4vw)}
  .sc-rue-b .mr-lead{width:84vw;padding-bottom:24vh}
  .sc-rue-b .mr-tail{width:80vw;padding-bottom:24vh}
  .sc-rue-b .mr-words{font-size:clamp(90px,26vh,200px);padding-left:60vw}
  .sc-rue-b .mr-cell figcaption{top:76px;left:14px}
  .sc-rue-b .mr-cell figcaption q{display:none}
  .sc-rue-b .mr-dates{display:none}
  .sc-rue-b .mr-now{margin-bottom:12px}
  .sc-rue-b .is-still .mr-track{height:60vh}
}