/* Slow Playthrough Quarterly — nuravexoli.pro */
:root{
  --page:#fbfaf6;
  --page-2:#f2f0e8;
  --page-3:#e8e5d9;
  --text:#232a24;
  --text-2:#4c574d;
  --text-3:#7f8a80;
  --line:#ded9c9;
  --line-2:#c9c3ad;
  --sage:#3c5c48;
  --sage-2:#527a60;
  --rust:#a15a34;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --meas:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--serif);font-size:18.5px;line-height:1.74;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--sage);text-decoration:none}
a:hover{color:var(--rust)}
.holder{width:100%;max-width:var(--meas);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rust)}

/* masthead: centred, no top strip, thick double rule */
.masthead{background:var(--page);border-bottom:1px solid var(--line)}
.masthead .holder{padding-top:34px;padding-bottom:26px;text-align:center}
.emblem{display:inline-flex;flex-direction:column;align-items:center;gap:10px;color:var(--text)}
.emblem:hover{color:var(--text)}
.emblem img{width:44px;height:44px}
.emblem .title{font-size:clamp(1.7rem,3.6vw,2.35rem);font-weight:600;letter-spacing:.008em;line-height:1.06}
.emblem .strapline{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3)}
.issueline{margin-top:16px;font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.issueline b{color:var(--sage);font-weight:700}

/* nav: centred, double rule */
.mainnav{border-top:3px double var(--line-2);border-bottom:3px double var(--line-2);background:var(--page)}
.mainnav .holder{display:flex;align-items:center;justify-content:center;gap:4px;min-height:52px;flex-wrap:wrap}
.mainnav a{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);padding:9px 17px}
.mainnav a:hover{color:var(--rust)}
.mainnav a.on{color:var(--sage);box-shadow:inset 0 -2px 0 var(--sage)}
.navbtn{display:none;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line-2);border-radius:2px;padding:9px 16px;cursor:pointer;color:var(--text-2)}

/* banner: full-bleed image with caption below, no overlay text */
.banner{border-bottom:1px solid var(--line);background:var(--page-2)}
.banner figure{margin:0}
.banner img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover}
.banner .cap{max-width:var(--meas);margin:0 auto;padding:16px 26px;font-family:var(--sans);font-size:12px;color:var(--text-3);letter-spacing:.02em}

/* opening statement block */
.statement{border-bottom:1px solid var(--line);background:var(--page)}
.statement .holder{max-width:820px;padding-top:44px;padding-bottom:44px;text-align:center}
.statement h1{margin:12px 0 18px;font-size:clamp(1.7rem,3.9vw,2.6rem);font-weight:600;letter-spacing:-.022em;line-height:1.2}
.statement p{margin:0 auto;max-width:660px;font-size:19.5px;color:var(--text-2)}

/* layout */
.frame{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:60px;align-items:start;padding:52px 0 78px}
.column{min-width:0}
.margin{min-width:0;display:flex;flex-direction:column;gap:32px;position:sticky;top:26px}

/* section rule */
.rulehead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line-2);padding-bottom:9px;margin-bottom:32px;flex-wrap:wrap}
.rulehead h2{margin:0;font-size:1.42rem;font-weight:600;letter-spacing:-.014em}
.rulehead a{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* opening essay: text-first, image after headline */
.opener{padding-bottom:38px;border-bottom:3px double var(--line-2);margin-bottom:8px}
.opener h2{margin:10px 0 14px;font-size:clamp(1.55rem,3.2vw,2.15rem);font-weight:600;letter-spacing:-.024em;line-height:1.2}
.opener h2 a{color:var(--text)}
.opener h2 a:hover{color:var(--rust)}
.opener .intro{margin:0 0 20px;font-size:19px;color:var(--text-2)}
.opener figure{margin:0 0 20px}
.opener figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}

/* list: number-led, no thumbnails on odd rows */
.pieces{display:flex;flex-direction:column}
.piece{display:grid;grid-template-columns:54px minmax(0,1fr) 260px;gap:26px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.piece:last-child{border-bottom:0}
.piece .num{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--line-2);padding-top:6px}
.piece-text h3{margin:8px 0 11px;font-size:1.36rem;font-weight:600;line-height:1.3;letter-spacing:-.016em}
.piece-text h3 a{color:var(--text)}
.piece-text h3 a:hover{color:var(--rust)}
.piece-text p{margin:0 0 13px;color:var(--text-2);font-size:17.5px}
.piece-fig{border-radius:2px;overflow:hidden;background:var(--page-3)}
.piece-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.piece:hover .piece-fig img{transform:scale(1.025)}
.credit{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);display:flex;gap:15px;flex-wrap:wrap;align-items:center}
.credit b{color:var(--sage);font-weight:700}
.hours{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.09em;color:var(--rust);border-bottom:2px solid var(--line-2);padding-bottom:2px}

/* two-column notes */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-2)}
.notes article{padding:24px 30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.notes article:nth-child(2n){border-right:0}
.notes h4{margin:8px 0 9px;font-size:1.1rem;font-weight:600;line-height:1.36}
.notes h4 a{color:var(--text)}
.notes h4 a:hover{color:var(--rust)}
.notes p{margin:0 0 11px;font-size:16.5px;color:var(--text-2)}

/* margin panels */
.aside{border-top:2px solid var(--text);padding-top:18px}
.aside h4{margin:0 0 14px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.aside p{margin:0 0 14px;font-size:16.5px;color:var(--text-2)}
.aside p:last-child{margin-bottom:0}
.aside ul,.aside ol{margin:0;padding:0;list-style:none}
.aside li{border-bottom:1px solid var(--line);padding:12px 0;font-size:16.5px;display:flex;gap:13px;align-items:flex-start}
.aside li:last-child{border-bottom:0;padding-bottom:0}
.aside li:first-child{padding-top:0}
.aside li .mk{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--rust);flex:none;padding-top:5px;letter-spacing:.06em;min-width:34px}
.aside li a{color:var(--text);line-height:1.42}
.aside li a:hover{color:var(--rust)}
.aside.tinted{background:var(--page-2);border:1px solid var(--line);border-top:2px solid var(--sage);padding:22px}
.ledger{display:grid;gap:11px;font-family:var(--sans);font-size:14px;color:var(--text-2)}
.ledger div{display:flex;gap:14px;align-items:baseline;justify-content:space-between;border-bottom:1px dotted var(--line-2);padding-bottom:7px}
.ledger div:last-child{border-bottom:0}
.ledger b{color:var(--sage);font-weight:700;font-size:13.5px}
.marginfig{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.marginfig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.marginfig figcaption{padding:13px 16px;font-family:var(--sans);font-size:12px;color:var(--text-3);background:var(--page-2)}

/* essay page */
.essayhead{border-bottom:3px double var(--line-2);background:var(--page);padding:46px 0 38px}
.essayhead .holder{max-width:800px;text-align:center}
.essayhead h1{margin:12px 0 18px;font-size:clamp(1.85rem,4.4vw,2.95rem);font-weight:600;letter-spacing:-.026em;line-height:1.16}
.essayhead .standfirst{margin:0 0 20px;font-size:20px;color:var(--text-2);line-height:1.6}
.essayhead .credit{justify-content:center}
.plate{margin:0;border-bottom:1px solid var(--line)}
.plate img{width:100%;max-height:500px;object-fit:cover}
.plate figcaption{max-width:800px;margin:0 auto;padding:14px 26px;font-family:var(--sans);font-size:12px;color:var(--text-3)}
.text{max-width:740px}
.text > p:first-of-type{font-size:20px}
.text > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:58px;line-height:.86;padding:8px 13px 0 0;color:var(--sage);font-weight:600}
.text h2{margin:44px 0 15px;font-size:1.56rem;font-weight:600;letter-spacing:-.016em;line-height:1.28}
.text h3{margin:32px 0 12px;font-size:1.22rem;font-weight:600}
.text p{margin:0 0 21px;color:var(--text)}
.text ul,.text ol{margin:0 0 23px;padding-left:27px;color:var(--text)}
.text li{margin-bottom:10px}
.text figure{margin:36px 0}
.text figure img{border-radius:2px}
.text figcaption{margin-top:11px;font-family:var(--sans);font-size:12px;color:var(--text-3)}
.text blockquote{margin:34px 0;padding:22px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);text-align:center}
.text blockquote p{margin:0;font-size:21px;line-height:1.54;color:var(--sage);font-style:italic}
.text table{width:100%;border-collapse:collapse;margin:30px 0;font-family:var(--sans);font-size:14.5px}
.text th,.text td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left}
.text th{border-bottom:2px solid var(--text);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2)}
.text td{color:var(--text-2)}
.closing{border-top:3px double var(--line-2);margin-top:40px;padding-top:26px;text-align:center}
.closing h4{margin:0 0 8px;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.closing .figure{font-size:46px;font-weight:600;color:var(--sage);line-height:1.06}
.closing .figure small{font-size:17px;color:var(--text-3)}
.closing p{margin:12px auto 0;max-width:560px;font-size:17px;color:var(--text-2)}
.markers{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.markers a{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2);padding:6px 14px;border-left:1px solid var(--line-2)}
.markers a:first-child{padding-left:0;border-left:0}
.markers a:hover{color:var(--rust)}

/* static doc */
.paper{max-width:770px;padding:52px 0 80px}
.paper h1{margin:0 0 14px;font-size:clamp(1.85rem,4vw,2.5rem);font-weight:600;letter-spacing:-.024em}
.paper .standfirst{font-size:19.5px;color:var(--text-2);margin:0 0 30px}
.paper h2{margin:36px 0 13px;font-size:1.36rem;font-weight:600;letter-spacing:-.014em}
.paper p,.paper li{color:var(--text)}
.paper ul{padding-left:27px}
.inset{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:18px 0;margin:0 0 30px;font-family:var(--sans);font-size:14.5px;color:var(--text-2);text-align:center}

/* footer */
.base{border-top:3px double var(--line-2);background:var(--page-2);padding:52px 0 26px}
.base-cols{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:42px}
.base h5{margin:0 0 14px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3)}
.base p{margin:14px 0 0;font-size:16.5px;color:var(--text-2)}
.base ul{list-style:none;padding:0;margin:0}
.base li{margin-bottom:10px}
.base li a{font-family:var(--sans);font-size:14.5px;color:var(--text-2)}
.base li a:hover{color:var(--rust)}
.base .emblem{align-items:flex-start;text-align:left}
.base .emblem .title{font-size:1.5rem}
.base-line{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--sans);font-size:12px;color:var(--text-3)}
.leafnav{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--sans);font-size:12.5px;color:var(--text-3)}

@media (max-width:1000px){
  .frame{grid-template-columns:1fr;gap:46px;padding:38px 0 62px}
  .margin{position:static}
  .piece{grid-template-columns:1fr;gap:16px}
  .piece .num{padding-top:0}
  .piece-fig{order:-1}
  .notes{grid-template-columns:1fr}
  .notes article{border-right:0;padding:22px 0}
  .base-cols{grid-template-columns:1fr 1fr}
  .mainnav .holder{gap:0;justify-content:flex-start}
  .navbtn{display:inline-flex;margin:7px 0}
  .navlist{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px}
  .navlist.open{display:flex}
  .mainnav a{padding:11px 2px;border-bottom:1px solid var(--line)}
  .mainnav a.on{box-shadow:none;color:var(--rust)}
}
@media (min-width:1001px){
  .navlist{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap}
}
@media (max-width:560px){
  body{font-size:17.5px}
  .base-cols{grid-template-columns:1fr}
  .text > p:first-of-type::first-letter{font-size:48px}
  .issueline{gap:12px;font-size:10.5px}
}