/* =============================================================
   906eh — "UNBOXIFY" DESIGN LAYER
   Loaded after styles.css + store.css, before your Edit Mode
   changes (palette.css / edits-*.css), so everything here can be
   changed in Edit Mode.

   Ideas:
   • Content sits right on the section backgrounds instead of in
     cards. A card only stays where it helps (weather readings,
     product details, the checkout summary).
   • Sections meet with natural edges (rolling hills, a treeline,
     a slope) instead of straight lines. Edit Mode → any section /
     card / footer background → "Edge" picks the shape or turns it
     off; "Edge height" sizes it.
   • Cut-out pictures (transparent PNGs) float on the background.
   • A little asymmetry: staggered tiles, a picture breaking out of
     its section, a hang-tag shaped "Follow along".
   • Text on the page background flips dark/light to suit the
     background (js/main.js sets data-page-tone). Edit Mode → Page →
     "Text on page background" picks colors yourself.
   To undo the whole redesign, remove the unbox.css <link> lines.
   ============================================================= */

:root {
  --page-ink: var(--charcoal);
  --page-ink-soft: var(--ink-soft);
  --page-hand: var(--coyote);
  --edge-h: 46px;
  --flow: clamp(1.75rem, 3.6vw, 3rem);   /* space between sections — Edit Mode → Page → "Space between sections" */
  --shape-circle: circle(50% at 50% 50%);
  --shape-lean: polygon(2% 3%, 100% 0, 97% 100%, 0 96%);
  --shape-tag-big: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%);
  --edge-img-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V64C110 44 230 26 370 32C520 38 610 72 770 66C930 60 1010 20 1170 22C1300 24 1380 48 1440 56V100Z'/%3E%3C/svg%3E");
  --edge-img-hills-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 100)'%3E%3Cpath d='M0 100V64C110 44 230 26 370 32C520 38 610 72 770 66C930 60 1010 20 1170 22C1300 24 1380 48 1440 56V100Z'/%3E%3C/g%3E%3C/svg%3E");
  --edge-img-ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L0 70 L9 40 L18 72 L31 53 L44 73 L57 42 L70 71 L83 34 L96 71 L113 35 L130 69 L143 50 L156 76 L165 29 L174 71 L185 37 L196 74 L211 37 L226 77 L239 58 L252 78 L261 58 L270 78 L285 24 L300 78 L309 58 L318 72 L327 30 L336 78 L351 38 L366 75 L375 29 L384 77 L399 57 L414 74 L423 50 L432 73 L449 55 L466 69 L477 42 L488 74 L497 34 L506 71 L521 25 L536 70 L551 32 L566 72 L583 31 L600 71 L609 38 L618 67 L631 21 L644 63 L655 48 L666 65 L675 42 L684 68 L695 41 L706 67 L715 13 L724 61 L741 13 L758 64 L769 12 L780 63 L797 18 L814 60 L823 46 L832 63 L849 12 L866 63 L875 26 L884 63 L893 19 L902 64 L911 27 L920 64 L931 27 L942 67 L953 20 L964 62 L973 29 L982 69 L993 29 L1004 69 L1015 38 L1026 67 L1041 45 L1056 71 L1065 32 L1074 69 L1091 52 L1108 69 L1121 19 L1134 67 L1151 26 L1168 71 L1177 27 L1186 75 L1199 22 L1212 70 L1221 56 L1230 73 L1243 37 L1256 77 L1267 23 L1278 74 L1291 46 L1304 75 L1315 52 L1326 72 L1341 24 L1356 72 L1367 52 L1378 75 L1395 52 L1412 75 L1423 23 L1434 77 L1451 37 L1468 77 L1440 100Z'/%3E%3C/svg%3E");
  --edge-img-ridge-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 100)'%3E%3Cpath d='M0 100 L0 70 L9 40 L18 72 L31 53 L44 73 L57 42 L70 71 L83 34 L96 71 L113 35 L130 69 L143 50 L156 76 L165 29 L174 71 L185 37 L196 74 L211 37 L226 77 L239 58 L252 78 L261 58 L270 78 L285 24 L300 78 L309 58 L318 72 L327 30 L336 78 L351 38 L366 75 L375 29 L384 77 L399 57 L414 74 L423 50 L432 73 L449 55 L466 69 L477 42 L488 74 L497 34 L506 71 L521 25 L536 70 L551 32 L566 72 L583 31 L600 71 L609 38 L618 67 L631 21 L644 63 L655 48 L666 65 L675 42 L684 68 L695 41 L706 67 L715 13 L724 61 L741 13 L758 64 L769 12 L780 63 L797 18 L814 60 L823 46 L832 63 L849 12 L866 63 L875 26 L884 63 L893 19 L902 64 L911 27 L920 64 L931 27 L942 67 L953 20 L964 62 L973 29 L982 69 L993 29 L1004 69 L1015 38 L1026 67 L1041 45 L1056 71 L1065 32 L1074 69 L1091 52 L1108 69 L1121 19 L1134 67 L1151 26 L1168 71 L1177 27 L1186 75 L1199 22 L1212 70 L1221 56 L1230 73 L1243 37 L1256 77 L1267 23 L1278 74 L1291 46 L1304 75 L1315 52 L1326 72 L1341 24 L1356 72 L1367 52 L1378 75 L1395 52 L1412 75 L1423 23 L1434 77 L1451 37 L1468 77 L1440 100Z'/%3E%3C/g%3E%3C/svg%3E");
  --edge-img-slope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V78L1440 14V100Z'/%3E%3C/svg%3E");
  --edge-img-slope-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 100)'%3E%3Cpath d='M0 100V78L1440 14V100Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* =============================================================
   1. TEXT THAT FOLLOWS ITS BACKGROUND
   --ink = text color for whatever surface the text sits on.
   ============================================================= */
html[data-page-tone="dark"] {
  --page-ink: var(--cream);
  --page-ink-soft: var(--khaki-on-dark);
  --page-hand: #d9c79a;
}
main {
  --ink: var(--page-ink);
  --ink-soft-2: var(--page-ink-soft);
  --hand: var(--page-hand);
  color: var(--ink);
}
.band--khaki, .band--light, .spread, .paper--alt, .card.paper, .wx-panel, .wx-tile, .product__info, .cart-summary, .cart-page__list, .product-status, .cart-empty.paper {
  --ink: var(--charcoal); --ink-soft-2: var(--ink-soft); --hand: var(--coyote);
}
.band--olive, .band--ranger, .page-head, .paper--rust, .wx-top, .wx-fish {
  --ink: var(--cream); --ink-soft-2: var(--khaki-on-dark); --hand: var(--khaki-on-dark);
}
.paper--blaze { --ink: var(--charcoal); --ink-soft-2: var(--charcoal); --hand: var(--charcoal); }
/* re-apply the text color wherever the surface changes */
.band, .paper, .wx-panel, .wx-tile, .wx-top, .wx-fish, .page-head, .spread, .product__info, .cart-summary, .cart-page__list, .product-status { color: var(--ink); }
.title { color: var(--ink, var(--charcoal)); }
.meta, .small { color: var(--ink-soft-2, var(--ink-soft)); }
.scribble { color: var(--hand, var(--coyote)); }
.scribble--light, .site-footer .scribble { color: var(--khaki-on-dark); }
.spread .scribble { color: #6b5031; }
.latest__title, .feature__title, .card__title, .merch__body, .about__body, .latest__body { color: var(--ink); }

/* Open cards: same element, just no box. (Edit Mode → "Card background"
   gives any of them a color, picture or shape again.) */
.latest.paper, .about__body.paper, .feature.paper, .sheet.paper, .card.paper:not(.wx-tile),
.product-details__item.paper {
  --paper-color: transparent;
  --paper-border: transparent;
  --paper-shadow: transparent;
}
/* A light card's text colors follow the surface underneath once it's open */
.latest.paper, .about__body.paper, .feature.paper, .sheet.paper, .card.paper:not(.wx-tile) { --ink: inherit; --ink-soft-2: inherit; --hand: inherit; }
/* Form labels follow the surface too */
.field label { color: var(--ink-soft-2, var(--olive)); }
.band--olive .card.paper, .band--ranger .card.paper { --ink: var(--cream); --ink-soft-2: var(--khaki-on-dark); --hand: var(--khaki-on-dark); color: var(--ink); }
.band--khaki .card.paper, .band--light .card.paper { --ink: var(--charcoal); color: var(--ink); }

/* Filled pictures float: no placeholder color behind a cut-out PNG */
.slot:has(> img:not(.feed-player)) { background: transparent; }


/* =============================================================
   2. NATURAL EDGES BETWEEN SECTIONS
   Same declarations Edit Mode writes for its "Edge" setting.
   ============================================================= */
.page-head::before, .wx-top::before {
  -webkit-mask-image: var(--edge-img-ridge-b), linear-gradient(#000 0 0); mask-image: var(--edge-img-ridge-b), linear-gradient(#000 0 0);
  -webkit-mask-position: center bottom, center top; mask-position: center bottom, center top;
  -webkit-mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px); mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.page-head { border-bottom: 0; padding-top: calc(var(--flow) + 0.5rem); padding-bottom: calc(var(--flow) + var(--edge-h) * 0.6); }
.wx-top { --band-color: var(--ranger); --edge-h: 30px; border-bottom: 0; padding-bottom: calc(1.1rem + 24px); position: relative; isolation: isolate; background: none; }
.wx-top::before { content: ""; position: absolute; inset: 0; background: var(--band-color); z-index: -1; }

.section.band--olive::before {
  -webkit-mask-image: var(--edge-img-hills), var(--edge-img-hills-b), linear-gradient(#000 0 0); mask-image: var(--edge-img-hills), var(--edge-img-hills-b), linear-gradient(#000 0 0);
  -webkit-mask-position: center top, center bottom, center center; mask-position: center top, center bottom, center center;
  -webkit-mask-size: 100% var(--edge-h), 100% var(--edge-h), 100% calc(100% - 2 * var(--edge-h) + 2px); mask-size: 100% var(--edge-h), 100% var(--edge-h), 100% calc(100% - 2 * var(--edge-h) + 2px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.browse.band::before, .band--light::before {
  -webkit-mask-image: var(--edge-img-hills), linear-gradient(#000 0 0); mask-image: var(--edge-img-hills), linear-gradient(#000 0 0);
  -webkit-mask-position: center top, center bottom; mask-position: center top, center bottom;
  -webkit-mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px); mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.spread::before, .section.band--khaki::before {
  --edge-h: 40px;
  -webkit-mask-image: var(--edge-img-slope), linear-gradient(#000 0 0); mask-image: var(--edge-img-slope), linear-gradient(#000 0 0);
  -webkit-mask-position: center top, center bottom; mask-position: center top, center bottom;
  -webkit-mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px); mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.site-footer { border-top: 0; margin-top: -38px; padding-top: 34px; }   /* treeline overlaps the section above */
main:has(> :last-child.band), main:has(> .intro:last-child) { padding-bottom: 0; }
.site-footer::before {
  --edge-h: 38px;
  -webkit-mask-image: var(--edge-img-ridge), linear-gradient(#000 0 0); mask-image: var(--edge-img-ridge), linear-gradient(#000 0 0);
  -webkit-mask-position: center top, center bottom; mask-position: center top, center bottom;
  -webkit-mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px); mask-size: 100% var(--edge-h), 100% calc(100% - var(--edge-h) + 1px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
main { padding-bottom: calc(var(--flow) + 38px); }   /* room for the footer's treeline */
.section { margin-top: var(--flow); }
.section.band { margin-top: var(--flow); padding-top: calc(var(--flow) + var(--edge-h) * 0.6); padding-bottom: calc(var(--flow) + var(--edge-h) * 0.3); }
.section.band + .section.band { margin-top: 0; }
.intro { padding-top: var(--flow); }
.intro__inner { gap: var(--flow); }

/* Light paper-colored band (About strip on the home page) */
.band--light { --band-color: var(--khaki-light); color: var(--charcoal); }


/* =============================================================
   3. HOME
   ============================================================= */
/* Latest video: no card — big picture, words beside it */
.latest { padding: 0; gap: var(--space-xs); }
.latest .title { font-size: var(--title-big); }
.latest__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-l); align-items: end; }
.latest__thumb { margin: 0 18px 18px 0; }
.latest__thumb.offset::before { transform: translate(18px, 18px); }
.latest__body { padding-bottom: var(--space-m); border-left: 3px solid var(--blaze); padding-left: var(--space-m); }

/* Browse: pictures float on a light clearing, labels underneath, staggered */
.browse.band { padding: calc(var(--flow) + var(--edge-h) * 0.6) 0 var(--flow); }
.scraps { grid-template-columns: repeat(3, minmax(0, 260px)); gap: var(--space-l); align-items: start; }
.scrap { padding: 0; gap: 0.9rem; }
.scrap::before {                                 /* the clearing behind the picture */
  inset: 0 6% auto;
  aspect-ratio: 1;
  height: auto;
  border-radius: 0;
  clip-path: var(--shape-circle);
  background: var(--scrap-color, color-mix(in srgb, var(--cream) 88%, transparent));
  box-shadow: none;
}
.band--olive .scrap::before { box-shadow: none; }
.scrap::after { content: none; }
.scrap:hover::before { box-shadow: none; background: var(--scrap-color, var(--cream)); }
.scrap__img { padding: 10%; }
.scrap__img .slot, .scrap .slot { background: transparent; border-radius: 0; }
.scrap .ph { border-radius: 50%; }
.scrap__label { display: block; color: var(--ink); text-align: center; line-height: 1.15; padding: 0 0.25rem; }
.scrap__label::after { display: inline-grid; vertical-align: -0.35em; margin-left: 0.45rem; }
.scrap__label::after { background: var(--blaze); color: var(--charcoal); }
.scrap:hover .scrap__label { text-decoration: underline; text-decoration-color: var(--blaze); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (min-width: 901px) {
  .scraps > li:nth-child(2) { margin-top: var(--space-l); }      /* stagger */
  .scraps > li:nth-child(3) { margin-top: calc(var(--space-l) * 0.4); }
}

/* Merch + Follow along on the khaki band */
.spread { margin-top: -40px; padding-top: calc(var(--flow) + 40px); padding-bottom: calc(var(--flow) + var(--edge-h)); }   /* its slope tucks over the band above */
.spread__inner { align-items: center; }
.merch-show.offset::before {                     /* a sun / clearing behind the product */
  inset: 4% 4% 4% 4%;
  transform: none;
  border-radius: 0;
  clip-path: var(--shape-circle);
  background: var(--offset-color, color-mix(in srgb, var(--cream) 80%, transparent));
}
.merch-show .slot { background: transparent; }
.merch-show .slot > img { object-fit: contain; filter: drop-shadow(0 14px 14px rgba(35, 36, 32, 0.28)); }
.follow.paper {                                  /* a big hang tag instead of a box */
  --paper-edge: var(--shape-tag-big);
  padding: var(--space-l) var(--space-m) var(--space-l) calc(var(--space-m) + 30px);
  rotate: -2deg;
}
.follow.paper::after { clip-path: var(--shape-tag-big); }
.follow .title::before { content: none; }         /* no punched hole on the Follow tag */

/* About: a light strip; the photo breaks out of its top edge */
.about.band { margin-top: calc(var(--edge-h) * -1); padding-top: calc(var(--edge-h) + var(--flow)); padding-bottom: calc(var(--flow) + 38px); align-items: end; }
.about__photo.polaroid { background: transparent; box-shadow: none; padding: 0; }
.about__photo .slot { background: transparent; }
.about__photo figcaption { color: var(--hand); }
.about__body { padding: 0 0 var(--space-m); }
@media (min-width: 901px) {
  .about__photo { margin-top: calc(var(--flow) * -1.6 - var(--edge-h)); }
}


/* =============================================================
   4. SUB-PAGES
   ============================================================= */
.page-head__inner { position: relative; }
.page-head .title { font-size: clamp(2.6rem, 7vw, 5rem); }

/* Feature (Videos page "newest one"): open, picture leads */
.feature { padding: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
.feature > figure { margin: 0 18px 18px 0; }
.feature__body { border-left: 3px solid var(--blaze); padding-left: var(--space-m); padding-bottom: var(--space-s); }

/* Card grids (videos, about facts): open columns */
.cards { gap: var(--space-l) var(--space-m); }
.card.paper:not(.wx-tile) { padding: 0; }
.card.paper:not(.wx-tile) > :not(figure) { margin-left: 0; margin-right: 0; }
.card.paper .card__title { margin-top: 0.2rem; }
.card.paper .btn { margin-top: 0.4rem; }
@media (min-width: 901px) {
  .section.band .cards:not(#shop-cards) > .card:nth-child(3n + 2) { margin-top: var(--space-m); }   /* gentle stagger (not in the shop grid) */
}
/* Cards without pictures (About quick facts) get a short blaze bar instead of a box */
.card.paper:not(:has(figure)) { padding-top: 1rem; border-top: 4px solid var(--blaze); }

/* Text panels (About story, Contact form, Merch sizing): open */
.sheet.paper { padding: var(--space-m) 0; }
.split--photo .polaroid { background: transparent; box-shadow: none; padding: 0; }

/* "Follow along" / "Other ways" notes: hang-tag shape */
.note.paper--rust {
  --paper-edge: var(--shape-tag-big);
  padding: var(--space-l) var(--space-m) var(--space-l) calc(var(--space-m) + 30px);
}
.note.paper--rust::after { clip-path: var(--shape-tag-big); }

/* Section headings that sit on the page background */
.section__head .title, .section > .title { color: var(--ink); }

/* Merch page: shop controls (Axel's shop.js fills them) */
.shop-controls { display: flex; flex-direction: column; gap: 0.8rem; }
.shop-controls .btn-row { gap: 0.5rem; align-items: center; }
#shop-collection-nav .btn { flex: 0 0 auto; min-height: 40px; padding: 0 1rem; font-size: 0.95rem; }
#shop-collection-nav .btn::after { content: none; }
#shop-collection-nav .btn--outline { background: transparent; color: var(--ink); border-color: currentColor; }
#shop-collection-nav .btn--outline:hover { background: var(--blaze); border-color: var(--blaze); color: var(--charcoal); }
.shop-controls select,
.shop-controls input[type="search"] {
  min-height: 42px;
  padding: 0.45rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
}
.shop-controls input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.shop-controls label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--ink); }
.shop-controls input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blaze); }
#shop-cards .card .slot { border-radius: var(--radius-small); background: var(--khaki-light); }
#shop-cards .card .price { color: var(--ink); opacity: 0.9; }
.shop-empty { color: var(--ink); }

/* Product page + cart: open info column, simple dividers */
.product__info.paper { padding: var(--space-l); }   /* product choices stay on a card: easier to read over any background */
.product-details { gap: 0; }
.product-details__item.paper { border-top: 1px solid var(--line); }
.product-details__item.paper:last-of-type { border-bottom: 1px solid var(--line); }
.product-details__item > summary { padding-left: 0; padding-right: 0; }
.product-details__body { padding-left: 0; padding-right: 0; }
.product__main-slot { background: transparent; }
.product__main.offset::before { clip-path: var(--shape-circle); transform: none; inset: 3%; background: var(--offset-color, var(--khaki-light)); border-radius: 0; }


/* Weather: readings stay grouped, but lighter (frosted, no outlines) */
.wx-update { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); }
.wx-sources { align-self: flex-start; padding: 0.35rem 0.7rem; border-radius: var(--radius-small); background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--charcoal); }
@media (min-width: 641px) { .btn { white-space: nowrap; } }
.wx-panel.paper, .wx-tile.paper { --paper-color: color-mix(in srgb, var(--card) 90%, transparent); --paper-border: transparent; }
@supports (backdrop-filter: blur(4px)) {
  .wx-panel.paper::before, .wx-tile.paper::before { backdrop-filter: blur(6px); }
}
.wx-fish { background: color-mix(in srgb, var(--olive) 92%, transparent); }
.wx-tile.paper--blaze { --paper-color: var(--blaze); }


/* =============================================================
   5. SMALL SCREENS
   ============================================================= */
@media (max-width: 900px) {
  .latest__grid, .feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .latest__body, .feature__body { border-left: 0; padding-left: 0; border-top: 3px solid var(--blaze); padding-top: var(--space-s); }
  .scraps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
  .spread__inner { gap: var(--space-l); }
  .follow.paper { rotate: 0deg; }
  .about.band { padding-top: var(--space-l); }
  .about__photo { max-width: min(100%, 380px); }
}
@media (max-width: 640px) {
  :root { --edge-h: 30px; }
  .latest .title { font-size: var(--title-size); }
  .merch { grid-template-columns: minmax(0, 1fr); }
  .scrap__label { font-size: 0.95rem; }
  .follow.paper, .note.paper--rust { padding: var(--space-m) 1.25rem var(--space-m) calc(1.25rem + 26px); --shape-tag-big: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%); }
  .follow .title::before { left: -24px; width: 11px; height: 11px; }
  .page-head .title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .cards { gap: var(--space-l); }
  .shop-controls .btn-row > * { flex: 1 1 auto; }
  .shop-controls select { flex: 1 1 45%; min-width: 0; }
}
@media (max-width: 380px) {
  .scraps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .scrap__label { font-size: 0.85rem; letter-spacing: 0.01em; }
}


/* =============================================================
   6. HEADER BAND + NAV BAR BACKGROUNDS AS EDITABLE LAYERS
   Their backgrounds live on ::before, so Edit Mode can give them a
   color, opacity, photo, overlay or natural edge like any section.
   ============================================================= */
.hero { background: none; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-bg, var(--ranger)); z-index: -1; }
.site-nav { background: none; }
.site-nav::before { content: ""; position: absolute; inset: 0; background: var(--nav-bg); z-index: -1; pointer-events: none; }

/* The logo never changes the height of the nav bar: a bigger logo
   hangs below the bar instead of stretching it. Bar height has its
   own setting (Edit Mode → Navigation bar → "Bar height"). */
.site-nav__inner { height: var(--nav-height); min-height: 0; }
.site-nav__brand { align-self: stretch; height: var(--nav-height); padding-top: 0; padding-bottom: 0; align-items: safe center; z-index: 2; }
.site-nav__logo { flex: none; }

/* =============================================================
   7. ONE FAMILY OF PAGES
   Product and cart pages get the same heading band as the rest
   (slimmer). Their background follows the site-wide background
   (Edit Mode → Page background → "Use this background on every page").
   ============================================================= */
.page-head--slim { padding-top: calc(var(--flow) * 0.7); padding-bottom: calc(var(--flow) * 0.6 + var(--edge-h) * 0.6); }
.page-head--slim .page-head__inner { gap: 0.4rem; }
.page-head--slim .title { font-size: clamp(1.8rem, 4.5vw, 3rem); }
.page-head__label { margin: 0; }
.back-link--light { color: var(--cream); align-self: flex-start; }
.store .product, .store .cart-page { margin-top: var(--flow); }
.store .product-status { margin-top: var(--flow); }

/* =============================================================
   8. MERCH / SHOP PAGE — a real storefront
   The shop sits on its own light "store floor" band (rolling-hill
   top edge) so it reads clearly against any page background.
   Products: picture tile, blaze hang-tag price, name, quiet button.
   Edit Mode → "Product grid (shop)" for tag/tile colors and spacing;
   Shop section → "Section background" for the band itself.
   ============================================================= */
.shop-band { --edge-h: 56px; padding-top: calc(var(--flow) + var(--edge-h) * 0.8) !important; padding-bottom: calc(var(--flow) + var(--edge-h)) !important; }
.page-head + .shop-band { margin-top: calc(var(--edge-h) * -0.5); }
.shop-band__head { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; }
.shop-band__head .scribble { order: 2; transform: rotate(-3deg); }

/* Toolbar: categories on the left, sort / search on the right, between two rules */
.shop-band .shop-controls {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem 0;
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
}
.shop-band #shop-collection-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.shop-band #shop-collection-nav::-webkit-scrollbar { display: none; }
.shop-band #shop-collection-nav .btn { min-height: 38px; border-radius: var(--radius-small); }
.shop-band #shop-collection-nav .btn:not(.btn--outline) { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.shop-band #shop-collection-nav .btn--outline { color: var(--charcoal); border-color: transparent; background: transparent; }
.shop-band #shop-collection-nav .btn--outline:hover { border-color: var(--charcoal); background: transparent; color: var(--charcoal); }
.shop-band .shop-controls > .btn-row:last-child { flex: 1 1 420px; justify-content: flex-end; flex-wrap: nowrap; }
.shop-band .shop-controls label { white-space: nowrap; }
.shop-band .shop-controls select { flex: 0 1 auto; min-width: 0; }
.shop-band .shop-controls select, .shop-band .shop-controls input[type="search"] { background: #fff; }
.shop-band .shop-controls input[type="search"] { flex: 0 1 260px; padding-left: 2.1rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%235e5f57' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='%235e5f57' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0.65rem 50% / 16px no-repeat; }

/* Product grid */
#shop-cards {
  --price-tag: var(--blaze);
  --price-ink: var(--charcoal);
  --product-tile: var(--card);
  --product-ink: var(--charcoal);
  --shop-gap: var(--space-l);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--shop-gap) var(--space-m);
  margin-top: var(--space-xs);
}
#shop-cards .card.paper { position: relative; gap: 0.35rem; color: var(--product-ink); }
#shop-cards .card figure { margin: 0 0 0.6rem; }
#shop-cards .card .slot {
  border-radius: var(--radius);
  background: var(--product-tile);
  box-shadow: 0 1px 0 var(--line), 0 14px 28px -18px rgba(35, 36, 32, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#shop-cards .card .slot > img { object-fit: contain; padding: 6%; transition: transform 0.3s ease; }
#shop-cards .card:hover .slot { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 22px 30px -18px rgba(35, 36, 32, 0.6); }
#shop-cards .card:hover .slot > img { transform: scale(1.04); }
#shop-cards .card__title { font-size: 1.15rem; color: var(--product-ink); }
#shop-cards .card .price {                       /* hang-tag price over the picture */
  position: absolute;
  top: 14px;
  left: -6px;
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 1.3rem;
  background: var(--price-tag);
  color: var(--price-ink);
  font-size: 0.95rem;
  opacity: 1;
  clip-path: var(--shape-tag);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 4px 10px rgba(35, 36, 32, 0.2);
}
#shop-cards .card .price::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--product-tile);
}
#shop-cards .card > p:not(.price) { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
#shop-cards .card .btn {
  min-height: 40px;
  padding: 0 1rem;
  font-size: 0.95rem;
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
#shop-cards .card .btn:hover { background: var(--blaze); border-color: var(--blaze); }
/* Sold out: faded picture, a small stamp instead of the button */
#shop-cards .card:not(:has(.btn)) .slot > img { opacity: 0.55; filter: grayscale(0.7); }
#shop-cards .card:not(:has(.btn)) > p:last-child { align-self: flex-start; padding: 0.15rem 0.5rem; border: 1.5px solid currentColor; border-radius: var(--radius-small); color: var(--alert-text); }
.shop-band .shop-empty { grid-column: 1 / -1; padding: var(--space-l) 0; text-align: center; font-family: var(--font-hand); font-size: 1.6rem; color: var(--coyote); }

/* Sizing + shipping band below the shop */
.section.shop-band + .section.band.band--khaki { margin-top: calc(var(--edge-h) * -1); }

@media (max-width: 640px) {
  .shop-band { --edge-h: 34px; }
  .shop-band .shop-controls { flex-direction: column; align-items: stretch; }
  .shop-band .shop-controls > .btn-row:last-child { flex: none; justify-content: stretch; flex-wrap: wrap; }
  .shop-band .shop-controls input[type="search"] { flex: 1 1 100%; }
  #shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) 0.9rem; }
  #shop-cards .card__title { font-size: 1rem; }
  #shop-cards .card .price { font-size: 0.82rem; top: 10px; }
  #shop-cards .card .btn { align-self: stretch; }
}

/* Merch "store floor": slightly see-through and frosted, so the page background
   (its own or the site-wide one) reads through it instead of being hidden.
   Section background in the editor still overrides this completely. */
.section.shop-band::before {
  background: color-mix(in srgb, var(--band-color) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* =============================================================
   9. PORTRAIT (PHONE) VIDEOS — Home "Latest video" + Videos page "newest one"
   (+ Weather page "today's update")
   When the playing video is a reel (filmed vertically), the spot is laid out
   for it: the video column shrinks to the tall player, over a round olive
   "clearing" (the offset block, reshaped) instead of a wide landscape panel. The text sits beside it
   on desktop and below it on phones. Landscape videos keep the normal layout.
   Height is editable: select the video → "Portrait video height" (--reel-h),
   desktop and phones separately. The clearing stays editable as the
   "Offset block" decoration (color, shape, size, position).
   ============================================================= */
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) {
  --rpad: clamp(26px, 3.4vw, 50px);
  grid-template-columns: auto minmax(0, 1fr) !important;
  justify-content: center;
  align-items: center !important;
  column-gap: clamp(2rem, 5vw, 5rem);
}
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > figure {
  --rh: var(--reel-h, clamp(420px, 66vh, 580px));     /* on the figure, so the editor's height (set on it) counts */
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  justify-self: center;
  align-self: center !important;
  margin: 0 !important;
  padding: var(--rpad) calc(var(--rpad) * 1.2);
}
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > figure .slot.is-reel {
  height: var(--rh) !important;
  width: auto !important;
  max-width: calc(100vw - 2 * var(--rpad) - 40px);
  max-height: none;
  aspect-ratio: 9 / 16 !important;
  margin: 0;
  border-radius: var(--radius-small);
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(20, 22, 16, 0.4);
}
/* the clearing behind it: a round olive disc with a faint ring, sitting a little low */
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > figure.offset::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(var(--rh) * 0.92);
  aspect-ratio: 1;
  height: auto;
  translate: -44% -47%;
  transform: none;
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(10px, 1.4vw, 18px) color-mix(in srgb, var(--offset-color, var(--olive)) 30%, transparent);
}
/* "New video" tag hangs on the phone's top corner */
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > figure > .tag {
  top: calc(var(--rpad) - 14px);           /* on the video's top edge, clear of the player's own name bar */
  left: calc(var(--rpad) * 1.2 - 18px);
}
/* the words: a calm column beside the phone, with a little more presence */
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > :is(.latest__body, .feature__body, .wx-update__body) {
  align-self: center !important;
  max-width: 32rem;
  position: relative;
  z-index: 1;               /* above the clearing where it reaches past the phone */
}
:is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) :is(.latest__title, .feature__title) { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }

@media (max-width: 900px) {
  :is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) {
    --rpad: 22px;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: var(--space-m);
  }
  :is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > figure { --rh: var(--reel-h, min(60vh, calc(min(62vw, 290px) * 16 / 9))); }
  :is(.latest__grid, .feature, .wx-update):has(.slot.is-reel) > :is(.latest__body, .feature__body, .wx-update__body) { max-width: none; }
}
.wx-update:has(.slot.is-reel) .feature__title { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.wx-update:has(.slot.is-reel) > figure { --rh: var(--reel-h, clamp(380px, 58vh, 520px)); }
@media (max-width: 900px) { .wx-update:has(.slot.is-reel) > figure { --rh: var(--reel-h, min(56vh, calc(min(62vw, 280px) * 16 / 9))); } }

/* =============================================================
   10. NAVIGATION BAR — editable (Edit Layout → Navigation bar, shared by every page)
   Defaults keep the original look.
   ============================================================= */
.site-nav {
  --nav-link: var(--nav-text, var(--charcoal));
  --nav-hover: var(--nav-link);
  --nav-hover-bg: var(--khaki-light);
  --nav-accent: var(--blaze);
  --nav-toggle: var(--nav-link);
  --nav-menu-bg: var(--nav-bg);
}
.site-nav__menu ul { gap: var(--nav-gap, 0.25rem); }
.site-nav__menu a { color: var(--nav-link); font-size: var(--nav-link-size, 1.02rem); padding-left: var(--nav-link-pad, 0.75rem); padding-right: var(--nav-link-pad, 0.75rem); }
.site-nav__menu a:hover { color: var(--nav-hover); background: var(--nav-hover-bg); }
.site-nav__menu a::after { background: var(--nav-accent); }
.site-nav__toggle, .site-nav__cart { color: var(--nav-toggle); }
.site-nav__toggle:hover, .site-nav__cart:hover { background: var(--nav-hover-bg); }
@media (max-width: 960px) {
  .site-nav__menu { background: var(--nav-menu-bg); }
  .site-nav__menu a { font-size: var(--nav-link-size, 1.15rem); }
}

/* =============================================================
   11. INTERIOR PAGE HEADINGS — ONE STANDARD (the slim Weather heading)
   Videos, Weather, Merch, Contact, Product and Cart all use the slim
   heading Weather had: small handwritten tagline, compact title with the
   orange bar, extra line (intro / "Updated…" / back link) on the right,
   short treeline edge. Same height on every page.
   Size and position are fixed here (older per-page nudges in Edit Mode no
   longer change them); each page keeps its own words, colors and background.
   ============================================================= */
:root { --ph-title: clamp(1.8rem, 4vw, 2.6rem); --ph-tag: 1.2rem; --ph-h: 168px; }
.page-head, .page-head--slim, .wx-top {
  --edge-h: 30px;
  padding: 1.1rem var(--page-gutter) calc(1.1rem + 24px) !important;
  min-height: var(--ph-h) !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 2;                 /* always drawn over the section below, even if that one is pulled up */
}
.page-head[data-em-id]::before, .wx-top[data-em-id]::before {
  inset: 0 !important; width: auto !important; height: auto !important; translate: none !important; rotate: none !important; scale: none !important;
}
.page-head > .page-head__inner, .wx-top > .wx-top__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-auto-flow: row dense;
  column-gap: 1.5rem;
  row-gap: 0.15rem;
  align-items: end;
}
.page-head__inner > *, .wx-top__inner > * { grid-column: 1; margin: 0; }
/* the extra line sits on the right */
.page-head__inner > p:not(.scribble):not(.title), .page-head__inner > .back-link, .wx-top__inner > .wx-updated {
  grid-column: 2; grid-row: 1 / span 3; justify-self: end; align-self: end; text-align: right; max-width: 42ch;
}
.page-head__inner > .back-link { align-self: start; }
.wx-top__title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
:is(.page-head, .wx-top) .scribble { font-size: var(--ph-tag) !important; }
:is(.page-head, .wx-top) .title { font-size: var(--ph-title) !important; line-height: 1; margin: 0; }
:is(.page-head, .wx-top) [data-em-id] { translate: none !important; rotate: none !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.wx-top__h1.title span { font-size: 0.9rem; vertical-align: middle; }
/* the section right under a heading starts at the heading's edge (older Edit Mode pulls that slid it
   up under the taller heading would now hide it) */
:is(.page-head, .wx-top) + .section[data-em-id] { margin-top: calc(var(--edge-h) * -0.5) !important; }
@media (max-width: 640px) {
  :root { --ph-title: clamp(1.6rem, 8vw, 2.1rem); --ph-h: 190px; }
  .page-head > .page-head__inner, .wx-top > .wx-top__inner { grid-template-columns: minmax(0, 1fr); }
  .page-head__inner > p:not(.scribble):not(.title), .page-head__inner > .back-link, .wx-top__inner > .wx-updated {
    grid-column: 1; grid-row: auto; justify-self: start; text-align: left;
  }
  .page-head__inner > .back-link { order: -1; }
  .wx-top__h1.title span { display: block; margin: 0.3rem 0 0; }
}

/* Weather "today's update": open, like the video spots on Home and Videos
   (no beige panel). Card background in Edit Mode still gives it one. */
.wx-panel.wx-update.paper {
  --paper-color: transparent; --paper-border: transparent; --paper-shadow: transparent;
  --ink: inherit; --ink-soft-2: inherit; --hand: inherit;
  color: var(--ink);
}
.wx-panel.wx-update.paper::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.wx-update > figure.offset { margin: 0 18px 18px 0; }

/* =============================================================
   12. TEXT BACKGROUNDS (Edit Mode → a text area → "Text background")
   Invisible until a color or photo is chosen. Then it's a soft patch a
   little larger than the text, so the page keeps its open look.
   ============================================================= */
[data-em-textbox] { position: relative; isolation: isolate; }
[data-em-textbox="before"]::before, [data-em-textbox="after"]::after {
  content: "";
  position: absolute;
  inset: calc(var(--textbg-pad, 14px) * -1);
  z-index: -1;
  pointer-events: none;
  background: transparent;
  border-radius: var(--radius-small, 8px);
}

/* Ordinary page text never shows a blinking typing cursor (also hides the
   cursor of the browser's "caret browsing" mode, F7). Form fields and text
   being edited in Edit Mode keep theirs. */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"] { caret-color: auto; }

/* =============================================================
   13. NAV BAR NOTE ("under construction" and the like)
   A free text spot in the shared nav bar: centered just under the bar to
   start; in Edit Layout drag it anywhere, reword it, restyle it or hide it.
   ============================================================= */
.site-nav__note {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  z-index: 3;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--blaze);
  color: var(--charcoal);
  box-shadow: 0 4px 12px rgba(20, 22, 16, 0.22);
  text-align: center;
}
.site-nav__note-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
}

/* ===== 14. Weather page without the video sections (2026-11-04) =====
   The update video and Recent posts were taken off the page; this keeps the
   sources line clear of the footer's jagged top edge. */
.wx-dash { padding-bottom: calc(var(--wx-gap) + 56px); }
@media (max-width: 640px) { .wx-dash { padding-bottom: calc(var(--wx-gap) + 44px); } }

/* ===== 15. Video shapes (2026-11-04) =====
   js/video-shape.js measures each video and tags its .slot:
   .is-reel = portrait (phone) video, .is-wide = landscape video.
   Feature spots (Home "Latest video", Videos "newest one"): portrait gets the tall
   phone layout from section 9 straight away, not only once it's playing;
   landscape keeps the wide layout with the same lifted look.
   Cards (All videos): every card stays the same wide shape so the grid lines up;
   a portrait video shows whole, centred over a soft blurred copy of itself. */
.slot.is-reel::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: 0;
  background: #23251e var(--shape-bg, none) center / cover no-repeat;
  filter: blur(22px) brightness(0.55) saturate(1.15);
}
.slot.is-reel > img, .slot.is-reel > video { z-index: 1; object-fit: contain; }
.is-video .slot.is-reel::after { z-index: 2; }
/* in a feature spot the tall frame matches the video, so it fills it exactly */
:is(.latest__grid, .feature, .wx-update) > figure .slot.is-reel > :is(img, video) { object-fit: cover; }
/* landscape: the whole frame shows while playing, and feature spots get the lifted look */
.slot.is-wide > video { object-fit: contain; background: #000; }
:is(.latest__grid, .feature) > figure .slot.is-wide { box-shadow: 0 18px 38px rgba(20, 22, 16, 0.4); }