/* ==== site.css ==== */
/* House of Maevie: the whole design system, one file.
   Mobile first. Sizes are fluid between a 390px phone and a 1440px desktop, so tablet sizes
   come out right without their own rules; breakpoints are used only where the layout changes.
   Breakpoints: 768px (tablet, two columns start) and 1025px (desktop). */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Breathing'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/breathing.woff2) format('woff2'); }

/* ------------------------------------------------------------------ tokens */
:root {
  --greige: #EAE6E2;
  --ivory: #F6F4F1;
  --white: #FFFFFF;
  --ink: #3F3D44;
  --bronze: #8C735F;          /* the brand bronze: rules, links, large type */
  --bronze-text: #6E5A4A;     /* the same hue, dark enough for small text on light bands (WCAG AA) */
  --clay: #CBBBAE;
  --line: rgba(63, 61, 68, .18);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Breathing', 'Cormorant Garamond', cursive;

  --page: 1160px;              /* widest content; the header and footer bar run the full window width */
  --wide: 1160px;
  --text: 820px;               /* a comfortable reading measure */
  --gutter: clamp(20px, 4vw, 60px);
  --section: clamp(56px, 7vw, 110px);
  --gap: clamp(24px, 3.2vw, 48px);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--greige); color: var(--ink); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ type
   Eight roles, used everywhere. Each scales smoothly from phone to desktop. */
.display   { font: 400 clamp(30px, 1.9rem + 2.9vw, 64px)/1.1 var(--serif); letter-spacing: -.1px; }
.title     { font: 400 clamp(26px, 1.3rem + 1.9vw, 44px)/1.15 var(--serif); letter-spacing: -.1px; }
.subtitle  { font: 500 clamp(20px, 1.05rem + .75vw, 30px)/1.2 var(--serif); }
.card-title{ font: italic 400 clamp(20px, 1.15rem + .2vw, 22px)/1.2 var(--serif); }
.lead      { font: 400 clamp(17px, .95rem + .35vw, 20px)/1.65 var(--serif); }
.small     { font-size: 14px; line-height: 1.7; }
.label     { font: 500 12px/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-text); }
.script    { font: 400 28px/1 var(--script); text-transform: none; letter-spacing: 0; }
.num       { font: 400 18px/1 var(--serif); color: var(--bronze-text); }
.italic, .display.italic, .title.italic, .subtitle.italic, .lead.italic { font-style: italic; }
.upper { text-transform: uppercase; }
.cap { text-transform: capitalize; }
.center { text-align: center; }
.muted { color: rgba(63, 61, 68, .78); }
.prose a, .link { color: var(--bronze-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover, .link:hover { color: var(--ink); }
.prose h2 { font: 400 clamp(24px, 1.2rem + 1vw, 32px)/1.2 var(--serif); margin: 1.6em 0 .5em; }
.prose h3 { font: 500 clamp(20px, 1.1rem + .4vw, 24px)/1.25 var(--serif); margin: 1.4em 0 .4em; }
.prose h4 { font: 500 13px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; margin: 1.4em 0 .5em; }
.prose img { margin: 1.6em auto; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 13px; color: rgba(63, 61, 68, .75); margin-top: .5em; text-align: center; }
.prose ul, .prose ol { margin-bottom: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.6em 0; padding-left: 1.2em; border-left: 2px solid var(--clay); font: italic 400 20px/1.55 var(--serif); }

/* The underlined small-caps link that is the site's only button style. */
.btn-link { display: inline-block; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-text);
  text-decoration: none; padding: 12px 0 11px; border-bottom: 1px solid var(--bronze); transition: color .2s, border-color .2s; }
.btn-link:hover { color: var(--ink); border-color: var(--ink); }
.btn-link--script { font: 400 30px/1 var(--script); letter-spacing: 0; text-transform: none; padding: 6px 18px 10px; }
.bg-ink .btn-link { color: var(--clay); border-color: var(--clay); }
.stack > .btn-link { align-self: flex-start; }
.center > .btn-link, .stack.center > .btn-link { align-self: center; }

/* ------------------------------------------------------------------ bands and containers */
.band { padding: var(--section) var(--gutter); }
.band--tight { padding-block: calc(var(--section) * .6); }
.band--flush { padding-block: 0; }
.band--top0 { padding-top: 0; }
.band--bottom0 { padding-bottom: 0; }
.bg-greige { background: var(--greige); }
.bg-ivory { background: var(--ivory); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink); color: var(--ivory); }
.bg-ink .label { color: var(--clay); }
.wrap { max-width: var(--page); margin-inline: auto; }
.wrap--wide { max-width: var(--wide); margin-inline: auto; }
.wrap--text { max-width: var(--text); margin-inline: auto; }
.wrap--narrow { max-width: 640px; margin-inline: auto; }
.rule { border-top: 1px solid var(--line); }
.rule-short { width: 80px; border: 0; border-top: 1px solid var(--bronze); margin: 8px auto; }

/* Vertical rhythm inside a block. */
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--tight { gap: 12px; }
.stack--loose { gap: clamp(28px, 3vw, 44px); }
.stack.center { align-items: center; }

/* Columns: one column on phones, the named split from 768px (or 1025px with --lg). */
.cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.cols--middle { align-items: center; }
@media (min-width: 768px) {
  .cols--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--4   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--5   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .cols--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .cols--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (min-width: 1025px) {
  .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 767px) { .cols--reverse-mobile > :first-child { order: 2; } }

/* Photos */
.photo { width: 100%; object-fit: cover; }
.photo--hero { aspect-ratio: 16 / 9; }
.photo--wide { aspect-ratio: 21 / 9; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--square { aspect-ratio: 1; }
.photo--landscape { aspect-ratio: 3 / 2; }
@media (max-width: 767px) { .photo--hero, .photo--wide { aspect-ratio: 4 / 5; } }
.round { border-radius: 50%; }
.ornament { width: 72px; height: auto; margin-inline: auto; opacity: .9; }

/* ------------------------------------------------------------------ header */
.site-header { background: var(--greige); border-bottom: 1px solid var(--line); padding: 16px var(--gutter) 10px; }
.site-header__inner { max-width: none; margin-inline: auto; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 14px; }
.brand img { width: auto; }
.brand__word { display: none; height: clamp(120px, 12vw, 175px); }
.brand__mark { height: 132px; }
.site-social { display: flex; gap: 22px; order: 3; list-style: none; margin: 0; padding: 0; }
.link-clay { color: var(--clay) !important; text-decoration: underline; text-underline-offset: 3px; }
.site-social a { display: grid; place-items: center; width: 24px; height: 24px; color: var(--bronze-text); }
.site-social svg { width: 15px; height: 15px; fill: currentColor; }
.site-search { display: flex; order: 4; align-items: center; justify-content: center; gap: 6px; }
.nav { width: 100%; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; }
.nav__link { display: inline-block; padding: 10px 0 8px; font: 500 13px/1.3 var(--sans); letter-spacing: .1px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; }
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--bronze); color: var(--bronze-text); }
@media (min-width: 1025px) {
  .site-header { padding-top: 26px; padding-bottom: 37px; }
  .site-header__inner { grid-template-columns: 1fr auto 1fr; align-items: start; gap: 30px 20px; }
  .site-social { order: 0; justify-self: start; padding-top: 0; gap: 12px; }
  .site-social a { width: 34px; height: 34px; }
  .brand { grid-column: 2; }
  .brand__word { display: block; }
  .brand__mark { display: none; }
  .site-search { order: 0; justify-self: end; gap: 6px; padding-top: 0; }
  .nav { grid-column: 1 / -1; }
  .nav ul { gap: 4px 34px; }
  .nav__link { font-size: 14px; padding: 13px 0 12px; }
}
.site-search input { width: 200px; border: 1px solid var(--line); background: var(--ivory); border-radius: 20px; padding: 6px 12px; font-size: 12px; }
.site-search input::placeholder { color: rgba(63, 61, 68, .6); }
.site-search button { border: 0; background: none; padding: 0 2px; cursor: pointer; font: 400 26px/1 var(--script); color: var(--bronze-text); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--ink); color: var(--ivory); padding: clamp(48px, 6vw, 80px) var(--gutter) 0; font-size: 13px; }
.site-footer a { color: inherit; }
.site-footer__cols { max-width: 1140px; margin-inline: auto; display: grid; gap: 44px; text-align: center; justify-items: center; }
.site-footer .script { font-size: 28px; color: var(--ivory); margin-bottom: 18px; }
.site-footer nav ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.site-footer nav a { font: 500 13px/1.3 var(--sans); letter-spacing: 1.3px; text-transform: uppercase; text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a[aria-current="page"] { color: var(--clay); }
.site-footer .site-social { justify-content: center; order: 0; }
.site-footer .site-social a { color: var(--ivory); }
.footer-mark { width: min(300px, 80%); margin: 0 auto 18px; }
.footer-studio p { margin-bottom: 14px; line-height: 1.65; }
.footer-studio a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__base { max-width: none; margin: 48px auto 0; padding: 20px 0; border-top: 1px solid rgba(246, 244, 241, .12);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font: 400 12px/1.4 var(--sans); letter-spacing: .1px; text-transform: uppercase; }
.site-footer__base a { text-decoration: none; }
.site-footer__base a:hover { color: var(--clay); }
@media (min-width: 768px) {
  .site-footer__cols { grid-template-columns: 1fr 2fr 1fr; align-items: start; }
}
@media (max-width: 767px) { .site-footer__base { justify-content: center; text-align: center; } }

/* ------------------------------------------------------------------ components */
/* Numbered feature (01 / heading / text) with a rule above. */
.feature { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.feature .num { margin-bottom: 8px; }

/* White card with a soft shadow (city pages, services). */
.card { background: var(--white); border-radius: 8px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 1px 2px rgba(63, 61, 68, .06), 0 8px 24px rgba(63, 61, 68, .06); display: flex; flex-direction: column; gap: 14px; }
.card--flat { box-shadow: none; }
.card .btn-link { margin-top: auto; align-self: flex-start; }
.panel { background: var(--ivory); border-radius: 12px; padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 80px); }
.bg-ivory .panel { background: var(--white); }

/* Quote */
.quote { font: italic 400 clamp(18px, 1rem + .4vw, 22px)/1.5 var(--serif); margin: 0; }
.quote-by { margin-top: 20px; }

/* Area chips on city pages */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 18px 12px; text-align: center; text-decoration: none; transition: border-color .2s, transform .2s; }
.chip:hover { border-color: var(--bronze); transform: translateY(-1px); }
.chip .card-title { font-size: 19px; display: block; margin-bottom: 6px; }
.chip .label { font-size: 10px; }

/* Inline list of places, separated by thin dots */
.inline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.inline-list a { text-decoration: none; }
.inline-list a:hover { color: var(--bronze-text); }

/* FAQ accordion (native details: works without script, keyboard and screen reader friendly) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font: 400 clamp(18px, 1rem + .4vw, 21px)/1.35 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 22px/1 var(--sans); color: var(--bronze-text); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 0 20px; }

/* Project gallery (lightbox via site.js; plain links without script) */
/* Photos keep their own shape (nothing cropped) in balanced columns. */
.gallery { columns: 1; column-gap: 16px; }
@media (min-width: 768px) { .gallery { columns: 2; } }
.gallery a { display: block; overflow: hidden; break-inside: avoid; margin-bottom: 16px; }
.gallery img { width: 100%; height: auto; transition: transform .6s ease; }
.gallery a:hover img { transform: scale(1.02); }

/* Project tiles on Selected Projects */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 40px) var(--gap); }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.tile img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: opacity .3s; }
.tile:hover img { opacity: .92; }

/* Journal cards */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px var(--gap); }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; gap: 12px; position: relative; }
.post-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-card:hover .post-card__title a, .post-card:focus-within .post-card__title a { color: var(--bronze-text); }
.post-card:hover .btn-link { color: var(--ink); border-color: var(--ink); }
.post-card .post-card__title, .post-card .small { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .post-card__title { -webkit-line-clamp: 3; }
.post-card .small { -webkit-line-clamp: 3; }
.post-card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card__img { margin-bottom: 6px; }
.post-card__title { font: 400 clamp(22px, 1.2rem + .5vw, 28px)/1.2 var(--serif); }
.post-card__title a { text-decoration: none; }
.post-card .btn-link { align-self: flex-start; margin-top: auto; }

/* Home journal carousel: scroll-snap, arrows are a convenience. */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.post-card--wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
@media (min-width: 768px) {
  .carousel { padding-inline: 48px; }
  .post-card--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 75px); align-items: center; }
  .post-card--wide .post-card__img { grid-row: 1 / span 5; margin: 0; }
}
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; cursor: pointer; display: none; color: var(--ink); }
.carousel__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }
@media (min-width: 768px) { .carousel__btn { display: block; } }

/* Hero slideshow: stacked photos that cross-fade. */
.slideshow { position: relative; overflow: hidden; }
.slideshow img { width: 100%; height: 100%; object-fit: cover; }
.slideshow > :not(:first-child) { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease; }
.slideshow > .is-on { opacity: 1; }

/* Newsletter panel */
.newsletter { max-width: 900px; margin-inline: auto; background: var(--ivory); border-radius: 12px; padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 56px); text-align: center; }
.newsletter .ff-form-slot { margin-top: 20px; min-height: 60px; }

/* Lightbox */
/* The photo enlarges in a framed card over the page, and the website stays visible behind a light
   veil, so a visitor never feels they left the site (Susanne, 2026-09-26). Close, a tap on the veil,
   Escape or the phone back button shrinks it again. */
.lightbox { border: 0; padding: 10px; background: var(--ivory); width: fit-content; height: fit-content; max-width: min(92vw, 1100px); max-height: 88vh; overflow: visible; box-shadow: 0 18px 60px rgba(28, 27, 31, .28); }
.lightbox::backdrop { background: rgba(63, 61, 68, .38); }
.lightbox img { display: block; max-width: calc(min(92vw, 1100px) - 20px); max-height: calc(88vh - 20px); width: auto; height: auto; margin: 0; object-fit: contain; }
.lightbox button { position: absolute; cursor: pointer; border: 0; background: var(--ivory); color: var(--ink); box-shadow: 0 2px 10px rgba(28, 27, 31, .18); }
.lightbox .lb-close { top: -16px; right: -16px; display: flex; align-items: center; gap: 6px; padding: 9px 14px 9px 12px; border-radius: 20px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.lightbox .lb-close span { font: 300 20px/1 var(--sans); letter-spacing: 0; }
@media (max-width: 767px) { .lightbox .lb-close { top: -46px; right: 0; } }
.lightbox--one .lb-prev, .lightbox--one .lb-next { display: none; }
/* phones do not open photos (site.js), so the links do not look tappable there either */
@media (max-width: 767px) { .gallery a, a.svc-primary__photo { cursor: default; -webkit-tap-highlight-color: transparent; } }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; font: 300 28px/1 var(--sans); padding: 0 0 4px; }
.lightbox .lb-prev { left: 18px; }
.lightbox .lb-next { right: 18px; }

/* Gentle entrance, only when the browser supports it and the visitor allows motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ contact form */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 767px) { .form { grid-template-columns: minmax(0, 1fr); } .form > * { grid-column: 1 / -1; } }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  width: 100%; border: 1px solid transparent; background: var(--white); border-radius: 2px; padding: 11px 12px; font-size: 14px; line-height: 1.4; }
.form textarea { min-height: 96px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: rgba(63, 61, 68, .55); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--bronze); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend, .form .field-label { font-size: 14px; margin-bottom: 8px; padding: 0; }
.form .req { color: #9b3b3b; }
.form .choices { display: grid; gap: 6px; font-size: 14px; }
.form .choices label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form .choices input { accent-color: var(--bronze); margin: 0; width: 15px; height: 15px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .submit { border: 0; background: none; cursor: pointer; justify-self: start; }
.form .is-bad { border-color: #9b3b3b !important; }
.form fieldset.is-bad legend { color: #9b3b3b; }
.form-status { grid-column: 1 / -1; font-size: 14px; min-height: 1.4em; }
.form-status.ok { font: italic 400 22px/1.4 var(--serif); color: var(--bronze-text); }
.form-status.bad { color: #9b3b3b; }
.form-done .form > :not(.form-status) { display: none; }

/* ------------------------------------------------------------------ search page */
/* The search page wears the header search: a rounded ivory box and the bronze script word, never a
   phone's own blue button (Susanne, 2026-09-26). */
.search-box { display: flex; gap: 12px; align-items: center; }
.search-box input { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--ivory); border-radius: 24px; padding: 10px 18px; font: 400 20px/1.3 var(--serif); color: var(--ink); }
.search-box input:focus { outline: none; border-color: var(--bronze); }
.search-box button { -webkit-appearance: none; appearance: none; border: 0; background: none; border-radius: 0; padding: 0 2px; cursor: pointer; font: 400 30px/1 var(--script); letter-spacing: 0; text-transform: none; color: var(--bronze-text); }
.search-box input::-webkit-search-cancel-button, .site-search input::-webkit-search-cancel-button, .search-box input::-webkit-search-decoration { -webkit-appearance: none; }
.site-search input, .site-search button { -webkit-appearance: none; appearance: none; }
.search-results { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 26px; }
.search-results a { text-decoration: none; }
.search-results h2 { font: 400 24px/1.25 var(--serif); margin-bottom: 4px; }

/* ------------------------------------------------------------------ journal post */
.post__hero { width: 100%; max-width: 680px; margin-top: 8px; }
.post__body { font-size: 15px; line-height: 1.75; }
.post__body > blockquote:first-child { font-size: 18px; margin-top: 0; }
.prose blockquote.pull { border-left: 1px solid var(--clay); padding: 4px 0 4px 22px; margin: 2em 0; font-size: clamp(18px, 1rem + .3vw, 20px); color: rgba(63, 61, 68, .9); }
.post__foot { margin-top: clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: 32px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.post-nav__link { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.post-nav__link--next { text-align: right; }
.post-nav__link:hover .card-title { color: var(--bronze-text); }
.post__foot .btn-link--script { align-self: flex-start; padding-left: 0; }

/* ------------------------------------------------------------------ page header
   One pattern on every page: a small label, the title, an optional one-line intro, then the
   same gap before the content. The first section of every page starts the same distance
   below the site header. Do not give a page its own top spacing or title size. */
:root { --page-top: clamp(48px, 5.5vw, 80px); --head-gap: clamp(36px, 4.5vw, 64px); }
main > :first-child { padding-top: var(--page-top); }
.page-head { width: 100%; max-width: 1080px; margin: 0 auto var(--head-gap); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.page-head > * { margin: 0; }
.page-head__intro { font: 400 clamp(17px, .95rem + .35vw, 20px)/1.6 var(--serif); color: rgba(63, 61, 68, .85); max-width: 660px; }


/* ------------------------------------------------------------------ wide screens
   The header runs the full window width with the same side margin at every size.
   A hero photo marked .hero-wide grows with the window on desktop (79% of it, as on the
   original site) while everything else stays at the content width. */
@media (min-width: 1025px) {
  .site-header { padding-inline: 70px; }
  .site-footer__base { margin-inline: -20px; }
  .hero-wide { width: 79vw; max-width: none; margin-inline: calc(50% - 39.5vw); }
  .site-search input { height: 40px; width: clamp(120px, calc(16.7vw - 126px), 260px); }
}

/* Tablets show the full wordmark, as on the original site; phones keep the monogram. */
@media (min-width: 768px) {
  .brand__word { display: block; }
  .brand__mark { display: none; }
}

/* Header tools: search and the Client Portal button. Stacked and centered on phones and tablets,
   at the top right under each other on desktop. */
.header-tools { order: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* The social icons with the Client Portal button directly under them, exactly as wide as the row. */
.header-left { order: 3; display: grid; justify-items: stretch; gap: 10px; width: max-content; }
.header-left .site-social { order: 0; justify-content: space-between; }
.portal-link { display: block; text-align: center; padding: 9px 16px 8px; border: 1px solid var(--bronze); border-radius: 2px; color: var(--bronze-text); text-decoration: none; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; transition: background .2s, color .2s; }
.portal-link:hover { background: var(--bronze); color: var(--ivory); }
@media (min-width: 1025px) {
  .header-tools { order: 0; justify-self: end; align-items: flex-end; gap: 12px; }
  .header-left { order: 0; justify-self: start; align-self: start; }
}

/* Share this page: a quiet bronze text button with a small share mark (Susanne, 2026-09-26) */
.share-link { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 0 9px; border: 0; border-bottom: 1px solid var(--bronze); border-radius: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-text); }
.share-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.share-link:hover { color: var(--ink); border-color: var(--ink); }
.project__head .share-link { align-self: center; }
.post__foot .share-link { align-self: flex-start; }
.header-tools .share-link { padding: 4px 0 5px; }

/* ==== about.css ==== */
/* About (Meet the Team). Every rule is scoped to .page-about or an about- class. */

/* Story and founder: text beside a portrait photo, photo capped so it never outgrows the text. */
.about-photo { aspect-ratio: 2 / 3; width: min(100%, 380px); justify-self: center; }
/* the founder portrait is the same size as the team portraits below (Susanne, 2026-09-24) */
.about-photo--founder { aspect-ratio: 3 / 4; width: min(100%, 350px); }
@media (max-width: 767px) { .about-photo { width: min(80%, 340px); } .about-photo--founder { width: min(80%, 320px); } }
@media (min-width: 768px) {
  .about-story { column-gap: clamp(32px, 6vw, 96px); }
  .about-story .about-photo--story { justify-self: end; }
  .about-founder { column-gap: clamp(32px, 3vw, 44px); }
  .about-founder .about-photo--founder { justify-self: start; }
}
.about-divider { margin-block: clamp(40px, 5vw, 64px); border-top-color: rgba(63, 61, 68, .45); }
.about-role { color: var(--bronze-text); margin-top: -6px; }

/* Team: three portraits, one per row on phones. */
.about-team { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 4vw, 48px) var(--gap);
  grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (min-width: 768px) { .about-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-member { width: min(100%, 350px); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 767px) { .about-member { width: min(80%, 320px); } }
.about-member__photo { aspect-ratio: 3 / 4; }
.about-member__name { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; text-align: center; }
.about-member__who { font: 400 clamp(20px, 1.1rem + .3vw, 23px)/1.2 var(--serif); }
.about-member__role { font: italic 400 clamp(18px, 1rem + .2vw, 20px)/1.2 var(--serif); color: var(--bronze-text); }
/* a straight bronze divider between the name and the role (Susanne, 2026-09-24) */
.about-member__name { align-items: center; }
.about-member__role { display: flex; align-items: center; gap: 14px; }
.about-member__role::before { content: ""; width: 1px; height: 1.1em; background: var(--bronze); flex: none; }

.about-areas { letter-spacing: .12em; }
.about-where a { text-decoration: none; }
.about-where a:hover { color: var(--bronze-text); }

/* ==== city.css ==== */
/* City landing pages: the nine "Interior Designer in <City>" pages share this one template. */

/* Hero photo sits on the greige band directly under the header and runs into the intro. */
.city-hero { padding-bottom: 0; }
.city-hero__photo { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .city-hero__photo { aspect-ratio: 16 / 9; } }
@media (min-width: 1025px) { .city-hero__photo { aspect-ratio: 2 / 1; } }

/* The intro and the local section read as one wide centered column, like the live pages. */
.city-measure { max-width: var(--text); margin-inline: auto; }

/* Section heading: small label over an italic title, centered. */
.city-head { margin-bottom: clamp(4px, 1vw, 12px); }

/* Designing in <City>: serif subheads between the paragraphs. */
.city-local h3 { font: 400 clamp(22px, 1.1rem + .9vw, 30px)/1.25 var(--serif); margin: 1.3em 0 .5em; }

/* Service cards: same height, the investment line and the link sit at the foot of each card. */
.city-cards { align-items: stretch; }
.city-cost { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 13px; color: var(--bronze-text); }
.city-cards .card .btn-link { margin-top: 6px; }

/* Process steps are an ordered list laid out on the shared column grid. */
.city-steps { list-style: none; padding: 0; margin: 0; }

/* Areas served chips: the whole chip is the link target. */
.city-chips { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 920px; }
.city-chips .chip { position: relative; }
.city-chips .chip a { text-decoration: none; }
.city-chips .chip a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.city-chips .chip:hover .card-title { color: var(--bronze-text); }

/* Closing call to action panel. */
.city-cta { max-width: 900px; margin-inline: auto; }

/* ==== contact.css ==== */
/* Contact page */
.contact__photo { max-width: 560px; justify-self: center; }
@media (max-width: 767px) { .contact__photo { aspect-ratio: 4 / 3; object-fit: cover; } }
.contact__note { margin-top: clamp(48px, 6vw, 80px); gap: 0; color: rgba(63, 61, 68, .8); }
.contact__faq { margin-top: clamp(40px, 5vw, 64px); }

/* the intro runs the full width of the photo and form below it (Susanne, 2026-09-26) */
.contact .page-head, .contact .page-head__intro { max-width: none; }

/* ==== home.css ==== */
/* Home page. Shared pieces (btn-row, rule-list, ornament--lg) live here until a second page uses them. */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; }
.center .btn-row, .btn-row.center { justify-content: center; }
.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rule-list li:first-child { border-top: 1px solid var(--line); }
.ornament--lg { width: clamp(90px, 9vw, 120px); }

.home-hero__photo { aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .home-hero__photo { aspect-ratio: 4 / 5; } }
.home-intro { margin-top: clamp(36px, 5vw, 72px); align-items: start; }
.home-trio a { display: block; }
.home-trio img { transition: opacity .3s; }
.home-trio a:hover img { opacity: .92; }
.home-portrait { max-width: 220px; justify-self: center; }
.home-quote { gap: 26px; }
.home-quote hr { width: 100%; }

/* the long bronze line above the testimonial leaf runs exactly as wide as the journal carousel
   above it: from the photo on the left to the end of the article on the right (Susanne, 2026-09-26) */
.home-quote__rule hr { border-top-color: var(--bronze); }
@media (min-width: 768px) { .home-quote__rule { padding-inline: 48px; } }
.home-quote__rule + .home-quote { margin-top: 20px; }
/* Read article keeps the same short underline as every other button: only as wide as its words,
   not stretched across the card (Susanne, 2026-09-26) */
.post-card--wide .btn-link { justify-self: center; }
/* the Journal page's featured card is left aligned, so its button lines up with its text */
.post-card--featured .btn-link { justify-self: start; }

/* ==== journal.css ==== */
/* Journal index */
.post-card--featured, .post-card--boxed { background: var(--ivory); border-radius: 8px; padding: clamp(16px, 2.4vw, 36px); }
.post-card--featured .post-card__img { margin: 0; }
.post-card--boxed { padding: 14px 14px 22px; gap: 10px; }
.post-card--boxed .post-card__img { margin: 0 0 4px; }
.post-card--boxed .post-card__title { font-size: clamp(20px, 1.1rem + .3vw, 22px); }

/* Privacy policy and other long legal text */
.legal hr { margin: 2em 0; }
.legal h2 { margin-top: 0; }

/* Credit line under a journal post's header photo (photos from other designers) */
.post__hero-fig { margin: 8px 0 0; width: 100%; max-width: 680px; }
.post__hero-fig .post__hero { margin-top: 0; }
.post__credit { margin-top: 8px; font-size: 12px; color: rgba(63, 61, 68, .72); text-align: center; }
.post__credit a { color: inherit; text-underline-offset: 2px; }

/* The featured post sits apart from the grid; grid cards are all one size. */
.post-card--featured { margin-bottom: clamp(32px, 4vw, 56px); }
.post-card--boxed { height: 100%; }
.post-grid { align-items: stretch; }

/* The Journal intro is one line wherever it fits; on a narrow screen it breaks into even lines,
   never one word alone on the last line (Susanne, 2026-09-28). */
.page-blog .page-head__intro { max-width: none; text-wrap: balance; }

/* ==== project.css ==== */
/* Portfolio: the Selected Projects index and the project pages, which all share one structure. */

/* The small uppercase line under a title (the index intro, each project's type and place).
   It is an h4 on some pages and a p on others, so the look lives on the class, not the tag. */
.project-line { font: 500 12px/1.6 var(--sans); letter-spacing: .15em; text-transform: uppercase; max-width: 64em; }

/* Index */
.tile__title { font-weight: 400; transition: color .2s; }
.tile:hover .tile__title { color: var(--bronze-text); }

/* Project header: back link, title, project line, description, details, full story link. */
.project__back { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.project__back:hover { color: var(--ink); }
.project__head .project-line { margin-bottom: clamp(8px, 1.5vw, 20px); }
.project__text { font-size: 15px; line-height: 1.8; }
.project__details { margin-top: 4px; }
/* the Photography label reads like the project line under the title: small, regular, uppercase */
.project-credit { font: 500 12px/1.6 var(--sans); letter-spacing: .15em; text-transform: uppercase; margin-right: 6px; }
.project__details p:first-child { margin-bottom: .6em; }

/* Photos: credit, the square gallery, then the way back to the index. */
.project__photos .stack { gap: 16px; }
.project__more { margin-top: clamp(40px, 6vw, 84px); }

/* Sections under the Selected Projects tiles: services, areas and the closing call to action */
.portfolio-services .card { background: var(--ivory); height: 100%; }
.portfolio-services { align-items: stretch; }
.portfolio-cta { max-width: 900px; margin-inline: auto; }
.portfolio-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .portfolio-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A design rendering shown among finished photos is labeled as one. */
.gallery a.is-rendering { position: relative; }
.gallery a.is-rendering::after { content: 'Rendering'; position: absolute; left: 12px; top: 12px; padding: 5px 10px 4px; background: rgba(246, 244, 241, .92); color: var(--ink); font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; border-radius: 2px; pointer-events: none; }

/* The project header and its photos read as one piece: only the header gap separates them. */
.band.project { padding-bottom: 0; }
/* flow-root keeps the header's bottom margin inside the white band; without it the margin
   collapsed out and let the greige page background show as a stripe above the photos. */
.band.project { display: flow-root; }

/* ==== services.css ==== */
/* Services. Every rule is scoped to an svc- class. */

/* Large italic serif number used by the three lists on the page (why us, first steps, process). */
.svc-num { font: italic 400 clamp(22px, 1.2rem + .4vw, 26px)/1 var(--serif); color: var(--bronze-text); }

/* Hero: headline, one line of standfirst, then the kitchen photo at full natural ratio. */
.svc-hero__sub { max-width: 760px; }
/* Work with us: a smaller portrait photo beside the text (Susanne, 2026-09-26; it replaced the wide kitchen hero) */
.svc-work__photo { aspect-ratio: 3 / 4; width: min(100%, 420px); justify-self: center; }
@media (max-width: 767px) { .svc-work__photo { width: min(80%, 340px); } }

/* Why clients choose us: number, rule, heading, text (the rule sits under the number here). */
.feature.svc-why { border-top: 0; padding-top: 0; }
.svc-why hr { border-top-color: rgba(63, 61, 68, .5); margin-bottom: 8px; }
.svc-why .svc-num { margin-bottom: 0; }

/* Testimonial */
.svc-quote { gap: 24px; }
.svc-quote .ornament { width: 60px; }
.svc-quote__rule { width: 160px; border-top-color: var(--bronze); margin-top: clamp(24px, 3vw, 40px); }

.svc-big { font-size: clamp(28px, 1.3rem + 2.2vw, 50px); }

/* Service blocks: copy, a short rule, the investment line in serif, then the link. */
.svc-offer { max-width: 520px; }
.svc-offer__rule { width: min(100%, 370px); border-top-color: rgba(63, 61, 68, .5); margin-block: 14px 4px; }
.svc-invest { font: 400 clamp(16px, .9rem + .2vw, 17px)/1.55 var(--serif); }
.svc-invest b, .svc-invest strong { font-weight: 700; }
.svc-primary__photo { display: block; }
.svc-primary__photo img { aspect-ratio: 3 / 4; }
@media (min-width: 768px) {
  .svc-primary { column-gap: clamp(32px, 6vw, 96px); }
  .svc-primary .svc-offer { justify-self: end; }
  .svc-pair { column-gap: clamp(32px, 5vw, 72px); }
}

.svc-also__art { width: clamp(100px, 10vw, 140px); height: auto; }
.svc-also hr { width: 100%; margin-top: 4px; }

/* Where to start: two numbered first steps between rules. */
.svc-start__rule { width: 100px; border-top-color: var(--bronze); margin-top: -8px; }
.svc-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.svc-step .svc-num { padding-top: 6px; font-size: 20px; }
@media (min-width: 768px) { .svc-step { grid-template-columns: 70px minmax(0, 1fr); } .svc-step .svc-num { text-align: center; } }

/* Process: five numbered steps, each under a rule. */
.svc-process { list-style: none; margin: 0; padding: 0; }
.svc-process .feature { gap: 10px; }

.svc-areas { letter-spacing: .12em; }

/* Closing call to action */
.svc-cta { max-width: 900px; margin-inline: auto; text-align: center; }
.svc-where a { text-decoration: none; }
.svc-where a:hover { color: var(--bronze-text); }

/* ==== tools.css ==== */
/* ------------------------------------------------------------------ planning tools
   The Planning Tools page and one page per calculator. Every page states its numbers in plain text
   as well as in the calculator, so search engines and AI tools can read and quote them. */

/* the trail at the top of a calculator page */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 0 auto 22px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: rgba(63, 61, 68, .6); }
.byline { font: 400 13px/1.5 var(--sans); color: rgba(63, 61, 68, .75); }
.byline a { color: var(--bronze-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the four tools on the Planning Tools page */
.tool-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px var(--gap); }
@media (min-width: 768px) { .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .tool-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tool-card { display: flex; flex-direction: column; gap: 10px; height: 100%; text-decoration: none; }
.tool-card .small { margin-bottom: 8px; }
.tool-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 8px; transition: opacity .3s; }
.tool-card:hover img { opacity: .92; }
.tool-card__title { font: 400 clamp(22px, 1.2rem + .45vw, 27px)/1.2 var(--serif); }
.tool-card:hover .tool-card__title { color: var(--bronze-text); }
.tool-card .btn-link { align-self: flex-start; margin-top: auto; }

/* the calculator itself, sitting in the page; it tells the page its height as it changes */
.calc-frame { display: block; width: 100%; height: 760px; border: 0; background: transparent; }
@media (max-width: 767px) { .calc-frame { height: 1100px; } }

/* the direct answer, then the same numbers as a table */
.answer { border-left: 1px solid var(--bronze); padding-left: clamp(18px, 2.4vw, 28px); }
.answer b { font-weight: 500; color: var(--ink); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cost-table { width: 100%; min-width: 560px; border-collapse: collapse; font: 400 15px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
.cost-table th, .cost-table td { text-align: left; padding: 14px 16px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cost-table thead th { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-text); padding-top: 0; }
.cost-table tbody th { font: 400 20px/1.25 var(--serif); }
.cost-table tbody th small { display: block; margin-top: 3px; font: 400 12.5px/1.45 var(--sans); color: rgba(63, 61, 68, .72); }
.cost-table td.num-cell { white-space: nowrap; }
.cost-table a { color: var(--bronze-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* keep planning: the tools that come next */
.keep-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .keep-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.keep-card { background: var(--white); border-radius: 8px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; box-shadow: 0 1px 2px rgba(63, 61, 68, .06), 0 8px 24px rgba(63, 61, 68, .06); transition: transform .2s, box-shadow .2s; }
.keep-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(63, 61, 68, .06), 0 14px 30px rgba(63, 61, 68, .1); }
.keep-card .card-title { font-size: 23px; font-style: normal; }
.keep-card .btn-link { margin-top: auto; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .keep-card, .keep-card:hover { transition: none; transform: none; } }

/* send the plan: the summary from the calculator, above the studio's usual short form */
.plan-box { background: var(--ivory); border-radius: 8px; padding: 20px 22px; font-size: 14px; }
.plan-box dl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; }
.plan-box dt { color: rgba(63, 61, 68, .72); }
.plan-box dd { margin: 0; }
.plan-box .plan-empty { margin: 0; font: italic 400 18px/1.45 var(--serif); color: rgba(63, 61, 68, .75); }
.plan-box .plan-next { margin: 12px 0 0; font-size: 13px; color: rgba(63, 61, 68, .75); }
.plan-box .plan-next:empty { display: none; }
#send.has-plan .plan-box { box-shadow: inset 0 0 0 1px var(--bronze); }

/* the home page's pointer to the tools */
.home-tools__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.home-tools__list li { border-bottom: 1px solid var(--line); }
.home-tools__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 16px 0; text-decoration: none; }
.home-tools__list .card-title { font-style: normal; font-size: clamp(20px, 1.1rem + .4vw, 24px); }
.home-tools__list .small { grid-column: 1; color: rgba(63, 61, 68, .78); }
.home-tools__list svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; fill: none; stroke: var(--bronze); stroke-width: 1.2; transition: transform .25s; }
.home-tools__list a:hover .card-title { color: var(--bronze-text); }
.home-tools__list a:hover svg { transform: translateX(4px); }

/* a quiet pointer to a tool inside a journal post */
.prose .post-tool { margin: 2em 0; padding: 20px 24px; background: var(--ivory); border-radius: 8px; font-size: 15px; }
.prose .post-tool b { font-weight: 500; }

/* the line on each project page that points to the calculator */
.project__tool { margin-top: 8px; color: rgba(63, 61, 68, .8); }
.project__tool a { color: var(--bronze-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }