/* Shared foundation for my ai daily. */
:root { --serif:'Libre Baskerville',Georgia,serif;--sans:'DM Sans','Microsoft YaHei',sans-serif; }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:120px }
body { margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased }
button,
input { font:inherit }
button,
a { -webkit-tap-highlight-color:transparent }
button { border:0;background:none;color:inherit;cursor:pointer;padding:0 }
a { color:inherit;text-decoration:none }
button:focus-visible,
a:focus-visible,
input:focus-visible { outline:2px solid var(--accent);outline-offset:5px }
button:hover,
a:hover { color:var(--accent-text) }
img { display:block;width:100%;height:auto;object-fit:cover }
svg { width:19px;height:19px;flex-shrink:0 }
h1,
h2,
h3,
p { margin:0 }
.story-link:hover { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px }
.skip-link { position:fixed;top:-100px;left:15px;z-index:20;padding:12px;background:var(--ink);color:var(--paper) }
.skip-link:focus { top:10px }
.paper { max-width:1440px;padding:0 48px;margin:auto;min-height:100vh;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23n)'/%3E%3C/svg%3E") }
.saved-count { font-size:9px;background:var(--ink);color:var(--paper);border-radius:50%;min-width:15px;height:15px;display:grid;place-items:center;font-weight:500 }
.nameplate { line-height:1.1 }
.classic-masthead { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0 28px }
.blackletter { font-family:'UnifrakturMaguntia',Georgia,serif;font-size:clamp(58px,7.6vw,112px);letter-spacing:-2px;white-space:nowrap }
.news-nav { display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);height:49px;gap:20px }
.news-nav>div { height:100%;display:flex;gap:29px;align-items:center;overflow-x:auto;scrollbar-width:none }
.news-nav .current { font-weight:700;color:var(--accent-text) }
.news-nav .current:after { content:'';position:absolute;bottom:-1px;height:2px;background:var(--accent);left:0;right:0 }
.kicker { font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:1.1px;line-height:1.5;color:var(--accent-text);text-transform:uppercase;margin-bottom:11px }
.classic-lead { display:grid;grid-template-columns:1fr 2.15fr 1fr;gap:25px;padding-bottom:32px }
.rail-label { font-size:9px;letter-spacing:1.2px;font-weight:600;padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid var(--ink);display:flex;justify-content:space-between }
.story-card h3 { font:700 23px/1.27 var(--serif);letter-spacing:-.7px }
.description { font:12px/1.85 var(--sans);color:var(--muted);margin-top:11px }
.story-meta { font:8px/1.6 var(--sans);letter-spacing:.4px;color:var(--muted) }
.story-meta>span { padding:0 4px }
.story-bottom { display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:16px }
.save-story { width:27px;height:27px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted) }
.save-story svg { width:15px;height:15px }
.save-story.is-saved { color:var(--accent) }
.classic-main h1 { font:700 clamp(32px,3.1vw,46px)/1.13 var(--serif);letter-spacing:-1.7px;max-width:660px }
.lead-description { font:13px/1.8 var(--sans);color:var(--muted);margin:17px 0 21px }
.classic-main .lead-image img { height:290px;object-position:50% 58% }
.classic-right { padding-left:24px;border-left:1px solid var(--rule) }
.classic-right>.story-card { padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--rule) }
.classic-right .story-card h3 { font-size:22px }
.classic-right .story-card .story-bottom { margin-top:10px }
.text-arrow { display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;font-weight:500;width:100%;margin-top:13px }
.text-arrow svg { width:16px }
.section-heading { border-top:3px double var(--ink);border-bottom:1px solid var(--rule);padding:15px 0;display:flex;justify-content:space-between;align-items:center;margin-bottom:22px }
.section-heading h2 { font:700 23px var(--serif);letter-spacing:-.6px }
.section-heading h2>span { font:10px var(--sans);color:var(--muted);margin-right:13px;vertical-align:middle }
.story-grid { display:grid;gap:25px }
.three-columns { grid-template-columns:repeat(3,1fr) }
.story-grid>.story-card { border-right:1px solid var(--rule);padding-right:25px }
.story-grid>.story-card:last-child { border:0;padding-right:0 }
.story-grid .image-link { margin-bottom:18px }
.story-grid .image-link img { height:175px }
.story-grid h3 { font-size:22px }
.publication-footer { margin-top:55px;border-top:3px double var(--ink);padding:28px 0 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:25px }
.footer-brand { font:700 24px var(--serif);letter-spacing:-.5px }
.footer-brand span { display:block;font:7px var(--sans);letter-spacing:1.3px;margin-top:11px }
.footer-links { display:flex;align-items:center;gap:25px;font-size:9px }
.footer-fine { flex-basis:100%;border-top:1px solid var(--rule);padding-top:17px;display:flex;justify-content:space-between;gap:15px;font-size:7px;letter-spacing:.65px;color:var(--muted) }
dialog { border:1px solid var(--rule);padding:30px 36px;background:var(--paper);color:var(--ink);width:min(720px,calc(100% - 40px));max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule) var(--paper) }
dialog::backdrop { background:#24272085;backdrop-filter:blur(5px) }
.modal-top { display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:17px;margin-bottom:25px;gap:20px }
.modal-top>span { font-size:9px;letter-spacing:1.1px;text-transform:uppercase }
.close-button { width:30px;height:30px;display:grid;place-items:center }
.close-button svg { width:20px }
.modal-description { font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:25px }
.article-standfirst { font:15px/1.85 var(--sans);color:var(--muted);max-width:740px;margin-bottom:23px }
.article-share { display:flex;align-items:center;gap:6px;font-size:10px }
.article-share svg { width:15px;height:15px }
.search-field { display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--ink);margin:25px 0 18px }
.search-field svg { width:20px }
.search-field input { min-width:0;width:100%;font-size:14px;color:var(--ink);border:0;background:none;outline:none }
.search-field:focus-within { outline:2px solid var(--accent);outline-offset:3px }
.search-meta { display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:.7px;padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--muted) }
.empty-state { padding:40px 20px;text-align:center }
.empty-state>span { font:50px Georgia,serif;color:var(--accent) }
.empty-state h3 { font:400 25px var(--serif);margin:15px 0 }
.empty-state p { font-size:12px;line-height:1.8;color:var(--muted) }
.solid-button { background:var(--ink);color:var(--paper);padding:12px 18px;font-size:11px;margin-top:23px }
.solid-button:hover { background:var(--accent);color:var(--paper) }
#toast { position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:50;background:#30372a;color:#f5f6ec;padding:12px 22px;border:1px solid #646e59;border-radius:4px;font:12px var(--sans);transition:opacity .2s,transform .2s;box-shadow:0 5px 30px #0002 }
@media(min-width:1600px) {
  .paper { padding-inline:55px }
}
@media(max-width:1200px) {
  .paper { padding-inline:32px }
  .blackletter { font-size:7.4vw }
  .news-nav>div { width:100%;justify-content:space-between;gap:25px }
  .classic-lead { grid-template-columns:.95fr 2.1fr 1fr;gap:19px }
  .classic-right { padding-left:18px }
  .classic-main h1 { font-size:36px }
  .classic-main .lead-image img { height:250px }
  .story-card h3 { font-size:21px }
  .classic-right .story-card h3 { font-size:19px }
  .story-grid { gap:20px }
  .story-grid>.story-card { padding-right:20px }
  .footer-links { gap:17px }
}
@media(max-width:950px) {
  .blackletter { font-size:8.2vw }
  .classic-masthead { gap:14px;padding-block:30px }
  .classic-lead { grid-template-columns:1fr 2.3fr }
  .classic-right { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:25px;border:0;padding:22px 0 0;border-top:1px solid var(--rule) }
  .classic-right>.rail-label { grid-column:1/-1;margin:0;padding-bottom:12px }
  .classic-right>.story-card { border:0;margin:0;padding:0 }
  .classic-main h1 { font-size:42px }
  .classic-main .lead-image img { height:280px }
  .story-grid .image-link img { height:200px }
  .footer-links { gap:20px;flex-wrap:wrap }
  .footer-fine { font-size:6px }
  .three-columns .story-card h3 { font-size:22px }
}
@media(max-width:680px) {
  .paper { padding-inline:20px }
  .saved-count { min-width:13px;height:13px;font-size:7px }
  .classic-masthead { padding:24px 0 22px;display:block;text-align:center }
  .blackletter { font-size:11.3vw;letter-spacing:-1px }
  .news-nav { height:44px }
  .news-nav>div { gap:21px;justify-content:flex-start }
  .classic-lead { display:flex;flex-direction:column;gap:25px }
  .classic-main { order:0 }
  .classic-main h1 { font-size:38px;letter-spacing:-1.5px }
  .kicker { font-size:8px;margin-bottom:10px }
  .lead-description { font-size:12px;margin:16px 0 19px }
  .classic-main .lead-image img { height:225px }
  .story-meta { font-size:7px }
  .classic-right { order:2;grid-template-columns:1fr 1fr;gap:20px;padding-top:20px }
  .classic-right .rail-label { font-size:8px }
  .classic-right .story-card h3 { font-size:21px }
  .section-heading h2 { font-size:20px }
  .section-heading h2>span { font-size:8px;margin-right:7px }
  .section-heading { padding:15px 0;margin-bottom:18px }
  .story-grid { gap:20px 16px }
  .story-grid>.story-card { padding-right:0;border:0;padding-bottom:15px;border-bottom:1px solid var(--rule)!important }
  .story-grid .image-link { margin-bottom:13px }
  .story-grid .image-link img { height:120px }
  .story-grid .story-card h3 { font-size:19px;letter-spacing:-.7px }
  .story-grid .description { font-size:10px;line-height:1.8;margin-top:8px }
  .story-grid .story-meta { font-size:6px }
  .story-bottom { gap:5px;margin-top:11px }
  .save-story { width:24px;height:24px }
  .save-story svg { width:13px;height:13px }
  .publication-footer { margin-top:35px;padding-top:25px;gap:22px }
  .footer-brand { font-size:23px }
  .footer-brand span { font-size:6px;letter-spacing:1px }
  .footer-links { gap:15px;font-size:8px;flex-wrap:wrap }
  .footer-fine { font-size:6px;line-height:1.7;flex-direction:column;gap:6px }
  .three-columns { grid-template-columns:1fr }
  .three-columns>.story-card { padding-bottom:24px;display:grid;grid-template-columns:.8fr 1fr;gap:18px;align-items:start }
  .three-columns .story-card .image-link { margin:0 }
  .three-columns .story-card .image-link img { height:155px }
  .three-columns .story-card h3 { font-size:21px!important }
  .three-columns .story-card .description { font-size:11px }
  .three-columns .story-card .story-bottom { margin-top:10px }
  dialog { width:calc(100% - 24px);padding:20px;max-height:91dvh }
  .modal-top { padding-bottom:13px;margin-bottom:20px }
  .modal-top>span { font-size:7px;letter-spacing:.6px }
  .close-button { width:25px;height:25px }
  .close-button svg { width:18px }
  .modal-description { font-size:11px;line-height:1.9 }
  .article-standfirst { font-size:12px;line-height:1.9 }
  .article-share { font-size:8px }
  .search-field { padding:12px;gap:10px }
  .search-field input { font-size:12px }
  .search-field svg { width:16px }
  .search-meta { font-size:6px }
  .empty-state { padding:30px 0 }
  .empty-state h3 { font-size:23px }
  .empty-state p { font-size:11px }
  #toast { bottom:20px;max-width:calc(100% - 30px);white-space:nowrap;font-size:11px;padding:11px 19px }
}
@media(max-width:370px) {
  .paper { padding-inline:16px }
  .classic-main h1 { font-size:33px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,
  *:before,
  *:after { transition:none!important;animation:none!important }
}
@media print {
  .news-nav,
  .save-story,
  .footer-links,
  dialog,
  #toast { display:none!important }
  .paper { padding:0;max-width:none }
  body { background:white;color:black }
  .classic-main h1 { font-size:34px }
  .story-card { break-inside:avoid }
  .image-link img { max-height:230px }
  .publication-footer { margin-top:20px }
  .lead-description { color:#555 }
  .classic-lead { grid-template-columns:1fr 2fr 1fr;gap:15px }
  .classic-right { display:block;grid-column:auto;padding:0;border:0 }
}