/* Standard Issue index (Nov 5 2026). Built from a blank stylesheet; shares nothing with the main site or earlier index versions.
   One family: Mona Sans (variable weight and width, SIL OFL 1.1). Colors: white, black and neutral grays only (R=G=B).
   Spacing: 8px base (8 16 24 32 48 72 96 144). Type: 14 / 16 / 18 / 21 / 34 / display (clamped). */
@font-face{font-family:"SX";src:url(/assets/sub/fonts/mona-sans-var.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
:root{--ink:#000;--soft:#575757;--mute:#767676;--off:#b3b3b3;--rule:#e6e6e6;--paper:#fff;--m:clamp(20px,3.4vw,56px);--g:24px;--ease:cubic-bezier(.2,.7,0,1)}
*,*:before,*:after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:"SX",ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:1.55;font-weight:420;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
ul{list-style:none;margin:0;padding:0}h1,p{margin:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* display voice: semi-condensed, firm weight, tight tracking */
.sx-title,.sx-h,.sx-cat{font-stretch:84%;font-weight:640;letter-spacing:-.032em;text-wrap:balance}

/* ---------- hero: seamless full-bleed split, opposite-corner masthead ---------- */
.sx-hero{display:grid;grid-template-columns:1fr 1fr;height:100vh;height:100svh;min-height:660px;max-height:1080px}
.sx-word{display:flex;flex-direction:column;justify-content:space-between;padding:var(--m);padding-top:32px;min-width:0}
.sx-mast,.sx-home{font-size:16px;line-height:1;font-weight:600;letter-spacing:-.01em}
.sx-mast{align-self:flex-start}
.sx-pic{position:relative;overflow:hidden;background:#000}
.sx-pic picture{display:block;width:100%;height:100%}
.sx-pic img{object-position:0 50%}
.sx-home{position:absolute;top:32px;right:var(--m);z-index:2;color:#a3a3a3;font-weight:480;transition:color .3s}
.sx-home:hover{color:#fff}.sx-home:focus-visible{outline-color:#fff}
.sx-title{font-size:clamp(50px,6vw,96px);line-height:.93}
.sx-dek{margin-top:28px;font-size:21px;line-height:1.35;color:var(--soft);font-weight:400;letter-spacing:-.005em}
.sx-read{display:inline-block;font-size:16px;line-height:1;font-weight:600;letter-spacing:-.005em;margin-top:40px;padding-bottom:8px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}


/* ---------- index ---------- */
.sx-index{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:144px var(--m) 168px}
.sx-cats{grid-column:1/4;align-self:start;position:sticky;top:48px}
.sx-cats ul{display:flex;flex-direction:column;gap:6px}
.sx-cat{display:inline-block;padding:0;border:0;background:none;color:var(--mute);font-family:inherit;font-size:34px;line-height:1.08;text-align:left;cursor:default;transition:color .3s}
.sx-js button.sx-cat{cursor:pointer}.sx-js button.sx-cat:hover{color:var(--ink)}
.sx-cat[aria-pressed=true]{color:var(--ink)}
.sx-none{color:var(--off)}
.sx-list{grid-column:4/13;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--g)}
.sx-item{grid-column:1/-1}
.sx-item[hidden]{display:none}
.sx-plate{display:block;position:relative;overflow:hidden;background:#000}
.sx-link{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--g)}
.sx-main .sx-plate{grid-column:1/-1;aspect-ratio:16/9}
.sx-main .sx-plate img{transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.sx-main .sx-text{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;padding-top:40px}
.sx-main .sx-h{grid-column:1/7;font-size:clamp(38px,4.2vw,68px);line-height:.96}
.sx-d{display:block;color:var(--soft)}
.sx-main .sx-d{grid-column:7/10;font-size:18px;padding-top:4px}
.sx-next{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:144px}
.sx-up{grid-column:1/7}.sx-up+.sx-up{grid-column:7/10}
.sx-up .sx-plate{height:clamp(220px,21vw,320px)}
.sx-up .sx-plate img{filter:brightness(.58) contrast(.92)}
.sx-up .sx-text{display:block;padding-top:24px}
.sx-mark{display:block;font-size:14px;line-height:1;font-weight:600;letter-spacing:.005em;color:var(--mute);margin-bottom:14px}
.sx-up .sx-h{display:block;font-size:32px;line-height:1.04;color:var(--mute)}
.sx-up .sx-d{margin-top:10px;font-size:16px;color:var(--mute)}

.sx-foot{display:flex;justify-content:space-between;align-items:baseline;margin:0 var(--m);padding:32px 0 40px;border-top:1px solid var(--rule);font-size:16px;line-height:1;font-weight:600}
.sx-foot a+a{color:var(--mute);font-weight:480;transition:color .3s}.sx-foot a+a:hover{color:var(--ink)}

/* ---------- phones and small tablets ---------- */
@media (max-width:860px){
  .sx-hero{position:relative;grid-template-columns:1fr;height:auto;min-height:0;max-height:none}
  .sx-word{display:contents}
  .sx-mast{position:absolute;top:22px;left:var(--m);z-index:2;color:#fff}.sx-mast:focus-visible{outline-color:#fff}
  .sx-home{top:22px}
  .sx-pic{order:-1;height:52vh;height:52svh;min-height:310px;max-height:520px}
  .sx-pic:before{content:"";position:absolute;inset:0 0 auto;height:96px;z-index:1;background:linear-gradient(#000,transparent);pointer-events:none}
  .sx-pic img{object-position:50% 50%}
  .sx-lead{padding:36px var(--m) 64px}
  .sx-title{font-size:clamp(42px,11.8vw,64px);line-height:.93}
  .sx-dek{margin-top:20px;font-size:19px}
  .sx-read{margin-top:32px}
  .sx-index{grid-template-columns:1fr;padding:0 0 112px}
  .sx-cats{grid-column:1;top:0;z-index:5;background:var(--paper);padding:16px var(--m);margin-bottom:16px;box-shadow:0 1px 0 var(--rule)}
  .sx-cats ul{flex-direction:row;gap:22px}
  .sx-cat{font-size:26px}
  .sx-list{grid-column:1;display:block}
  .sx-link{display:block}
  .sx-main .sx-plate{aspect-ratio:4/3}
  .sx-main .sx-text{display:block;padding:28px var(--m) 0}
  .sx-main .sx-h{display:block;font-size:clamp(34px,9.4vw,52px)}
  .sx-main .sx-d{margin-top:18px;font-size:17px;padding-top:0}
  .sx-next{display:block;margin-top:96px;padding:0 var(--m)}
  .sx-up+.sx-up{margin-top:64px}
  .sx-up .sx-plate{height:auto;aspect-ratio:3/2}
  .sx-up .sx-h{font-size:28px}
  .sx-foot{margin:0 var(--m)}
}

/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .sx-pic img{animation:sx-settle 1.8s var(--ease) both}
  .sx-lead>*{animation:sx-rise 1s var(--ease) both}
  .sx-lead>:nth-child(1){animation-delay:.12s}.sx-lead>:nth-child(2){animation-delay:.24s}.sx-lead>:nth-child(3){animation-delay:.36s}
  @keyframes sx-settle{from{transform:scale(1.06);filter:brightness(.7)}to{transform:none;filter:none}}
  @keyframes sx-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .sx-rv{opacity:0;transform:translateY(36px);transition:opacity .95s var(--ease),transform 1.15s var(--ease)}
  .sx-rv.sx-in{opacity:1;transform:none}
  @media (hover:hover){
    .sx-main:hover .sx-plate img{transform:scale(1.035);filter:brightness(1.08)}
    .sx-read:hover{animation:sx-line .7s var(--ease)}
  }
  @keyframes sx-line{0%{background-size:100% 1.5px;background-position:100% 100%}45%{background-size:0 1.5px;background-position:100% 100%}46%{background-size:0 1.5px;background-position:0 100%}100%{background-size:100% 1.5px;background-position:0 100%}}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease)}
}