/* ── Outside 365 design system ───────────────────────────────────────────────
   Concatenated from the design-system source. Do not edit here; edit the
   source files and rebuild. tokens/fonts.css is deliberately excluded —
   theme.json self-hosts the fonts and no Google CDN request may remain.
   ─────────────────────────────────────────────────────────────────────── */

/* ===== tokens/colors.css ===== */
/* ── Colour ──────────────────────────────────────────────────────────────────
   Woodsy / alpine. Three families on a shared OKLCH lightness scale:
     spruce  — deep conifer green, the primary voice (chrome, links, rules)
     lichen  — dry sage-yellow-green, the second voice (tags, guides, quiet fills)
     ember   — damp bark / low sun, used sparingly and only for calls to action
   plus a granite neutral ramp that is warm-grey, never blue-grey.
   Ratios in the comments are measured against the two shipping grounds:
   --bone #F4F2ED and --understory #16201A.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Grounds */
  --bone:              #F4F2ED;  /* the long-form reading ground */
  --bone-raised:       #E8E5DD;  /* cards, forms, pull-quotes */
  --understory:        #16201A;  /* chrome, guide heroes, footer */
  --understory-raised: #1F2B23;  /* panels on the dark ground */

  /* Granite — warm neutral */
  --granite-100: #F4F2ED;
  --granite-200: #E8E5DD;
  --granite-300: #D5D1C6;
  --granite-400: #B3AEA1;
  --granite-500: #8A857A;
  --granite-600: #636057;
  --granite-700: #47453E;
  --granite-800: #2E2D28;
  --granite-900: #1A1A16;

  /* Spruce — primary */
  --spruce-100: #E4EDE5;
  --spruce-200: #C7DBCA;
  --spruce-300: #9FC0A6;  /* on understory 8.4:1 ✔ */
  --spruce-400: #6E9E7C;  /* on understory 5.5:1 ✔ AA — the accent on dark */
  --spruce-500: #4A7C5B;  /* on bone 4.3:1 △ 24px+ / UI only */
  --spruce-600: #386047;  /* on bone 6.4:1 ✔ AA — the accent on light */
  --spruce-700: #2A4936;  /* on bone 8.9:1 ✔ AAA */
  --spruce-800: #1D3325;
  --spruce-900: #142419;

  /* Lichen — secondary */
  --lichen-100: #EFF0DF;
  --lichen-200: #DDE0C0;
  --lichen-300: #C4C999;  /* on understory 9.7:1 ✔ */
  --lichen-400: #A6AD74;
  --lichen-500: #878E58;
  --lichen-600: #6B7143;  /* on bone 4.7:1 ✔ AA (only just — prefer 700 for body) */
  --lichen-700: #525733;  /* on bone 6.8:1 ✔ AA */
  --lichen-800: #3A3D23;
  --lichen-900: #262817;

  /* Ember — calls to action only */
  --ember-100: #F8E7DC;
  --ember-200: #EFCBB4;
  --ember-300: #DDA684;
  --ember-400: #C57F55;
  --ember-500: #AC6740;  /* on understory 5.0:1 ✔ */
  --ember-600: #9A5430;  /* on bone 5.1:1 ✔ AA */
  --ember-700: #7A4124;
  --ember-800: #5A2F1A;
  --ember-900: #3A1E11;

  /* ── Semantic roles (light scope) ─────────────────────────────────────── */
  --surface-page:       var(--bone);
  --surface-raised:     var(--bone-raised);
  --text-primary:       #1E211C;             /* on bone 14.6:1 ✔ AAA */
  --text-secondary:     var(--granite-600);  /* on bone  6.0:1 ✔ AA  */
  --text-quiet:         var(--granite-500);  /* on bone  3.5:1 △ large/UI only */
  --accent:             var(--spruce-600);
  --accent-text:        var(--spruce-600);   /* links and gold-equivalent body text */
  --accent-text-strong: var(--spruce-700);
  --accent-2:           var(--lichen-700);
  --accent-cta:         var(--ember-600);
  --border-hairline:    var(--granite-300);
  --border-strong:      #1E211C;

  /* Dark scope — same roles, flipped */
  --i-surface-page:    var(--understory);
  --i-surface-raised:  var(--understory-raised);
  --i-text-primary:    #EDEFE7;              /* on understory 14.4:1 ✔ AAA */
  --i-text-secondary:  #9AA294;              /* on understory  6.4:1 ✔ AA  */
  --i-accent:          var(--spruce-400);    /* on understory  5.5:1 ✔ AA  */
  --i-border-hairline: #2E3A31;

  --focus-ring: var(--spruce-400);
  --selection:  rgba(110,158,124,0.32);
}

/* Region inversion. In WordPress this is the "Understory" section style,
   applied to a Group block — same tokens, no extra CSS. */
.on-dark {
  --surface-page:       var(--i-surface-page);
  --surface-raised:     var(--i-surface-raised);
  --text-primary:       var(--i-text-primary);
  --text-secondary:     var(--i-text-secondary);
  --text-quiet:         #7C8479;             /* on understory 3.9:1 △ large/UI only */
  --accent:             var(--i-accent);
  --accent-text:        var(--i-accent);
  --accent-text-strong: var(--spruce-300);
  --accent-2:           var(--lichen-300);
  --accent-cta:         var(--ember-400);
  --border-hairline:    var(--i-border-hairline);
  --border-strong:      var(--i-text-primary);
  background: var(--surface-page);
  color: var(--text-primary);
}

/* ===== tokens/typography.css ===== */
/* ── Type ────────────────────────────────────────────────────────────────────
   One family: Figtree, 300-900 variable. Headlines are Figtree 800 with tight
   tracking; body is Figtree 400. JetBrains Mono carries metadata only.
   Every size below maps 1:1 to a WordPress font-size preset (slug in comment).
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --font-body:    "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-display: 800;

  /* slug: x-small  — timestamps, image counts, footnotes */
  --text-x-small: 0.8125rem;
  /* slug: small    — captions, tags, nav */
  --text-small:   0.9375rem;
  /* slug: medium   — LONG-FORM BODY. 17px mobile → 19px desktop */
  --text-medium:  clamp(1.0625rem, 0.985rem + 0.39vw, 1.1875rem);
  /* slug: large    — lede paragraph, h3, card titles */
  --text-large:   clamp(1.3125rem, 1.22rem + 0.47vw, 1.5rem);
  /* slug: x-large  — h2 in flow, pull-quote */
  --text-x-large: clamp(1.625rem, 1.44rem + 0.92vw, 2.125rem);
  /* slug: xx-large — post title, section headers */
  --text-xx-large:clamp(2.125rem, 1.73rem + 1.98vw, 3.25rem);
  /* slug: display  — guide hero location name */
  --text-display: clamp(2.75rem, 1.60rem + 5.75vw, 6rem);

  --leading-tight:  1.06;
  --leading-snug:   1.22;
  --leading-body:   1.65;
  --leading-loose:  1.75;

  --tracking-display: -0.03em;
  --tracking-tight:  -0.015em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;

  /* Reading measure — 68ch lands at 65-75 characters in Figtree at 19px */
  --measure: 68ch;
  --measure-narrow: 54ch;
}

/* ===== tokens/spacing.css ===== */
/* ── Spacing ─────────────────────────────────────────────────────────────────
   An 8px-rooted scale in rem. Slugs map to WordPress spacingSizes presets
   (WP wants numeric slugs 10..80; the names below are the human labels).
   --flow-* are the vertical-rhythm values the long-form layer uses.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --space-3xs: 0.25rem;  /* WP 10 */
  --space-2xs: 0.5rem;   /* WP 20 */
  --space-xs:  0.75rem;  /* WP 30 */
  --space-sm:  1.25rem;  /* WP 40 */
  --space-md:  2rem;     /* WP 50 */
  --space-lg:  3rem;     /* WP 60 */
  --space-xl:  4.5rem;   /* WP 70 */
  --space-2xl: 7rem;     /* WP 80 */

  /* Long-form vertical rhythm, expressed against the body line-box */
  --flow-paragraph: 1.15em;  /* p → p */
  --flow-h2:        2.6em;   /* space above an h2 in flow */
  --flow-h3:        1.9em;   /* space above an h3 in flow */
  --flow-heading-after: 0.55em;
  --flow-figure:    clamp(2rem, 4vw, 3.25rem); /* around an inline image */
  --flow-block:     clamp(2rem, 4vw, 3rem);    /* around quotes, CTAs, rules */

  /* Sticky chrome — the header height both the header contents and every
     sticky/anchor offset are computed from */
  --header-h: 4.1rem;

  /* Page gutters and container widths */
  --gutter:        clamp(1.25rem, 5vw, 2.5rem);
  --content-width: 42rem;   /* WP contentSize — the long-form column */
  --wide-width:    78rem;   /* WP wideSize — grids, galleries, full-bleed */
}

/* ===== tokens/shape.css ===== */
/* ── Shape & surface ─────────────────────────────────────────────────────────
   Inherited from Organic, dialled down. Organic's rule is "over-round, never
   sharp"; Outside 365 is "earned, not glossy". The reconciliation: keep the
   rounding on interface chrome (Organic's signal), drop it to zero on
   photography and full-bleed heroes, and drop shadows entirely — separation
   comes from hairlines and ground colour, not elevation.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --radius-sm:    6px;    /* inputs, small chips */
  --radius-md:   10px;    /* cards, panels, pull-quote */
  --radius-lg:   16px;    /* large containers — Organic's container value */
  --radius-pill: 999px;   /* buttons and tag chips — Organic's hallmark */
  --radius-photo: 4px;    /* inline photography */
  --radius-photo-bleed: 0;/* full-bleed and hero photography: no corners */

  --hairline: 1px solid var(--border-hairline);
  --rule-heavy: 2px solid var(--border-strong);
  --rule-accent: 3px solid var(--accent);

  /* The one shadow in the system: a photo scrim so type survives any exposure. */
  --scrim: linear-gradient(to top, rgba(22,32,26,0.92) 0%, rgba(22,32,26,0.60) 40%, rgba(22,32,26,0) 80%);
  --scrim-flat: rgba(22,32,26,0.58);

  --duration: 140ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ===== base/reset.css ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-medium);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: text-decoration-color var(--duration) var(--easing), color var(--duration) var(--easing); }
a:hover { color: var(--accent-text-strong); text-decoration-color: currentColor; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--selection); }
hr { border: 0; height: 1px; background: var(--border-hairline); margin: var(--flow-block) 0; }

/* Metadata voice */
.o365-meta {
  font-family: var(--font-mono);
  font-size: var(--text-x-small);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  line-height: 1.4;
}
.o365-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-x-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-2);
}

/* ===== base/prose.css ===== */
/* ── Long-form body ──────────────────────────────────────────────────────────
   Wrap post content in .o365-prose. In WordPress this is the post-content
   block's layout: contentSize 42rem, wideSize 78rem — the same numbers.
   Rhythm is set in em so it scales with the fluid body size.
   ─────────────────────────────────────────────────────────────────────────── */
.o365-prose {
  font-size: var(--text-medium);
  line-height: var(--leading-body);
  max-width: var(--measure);
}
.o365-prose > * + * { margin-top: var(--flow-paragraph); }
.o365-prose > h2 {
  font-size: var(--text-x-large);
  margin-top: var(--flow-h2);
  margin-bottom: var(--flow-heading-after);
  padding-top: 0.55em;
  border-top: var(--hairline);
}
.o365-prose > h3 {
  font-size: var(--text-large);
  font-weight: var(--weight-bold);
  margin-top: var(--flow-h3);
  margin-bottom: var(--flow-heading-after);
}
.o365-prose > h2 + *, .o365-prose > h3 + * { margin-top: 0; }
.o365-prose > ul, .o365-prose > ol { padding-left: 1.15em; }
.o365-prose li + li { margin-top: 0.4em; }
.o365-prose > .o365-lede {
  font-size: var(--text-large);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.o365-prose > figure,
.o365-prose > .alignwide,
.o365-prose > .alignfull { margin-top: var(--flow-figure); margin-bottom: var(--flow-figure); }
.o365-prose > blockquote,
.o365-prose > .o365-pullquote { margin-top: var(--flow-block); margin-bottom: var(--flow-block); }
.o365-prose strong { font-weight: var(--weight-bold); }
.o365-prose > .alignwide { max-width: var(--wide-width); width: 100vw; max-width: min(var(--wide-width), 100%); }

/* ===== components/primitives/primitives.css ===== */
/* ── Primitives ──────────────────────────────────────────────────────────── */
.o365-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold);
  letter-spacing: 0.01em; line-height: 1;
  padding: 0.85rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--bone); text-decoration: none; cursor: pointer;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.o365-btn:hover { background: var(--accent-text-strong); color: var(--bone); }
.on-dark .o365-btn { color: var(--understory); }
.o365-btn--cta { background: var(--accent-cta); color: var(--bone); }
.on-dark .o365-btn--cta { color: var(--understory); }
.o365-btn--cta:hover { background: var(--ember-700); color: var(--bone); }
.on-dark .o365-btn--cta:hover { background: var(--ember-300); color: var(--understory); }
.o365-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-hairline); }
.o365-btn--ghost:hover { background: var(--surface-raised); color: var(--text-primary); }
.o365-btn--sm { font-size: var(--text-x-small); padding: 0.6rem 1.1rem; }

/* Tag chip — the three tag archives (Crucial Tactics, Total Immersion, Vanlife) */
.o365-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); line-height: 1;
  padding: 0.42em 0.85em 0.38em; border-radius: var(--radius-pill); text-decoration: none;
  background: var(--lichen-200); color: var(--lichen-900);
  transition: background var(--duration) var(--easing);
}
.o365-tag:hover { background: var(--lichen-300); color: var(--lichen-900); }
.on-dark .o365-tag { background: var(--understory-raised); color: var(--lichen-300); }
.on-dark .o365-tag:hover { background: var(--spruce-800); color: var(--lichen-200); }
.o365-tag--plain { background: transparent; padding-left: 0; padding-right: 0; color: var(--accent-2); }

.o365-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }

/* Input — the subscribe field is the only form control on the site */
.o365-input {
  font-family: var(--font-body); font-size: var(--text-small); line-height: 1;
  padding: 0.85rem 1.1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline); background: var(--surface-page); color: var(--text-primary);
  min-width: 0; width: 100%;
}
.o365-input::placeholder { color: var(--text-quiet); }
.o365-input:focus-visible { border-color: var(--accent); }
.on-dark .o365-input { background: var(--understory); border-color: var(--i-border-hairline); }

/* ===== components/feed/postcard.css ===== */
/* ── Post card ───────────────────────────────────────────────────────────────
   Feed unit. 128 of 134 posts carry a featured image, so the image IS the
   design; .o365-card__plate is the specified fallback for the other six.
   ─────────────────────────────────────────────────────────────────────────── */
.o365-card { display: flex; flex-direction: column; gap: var(--space-xs); text-decoration: none; color: inherit; }
.o365-card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-photo); aspect-ratio: 3 / 2; background: var(--surface-raised);
}
.o365-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 380ms var(--easing);
}
.o365-card:hover .o365-card__media img { transform: scale(1.028); }
.o365-card__tags { position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); }
.o365-card__tags .o365-tag { background: rgba(22,32,26,0.82); color: var(--lichen-300); backdrop-filter: blur(3px); }

/* Fallback plate — no featured image. Not a stock photo, not the logo:
   the tag name set as a typographic field over hairline diagonals. */
.o365-card__plate {
  aspect-ratio: 3 / 2; border-radius: var(--radius-photo); overflow: hidden; position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(196,201,153,0.10) 9px 10px),
    var(--spruce-800);
  display: flex; align-items: flex-end; padding: var(--space-sm);
}
.o365-card__plate span {
  font-family: var(--font-mono); font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1;
  color: var(--lichen-300); text-wrap: balance;
}

.o365-card__body { display: flex; flex-direction: column; gap: var(--space-3xs); }
.o365-card__title {
  font-size: var(--text-large); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight); line-height: 1.14; text-wrap: balance;
  color: var(--text-primary);
  transition: color var(--duration) var(--easing);
}
.o365-card:hover .o365-card__title { color: var(--accent-text-strong); }
.on-dark .o365-card:hover .o365-card__title { color: var(--spruce-300); }
.o365-card__excerpt { font-size: var(--text-small); color: var(--text-secondary); line-height: 1.55; margin-top: var(--space-3xs); }
.o365-card__meta { font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary); margin-top: var(--space-3xs); }

/* Feature — first card in a feed, spans the grid and sets the image beside the text */
.o365-card--feature { gap: var(--space-sm); }
@media (min-width: 48rem) {
  .o365-card--feature { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: var(--space-md); }
  .o365-card--feature .o365-card__media { aspect-ratio: 16 / 10; }
  .o365-card--feature .o365-card__body { gap: var(--space-2xs); }
  .o365-card--feature .o365-card__title { font-size: var(--text-x-large); }
  .o365-card--feature .o365-card__excerpt { font-size: var(--text-medium); line-height: var(--leading-body); }
}
@media (min-width: 64rem) {
  .o365-card--feature .o365-card__title { font-size: var(--text-xx-large); }
}

/* Compact — related posts, sidebars, archive tails */
.o365-card--compact { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-xs); align-items: start; }
.o365-card--compact .o365-card__media { aspect-ratio: 1 / 1; }
.o365-card--compact .o365-card__title { font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1.3; }

.o365-feed { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .o365-feed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .o365-feed { grid-template-columns: repeat(3, 1fr); } }
.o365-feed > .o365-card--feature { grid-column: 1 / -1; }

/* ===== components/article/article.css ===== */
/* ── Post hero + long-form blocks ────────────────────────────────────────── */
.o365-posthero { display: flex; flex-direction: column; gap: var(--space-md); }
.o365-posthero__head { display: flex; flex-direction: column; gap: var(--space-xs); max-width: var(--measure); }
.o365-posthero__head > .o365-tag { align-self: flex-start; }
.o365-posthero__title {
  font-size: var(--text-xx-large); font-weight: var(--weight-display);
  letter-spacing: -0.025em; line-height: var(--leading-tight); text-wrap: balance;
}
.o365-posthero__meta {
  font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary);
  display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: center;
  padding-top: var(--space-xs); border-top: var(--hairline);
}
.o365-posthero__figure { margin: 0; }
.o365-posthero__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-photo-bleed); }
.o365-posthero__figure figcaption { font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary); margin-top: var(--space-2xs); }

/* Immersive variant — title over the featured image, for the punchy titles */
.o365-posthero--immersive { position: relative; min-height: min(72vh, 40rem); justify-content: flex-end; border-radius: var(--radius-photo-bleed); overflow: hidden; padding: var(--space-lg) var(--gutter); }
.o365-posthero--immersive > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o365-posthero--immersive::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.o365-posthero--immersive .o365-posthero__head { position: relative; z-index: 1; color: var(--i-text-primary); }
.o365-posthero--immersive .o365-posthero__meta { color: var(--i-text-secondary); border-color: rgba(237,239,231,0.28); }

/* No featured image — the 6 posts that have none get the plate treatment */
.o365-posthero--plate .o365-posthero__figure {
  aspect-ratio: 21 / 9; border-radius: var(--radius-photo-bleed);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(196,201,153,0.10) 11px 12px), var(--spruce-800);
}

/* Pull-quote — the voice is loud, so this is loud: no quote marks, rules only */
.o365-pullquote {
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  padding: var(--space-md) 0; max-width: var(--measure);
}
.o365-pullquote p {
  font-size: var(--text-x-large); font-weight: var(--weight-display);
  letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; margin: 0;
}
.o365-pullquote cite {
  display: block; margin-top: var(--space-xs); font-style: normal;
  font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary);
}
/* Blockquote — quieter than the pull-quote: a rule and a weight shift */
.o365-prose blockquote {
  border-left: 3px solid var(--accent); padding-left: var(--space-sm); margin-left: 0;
  font-size: var(--text-large); font-weight: var(--weight-medium); line-height: 1.35;
}
.o365-prose blockquote cite { display:block; margin-top: var(--space-2xs); font-style: normal; font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary); font-weight: 400; }

/* Inline figure */
.o365-figure img { width: 100%; border-radius: var(--radius-photo); }
.o365-figure figcaption {
  font-family: var(--font-mono); font-size: var(--text-x-small); line-height: 1.45;
  color: var(--text-secondary); margin-top: var(--space-2xs); max-width: var(--measure-narrow);
}
.o365-figure--wide { max-width: var(--wide-width); }
.o365-figure--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
.o365-figure--pair figcaption { grid-column: 1 / -1; }

/* ===== components/guide/guide.css ===== */
/* ── Guide pages ─────────────────────────────────────────────────────────────
   Guides are location directories, not articles: a scannable index of titled
   entries, each with its own photo set. Everything here is CSS-only —
   sticky positioning, scroll-snap and <details> do the work a lightbox or a
   masonry script would otherwise do.
   ─────────────────────────────────────────────────────────────────────────── */
.o365-guidehero { position: relative; min-height: min(78vh, 44rem); display: flex; align-items: flex-end; overflow: hidden; }
.o365-guidehero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o365-guidehero::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.o365-guidehero__inner { align-items: flex-start; position: relative; z-index: 1; width: 100%; max-width: var(--wide-width); margin-inline: auto; padding: var(--space-lg) var(--gutter); color: var(--i-text-primary); display: flex; flex-direction: column; gap: var(--space-xs); }
.o365-guidehero__name { font-size: var(--text-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 0.94; }
.o365-guidehero__intro { font-size: var(--text-large); line-height: var(--leading-snug); max-width: 34ch; color: var(--i-text-primary); }
.o365-guidehero__stats { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--i-text-secondary); padding-top: var(--space-xs); border-top: 1px solid rgba(237,239,231,0.28); }

/* Index — the page's spine. Mobile: a sticky snapping chip rail.
   Desktop: a sticky column beside the entries. No script either way. */
.o365-guideindex { position: sticky; top: var(--header-h); z-index: 20; background: var(--surface-page); border-bottom: var(--hairline); }
.o365-guideindex__rail { display: flex; gap: var(--space-2xs); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--space-xs) var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.o365-guideindex__rail::-webkit-scrollbar { display: none; }
.o365-guideindex__rail a { scroll-snap-align: start; flex: none; }
.o365-guideindex__rail a b { font-weight: 400; margin-left: 0.55em; opacity: 0.6; }
.o365-guide { max-width: var(--wide-width); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 64rem) {
  .o365-guide--split { display: grid; grid-template-columns: 15rem 1fr; gap: var(--space-xl); align-items: start; }
  .o365-guideindex { position: sticky; top: calc(var(--header-h) + var(--space-md)); border: 0; background: transparent; align-self: start; }
  .o365-guideindex__rail { flex-direction: column; overflow: visible; padding: 0; gap: 0; }
  .o365-guideindex__rail a {
    display: flex; justify-content: space-between; gap: var(--space-xs);
    padding: 0.55rem 0; border-bottom: var(--hairline); border-radius: 0;
    background: transparent; color: var(--text-secondary);
    font-family: var(--font-mono); font-size: var(--text-x-small);
    text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  }
  .o365-guideindex__rail a:hover { color: var(--accent-text); }
  .o365-guideindex__rail a b { color: var(--text-quiet); font-weight: 400; }
}
.o365-guideindex__label { display: none; }
@media (min-width: 64rem) { .o365-guideindex__label { display: block; font-family: var(--font-mono); font-size: var(--text-x-small); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-2); margin-bottom: var(--space-xs); } }

/* Entry — one trail, town or spot */
.o365-entry { scroll-margin-top: calc(var(--header-h) + 3.5rem); padding-top: var(--space-lg); }
@media (min-width: 64rem) { .o365-entry { scroll-margin-top: calc(var(--header-h) + 1.5rem); } }
.o365-entry + .o365-entry { border-top: var(--hairline); margin-top: var(--space-lg); }
.o365-entry__head { display: flex; flex-direction: column; gap: var(--space-2xs); max-width: var(--measure); margin-bottom: var(--space-sm); }
.o365-entry__title { font-size: var(--text-x-large); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); }
.o365-entry__locator { font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 0.35em 1.1em; }
.o365-entry__body { font-size: var(--text-medium); line-height: var(--leading-body); max-width: var(--measure); }
.o365-entry__body p + p { margin-top: var(--flow-paragraph); }

/* Photo sets — four shapes, chosen by count, not by taste */
.o365-photoset { margin-top: var(--space-sm); }
.o365-photoset img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-photo); background: var(--surface-raised); }
.o365-photoset figure { margin: 0; }
.o365-photoset figcaption { font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary); margin-top: var(--space-3xs); }
.o365-photoset--one img { aspect-ratio: 3 / 2; }
.o365-photoset--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
.o365-photoset--pair img { aspect-ratio: 4 / 5; }
.o365-photoset--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); }
@media (min-width: 48rem) { .o365-photoset--grid { grid-template-columns: repeat(3, 1fr); } }
.o365-photoset--grid img { aspect-ratio: 4 / 5; }
.o365-photoset--strip { display: flex; gap: var(--space-2xs); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2xs); scrollbar-width: thin; }
.o365-photoset--strip > * { flex: 0 0 68%; scroll-snap-align: start; }
@media (min-width: 48rem) { .o365-photoset--strip > * { flex: 0 0 31%; } }
.o365-photoset--strip img { aspect-ratio: 3 / 2; }

/* Resource list — the real content of a guide entry: typed links in the site's
   own taxonomy, descending order of detail. The type is a fixed mono column so
   forty links stay scannable. */
.o365-resources { display: flex; flex-direction: column; margin-top: var(--space-sm); max-width: var(--measure); }
.o365-resources a {
  display: grid; grid-template-columns: 6.2rem 1fr; gap: var(--space-xs); align-items: baseline;
  padding: 0.5rem 0; border-top: var(--hairline); text-decoration: none;
  font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.4;
}
.o365-resources a:first-child { border-top: 0; }
.o365-resources a:hover { color: var(--accent-text); }
.o365-resources b {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quiet); white-space: nowrap;
}
.o365-resources a[data-type="guidebook"] b { color: var(--accent-2); }
.o365-more--links > summary::after { content: " ↓"; }

/* Guide overview — /adventure-guides-overview: highlights, then the A-Z grid */
.o365-guidegrid { display: grid; gap: var(--space-md) var(--space-sm); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .o365-guidegrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .o365-guidegrid { grid-template-columns: repeat(4, 1fr); } }
.o365-guidecard { display: flex; flex-direction: column; gap: var(--space-2xs); text-decoration: none; color: inherit; }
.o365-guidecard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-photo); background: var(--surface-raised); }
.o365-guidecard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 380ms var(--easing); }
.o365-guidecard:hover .o365-guidecard__media img { transform: scale(1.028); }
.o365-guidecard__name { font-size: var(--text-large); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); line-height: 1.1; transition: color var(--duration) var(--easing); }
.o365-guidecard:hover .o365-guidecard__name { color: var(--accent-text-strong); }
.o365-guidecard__meta { font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-secondary); }
/* Compact row for the long A-Z tail — name + count, no image */
.o365-guidelist { display: grid; gap: 0 var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .o365-guidelist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .o365-guidelist { grid-template-columns: repeat(3, 1fr); } }
.o365-guidelist a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs);
  padding: 0.65rem 0; border-top: var(--hairline); text-decoration: none;
  font-size: var(--text-medium); font-weight: var(--weight-bold); color: var(--text-primary);
}
.o365-guidelist a:hover { color: var(--accent-text); }
.o365-guidelist b { font-family: var(--font-mono); font-size: var(--text-x-small); font-weight: 400; color: var(--text-quiet); }

/* Overflow — core/details, no plugin. Everything past the first row stays
   collapsed, so an 85-image page renders ~24 images on first paint. */
.o365-more { margin-top: var(--space-xs); border-top: var(--hairline); }
.o365-more > summary {
  cursor: pointer; list-style: none; padding: var(--space-xs) 0;
  font-family: var(--font-mono); font-size: var(--text-x-small);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text);
}
.o365-more > summary::-webkit-details-marker { display: none; }
.o365-more > summary::after { content: " ↓"; }
.o365-more[open] > summary::after { content: " ↑"; }
.o365-more > summary:hover { color: var(--accent-text-strong); }
.o365-more[open] > summary { color: var(--text-secondary); }

.o365-backtotop { display: inline-block; margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-x-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); text-decoration: none; }
.o365-backtotop:hover { color: var(--accent-text); }

/* ===== components/chrome/chrome.css ===== */
/* ── Header, navigation, footer ──────────────────────────────────────────── */
.o365-header { position: sticky; top: 0; z-index: 40; background: var(--understory); color: var(--i-text-primary); }
.o365-header__bar { max-width: var(--wide-width); margin-inline: auto; min-height: var(--header-h); box-sizing: border-box; padding: var(--space-2xs) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.o365-header__brand { display: flex; align-items: center; text-decoration: none; }
.o365-header__brand img { height: 3.4rem; width: auto; filter: invert(1); }
.o365-nav { display: none; }
@media (min-width: 56rem) { .o365-nav { display: flex; align-items: center; gap: var(--space-sm); } }
.o365-nav a {
  font-size: var(--text-small); font-weight: var(--weight-medium); text-decoration: none;
  color: var(--i-text-primary); padding: 0.35em 0; border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
.o365-nav a:hover { color: var(--spruce-300); border-bottom-color: var(--spruce-400); }
.o365-nav a[aria-current="page"] { border-bottom-color: var(--spruce-400); }

/* Nav folders — the two dropdowns carried over from the Squarespace menu.
   No JS in this theme, so the panel opens on :hover and on :focus-within; the
   latter is what makes it keyboard-reachable (tabbing onto a sub-link reveals
   the panel). It stays in the DOM and is hidden with visibility, not display,
   because display:none links cannot take focus. */
.o365-nav__folder { position: relative; }
.o365-nav__folder-label {
  display: inline-block; cursor: default; white-space: nowrap;
  font-size: var(--text-small); font-weight: var(--weight-medium);
  color: var(--i-text-primary); padding: 0.35em 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
.o365-nav__folder-label::after { content: " ▾"; font-size: 0.75em; vertical-align: 0.1em; }
.o365-nav__folder:hover > .o365-nav__folder-label,
.o365-nav__folder:focus-within > .o365-nav__folder-label { color: var(--spruce-300); border-bottom-color: var(--spruce-400); }
.o365-nav__panel {
  position: absolute; top: 100%; left: 0; z-index: 50;
  visibility: hidden; opacity: 0; pointer-events: none;
  width: max-content; max-width: 24rem;
  background: var(--understory); border: 1px solid var(--i-border-hairline);
  padding: var(--space-2xs); display: flex; flex-direction: column;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.32);
  transition: opacity var(--duration) var(--easing), visibility var(--duration) var(--easing);
}
/* Travel Hacking sits near the right edge — hang its panel off the right. */
.o365-nav__folder--end .o365-nav__panel { left: auto; right: 0; }
.o365-nav__folder:hover > .o365-nav__panel,
.o365-nav__folder:focus-within > .o365-nav__panel { visibility: visible; opacity: 1; pointer-events: auto; }
.o365-nav__panel a {
  padding: 0.5em 0.7em; border-bottom: 0; line-height: 1.35;
  font-weight: var(--weight-regular); white-space: normal;
}
.o365-nav__panel a:hover { color: var(--spruce-300); border-bottom-color: transparent; background: rgb(255 255 255 / 0.06); }

/* Tag bar — the three archives, on blog and archive templates only */
.o365-tagbar { border-top: 1px solid var(--i-border-hairline); }
.o365-tagbar__inner { max-width: var(--wide-width); margin-inline: auto; padding: var(--space-2xs) var(--gutter) var(--space-xs); display: flex; gap: var(--space-2xs); overflow-x: auto; scrollbar-width: none; }
.o365-tagbar__inner::-webkit-scrollbar { display: none; }

/* Mobile menu — core/navigation ships its own overlay; this is the CSS-only
   fallback if you'd rather not load core's nav script. */
.o365-menu { display: block; }
@media (min-width: 56rem) { .o365-menu { display: none; } }
.o365-menu > summary { list-style: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-x-small); text-transform: uppercase; letter-spacing: 0.12em; color: var(--i-text-primary); padding: 0.6em 0; }
.o365-menu > summary::-webkit-details-marker { display: none; }
.o365-menu__panel { position: absolute; left: 0; right: 0; background: var(--understory); border-top: 1px solid var(--i-border-hairline); padding: var(--space-sm) var(--gutter) var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.o365-menu__panel a { color: var(--i-text-primary); text-decoration: none; font-size: var(--text-large); font-weight: var(--weight-bold); }
/* Mobile has room for accordions, so the two folders are real toggles here.
   The shared name= keeps only one open at a time. */
.o365-menu__folder > summary {
  list-style: none; cursor: pointer;
  color: var(--i-text-primary); font-size: var(--text-large); font-weight: var(--weight-bold);
}
.o365-menu__folder > summary::-webkit-details-marker { display: none; }
.o365-menu__folder > summary::after { content: " ▾"; font-size: 0.7em; vertical-align: 0.15em; }
.o365-menu__folder[open] > summary::after { content: " ▴"; }
.o365-menu__sub { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-2xs) 0 var(--space-xs) var(--space-sm); }
.o365-menu__sub a { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--i-text-secondary); line-height: 1.35; }

.o365-footer { background: var(--understory); color: var(--i-text-primary); }
.o365-footer__inner { max-width: var(--wide-width); margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-md); display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .o365-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: var(--space-lg); } }
.o365-footer h3 { font-family: var(--font-mono); font-size: var(--text-x-small); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--lichen-300); margin-bottom: var(--space-xs); }
.o365-footer__list { display: flex; flex-direction: column; gap: 0.5rem; }
.o365-footer__list a { color: var(--i-text-primary); text-decoration: none; font-size: var(--text-small); }
.o365-footer__list a:hover { color: var(--spruce-300); }
.o365-footer__brand img { height: 3rem; filter: invert(1); }
.o365-footer__bottom { max-width: var(--wide-width); margin-inline: auto; padding: var(--space-sm) var(--gutter) var(--space-lg); border-top: 1px solid var(--i-border-hairline); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--i-text-secondary); }
.o365-footer__bottom a { color: var(--i-text-secondary); text-decoration: none; }
.o365-footer__bottom a:hover { color: var(--i-text-primary); }

/* ===== components/cta/cta.css ===== */
/* ── Subscribe ───────────────────────────────────────────────────────────────
   210 existing subscribers. Two placements: a panel dropped mid-article, and
   the persistent band above the footer. Same fields, different weight.
   ─────────────────────────────────────────────────────────────────────────── */
.o365-subscribe { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.o365-subscribe > * { max-width: 100%; }
.o365-subscribe__title { font-size: var(--text-large); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); line-height: 1.15; text-wrap: balance; }
.o365-subscribe__blurb { font-size: var(--text-small); color: var(--text-secondary); max-width: 46ch; }
.o365-subscribe__form { display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: 30rem; }
.o365-subscribe__form .o365-input { flex: 1 1 14rem; }
.o365-subscribe__form .o365-btn { flex: none; }
.o365-subscribe__note { font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--text-quiet); }

.o365-subscribe--inline {
  background: var(--surface-raised); border-radius: var(--radius-lg);
  padding: var(--space-md); max-width: var(--measure);
  border-left: 4px solid var(--accent-cta);
}
.o365-subscribe--band { background: var(--understory); color: var(--i-text-primary); }
.o365-subscribe--band .o365-subscribe__inner {
  max-width: var(--wide-width); margin-inline: auto; padding: var(--space-xl) var(--gutter);
  display: grid; gap: var(--space-md); align-items: center;
}
@media (min-width: 52rem) { .o365-subscribe--band .o365-subscribe__inner { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.o365-subscribe--band .o365-subscribe__title { font-size: var(--text-x-large); }