:root { --wood: #5c4030; --wood-deep: #3f2a1e; --day: #3d9140; --day-deep: #2a6b2e; --sunset: #e07020; --sunset-deep: #b85712; --night: #2a3568; --night-deep: #1a2248; --sunrise: #c43c28; --sunrise-deep: #9a2e1e; --font-pixel: var(--font-display, "Sora", system-ui, sans-serif); } /* Phase tab strip, like the reference infographic */ .phase-strip { display: grid; grid-template-columns: 12fr 1fr 10fr 1fr; gap: 3px; margin: 1.25rem 0 1rem; border: 3px solid var(--wood-deep); background: var(--wood-deep); image-rendering: pixelated; } .phase-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.65rem 0.35rem; min-height: 4.25rem; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.35); position: relative; overflow: hidden; } .phase-tab__label { font-family: var(--font-pixel); font-size: clamp(0.62rem, 2.2vw, 0.85rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; z-index: 1; } .phase-tab__icon { width: 1.35rem; height: 1.35rem; image-rendering: pixelated; z-index: 1; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.25)); } .phase-tab--day { background: linear-gradient(180deg, rgba(125, 190, 90, 0.35) 0%, transparent 45%), repeating-linear-gradient(90deg, #4a9e3f 0 8px, #3d8a35 8px 16px), var(--day); } .phase-tab--sunset { background: linear-gradient(180deg, #f0a040 0%, #d46212 55%, #8a3510 100%); } .phase-tab--night { background: radial-gradient(circle at 70% 25%, rgba(255,255,255,0.35) 0 1px, transparent 2px), radial-gradient(circle at 30% 60%, rgba(255,255,255,0.25) 0 1px, transparent 2px), linear-gradient(180deg, #1e2a5c 0%, #121a38 100%); } .phase-tab--sunrise { background: linear-gradient(180deg, #f07840 0%, #c43c28 50%, #7a2018 100%); } /* Infographic chart panels */ .chart-panel { background: var(--card); border: 3px solid var(--wood); margin: 1.25rem 0 1.75rem; padding: 1.1rem 1rem 0.85rem; position: relative; box-shadow: 4px 4px 0 rgba(92, 64, 48, 0.1); } .chart-panel:before.chart-panel:after { content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--wood); border-style: solid; pointer-events: none; } .chart-panel:before { top: 4px; left: 4px; border-width: 3px 0 0 3px; } .chart-panel:after { bottom: 4px; right: 4px; border-width: 0 3px 3px 0; } .chart-panel h3 { margin: 0 0 0.2rem; font-family: var(--font-pixel); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); } .chart-panel .caption { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.75rem; } .chart-wrap { position: relative; height: 300px; } .chart-wrap.tall { height: 360px; } .chart-wrap.square { height: 280px; } .two-charts { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.85rem; margin: 1.25rem 0 1.75rem; } .two-charts .chart-panel { margin: 0; } .pie-layout { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1rem; align-items: center; } .pie-layout .chart-wrap.square { max-width: none; margin: 0; height: 240px; } .mc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; min-width: 7.5rem; } .mc-legend li { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-pixel); font-size: 0.78rem; line-height: 1.2; } .mc-legend__swatch { width: 1.15rem; height: 1.15rem; flex-shrink: 0; image-rendering: pixelated; border: 1px solid rgba(0,0,0,0.25); box-shadow: 1px 1px 0 rgba(0,0,0,0.12); } .mc-legend__name { color: var(--ink); } .mc-legend__pct { margin-left: auto; font-weight: 700; } .mc-legend__pct--day { color: var(--day-deep); } .mc-legend__pct--sunset { color: var(--sunset-deep); } .mc-legend__pct--night { color: var(--night); } .mc-legend__pct--sunrise { color: var(--sunrise-deep); } .mc-legend-total { margin-top: 0.35rem; padding-top: 0.45rem; border-top: 2px solid var(--line); font-family: var(--font-pixel); font-size: 0.75rem; color: var(--muted); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--card); border: 3px solid var(--wood); margin: 1rem 0 1.5rem; } th, td { text-align: left; padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: middle; } th { font-family: var(--font-pixel); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #f5ead0; background: linear-gradient(180deg, #6b4a36 0%, var(--wood) 100%); border-bottom: 2px solid var(--wood-deep); } tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) { background: rgba(217, 201, 168, 0.22); } .phase-cell { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-pixel); font-weight: 600; font-size: 0.9rem; } .phase-block { width: 1.35rem; height: 1.35rem; flex-shrink: 0; image-rendering: pixelated; border: 1px solid rgba(0,0,0,0.2); box-shadow: 1px 1px 0 rgba(0,0,0,0.15); } .phase-block--day { background: linear-gradient(#5d9c31 0 38%, #8b5a2b 38% 100%); box-shadow: inset 0 -2px 0 #6b4423, inset 2px 0 0 rgba(255,255,255,0.15); } .phase-block--sunset { background: repeating-linear-gradient(90deg, #e07020 0 4px, #c45c12 4px 8px); } .phase-block--night { background: radial-gradient(circle at 30% 35%, #e8e0ff 0 1.5px, transparent 2px), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.5) 0 1px, transparent 1.5px), linear-gradient(135deg, #2a3568, #1a2248); } .phase-block--sunrise { background: repeating-linear-gradient(90deg, #c43c28 0 4px, #a83220 4px 8px); } .phase-name--day { color: var(--day-deep); } .phase-name--sunset { color: var(--sunset-deep); } .phase-name--night { color: var(--night); } .phase-name--sunrise { color: var(--sunrise-deep); } .share--day { color: var(--day-deep); font-weight: 700; font-family: var(--font-pixel); } .share--sunset { color: var(--sunset-deep); font-weight: 700; font-family: var(--font-pixel); } .share--night { color: var(--night); font-weight: 700; font-family: var(--font-pixel); } .share--sunrise { color: var(--sunrise-deep); font-weight: 700; font-family: var(--font-pixel); } .gif-frame { background: var(--card); border: 3px solid var(--wood); margin: 1.25rem 0; overflow: hidden; } .gif-frame img { display: block; width: 100%; height: auto; image-rendering: auto; } .gif-frame figcaption { padding: 0.65rem 1rem; font-size: 0.85rem; color: var(--muted); border-top: 2px solid var(--line); } ol.method, ul { padding-left: 1.2rem; } ol.method li, ul li { margin: 0.35rem 0; } .command { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; background: #ebe1c8; border: 2px solid var(--line); padding: 0.85rem 1rem; margin: 0.75rem 0 1rem; overflow-x: auto; } @media (max-width: 700px) { .two-charts { grid-template-columns: 1fr; } .pie-layout { grid-template-columns: 1fr; } .mc-legend { flex-direction: row; flex-wrap: wrap; min-width: 0; } .mc-legend li { min-width: 42%; } .mc-legend__pct { margin-left: 0.35rem; } .phase-strip { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .chart-wrap { height: 260px; } table { font-size: 0.8rem; } th, td { padding: 0.45rem 0.35rem; } }