/* Our method (our-method.html). Builds on styles.css; the Where to Begin doors come
   from our-story.css. Scoped to main.our-method. */

.our-method .narrow h2 { margin-bottom: .6em; }
.our-method .lede { font-family: var(--font-head); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--ink); text-wrap: balance; }

/* Opening */
.method-open { text-align: center; padding-top: clamp(28px, 4vw, 56px); padding-bottom: 24px; }
.method-open .fleuron { display: block; margin: 0 auto 10px; }
.method-open .eyebrow { margin-bottom: 6px; }
.method-open h1 { margin: 0 auto .4em; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; }
.method-open .lede { margin-bottom: 1em; }
.method-open p:last-child { color: var(--ink-soft); }


/* The Living Lab opens on its lede, fellow travelers */
.approach .lede { margin-bottom: .8em; }

/* The Living Lab: elsewhere / here, side by side on a wide screen, stacked on a phone.
   Each pair is parallel: what others offer, then "Here...". */
.contrasts { list-style: none; max-width: 960px; margin: 28px auto 32px; padding: 0; }
.contrasts li { display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; padding: 20px 0; border-top: 1px solid var(--rule); }
.contrasts li:last-child { border-bottom: 1px solid var(--rule); }
.contrasts p { margin: 0; }
.contrasts .there { font-family: var(--font-head); font-style: italic; font-size: 1.2rem; line-height: 1.35; color: var(--muted); }
.contrasts .here { padding-left: 18px; border-left: 2px solid var(--gold); }
.contrasts .note-ref { color: var(--gold-dark); text-decoration: none; }
.approach .alongside { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 720px) {
  .contrasts li { grid-template-columns: 1fr; gap: 10px; }
}

/* Where It Leads (the PhD page's Career Paths slot): general changes, not testimonials (Cassidy) */
.leads h2 { text-align: center; }
.leads .features { margin: 32px auto 0; }
.leads .wasteland { margin: 36px auto 0; }

/* How We Work */
.how h2 { text-align: center; }
.how a, .leads a { color: var(--gold-dark); }

/* What We Draw On */
.draw .fine { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .84rem; color: var(--muted); }

/* Two by two, held to the reading column's width so the boxes don't stretch (Cassidy, 2026-10-29) */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; max-width: 820px; margin: 28px auto 0; }
.features article { padding-top: 14px; border-top: 1px solid var(--rule); }
.features h4 { margin: 0 0 6px; font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; }
.features p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
/* How We Work has three, so one row on a wide screen */
.how .features { grid-template-columns: repeat(3, 1fr); max-width: 960px; }
@media (max-width: 760px) { .how .features { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }

/* The close: the Library, over the illuminated book (Canva photo, cut from
   originals/inbox/canva/illuminatedbook.svg by compress.py). The words sit in the
   sky above the light; the book holds the bottom of the band. A softened version
   (desaturated, paper wash from the top) was tried 2026-10-21; Cassidy kept this one. */
.begin {
  position: relative; text-align: center;
  min-height: clamp(560px, 58vw, 760px); padding: clamp(48px, 6vw, 80px) 0 0;
  background: #f4a662 url('../images/illuminated-book.webp') center bottom / cover no-repeat;
}
.begin .eyebrow { color: var(--ink); margin-bottom: 6px; }
.begin h2 { margin: 0 0 .25em; }
.begin p { margin: 0 auto 22px; max-width: 34em; color: var(--ink); }
.begin .or { margin: 14px 0 0; font-size: .95rem; }
.begin .or a { color: var(--ink); }
@media (max-width: 720px) {
  .begin { min-height: 0; padding-bottom: 62vw; background-size: 170% auto; }
}

/* "Find your way in": the many-languages fold in What We Draw On. The list is
   hospitality for a reader who needs permission, so it sits behind a summary
   rather than on the page - and off the membership (sell) page entirely. */
.ways { margin-top: 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ways > summary { font-size: 1.3rem; color: var(--gold-dark); list-style: none; display: flex; align-items: baseline; gap: 10px; }
.ways > summary::-webkit-details-marker { display: none; }
.ways > summary::after { content: '+'; font-size: 1.2rem; line-height: 1; }
.ways[open] > summary::after { content: '\2013'; }
.ways > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ways-lede { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1.4em; }
.ways dl { margin: 0; }
.ways dt { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.ways dd { margin: .25em 0 1.3em; padding-left: 16px; border-left: 2px solid var(--rule); font-size: .95rem; color: var(--ink-soft); }

/* The page opens on a banner rather than on paper (Cassidy, 2026-11-09): the
   title sat at the same size as The Living Lab below it and the two read as
   competing headlines, and the eyebrow was lost against the h1 right under it.
   On the band the h1 takes its full site size again (the .method-open override
   is gone), so the page title and the first section heading can no longer be
   confused.
   A turf labyrinth carries it (Cassidy, 2026-11-09, picked over Susan's
   alchemists collage, her heart artwork and the 2025 visionary board): a
   labyrinth is a method - one path, walked slowly, returning you where you
   started changed - so it says what the page argues rather than setting a
   mood. Susan's collage was the runner-up but already watermarks Our story,
   and the visionary board's own lettering fought the headline. Daylight, so
   the scrim is lighter than the night bands' and warmed toward the grass. */
.method-hero { background-image: url('../images/green-labyrinth.webp'); background-position: center 58%; padding: clamp(72px, 10vw, 132px) 0; }
.method-hero::before { background: linear-gradient(rgba(12, 20, 12, .52), rgba(10, 16, 10, .7)); }
/* The collage is busy under the words, so the type is lifted by a soft dark
   glow rather than by a heavier scrim, which would flatten the photograph. */
.method-hero .eyebrow { color: var(--gold); margin-bottom: 14px; }
.method-hero .eyebrow, .method-hero h1, .method-hero p { text-shadow: 0 2px 16px rgba(6, 10, 8, .85), 0 0 4px rgba(6, 10, 8, .7); }
.method-hero h1 { margin: 0 auto .3em; }
.method-hero .lede { color: var(--cream); font-family: var(--font-head); }
.method-hero p { color: var(--paper); }
.method-hero .fleuron { display: block; margin: 0 auto 10px; }