:root {
  --paper:      #faf7f0;
  --paper-2:    #f1ece1;
  --paper-3:    #e5dfd1;
  --ink:        #111111;
  --ink-2:      #3d3a35;
  --ink-3:      #736d63;

  --glaze:      #0e7c86;
  --glaze-deep: #0a5b62;
  --glaze-wash: #e6f1f2;
  --wheat:      #cf9520;
  --wheat-wash: #faf1dc;
  --clay:       #b8402a;
  --clay-wash:  #fbeae6;

  --rule:       rgba(17, 17, 17, .14);
  --rule-2:     rgba(17, 17, 17, .28);


  --rail-bg:    #14191b;
  --rail-ink:   #ece7dc;
  --rail-ink-2: #98a2a2;
  --rail-rule:  rgba(236, 231, 220, .16);
  --glaze-lift: #4fc3ce;

  --rail-w:  184px;
  --aside-w: 296px;


  --display: "Literata", Georgia, "Times New Roman", "Songti SC",
             "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--glaze);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--paper);
}
.skip-link:focus { inset-inline-start: 0; z-index: 99; }

.meta {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  text-transform: uppercase;
}



.rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rail-w);
  border-inline-end: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 1.3rem;
  z-index: 20;
}

.wordmark {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin: 0 auto;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .36em;
  text-decoration: none;
  padding: .1rem 0 .9rem;
}
.wordmark span { color: var(--glaze); }

.ornament {
  width: 24px;
  height: 60px;
  margin: 0 auto 1.3rem;
  background:
    repeating-linear-gradient(45deg,  var(--glaze) 0 3px, transparent 3px 12px),
    repeating-linear-gradient(-45deg, var(--glaze) 0 3px, transparent 3px 12px);
  opacity: .55;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: 0 0 0 1.5rem;
  margin: 0;
  list-style: none;
  font-size: .85rem;
  letter-spacing: .05em;
}
.rail-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .32rem 0 .32rem .7rem;
  margin-inline-start: -.7rem;
  text-decoration: none;
  color: var(--ink-2);
  border-inline-start: 2px solid transparent;
}
.rail-nav a:hover,
.rail-nav a:focus-visible { color: var(--ink); border-inline-start-color: var(--glaze); }
.rail-nav [aria-current="page"] { color: var(--ink); border-inline-start-color: var(--glaze); font-weight: 700; }

.rail-foot { margin-top: auto; padding: 0 1.5rem; display: flex; flex-direction: column; gap: .7rem; }

.rail-search-form { margin: 0; }

.rail-search {
  font: inherit;
  font-size: .8rem;
  width: 100%;
  padding: .38rem .55rem;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
}
.rail-search:focus { outline: 2px solid var(--glaze); outline-offset: 1px; }

.langs {
  display: flex;
  gap: .1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink-3);
}
.langs a:hover { color: var(--ink); }
.lang-soon { color: rgba(124, 118, 108, .5); cursor: default; }
.langs [aria-current="true"] { color: var(--glaze); font-weight: 700; }



.canvas { margin-inline-start: var(--rail-w); }

.masthead {
  padding: 1.9rem 2.2rem .1rem;
  max-width: 1360px;
}

.issue {
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.issue::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.masthead h1 {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0 0 .55rem;
  overflow-wrap: anywhere;
}
.masthead h1 em { font-style: normal; color: var(--glaze); white-space: nowrap; }
.masthead h1::after {
  content: "";
  display: block;
  width: 132px;
  height: 5px;
  background: var(--glaze);
  margin-top: .7rem;
}

.lede {
  margin: 0 0 1.4rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.68;
  max-width: 62ch;
}

.crumbs {
  margin: 0 0 .8rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--glaze); }



.front {
  padding: 0 2.2rem 3rem;
  max-width: 1360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  grid-template-areas:
    "main offer"
    "main latest";
  grid-template-rows: auto 1fr;
  column-gap: 2.4rem;
  row-gap: 1.5rem;
}

.front-main   { grid-area: main; min-width: 0; }
.offer        { grid-area: offer; align-self: start; }
.front-aside  { grid-area: latest; align-self: start; }

.lead-story {
  border-top: 3px solid var(--ink);
  padding-top: .9rem;
  margin-bottom: 1.5rem;
}
.kicker {
  display: inline-block;
  background: var(--clay);
  color: #fff;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  padding: .16rem .5rem;
  margin-bottom: .6rem;
}
.kicker--tool { background: var(--glaze); }
.story-title {
  margin: 0 0 .5rem;
  font-size: clamp(1.25rem, 1rem + 1.05vw, 1.85rem);
  line-height: 1.34;
  font-weight: 700;
}
.story-title a { text-decoration: none; }
.story-title a:hover { color: var(--glaze); }
.story-sum {
  margin: 0 0 .6rem;
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.66;
}

.story-list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.story-list li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .2rem .7rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
}
.story-num {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--glaze);
  font-weight: 700;
  padding-top: .1rem;
}
.story-list h3 {
  margin: 0;
  grid-column: 2;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}
.story-list h3 a { text-decoration: none; }
.story-list h3 a:hover { color: var(--glaze); }
.story-list .meta { grid-column: 2; }

.tagbar { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .2rem; }
.tag {
  font-size: .8rem;
  text-decoration: none;
  padding: .26rem .68rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.tag:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }



.offer {
  background: var(--ink);
  color: var(--paper);
  padding: 1.15rem 1.15rem 1rem;
  border-top: 5px solid var(--wheat);
}
.offer--inline { margin: 1.5rem 0; }

.offer-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--wheat);
  margin: 0 0 .7rem;
}
.code-row { display: flex; align-items: stretch; gap: .5rem; margin-bottom: .8rem; }
.code-chip {
  flex: 1;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.62rem;
  letter-spacing: .1em;
  background: rgba(251, 250, 247, .07);
  border: 1px dashed rgba(251, 250, 247, .32);
  padding: .3rem .6rem;
  display: flex;
  align-items: center;
  min-height: 48px;
}
.copy-btn {
  font: inherit;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  min-width: 74px;
  min-height: 48px;
  padding: 0 .8rem;
  cursor: pointer;
  border: none;
  background: var(--glaze);
  color: #fff;
}
.copy-btn:hover { background: var(--glaze-deep); }
.copy-btn[data-state="done"] { background: var(--wheat); color: var(--ink); }
.offer-line { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.58; }
.offer-line b { color: var(--wheat); font-weight: 700; }
.fineprint {
  margin: 0;
  font-size: .71rem;
  line-height: 1.52;
  color: rgba(251, 250, 247, .6);
  border-top: 1px solid rgba(251, 250, 247, .16);
  padding-top: .6rem;
}
.fineprint a { color: rgba(251, 250, 247, .85); }



.sec-head {
  margin: 0 0 .1rem;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 3px solid var(--ink);
  padding-bottom: .4rem;
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
.sec-head::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--glaze);
  flex: none;
}
.sec-head + .sec-head { margin-top: 1.6rem; }

.latest-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.latest-item {
  padding: .62rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .89rem;
  line-height: 1.5;
}
.latest-item a { text-decoration: none; }
.latest-item a:hover { color: var(--glaze); }
.latest-time {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: .16rem;
}



.sheet {
  padding: 0 2.2rem 3.5rem;
  max-width: 1360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  grid-template-areas: "body side";
  column-gap: 2.4rem;
}
.sheet-body { grid-area: body; min-width: 0; max-width: 74ch; }
.sheet-side { grid-area: side; align-self: start; }



.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  padding: .6rem 0 .9rem;
  border-block: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}

.prose { font-size: 1.03rem; line-height: 1.86; }
.prose > p { margin: 0 0 1.15rem; }
.prose h2 {
  font-size: clamp(1.2rem, 1.05rem + .65vw, 1.5rem);
  line-height: 1.4;
  margin: 2.4rem 0 .9rem;
  padding-top: .8rem;
  border-top: 2px solid var(--ink);
}
.prose h3 {
  font-size: 1.08rem;
  line-height: 1.5;
  margin: 1.8rem 0 .6rem;
  color: var(--glaze-deep);
}
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-inline-start: 1.4rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { font-weight: 700; }
.prose a { color: var(--glaze-deep); text-underline-offset: .2em; }
.prose figure { margin: 1.6rem 0; }
.prose figcaption {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-top: .5rem;
  line-height: 1.5;
}
.prose blockquote {
  margin: 1.5rem 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-inline-start: 3px solid var(--glaze);
  color: var(--ink-2);
}


.answer {
  background: var(--glaze-wash);
  border-inline-start: 4px solid var(--glaze);
  padding: .85rem 1.05rem;
  margin: 0 0 1.4rem;
  font-size: 1rem;
  line-height: 1.72;
}


.warn {
  background: var(--clay-wash);
  border: 1px solid rgba(184, 64, 42, .3);
  border-inline-start: 4px solid var(--clay);
  padding: .85rem 1.05rem;
  margin: 1.4rem 0;
  font-size: .96rem;
  line-height: 1.72;
}
.warn b { color: var(--clay); }
.note {
  background: var(--wheat-wash);
  border-inline-start: 4px solid var(--wheat);
  padding: .85rem 1.05rem;
  margin: 1.4rem 0;
  font-size: .96rem;
  line-height: 1.72;
}


.toc {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: .9rem 1.1rem;
  margin: 0 0 1.8rem;
}
.toc-head {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-3);
  margin: 0 0 .5rem;
}
.toc ol { margin: 0; padding-inline-start: 1.2rem; font-size: .93rem; line-height: 1.62; }
.toc li { margin-bottom: .26rem; }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--glaze); text-decoration: underline; }


.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.prose th, .prose td {
  border: 1px solid var(--rule);
  padding: .5rem .7rem;
  text-align: start;
  vertical-align: top;
  line-height: 1.6;
}
.prose th { background: var(--paper-2); font-weight: 700; }
.prose caption { text-align: start; padding-bottom: .45rem; }



.cnt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 400;
  margin-inline-start: .5rem;
}


.faq { margin: 2rem 0 0; }
.faq h3 { margin-top: 1.4rem; color: var(--ink); }


.convert {
  background: var(--ink);
  color: var(--paper);
  padding: 1.2rem 1.25rem 1rem;
  margin: 1.8rem 0;
  border-top: 5px solid var(--wheat);
}
.convert p { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.66; }
.convert .fineprint { margin-top: .2rem; }
.go-btn {
  display: inline-block;
  background: var(--wheat);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  padding: .6rem 1.2rem;
  font-size: .95rem;
}
.go-btn:hover { background: #fff; }



.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1.3rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.card-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.card h3 { margin: 0; font-size: 1rem; line-height: 1.48; font-weight: 700; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--glaze); }
.card p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }



.tool {
  background: var(--ink);
  color: var(--paper);
  padding: 1.5rem 1.5rem 1.7rem;
  margin: 0 0 1.6rem;
}
.tool-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: rgba(251, 250, 247, .66);
}
.field input, .field select {
  font: inherit;
  font-family: var(--mono);
  font-size: 1.02rem;
  padding: .55rem .65rem;
  min-height: 46px;
  border: 1px solid rgba(251, 250, 247, .28);
  background: rgba(251, 250, 247, .06);
  color: var(--paper);
}
.field input:focus, .field select:focus { outline: 2px solid var(--wheat); outline-offset: 1px; }
.field select option { color: var(--ink); }

.result {
  margin-top: 1.3rem;
  border-top: 1px solid rgba(251, 250, 247, .18);
  padding-top: 1.1rem;
}
.result-big {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.16;
  color: var(--wheat);

  overflow-wrap: anywhere;
}
.result-sub { margin: .45rem 0 0; font-size: .88rem; line-height: 1.6; color: rgba(251, 250, 247, .72); }
.result-rows { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.result-rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .92rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(251, 250, 247, .14);
}
.result-rows b { font-family: var(--mono); color: var(--paper); }

.tool-note {
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(251, 250, 247, .6);
  margin: 1rem 0 0;
}


.quiz { display: grid; gap: 1rem; }
.quiz fieldset { border: 1px solid rgba(251, 250, 247, .24); padding: .8rem 1rem 1rem; margin: 0; }
.quiz legend { font-size: .93rem; padding: 0 .35rem; line-height: 1.5; }
.opt { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .3rem 0; font-size: .92rem; line-height: 1.55; cursor: pointer; }
.opt input { margin: 0; min-width: 18px; min-height: 18px; accent-color: var(--wheat); }

.verdict { padding: 1rem 1.1rem; margin-top: 1.2rem; font-size: .98rem; line-height: 1.7; }
.verdict[data-level="ok"]    { background: rgba(14, 124, 134, .22); border-inline-start: 4px solid var(--glaze); }
.verdict[data-level="watch"] { background: rgba(207, 149, 32, .2);  border-inline-start: 4px solid var(--wheat); }
.verdict[data-level="stop"]  { background: rgba(184, 64, 42, .26);  border-inline-start: 4px solid var(--clay); }
.verdict h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.verdict p { margin: 0 0 .5rem; }


.lookup { width: 100%; font: inherit; font-size: 1rem; padding: .65rem .8rem; min-height: 48px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); margin-bottom: 1.1rem; }
.lookup:focus { outline: 2px solid var(--glaze); outline-offset: 1px; }
.entry { border-bottom: 1px solid var(--rule); padding: .85rem 0; }
.entry h3 { margin: 0 0 .3rem; font-size: 1rem; }
.entry .alt { font-family: var(--mono); font-size: .78rem; color: var(--glaze-deep); margin: 0 0 .35rem; }
.entry p { margin: 0; font-size: .93rem; line-height: 1.68; color: var(--ink-2); }
.empty { padding: 1.2rem 0; color: var(--ink-3); font-size: .93rem; }


.guide { border: 1px solid var(--rule); background: var(--paper-2); margin: 1.8rem 0; }
.guide > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  padding: .8rem 1rem;
  font-weight: 700;
  font-size: .96rem;
  list-style: none;
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::before { content: "＋ "; color: var(--glaze); font-family: var(--mono); }
.guide[open] > summary::before { content: "－ "; }
.guide-body { padding: 0 1rem 1rem; }
.guide-body h3 { font-size: .98rem; margin: 1.1rem 0 .4rem; color: var(--glaze-deep); }
.guide-body p, .guide-body li { font-size: .92rem; line-height: 1.72; }
.guide-body p { margin: 0 0 .7rem; }



.hits { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.hit { border-bottom: 1px solid var(--rule); padding: .9rem 0; }
.hit h3 { margin: 0 0 .25rem; font-size: 1.02rem; line-height: 1.5; }
.hit h3 a { text-decoration: none; }
.hit h3 a:hover { color: var(--glaze); }
.hit p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--ink-2); }



.site-footer {
  margin-inline-start: var(--rail-w);
  border-top: 3px solid var(--ink);
  padding: 1.6rem 2.2rem 2.4rem;
  background: var(--paper-2);
}
.footer-in { max-width: 1360px; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-col h2 { font-size: .82rem; margin: 0 0 .55rem; letter-spacing: .06em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; font-size: .87rem; line-height: 1.9; }
.footer-col a { text-decoration: none; color: var(--ink-2); }
.footer-col a:hover { color: var(--glaze); }
.footer-note {
  max-width: 1360px;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .8rem;
  line-height: 1.72;
  color: var(--ink-2);
}
.footer-note a { color: var(--glaze-deep); }
.footer-count { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-3); margin-top: .6rem; }



.oops { padding: 3rem 2.2rem 4rem; max-width: 640px; }
.oops .big { font-family: var(--mono); font-size: 4rem; line-height: 1; color: var(--glaze); margin: 0 0 .8rem; }



@media (max-width: 1099px) {
  .rail {
    position: sticky;
    inset-block-start: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: .85rem;
    padding: .45rem .9rem;
    border-inline-end: none;
    border-block-end: 1px solid var(--rule);
  }
  .wordmark { writing-mode: horizontal-tb; margin: 0; padding: 0; font-size: 1rem; letter-spacing: .2em; }
  .ornament {
    width: 40px; height: 12px; margin: 0;
    background:
      repeating-linear-gradient(45deg,  var(--glaze) 0 2px, transparent 2px 8px),
      repeating-linear-gradient(-45deg, var(--glaze) 0 2px, transparent 2px 8px);
  }
  .rail-nav { flex: 1; min-width: 0; flex-direction: row; gap: .4rem; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .rail-nav a { border-inline-start: none; margin-inline-start: 0; padding: 0 .25rem; white-space: nowrap; }
  .rail-nav a:hover { border-inline-start-color: transparent; }
  .rail-foot { margin: 0 0 0 auto; padding: 0; flex-direction: row; align-items: center; gap: .7rem; }
  .rail-search { display: none; }
  .langs { border-top: none; padding-top: 0; }

  .canvas, .site-footer { margin-inline-start: 0; }
  .masthead { padding: 1.3rem 1.4rem .1rem; }
  .front, .sheet { padding-inline: 1.4rem; column-gap: 1.6rem; --aside-w: 260px; }
  .site-footer { padding-inline: 1.4rem; }
  .oops { padding-inline: 1.4rem; }
}

@media (max-width: 780px) {
  .ornament { display: none; }
  .front {
    grid-template-columns: 1fr;
    grid-template-areas: "offer" "main" "latest";
    grid-template-rows: auto;
    row-gap: 1.4rem;
  }
  .sheet { grid-template-columns: 1fr; grid-template-areas: "body" "side"; row-gap: 1.8rem; }
  .masthead { padding: 1.1rem 1.1rem .1rem; }
  .masthead h1 { font-size: clamp(1.42rem, 1.1rem + 2.2vw, 1.9rem); }
  .masthead h1::after { width: 96px; height: 4px; margin-top: .55rem; }
  .lede { font-size: .95rem; margin-bottom: 1.1rem; }
  .front, .sheet, .site-footer, .oops { padding-inline: 1.1rem; }
  .prose { font-size: 1rem; line-height: 1.82; }
  .tool { padding: 1.15rem 1.1rem 1.3rem; }
}

@media (max-width: 380px) {
  .masthead { padding: .9rem .85rem .1rem; }
  .masthead h1 { font-size: 1.34rem; line-height: 1.32; }
  .masthead h1 em { white-space: normal; }
  .lede { font-size: .89rem; line-height: 1.6; margin-bottom: .9rem; }
  .front, .sheet, .site-footer, .oops { padding-inline: .85rem; }
  .code-chip { font-size: 1.44rem; min-height: 44px; }
  .copy-btn { min-height: 44px; min-width: 68px; }
  .rail-nav { gap: .75rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


.sources {
  margin: 2.8rem 0 0;
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--paper-2);
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.sources h2 {
  font-family: var(--sans);
  font-size: 1.02rem;
  letter-spacing: .01em;
  margin: 0 0 .55rem;
  padding: 0;
  border: 0;
}
.sources-note {
  margin: 0 0 1.15rem;
  font-size: .88rem;
  line-height: 1.68;
  color: var(--ink-2);
}
.src-checked {
  display: block;
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.source-list { margin: 0; padding-inline-start: 1.5rem; }
.source-list li {
  margin: 0 0 1rem;
  font-size: .94rem;
  line-height: 1.62;
}
.source-list li::marker { font-family: var(--mono); color: var(--ink-3); }
.source-list a { font-weight: 600; }
.src-org {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--ink-3);
  white-space: nowrap;
}
.src-why {
  display: block;
  margin-top: .2rem;
  font-size: .89rem;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .sources { padding: 1.15rem 1.05rem 1.25rem; }
  .src-org { white-space: normal; }
}



.masthead h1,
.prose h2, .prose h3,
.sec-head, .toc-head,
.story-list h3, .card-body h3,
.sources h2,
.wordmark {
  font-family: var(--display);
  font-feature-settings: "kern" 1, "liga" 1;
}
.masthead h1 { font-weight: 600; letter-spacing: -.012em; }
.prose h2    { font-weight: 600; letter-spacing: -.008em; }
.sec-head    { font-weight: 600; }
.wordmark    { font-weight: 600; }


.rail {
  background: var(--rail-bg);
  border-inline-end-color: transparent;
  color: var(--rail-ink);
}
.wordmark { color: var(--rail-ink); }
.wordmark span { color: var(--glaze-lift); }
.ornament {
  background:
    repeating-linear-gradient(45deg,  var(--glaze-lift) 0 3px, transparent 3px 12px),
    repeating-linear-gradient(-45deg, var(--glaze-lift) 0 3px, transparent 3px 12px);
  opacity: .5;
}
.rail-nav a { color: var(--rail-ink-2); }
.rail-nav a:hover,
.rail-nav a:focus-visible { color: var(--rail-ink); border-inline-start-color: var(--glaze-lift); }
.rail-nav [aria-current="page"] { color: var(--rail-ink); border-inline-start-color: var(--glaze-lift); }
.rail-search {
  background: rgba(236, 231, 220, .06);
  border-color: var(--rail-rule);
  color: var(--rail-ink);
}
.rail-search::placeholder { color: var(--rail-ink-2); opacity: 1; }
.rail-search:focus { outline-color: var(--glaze-lift); }
.langs { border-top-color: var(--rail-rule); }
.langs a { color: var(--rail-ink-2); }
.langs a:hover { color: var(--rail-ink); }
.langs [aria-current="true"] { color: var(--glaze-lift); }
.lang-soon { color: rgba(152, 162, 162, .45); }
.skip-link:focus { outline-color: var(--glaze-lift); }

@media (max-width: 1099px) {
  .rail { border-block-end: 1px solid var(--rail-rule); }
}


.prose figure.diagram { margin: 1.9rem 0; overflow-x: auto; }
svg.routes { display: block; width: 100%; min-width: 620px; height: auto; }


.prose code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--paper-2);
  padding: .1em .34em;
  border-radius: 2px;
}


@media (max-width: 780px) {
  .meta,
  .fineprint,
  .footer-count,
  .prose figcaption,
  .src-org,
  .src-checked,
  .entry .alt,
  .tool-note { font-size: .84rem; line-height: 1.62; }
}