:root {
  color-scheme: light;
  --ink: #281a28;
  --paper: #f6efe1;
  --paper-deep: #e9dbc8;
  --garnet: #8d2448;
  --sapphire: #254f78;
  --amber: #d99a32;
  --moss: #546d4d;
  --plum: #543654;
  --chalk: #fffaf0;
  --graphite: #493e43;
  --shadow: 0 24px 70px rgba(55, 30, 43, .16);
  --serif: Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 5%, rgba(217,154,50,.16), transparent 24rem),
    radial-gradient(circle at 96% 34%, rgba(37,79,120,.11), transparent 28rem),
    var(--paper);
  font-family: var(--sans);
  line-height: 1.65;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
figure { margin: 0; overflow: hidden; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 8vw, 8.4rem); letter-spacing: -.065em; }
h2 { font-size: clamp(2.35rem, 5vw, 5.2rem); letter-spacing: -.045em; }
p { margin: 0 0 1rem; }

.skip-link {
  position: fixed; z-index: 99; left: 1rem; top: 1rem; padding: .8rem 1rem;
  background: var(--chalk); transform: translateY(-180%); border: 2px solid var(--ink);
}
.skip-link:focus { transform: translateY(0); }
.site-header {
  position: relative; z-index: 10; max-width: 94rem; margin: 0 auto; padding: 1.25rem 3vw;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.wordmark { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--serif); font-size: 1.5rem; text-decoration: none; }
.wordmark-seed { width: 1.1rem; aspect-ratio: 1; border-radius: 60% 40% 55% 45%; background: conic-gradient(var(--garnet), var(--amber), var(--moss), var(--sapphire), var(--garnet)); box-shadow: inset 0 0 0 2px var(--graphite); transform: rotate(20deg); }
.site-header nav, footer nav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.site-header nav a, footer a { text-decoration-thickness: 1px; text-underline-offset: .3em; }
.site-header a:focus-visible, .petal-link:focus-visible, .quarter-links a:focus-visible, .policy-index a:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

main { overflow: clip; }
.hero-window {
  position: relative; min-height: min(840px, 90vh); max-width: 94rem; margin: 1rem auto 6rem;
  padding: clamp(2rem, 5vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(21rem, .72fr);
  align-items: center; gap: clamp(2rem, 6vw, 7rem);
}
.hero-window::before { content: ""; position: absolute; inset: 4% 1% 0 8%; border: 1px solid rgba(73,62,67,.3); border-radius: 48% 52% 36% 64% / 28% 37% 63% 72%; transform: rotate(-2deg); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin-bottom: 1.2rem; color: var(--garnet); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero-lede { max-width: 42rem; margin: 2rem 0; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.hero-image { position: relative; z-index: 1; height: clamp(32rem, 70vw, 49rem); clip-path: polygon(11% 0, 92% 7%, 100% 72%, 76% 100%, 9% 91%, 0 26%); box-shadow: var(--shadow); }
.margin-note { position: absolute; right: 2%; bottom: 0; max-width: 18rem; padding: 1rem; border-top: 1px solid var(--graphite); font-family: var(--serif); font-style: italic; }
.petal-link { display: inline-flex; gap: .75rem; align-items: center; padding: .85rem 0; color: var(--garnet); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: .4em; }

.compass-field { max-width: 88rem; margin: 0 auto 9rem; padding: 0 3vw; display: grid; grid-template-columns: 1fr .75fr .75fr; grid-template-areas: "intro main circle" "nav main objects"; gap: 1rem; align-items: stretch; }
.compass-intro { grid-area: intro; padding: clamp(2rem, 4vw, 4rem); background: var(--chalk); border-radius: 58% 42% 45% 55% / 13% 22% 78% 87%; box-shadow: var(--shadow); }
.compass-intro h2 { font-size: clamp(2.4rem, 4.4vw, 4.7rem); }
.compass-intro p:last-child { margin: 1.5rem 0 0; max-width: 34rem; }
.compass-image { min-height: 21rem; }
.compass-image-main { grid-area: main; clip-path: polygon(8% 0, 100% 14%, 92% 100%, 0 87%); }
.compass-image-circle { grid-area: circle; clip-path: circle(48% at 50% 50%); }
.compass-image-objects { grid-area: objects; clip-path: polygon(0 11%, 88% 0, 100% 84%, 16% 100%); }
.quarter-links { grid-area: nav; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid rgba(73,62,67,.4); }
.quarter-links a { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.2rem; text-decoration: none; background: rgba(255,250,240,.5); border: 1px solid rgba(73,62,67,.2); font-family: var(--serif); font-size: 1.4rem; }
.quarter-links span { color: var(--garnet); font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; }

.quarter-walk { max-width: 94rem; margin: 0 auto 10rem; padding: 0 3vw; display: grid; gap: clamp(5rem, 11vw, 12rem); }
.paper-quarter { min-height: 35rem; display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 8vw, 9rem); }
.paper-quarter:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); }
.paper-quarter figure { height: min(68vw, 42rem); box-shadow: var(--shadow); }
.quarter-receive figure { border-radius: 52% 48% 12% 88% / 36% 18% 82% 64%; }
.quarter-reflect figure { clip-path: polygon(12% 0, 100% 9%, 85% 100%, 0 89%); }
.quarter-practice figure { border-radius: 2rem 50% 2rem 50%; }
.quarter-carry figure { clip-path: circle(48% at 50% 50%); }
.paper-quarter > div { max-width: 44rem; }
.quarter-number { color: var(--garnet); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.paper-quarter h2 { margin-bottom: 1.5rem; }
.paper-quarter p:last-child { font-size: 1.12rem; }

.garden-room { background: var(--plum); color: var(--chalk); padding: clamp(4rem, 9vw, 9rem) max(3vw, calc((100vw - 88rem)/2)); }
.garden-room > header { max-width: 62rem; margin-bottom: 4rem; }
.garden-room .eyebrow { color: #f0bd62; }
.garden-room header p:last-child { max-width: 45rem; margin-top: 1.5rem; color: #eadce6; }
.garden-collage { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 23rem 23rem; gap: 1rem; }
.garden-collage figure { position: relative; min-height: 0; }
.garden-collage figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .4rem .65rem; background: rgba(40,26,40,.82); color: var(--chalk); font-family: var(--serif); }
.garden-tall { grid-row: 1 / 3; }
.garden-wide { grid-column: 2 / 4; }

.about-fold { max-width: 92rem; margin: 10rem auto; padding: 0 3vw; display: grid; grid-template-columns: minmax(0, .85fr) minmax(26rem, 1.15fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.about-copy { padding: clamp(1rem, 4vw, 4rem); }
.about-copy h2 { font-size: clamp(2.5rem, 4.6vw, 4.8rem); margin-bottom: 2rem; }
.about-images { min-height: 42rem; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; transform: rotate(1deg); }
.about-images figure:first-child { grid-row: 1 / 3; clip-path: polygon(0 6%, 92% 0, 100% 93%, 8% 100%); }
.about-images figure:nth-child(2) { border-radius: 50% 50% 8% 8%; }
.about-images figure:nth-child(3) { clip-path: polygon(10% 0, 100% 14%, 90% 100%, 0 86%); }

.closing-horizon { max-width: 94rem; margin: 0 auto 7rem; padding: 0 3vw; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; }
.closing-horizon figure { height: 34rem; clip-path: circle(48% at 45% 50%); }
.closing-horizon > div { margin-left: -4rem; padding: clamp(2rem, 5vw, 5rem); background: rgba(255,250,240,.94); box-shadow: var(--shadow); z-index: 1; }
.closing-horizon h2 { font-size: clamp(2.2rem, 4vw, 4.2rem); margin-bottom: 1.5rem; }

footer { max-width: 94rem; margin: 0 auto; padding: 2rem 3vw 3rem; display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid rgba(73,62,67,.35); }

/* Privacy folio */
.policy-body { background: #f3eadc; }
.policy-mast { max-width: 88rem; margin: 3rem auto 5rem; padding: 0 3vw; display: grid; grid-template-columns: 1.05fr .65fr; align-items: center; gap: 5vw; }
.policy-mast h1 { font-size: clamp(3.2rem, 7vw, 7.2rem); }
.policy-mast-copy > p:not(.eyebrow):not(.effective) { max-width: 42rem; margin-top: 1.5rem; font-size: 1.15rem; }
.policy-mast figure { height: min(64vw, 42rem); clip-path: polygon(8% 0, 100% 8%, 91% 100%, 0 87%); }
.effective { margin-top: 2rem; color: var(--graphite); font-size: .82rem; }
.policy-layout { max-width: 92rem; margin: 0 auto 8rem; padding: 0 3vw; display: grid; grid-template-columns: minmax(16rem, .35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.policy-index { position: sticky; top: 1rem; display: grid; gap: 1.4rem; padding: 1.5rem; border: 1px solid rgba(73,62,67,.35); background: rgba(255,250,240,.78); box-shadow: 0 16px 44px rgba(55,30,43,.08); }
.index-cluster { display: grid; gap: .35rem; }
.index-cluster h2 { margin-bottom: .35rem; color: var(--garnet); font-family: var(--sans); font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.policy-index a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .25rem 0; text-decoration: none; font-size: .86rem; line-height: 1.25; }
.policy-index a span { color: var(--garnet); font-variant-numeric: tabular-nums; }
.policy-ledger { display: grid; gap: 0; }
.policy-entry { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; padding: clamp(2.5rem, 5vw, 5rem) 0; border-top: 1px solid rgba(73,62,67,.35); scroll-margin-top: 2rem; }
.policy-entry:first-child { border-top: 0; }
.policy-number { color: var(--garnet); font-family: var(--serif); font-size: 1.2rem; }
.policy-entry h2 { max-width: 44rem; margin-bottom: 1rem; font-size: clamp(1.9rem, 3vw, 3.1rem); }
.policy-entry p { max-width: 48rem; font-size: 1.04rem; }
.policy-pane { height: clamp(19rem, 38vw, 32rem); margin: 0 0 clamp(2rem, 5vw, 5rem) 3.6rem; clip-path: polygon(4% 0, 100% 8%, 94% 100%, 0 91%); }
.policy-pane:nth-of-type(4n+2) { clip-path: circle(48% at 50% 50%); }
.policy-end { max-width: 78rem; margin: 0 auto 7rem; padding: clamp(2rem, 5vw, 5rem); background: var(--plum); color: var(--chalk); display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.policy-end h2 { max-width: 48rem; font-size: clamp(2.2rem, 4vw, 4rem); }

@media (max-width: 850px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .hero-window, .policy-mast, .about-fold, .closing-horizon { grid-template-columns: 1fr; }
  .hero-window { padding-top: 2rem; }
  .hero-image { height: 34rem; }
  .margin-note { position: relative; right: auto; bottom: auto; }
  .compass-field { grid-template-columns: 1fr 1fr; grid-template-areas: "intro intro" "main circle" "main objects" "nav nav"; }
  .paper-quarter, .paper-quarter:nth-child(even) { grid-template-columns: 1fr; }
  .paper-quarter:nth-child(even) > div { order: 2; }
  .paper-quarter figure { height: 34rem; }
  .garden-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 26rem 20rem 20rem; }
  .garden-tall { grid-row: 1 / 2; grid-column: 1 / 3; }
  .garden-wide { grid-column: 1 / 3; }
  .about-images { min-height: 35rem; }
  .closing-horizon > div { margin: -3rem 1rem 0; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-index { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  h1 { font-size: 3.4rem; }
  .site-header nav { gap: .35rem .8rem; }
  .compass-field { display: flex; flex-direction: column; }
  .compass-image { height: 26rem; }
  .quarter-links { grid-template-columns: 1fr; }
  .garden-collage, .about-images { display: grid; grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .garden-collage figure, .about-images figure, .about-images figure:first-child { grid-column: auto; grid-row: auto; height: 25rem; }
  .policy-index { grid-template-columns: 1fr; }
  .policy-entry { grid-template-columns: 2.4rem 1fr; }
  .policy-pane { margin-left: 0; }
  .policy-end, footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}