/* Not An Atlas 2.2 — reading progress, Up next, Read next, Pick up where you left off. */

/* Progress line under the nav */
.naa-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:1200;pointer-events:none;background:transparent}
.naa-progress i{display:block;height:100%;width:100%;background:var(--moss);transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear}

/* Up next: a card that slides in once the reader is two-thirds through */
.naa-next{position:fixed;right:24px;bottom:24px;z-index:1100;width:min(360px,calc(100vw - 32px));background:var(--white);color:var(--ink);border:1px solid var(--ink-12);box-shadow:0 18px 50px rgba(12,12,12,.18);transform:translateY(24px);opacity:0;transition:transform .45s var(--cv-ease,cubic-bezier(.2,.7,.2,1)),opacity .35s}
.naa-next.is-in{transform:none;opacity:1}
.naa-next-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0}
.naa-next-head .naa-section-label{margin:0;font-size:10px}
.naa-next-x{border:0;background:none;font-size:20px;line-height:1;color:var(--ink-60);padding:2px 4px}
.naa-next-x:hover{color:var(--ink)}
.naa-next-link{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 14px 16px;text-decoration:none;color:inherit}
.naa-next-img{height:72px;background:var(--sand) center/cover no-repeat}
.naa-next .naa-chip{margin-bottom:4px}
.naa-next h3{font-family:var(--ff-display);font-weight:400;font-size:21px;line-height:1.12;margin:0 0 6px;text-wrap:balance}
.naa-next h3 em{font-style:italic;font-family:inherit;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;display:inline}
.naa-next-time,.naa-next>a>span>em{display:block;font-style:normal;font-family:var(--ff-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.naa-next-link:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.naa-player ~ .naa-next{bottom:92px}
@media (max-width:640px){
  .naa-next{right:0;bottom:0;width:100%;border-left:0;border-right:0;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(12,12,12,.14)}
  .naa-next-head{padding:8px 8px 0 16px}
  .naa-next-x{min-width:44px;min-height:44px;font-size:24px}
  .naa-next-link{grid-template-columns:76px 1fr;gap:12px;padding:2px 16px calc(14px + env(safe-area-inset-bottom));align-items:center}
  .naa-next-img{height:76px;border-radius:4px}
  .naa-next .naa-chip{font-size:10px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .naa-next h3{font-size:18px;line-height:1.15;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .naa-next-time{font-size:10px}
}

/* Read next: an inline card inside the story */
.naa-prose .naa-readnext{clear:both;margin:40px 0;padding:22px 26px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink-12);background:var(--paper);display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;text-decoration:none;color:inherit}
.naa-prose .naa-readnext small{grid-column:1/-1;font-family:var(--ff-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
.naa-prose .naa-readnext strong{font-family:var(--ff-display);font-weight:400;font-size:24px;line-height:1.15;text-wrap:balance}
.naa-prose .naa-readnext span{font-family:var(--ff-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.naa-prose .naa-readnext:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:640px){.naa-prose .naa-readnext{grid-template-columns:1fr;padding:18px}}

/* Pick up where you left off (home) */
.naa-resume{background:var(--paper);border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12)}
.naa-resume .h2-in{padding-top:28px;padding-bottom:28px;display:grid;grid-template-columns:auto 1fr;gap:12px 48px;align-items:center}
.naa-resume .naa-section-label{margin:0;white-space:nowrap}
.naa-resume-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.naa-resume-list li{position:relative;min-width:0}
.naa-resume-list a{display:grid;grid-template-columns:64px 1fr;gap:12px;text-decoration:none;color:inherit;align-items:center;padding-right:24px}
.naa-resume-img{height:48px;background:var(--sand) center/cover no-repeat}
.naa-resume-txt{min-width:0}
.naa-resume-txt small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);margin-bottom:2px}
.naa-resume-txt b{display:block;font-family:var(--ff-display);font-weight:400;font-size:18px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.naa-resume-bar{display:block;height:2px;background:var(--ink-12);margin:6px 0 3px}
.naa-resume-bar i{display:block;height:100%;background:var(--moss)}
.naa-resume-txt em{font-style:normal;font-size:11px;color:var(--ink-60);letter-spacing:.08em}
.naa-resume-list a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.naa-resume-x{position:absolute;right:0;top:0;border:0;background:none;color:var(--ink-30);font-size:18px;line-height:1;padding:0 4px}
.naa-resume-x:hover{color:var(--ink)}
@media (max-width:900px){.naa-resume .h2-in{grid-template-columns:1fr}.naa-resume-list{grid-template-columns:1fr;gap:14px}}
@media (prefers-reduced-motion:reduce){.naa-next,.naa-progress i{transition:none}}

/* The Trade Brief prompt (articles): same footprint as Up next, forest card */
.naa-nlp{position:fixed;right:24px;bottom:24px;z-index:1100;width:min(380px,calc(100vw - 32px));padding:20px 22px 18px;background:var(--forest);color:var(--paper);box-shadow:0 18px 50px rgba(12,12,12,.28);transform:translateY(24px);opacity:0;transition:transform .45s var(--cv-ease,cubic-bezier(.2,.7,.2,1)),opacity .35s}
.naa-nlp.is-in{transform:none;opacity:1}
.naa-nlp .naa-section-label{color:var(--sage);margin:0 0 10px;font-size:10px}
.naa-nlp h3{font-family:var(--ff-display);font-weight:300;font-size:26px;line-height:1.1;margin:0 0 8px;text-wrap:balance}
.naa-nlp h3 em{color:var(--sage-lt)}
.naa-nlp p{font-size:13px;line-height:1.5;color:rgba(250,249,247,.75);margin:0 0 14px}
.naa-nlp-x{position:absolute;right:10px;top:8px;border:0;background:none;color:rgba(250,249,247,.6);font-size:22px;line-height:1;padding:4px 6px}
.naa-nlp-x:hover{color:var(--paper)}
.naa-nlp .nl-input-row{display:flex;gap:0;margin:0;border:1px solid rgba(250,249,247,.3);background:rgba(250,249,247,.06)}
.naa-nlp .nl-input-row:focus-within{border-color:var(--sage-lt)}
.naa-nlp .nl-input{flex:1;min-width:0;background:transparent;border:0;color:var(--paper);padding:12px 14px;font-family:var(--ff-body);font-size:14px!important;font-weight:400}
.naa-nlp .nl-input::placeholder{color:rgba(250,249,247,.5)}
.naa-nlp .nl-btn{background:var(--paper)!important;color:var(--forest)!important;border:0;padding:0 18px!important;min-height:46px;font-family:var(--ff-body);font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase;white-space:nowrap}
.naa-nlp .nl-btn:hover{background:var(--sage-lt)!important}
.naa-nlp .nl-disclaimer{font-size:11px!important;font-style:normal;color:rgba(250,249,247,.55)!important;margin:10px 0 0!important;letter-spacing:.04em}
.naa-player ~ .naa-nlp{bottom:92px}
@media (max-width:640px){
  .naa-nlp{right:0;bottom:0;width:100%;padding:18px 18px calc(16px + env(safe-area-inset-bottom))}
  .naa-nlp h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.naa-nlp{transition:none}}

/* ── 2.2.2 design pass ─────────────────────────────── */

/* Audio brief: the playlist has its own wrapper (it used to inherit the bar's four-column grid) */
.h2-bl-wrap{max-width:1400px;margin:0 auto;padding:0 56px 26px}
.h2-bl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:2px 0 12px}
.h2-bl-head .naa-section-label{margin:0;font-size:10px}
.h2-bl-how{position:relative;font-family:var(--ff-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(12,12,12,.55)}
.h2-bl-how summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.h2-bl-how summary::-webkit-details-marker{display:none}
.h2-bl-how summary::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.h2-bl-how[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.h2-bl-how summary:hover{color:var(--forest)}
.h2-bl-how p{position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:min(360px,80vw);margin:0;padding:12px 14px;background:var(--white);border:1px solid var(--ink-12);box-shadow:0 10px 30px rgba(12,12,12,.1);font-size:13px;letter-spacing:0;text-transform:none;line-height:1.55;color:var(--ink)}
.h2-bl-hint{display:none}
.h2-bl-ol{list-style:none;margin:0;padding:0}
.h2-play .h2-play-i[hidden],.h2-play .h2-pause-i[hidden]{display:none}
@media (max-width:1100px){.h2-bl-wrap{padding:0 32px 22px}}
@media (max-width:700px){.h2-bl-wrap{padding:0 20px 18px}.h2-bl-how p{left:0;right:auto;width:min(360px,calc(100vw - 40px))}}

/* Photo credits sit on the photograph, not between it and the headline */
.h2-ph .h2-credit.is-on-photo,.h2-hc-img .h2-credit.is-on-photo{position:absolute;right:0;bottom:0;margin:0;max-width:70%;padding:14px 12px 9px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.72);text-align:right;line-height:1.3;text-shadow:0 0 2px rgba(12,12,12,.9),0 0 6px rgba(12,12,12,.8),0 1px 12px rgba(12,12,12,.6);pointer-events:none;transition:color .25s}
.h2-ph:hover .h2-credit.is-on-photo,.h2-hc-img:hover .h2-credit.is-on-photo{color:var(--paper)}
.h2-kick{margin-top:16px}
.h2-card .h2-kick{margin-top:12px}
.h2-lead-t{margin:8px 0 10px}
.h2-card h3{margin:6px 0 6px}

/* Bylines: avatar, name and read time on one centre line */
.h2-m,.h2-byl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;line-height:1}
.h2-byl{gap:8px}
.h2-m .naa-byline-link,.h2-byl .naa-byline-link{display:inline-flex;align-items:center}
.h2-m-sep{color:var(--ink-30)}

/* 2.3.0: link from Dates to know to the Trade Calendar */
.h2-dates-more{margin:28px 0 0}
.h2-dark .h2-dates-more .read-more-link{color:var(--sage-lt,#b8ccb4);border-color:rgba(244,241,234,.4)}

/* 2.12.1: Hotel Watch cards: the credit moves to the top of the photo so it never collides with the opening chip, and long chips wrap inside the card. */
.h2-hc-img .h2-credit.is-on-photo{top:0;bottom:auto;max-width:85%;padding:10px 12px 16px}
.h2-cd{max-width:calc(100% - 32px);line-height:1.4}

/* 2.12.2: desk rail. Trending scrolls with the page; only the ad below it sticks, so nothing slides over the list. */
.desk-rail .naa-trending{position:static}
.desk-rail .naa-ad{position:sticky;top:110px}
@media (max-width:900px){.desk-rail .naa-ad{position:static}}

/* 2.12.2: the openings band on Hotel Watch */
.op-band{background:var(--forest,#1c2b1e);color:var(--paper,#f4f1ea);margin:0 0 48px}
.op-band--article{margin:56px 0 0}
.op-band-in{max-width:1328px;margin:0 auto;padding:44px 56px;display:grid;grid-template-columns:minmax(260px,1fr) 2.2fr;gap:40px;align-items:center}
.op-band-k{font:500 11px/1 var(--ff-body);letter-spacing:.24em;text-transform:uppercase;color:var(--sage-lt,#b9c9b0);margin-bottom:14px}
.op-band h2{font-family:var(--ff-display);font-weight:400;font-size:40px;line-height:1.05;margin:0 0 12px;color:var(--paper,#f4f1ea)}
.op-band h2 em{color:var(--sage-lt,#b9c9b0)}
.op-band p{font-size:15px;line-height:1.5;opacity:.85;margin:0 0 18px}
.op-band-cta{display:inline-block;padding:11px 18px;border:1px solid rgba(244,241,234,.5);border-radius:24px;color:var(--paper,#f4f1ea);text-decoration:none;font:500 12px/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase}
.op-band-cta:hover{background:var(--paper,#f4f1ea);color:var(--forest,#1c2b1e)}
.op-band-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.op-band-list a{display:block;color:var(--paper,#f4f1ea);text-decoration:none}
.op-band-img{display:block;aspect-ratio:4/5;background:rgba(244,241,234,.08) center/cover no-repeat;margin-bottom:10px;transition:opacity .25s}
.op-band-list a:hover .op-band-img{opacity:.85}
.op-band-when{display:block;font:500 10px/1.3 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-lt,#b9c9b0);margin-bottom:4px}
.op-band-list b{display:block;font-family:var(--ff-display);font-weight:400;font-size:18px;line-height:1.2}
.op-band-list small{display:block;font-size:12px;opacity:.7;margin-top:3px}
@media (max-width:1000px){.op-band-in{grid-template-columns:1fr;padding:36px 24px}}
@media (max-width:600px){.op-band-in{padding:32px 16px}.op-band h2{font-size:32px}.op-band-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-16px;padding-right:16px}.op-band-list li{scroll-snap-align:start}.op-band-img{aspect-ratio:4/3}}

/* 2.12.3: opening chips stay small pills. They wrap inside a narrow box rather than stretching across the photo. */
.h2-hc-img .h2-cd,.op-ph .op-when{width:max-content;max-width:min(72%,230px);line-height:1.35;border-radius:14px;white-space:normal}
