/* Newsletter Tilted Wall — shared by the desktop and mobile live portfolio. */
#newsletters{position:relative;z-index:1;background:#0b0b0c;color:#ece9e1;border-top:1px solid #ffffff2e}
#newsletters::before{content:none}
#newsletters .nl-inner{box-sizing:border-box;width:100%;padding:56px 4vw 72px}
#newsletters .nl-kicker{color:#f2c230;font:500 13px 'IBM Plex Mono',monospace}
#newsletters h2{margin:10px 0 30px;font:800 clamp(40px,5vw,84px)/.95 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
#newsletters newsletter-gallery{display:block;min-width:0}
.nl-window{position:relative;height:900px;overflow:hidden;margin:0 -4vw;background:#0b0b0c;isolation:isolate}
/* Soft top and bottom fades blend the tilted covers into the Work section.
   Decorative only: gestures and newsletter card taps pass through. */
.nl-window::before,.nl-window::after{content:"";position:absolute;left:0;right:0;height:clamp(48px,17%,160px);z-index:2;pointer-events:none}
.nl-window::before{top:0;background:linear-gradient(to bottom,#0b0b0c,rgba(11,11,12,0))}
.nl-window::after{bottom:0;background:linear-gradient(to top,#0b0b0c,rgba(11,11,12,0))}
.nl-window[hidden],.nl-empty[hidden],.nl-reader[hidden]{display:none!important}
/* The same JS clock drives animation and touch gestures, without snapping. */
.nl-window.nl-js-motion .nl-track{animation:none!important}
.nl-window[data-rows="2"]{height:610px}
.nl-window[data-rows="1"]{height:335px}
.nl-window[data-rows="1"] .nl-wall-inner{left:0;right:0;top:0;transform:none}
.nl-window[data-rows="1"] .nl-row{overflow-x:auto;overflow-y:hidden;touch-action:auto;scrollbar-width:none}
.nl-wall-inner{position:absolute;left:-10%;right:-10%;top:-60px;display:flex;flex-direction:column;gap:12px;transform:rotate(-8deg);transform-origin:center center}
.nl-row{min-width:0;overflow:hidden;padding:12px 0;touch-action:pan-y;cursor:grab}
.nl-row.nl-dragging{cursor:grabbing}
.nl-row.nl-static{overflow-x:auto;scrollbar-width:thin;touch-action:auto}
.nl-row.nl-dragging .nl-track{animation-play-state:paused!important}
.nl-row.nl-static .nl-track{animation:none;will-change:auto}
.nl-track{display:flex;flex-direction:row;gap:0;width:max-content;animation:nl-move-left var(--nl-speed,100s) linear infinite;will-change:transform}
.nl-row:nth-child(2) .nl-track,.nl-row:nth-child(4) .nl-track{animation-name:nl-move-right}
.nl-row:nth-child(1) .nl-track{--nl-speed:70s}
.nl-row:nth-child(2) .nl-track{--nl-speed:78s}
.nl-row:nth-child(3) .nl-track{--nl-speed:86s}
.nl-row:nth-child(4) .nl-track{--nl-speed:94s}
.nl-set{display:flex;flex:none;gap:16px;padding-right:16px;width:max-content}
@keyframes nl-move-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes nl-move-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.nl-window[data-paused="true"] .nl-track{animation-play-state:paused}
.nl-card{appearance:none;-webkit-appearance:none;position:relative;display:flex;flex:none;flex-direction:column;justify-content:space-between;box-sizing:border-box;margin:0;padding:14px;width:190px;height:253px;overflow:hidden;background:#18181b;border:1px solid #ffffff2e;border-radius:0;color:#ece9e1;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;transform-origin:center center}
.nl-card[data-tone="1"]{background:#222226}
.nl-card[data-tone="2"]{background:#2c2c31}
.nl-card[data-featured="true"]:not(.nl-has-cover){background:#f2c230;color:#0b0b0c}
.nl-cover{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center}
.nl-card.nl-has-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0008 0%,transparent 33%,#0004 52%,#000e 100%);pointer-events:none}
.nl-card.nl-has-cover{color:#fff}
.nl-date,.nl-title{position:relative;z-index:1;display:block}
.nl-date{font:500 10px/1.3 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.02em}
.nl-title{font:800 22px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.nl-card:focus-visible,.nl-reader button:focus-visible{outline:2px solid #f2c230;outline-offset:3px}
@media(hover:hover){
  .nl-row:hover .nl-track{animation-play-state:paused}
  .nl-card:hover{z-index:3;transform:translateY(-12px) scale(1.06);box-shadow:0 18px 30px #000c;border-color:#f2c230}
}
.nl-empty{padding:32px;border:1px solid #ffffff2e;color:#ece9e1;font:400 16px/1.5 'Instrument Sans',sans-serif}

/* Full-screen issue reader lives outside the custom element, above the rest of the site. */
.nl-reader{position:fixed;inset:0;z-index:99999;overflow-x:hidden;overflow-y:auto;background:#0b0b0c;color:#ece9e1;font-family:'Instrument Sans',sans-serif;overscroll-behavior:contain}
.nl-reader-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 14px;background:#0b0b0c;border-bottom:1px solid #ffffff2e;font:500 12px 'IBM Plex Mono',monospace}
.nl-reader-date{flex:1;color:#f2c230;text-align:center;white-space:nowrap}
.nl-reader-actions{display:flex;gap:6px;align-items:center}
.nl-reader button{appearance:none;-webkit-appearance:none;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #ffffff2e;border-radius:0;background:transparent;color:#ece9e1;font:500 12px 'IBM Plex Mono',monospace;cursor:pointer}
.nl-reader button:hover{border-color:#f2c230}
.nl-reader .nl-close{color:#f2c230}
/* Prominent viewer-only navigation, separate from the moving selection wall. */
.nl-reader .nl-side-arrow{position:fixed;top:50%;z-index:20;width:56px;height:56px;min-width:56px;min-height:56px;padding:0;display:grid;place-items:center;transform:translateY(-50%);background:#0b0b0ce8;color:#f2c230;border:1px solid #f2c230aa;font-size:27px;line-height:1;box-shadow:0 4px 20px #0008;touch-action:manipulation}
.nl-reader .nl-side-arrow:hover{background:#f2c230;color:#0b0b0c}
.nl-reader .nl-side-arrow.nl-prev{left:max(12px,calc((100vw - 850px)/2))}
.nl-reader .nl-side-arrow.nl-next{right:max(12px,calc((100vw - 850px)/2))}
.nl-reader-body{padding:0 14px 60px}
.nl-paper{box-sizing:border-box;width:min(100%,680px);margin:28px auto 0;background:#f4f1ea;color:#0b0b0c;box-shadow:0 25px 70px #0008}
.nl-paper::before{content:"";display:block;height:14px;background:repeating-linear-gradient(-45deg,#f2c230 0 8px,#0b0b0c 8px 16px)}
.nl-paper-heading{padding:40px 48px 26px}
.nl-paper-date{display:block;font:500 11px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase}
.nl-paper h3{font:800 clamp(34px,5vw,56px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;margin:15px 0 0;overflow-wrap:anywhere}
.nl-paper-content{padding:0}
.nl-image-stack{width:100%;line-height:0;background:#fff}
.nl-image-stack img{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;border:0;vertical-align:top}

/* Real-sized phone presentation, with the same four horizontal tilted rows. */
@media(max-width:819px){
  #newsletters .nl-inner{padding:32px 14px 48px}
  #newsletters h2{font-size:38px;margin-bottom:24px}
  .nl-window{height:720px;margin:0 -14px}
  .nl-window[data-rows="2"]{height:450px}
  .nl-window[data-rows="1"]{height:230px}
  .nl-wall-inner{left:-25%;right:-25%;top:-35px;gap:10px}
  .nl-row{padding:10px 0}
  .nl-set{gap:10px;padding-right:10px}
  .nl-card{width:130px;height:173px;padding:10px;transition:none}
  .nl-date{font-size:9px}
  .nl-title{font-size:16px;-webkit-line-clamp:5}
  .nl-row:nth-child(1) .nl-track{--nl-speed:56s}
  .nl-row:nth-child(2) .nl-track{--nl-speed:64s}
  .nl-row:nth-child(3) .nl-track{--nl-speed:72s}
  .nl-row:nth-child(4) .nl-track{--nl-speed:80s}
  .nl-reader-bar{padding:10px 14px;gap:8px}
  .nl-reader button{min-width:44px;min-height:44px;padding:8px}
  .nl-reader .nl-side-arrow{width:46px;height:52px;min-width:46px;min-height:52px;padding:0;font-size:24px}
  .nl-reader .nl-side-arrow.nl-prev{left:4px}
  .nl-reader .nl-side-arrow.nl-next{right:4px}
  .nl-reader-body{padding:0 10px 32px}
  .nl-paper{margin-top:12px}
  .nl-paper-heading{padding:24px 18px 20px}
  .nl-paper-content{padding:0}
}
/* Same phone rules when mobile.html?view=mobile forces the phone column in a wide window. */
html[data-dev="mobile"] #newsletters .nl-inner{padding:32px 14px 48px}
html[data-dev="mobile"] #newsletters h2{font-size:38px;margin-bottom:24px}
html[data-dev="mobile"] .nl-window{height:720px;margin:0 -14px}
html[data-dev="mobile"] .nl-window[data-rows="2"]{height:450px}
html[data-dev="mobile"] .nl-window[data-rows="1"]{height:230px}
html[data-dev="mobile"] .nl-wall-inner{left:-25%;right:-25%;top:-35px;gap:10px}
html[data-dev="mobile"] .nl-row{padding:10px 0}
html[data-dev="mobile"] .nl-set{gap:10px;padding-right:10px}
html[data-dev="mobile"] .nl-card{width:130px;height:173px;padding:10px;transition:none}
html[data-dev="mobile"] .nl-date{font-size:9px}
html[data-dev="mobile"] .nl-title{font-size:16px;-webkit-line-clamp:5}
html[data-dev="mobile"] .nl-row:nth-child(1) .nl-track{--nl-speed:56s}
html[data-dev="mobile"] .nl-row:nth-child(2) .nl-track{--nl-speed:64s}
html[data-dev="mobile"] .nl-row:nth-child(3) .nl-track{--nl-speed:72s}
html[data-dev="mobile"] .nl-row:nth-child(4) .nl-track{--nl-speed:80s}
html[data-dev="mobile"] .nl-reader-bar{padding:10px 14px;gap:8px}
html[data-dev="mobile"] .nl-reader button{min-width:44px;min-height:44px;padding:8px}
html[data-dev="mobile"] .nl-reader .nl-side-arrow{width:46px;height:52px;min-width:46px;min-height:52px;padding:0;font-size:24px}
html[data-dev="mobile"] .nl-reader .nl-side-arrow.nl-prev{left:4px}
html[data-dev="mobile"] .nl-reader .nl-side-arrow.nl-next{right:4px}
html[data-dev="mobile"] .nl-reader-body{padding:0 10px 32px}
html[data-dev="mobile"] .nl-paper{margin-top:12px}
html[data-dev="mobile"] .nl-paper-heading{padding:24px 18px 20px}
html[data-dev="mobile"] .nl-paper-content{padding:0}
/* Small iPhones and Android phones retain the horizontally swipeable four-row wall. */
@media(max-width:360px) and (prefers-reduced-motion:no-preference){
  .nl-wall-inner{left:-30%;right:-30%;transform:rotate(-6deg)}
}
/* Accessibility: no animation, and each row becomes a normal horizontal strip. */
@media(prefers-reduced-motion:reduce){
  .nl-window{height:auto;overflow:visible}
  .nl-window::before,.nl-window::after{display:none}
  .nl-wall-inner{position:static;display:flex;flex-direction:column;transform:none;padding:12px 0;gap:10px}
  .nl-row{overflow-x:auto;overflow-y:hidden;padding:8px 0;scrollbar-width:thin;touch-action:auto}
  .nl-track{animation:none!important;will-change:auto}
  .nl-set:nth-child(2){display:none}
  .nl-card{transition:none}
}