/* Life Shelf website styles
   Fonts: Source Serif 4 (headings) and Figtree (text), loaded from Google Fonts in each page's <head>.
   Brand palette from the Life Shelf logo package:
   slate #374047 (primary), deep brown #351F09, bronze #82562A (accent), olive #3D5114,
   blush #CBABAC, warm gray #B9B3AF, sage #9CA79A, stone #DADACB, cream #F4F0E8 (ground).
   Layout: photo-led, hairline lists instead of card grids, sentence-case labels
   (no uppercase letter-spaced eyebrows), no dark quote bands.
   Legibility for older eyes: body text 20px in the darker slate, nothing under 17px. */

:root {
  --slate: #374047;
  --slate-deep: #2C333A;
  --slate-text: #4A535B;
  --brown: #351F09;
  --bronze: #82562A;
  --button: #6E4520;  /* deeper bronze for buttons: cream text 7.3:1 (Fiona, Oct 29) */
  --link: var(--brown);  /* dark brown links, underlined: 13.7:1 on cream */
  --olive: #3D5114;
  --stone: #DADACB;
  --cream: #F4F0E8;
  --gray: #B9B3AF;
  --blush: #CBABAC;
  --sage: #9CA79A;
  --cream-alt: #EAE5DA;  /* the designer's alternate band, between cream sections */
  /* Color is used by role (designer plan, option 2): cream ground, slate text, bronze buttons,
     dark brown links, sage tint for the closing invitation, blush tint for client quotes,
     olive for at most one statement band per page, slate footer. */
  --blush-ground: #E6D2CD;
  --sage-ground: #D7DECF;
  --ink: var(--slate);
  --ink-2: #3E474E;
  --line: var(--stone);
  --paper: var(--cream);
  --heading-font: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --body-font: 'Figtree', 'Avenir Next', 'Helvetica Neue', sans-serif;
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body-font); font-size: 20px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; }  /* a light deterrent: images do not drag off the page */
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--bronze); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 3px;
}
input, select, textarea, button { font-family: inherit; }
h1, h2, h3, .serif { font-family: var(--heading-font); font-weight: 400; margin: 0; color: var(--ink); }
h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
h3, .h3 { font-size: 26px; line-height: 1.25; }
/* Avoid single-word last lines in paragraphs (current Chrome, Safari and Firefox; harmless elsewhere) */
p { margin: 0; color: var(--ink); text-wrap: pretty; }
.balance { text-wrap: balance; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 16px;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 2px; font-weight: 600; z-index: 100;
}
.skip-link:focus { left: 16px; color: var(--paper); }

/* Layout */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.row { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.row > * { min-width: 0; }
section { padding: 88px 0; }
section.tight { padding: 64px 0; }
.copy { display: flex; flex-direction: column; gap: 22px; }
.row > .copy { flex: 1 1 400px; }

/* Heading on the left, content on the right */
.split > .side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 18px; }
.split > .body { flex: 1 1 520px; }
.split > div.body { display: flex; flex-direction: column; gap: 20px; }
.split > .body > p { max-width: 40em; }
.split + .split { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }

/* Text */
.lede { font-size: 22px; line-height: 1.55; max-width: 34em; }
.statement { font-family: var(--heading-font); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.25; color: var(--ink); }
.meta { font-size: 17px; color: var(--ink-2); }
.cap { font-family: var(--heading-font); font-style: italic; font-size: 17px; color: var(--ink-2); max-width: 36em; }
a.text { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
a.text:hover { color: var(--bronze); }
a.quiet { color: inherit; text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: 8px 32px; }

/* Header */
header.top { padding: 26px 0; }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
header.top .logo img { height: 50px; width: auto; }
nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 17px; font-weight: 500; }
nav.main a { color: var(--ink); text-decoration: none; padding: 10px 0; }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--bronze); }
nav.main a.cta { padding: 12px 22px; font-size: 18px; }

/* Page openings */
.hero { padding: 24px 0 88px; }
.hero .row { align-items: center; }
.hero .photo { flex: 1 1 520px; }
.hero .copy { flex: 1 1 380px; gap: 26px; }
.intro { padding: 40px 0 72px; }
.intro .copy { max-width: 48em; }
.intro.thanks, .intro.notfound { min-height: 55vh; }

/* Photograph frames. Until the photographs exist, each frame carries a caption saying what goes there. */
.photo { aspect-ratio: 5 / 4; background: var(--stone); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 16px; }
.photo.portrait { aspect-ratio: 4 / 5; }
.photo.landscape { aspect-ratio: 3 / 2; }
.photo.panorama { aspect-ratio: 16 / 7; }
img.photo { padding: 0; object-fit: cover; width: 100%; }

/* Hairline lists */
.hairlist { list-style: none; margin: 0; padding: 0; }
.hairlist > li { padding: 26px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; }
.hairlist > li:last-child { border-bottom: 1px solid var(--line); }
.hairlist .name { flex: 0 1 280px; font-family: var(--heading-font); font-size: 26px; line-height: 1.25; color: var(--ink); }
.hairlist .desc { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.hairlist.sentences .name { flex: 1 1 320px; font-size: 28px; }
.hairlist .outcome { color: var(--ink); }

/* Two-column hairline grid (values, individual services, referral situations) */
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 48px; list-style: none; margin: 0; padding: 0; }
.grid2 > * { margin: -1px 0 0; padding: 22px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.grid2 dt { font-family: var(--heading-font); font-size: 24px; line-height: 1.25; color: var(--ink); }
.grid2 dd { margin: 0; font-size: 18px; color: var(--ink); }

/* Questions and answers */
dl.qa { margin: 0; }
dl.qa > div { padding: 24px 0; border-top: 1px solid var(--line); }
dl.qa > div:last-child { border-bottom: 1px solid var(--line); }
dl.qa dt { font-family: var(--heading-font); font-size: 24px; line-height: 1.3; color: var(--ink); }
dl.qa dd { margin: 8px 0 0; font-size: 18px; color: var(--ink); max-width: 40em; }

/* A large serif statement beside a paragraph */
.meaning .photo { flex: 1 1 100%; }
.meaning .photo + .row { margin-top: 36px; }
/* Full-width photograph across the whole window (the designer's request for the records) */
.meaning.full-photo { padding-top: 0; }
.photo.full { width: 100%; border: 0; aspect-ratio: 16 / 7; }
.photo.full + .wrap { margin-top: 48px; }
@media (min-width: 900px) { .photo.full { aspect-ratio: 3 / 1; } }
.meaning .big { flex: 1 1 380px; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.25; }
.meaning .row > p:last-child { flex: 1 1 420px; max-width: 34em; }

/* Testimonials */
.quote { background: var(--blush-ground); }
.quote .photo { flex: 0 1 360px; }
.quote blockquote { flex: 1 1 480px; margin: 0; display: flex; flex-direction: column; gap: 22px; max-width: 46em; }
.quote blockquote p { font-family: var(--heading-font); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; color: var(--ink); }
.quote.long blockquote p { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; }
.quote blockquote footer { font-size: 17px; color: var(--ink-2); }

/* Photograph beside text */
.pair .photo { flex: 1 1 420px; }
.pair .photo.portrait { flex: 0 1 400px; }
.pair .copy { flex: 1 1 400px; }

/* A small titled note beside or below the main text */
.note { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.row > .note { flex: 1 1 320px; }

/* Short factual list (credentials) */
.facts { list-style: none; margin: 8px 0 0; padding: 0; font-size: 18px; color: var(--ink); }
.facts li { padding: 12px 0; border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }

/* Ways to reach us */
.ways { display: flex; flex-direction: column; gap: 6px; font-family: var(--heading-font); font-size: 26px; }
.ways a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.ways a:hover { color: var(--bronze); }
.ways span { font-family: var(--body-font); font-size: 17px; color: var(--ink-2); margin-top: 10px; }

/* Invitations to get in touch: the closing section of each page, and mid-page ones */
.start, .invite { background: var(--sage-ground); }
.start .row { align-items: center; }
.start .copy { flex: 1 1 440px; gap: 18px; }
.start .ways { flex: 1 1 320px; }

/* Contact form */
.form { flex: 1 1 460px; display: flex; flex-direction: column; gap: 22px; padding: 40px 36px; background: #FFFFFF; border: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 17px; font-weight: 600; color: var(--ink); }
.field label span { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; height: 52px; padding: 0 14px; font-size: 18px; color: var(--ink); background: var(--paper); border: 1px solid var(--gray); border-radius: 2px; }
.field textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.fields { display: flex; flex-wrap: wrap; gap: 20px; }
.fields > .field { flex: 1 1 200px; min-width: 0; }
.submit { width: 100%; height: 56px; color: var(--cream); background: var(--button); border: 0; border-radius: 999px; font-weight: 500; font-size: 18px; cursor: pointer; }
.submit:hover { background: var(--brown); }
.form-note { font-size: 17px; color: var(--ink-2); }

/* FAQ (the groups are generated by tools/build_faq.py) */
.faq-jump { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-bottom: 32px; font-size: 17px; }
.faq-jump a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.faq-jump a:hover { color: var(--bronze); text-decoration-color: var(--bronze); }
section.faq-group { padding: 44px 0; border-top: 1px solid var(--line); }
section.faq-group:last-child { border-bottom: 1px solid var(--line); margin-bottom: 88px; }
.faq-group h2 { flex: 0 0 280px; font-size: clamp(26px, 2.4vw, 30px); }
.faq-group .qs { flex: 1 1 520px; }
.faq-group details { padding: 12px 0; border-bottom: 1px solid var(--line); }
.faq-group details:first-child { padding-top: 0; }
.faq-group summary { padding: 8px 0; }  /* a tap area of at least 44px per question */
.faq-group details:last-child { border-bottom: 0; padding-bottom: 0; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--heading-font); font-size: 23px; line-height: 1.3; color: var(--ink); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--body-font); font-size: 24px; line-height: 1; color: var(--bronze); flex: 0 0 auto; }
details[open] summary::after { content: "\2212"; }
summary:hover, details[open] summary { color: var(--bronze); }
details p { margin: 12px 0 4px; font-size: 19px; line-height: 1.65; max-width: 40em; }

/* An expandable section (Focused Projects on How We Can Help): the heading row opens it, and a link
   to its id opens it too (site.js) */
details.drop { padding-bottom: 40px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
details.drop > summary { position: relative; flex-wrap: wrap; justify-content: flex-start; gap: 8px 64px; padding: 4px 48px 4px 0; font-family: var(--body-font); font-size: 20px; color: var(--ink-2); }
details.drop > summary h2 { flex: 0 1 300px; }
details.drop > summary .hint { flex: 1 1 260px; }
details.drop > summary::after { position: absolute; right: 0; top: 0; font-size: 40px; }
details.drop > summary:hover h2, details.drop[open] > summary h2 { color: var(--bronze); }
.drop-body { display: flex; flex-direction: column; gap: 20px; max-width: 40em; padding-top: 28px; }
.drop-body p { margin: 0; font-size: 20px; line-height: 1.6; }
@media (min-width: 1000px) { .drop-body { margin-left: 364px; } }

/* Footer */
footer.foot { padding: 56px 0 44px; background: var(--slate); font-size: 17px; color: var(--stone); }
footer.foot .row { justify-content: space-between; gap: 24px 48px; }
footer.foot .brand { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
footer.foot .brand img { height: 48px; width: auto; align-self: flex-start; }
footer.foot p { max-width: 36em; color: var(--stone); }
footer.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
footer.foot a { color: var(--cream); text-decoration: none; }
footer.foot a:hover { color: var(--blush); }
footer.foot a:focus-visible { outline-color: var(--blush); }

/* Buttons: "Start a Conversation", the one action every page offers */
.button, nav.main a.cta { display: inline-block; border-radius: 999px; background: var(--button); color: var(--cream); font-family: var(--body-font); font-weight: 500; line-height: 1.25; text-decoration: none; }
.button { padding: 13px 24px; font-size: 18px; }
.button:hover, nav.main a.cta:hover, nav.main a.cta[aria-current="page"] { background: var(--brown); color: var(--cream); }

/* At most one olive band per page, for the key statement: cream text, cream buttons (no bronze on olive) */
.band { background: var(--olive); }
.band p, .band h2, .band h3, .band .serif, .band .name, .band dt, .band dd, .band .meta, .band .outcome { color: var(--cream); }
.band .hairlist > li, .band .grid2 > *, .band .note, .band dl.qa > div { border-color: rgba(244, 240, 232, 0.3); }
.band a, .band a.text { color: var(--cream); }
.band a.text { text-decoration-color: var(--blush); }
.band a:hover, .band a.text:hover { color: var(--blush); }
.band .button { background: var(--cream); color: var(--slate); }
.band .button:hover { background: var(--blush); color: var(--slate); }
.band :focus-visible { outline-color: var(--blush); }

/* Alternate band where three cream sections meet (designer) */
.alt { background: var(--cream-alt); }

/* The three ways in on the homepage: a simple dot (not the logo, per the designer), and the whole
   row lights up and is clickable on hover */
.hairlist.paths > li { position: relative; margin: 0 -20px; padding: 26px 20px; border-radius: 4px; transition: background-color 0.2s ease; }
.hairlist.paths .name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 14px; border-radius: 50%; background: var(--blush); vertical-align: 0.18em; }
.hairlist.paths a.text::after { content: ""; position: absolute; inset: 0; }
.band .hairlist.paths > li:hover, .band .hairlist.paths > li:focus-within { background: #4B611B; }
@media (prefers-reduced-motion: reduce) { .hairlist.paths > li { transition: none; } }

/* Package names that link to their own pages */
.hairlist .name a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.hairlist .name a:hover { color: var(--bronze); }

/* Simple bulleted lists and numbered steps */
.bullets { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 12px; }
.bullets li::marker { color: var(--bronze); }
.steps { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 12px; }
.steps li { padding-left: 6px; }
.steps li::marker { font-family: var(--heading-font); color: var(--bronze); }

/* A round photograph, echoing the circle of the logo */
.photo.round { aspect-ratio: 1; border-radius: 50%; object-position: 50% 42%; }
.quote .photo.round { flex: 0 1 340px; }
/* The cameo beside Mimi's words, cut out of its background */
.quote .brooch { flex: 0 1 280px; max-width: 280px; }
.quote .brooch img { width: 100%; }

/* Menu button: below 1280px wide (phones, tablets, small laptops) the nine menu items no longer
   fit beside the logo, so a Menu button opens them as a full-screen blush panel.
   Text and focus outlines on blush are dark brown (7.4:1; slate would be 5.0:1, bronze 3.0:1).
   Without JavaScript the links simply wrap under the logo. */
.menu-toggle { display: none; align-items: center; gap: 12px; position: relative; z-index: 60; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--blush); color: var(--brown); font-size: 18px; font-weight: 500; cursor: pointer; }
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; }
.menu-toggle .bars { position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle .bars::before { top: -6px; }
.menu-toggle .bars::after { top: 6px; }
nav.main .menu-phone { display: none; }
@media (max-width: 1279px) {
  .js .menu-toggle { display: inline-flex; }
  .js nav.main { display: none; }
  .js header.top .logo { position: relative; z-index: 60; }
  html.menu-open { overflow: hidden; }
  .menu-open .menu-toggle { background: var(--slate); color: var(--cream); }
  .menu-open .menu-toggle .bars { background: transparent; }
  .menu-open .menu-toggle .bars::before { top: 0; transform: rotate(45deg); }
  .menu-open .menu-toggle .bars::after { top: 0; transform: rotate(-45deg); }
  .js.menu-open nav.main { display: flex; position: fixed; inset: 0; z-index: 50; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; padding: 120px max(24px, env(safe-area-inset-right, 0px)) 48px max(24px, env(safe-area-inset-left, 0px)); overflow-y: auto; background: var(--blush); font-family: var(--heading-font); font-size: 32px; font-weight: 400; line-height: 1.2; }
  .js.menu-open nav.main::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 1; background: var(--blush); }
  .js.menu-open nav.main a { color: var(--brown); padding: 8px 0; }
  .js.menu-open nav.main a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .js.menu-open nav.main a.cta { margin-top: 20px; padding: 14px 26px; font-family: var(--body-font); font-size: 19px; color: var(--cream); text-decoration: none; }
  .js.menu-open nav.main .menu-phone { display: block; margin-top: 14px; font-family: var(--body-font); font-size: 20px; font-weight: 600; }
  .menu-toggle:focus-visible, .js.menu-open header.top a:focus-visible { outline-color: var(--brown); }
}

/* Phone width */
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  section { padding: 56px 0; }
  section.tight { padding: 48px 0; }
  .hero { padding: 8px 0 56px; }
  .intro { padding: 16px 0 48px; }
  header.top { padding: 18px 0; }
  header.top .logo img { height: 44px; }
  .split > .side, .faq-group h2 { flex-basis: 100%; }
  .split + .split { margin-top: 40px; padding-top: 40px; }
  .ways { font-size: 22px; }
  .form { padding: 28px 20px; }
  section.faq-group:last-child { margin-bottom: 56px; }
}

@media print {
  header.top, footer.foot, .skip-link, .start, .menu-toggle { display: none !important; }
  body { background: #fff; }
}