/* =====================================================================
   Newsletter archive "Inside Storied" (Figma 554:31351) + issue page
   ===================================================================== */
.nl-archive{background:var(--surface-background);padding-top:var(--space-144)}
.nl-intro{width:min(1120px,100% - 48px);margin-inline:auto}
.nl-intro__inner{display:grid;grid-template-columns:560px 1fr;height:556px;overflow:hidden;border-radius:8px}
.nl-intro__copy{display:flex;flex-direction:column;gap:var(--space-32);padding-top:var(--space-48)}
.nl-intro__head{display:flex;flex-direction:column;gap:var(--space-16);align-items:flex-start}
.nl-intro__title{font:var(--text-5xl);text-transform:uppercase;margin:0;color:var(--text-primary)}
.nl-intro__lead{font:var(--text-lg);color:var(--text-secondary);width:600px;max-width:none;margin:0}
.nl-intro .field{width:320px;max-width:100%;margin:0}
.nl-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-40)}
.nl-point{display:flex;gap:var(--space-16);align-items:flex-start;width:435px}
.nl-point__icon{flex:none;width:48px;height:48px;border-radius:50%;background:#f3f1ed;display:flex;align-items:center;justify-content:center;color:var(--text-primary)}
.nl-point__title{margin:0 0 var(--space-4);font:var(--text-xl);font-weight:600;text-transform:uppercase;color:var(--text-primary)}
.nl-point__text{margin:0;font:var(--text-base);color:var(--text-secondary)}

/* Animated phone: the latest issues cross-fade and drift upward (Figma 988:28276). */
.nl-intro__phone{display:flex;justify-content:flex-end;padding-right:61px}
.phone{position:relative;flex:none;width:342px;height:724px;border-radius:48px;background:#000;box-shadow:1.75px 3.5px 4.4px rgba(0,0,0,.3),17.5px 8.7px 17.5px rgba(0,0,0,.3)}
.phone__screen{position:absolute;inset:7px;border-radius:40px;overflow:hidden;background:#fffdf9}
.phone__slide{position:absolute;left:0;top:20px;width:100%;height:auto;opacity:0;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent);animation:nl-phone 22.5s linear infinite;animation-delay:calc(var(--i) * 4.5s - 1s);will-change:opacity,transform}
.phone__notch{position:absolute;left:50%;top:-7px;width:175px;height:28px;transform:translateX(-50%);background:#000;border-radius:0 0 20px 20px}
.phone:hover .phone__slide{animation-play-state:paused}
@keyframes nl-phone{0%{opacity:0;transform:translateY(12px)}3%{opacity:1;transform:translateY(6px)}18%{opacity:1;transform:translateY(-10px)}20.5%{opacity:0;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.phone__slide{animation:none}.phone__slide:first-of-type{opacity:1;transform:translateY(6px)}}
.nl-wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.nl-past{padding:var(--space-72) 0 var(--space-80)}
.nl-past__list{display:flex;flex-direction:column;gap:var(--space-16);margin-top:var(--space-32)}

/* Issue row = embed card, expanded */
.issue-row{display:flex;align-items:center;gap:var(--space-24);min-height:132px;box-sizing:border-box;padding:var(--space-16);background:var(--card-bg-default);border:1px solid var(--border-subtle);border-radius:8px;transition:border-color .25s,box-shadow .25s}
.issue-row:hover{border-color:var(--border-default);box-shadow:var(--shadow-card-hover)}
.issue-row__thumb{flex:none;width:178px;height:100px;border:1px solid var(--border-default);border-radius:8px;overflow:hidden;background:var(--neutral-200)}
.issue-row__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.issue-row__body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-8)}
.issue-row__meta{display:flex;gap:var(--space-8);margin:0;font:var(--text-xs);color:var(--text-secondary)}
.issue-row__title{margin:0;font:var(--text-xl);font-weight:600;text-transform:uppercase}
.issue-row__title a{color:var(--text-primary)}
.issue-row__title a::after{content:"";position:absolute;inset:0}
.issue-row{position:relative}
.issue-row__actions{position:relative;z-index:1;flex:none;width:180px;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-12)}
.issue-row__date{font:var(--text-sm);color:var(--text-secondary)}
.issue-row__desc{margin:0;font:var(--text-sm);color:var(--text-secondary)}
/* Tablet + phone (Prompt 19; Figma tablet 1885:70976, phone 2173:102062): intro beside / above a smaller phone, Past issues as Embed Cards */
.nl-past__app,.nl-past__cards{display:none}
@media (max-width:1023px){
  .nl-past__web,.nl-past__list{display:none}
  .nl-past__app{display:block}
  .nl-past__cards{display:flex;flex-direction:column;gap:var(--space-16)}
  .nl-past__cards .embed-card__title{font:var(--text-mobile-lg)}
  .nl-past__cards .embed-card__eyebrow{font:var(--text-mobile-xs)}
  .nl-intro__lead,.nl-point{width:100%}
  .nl-intro .field{width:100%}
  .nl-point__title{font:var(--text-mobile-xl);text-transform:uppercase}
  .nl-point__text{font:var(--text-mobile-base)}
  .nl-points{gap:var(--space-20)}
  .phone:hover .phone__slide{animation-play-state:running}
  /* the footer's newsletter band replaces the separate Newsletter Section the tablet frame still draws; phones have no footer */
  .nl-archive~.newsletter{display:none}
}
/* Tablet 600–1023: navbar 120; intro 400 + phone 256 (24 apart, 32 sides); divider 8; Past issues 40 top: title 36, 20, cards 680×90 16 apart */
@media (min-width:600px) and (max-width:1023px){
  .nl-archive{padding-top:var(--nav-h,120px)}
  .nl-intro{width:calc(100% - 2 * var(--space-32))}
  .nl-intro__inner{grid-template-columns:minmax(0,400px) 256px;justify-content:space-between;gap:var(--space-24);height:429px;border-radius:0}
  .nl-intro__copy{gap:var(--space-24);padding-top:var(--space-8)}
  .nl-intro__head{gap:var(--space-12)}
  .nl-intro__title{font:var(--text-3xl)}
  .nl-intro__lead{font:var(--text-sm)}
  .nl-intro__phone{justify-content:flex-end;padding:0;align-items:flex-start}
  .nl-intro__phone .phone{zoom:.748}
  .nl-wrap{width:calc(100% - 2 * var(--space-32))}
  .nl-past{padding:var(--space-40) 0 var(--space-48)}
  .nl-past__app .app-list-header{margin-bottom:var(--space-20)}
  .nl-past__app .app-list-header__label{font:var(--text-3xl);letter-spacing:0;color:var(--text-primary)}
}
/* Phone <600: App / Header, intro 16 sides (title 28, lead, field, points), phone 240 centred, divider, List Bar "PAST ISSUES",
   Embed Cards (Size=Mobile Expanded) 358 wide 12 apart, App / Tab Bar (no tab active) */
@media (max-width:599px){
  .nl-archive{padding-top:0}
  .nl-intro{width:100%;padding:var(--space-16) var(--space-16) 0;box-sizing:border-box}
  .nl-intro__inner{grid-template-columns:1fr;height:auto;border-radius:0}
  .nl-intro__copy{gap:var(--space-16);padding-top:0}
  .nl-intro__head{gap:var(--space-16)}
  .nl-intro__title{font:var(--text-mobile-5xl)}
  .nl-intro__lead{font:var(--text-mobile-base)}
  .nl-intro__phone{justify-content:center;padding:var(--space-24) 0 var(--space-32);height:auto}
  .nl-intro__phone .phone{zoom:.702}
  .nl-wrap{width:100%;padding:0 var(--space-16);box-sizing:border-box}
  .nl-past{padding:var(--space-24) 0 var(--space-32)}
  .nl-past__app .app-list-header{margin-bottom:var(--space-8)}
  .nl-past__cards{gap:var(--space-12);padding-top:var(--space-8)}
}

/* Newsletter issue page (Figma newsletter-detail 1110:47753) */
.nli{background:var(--surface-background);padding-top:150px}
.nli__crumbs{width:min(1200px,100% - 48px);margin:0 auto var(--space-24)}
.nli__band{background:var(--surface-background);padding:var(--space-48) var(--space-24) 0}
.nli-card{width:min(843px,100%);margin:0 auto;background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-10);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.nli-mast{width:100%}
.nli-mast__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-16);padding:var(--space-32) 0;margin:var(--space-24) var(--space-40) 0;border-top:3px double var(--text-primary);border-bottom:3px double var(--text-primary)}
.nli-mast__side{font:var(--text-lg)}   /* Newsletter Card Device=Desktop: VOLUME and date, Desktop/10 · text-lg */
.nli-mast__side--r{text-align:right}
.nli-mast__name{margin:0;display:flex;flex-direction:column;align-items:center;font:700 88.6px/90px var(--font-display);letter-spacing:-3px;text-transform:uppercase}   /* original masthead: STORIED 88.6/90, no text style in Figma (not a Figma token) */
.nli-mast__name span{font:var(--text-mobile-lg);letter-spacing:.4em;margin-bottom:var(--space-4);padding-left:.4em}   /* INSIDE: 15/22 (Mobile/10 · text-lg), letter-spaced */
.nli-mast__seal{display:block;width:100%;height:91px;object-fit:cover;object-position:top}
.nli-content{width:100%;padding:0 var(--space-80) var(--space-40);box-sizing:border-box;display:flex;flex-direction:column;gap:33px}
.nli-rule{width:100%;height:0;border:0;border-top:1px solid var(--border-default);margin:0}
.nli-sec{display:flex;flex-direction:column;gap:33px}
.nli-sec__img,.nli-social img{width:100%;height:auto;display:block}
.nli-sec__title,.nli-sec__eyebrow{margin:0;font:700 48px/56px var(--font-display);color:var(--text-primary)}
.nli-sec__eyebrow{text-transform:uppercase}
.nli-sec__author{display:flex;justify-content:flex-end}
.nli-sec__body{display:flex;flex-direction:column;gap:var(--space-16)}
.nli-sec__body p{margin:0;font:16px/24px var(--font-body);color:var(--text-primary)}
.nli-sec__body a{text-decoration:underline}
.nli-sig{height:43px;width:auto;align-self:flex-start}
.nli-social{display:flex;flex-direction:column;gap:33px}
.nli-social__grid{display:flex;gap:85px;justify-content:center;align-items:flex-start}
.nli-social figure{margin:0;width:298px;display:flex;flex-direction:column;gap:var(--space-12)}
.nli-social figcaption{font:16px/24px var(--font-body)}
.nli-foot{width:100%;display:flex;flex-direction:column;align-items:center}
.nli-foot__art{display:block;width:100%}.nli-foot__art img{width:100%;height:auto;display:block}
.nli-foot__social{list-style:none;margin:0;padding:var(--space-24) 0;display:flex;gap:var(--space-32);justify-content:center}
.nli-foot__social img{display:block;width:40px;height:39px}
.nli-foot__text{max-width:600px;padding:var(--space-24) var(--space-24) var(--space-40);text-align:center;display:flex;flex-direction:column;gap:var(--space-16)}
.nli-foot__text p{margin:0;font:14px/20px var(--font-body);color:var(--text-secondary)}
.nli__related{width:min(840px,100% - 48px);margin:var(--space-48) auto;box-sizing:border-box;padding:var(--space-24);background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:12px}
.nli__related .article__section-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nli-sub{background:var(--surface-background);padding:var(--space-40) var(--space-20)}
.nli-sub__inner{box-sizing:border-box;width:min(1400px,100%);margin:0 auto;padding:var(--space-48) var(--space-112);background:var(--border-subtle);border:1px solid var(--border-default);border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:var(--space-32);text-align:center}
.nli-sub__title{margin:0;max-width:700px;font:700 30px/38px var(--font-display);color:var(--text-primary)}
.nli-sub .field{width:320px;max-width:100%}
.nli-sub__list{list-style:none;margin:var(--space-16) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,211px));gap:var(--space-28) var(--space-24);justify-content:center;width:100%}
.nli-sub__list img{width:100%;height:auto;aspect-ratio:211/223;object-fit:cover;object-position:top;display:block;border-radius:var(--radius-md)}
@media (max-width:1300px){.nli-sub__list{grid-template-columns:repeat(3,211px)}}
@media (max-width:900px){
  .nli-sub__inner{padding:var(--space-40) var(--space-16)}
  .nli{padding-top:120px}
  /* Newsletter Card Device=Tablet: same row, STORIED at text-7xl, sides text-sm */
  .nli-mast__row{padding:var(--space-24) 0;margin:var(--space-16) var(--space-24) 0}
  .nli-mast__name{font:var(--text-7xl);letter-spacing:-2px}
  .nli-mast__side{font:var(--text-sm)}
  .nli-content{padding:0 var(--space-20) var(--space-32)}
  .nli-sec__title,.nli-sec__eyebrow{font-size:32px;line-height:40px}
  .nli-social__grid{flex-direction:column;align-items:center;gap:var(--space-32)}
  .nli-sub__list{grid-template-columns:repeat(2,minmax(0,211px))}
}

/* Newsletter Card Device=Mobile (Figma 2228:107095, 358): the masthead stays one row: VOLUME | STORIED | date */
@media (max-width:599px){
  .nli-mast__row{grid-template-columns:1fr auto 1fr;gap:var(--space-8);padding:var(--space-16) 0;margin:var(--space-12) var(--space-12) 0}
  .nli-mast__name{font:700 36px/40px var(--font-display);letter-spacing:-1px}   /* Desktop/06 · text-4xl kept at its desktop size inside the 358 card (the token switches to 24/28 on phones) */
  .nli-mast__name span{font:var(--text-mobile-xxs);letter-spacing:.4em;margin-bottom:0}
  .nli-mast__side{font:var(--text-mobile-xxs)}
  .nli-mast__side--r{text-align:right}
}
/* Issue page on tablet + phone (Figma 2173:96402 / 2173:102173): the Footer's newsletter band replaces the page's subscribe band
   on tablet (standing rule); phones have neither */
@media (max-width:1023px){.nli~.nli-sub{display:none}}