/* ==========================================================================
   Unkink — "daylight rail" style sheet.
   Light ground, 1px warm-grey hairlines, zero shadows, 3px corners.
   The one motif that repeats everywhere is a horizontal rail cut into
   proportional blocks: buttons are short rails, tabs are blocks, the divider
   between breadcrumb parts is an 8px dash. No circles, no arcs, no radial
   anything — that is a deliberate house rule, not an oversight.
   ========================================================================== */

:root {
  --sunrail-paper: #F6F3ED;
  --sunrail-card: #FFFFFF;
  --sunrail-ink: #23201C;
  --sunrail-slate: #6B7A8F;
  --sunrail-amber: #E07A3F;
  --sunrail-sage: #43705F;
  --sunrail-rule: #E3DED3;
  --sunrail-track: #D8D2C6;
  --sunrail-amber-soft: #FBEADF;
  --sunrail-sage-soft: #E4EDE8;
  --sunrail-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sunrail-sans: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --sunrail-head: "Gabarito", "Be Vietnam Pro", Arial, sans-serif;
  --srail-gutter: 22px;
}

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

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

body.srail-body {
  margin: 0;
  background: var(--sunrail-paper);
  color: var(--sunrail-ink);
  font-family: var(--sunrail-sans);
  font-size: 16.5px;
  line-height: 1.62;
}

.srail-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sunrail-ink); color: var(--sunrail-paper);
  padding: 10px 16px; z-index: 40;
}
.srail-skip:focus { left: 8px; top: 8px; }

.srail-shell { max-width: 1140px; margin: 0 auto; padding: 0 var(--srail-gutter); }

a { color: var(--sunrail-sage); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sunrail-amber); }

h1, h2, h3, h4 { font-family: var(--sunrail-head); font-weight: 600; line-height: 1.22; margin: 0 0 10px; letter-spacing: -0.01em; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }

.srail-num, .srail-count, .srail-time, .srail-scale b, .srail-seconds, .srail-remain { font-family: var(--sunrail-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- masthead */
.srail-masthead {
  border-bottom: 1px solid var(--sunrail-rule);
  background: var(--sunrail-paper);
}
.srail-masthead .srail-shell {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px; flex-wrap: wrap;
}
.srail-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sunrail-ink); font-family: var(--sunrail-head); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.srail-mark i { display: inline-flex; flex-direction: column; gap: 3px; }
.srail-mark i b { display: block; height: 4px; width: 26px; border-radius: 3px; background: var(--sunrail-ink); }
.srail-mark i b:nth-child(2) { width: 17px; background: var(--sunrail-amber); }
.srail-mark i b:nth-child(3) { width: 10px; background: var(--sunrail-sage); }
.srail-mark span { font-weight: 400; font-family: var(--sunrail-sans); color: var(--sunrail-slate); font-size: 13px; }

/* the duration bar is the site nav: five proportional blocks, always visible */
.srail-durations { display: flex; gap: 5px; margin-left: auto; align-items: stretch; }
.srail-dur {
  display: block; text-decoration: none; color: var(--sunrail-ink);
  border: 1px solid var(--sunrail-track); background: var(--sunrail-card);
  border-radius: 3px; padding: 7px 0 6px; text-align: center;
  font-family: var(--sunrail-mono); font-size: 13px; min-width: 56px;
  border-bottom-width: 3px;
}
.srail-dur em { display: block; font-style: normal; font-family: var(--sunrail-sans); font-size: 10.5px; color: var(--sunrail-slate); letter-spacing: 0.04em; text-transform: uppercase; }
.srail-dur:hover, .srail-dur:focus-visible { border-color: var(--sunrail-amber); color: var(--sunrail-amber); }
.srail-dur[aria-current="page"] { border-color: var(--sunrail-amber); background: var(--sunrail-amber-soft); }
.srail-dur[aria-current="page"] em { color: var(--sunrail-amber); }
.srail-masthead-links { display: flex; gap: 14px; font-size: 13.5px; align-items: center; }
.srail-masthead-links a { color: var(--sunrail-slate); text-decoration: none; }
.srail-masthead-links a:hover { color: var(--sunrail-amber); }
.srail-lang { border: 1px solid var(--sunrail-track); border-radius: 3px; padding: 4px 9px; font-family: var(--sunrail-mono); font-size: 12px; }

.srail-mobile-durs { display: none; position: sticky; top: 0; z-index: 30; background: var(--sunrail-paper); border-bottom: 1px solid var(--sunrail-rule); padding: 8px 0; }

/* ------------------------------------------------------------------- stage */
.srail-stage { padding: 26px 0 8px; }
.srail-kicker { font-family: var(--sunrail-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sunrail-slate); display: block; margin-bottom: 8px; }
.srail-lede { color: var(--sunrail-slate); max-width: 62ch; }

.srail-player {
  border: 1px solid var(--sunrail-rule); background: var(--sunrail-card);
  border-radius: 3px; padding: 20px 20px 16px; margin: 20px 0 8px;
}
.srail-timeline { position: relative; }
.srail-rail { display: flex; gap: 4px; align-items: stretch; }
.srail-seg { height: 46px; border-radius: 3px; border: 1px solid var(--sunrail-track); background: var(--sunrail-card); flex: 0 0 auto; }
.srail-seg[data-state="done"] { background: var(--sunrail-sage); border-color: var(--sunrail-sage); }
.srail-seg[data-state="now"] { background: var(--sunrail-amber); border-color: var(--sunrail-amber); }
.srail-ruler { display: flex; justify-content: space-between; font-family: var(--sunrail-mono); font-size: 11px; color: var(--sunrail-slate); margin-top: 6px; }
.srail-cursor {
  position: absolute; top: -6px; width: 9px; height: 58px; background: var(--sunrail-ink);
  border-radius: 3px; transform: translateX(-50%);
}
.srail-cursor::after { content: ""; position: absolute; left: 3px; top: 12px; width: 3px; height: 34px; background: var(--sunrail-paper); border-radius: 3px; }

.srail-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.srail-axes h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sunrail-slate); font-family: var(--sunrail-sans); font-weight: 600; margin-bottom: 9px; }
.srail-picks { display: flex; gap: 5px; flex-wrap: wrap; }
.srail-pick {
  border: 1px solid var(--sunrail-track); background: var(--sunrail-card); color: var(--sunrail-ink);
  border-radius: 3px; padding: 8px 14px; font-family: var(--sunrail-mono); font-size: 14px; cursor: pointer;
  border-bottom-width: 3px;
}
.srail-pick:hover { border-color: var(--sunrail-amber); color: var(--sunrail-amber); }
.srail-pick[aria-pressed="true"] { background: var(--sunrail-amber); border-color: var(--sunrail-amber); color: #fff; }
.srail-chip {
  border: 1px solid var(--sunrail-track); background: var(--sunrail-card); color: var(--sunrail-ink);
  border-radius: 3px; padding: 7px 13px; font-size: 14px; cursor: pointer;
}
.srail-chip:hover { border-color: var(--sunrail-amber); color: var(--sunrail-amber); }
.srail-chip[aria-pressed="true"] { background: var(--sunrail-sage-soft); border-color: var(--sunrail-sage); color: var(--sunrail-sage); }

.srail-readout { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sunrail-rule); }
.srail-readout .srail-time { font-size: 26px; letter-spacing: -0.02em; }
.srail-readout .srail-count { font-size: 13px; color: var(--sunrail-slate); }
.srail-start {
  margin-left: auto; display: inline-block; text-decoration: none; color: #fff; background: var(--sunrail-amber);
  border-radius: 3px; padding: 11px 20px 11px 16px; font-weight: 600; border-bottom: 3px solid #BC5F2C;
}
.srail-start:hover { color: #fff; background: #CE6B32; }
.srail-start[aria-disabled="true"] { background: var(--sunrail-track); border-color: #C4BDB0; color: #6E6659; pointer-events: none; }
.srail-start i { display: inline-block; width: 3px; height: 12px; background: currentColor; margin-right: 9px; vertical-align: -1px; border-radius: 2px; }

.srail-resume { display: flex; align-items: center; gap: 12px; border: 1px solid var(--sunrail-rule); border-radius: 3px; background: var(--sunrail-card); padding: 10px 14px; margin: 14px 0 24px; font-size: 14.5px; }
.srail-resume[hidden] { display: none; }
.srail-resume-track { position: relative; flex: 1; height: 8px; background: var(--sunrail-paper); border: 1px solid var(--sunrail-track); border-radius: 3px; }
.srail-resume-mark { position: absolute; top: -3px; width: 5px; height: 12px; background: var(--sunrail-amber); border-radius: 2px; }

/* ------------------------------------------------------------------- cards */
.srail-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 34px; }
.srail-card {
  border: 1px solid var(--sunrail-rule); background: var(--sunrail-card); border-radius: 3px;
  padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px;
}
.srail-card:hover { border-color: var(--sunrail-amber); }
.srail-card img { width: 100%; height: auto; display: block; border-radius: 3px; }
.srail-card h3 { font-size: 16.5px; margin: 0; }
.srail-card h3 a { color: var(--sunrail-ink); text-decoration: none; }
.srail-card h3 a:hover { color: var(--sunrail-amber); }
.srail-card .srail-lede { font-size: 14px; margin: 0; }
.srail-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--sunrail-mono); font-size: 12px; color: var(--sunrail-slate); }
.srail-meta span { border: 1px solid var(--sunrail-rule); border-radius: 3px; padding: 2px 7px; }
.srail-meta span.srail-amber { color: var(--sunrail-amber); border-color: var(--sunrail-amber); }
/* Byline chip: same rail-segment shape as the rest of the meta row, struck in
   sage so it reads as authorship rather than another piece of metadata. */
.srail-meta a.srail-byline {
  border: 1px solid var(--sunrail-sage); border-radius: 3px; padding: 2px 7px;
  color: var(--sunrail-sage); text-decoration: none;
}
.srail-meta a.srail-byline:hover { background: #F2F6F3; }
.srail-card .srail-meta { margin-top: auto; }

/* ------------------------------------------------------------------- lists */
.srail-head { padding: 24px 0 6px; }
.srail-crumb { font-size: 13px; color: var(--sunrail-slate); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.srail-crumb a { color: var(--sunrail-slate); text-decoration: none; }
.srail-crumb a:hover { color: var(--sunrail-amber); }
.srail-crumb .srail-dash { display: inline-block; width: 8px; height: 2px; background: var(--sunrail-track); }
.srail-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 20px; }
.srail-filters a { text-decoration: none; }
.srail-rows { border-top: 1px solid var(--sunrail-rule); margin-bottom: 34px; }
.srail-row { display: grid; grid-template-columns: 132px 1fr auto; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--sunrail-rule); text-decoration: none; color: var(--sunrail-ink); }
.srail-row:hover { background: #FCFAF6; }
.srail-row h3 { font-size: 16px; margin: 0 0 3px; }
.srail-row p { margin: 0; font-size: 13.5px; color: var(--sunrail-slate); }
.srail-row .srail-meta { justify-content: flex-end; }

/* ----------------------------------------------------------- routine pages */
.srail-progress { display: flex; gap: 3px; margin: 4px 0 0; }
.srail-progress i { display: block; height: 5px; border-radius: 3px; background: var(--sunrail-track); }
.srail-progress i.done { background: var(--sunrail-sage); }
.srail-progress i.now { background: var(--sunrail-amber); }

.srail-detail { padding: 20px 0 10px; }
.srail-detail h1 { margin-bottom: 6px; }
.srail-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.srail-figure { border: 1px solid var(--sunrail-rule); background: var(--sunrail-card); border-radius: 3px; padding: 8px; }
.srail-figure img { width: 100%; height: auto; display: block; }

.srail-transport { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.srail-tbtn {
  border: 1px solid var(--sunrail-track); background: var(--sunrail-card); color: var(--sunrail-ink);
  border-radius: 3px; padding: 9px 13px; font-family: var(--sunrail-mono); font-size: 13px; cursor: pointer;
  border-bottom-width: 3px;
}
.srail-tbtn:hover { border-color: var(--sunrail-amber); color: var(--sunrail-amber); }
.srail-tbtn[aria-pressed="true"] { background: var(--sunrail-amber-soft); border-color: var(--sunrail-amber); color: var(--sunrail-amber); }
.srail-tbtn-primary { background: var(--sunrail-amber); border-color: var(--sunrail-amber); color: #fff; font-weight: 600; padding: 9px 20px; }
.srail-tbtn-primary:hover { color: #fff; background: #CE6B32; }

.srail-now { margin-top: 16px; }
.srail-now .srail-now-name { font-family: var(--sunrail-head); font-size: 20px; }
.srail-now .srail-now-zh { color: var(--sunrail-slate); font-size: 14px; }
.srail-now .srail-remain { font-size: 34px; letter-spacing: -0.03em; margin-top: 2px; }
.srail-cue { border-left: 3px solid var(--sunrail-amber); padding: 8px 0 8px 12px; color: var(--sunrail-ink); background: var(--sunrail-amber-soft); border-radius: 0 3px 3px 0; margin-top: 12px; font-size: 15px; }

.srail-blocks { border-top: 1px solid var(--sunrail-rule); }
.srail-block {
  display: grid; grid-template-columns: 54px 1fr 62px; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--sunrail-rule);
  padding: 9px 4px; cursor: pointer; font: inherit; color: inherit;
}
.srail-block:hover { background: #FCFAF6; }
.srail-block[data-state="now"] { background: var(--sunrail-amber-soft); }
.srail-block[data-state="done"] { background: var(--sunrail-sage-soft); }
.srail-block .srail-bar { height: 8px; border-radius: 3px; background: var(--sunrail-track); }
.srail-block[data-state="now"] .srail-bar { background: var(--sunrail-amber); }
.srail-block[data-state="done"] .srail-bar { background: var(--sunrail-sage); }
.srail-block .srail-block-name { font-size: 14.5px; }
.srail-block .srail-block-side { font-family: var(--sunrail-mono); font-size: 11.5px; color: var(--sunrail-slate); }
.srail-block .srail-seconds { text-align: right; font-size: 15px; }

.srail-scale { border: 1px solid var(--sunrail-rule); background: var(--sunrail-card); border-radius: 3px; padding: 14px; }
.srail-scale h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sunrail-slate); font-family: var(--sunrail-sans); font-weight: 600; }
.srail-scale dl { margin: 0; font-size: 13.5px; }
.srail-scale dt { color: var(--sunrail-slate); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; }
.srail-scale dd { margin: 2px 0 0; }

.srail-fold { border: 1px solid var(--sunrail-rule); border-radius: 3px; background: var(--sunrail-card); margin: 18px 0; }
.srail-fold summary { cursor: pointer; padding: 12px 16px; font-family: var(--sunrail-head); font-weight: 600; }
.srail-fold[open] summary { border-bottom: 1px solid var(--sunrail-rule); }
.srail-fold .srail-fold-inner { padding: 14px 16px 6px; }
.srail-steps { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.srail-steps th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sunrail-slate); font-weight: 600; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--sunrail-rule); }
.srail-steps td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--sunrail-rule); vertical-align: top; }
.srail-steps td.srail-seconds { text-align: right; font-size: 13.5px; white-space: nowrap; }

.srail-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 30px; }
.srail-notes section { border-top: 3px solid var(--sunrail-ink); padding-top: 12px; }
.srail-notes h2 { font-size: 18px; }
.srail-notes h3 { font-size: 15px; margin-top: 14px; }
.srail-notes ul { padding-left: 18px; }

.srail-props { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.srail-prop { font-family: var(--sunrail-mono); font-size: 12px; border: 1px solid var(--sunrail-rule); border-radius: 3px; padding: 3px 8px; color: var(--sunrail-slate); }

.srail-notice { border: 1px solid var(--sunrail-rule); border-left: 3px solid var(--sunrail-sage); background: var(--sunrail-card); border-radius: 0 3px 3px 0; padding: 13px 16px; margin: 18px 0 30px; font-size: 14px; color: #3F3B34; }
.srail-notice strong { font-family: var(--sunrail-head); }

.srail-faq { margin-bottom: 30px; }
.srail-faq details { border-bottom: 1px solid var(--sunrail-rule); padding: 12px 0; }
.srail-faq summary { cursor: pointer; font-weight: 600; font-family: var(--sunrail-head); }
.srail-faq p { margin: 8px 0 0; color: #3F3B34; }

/* ------------------------------------------------------------------ prose */
.srail-prose { max-width: 74ch; margin-bottom: 34px; }
.srail-prose h2 { margin-top: 24px; }
.srail-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 12px 0 18px; }
.srail-prose th, .srail-prose td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--sunrail-rule); }
.srail-prose code { font-family: var(--sunrail-mono); font-size: 14px; background: var(--sunrail-card); border: 1px solid var(--sunrail-rule); border-radius: 3px; padding: 1px 5px; }

.srail-related { margin-bottom: 34px; }
.srail-legal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 30px; }
.srail-legal-grid > div { border: 1px solid var(--sunrail-rule); border-radius: 3px; background: var(--sunrail-card); padding: 14px 16px; }

/* ------------------------------------------------------------------- foot */
.srail-foot { border-top: 1px solid var(--sunrail-rule); margin-top: 30px; padding: 22px 0 40px; font-size: 13.5px; color: var(--sunrail-slate); }
.srail-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; }
.srail-foot h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sunrail-ink); font-family: var(--sunrail-sans); margin-bottom: 8px; }
.srail-foot a { display: block; color: var(--sunrail-slate); text-decoration: none; padding: 2px 0; }
.srail-foot a:hover { color: var(--sunrail-amber); }
.srail-foot-rule { display: flex; gap: 4px; margin-bottom: 16px; max-width: 220px; }
.srail-foot-rule b { display: block; height: 4px; border-radius: 3px; }
.srail-foot-rule b:nth-child(1) { width: 66px; background: var(--sunrail-ink); }
.srail-foot-rule b:nth-child(2) { width: 40px; background: var(--sunrail-amber); }
.srail-foot-rule b:nth-child(3) { width: 22px; background: var(--sunrail-sage); }
.srail-fine { border-top: 1px solid var(--sunrail-rule); margin-top: 18px; padding-top: 12px; font-size: 12.5px; }
.srail-fine .srail-editorial-note { color: #3F3B34; }

@media (max-width: 900px) {
  .srail-deck { grid-template-columns: repeat(2, 1fr); }
  .srail-detail-grid { grid-template-columns: 1fr; }
  .srail-axes { grid-template-columns: 1fr; }
  .srail-notes { grid-template-columns: 1fr; }
  .srail-row { grid-template-columns: 96px 1fr; }
  .srail-row .srail-meta { grid-column: 2; justify-content: flex-start; }
  .srail-legal-grid { grid-template-columns: 1fr; }
  .srail-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .srail-durations { display: none; }
  .srail-mobile-durs { display: block; }
  .srail-mobile-durs .srail-durations { display: flex; margin: 0; }
  .srail-deck { grid-template-columns: 1fr; }
  h1 { font-size: 25px; }
  .srail-readout .srail-time { font-size: 22px; }
}