.gf { margin: 2rem 0 2.4rem; }
.gf figcaption { font-size: .85rem; color: var(--ink-soft); padding-top: .65rem; }
.gf figcaption a { color: var(--ink-soft); }
.gf-panel { background: var(--render); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); }
.gf-title { font-family: var(--font-display); font-weight: 650; font-size: 1.08rem; line-height: 1.2; margin: 0 0 1rem; color: var(--ink); }
.gf-tag {
display: inline-block; font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--grassland); margin-bottom: .3rem;
}
.gf-ico { width: 72px; height: 72px; display: block; }
.prose .gf ul, .prose .gf ol { list-style: none; padding: 0; margin: 0; }
.prose .gf ul li, .prose .gf ol li { padding-left: 0; margin: 0; }
.prose .gf ul li::before, .prose .gf ol li::before { content: none; }
.gf-road, .gf-hand::before, .gf-sheet-road {
background:
repeating-linear-gradient(90deg, transparent 0 12px, #FAF4EB 12px 24px) center / 100% 2.5px no-repeat,
var(--primary);
}
.gf-hand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; position: relative; text-align: center; }
.gf-hand::before {
content: ""; position: absolute; left: 12%; right: 12%; top: 64px; height: 16px; border-radius: 3px;
}
.gf-hand li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding-top: 28px; }
.gf-hand li.is-move { padding-top: 0; }
.gf-hand .gf-ico { width: 84px; height: 84px; background: var(--render); border-radius: 50%; padding: 4px; }
.gf-hand .is-move .gf-ico { width: 104px; height: 104px; }
.gf-hand b { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; margin-top: .35rem; }
.gf-hand span { font-size: .9rem; color: var(--ink-soft); line-height: 1.35; max-width: 18ch; }
.gf-hand .gf-tag {
background: var(--grassland); color: #FAF4EB; padding: .2rem .55rem; border-radius: 4px; margin-bottom: .1rem;
}
@media (max-width: 560px) {
.gf-hand { grid-template-columns: 1fr; gap: 1.1rem; text-align: left; }
.gf-hand::before {
left: 34px; right: auto; top: 30px; bottom: 30px; width: 14px; height: auto;
background:
repeating-linear-gradient(180deg, transparent 0 12px, #FAF4EB 12px 24px) center / 2.5px 100% no-repeat,
var(--primary);
}
.gf-hand li, .gf-hand li.is-move {
display: grid; grid-template-columns: 82px 1fr; column-gap: .9rem; align-items: center; padding-top: 0;
}
.gf-hand li > .gf-ico { grid-row: 1 / span 3; width: 82px; height: 82px; }
.gf-hand .is-move > .gf-ico { width: 82px; height: 82px; }
.gf-hand li > :not(.gf-ico) { grid-column: 2; justify-self: start; }
.gf-hand b { margin-top: 0; }
.gf-hand span { max-width: none; }
}
.gf-cal { border-radius: 8px; overflow: hidden; background: var(--paper); }
.gf-dow, .gf-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.gf-dow span {
font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-soft); padding: .55rem .5rem .4rem; background: var(--paper);
}
.gf-day {
position: relative; min-height: 86px; padding: .4rem .5rem 1.6rem;
box-shadow: inset -1px -1px 0 color-mix(in oklab, var(--ink) 12%, transparent);
display: flex; flex-direction: column; gap: .15rem;
}
.gf-day.is-sun { box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--ink) 12%, transparent); }
.gf-num { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.gf-mon { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grassland); line-height: 1; }
.gf-day.is-term { background: var(--paper); }
.gf-day.is-term .gf-num, .gf-day.is-wkd .gf-num { color: color-mix(in oklab, var(--ink) 55%, var(--paper)); }
.gf-day.is-wkd { background: color-mix(in oklab, var(--render) 70%, var(--paper)); }
.gf-day.is-hol { background: var(--oxide-wash); }
.gf-day.is-hol .gf-num { color: var(--primary-deep); }
.gf-week { position: relative; }
.gf-wroad {
position: absolute; bottom: 10px; height: 14px; pointer-events: none;
left: calc(var(--c0) / 7 * 100%); width: calc((var(--c1) - var(--c0)) / 7 * 100%);
background:
repeating-linear-gradient(90deg, transparent 0 9px, #FAF4EB 9px 18px) center / 100% 2.5px no-repeat,
var(--primary);
transform-origin: left center;
}
.gf-wroad.cap-l { margin-left: 8px; width: calc((var(--c1) - var(--c0)) / 7 * 100% - 8px); border-radius: 4px 0 0 4px; }
.gf-wroad.cap-r { width: calc((var(--c1) - var(--c0)) / 7 * 100% - 8px); border-radius: 0 4px 4px 0; }
.gf-wroad.cap-l.cap-r { width: calc((var(--c1) - var(--c0)) / 7 * 100% - 16px); border-radius: 4px; }
.gf-mark { font-size: .74rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
.gf-day.has-mark .gf-num::after {
content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-left: .3rem; vertical-align: .18em; background: var(--k);
}
.mark-last { --k: var(--monument); }
.mark-labour { --k: var(--sun); }
.mark-dev { --k: var(--greybox); }
.mark-back { --k: var(--grassland); }
.gf-day.mark-labour { background: color-mix(in oklab, var(--sun) 26%, var(--oxide-wash)); }
.gf-day.mark-dev { background: repeating-linear-gradient(135deg, var(--paper) 0 6px, color-mix(in oklab, var(--greybox) 14%, var(--paper)) 6px 12px); }
.gf-day.mark-back { background: color-mix(in oklab, var(--grassland) 16%, var(--paper)); }
.gf-day.mark-back .gf-num, .gf-day.mark-last .gf-num, .gf-day.mark-dev .gf-num { color: var(--ink); }
.gf-key { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.4rem; margin-top: 1.1rem !important; font-size: .92rem; }
.gf-key li { position: relative; padding-left: 1.5rem !important; line-height: 1.35; }
.gf-key li b { display: block; font-weight: 600; }
.prose .gf-key li::before {
content: "" !important; position: absolute; left: 0; top: .3em; width: 11px; height: 11px; border-radius: 50%; background: var(--k);
}
.gf-key .key-hol { grid-column: 1 / -1; }
.prose .gf-key .key-hol::before {
width: 1.05rem; height: 9px; border-radius: 2px; top: .38em;
background:
repeating-linear-gradient(90deg, transparent 0 4px, #FAF4EB 4px 8px) center / 100% 1.5px no-repeat,
var(--primary);
}
.key-last { --k: var(--monument); }
.key-labour { --k: var(--sun); }
.key-dev { --k: var(--greybox); }
.key-back { --k: var(--grassland); }
@media (max-width: 560px) {
.gf-day { min-height: 58px; padding: .35rem .3rem 1.3rem; }
.gf-num { font-size: 1rem; }
.gf-mark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gf-day.has-mark .gf-num::after { display: block; margin: .3rem 0 0; }
.gf-wroad { bottom: 7px; height: 11px; }
.gf-dow span { padding-inline: .3rem; font-size: .66rem; }
.gf-key { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.gf-wroad {
animation: gf-lay linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
}
}
@keyframes gf-lay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gf-flow { display: flex; flex-direction: column; gap: 1.4rem; }
.gf-node {
background: var(--paper); border-radius: 8px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem;
box-shadow: var(--shadow-soft); position: relative;
}
.gf-node b { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; }
.gf-node span { font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }
.gf-node-start { border-left: 6px solid var(--primary); max-width: 34rem; }
.gf-node-soft { background: color-mix(in oklab, var(--paper) 55%, var(--render)); box-shadow: none; border: 1.5px dashed color-mix(in oklab, var(--ink) 28%, transparent); }
.gf-lanes { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; position: relative; }
.gf-lane { display: flex; flex-direction: column; gap: 1.1rem; position: relative; padding-top: 1.3rem; }
.gf-lane::before {
content: ""; position: absolute; top: -1.4rem; left: 1.4rem; width: 4px; height: 2.6rem; border-radius: 2px; background: var(--primary);
}
.gf-lane-out > .gf-node + .gf-node::before {
content: ""; position: absolute; top: -1.1rem; left: 1.4rem; width: 4px; height: 1.1rem; background: color-mix(in oklab, var(--ink) 30%, transparent);
}
.gf-lane-in .gf-node { border-top: 5px solid var(--grassland); }
.gf-lane-out > .gf-node:first-child { border-top: 5px solid var(--sun); }
@media (max-width: 560px) { .gf-lanes { grid-template-columns: 1fr; } }
.gf-folder { position: relative; padding-top: 2rem; }
.gf-folder-tab {
position: absolute; top: 0; left: 1.2rem; height: 2.3rem; padding: .45rem 1.1rem 0; border-radius: 10px 10px 0 0;
background: #E2C48F; font-family: var(--font-display); font-weight: 650; font-size: .95rem; color: var(--ink);
}
.gf-folder-body {
background: #EBD3A6; border-radius: 0 var(--radius) var(--radius) var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem);
display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4rem;
box-shadow: inset 0 2px 0 rgba(255,255,255,.35), var(--shadow-soft);
}
.gf-check-col { background: var(--paper); border-radius: 6px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(51,36,29,.08); }
.gf-check li { position: relative; padding: .45rem 0 .45rem 2rem !important; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 18%, transparent); font-size: .94rem; line-height: 1.35; }
.gf-check li:last-child { border-bottom: 0; }
.prose .gf-check li::before {
content: "" !important; position: absolute; left: 0; top: .5rem; width: 1.15rem; height: 1.15rem;
border: 2px solid var(--primary); border-radius: 3px; background: var(--paper);
}
.gf-folder-note { font-size: .88rem; color: var(--ink-soft); margin: .8rem 0 0; padding-top: .7rem; border-top: 2px solid var(--render); }
@media (max-width: 640px) { .gf-folder-body { grid-template-columns: 1fr; } }
.gf-table { margin: 0 !important; background: var(--paper); border-radius: 6px; }
.prose .gf-table th, .prose .gf-table td { padding: .7rem .8rem; }
.gf-table thead th { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.gf-table td:last-child { width: 27%; }
.gf-table tbody th { font-weight: 600; width: 28%; vertical-align: top; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent); }
.gf-ok, .gf-warn { display: inline-block; font-size: .85rem; font-weight: 600; line-height: 1.3; padding: .2rem .5rem; border-radius: 4px; }
.gf-ok { background: color-mix(in oklab, var(--grassland) 18%, var(--paper)); color: color-mix(in oklab, var(--grassland) 70%, var(--ink)); }
.gf-warn { background: var(--oxide-wash); color: var(--primary-deep); }
.gf-illo svg { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.gf-sheet { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.gf-sheet-road { height: 14px; }
.gf-sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; padding: clamp(1.1rem, 3vw, 1.6rem); }
.gf-dl { margin: 0; }
.gf-dl div { padding: .5rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 20%, transparent); }
.gf-dl div:last-child { border-bottom: 0; }
.gf-dl dt { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grassland); }
.gf-dl dd { margin: .1rem 0 0; font-weight: 600; font-size: .98rem; line-height: 1.3; }
@media (max-width: 640px) { .gf-sheet-cols { grid-template-columns: 1fr; } }
.gf-article .refs a { overflow-wrap: anywhere; }
@media (max-width: 560px) {
.tablewrap .gf-table { min-width: 0; }
.gf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gf-table, .gf-table tbody, .gf-table tr, .gf-table th, .gf-table td { display: block; width: auto !important; }
.gf-table tr { padding: .8rem .9rem; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent); }
.gf-table tr:last-child { border-bottom: 0; }
.prose .gf-table th, .prose .gf-table td { padding: 0; border: 0; }
.gf-table tbody th { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: .35rem; }
.gf-table td + td { margin-top: .45rem; }
.gf-table td::before {
content: attr(data-label); display: block; font-size: .7rem; font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; color: var(--grassland); margin-bottom: .1rem;
}
.gf-hand { gap: 1.7rem; }
}
.ds-photo img { aspect-ratio: 4 / 3; height: auto; }
.ds-hero { margin-top: .2rem; }
.ds-day { padding-top: 2.5rem; }
.prose .gf .ds-day-strip {
display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin: 0;
border-radius: var(--radius); box-shadow: var(--shadow-soft);
background: linear-gradient(90deg, #9DBAD0 0%, #BCC7C6 20%, #EBA275 42%, #EC9259 56%, #EDB46F 75%, #F1D597 100%);
}
.ds-day-strip::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 var(--radius) var(--radius);
background:
repeating-linear-gradient(90deg, transparent 0 12px, #FAF4EB 12px 24px) center / 100% 2.5px no-repeat,
var(--primary);
}
.prose .gf .ds-day-strip > li { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1rem 2.3rem 1.2rem; }
.ds-day-strip > li + li { box-shadow: inset 1px 0 0 rgba(51, 36, 29, .14); }
.ds-scene { display: flex; align-items: flex-end; gap: .15rem; height: 62px; margin-bottom: .4rem; }
.ds-ico { width: 58px; height: 58px; display: block; flex: 0 0 auto; }
.ds-truck { width: 64px; height: 64px; }
.ds-day-head { font-family: var(--font-display); font-weight: 650; font-size: 1rem; line-height: 1.22; color: var(--ink); }
.ds-day-do { font-size: .92rem; line-height: 1.35; color: var(--ink); }
.ds-mark { position: absolute; left: 0; top: -2.3rem; bottom: 0; width: 0; z-index: 2; }
.ds-mark::after { content: ""; position: absolute; left: -1.5px; top: 1.55rem; bottom: 0; width: 3px; background: var(--ink); }
.ds-mark b {
position: absolute; top: 0; white-space: nowrap; font-size: .74rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; background: var(--ink); color: var(--paper); padding: .3rem .55rem; border-radius: 4px; line-height: 1.1;
}
.is-am .ds-mark { left: 7px; }
.is-am .ds-mark b { left: -7px; }
.is-eve .ds-mark b { transform: translateX(-50%); }
@media (max-width: 600px) {
.prose .gf .ds-day-strip {
grid-template-columns: 1fr;
background: linear-gradient(180deg, #9DBAD0 0%, #BCC7C6 20%, #EBA275 42%, #EC9259 56%, #EDB46F 75%, #F1D597 100%);
}
.ds-day-strip::after {
right: auto; top: 0; width: 14px; height: auto; border-radius: var(--radius) 0 0 var(--radius);
background:
repeating-linear-gradient(180deg, transparent 0 12px, #FAF4EB 12px 24px) center / 2.5px 100% no-repeat,
var(--primary);
}
.ds-day { padding-top: 0; }
.prose .gf .ds-day-strip > li { padding: 1rem 1rem 1.2rem 2.1rem; }
.ds-day-strip > li + li { box-shadow: inset 0 1px 0 rgba(51, 36, 29, .14); }
.ds-day-strip > li.is-eve { box-shadow: inset 0 3px 0 var(--ink); }
.ds-mark { position: static; width: auto; order: -1; margin-bottom: .2rem; }
.ds-mark::after { display: none; }
.ds-mark b { position: static; display: inline-block; transform: none !important; }
.ds-scene { height: 52px; }
.ds-ico { width: 50px; height: 50px; }
.ds-truck { width: 54px; height: 54px; }
}
.prose .gf .ds-chart-note { font-size: .86rem; color: var(--ink-soft); margin: -.55rem 0 1.3rem; }
.ds-plot { display: grid; grid-template-columns: auto 1fr; gap: .55rem; height: 250px; padding: 1.6rem 0 2rem; box-sizing: content-box; }
.ds-plot-dual { grid-template-columns: auto 1fr auto; }
.ds-axis { position: relative; min-width: 2.2rem; font-size: .74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ds-axis span { position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); line-height: 1; white-space: nowrap; }
.ds-axis-r span { right: auto; left: 0; }
.ds-axis em { position: absolute; top: -1.6rem; right: 0; font-style: normal; font-weight: 600; font-size: .74rem; letter-spacing: .03em; }
.ds-axis-r em { right: auto; left: 0; }
.prose .gf .ds-bars {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(.35rem, 2vw, 1rem); align-items: end;
height: 100%; position: relative; border-bottom: 2px solid var(--ink);
background: linear-gradient(to top, color-mix(in oklab, var(--ink) 13%, transparent) 1px, transparent 1px) left bottom / 100% 25% repeat-y;
}
.ds-plot-area { position: relative; height: 100%; }
.ds-plot-area .ds-bars { gap: 0 !important; background-size: 100% 25%; }
.ds-bars > li { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.ds-bar { display: block; height: var(--h); position: relative; border-radius: 4px 4px 0 0; background: color-mix(in oklab, var(--sun) 52%, var(--paper)); }
.ds-bars .is-peak .ds-bar { background: var(--primary); }
.ds-plot-area .ds-bar { width: 58%; margin-inline: auto; background: #8FA7B8; }
.ds-val {
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: .3rem;
font-family: var(--font-display); font-weight: 650; font-size: .92rem; line-height: 1.1; white-space: nowrap; text-align: center;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.ds-u { font-size: .85em; }
.ds-peak {
position: absolute; bottom: calc(100% + 1.75rem); left: 50%; transform: translateX(-50%);
font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
background: var(--primary); color: var(--paper); padding: .18rem .45rem; border-radius: 4px; white-space: nowrap;
}
.ds-lab { position: absolute; top: 100%; left: 0; right: 0; text-align: center; padding-top: .5rem; font-size: .84rem; font-weight: 600; color: var(--ink); }
.ds-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.ds-dot {
position: absolute; left: 50%; bottom: var(--d); width: 13px; height: 13px; margin: 0 0 -6.5px -6.5px; z-index: 3;
border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2.5px var(--paper);
}
.ds-dot-val {
position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
background: var(--paper); color: var(--primary-deep); font-size: .8rem; font-weight: 700; line-height: 1;
padding: .2rem .35rem; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.prose .gf .ds-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: -.4rem 0 .4rem; font-size: .86rem; color: var(--ink-soft); }
.prose .gf .ds-legend li { position: relative; padding-left: 1.6rem; }
.prose .gf .ds-legend li::before { content: "" !important; position: absolute; left: 0; top: .3em; width: 1.05rem; height: .8rem; border-radius: 2px; background: #8FA7B8; }
.prose .gf .ds-legend li.is-line::before { height: 3px; top: .62em; background: var(--primary); box-shadow: 0 0 0 0 transparent; }
.prose .gf .ds-legend li.is-line::after { content: ""; position: absolute; left: .3rem; top: .43em; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
@media (max-width: 560px) {
.ds-plot { height: 220px; }
.ds-val { font-size: .82rem; }
.ds-chart-fig:not(.ds-rain-fig) .ds-u { display: block; }
.ds-peak { bottom: calc(100% + 2.4rem); }
.ds-axis { min-width: 1.9rem; font-size: .7rem; }
}
.ds-tl-wide { display: grid; gap: 0; padding-top: .3rem; }
.ds-tl-cards { display: grid; }
.ds-tl-cards.is-above { align-items: end; padding-bottom: 1rem; }
.ds-tl-cards.is-below { align-items: start; padding-top: 1rem; }
.ds-tl-card {
grid-area: 1 / 1; width: 12.4rem; background: var(--paper); border-radius: 6px; padding: .55rem .7rem;
box-shadow: 0 1px 2px rgba(51, 36, 29, .08); font-size: .8rem; line-height: 1.32;
}
.ds-tl-card.al-start { justify-self: start; margin-left: var(--x0); }
.ds-tl-card.al-mid { justify-self: start; margin-left: calc((var(--x0) + var(--x1)) / 2 - 6.2rem); }
.ds-tl-card.al-end { justify-self: end; margin-right: calc(100% - var(--x1)); }
.prose .gf .ds-tl-card li + li { margin-top: .3rem; }
.ds-tl-card b { font-weight: 700; color: var(--primary-deep); }
.ds-tl-track { position: relative; height: 16px; }
.ds-tl-road {
position: absolute; inset: 0; border-radius: 4px;
background:
repeating-linear-gradient(90deg, transparent 0 10px, #FAF4EB 10px 20px) left center / var(--end) 2.5px no-repeat,
linear-gradient(90deg, var(--primary) var(--end), var(--monument) var(--end));
}
.ds-pin {
position: absolute; left: var(--x); top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
background: var(--paper); box-shadow: 0 0 0 2.5px var(--ink); z-index: 2;
}
.ds-lead { position: absolute; left: var(--x); width: 2px; margin-left: -1px; height: 1rem; background: var(--ink); opacity: .55; }
.ds-lead.is-above { bottom: 100%; }
.ds-lead.is-below { top: 100%; }
.ds-tl-bands { display: flex; margin-top: 1.2rem; }
.ds-tl-band {
flex: 0 0 calc(var(--x1) - var(--x0)); min-width: 0; padding: .5rem .55rem .55rem; font-size: .76rem; line-height: 1.3;
border-top: 4px solid var(--bc); background: var(--bg);
}
.ds-tl-band + .ds-tl-band { box-shadow: inset 1px 0 0 rgba(250, 244, 235, .9); }
.b1 { --bc: #E7A27D; --bg: #F6E6D8; }
.b2 { --bc: var(--primary); --bg: #F3D5C6; }
.b3 { --bc: #7F98AA; --bg: #DCE3E6; }
.b4 { --bc: var(--monument); --bg: #3A3C3F; color: var(--paper); }
.prose .gf .ds-tl-note { font-size: .78rem; color: var(--ink-soft); margin: .7rem 0 0; }
.ds-tl-phone { display: none; }
@media (max-width: 720px) {
.ds-tl-wide { display: none !important; }
.ds-tl-phone { display: block; }
.prose .gf .ds-tlp-band { position: relative; padding: .1rem 0 1rem 1.5rem; }
.prose .gf .ds-tlp-band::before { content: "" !important; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--bc); }
.prose .gf .ds-tlp-band:first-child::before { border-radius: 5px 5px 0 0; }
.prose .gf .ds-tlp-band:last-child::before { border-radius: 0 0 5px 5px; }
.ds-tlp-band.b4 { color: var(--ink); }
.ds-tlp-head { display: block; font-family: var(--font-display); font-weight: 650; font-size: .95rem; line-height: 1.25; margin-bottom: .45rem; }
.prose .gf .ds-tlp-band ul li { position: relative; padding: .3rem 0 .3rem 1.1rem; font-size: .9rem; line-height: 1.35; }
.prose .gf .ds-tlp-band ul li::before {
content: "" !important; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%;
background: var(--paper); box-shadow: 0 0 0 2px var(--ink);
}
.ds-tlp-band b { font-weight: 700; color: var(--primary-deep); }
}
.ds-clock-panel { border-top: 6px solid var(--monument); }
.prose .gf .ds-check li { border-bottom: 1px dashed color-mix(in oklab, var(--ink) 18%, transparent); }
.prose .gf .ds-check li:last-child { border-bottom: 0; }
.ds-check label { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem 0; cursor: pointer; font-size: .96rem; line-height: 1.35; }
.ds-check input {
appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin: 0; border-radius: 4px;
border: 2px solid var(--primary); background: var(--paper); display: grid; place-content: center; cursor: pointer;
}
.ds-check input::before {
content: ""; width: .75rem; height: .75rem; background: var(--paper); transform: scale(0); transition: transform .22s var(--ease);
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.ds-check input:checked { background: var(--primary); }
.ds-check input:checked::before { transform: scale(1); }
.ds-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ds-check input:checked + span { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.ds-check small { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.ds-map { position: relative; max-width: 600px; margin: 0 auto; }
.ds-map svg { display: block; width: 100%; height: auto; }
.ds-states path { stroke-linejoin: round; }
.ds-states .is-std { fill: var(--paper); stroke: color-mix(in oklab, var(--ink) 50%, transparent); stroke-width: 1.2; }
.ds-states .is-dst { fill: #E59B74; stroke: var(--paper); stroke-width: 1.3; }
.ds-states .is-act { fill: var(--primary-deep); stroke: var(--ink); stroke-width: .8; }
.ds-map-lab {
position: absolute; transform: translate(-50%, -50%); font-size: clamp(.69rem, 1.9vw, .86rem); font-weight: 700;
letter-spacing: .05em; color: var(--ink); line-height: 1; pointer-events: none;
}
.ds-map-lab.is-act { transform: translate(0, -50%); }
.ds-map-arrow {
position: absolute; transform: translateY(-50%); width: 18%; font-size: clamp(.69rem, 1.8vw, .86rem);
font-weight: 600; line-height: 1.2; color: var(--ink);
}
.prose .gf .ds-map-key { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; margin-top: 1.1rem; font-size: .88rem; line-height: 1.35; color: var(--ink-soft); }
.prose .gf .ds-map-key li { position: relative; padding-left: 1.75rem; }
.prose .gf .ds-map-key li::before { content: "" !important; position: absolute; left: 0; top: .1em; width: 1.15rem; height: 1.15rem; border-radius: 3px; }
.prose .gf .ds-map-key li.is-dst::before { background: #E59B74; }
.prose .gf .ds-map-key li.is-std::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 50%, transparent); }
.ds-map-key b { display: block; color: var(--ink); font-weight: 650; }
@media (max-width: 560px) { .prose .gf .ds-map-key { grid-template-columns: 1fr; } }
.gf-dl.ds-glance { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; padding: clamp(1.1rem, 3vw, 1.6rem); }
.ds-glance > div:first-child { grid-column: 1 / -1; }
.gf-dl.ds-glance dt { text-transform: none; letter-spacing: .01em; font-size: .84rem; }
.ds-glance > div:first-child dd:not(.ds-src) { font-family: var(--font-display); font-size: 1.2rem; }
.ds-glance > div:nth-last-child(2) { border-bottom: 0; }
.gf-dl .ds-src { font-size: .78rem; font-weight: 400; color: var(--ink-soft); margin-top: .15rem; }
.gf-dl .ds-src a { color: var(--ink-soft); }
@media (max-width: 640px) {
.gf-dl.ds-glance { grid-template-columns: 1fr; }
.ds-glance > div:nth-last-child(2) { border-bottom: 1px dashed color-mix(in oklab, var(--ink) 20%, transparent); }
}
.gf-article .refs-note { font-size: .9rem; color: var(--ink-soft); }