/* Round 2 · Journal options (jr-a magazine, jr-b filmstrip, jr-c index) */

/* ============================================================ A · editorial magazine */
.jr-a__list,.jr-c__list{list-style:none;margin:0;padding:0}
.jr-a{padding:clamp(5rem,12vh,8.5rem) var(--gut) clamp(4rem,10vh,7rem);max-width:var(--max);margin:0 auto}
.jr-a__mast{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.jr-a__mast .lbl{color:var(--red);display:block;margin-bottom:1.2rem}
.jr-a__mast-r{max-width:34ch;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;color:var(--navy)}
.jr-a__mast-r p{margin:0;color:var(--ink-70);font-size:.98rem}
.jr-a__rule{display:flex;justify-content:space-between;gap:1rem;margin:clamp(2rem,5vh,3.4rem) 0 clamp(1.8rem,4vh,3rem);padding:.7rem 0;border-top:3px double var(--navy);border-bottom:1px solid var(--navy);font-family:var(--f-it);font-style:italic;font-size:.92rem;color:var(--navy)}
.jr-a__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4.5vw,5rem);align-items:start}
.jr-a__feat{display:block;color:var(--navy)}
.jr-a__fimg{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--sky)}
.jr-a__cam{position:absolute;inset:-7%;transform:translate3d(var(--cx,0px),var(--cy,0px),0) scale(var(--cs,1));will-change:transform}
.jr-a__cam img{width:100%;height:100%;object-fit:cover}
.jr-a__tag{position:absolute;left:1rem;top:1rem;background:var(--red);color:#fff;padding:.5em .95em;border-radius:999px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.jr-a__fbody{padding-top:1.6rem}
.jr-a__meta{font-size:.78rem;letter-spacing:.06em;color:var(--ink-50)}
.jr-a__ft{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(1.9rem,3.1vw,3.3rem);line-height:1;letter-spacing:-.01em;margin:.8rem 0 1.1rem;max-width:20ch}
.jr-a__fx{color:var(--ink-70);max-width:56ch;font-size:1.02rem}
.jr-a__read{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-it);font-style:italic;font-size:1.1rem;border-bottom:1px solid currentColor;padding-bottom:.2rem;margin-top:.4rem}
.jr-a__read .ic,.jr-a__list .ic{transition:transform var(--t-hov) var(--e-out)}
.jr-a__feat:hover .jr-a__read{color:var(--red)}
.jr-a__feat:hover .jr-a__read .ic{transform:translateX(5px)}
.jr-a__side{position:relative}
.jr-a__more{display:block;color:var(--red);margin-bottom:.4rem}
.jr-a__list li{border-bottom:1px solid var(--line)}
.jr-a__list a{position:relative;display:grid;grid-template-columns:3.4rem 1fr auto;align-items:center;gap:1rem;padding:1.45rem 0;color:var(--navy);transition:padding .5s var(--e-out)}
.jr-a__n{font-family:var(--f-disp);font-size:2.3rem;line-height:1;color:var(--ink-50);transition:color .4s}
.jr-a__t small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin-bottom:.35rem}
.jr-a__t b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(1.15rem,1.45vw,1.45rem);line-height:1.12;text-transform:uppercase}
.jr-a__th{display:none}
.jr-a__list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e-out)}
.jr-a__list a:hover,.jr-a__list a:focus-visible{padding-left:.8rem}
.jr-a__list a:hover .jr-a__n,.jr-a__list a:focus-visible .jr-a__n{color:var(--red)}
.jr-a__list a:hover::after,.jr-a__list a:focus-visible::after{transform:scaleX(1)}
.jr-a__list a:hover .ic{transform:translateX(5px);color:var(--red)}
.jr-a__float{position:absolute;left:0;top:0;width:min(300px,24vw);aspect-ratio:4/5;pointer-events:none;z-index:3;opacity:0;transform:translate3d(var(--fx,0px),var(--fy,0px),0) rotate(var(--fr,0deg)) scale(.86);transition:opacity .45s,transform 0s;border-radius:4px;overflow:hidden;box-shadow:0 40px 70px -34px rgba(16,15,75,.6)}
.jr-a__float.is-on{opacity:1}
.jr-a__fl{position:absolute;inset:0}
.jr-a__fl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .45s,transform 1s var(--e-out)}
.jr-a__fl img.is-on{opacity:1;transform:scale(1)}

/* ============================================================ B · filmstrip */
.jr-b{background:var(--navy);padding:clamp(5rem,12vh,8rem) 0 clamp(4rem,10vh,6.5rem);overflow:hidden}
.jr-b__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem;padding:0 var(--gut);max-width:var(--max);margin:0 auto clamp(2.4rem,5vh,3.6rem)}
.jr-b__head .lbl{color:#ff5a60;display:block;margin-bottom:1.2rem}
.jr-b__ctl{display:flex;flex-direction:column;align-items:flex-end;gap:1.4rem}
.jr-b__lede{max-width:34ch;text-align:right;font-size:.98rem;margin:0}
.jr-b__nav{display:flex;align-items:center;gap:.5rem}
.jr-b__ct{font-family:var(--f-disp);font-size:1rem;color:var(--on-dark-70);margin-right:.8rem}
.jr-b__ct b{font-weight:400;font-size:1.7rem;color:#fff}
.jr-b__nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.jr-b__nav button:hover{background:#fff;color:var(--navy);border-color:#fff}
.jr-b__nav button:first-of-type .ic{transform:rotate(180deg)}
.jr-b__all{margin-left:.6rem}
.jr-b__strip{display:flex;gap:clamp(1rem,1.6vw,1.6rem);overflow-x:auto;overflow-y:hidden;padding:2.2rem var(--gut) 2.6rem;scroll-padding:0 var(--gut);scrollbar-width:none;perspective:1400px;cursor:grab;user-select:none;-webkit-user-select:none;scroll-snap-type:x mandatory;transform:translate3d(var(--sx,0px),0,0)}
.jr-b__strip::-webkit-scrollbar{display:none}
.jr-b__strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.jr-b__strip.is-drag a{pointer-events:none}
.jr-b__card{position:relative;flex:0 0 clamp(270px,27vw,410px);aspect-ratio:3/4.3;border-radius:6px;overflow:hidden;background:var(--navy-3);scroll-snap-align:start;transform:rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0);transform-origin:50% 50%;will-change:transform;-webkit-user-drag:none}
.jr-b__img{position:absolute;inset:0;overflow:hidden}
.jr-b__cam{position:absolute;inset:0 -14%;transform:translate3d(var(--ix,0px),0,0)}
.jr-b__cam img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.jr-b__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,52,.15) 0%,rgba(10,9,52,0) 30%,rgba(10,9,52,.55) 58%,rgba(10,9,52,.94) 100%)}
.jr-b__no{position:absolute;right:1.1rem;top:.9rem;font-family:var(--f-disp);font-size:2.4rem;line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.jr-b__t{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.5rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.jr-b__t .lbl{color:#ff8a8f;font-size:.64rem}
.jr-b__t h3{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(1.3rem,1.75vw,1.75rem);line-height:1.04;color:#fff}
.jr-b__t h3 .rv{padding-bottom:.08em;margin-bottom:-.08em}
.jr-b__t p{font-size:.86rem;line-height:1.5;margin:0;color:var(--on-dark-70);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s .25s,transform .8s .25s var(--e-out)}
.jr-b__go{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-it);font-style:italic;font-size:.98rem;color:#fff;opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s .35s,transform .8s .35s var(--e-out)}
.jr-b__card.is-in .jr-b__t p,.jr-b__card.is-in .jr-b__go{opacity:1;transform:none}
.jr-b__card.is-in .jr-b__t h3 .rv>i{transform:translate3d(0,0,0)}
.jr-b__card:hover .jr-b__go .ic{transform:translateX(4px)}
.jr-b__go .ic{transition:transform var(--t-hov) var(--e-out)}
.jr-b__card--end{background:var(--red);display:flex;flex-direction:column;justify-content:space-between;padding:1.8rem 1.6rem}
.jr-b__card--end .lbl{color:#fff}
.jr-b__endt{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(2rem,2.8vw,2.8rem);line-height:1;color:#fff}
.jr-b__endt em{display:block;font-family:var(--f-it);font-style:italic;text-transform:none;color:var(--navy)}
.jr-b__card--end .jr-b__go{opacity:1;transform:none}
.jr-b__bar{height:1px;background:var(--line-dark);margin:0 var(--gut);max-width:var(--max);position:relative}
.jr-b__bar i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:#ff5a60;transform-origin:0 50%;transform:scaleX(var(--bp,.15))}

/* ============================================================ C · index with live preview */
.jr-c{padding:clamp(5rem,12vh,8.5rem) var(--gut) clamp(4rem,10vh,7rem);max-width:var(--max);margin:0 auto;overflow-anchor:none}
.jr-c__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.2rem,5vh,3.6rem)}
.jr-c__head .lbl{color:var(--red);display:block;margin-bottom:1.2rem}
.jr-c__hr{max-width:32ch;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;color:var(--navy)}
.jr-c__hr p{margin:0;color:var(--ink-70);font-size:.98rem}
.jr-c__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.jr-c__list{border-top:1px solid var(--navy)}
.jr-c__row{border-bottom:1px solid var(--line);position:relative}
.jr-c__row>a{display:grid;grid-template-columns:3rem 1fr 8.5rem;align-items:baseline;gap:1.2rem;padding:1.5rem 0;color:var(--navy);transition:opacity .45s}
.jr-c__row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--e-out)}
.jr-c__n{font-family:var(--f-disp);font-size:1rem;color:var(--ink-50);transition:color .4s}
.jr-c__t{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(1.45rem,2.3vw,2.45rem);line-height:1.02;letter-spacing:-.01em;transition:transform .6s var(--e-out),color .4s}
.jr-c__m{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);text-align:right}
.jr-c__m small{display:block;font-size:.76rem;letter-spacing:.04em;text-transform:none;margin-top:.2rem}
.jr-c__list:hover .jr-c__row:not(.is-on)>a,.jr-c__list.is-dim .jr-c__row:not(.is-on)>a{opacity:.38}
.jr-c__row.is-on .jr-c__n{color:var(--red)}
.jr-c__row.is-on .jr-c__t{transform:translate3d(.9rem,0,0)}
.jr-c__row.is-on::after{transform:scaleX(1)}
.jr-c__more{display:none}
.jr-c__pv{position:sticky;top:calc(var(--hdr) + 1.4rem)}
.jr-c__pimg{position:relative;aspect-ratio:4/3.3;overflow:hidden;border-radius:4px;background:var(--sky)}
.jr-c__cam{position:absolute;inset:-7%;transform:translate3d(var(--cx,0px),var(--cy,0px),0);will-change:transform}
.jr-c__cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity .7s var(--e-out),transform 1.6s var(--e-out)}
.jr-c__cam img.is-on{opacity:1;transform:scale(1)}
.jr-c__pno{position:absolute;right:1rem;bottom:.4rem;font-family:var(--f-disp);font-size:clamp(4rem,6vw,6.4rem);line-height:1;color:#fff;text-shadow:0 4px 30px rgba(10,9,52,.4)}
.jr-c__pmeta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.3rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.jr-c__pmeta .lbl{color:var(--red)}
.jr-c__pmeta small{font-size:.78rem;color:var(--ink-50)}
.jr-c__px{margin:1rem 0 0;font-family:var(--f-it);font-style:italic;font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.45;color:var(--navy);min-height:5.8em}
.jr-c__px .rv{padding-bottom:.08em;margin-bottom:-.08em}
.jr-c__pread{display:inline-flex;align-items:center;gap:.6em;margin-top:1.4rem;font-family:var(--f-it);font-style:italic;font-size:1.05rem;color:var(--navy);border-bottom:1px solid currentColor;padding-bottom:.2rem;transition:color .3s}
.jr-c__pread:hover{color:var(--red)}
.jr-c__pread .ic{transition:transform var(--t-hov) var(--e-out)}.jr-c__pread:hover .ic{transform:translateX(5px)}
.jr-c__px.is-out .rv>i{transform:translate3d(0,-112%,0);transition-duration:.35s;transition-delay:calc(var(--k,0) * .03s)}
.jr-c__pmeta>*{transition:opacity .35s}
.jr-c.is-swap .jr-c__pmeta>*{opacity:0}

/* ============================================================ phone */
@media (max-width:899px){
  .jr-a{padding:4.2rem 1rem 3.4rem}
  .jr-a__mast{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .jr-a__rule{font-size:.8rem}
  .jr-a__rule span:nth-child(3){display:none}
  .jr-a__grid{grid-template-columns:1fr;gap:2.6rem}
  .jr-a__ft{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .jr-a__list a{grid-template-columns:2.4rem 1fr 72px;gap:.9rem;padding:1.1rem 0}
  .jr-a__list a>.ic{display:none}
  .jr-a__n{font-size:1.7rem}
  .jr-a__t b{font-size:1.06rem}
  .jr-a__th{display:block;width:72px;height:72px;border-radius:4px;overflow:hidden;background:var(--sky)}
  .jr-a__th img{width:100%;height:100%;object-fit:cover}
  .jr-a__float{display:none}
  .jr-a__list a:hover{padding-left:0}

  .jr-b{padding:4.2rem 0 3.4rem}
  .jr-b__head{grid-template-columns:1fr;padding:0 1rem;gap:1.4rem}
  .jr-b__ctl{align-items:flex-start}
  .jr-b__lede{text-align:left}
  .jr-b__nav button{display:none}
  .jr-b__strip{padding:1.6rem 1rem 2rem;scroll-padding:0 1rem;cursor:auto;transform:none}
  .jr-b__card{flex-basis:78vw}
  .jr-b__bar{margin:0 1rem}

  .jr-c{padding:4.2rem 1rem 3.4rem}
  .jr-c__head{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .jr-c__hr p{display:none}
  .jr-c__grid{grid-template-columns:1fr}
  .jr-c__pv{display:none}
  .jr-c__row>a{grid-template-columns:2.2rem 1fr;gap:.2rem .8rem;padding:1.2rem 0}
  .jr-c__m{grid-column:2;text-align:left;font-size:.64rem}
  .jr-c__m small{display:inline;margin-left:.6em}
  .jr-c__t{font-size:clamp(1.3rem,6vw,1.65rem)}
  .jr-c__row.is-on .jr-c__t{transform:none}
  .jr-c__list:hover .jr-c__row:not(.is-on)>a,.jr-c__list.is-dim .jr-c__row:not(.is-on)>a{opacity:1}
  .jr-c__row::after{display:none}
  .jr-c__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--e-out)}
  .jr-c__more>div{overflow:hidden;min-height:0}
  .jr-c__row.is-open .jr-c__more{grid-template-rows:1fr}
  .jr-c__mimg{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--sky);margin-top:.2rem}
  .jr-c__mimg .jr-c__cam img{opacity:1;transform:none}
  .jr-c__more p{font-family:var(--f-it);font-style:italic;font-size:1.05rem;line-height:1.45;color:var(--navy);margin:1rem 0 .8rem}
  .jr-c__read{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:500;color:var(--red);margin-bottom:1.4rem}
  .jr-c__more>div>*{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s,transform .9s var(--e-out)}
  .jr-c__row.is-open .jr-c__more>div>*{opacity:1;transform:none;transition-delay:.15s}
  .jr-c__row.is-open .jr-c__more>div>p{transition-delay:.25s}
  .jr-c__row.is-open .jr-c__more>div>.jr-c__read{transition-delay:.35s}
}
@media (prefers-reduced-motion:reduce){
  .jr-b__t p,.jr-b__go{opacity:1;transform:none}
  .jr-b__t h3 .rv>i{transform:none}
}