/* ---- The guide's own tones: flat fills for the drawings, both schemes ---- */

:root {
  --wide:      64rem;   /* the drawings' measure; text stays at --measure */
  --straw:     #C9A96A;
  --dry-leaf:  #9C7A4A;
  --clove:     #EFE6D2;
  /* the year's four seasons as flat fills, cold to warm; the soil as a flat fill */
  --s-fall:    #E9CDAE;
  --s-winter:  #C9D3DD;
  --s-spring:  #D6E2C4;
  --s-summer:  #EBC888;
  --soil-fill: #D9C4A2;
  /* a method guide's drawings (hardening off): shade, sun and night bands, the bars, the scale's five
     steps cold to warm, and the crops that stand on it */
  --shade:     #B8B09C;
  --sun:       #E3C56A;
  --night:     #5A5F7A;
  --leaf:      #4C7A3C;
  --t-frost:   #C9D3DD;
  --t-cold:    #D9DED4;
  --t-cool:    #E6E3C8;
  --t-mild:    #EED9A8;
  --t-warm:    #E7BF7A;
  --cabbage:   #7FA38A;
  --tomato:    #C25B3F;
  --cucumber:  #5F8F4E;
  --seedling:  #4C7A3C;
}

@media (prefers-color-scheme: dark) {
  :root {
    --straw:     #B8955A;
    --dry-leaf:  #A98A5E;
    --clove:     #D9CEB6;
    --s-fall:    #5E4232;
    --s-winter:  #39434E;
    --s-spring:  #34432B;
    --s-summer:  #625229;
    --soil-fill: #4A3D2D;
    --shade:     #6E6858;
    --sun:       #C9A94E;
    --night:     #3E4260;
    --leaf:      #8FB877;
    --t-frost:   #39434E;
    --t-cold:    #3B423A;
    --t-cool:    #4A4731;
    --t-mild:    #5C4E2C;
    --t-warm:    #6E5429;
    --cabbage:   #8FB89C;
    --tomato:    #D9755B;
    --cucumber:  #8FB877;
    --seedling:  #8FB877;
  }
}

/* ---- The sheet: text at the measure, drawings wider ---- */

.sheet.guide { max-width: var(--wide); }
.guide main p, .guide main ul, .guide main ol { max-width: var(--measure); }
.guide main ul, .guide main ol { padding-left: 1.2rem; margin: 0 0 1.15rem; }
.guide main li { margin-bottom: .3rem; }

/* ---- Title block ---- */

.guide .steps.top { margin-top: 1.4rem; padding-top: 0; border-top: 0; }
.guide .steps.top + .head .kicker, .guide .steps.top + .kicker { margin-top: 1.2rem; }

.guide .kicker { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 2.2rem 0 .4rem; }
.guide h1 { font-weight: 500; font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.05; margin: 0 0 .9rem; letter-spacing: -.01em; }
.guide .opener { font-style: italic; font-size: 1.25rem; line-height: 1.4; margin: 0 0 .6rem; }
/* Where it was grown, under the opener: the zone, and that the app goes by location, not zone. */
.guide .grown { font-size: .95rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.guide .reads { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.guide .zip-frost { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .6rem; font-size: .95rem; }
.guide .zip-frost[hidden] { display: none; }
.guide .zip-frost input { width: 5.5em; padding: .25rem .4rem; font: inherit; color: var(--ink); background: var(--element); border: 1px solid var(--rule); border-radius: 3px; }
.guide .zip-frost button { padding: .25rem .6rem; font: inherit; color: var(--ink); background: var(--element); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; }
.guide .zip-frost input:focus-visible, .guide .zip-frost button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide .zip-frost-line { flex: 1 1 100%; margin: 0; color: var(--ink-soft); }
.guide .zip-frost-line:empty { display: none; }
.guide .head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(13rem, 34%, 22rem); column-gap: 2rem; align-items: end; }
.guide .head-text { min-width: 0; }
.guide .lead-art { display: block; justify-self: end; height: auto; max-width: 100%; margin: 2.2rem 0 .35rem; }
.guide .lead-art.wide { width: 100%; }
.guide .lead-art.tall { width: auto; max-height: 20rem; }
.guide .zoomable { cursor: zoom-in; }
.guide .zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guide-zoom svg.zoomed { display: block; width: max(100%, 60rem); max-width: 100rem; height: auto; margin: 0 auto; clear: both; }
/* One stage of a drawing (guide.js reads its frame from data-panels): the window's width, no wider than a page, and
   never taller than the window, so a phone shows the stage whole with no panning. */
.guide-zoom svg.zoomed.panel { width: 100%; max-width: 44rem; max-height: calc(100vh - 5rem); }
.guide-zoom img.zoomed { border: 0; border-radius: 0; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 5rem); clear: both; }
@media (max-width: 720px) {
  .guide .head { grid-template-columns: minmax(0, 1fr); }
  .guide .lead-art { justify-self: start; margin: .8rem 0 1.4rem; }
  .guide .lead-art.wide { width: min(100%, 24rem); }
  .guide .lead-art.tall { max-height: 17rem; }
}

.toc { max-width: var(--measure); margin: 0 0 2.2rem; font-size: .9rem; color: var(--ink-soft); }
.toc summary, .foot .docs summary { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem 0; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker, .foot .docs summary::-webkit-details-marker { display: none; }
.toc summary::after, .foot .docs summary::after { content: ''; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(.12rem) rotate(-135deg); }
.toc details[open] summary::after, .foot .docs[open] summary::after { transform: translateY(-.12rem) rotate(45deg); }
.toc summary:hover, .foot .docs summary:hover { color: var(--ink); }
.toc summary:focus-visible, .foot .docs summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.guide .toc ol { list-style: none; width: max-content; max-width: 100%; margin: .35rem 0 0; padding: .5rem 1.2rem .55rem 1rem; background: var(--element); border-radius: 8px; }
.guide .toc li { margin: 0; }
.toc a { display: inline-block; padding: .1rem 0; color: var(--ink-soft); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { color: var(--link); text-decoration: underline; }

/* BACK TO TOP: rides at the bottom right of the text column while you read and comes to rest
   at the end of the guide. A sticky row, so no script. Where the browser can tie an animation
   to the scroll, it stays hidden at the top of the page and fades in as the page moves. */
.to-top { position: sticky; bottom: 1rem; z-index: 1; display: flex; justify-content: flex-end; max-width: var(--measure); margin: 1.6rem 0 0; pointer-events: none; }
.to-top a { pointer-events: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; font-size: .85rem; color: var(--ink-soft); background: var(--element); border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; }
.to-top a::before { content: ''; width: .38rem; height: .38rem; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateY(.12rem) rotate(45deg); }
.to-top a:hover, .to-top a:focus-visible { color: var(--ink); }
.to-top a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@supports (animation-timeline: scroll()) {
  .to-top a { animation: to-top-in linear both; animation-timeline: scroll(root); animation-range: 20vh 60vh; }
}
@keyframes to-top-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* ---- Sections: a heading, then prose. Spacing varies on purpose ---- */

.guide h2 { font-weight: 500; font-size: 1.55rem; line-height: 1.2; margin: 2.8rem 0 .7rem; scroll-margin-top: 1.2rem; }
.guide h2 + p { margin-top: 0; }
.section-anchor { color: var(--ink-soft); text-decoration: none; font-size: .8rem; margin-left: .5rem; opacity: 0; }
.guide h2:hover .section-anchor { opacity: 1; }

/* Quick facts: a left-labelled list, not a card grid */
dl.facts { max-width: var(--measure); margin: 0 0 1.5rem; border-top: 1px solid var(--rule); }
dl.facts div { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
dl.facts dt { flex: 0 0 9.5rem; color: var(--ink-soft); font-size: .95rem; }
dl.facts dd { margin: 0; flex: 1; }
.notyet { color: var(--ink-soft); font-style: italic; }

/* ---- Figures: one left edge, wider than the text ---- */

.guide figure { margin: 1.6rem 0 2rem; max-width: var(--wide); }
.guide figure svg { display: block; width: 100%; height: auto; }
.guide figure.pair { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.guide figure.pair svg { flex: 1 1 18rem; width: auto; max-width: 30rem; }
.guide figure.pair figcaption { flex: 1 1 100%; }
/* the year strip has a wide form and a narrow form, the same facts in each */
.guide .year-list { display: none; padding-left: 0; list-style: none; }
.guide .year-list li { padding: .25rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.year-list span { display: inline-block; width: 4.6rem; margin-right: .6rem; padding: 0 .5rem; border-radius: 999px; text-align: center; color: var(--ink); font-size: .85rem; }
.year-list .s-fall { background: var(--s-fall); } .year-list .s-winter { background: var(--s-winter); }
.year-list .s-spring { background: var(--s-spring); } .year-list .s-summer { background: var(--s-summer); }
@media (max-width: 720px) {
  .guide figure.year svg { display: none; }
  .guide .year-list { display: block; }
}
.guide figcaption { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); margin-top: 1.2rem; }
.guide figcaption b { color: var(--ink); font-weight: 600; }
.fig-line { stroke: var(--ink); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-soft { stroke: var(--ink-soft); fill: none; stroke-width: 1; stroke-dasharray: 3 4; }
.fig-text { font-family: var(--face-text); font-size: 13px; fill: var(--ink); }
.fig-small { font-family: var(--face-text); font-size: 11.5px; fill: var(--ink-soft); }
.fig-label { font-family: var(--face-text); font-size: 13px; font-style: italic; fill: var(--ink); }
.leaf-green { fill: var(--accent); stroke: var(--ink); stroke-width: .8; }
.leaf-dry { fill: var(--dry-leaf); stroke: var(--ink); stroke-width: .8; }
.soil { fill: var(--soil-fill); }
.straw { fill: var(--straw); opacity: .55; }
.clove { fill: var(--clove); stroke: var(--ink); stroke-width: 1; }
.s-fall { fill: var(--s-fall); } .s-winter { fill: var(--s-winter); } .s-spring { fill: var(--s-spring); } .s-summer { fill: var(--s-summer); }
.flake { stroke: var(--ink-soft); stroke-width: 1; fill: none; stroke-linecap: round; }
.tick { stroke: var(--ink); stroke-width: 1.4; }

/* ---- The "In Broadfork" line and the field note ---- */

.inapp { margin: -.3rem 0 1.3rem; color: var(--ink-soft); }
.inapp b { font-weight: 600; color: var(--ink); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-right: .4rem; }
.short, .mild { max-width: var(--measure); margin: -.3rem 0 1.3rem; padding-left: .9rem; border-left: 3px solid var(--s-winter); }
.mild { border-left-color: var(--s-summer); }
.short b, .mild b { font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-right: .4rem; }
.fieldnote { border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1rem; margin: 1.4rem 0 1.6rem; max-width: var(--measure); }
.fieldnote .who { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .2rem; }

.guide .glance { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); justify-content: start; gap: 1rem clamp(1.2rem, 5vw, 3rem); max-width: var(--measure); margin: 0 0 2.2rem; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.guide .glance div { min-width: 0; }
.guide .glance .n { display: block; font-size: clamp(1.15rem, 5vw, 1.7rem); line-height: 1.1; font-weight: 500; }
.guide .glance .l { display: block; font-size: clamp(.68rem, 2.6vw, .85rem); color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; margin-top: .2rem; }

/* The steps: numbered, the number set off in a soft green disc in the margin. style.css's .steps is the
   tour's Previous/Next foot (a rule above, a column, the label face), so a guide's steps reset it. */
.guide ol.steps { display: block; list-style: none; padding: 0; margin: 0 0 1.4rem; border-top: 0; max-width: var(--measure); counter-reset: step; font-family: var(--face-text); font-size: inherit; font-weight: normal; }
.guide ol.steps li { position: relative; padding-left: 3rem; margin-bottom: 1.1rem; counter-increment: step; }
.guide ol.steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--ink); font-size: 1rem; line-height: 2rem; text-align: center; font-weight: 600; }
.guide ol.steps li b { font-weight: 600; }

/* What goes wrong: the symptoms run longer than a crop's fact labels. Wide screens only: on a phone the
   list stacks label over text, where a basis would set the label's height instead. */
@media (min-width: 641px) {
  .guide:has(.glance) dl.facts dt { flex-basis: 10.5rem; }
}

/* The drawings: shade, sun and night bands, the bars, the scale's flat bands, the crops on it */
.fig-num { font-family: var(--face-text); font-size: 15px; fill: var(--ink); }
.shade { fill: var(--shade); opacity: .55; }
.sun { fill: var(--sun); opacity: .75; }
.night { fill: var(--night); opacity: .45; }
.bar-leaf { fill: var(--leaf); }
.t-frost { fill: var(--t-frost); } .t-cold { fill: var(--t-cold); } .t-cool { fill: var(--t-cool); } .t-mild { fill: var(--t-mild); } .t-warm { fill: var(--t-warm); }
.g-cabbage { fill: var(--cabbage); } .g-tomato { fill: var(--tomato); } .g-cucumber { fill: var(--cucumber); } .g-seedling { fill: var(--seedling); }
.stem { stroke: var(--ink); stroke-width: 1.2; fill: none; stroke-linecap: round; }

/* Each drawing has a narrow form, the same facts as a list, shown where the drawing would be too small */
.guide .sched-list, .guide .floor-list { display: none; max-width: var(--measure); padding-left: 0; list-style: none; }
.guide .sched-list li, .guide .floor-list li { padding: .25rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.sched-list span { display: inline-block; width: 6rem; color: var(--ink-soft); font-size: .85rem; }
.floor-list span { display: inline-block; width: 4rem; color: var(--ink-soft); font-size: .85rem; }
@media (max-width: 720px) {
  .guide figure.sched svg, .guide figure.floors svg { display: none; }
  .guide .sched-list, .guide .floor-list { display: block; }
}

/* ---- The guide's foot: the sourcing sentence, the zone line, the offices ---- */

.guide .foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); max-width: var(--measure); font-size: .95rem; color: var(--ink-soft); }
.guide .foot p { margin-bottom: .6rem; }

.guide .foot .docs { margin: 0 0 .8rem; }
.guide .foot .docs ul { list-style: none; margin: .35rem 0 0; padding: .55rem 1rem .6rem; background: var(--element); border-radius: 8px; font-size: .9rem; }
.guide .foot .docs li { margin: 0 0 .35rem; }
.guide .foot .docs li:last-child { margin-bottom: 0; }
.guide .foot .docs a { color: var(--link); }
.guide .foot .docs a::after { content: " \2197"; }

.guide .related { max-width: var(--measure); margin: 1.6rem 0 0; }
.guide .related-head { margin: 0 0 .35rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.guide .related ul { margin: 0; padding-left: 1.2rem; }
.guide .related li { margin-bottom: .3rem; }

@media (max-width: 640px) {
  dl.facts div { flex-direction: column; gap: .05rem; }
  dl.facts dt { flex: none; }
  .toc a { padding: .3rem 0; }
  .to-top a { padding: .45rem .95rem; }
}