/* Time Objects — news article (app/news/[slug], app/ja/news/[slug]).
   No Figma frame: built from the top page rules (design.md). PC values are 1280-frame px × --u,
   small type × --t; SP (≤767) in px. Dark page with the aurora, like the collection pages:
   header hairline at 96, title block at 156; title and text in one centred column
   (640 wide; no cover image on the article page). */

/* the Next.js pages (news, Media Center) wrap header and footer in display:contents boxes, so the
   footer is not a direct child of .site (home-v7.css .site.v7 > .v7-foot): lift it over the aurora */
.site.v7 .v7-foot{position:relative;z-index:1}
.site.v7.nd .top .r{animation-delay:.1s}
.site.v7.nd .burger{animation-delay:.1s}

.nd-main{position:relative;z-index:1;padding:calc(156 * var(--u)) 0 calc(120 * var(--u))}
.nd-rule{position:absolute;left:0;right:0;top:calc(96 * var(--u));height:1px;background:rgba(47,46,50,.5);pointer-events:none}
/* the article sits in one centred column: 640 wide (x 320–960 at 1280), never narrower than
   560px while the stage allows */
.nd-article{width:max(calc(640 * var(--u)), min(var(--stage), 560px));margin-inline:auto}

.nd-meta{display:flex;align-items:center;gap:calc(30 * var(--t));margin:0;font:600 max(12px, calc(10 * var(--u)))/1 var(--sans);color:#fff}
.site.v7 .nd-meta a{font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8);transition:color .3s var(--ease)}
.site.v7 .nd-meta a:hover{color:#fff}
.nd-title{
  margin:calc(30 * var(--u)) 0 0;
  font:700 max(50px, calc(48 * var(--u)))/1.1 var(--sans);letter-spacing:-.02em;color:#fff;
}

/* one column under the title (no cover on the article page) */
.nd-body{margin-top:calc(60 * var(--u))}

/* article text (Markdown): Chronos essay size, Form / Meaning headings */
.nd-body{font:400 max(15px, calc(14 * var(--u)))/1.5 var(--sans);color:#fff}
.nd-body > :first-child{margin-top:0}
.nd-body p{margin:0 0 1.5em}
.nd-body h2{margin:2.4em 0 .8em;font:600 max(24px, calc(22 * var(--u)))/1.2 var(--sans)}
.nd-body h3{margin:2em 0 .7em;font:600 max(18px, calc(16 * var(--u)))/1.2 var(--sans)}
.nd-body h4{margin:1.8em 0 .6em;font:600 max(14px, calc(12 * var(--u)))/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.site.v7 .nd-body a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.site.v7 .nd-body a:hover{color:rgba(255,255,255,.8)}
.nd-body strong{font-weight:600}
.nd-body ul,.nd-body ol{margin:0 0 1.5em;padding-left:1.4em}
.nd-body ul{list-style:disc}
.nd-body ol{list-style:decimal}
.nd-body li::marker{color:rgba(255,255,255,.5)}
.nd-body li > ul,.nd-body li > ol{margin:.4em 0 0}
.nd-body li > ul{list-style:circle}
.nd-body li + li{margin-top:.4em}
/* quote: the body type (site.css gives blockquote a large serif on the older pages) */
.site.v7 .nd-body blockquote{
  margin:0 0 1.5em;padding:0 0 0 1em;border-left:1px solid rgba(255,255,255,.3);
  font:inherit;font-style:normal;letter-spacing:0;color:rgba(255,255,255,.8);
}
.site.v7 .nd-body blockquote p{margin:0;font:inherit}
/* Roobert has no italic: let the browser slant it for emphasis */
.nd-body em{font-style:italic;font-synthesis:style}
.nd-body img{display:block;width:100%;height:auto;margin:2em 0;border-radius:4px}
.nd-body hr{margin:2.4em 0;border:0;border-top:1px solid rgba(255,255,255,.2)}
.nd-body table{width:100%;margin:0 0 1.5em;border-collapse:collapse;font-size:.875em}
.nd-body th,.nd-body td{padding:.6em 0;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;vertical-align:top}
.nd-body code{font-size:.9em}

.nd-foot{margin-top:calc(120 * var(--u));padding-top:calc(30 * var(--u));border-top:1px solid rgba(255,255,255,.2)}

@media (prefers-reduced-motion:no-preference){
  .nd-head,.nd-body{animation:nd-in 1s var(--ease) both}
  .nd-body{animation-delay:.15s}
}
@keyframes nd-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (max-width:767px){
  .nd-main{padding:161px 0 90px}
  .nd-rule{top:131px;left:20px;right:20px}
  .nd-meta{gap:20px;font-size:10px}
  .nd-meta a{font-size:12px}
  .nd-article{width:var(--stage)}
  .nd-title{margin-top:20px;max-width:none;font-size:30px;line-height:1.15}
  .nd-body{max-width:none;min-width:0;margin-top:30px;font-size:14px;line-height:1.6}
  .nd-body h2{font-size:20px}
  .nd-body h3{font-size:16px}
  .nd-foot{margin-top:60px;padding-top:30px}
}

/* ===================================================================== news list
   /news, /ja/news. The top page's News rows (home-v7.css .v7-news) on their own page.
   Dark, with the aurora. */
.nl-main{position:relative;z-index:1;padding:calc(156 * var(--u)) 0 calc(120 * var(--u))}
.nl .v7-news{padding-top:0;background:transparent}
.site.v7 .nl-news h1{margin:0;font:700 max(70px, calc(68 * var(--u)))/1 var(--sans);letter-spacing:0;color:inherit}
.nl .v7-news .head{padding-bottom:calc(30 * var(--u))}
/* the rows' titles are h2 here (h1 is the page title): keep the top page's row title size,
   not its 70px section heading (.site.v7 .v7-news h2) */
.site.v7 .nl-news h2.title{margin:0;font:600 max(18px, calc(16 * var(--u)))/1.2 var(--sans);letter-spacing:0;color:var(--ink)}

/* thumbnails grow from their left edge as on the top page (home-v7.css .v7-news .item.rv);
   here the rows are in view on load, so they start small (no full size → small → full jump) */
@media (prefers-reduced-motion:no-preference){
  .nl .v7-news .item:not(.cms-empty):not(.is-in) .thumb{transform:scale(.4);transform-origin:0 0}
}

/* black: the rows in white on the dark page */
.nl-black .v7-news{color:#fff}
.nl-black .v7-news .list,.nl-black .v7-news .item{border-color:rgba(255,255,255,.2)}
.site.v7.nl-black .v7-news .title,.nl-black .v7-news time,.nl-black .v7-news .sum{color:#fff}
.nl-black .v7-news .go{border-color:var(--edge-l)}
.nl-black .v7-news .go img{filter:none}
.nl-black .v7-news .item:hover .go{border-color:#fff}
.nl-black .v7-news .thumb{background:#000}
.nl-black .v7-news .cms-empty .sum{color:rgba(255,255,255,.6)}

/* —— pager: ← 1 2 3 → under the list —— */
.nl-pager{
  --pg-fg:#fff;--pg-edge:var(--edge-l);--pg-on-bg:rgba(255,255,255,.9);--pg-on-fg:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--t));
  width:var(--stage);margin:calc(60 * var(--u)) auto 0;
}
.nl-pages{display:flex;gap:calc(6 * var(--t));margin:0;padding:0;list-style:none}
.nl-pages a,.nl-pages span{
  display:inline-flex;align-items:center;justify-content:center;min-width:calc(30 * var(--t));height:calc(30 * var(--t));
  padding:0 calc(6 * var(--t));box-sizing:border-box;border-radius:4px;
  font:600 max(12px, calc(10 * var(--u)))/1 var(--sans);color:var(--pg-fg);text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.nl-pages a:hover{background:rgba(127,127,127,.15)}
.nl-pages [aria-current="page"]{background:var(--pg-on-bg);color:var(--pg-on-fg)}
.nl-step{
  display:inline-flex;align-items:center;justify-content:center;width:calc(30 * var(--t));height:calc(30 * var(--t));
  box-sizing:border-box;overflow:hidden;border:1px solid var(--pg-edge);border-radius:4px;transition:border-color .4s var(--ease);
}
.nl-step img{width:calc(7 * var(--t));height:calc(7 * var(--t))}
.nl-step.prev img{rotate:180deg}
a.nl-step:hover{border-color:var(--pg-fg)}
a.nl-step:hover img{animation:v7-slide .7s var(--ease)}
span.nl-step{opacity:.3}


@media (max-width:767px){
  .nl-main{padding:161px 0 90px}
  .nl-pager{margin-top:42px}
  .site.v7 .nl-news h1{font-size:calc(50 * var(--s))}
  .nl .v7-news .head{padding-bottom:30px}
  .site.v7 .nl-news h2.title{font-size:16px}
}