/* news-moves.css — News stories: a brass thread down the margin, a large opening letter, and the next story drawing the reader on. */

/* news-thread.css — the reading thread down the article's left margin. */
html[data-moves] .article-page{position:relative}
html[data-moves] .nt{position:absolute;top:0;z-index:1;pointer-events:none}
html[data-moves] .nt svg{position:absolute;left:0;top:0;display:block;overflow:visible}
html[data-moves] .nt path{fill:none;stroke-linecap:round;stroke-linejoin:round}
html[data-moves] .nt-base path{stroke:rgba(180,138,58,.42);stroke-width:1.2;stroke-dasharray:.5 7}
html[data-moves] .nt-ink path{stroke:#b48a3a;stroke-width:1.5}
html[data-moves] .nt-clip{position:absolute;inset:0;overflow:hidden;will-change:transform}
html[data-moves] .nt-ink{will-change:transform}
html[data-moves] .nt i,html[data-moves] .nt b{position:absolute;display:block;font-style:normal}
html[data-moves] .nt-n{left:-4.5px;top:-4.5px;width:9px;height:9px;box-sizing:border-box}
html[data-moves] .nt-n::before,html[data-moves] .nt-n::after{content:"";position:absolute;inset:0;border-radius:50%}
html[data-moves] .nt-n::before{background:#fff;border:1px solid rgba(180,138,58,.65);transform:scale(.72);transition:transform .5s cubic-bezier(.34,1.8,.64,1),background-color .25s}
html[data-moves] .nt-n::after{border:1px solid #b48a3a;opacity:0}
html[data-moves] .nt-n.is-lit::before{background:#b48a3a;transform:none}
html[data-moves] .nt-n.is-lit::after{animation:ntPulse .9s cubic-bezier(.16,1,.3,1) both}
@keyframes ntPulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.6)}}
html[data-moves] .nt-s{height:1px;background:#b48a3a;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
html[data-moves] .nt-s.is-lit{transform:none}
html[data-moves] .nt-i{font:400 10px/14px "JetBrains Mono",ui-monospace,monospace;color:#8f6b22;opacity:0;transform:translateX(6px);transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
html[data-moves] .nt-i.is-lit{opacity:1;transform:none}
html[data-moves] .nt-bead{left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#b48a3a;box-shadow:0 0 0 4px rgba(180,138,58,.18);will-change:transform;transition:opacity .25s}
html[data-moves] .nt-o{margin:-.5em 0 0 -.35em;width:.7em;text-align:center;font:600 28px/1 Figtree,sans-serif;color:#b48a3a;opacity:0;transform:scale(.2) rotate(-70deg);transition:opacity .25s,transform .8s cubic-bezier(.34,1.7,.64,1)}
html[data-moves] .nt-o.is-lit{opacity:1;transform:none}
html[data-moves] .nt-compact .nt-base path{stroke-width:1;stroke-dasharray:.5 6}
html[data-moves] .nt-compact .nt-ink path{stroke-width:1.2}
html[data-moves] .nt-compact .nt-n{left:-2.5px;top:-2.5px;width:5px;height:5px}
html[data-moves] .nt-compact .nt-bead{left:-2.5px;top:-2.5px;width:5px;height:5px;box-shadow:0 0 0 2px rgba(180,138,58,.2)}
html[data-moves] .nt-compact .nt-o{font-size:18px}

/* news-cap.css — the very large opening letter. The clearance around each glyph lets the moving clip take in its full height. */
html[data-moves] .article-body p.nc{--cap:clamp(146px,22vw,272px)}
html[data-moves] .article-body p.nc:first-child::first-letter{font:inherit;float:none;padding:0;color:inherit;line-height:inherit}
html[data-moves] .nc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-moves] .nc-cap{position:relative;float:left;display:block;margin:.045em .075em .02em -.035em;font-family:Figtree,sans-serif;font-size:var(--cap);font-weight:500;line-height:.7;color:#1f3b2d;transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
html[data-moves] .nc-wait .nc-cap{opacity:0;transform:translate3d(0,.1em,0)}
html[data-moves] .nc-g{display:block;line-height:.7}
html[data-moves] .nc-pale{color:rgba(180,138,58,.3)}
html[data-moves] .nc-box,html[data-moves] .nc-in{position:absolute;display:block;left:-.2em;right:-.2em;top:-.2em;bottom:-.2em;overflow:hidden;will-change:transform}
html[data-moves] .nc-in{left:0;right:0;top:0;bottom:0;overflow:visible}
html[data-moves] .nc-in .nc-g{position:absolute;left:.2em;top:.2em}

/* news-next.css — the giant next title and the short flight into the next story. */
html[data-moves] .nn{position:relative;height:230vh;background:#1f3b2d;color:#f3efe4;border-top:1px solid rgba(205,191,154,.22)}
html[data-moves] .nn[hidden]{display:none}
html[data-moves] .nn-stage{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;padding:96px clamp(20px,4vw,48px) 36px}
html[data-moves] .nn-inner{width:100%;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
html[data-moves] .nn-kick{font:400 12px/1.5 "JetBrains Mono",ui-monospace,monospace;color:#cdbf9a}
html[data-moves] .nn-title{position:relative;display:block;font-family:Figtree,sans-serif;font-weight:500;line-height:.98;letter-spacing:-.018em;color:inherit;text-decoration:none;cursor:pointer}
html[data-moves] .nn-t{display:block;text-wrap:balance;overflow-wrap:normal}
html[data-moves] .nn-pale{color:rgba(243,239,228,.15)}
html[data-moves] .nn-box,html[data-moves] .nn-in{position:absolute;display:block;left:0;right:0;top:-.08em;bottom:-.24em;overflow:hidden;will-change:transform}
html[data-moves] .nn-box{transform:translate3d(0,100%,0)}
html[data-moves] .nn-in{top:0;bottom:0;overflow:visible;transform:translate3d(0,-100%,0)}
html[data-moves] .nn-solid{position:absolute;left:0;right:0;top:.08em;color:#f3efe4}
html[data-moves] .nn-edge{position:absolute;left:0;right:0;bottom:-.24em;height:1px;background:#b48a3a;opacity:0;will-change:transform}
html[data-moves] .nn-edge b{position:absolute;right:-2px;top:-13px;font:600 20px/1 Figtree,sans-serif;color:#b48a3a;background:#1f3b2d;padding:2px 0 2px 8px}
html[data-moves] .nn-foot{font:400 12px/1.5 "JetBrains Mono",ui-monospace,monospace}
html[data-moves] .nn .ulink{color:#f3efe4}
html[data-moves] .nn .ulink:hover{color:#cdbf9a}
html[data-moves] .nn-calm{height:auto}
html[data-moves] .nn-calm .nn-stage{position:static;height:auto;min-height:0;padding-top:64px;padding-bottom:64px}
html[data-moves] .nn-calm .nn-pale{color:#f3efe4}
html[data-moves] .nn-calm .nn-box,html[data-moves] .nn-calm .nn-edge{display:none}
html[data-moves] .nn-veil{position:fixed;inset:0;z-index:9100;background:#1f3b2d;pointer-events:none;transition:opacity .42s ease .82s}
html[data-moves] .nn-veil.is-going{opacity:0}
html[data-moves] .nn-fly{position:fixed;z-index:9101;margin:0;font-family:Figtree,sans-serif;font-weight:500;line-height:.98;letter-spacing:-.018em;color:#f3efe4;text-wrap:balance;transform-origin:0 0;pointer-events:none;will-change:transform,opacity;transition:transform 1.05s cubic-bezier(.76,0,.24,1),opacity .34s ease .96s,color .34s ease .82s}
html[data-moves] .nn-fly.is-going{opacity:0;color:#1f3b2d}

/* phones and tablets: the header, the reach of each link, and the story's type set for a small screen. */
@media (max-width:899.98px),(hover:none){
  html[data-moves] a.ulink{position:relative}
  html[data-moves] a.ulink::after{content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-11px}
  html[data-moves] .header-actions .index-btn{position:relative}
  html[data-moves] .header-actions .index-btn::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
  html[data-moves] .article-foot{row-gap:26px}
  html[data-moves] .article-footer-inner{row-gap:24px;padding-top:30px;padding-bottom:30px}
  html[data-moves] .lb-close{min-height:44px}
}
@media (max-width:599.98px){
  html[data-moves] .header-actions .index-btn:not(.shell-btn){display:none}
  html[data-moves] .header-inner{gap:12px}
  html[data-moves] .article-page .article-title{font-size:clamp(35px,11.8vw,46px)}
  html[data-moves] .article-body p.nc{--cap:clamp(106px,34vw,146px);display:flow-root}
  html[data-moves] .article-share{margin-left:0;overflow-wrap:anywhere}
  html[data-moves] .article-gallery{grid-template-columns:1fr 1fr;gap:8px}
  html[data-moves] .article-thumb:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:359.98px){
  html[data-moves] .brand{gap:8px}
  html[data-moves] .brand svg{width:46px;height:34px}
  html[data-moves] .brand-name{font-size:13px;letter-spacing:0}
}
/* a phone on its side: height is scarce, so the header stays at the top of the page and the photo fits the screen. */
@media (max-height:500px){
  html[data-moves] .site-header{top:-120px}
  html[data-moves] .article-page{padding-top:28px}
  html[data-moves] .article-page .article-title{font-size:clamp(36px,7vw,52px)}
  html[data-moves] .article-page .article-hero{margin-top:28px}
  html[data-moves] .article-photo{aspect-ratio:auto;height:80vh;height:80svh}
  html[data-moves] .more-news-inner{padding-top:48px;padding-bottom:56px}
  html[data-moves] .nn-stage{padding-top:18px;padding-bottom:18px}
  html[data-moves] .nn-inner{gap:12px}
}
/* the photo viewer: on a phone the photo stops above its caption and the arrows sit in the caption's last row; on its side the two stand next to each other. */
@media (max-width:699.98px){
  html[data-moves] .lb-stage{grid-template-rows:minmax(0,1fr)}
  html[data-moves] .lb-img{max-height:100%}
  html[data-moves] .lb-bar{padding:14px 20px 22px}
  html[data-moves] .lb-title{font-size:19px}
  html[data-moves] .lb-count{width:100%;min-height:44px;display:flex;align-items:center}
  html[data-moves] .lb-nav{bottom:22px;width:44px;height:44px}
  html[data-moves] .lb-prev{left:auto;right:74px}
  html[data-moves] .lb-next{right:20px}
}
@media (max-height:500px){
  html[data-moves] .lightbox[open]{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr)}
  html[data-moves] .lb-stage{padding:12px 0 12px 12px;grid-template-rows:minmax(0,1fr)}
  html[data-moves] .lb-img{max-height:100%}
  html[data-moves] .lb-bar{align-content:flex-start;padding:70px 20px 66px;overflow-y:auto}
  html[data-moves] .lb-title{font-size:18px}
  html[data-moves] .lb-count{position:absolute;left:calc(100% - 230px);bottom:26px;width:auto;min-height:0}
  html[data-moves] .lb-nav{top:auto;bottom:12px;width:44px;height:44px;transform:none}
  html[data-moves] .lb-prev{left:auto;right:72px}
  html[data-moves] .lb-next{right:20px}
  html[data-moves] .lb-close{top:12px;right:20px}
}
/* on a touch screen a thin brass line runs along the foot of the stage for the moment before the next story opens. */
html[data-moves] .nn-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:#b48a3a;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html[data-moves] .nn-count .nn-bar{transform:none;transition:transform 1.6s linear}

/* news-type.css — the story set in Figtree, as on the Work page: bold, tightly spaced display type, upright brass for an emphasised word,
 * plain reading text, and the small mono labels spaced for normal case. */
html[data-moves] .article-page .article-title{font-family:Figtree,sans-serif;font-weight:700;font-size:clamp(34px,4vw,50px);line-height:1.04;letter-spacing:-.035em}
html[data-moves] .article-lead{font-family:Figtree,sans-serif;font-weight:400;font-size:clamp(18px,1.75vw,21px);line-height:1.5;letter-spacing:-.005em}
html[data-moves] .article-body{font-family:Figtree,sans-serif;font-size:17px;line-height:1.7}
html[data-moves] .article-body p.nc{--cap:clamp(124px,18vw,230px)}
html[data-moves] .nc-cap{font-weight:700;letter-spacing:0}
html[data-moves] .photo-cap{line-height:1.6;letter-spacing:.02em}
html[data-moves] .more-news .section-title{font-family:Figtree,sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.035em}
html[data-moves] .section-title em,html[data-moves] .article em{font-style:normal;color:#8f6b22}
html[data-moves] .news-title{font-family:Figtree,sans-serif;font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em}
html[data-moves] .news-card-featured .news-title{font-size:clamp(23px,2.2vw,29px)}
html[data-moves] .news-text{line-height:1.6}
html[data-moves] .news-day{font-family:Figtree,sans-serif;font-weight:700;font-size:34px;letter-spacing:-.04em}
html[data-moves] .news-tag{letter-spacing:.03em}
html[data-moves] .news-month,html[data-moves] .news-photo-count{letter-spacing:.03em}
html[data-moves] .index-btn,html[data-moves] .lb-btn{letter-spacing:.03em}
html[data-moves] .lb-title{font-family:Figtree,sans-serif;font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.01em}
html[data-moves] .lb-cap{line-height:1.5}
html[data-moves] .nn-title,html[data-moves] .nn-fly{font-weight:700;line-height:1;letter-spacing:-.04em}
html[data-moves] .nt-o{font-weight:700;width:.8em;margin-left:-.4em}
@media (max-width:599.98px){
  html[data-moves] .article-page .article-title{font-size:clamp(28px,8.4vw,36px);line-height:1.06;letter-spacing:-.03em}
  html[data-moves] .article-lead{font-size:18px}
  html[data-moves] .article-body{font-size:16px;line-height:1.65}
  html[data-moves] .article-body p.nc{--cap:clamp(88px,27vw,118px)}
  html[data-moves] .news-title{font-size:20px}
}
@media (max-height:500px){
  html[data-moves] .article-page .article-title{font-size:clamp(28px,5vw,38px)}
}
@media (max-width:699.98px){html[data-moves] .lb-title{font-size:18px}}
@media (max-height:500px){html[data-moves] .lb-title{font-size:17px}}