:root {
  --paper: #f4ecda;
  --paper-2: #fbf5e8;
  --paper-3: #eee2c8;
  --ink: #1c2b21;
  --ink-2: #4a5a4d;
  --pine: #2f4536;
  --pine-deep: #17231b;
  --pine-panel: #1f2c23;
  --pine-cell: #243329;
  --amber: #8a5310;
  --amber-bright: #b5731a;
  --amber-lit: #e0a54a;
  --heather: #6b4b8a;
  --heather-lit: #c3a6e0;
  --rule: #d6c4a0;
  --rule-soft: #e4d7ba;
  --dark-ink: #f0e7d4;
  --hero: #32200d;
  --hero-rise: #4a2f12;
  --hero-card: #3d2711;
  --hero-edge: #7a5626;
  --hero-ink: #f6ecd8;
  --hero-ink-2: #e0cfa9;
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --step: clamp(68px, 8.5vw, 124px);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--serif); text-rendering: optimizeLegibility;
}
[hidden] { display: none !important }
img, svg { max-width: 100% }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem) }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem) }
h3 { font-size: 1.3rem }
p { margin: 0 0 1.05em }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: var(--heather) }
:focus-visible { outline: 3px solid var(--heather); outline-offset: 3px }
.band-dark :focus-visible { outline-color: var(--heather-lit) }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: -9999px; top: 0; z-index: 100; background: var(--pine);
  color: var(--paper); padding: 12px 18px; font: 600 .9rem/1 var(--sans);
}
.skip:focus { left: 10px; top: 10px }
.svg-defs { position: absolute }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px) }

.site-head {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
.head-row { display: flex; align-items: center; gap: 14px; min-height: 62px; flex-wrap: wrap }
.brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  text-decoration: none; font: 600 1.06rem/1 var(--sans); letter-spacing: .005em;
}
.brand-mark { width: 22px; height: 26px; color: var(--amber-bright); flex: 0 0 auto }
.site-nav { margin-left: auto }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0 }
.site-nav a {
  display: block; padding: 9px 12px; color: var(--ink); text-decoration: none;
  font: 500 .78rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.site-nav a:hover { color: var(--amber); background: var(--paper-3) }
.nav-toggle {
  margin-left: auto; display: none; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
  padding: 9px 13px; font: 500 .78rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.bars { width: 14px; height: 16px; clip-path: var(--hex); background: var(--amber-bright) }
.nav-toggle[aria-expanded="true"] .bars { background: var(--heather) }
.js .nav-toggle { display: inline-flex }
@media (max-width: 799.98px) {
  .js .site-nav { display: none; flex-basis: 100% }
  .js .site-nav.open { display: block }
  .js .site-nav.open ul { flex-direction: column; gap: 0; padding-bottom: 10px }
  .js .site-nav.open a { border-top: 1px solid var(--rule-soft); padding: 14px 2px }
}
@media (min-width: 800px) { .js .nav-toggle { display: none } }

.masthead {
  position: relative; overflow: hidden; color: var(--hero-ink);
  background: var(--hero) radial-gradient(118% 88% at 10% 0%, var(--hero-rise) 0%, var(--hero) 62%);
  border-bottom: 3px solid var(--amber); padding-block: clamp(44px, 6vw, 84px) var(--step);
}
.masthead .lattice { color: var(--amber-lit); opacity: .13 }
.masthead a { color: var(--amber-lit) }
.masthead a:hover { color: var(--heather-lit) }
.masthead :focus-visible { outline-color: var(--heather-lit) }
.lattice {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--amber-bright); opacity: .16; pointer-events: none;
}
.lattice rect { width: 100%; height: 100% }
.band-dark .lattice { color: var(--amber-lit); opacity: .11 }
.mast-grid { position: relative; display: grid; gap: clamp(30px, 4vw, 64px); align-items: end }
h1 em { font-style: italic; color: var(--amber-lit) }
.standfirst { font-size: 1.22rem; color: var(--hero-ink-2); max-width: 46ch; margin: 22px 0 0 }

.hive-now { background: var(--hero-card); border: 1px solid var(--hero-edge); padding: 22px 24px 20px }
.now-kicker {
  position: relative; margin: 0 0 12px; padding-left: 23px; color: var(--amber-lit);
  font: 500 .74rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase;
}
.now-kicker::before {
  content: ""; position: absolute; left: 0; top: .16em; width: 13px; height: 15px;
  clip-path: var(--hex); background: var(--amber-lit);
}
.now-month { margin: 0 0 8px; font: 600 1.45rem/1.15 var(--serif); letter-spacing: -.015em }
.now-body { margin: 0 0 15px; font-size: 1rem; color: var(--hero-ink-2) }
.now-cta {
  margin: 0; font: 500 .78rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.now-cta a { text-underline-offset: 4px }

.band { position: relative; padding-block: var(--step) }
.band-tint { background: var(--paper-3) }
.band-dark { background: var(--pine-deep); color: var(--dark-ink); overflow: hidden }
.band-dark a { color: var(--amber-lit) }
.band-dark a:hover { color: var(--heather-lit) }
.sec-grid { position: relative; display: grid; gap: clamp(28px, 4vw, 56px) }
.sec-num {
  display: grid; place-items: center; width: 42px; height: 48px; clip-path: var(--hex);
  background: var(--amber); color: var(--paper); font: 600 .84rem/1 var(--mono); letter-spacing: .04em;
}
.band-dark .sec-num { background: var(--amber-lit); color: var(--pine-deep) }
.kicker {
  font: 500 .74rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); margin: 16px 0 10px;
}
.band-dark .kicker { color: var(--heather-lit) }
.sec-num + h2 { margin-top: 18px }
.sec-aside {
  margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--amber-bright);
  font-size: .95rem; color: var(--ink-2); max-width: 34ch;
}
.band-dark .sec-aside { color: #cdbfa6; max-width: 56ch }
.lede { font-size: 1.15rem; max-width: 60ch; margin-bottom: 1.4em }
.sec-body p, .sec-body li { max-width: 68ch }

.seam { border-top: 1px solid var(--rule) }
.seam:last-of-type { border-bottom: 1px solid var(--rule) }
.seam summary {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; cursor: pointer;
  padding: 17px 0 17px 36px; position: relative; list-style: none;
}
.seam summary::-webkit-details-marker { display: none }
.seam summary::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 19px; height: 22px;
  clip-path: var(--hex); background: var(--rule); transition: background .2s, transform .25s;
}
.seam summary:hover::before { background: var(--amber-bright) }
.seam[open] summary::before { background: var(--amber); transform: rotate(90deg) }
.seam-t { font: 600 1.2rem/1.2 var(--serif) }
.seam-s {
  font: 400 .74rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}
.seam > p, .seam > ul { padding-left: 36px }
.seam > p { margin-bottom: 20px }
.qs { margin: 0 0 22px; padding-left: 36px; list-style: none }
.qs li { padding: 7px 0; border-top: 1px dotted var(--rule) }
.qs b { color: var(--amber) }

.hive-set { margin-top: 30px }
.hive { border-top: 1px solid var(--rule); padding: 26px 0 }
.hive h3 { margin-bottom: 16px }
.hive-row { display: grid; gap: 20px; grid-template-columns: 74px minmax(0, 1fr); align-items: start }
.hive-fig { width: 74px; height: 92px; color: var(--pine); opacity: .9 }
.spec {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px;
  margin: 16px 0 0; font: 400 .8rem/1.5 var(--mono);
}
.spec dt { color: var(--amber); letter-spacing: .07em; text-transform: uppercase }
.spec dd { margin: 0; color: var(--ink-2) }
.hive-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none }
.hive-tabs button {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border-radius: 2px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink); padding: 11px 14px;
  font: 500 .78rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.hive-tabs button::before {
  content: ""; width: 10px; height: 11px; clip-path: var(--hex); background: var(--rule);
}
.hive-tabs button:hover { border-color: var(--amber-bright) }
.hive-tabs button[aria-selected="true"] { background: var(--pine); color: var(--paper); border-color: var(--pine) }
.hive-tabs button[aria-selected="true"]::before { background: var(--amber-lit) }
.tabbed .hive { border-top: 0; padding-top: 24px }
.tabbed .hive > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }

.steps { counter-reset: step; list-style: none; margin: 28px 0 0; padding: 0 }
.steps li {
  counter-increment: step; position: relative; padding: 14px 0 14px 58px;
  border-bottom: 1px solid var(--rule-soft); max-width: none;
}
.steps li:last-child { border-bottom: 0 }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 13px;
  width: 34px; height: 39px; clip-path: var(--hex); display: grid; place-items: center;
  background: var(--pine); color: var(--paper); font: 600 .74rem/1 var(--mono); letter-spacing: .04em;
}
.fieldnote {
  margin-top: 36px; max-width: 62ch; background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 5px solid var(--heather); padding: 18px 24px 20px;
}
.fieldnote p { line-height: 28px; margin: 0; max-width: none }
.fieldnote p:not(.fn-label) {
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(155, 128, 80, .2) 27px 28px);
}
.fn-label {
  font: 500 .72rem/28px var(--mono) !important; letter-spacing: .13em; text-transform: uppercase;
  color: var(--heather); margin-bottom: 8px !important;
}
.privacy { border-left-color: var(--amber-bright) }
.privacy .fn-label { color: var(--amber) }
.about-body p { max-width: 64ch }

.comb { --hw: clamp(80px, 24vw, 110px); --hh: calc(var(--hw) * 1.1547); list-style: none; margin: 0; padding: 0 }
.comb-row { display: flex; gap: 4px }
.comb-row + .comb-row { margin-top: calc(var(--hh) * -0.25 + 4px) }
.comb-row:nth-child(even) { margin-left: calc((var(--hw) + 4px) / 2) }
.cell { position: relative; flex: 0 0 auto; width: var(--hw); height: var(--hh) }
.cell::before {
  content: ""; position: absolute; inset: -4px; clip-path: var(--hex);
  background: var(--heather-lit); opacity: 0;
}
.cell:has(.hex-btn:focus-visible)::before { opacity: 1 }
.hex-btn {
  position: absolute; inset: 0; border: 0; clip-path: var(--hex); cursor: pointer;
  display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px;
  background: var(--pine-cell); color: #e4dac3; transition: background .18s, color .18s;
  font: 600 .74rem/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.hex-btn:hover { background: #33473a }
.hex-btn:focus-visible { outline: none; background: #3d5240 }
.hex-btn[aria-selected="true"] { background: var(--amber-lit); color: #24190a }
.hex-btn .num { font-size: .64rem; opacity: .82; letter-spacing: .1em }
.hex-btn .dot { width: 7px; height: 8px; clip-path: var(--hex); background: var(--heather-lit) }
.hex-btn[aria-selected="true"] .dot { background: #4a3067 }
.comb-mount { margin-bottom: 36px }
.comb-mount:empty { display: none }
p.comb-note { margin: 16px 0 0; font: 400 .78rem/1.55 var(--mono); color: #bdae95; max-width: 42ch }
.month {
  background: var(--pine-panel); border: 1px solid #35473b; border-left: 5px solid var(--amber-lit);
  padding: 24px 26px; max-width: 62ch;
}
.month + .month { margin-top: 18px }
.month h3 { margin-bottom: 10px }
.m-state { color: var(--amber-lit); font-style: italic; margin-bottom: 14px }
.month ul { margin: 0; padding-left: 20px }
.month li { margin-bottom: 8px }
.month li::marker { color: var(--heather-lit) }

.site-foot { background: var(--pine); color: var(--dark-ink); padding-block: 44px }
.site-foot a { color: var(--amber-lit) }
.foot-row { display: grid; gap: 10px }
.foot-row p { margin: 0; font-size: .92rem; max-width: 58ch }
.foot-row p:first-child { font: 500 .8rem/1.4 var(--mono); letter-spacing: .08em }

@media (min-width: 720px) {
  .foot-row { grid-template-columns: 1fr auto; align-items: end }
  .foot-row p:nth-child(2) { grid-row: 2; grid-column: 1 }
}
@media (min-width: 880px) {
  #planner .sec-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 42px }
  .comb-mount { margin-bottom: 0 }
}
@media (min-width: 920px) {
  .mast-grid { grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr) }
  .sec-grid { grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr) }
  .sec-head { position: sticky; top: 92px; align-self: start }
  #planner .sec-grid { grid-template-columns: minmax(0, 1fr) }
  #planner .sec-head { position: static; display: grid; grid-template-columns: auto 1fr; gap: 0 22px }
  #planner .sec-num { grid-row: span 3 }
  .hive-row { grid-template-columns: 92px minmax(0, 1fr); gap: 28px }
  .hive-fig { width: 92px; height: 114px }
}

@media print {
  .site-head, .skip, .lattice, .hive-tabs, .comb-mount { display: none !important }
  .month[hidden], .hive[hidden] { display: block !important }
  .band, .band-dark, .month, .site-foot { background: #fff !important; color: #000 !important }
  .masthead, .hive-now { background: #fff !important; color: #000 !important; border-color: #000 }
  .standfirst, h1 em, .now-kicker, .now-month, .now-body { color: #000 !important }
  .tabbed .hive > h3 { position: static; width: auto; height: auto; clip-path: none }
  .m-state, .band-dark .kicker, .band-dark .sec-aside { color: #000 !important }
  .month { border-color: #000 }
  .seam > p, .seam > ul, .qs { padding-left: 0 }
  body { font-size: 11pt }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}