.brandmark__role {
  font-size: var(--text-xs);
color: var(--text-dark-muted);
}
.route__audience {
  order: -1;
display: flex;
align-items: center;
gap: var(--space-s);
& .fig { inline-size: var(--brand-fig-s); }
}
.contact__head {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--content-gap);
}
.divider__svg {
  inline-size: min(var(--width-40), 100%);
}
.contact {
  background-color: var(--bg-dark);
color: var(--text-light);
--heading-color: var(--text-light);
& .shead__eyebrow { color: color-mix(in oklab, var(--secondary) 45%, var(--text-light)); }
& .textlink { color: var(--text-light); &:hover { color: var(--primary-ultra-light); } }
& .contact__btn { --focus-color: var(--accent); }
}
.sitefoot__cols {
  display: grid;
gap: var(--space-l);
@container (inline-size >= 74rem) { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
}
.mainnav__item {
  @media (width < 80rem) {
  border-block-end: var(--border-width) solid var(--border-color-dark);
  &:last-child { border-block-end: 0; padding-block-start: var(--space-m); }
}
}
.contact__layout {
  display: grid;
gap: var(--space-xl);
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-2-3);
  gap: var(--space-xxl);
  align-items: start;
}
}
.quote-card__caption {
  margin-block-start: var(--space-m);
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.route__cta {
  margin-block-start: auto;
}
.fig {
  inline-size: var(--brand-fig-m);
block-size: auto;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--text-dark);
&[data-tone="clay"] { color: var(--primary-dark); }
&[data-tone="sage"] { color: var(--secondary-dark); }
}
.route__link {
  color: inherit;
text-decoration: none;
}
.brandmark__name {
  font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--h4);
line-height: var(--heading-line-height);
}
.plan {
  --note-tilt: var(--brand-tilt-s);
margin: 0;
padding: var(--space-m);
display: grid;
gap: var(--space-s);
}
.contact-step {
  counter-increment: contact;
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: var(--space-m);
padding-block: var(--space-m);
border-block-start: var(--border-width) solid color-mix(in oklab, var(--text-light) 18%, transparent);
&:last-child { border-block-end: var(--border-width) solid color-mix(in oklab, var(--text-light) 18%, transparent); }
&::before {
  content: counter(contact);
  display: grid;
  place-items: center;
  inline-size: var(--brand-tap-size);
  block-size: var(--brand-tap-size);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--border-width) * 1.4) color-mix(in oklab, var(--text-light) 55%, transparent);
  font-family: var(--heading-font-family);
  font-style: italic;
  font-size: var(--text-l);
}
}
.steps__path {
  display: none;
@container (inline-size >= 74rem) {
  display: block;
  position: absolute;
  inset-inline-start: 8%;
  inset-block-start: 45%;
  inline-size: 84%;
  block-size: var(--space-xl);
  color: var(--secondary);
}
}
.textlink {
  display: inline-flex;
align-items: center;
gap: var(--space-xs);
align-self: flex-start;
font-weight: var(--brand-weight-bold);
color: var(--text-dark);
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 100% var(--border-width) no-repeat;
padding-block-end: calc(var(--space-xs) * 0.2);
transition: gap var(--brand-motion-fast) var(--brand-ease), color var(--brand-motion-fast) var(--brand-ease);
&:hover { gap: var(--space-s); color: var(--primary-dark); }
}
.about__portrait {
  --note-tilt: calc(var(--brand-tilt-m) * -1);
padding: var(--space-s);
padding-block-end: var(--space-xl);
@container (inline-size >= 83rem) { order: -1; }
}
.contact__steps {
  display: grid;
counter-reset: contact;
}
.event__for {
  font-size: var(--text-s);
}
.method__inner {
  container-type: inline-size;
}
.step__title {
  grid-row: 1;
grid-column: 2;
font-size: var(--text-l);
}
.events__inner {
  container-type: inline-size;
}
.eyebrow {
  font-size: var(--text-s);
font-weight: var(--brand-weight-bold);
letter-spacing: var(--brand-tracking-label);
text-transform: uppercase;
color: var(--secondary-dark);
}
.hero__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m) var(--space-l);
margin-block-start: var(--space-xs);
}
.recog__board {
  display: grid;
gap: var(--space-xl);
align-items: start;
margin-block: var(--space-l);
& > :nth-child(1) { --note-tilt: calc(var(--brand-tilt-l) * -1); }
& > :nth-child(2) { --note-tilt: var(--brand-tilt-m); margin-inline-start: var(--space-l); }
& > :nth-child(3) { --note-tilt: calc(var(--brand-tilt-s) * -1); }
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-3);
  gap: var(--space-l);
  padding-block-end: var(--space-xl);
  & > :nth-child(2) { margin-inline-start: 0; margin-block-start: var(--space-xl); }
}
}
.step {
  counter-increment: step;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-s);
padding: var(--space-m);
&::after {
  content: counter(step);
  grid-row: 1;
  grid-column: 1;
  font-family: var(--heading-font-family);
  font-style: italic;
  font-size: var(--h3);
  color: var(--accent-dark);
}
}
.contact-step__text {
  font-size: var(--text-s);
color: var(--text-light-muted);
}
.hero__photo {
  --note-tilt: var(--brand-tilt-m);
aspect-ratio: 3 / 4;
padding: var(--space-s);
}
.route {
  --focus-color: var(--primary-dark);
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background-color: var(--bg-ultra-light);
box-shadow: var(--brand-shadow-note);
transition: translate var(--brand-motion) var(--brand-ease);
&:hover { translate: 0 calc(var(--space-xs) * -0.6); }
& a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
& a:focus-visible { outline: none; }
&:has(a:focus-visible) { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--space-xs); }
&[data-variant="learn"] { background-color: var(--secondary-ultra-light); }
}
.about__layout {
  display: grid;
gap: var(--space-xl);
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-2-3);
  gap: var(--space-xxl);
  align-items: center;
}
}
.about__inner {
  container-type: inline-size;
}
.hero__layout {
  display: grid;
gap: var(--space-xl);
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-3-2);
  gap: var(--space-xxl);
  align-items: center;
}
}
.method__layout {
  display: grid;
gap: var(--space-xl);
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-2);
  gap: var(--space-xxl);
  align-items: start;
}
}
.mainnav__list {
  display: flex;
align-items: center;
gap: var(--space-m);
@media (width < 80rem) { flex-direction: column; align-items: stretch; gap: 0; }
}
.note {
  --note-bg: var(--brand-note-cream);
--note-tilt: calc(var(--brand-tilt-m) * -1);
position: relative;
background-color: var(--note-bg);
box-shadow: var(--brand-shadow-note);
rotate: var(--note-tilt);
transition: rotate var(--brand-motion) var(--brand-ease), translate var(--brand-motion) var(--brand-ease);
&::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--space-s) * -0.7);
  inset-inline-start: 50%;
  inline-size: calc(var(--space-xl) * 1.1);
  block-size: var(--space-m);
  translate: -50% 0;
  rotate: calc(var(--note-tilt) * -1.6);
  background-color: color-mix(in oklab, var(--bg-ultra-light) 62%, transparent);
  box-shadow: 0 0 0 var(--border-width) color-mix(in oklab, var(--brand-rule) 70%, transparent);
}
&:hover { rotate: 0deg; translate: 0 calc(var(--space-xs) * -0.4); }
&[data-tone="sage"] { --note-bg: var(--secondary-ultra-light); }
&[data-tone="sand"] { --note-bg: var(--brand-note-sand); }
&[data-tone="clay"] { --note-bg: var(--primary-ultra-light); }
&[data-tone="orange"] {
  --note-bg: var(--accent-ultra-light);
  &::before { background-color: color-mix(in oklab, var(--accent) 58%, transparent); box-shadow: 0 0 0 var(--border-width) color-mix(in oklab, var(--accent) 30%, transparent); }
}
&[data-tone="print"] { --note-bg: var(--bg-ultra-light); &::before { content: none; } }
}
.quote-card__mark {
  position: absolute;
inset-block-start: var(--space-s);
inset-inline-end: var(--space-m);
& .fig { inline-size: var(--brand-fig-s); }
}
.ph__title {
  display: block;
color: var(--text-dark);
font-weight: var(--brand-weight-bold);
}
.sitefoot {
  border-block-start: var(--border-width) solid var(--brand-rule);
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.shead__eyebrow {
  order: -1;
}
.contact__btn {
  &[class*="btn--accent"] {
  --btn-background: var(--accent);
  --btn-background-hover: var(--accent-hover);
  --btn-text-color: var(--text-dark);
  --btn-text-color-hover: var(--text-dark);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--accent);
}
}
.plan__du {
  color: var(--accent-dark);
}
.event__facts {
  display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.closing__figs {
  inline-size: min(var(--width-30), 100%);
}
.mainnav__cta {
  --btn-font-size: var(--text-s);
white-space: nowrap;
@media (width < 80rem) { --btn-width: 100%; }
&[class*="btn--accent"] {
  --btn-background: var(--accent);
  --btn-background-hover: var(--accent-hover);
  --btn-text-color: var(--text-dark);
  --btn-text-color-hover: var(--text-dark);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--text-dark);
}
}
.marks__line {
  fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-dasharray: 2 5;
stroke-linecap: round;
opacity: 0.7;
}
.demo-notice__text {
  text-align: center;
font-size: var(--text-s);
font-weight: var(--brand-weight-medium);
}
.photo__img {
  display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.event {
  --focus-color: var(--primary-dark);
display: flex;
flex-direction: column;
gap: var(--space-s);
padding-block: var(--space-l) var(--space-m);
padding-inline: var(--space-m);
& a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
& a:focus-visible { outline: none; }
&:has(a:focus-visible) { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--space-xs); }
}
.marks__tick {
  fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
}
.event__fact {
  font-size: var(--text-xs);
font-weight: var(--brand-weight-bold);
padding-inline: var(--space-xs);
padding-block: calc(var(--space-xs) * 0.2);
border-radius: var(--brand-pill);
background-color: color-mix(in oklab, var(--text-dark) 7%, transparent);
}
.method {
  background-color: color-mix(in oklab, var(--bg-ultra-light) 70%, transparent);
border-block: var(--border-width) solid color-mix(in oklab, var(--brand-rule) 60%, transparent);
}
.event__type {
  order: -1;
font-size: var(--text-xs);
font-weight: var(--brand-weight-bold);
letter-spacing: var(--brand-tracking-label);
text-transform: uppercase;
color: var(--secondary-dark);
}
.sitefoot__title {
  font-family: var(--text-font-family);
font-size: var(--text-m);
font-weight: var(--brand-weight-bold);
letter-spacing: 0;
color: var(--text-dark);
margin-block-end: var(--space-xs);
}
.about__copy {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--content-gap);
}
.sitefoot__link {
  display: inline-block;
padding-block: calc(var(--space-xs) * 0.3);
color: inherit;
text-decoration: none;
&:hover { color: var(--text-dark); text-decoration: underline; }
}
.demo-notice {
  background-color: var(--bg-dark);
color: var(--text-light);
padding-block: var(--space-xs);
padding-inline: var(--gutter);
}
.contact-step__title {
  font-size: var(--text-l);
margin-block-end: calc(var(--space-xs) * 0.3);
}
.event__link {
  color: inherit;
text-decoration: none;
}
.siteheader {
  position: sticky;
inset-block-start: 0;
z-index: 60;
background-color: color-mix(in oklab, var(--bg-light) 94%, transparent);
border-block-end: var(--border-width) solid color-mix(in oklab, var(--text-dark) 12%, transparent);
}
.siteheader__bar {
  flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-m) var(--space-l);
@media (width < 80rem) { flex-wrap: nowrap; }
}
.recog-note {
  display: flex;
flex-direction: column;
gap: var(--space-m);
padding-block: var(--space-l) var(--space-m);
padding-inline: var(--space-m);
max-inline-size: var(--width-40);
min-block-size: 100%;
& .fig { margin-block-start: auto; align-self: flex-end; }
@container (inline-size >= 83rem) { max-inline-size: none; }
}
.step__svg {
  inline-size: 100%;
block-size: calc(var(--space-xxl) * 0.9);
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:root {
  /* Paper tints: derived from the ACSS base ramp (palette itself lives in the ACSS panel) */
--brand-note-cream: oklch(from var(--base-light) calc(l + 0.015) calc(c * 0.9) h);
--brand-note-sand: oklch(from var(--base-light) calc(l - 0.02) calc(c * 1.3) h);
--brand-rule: var(--base-semi-light);
--brand-shadow-note: 0 var(--border-width) 0 color-mix(in oklab, var(--text-dark) 8%, transparent),
  0 var(--space-s) var(--space-m) calc(var(--space-s) * -0.6) color-mix(in oklab, var(--text-dark) 26%, transparent);

/* Hand-placed tilt of the paper notes */
--brand-tilt-s: 0.8deg;
--brand-tilt-m: 1.5deg;
--brand-tilt-l: 2.2deg;

/* Motion: exponential ease-out (Geary design doc) */
--brand-motion: 500ms;
--brand-motion-fast: 240ms;
--brand-ease: cubic-bezier(0.16, 1, 0.3, 1);

/* ACSS has no tracking / leading / weight scale for these */
--brand-tracking-label: 0.11em;
--brand-leading-note: 1.3;
--brand-leading-quote: 1.5;
--brand-weight-medium: 500;
--brand-weight-bold: 700;

/* Display size: hero h1 runs a step above --h1 (brief: 56-68px) */
--brand-display: clamp(calc(var(--h1) * 1.15), calc(var(--h1) * 0.8 + 1.6vw), calc(var(--h1) * 1.45));

/* Figure sizes */
--brand-fig-s: calc(var(--space-xl) * 0.9);
--brand-fig-m: calc(var(--space-xxl) * 0.72);

/* Controls */
--brand-pill: 100vmax;
--brand-tap-size: 4.4rem;
--brand-drawer-width: 60%;
--brand-burger-width: 2.4rem;
--brand-burger-gap: 0.7rem;
/* Hand-drawn underline under the hero accent words (height/gap relative to the heading size) */
--brand-underline-height: 0.26em;
--brand-underline-gap: 0.2em;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote-card__text {
  margin: 0;
}
.hero__visual {
  position: relative;
padding-block: var(--space-m);
padding-inline: var(--space-s);
}
.hero__facts {
  display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-m);
padding-block-start: var(--space-m);
border-block-start: var(--border-width) solid var(--brand-rule);
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.event__title {
  font-size: var(--h3);
}
.routes__grid {
  display: grid;
gap: var(--space-l);
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-3-2);
  gap: var(--space-xl);
  align-items: stretch;
}
}
.hero__tag {
  --note-tilt: calc(var(--brand-tilt-l) * -1.8);
position: absolute;
inset-block-end: calc(var(--space-l) * -0.2);
inset-inline-start: 0;
display: flex;
align-items: center;
gap: var(--space-s);
max-inline-size: var(--width-30);
padding-block: var(--space-s);
padding-inline: var(--space-m);
font-family: var(--heading-font-family);
font-style: italic;
line-height: var(--brand-leading-note);
& .fig { inline-size: var(--brand-fig-s); flex: none; }
@container (inline-size >= 83rem) { inset-inline-start: calc(var(--space-l) * -0.6); }
}
.closing {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--content-gap);
}
.figsprite {
  position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
}
.method__photo {
  @container (inline-size >= 83rem) {
  order: -1;
  position: sticky;
  inset-block-start: calc(var(--space-xxl) * 1.2);
}
}
.plan__caption {
  font-family: var(--heading-font-family);
font-style: italic;
color: var(--text-dark-muted);
}
.about__caption {
  position: absolute;
inset-block-end: var(--space-s);
inset-inline: var(--space-m);
font-family: var(--heading-font-family);
font-style: italic;
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.recog__close-text {
  font-size: var(--text-l);
max-inline-size: 48ch;
}
.sitefoot__inner {
  container-type: inline-size;
display: grid;
gap: var(--space-l);
}
.hero__title {
  font-size: var(--brand-display);
max-inline-size: 13ch;
}
.event__date {
  order: -2;
font-family: var(--heading-font-family);
font-size: var(--h3);
line-height: var(--heading-line-height);
padding-block-end: var(--space-s);
border-block-end: var(--border-width) dashed color-mix(in oklab, var(--text-dark) 30%, transparent);
&[data-pending="true"] { font-style: italic; font-size: var(--text-l); color: var(--primary-dark); }
}
.events__head {
  display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-m);
}
.shead {
  display: flex;
flex-direction: column;
gap: var(--space-s);
max-inline-size: var(--width-60);
&[data-width="full"] { max-inline-size: none; }
}
.mainnav__link {
  display: inline-block;
padding-block: var(--space-xs);
color: var(--text-dark);
text-decoration: none;
font-size: var(--text-s);
font-weight: var(--brand-weight-medium);
white-space: nowrap;
background: linear-gradient(var(--primary), var(--primary)) 50% 100% / 0 calc(var(--border-width) * 2) no-repeat;
transition: background-size var(--brand-motion-fast) var(--brand-ease);
&:hover { background-size: 100% calc(var(--border-width) * 2); }
@media (width < 80rem) {
  display: block;
  inline-size: 100%;
  min-block-size: var(--brand-tap-size);
  padding-block: var(--space-s);
  font-size: var(--text-xl);
  background: none;
}
}
.marks__pos {
  &[data-tone="clay"] { color: var(--accent-dark); }
&[data-tone="clay"] .marks__dot { fill: color-mix(in oklab, var(--accent) 35%, var(--bg-light)); }
}
.closing__btn {
  &[class*="btn--accent"] {
  --btn-background: var(--accent);
  --btn-background-hover: var(--accent-hover);
  --btn-text-color: var(--text-dark);
  --btn-text-color-hover: var(--text-dark);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--text-dark);
}
}
.hero__lead {
  font-size: var(--text-l);
color: var(--text-dark-muted);
max-inline-size: 58ch;
}
.recog__inner {
  container-type: inline-size;
}
.hero__accent {
  font-style: italic;
color: var(--primary-dark);
position: relative;
display: inline-block;
white-space: nowrap;
padding-block-end: var(--brand-underline-gap);
&::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--space-xs) * -0.3);
  inset-block-end: 0;
  block-size: var(--brand-underline-height);
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q14.9 8.7 25.8 12 Q36.7 16.0 47.6 12 Q58.4 7.3 69.3 12 Q80.2 17.3 91.1 12 Q102.0 6.2 112.9 12 Q123.8 18.3 134.7 12 Q145.6 5.4 156.4 12 Q167.3 18.9 178.2 12 Q189.1 5.0 200.0 12 Q210.9 19.0 221.8 12 Q232.7 5.1 243.6 12 Q254.4 18.6 265.3 12 Q276.2 5.7 287.1 12 Q298.0 17.8 308.9 12 Q319.8 6.7 330.7 12 Q341.6 16.7 352.4 12 Q363.3 8.0 374.2 12 Q385.1 15.3 396.0 12' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q14.9 8.7 25.8 12 Q36.7 16.0 47.6 12 Q58.4 7.3 69.3 12 Q80.2 17.3 91.1 12 Q102.0 6.2 112.9 12 Q123.8 18.3 134.7 12 Q145.6 5.4 156.4 12 Q167.3 18.9 178.2 12 Q189.1 5.0 200.0 12 Q210.9 19.0 221.8 12 Q232.7 5.1 243.6 12 Q254.4 18.6 265.3 12 Q276.2 5.7 287.1 12 Q298.0 17.8 308.9 12 Q319.8 6.7 330.7 12 Q341.6 16.7 352.4 12 Q363.3 8.0 374.2 12 Q385.1 15.3 396.0 12' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
}
.hero__copy {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--content-gap);
}
.ph__label {
  max-inline-size: 30ch;
}
.hero__btn {
  &[class*="btn--accent"] {
  --btn-background: var(--accent);
  --btn-background-hover: var(--accent-hover);
  --btn-text-color: var(--text-dark);
  --btn-text-color-hover: var(--text-dark);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--text-dark);
}
}
.shead__lead {
  font-size: var(--text-l);
color: var(--text-dark-muted);
max-inline-size: 58ch;
}
.photo {
  margin: 0;
overflow: hidden;
background-color: color-mix(in oklab, var(--brand-rule) 55%, var(--bg-ultra-light));
&[data-ratio="portrait"] { aspect-ratio: 3 / 4; }
&[data-ratio="tall"] { aspect-ratio: 4 / 5; }
&[data-ratio="wide"] { aspect-ratio: 16 / 9; }
&[data-ratio="landscape"] { aspect-ratio: 16 / 11; }
&[data-ratio="fill"] { block-size: 100%; }
}
.contact__inner {
  container-type: inline-size;
}
.route__media {
  aspect-ratio: 16 / 9;
.route[data-variant="learn"] & { aspect-ratio: 16 / 11; }
}
.event__cta {
  display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-block-start: auto;
padding-block-start: var(--space-s);
font-weight: var(--brand-weight-bold);
color: var(--primary-dark);
}
.steps__line {
  fill: none;
stroke: currentColor;
stroke-width: 1.2;
stroke-dasharray: 2 7;
stroke-linecap: round;
}
.contact__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m) var(--space-l);
margin-block-start: var(--space-xs);
}
.ph {
  display: grid;
place-items: end start;
padding: var(--space-m);
background:
  repeating-linear-gradient(135deg, transparent 0 calc(var(--space-s) - var(--border-width)),
    color-mix(in oklab, var(--text-dark) 5%, transparent) calc(var(--space-s) - var(--border-width)) var(--space-s)),
  color-mix(in oklab, var(--brand-rule) 55%, var(--bg-ultra-light));
color: var(--text-dark-muted);
font-size: var(--text-s);
&[data-align="top"] { place-items: start; }
&[data-ratio="portrait"] { aspect-ratio: 3 / 4; }
&[data-ratio="tall"] { aspect-ratio: 4 / 5; }
&[data-ratio="wide"] { aspect-ratio: 16 / 9; }
&[data-ratio="landscape"] { aspect-ratio: 16 / 11; }
&[data-ratio="fill"] { block-size: 100%; }
}
.route__title {
  font-size: var(--h3);
}
.skip-link {
  &:focus, &:focus-visible { transform: translateY(0); }
}
.route__text {
  color: var(--text-dark-muted);
max-inline-size: 46ch;
}
.brandmark {
  display: flex;
flex-direction: column;
flex: 0 1 auto;
min-inline-size: 0;
text-decoration: none;
color: var(--text-dark);
}
.hero__eyebrow {
  order: -1;
}
.navbackdrop {
  position: fixed;
inset: 0;
z-index: 1;
background: color-mix(in oklab, var(--base-ultra-dark) 55%, transparent);
opacity: 0;
visibility: hidden;
transition: opacity var(--brand-motion-fast) var(--brand-ease), visibility 0s linear var(--brand-motion-fast);
.siteheader--open & { opacity: 1; visibility: visible; transition: opacity var(--brand-motion-fast) var(--brand-ease), visibility 0s; }
@media (width >= 80rem) { display: none; }
}
.closing__text {
  color: var(--text-dark-muted);
max-inline-size: 44ch;
}
.contact__note {
  color: var(--text-light-muted);
}
.steps-wrap {
  position: relative;
margin-block-start: var(--space-xxl);
}
.step__text {
  grid-column: 1 / -1;
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.step__art {
  grid-column: 1 / -1;
}
.fig__guide {
  stroke-dasharray: 2 6;
opacity: 0.5;
}
.about__fact {
  display: flex;
align-items: baseline;
gap: var(--space-s);
&::before {
  content: "";
  flex: none;
  inline-size: calc(var(--space-xs) * 0.6);
  block-size: calc(var(--space-xs) * 0.6);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--border-width) * 1.4) var(--secondary-dark);
}
}
.recog__close {
  display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-s) var(--space-l);
padding-block-start: var(--space-m);
border-block-start: var(--border-width) solid var(--brand-rule);
}
.draft-tag {
  align-self: flex-start;
font-size: var(--text-xs);
font-weight: var(--brand-weight-bold);
color: var(--primary-dark);
border: var(--border-width) dashed color-mix(in oklab, var(--primary) 60%, transparent);
border-radius: var(--brand-pill);
padding-inline: var(--space-xs);
padding-block: calc(var(--space-xs) * 0.2);
}
.plan__svg {
  inline-size: 100%;
block-size: auto;
&.fig { inline-size: 100%; }
}
.voice__layout {
  display: grid;
gap: var(--space-xxl);
@container (inline-size >= 83rem) {
  grid-template-columns: var(--grid-2);
  align-items: center;
}
}
.hero__fact {
  & + &::before { content: "·"; margin-inline-end: var(--space-m); color: var(--accent); }
}
.event__for-label {
  font-weight: var(--brand-weight-bold);
}
.quote-card {
  --note-tilt: calc(var(--brand-tilt-s) * -1.25);
margin: 0;
padding-block: var(--space-xl) var(--space-l);
padding-inline: var(--space-l);
}
.sitefoot__list {
  display: grid;
gap: calc(var(--space-xs) * 0.2);
}
.route__body {
  display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-l);
}
.divider {
  display: flex;
justify-content: center;
padding-inline: var(--gutter);
}
.sitefoot__strong {
  color: var(--text-dark);
}
.plan__anno {
  font-family: var(--heading-font-family);
font-style: italic;
font-size: var(--text-s);
fill: var(--primary-dark);
stroke: none;
}
.arrow {
  inline-size: var(--icon-size-s);
block-size: var(--icon-size-s);
flex: none;
}
.navtoggle {
  position: relative;
z-index: 3;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--brand-burger-gap);
inline-size: var(--brand-tap-size);
block-size: var(--brand-tap-size);
margin-inline-start: auto;
padding: 0;
border: 0;
background: transparent;
color: var(--text-dark);
cursor: pointer;
flex: none;
@media (width < 80rem) { display: flex; }
}
.events__grid {
  --events-min: calc(var(--width-30) * 0.85);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--events-min), 100%), 1fr));
gap: var(--space-xl) var(--space-l);
padding-block-start: var(--space-s);
& > :nth-child(1) { --note-tilt: calc(var(--brand-tilt-m) * -0.8); }
& > :nth-child(2) { --note-tilt: calc(var(--brand-tilt-s) * 1.1); }
& > :nth-child(3) { --note-tilt: calc(var(--brand-tilt-s) * -0.6); }
}
.marks {
  color: var(--secondary-dark);
overflow: visible;
}
.hero__inner {
  container-type: inline-size;
}
.steps {
  position: relative;
display: grid;
gap: var(--space-l);
counter-reset: step;
& > :nth-child(2) { --note-tilt: var(--brand-tilt-m); }
& > :nth-child(3) { --note-tilt: calc(var(--brand-tilt-s) * -0.75); }
@container (inline-size >= 74rem) {
  grid-template-columns: var(--grid-3);
  gap: var(--space-xl);
}
}
.shead__title {
  text-wrap: balance;
}
.method__text {
  max-inline-size: 52ch;
}
.mainnav {
  @media (width < 80rem) {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 2;
  inline-size: var(--brand-drawer-width);
  max-inline-size: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-light);
  box-shadow: var(--brand-shadow-note);
  padding-block: calc(var(--space-xxl) + var(--space-l)) var(--space-xl);
  padding-inline: var(--gutter);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--brand-motion-fast) var(--brand-ease), visibility 0s linear var(--brand-motion-fast);
  .siteheader--open & { transform: none; visibility: visible; transition: transform var(--brand-motion-fast) var(--brand-ease), visibility 0s; }
}
}
.about__intro {
  font-family: var(--heading-font-family);
font-size: var(--text-l);
line-height: var(--brand-leading-quote);
max-inline-size: 52ch;
}
.method__copy {
  display: flex;
flex-direction: column;
gap: var(--content-gap);
}
.plan__line {
  fill: none;
stroke: var(--primary-dark);
stroke-width: 0.9;
}
.event__text {
  font-size: var(--text-s);
color: var(--text-dark-muted);
}
.recog-note__text {
  font-family: var(--heading-font-family);
font-size: var(--h3);
line-height: var(--brand-leading-note);
}
.about__facts {
  display: grid;
gap: var(--space-xs);
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.marks__dot {
  fill: var(--bg-light);
stroke: currentColor;
stroke-width: 1.4;
}
.navtoggle__bar {
  display: block;
inline-size: var(--brand-burger-width);
block-size: calc(var(--border-width) * 2);
background: currentColor;
border-radius: var(--brand-pill);
transition: transform var(--brand-motion-fast) var(--brand-ease), opacity var(--brand-motion-fast) var(--brand-ease);
.siteheader--open &:nth-child(1) { transform: translateY(calc(var(--brand-burger-gap) + var(--border-width) * 2)) rotate(45deg); }
.siteheader--open &:nth-child(2) { opacity: 0; transform: scaleX(0); }
.siteheader--open &:nth-child(3) { transform: translateY(calc(-1 * (var(--brand-burger-gap) + var(--border-width) * 2))) rotate(-45deg); }
}
.routes__inner {
  container-type: inline-size;
}
.sitefoot__demo {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-s);
padding-block-start: var(--space-m);
border-block-start: var(--border-width) dashed var(--brand-rule);
}
.quote-card__quote {
  font-family: var(--heading-font-family);
font-style: italic;
font-size: var(--h3);
line-height: var(--brand-leading-note);
max-inline-size: 34ch;
}
.voice__inner {
  container-type: inline-size;
}