/* 科技早報 newspaper theme (html.paper). Loaded after site.css and overrides it. Newsprint light is the look on every
   device (system dark mode is intentionally not followed: html.paper vars outrank the :root dark-mode vars). */
html.paper{--bg:#f4efe4;--card:#f8f4ea;--ink:#1a1814;--muted:#5f584c;--line:#cfc6b4;--rule:#1a1814;--accent:#8b1a1a;--chip:#ebe3d2;--why:#ece4d3;--whyline:#1a1814;
  --serif:"Noto Serif TC","Noto Serif SC","Source Han Serif TC","Songti TC","PMingLiU","MingLiU",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color-scheme:light}
html.paper[lang="zh-Hans"]{--serif:"Noto Serif SC","Noto Serif TC","Source Han Serif SC","Songti SC",serif}
html.paper body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.85;
  background-image:radial-gradient(rgba(60,45,20,.035) 1px,transparent 1px),radial-gradient(rgba(60,45,20,.025) 1px,transparent 1px);
  background-size:3px 3px,7px 7px;background-position:0 0,1px 2px}
html.paper a{color:var(--ink);text-decoration-color:rgba(26,24,20,.35);text-underline-offset:.18em}
html.paper a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* sticky top bar: thin, paper */
html.paper header.top{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--rule);padding:.45rem 1rem}
html.paper .menu-btn,html.paper .zh-btn{font-family:var(--sans);background:transparent;border:1px solid var(--rule);color:var(--ink);border-radius:2px}
html.paper .zh-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html.paper .zh-btn:hover{border-color:var(--accent);color:var(--accent)}
html.paper .brand{font-family:var(--serif);font-weight:900;font-size:1.05rem;letter-spacing:.12em}

/* masthead */
.masthead{max-width:1240px;margin:0 auto;padding:1.1rem 1.2rem 0;text-align:center}
.masthead .mh-ears{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;color:var(--muted);padding-bottom:.4rem}
.masthead .nameplate{border-top:3px double var(--rule);border-bottom:3px double var(--rule);padding:.35rem 0 .15rem;line-height:1.1}
.masthead .nameplate a{font-family:var(--serif);font-weight:900;font-size:clamp(3rem,9vw,6.2rem);letter-spacing:.18em;margin-right:-.18em;color:var(--ink);text-decoration:none}
.masthead .mh-sub{font-size:.85rem;letter-spacing:.5em;margin:.3rem 0 .35rem;color:var(--muted)}
.masthead .dateline{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:3px solid var(--rule);padding:.32rem .1rem;font-size:.86rem;font-variant-numeric:tabular-nums}
.masthead .dateline span:nth-child(2){font-weight:700}

/* front page */
html.paper main{max-width:760px}
html.paper main.paper-day,html.paper main.paper-tags{max-width:1240px;padding:1.1rem 1.2rem 3rem}
html.paper .hero{text-align:center;padding:.4rem 0 1rem;border-bottom:1px solid var(--rule)}
html.paper .hero .meta{display:none}
html.paper .hero h1.headline{font-weight:900;font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:1.22;margin:.3rem auto .45rem;max-width:22em;letter-spacing:.01em}
html.paper .hero p.deck{font-size:clamp(1.05rem,2vw,1.4rem);font-weight:600;line-height:1.5;margin:0 auto .6rem;max-width:40em}
html.paper .hero p.deck i{font-style:normal;color:var(--muted);margin:0 .5em}
html.paper .hero p.lede{max-width:44em;margin:.6rem auto 0;font-size:1rem;color:var(--ink);text-align:justify}
html.paper nav.toc{justify-content:center;align-items:center;gap:.2rem .1rem;margin:.9rem 0 0;font-family:var(--sans)}
html.paper nav.toc b{font-size:.78rem;letter-spacing:.2em;margin-right:.6rem;color:var(--muted)}
html.paper nav.toc a{background:none;border-radius:0;padding:.05rem .75rem;font-size:.86rem;color:var(--ink);border-left:1px solid var(--line);text-decoration:none}
html.paper nav.toc a:first-of-type{border-left:0}
html.paper nav.toc a:hover{color:var(--accent)}

/* section kickers */
html.paper section.sec h2{border:0;padding:0;margin:2.2rem 0 1rem;font-size:1rem;text-align:center;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);line-height:2.1;letter-spacing:.45em;font-weight:900}
html.paper section.sec h2 span{margin-right:-.45em}

/* articles: no cards, rules between items */
html.paper article.item{background:none;border:0;border-radius:0;padding:0 0 1rem;margin:0 0 1.1rem;border-bottom:1px solid var(--line)}
html.paper article.item h3{font-weight:800;font-size:1.22rem;line-height:1.4;margin:0 0 .5rem}
html.paper article.item h3 .n{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--accent);vertical-align:.25em;margin-right:.45rem;letter-spacing:.05em}
html.paper article.item p.sum{text-align:justify;font-size:1rem;margin:0 0 .7rem;hyphens:auto;overflow-wrap:anywhere}
html.paper article.item p.why{background:none;border:0;border-top:2px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;padding:.45rem .15rem;margin:.2rem 0 .7rem;font-size:.95rem;font-weight:600;line-height:1.65}
html.paper article.item p.why strong{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;color:var(--accent);font-weight:700;margin-bottom:.1rem}
html.paper article.item p.who{font-size:.85rem;color:var(--muted);font-style:normal}
html.paper article.item .src{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--muted);gap:.1rem .9rem;text-transform:uppercase}
html.paper article.item .src a{color:var(--muted)}
html.paper .tags{gap:.3rem;margin:.55rem 0 0}
html.paper a.tag,html.paper span.tag{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;border-radius:0;background:none;border:1px solid var(--line);color:var(--ink);padding:.02rem .45rem}
html.paper a.tag:hover{border-color:var(--accent);color:var(--accent)}
html.paper a.tag.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html.paper a.tag .c{color:var(--muted)}

/* lead story: full width, headline large, body set in 2 columns with a drop cap */
html.paper article.item.lead{border-bottom:3px double var(--rule);padding-bottom:1.3rem;margin-bottom:1.4rem}
html.paper article.item.lead h3{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.3;margin-bottom:.8rem}
html.paper article.item.lead p.sum{font-size:1.06rem}
html.paper article.item.lead p.sum::first-letter{float:left;font-size:3.1em;line-height:1;font-weight:900;margin:.04em .12em 0 0}

/* columns with vertical column rules */
html.paper .cols{column-gap:2.2rem;column-rule:1px solid var(--line)}
html.paper .cols>article.item{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%}
@media (min-width:760px){html.paper .cols{column-count:2}html.paper article.item.lead .body{column-count:2;column-gap:2.2rem;column-rule:1px solid var(--line)}html.paper article.item.lead p.why{break-inside:avoid}}
@media (min-width:1100px){html.paper .cols{column-count:3}html.paper .cols.pods{column-count:2}}

/* podcast cards */
html.paper article.item.pod p.pmeta{font-family:var(--sans);font-size:.74rem;letter-spacing:.06em}
html.paper article.item.pod p.pnote{background:none;border:1px dashed var(--rule);border-radius:0}
html.paper article.item.pod ul.pts{text-align:justify}
html.paper section.sec p.empty{background:none;border:1px dashed var(--rule);border-radius:0}

html.paper footer{max-width:1240px;border-top:3px double var(--rule);padding-top:.8rem;text-align:center}
html.paper footer .scan{border:1px solid var(--line);border-radius:0;display:inline-block}

/* drawer on paper */
html.paper .drawer{background:var(--card);border-right:1px solid var(--rule);font-family:var(--serif)}
html.paper .drawer h2{font-weight:900;letter-spacing:.2em;border-bottom:3px double var(--rule)}
html.paper .drawer .dnav button{border-radius:0;background:transparent;border:1px solid var(--rule);color:var(--ink);font-family:var(--serif)}
html.paper .drawer .dnav button.on{background:var(--ink);color:var(--bg);box-shadow:none}
html.paper .drawer .dseg{border:1px solid var(--rule);border-radius:0;font-family:var(--serif)}
html.paper .drawer .dseg a{color:var(--ink);letter-spacing:.06em}
html.paper .drawer .dseg a+a{border-left:1px solid var(--rule)}
html.paper .drawer .dseg a:hover{background:var(--chip)}
html.paper .drawer .dseg a.on{background:var(--ink);color:var(--bg)}
html.paper .drawer li a{border-bottom:1px solid var(--line)}
html.paper .drawer li a:hover,html.paper .drawer li a.cur{background:var(--chip)}

/* tags page */
html.paper .tagshero{border-bottom:0}
html.paper .tagshero h1{font-weight:900;font-size:1.8rem;margin:.2rem 0}
html.paper .seg{border-radius:0;border:1px solid var(--rule)}
html.paper .seg button{background:transparent;color:var(--ink);font-family:var(--serif)}
html.paper .seg button.on{background:var(--ink);color:var(--bg)}
html.paper .tagshero,html.paper .paper-tags>.seg{text-align:center}
html.paper .paper-tags>.seg{display:flex;width:max-content;margin:.4rem auto 1rem}
html.paper .graphwrap{--gbg:#f8f3e8;--glabel:#4a443a;--ginfo:#6b6457;--gbtn:#f8f3e8e6;border-radius:0;border:1px solid var(--rule);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--line)}
html.paper .graphwrap .zoom button{border-radius:0;border-color:var(--rule)}
html.paper #graphView{width:min(95vw,1400px);margin-left:calc(50% - min(47.5vw,700px))}
html.paper .storylist{max-width:900px;margin-left:auto;margin-right:auto}
html.paper .storylist h2{font-weight:900}
html.paper .storylist .st{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:.7rem .1rem}
html.paper .storylist .st a.t{font-weight:700;color:var(--ink)}
html.paper .storylist .sortc select{border-radius:0;background:var(--card);border-color:var(--rule);font-family:var(--serif)}
html.paper .storylist .backg{color:var(--accent)}
html.paper .cloud{justify-content:center}
@media (max-width:767px){
  html.paper body{font-size:16.5px}
  .masthead{padding:.7rem .8rem 0}.masthead .mh-ears{display:none}
  .masthead .nameplate a{letter-spacing:.12em;margin-right:-.12em}
  .masthead .mh-sub{letter-spacing:.3em;font-size:.78rem}
  .masthead .dateline{font-size:.76rem;justify-content:center;gap:.2rem .9rem}
  html.paper main.paper-day,html.paper main.paper-tags{padding:.8rem .9rem 2.5rem}
  html.paper #graphView{width:calc(100vw - 12px);margin-left:calc(50% - 50vw + 6px)}
}
@media (max-width:767px){html.paper nav.toc a{border-left:0;padding:.05rem .5rem}html.paper nav.toc b{width:100%;margin:0 0 .2rem}}
