.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; }
}