:root{
    --blush: #FBF5F7;
    --charcoal: #625E5B;
    --teal: #317F81;
    --dusty: #EFE8E8;
    --sage: #A8B4A2;
    --wide: 1320px;
    --teal-deep: #234F51;
  }

  *{ box-sizing: border-box; }

  body{
    margin:0;
    background: var(--blush);
    color: var(--charcoal);
    font-family: "Questrial", -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3{
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 300;
    color: var(--charcoal);
    margin: 0;
    line-height: 1.1;
  }

  a{ color: inherit; text-decoration: none; }
  img{ max-width: 100%; display:block; }

  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--teal);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

  .wrap{ max-width: var(--wide); margin: 0 auto; padding: 0 28px; }

  /* ---------- shared photo placeholder ---------- */
  .ph{
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--dusty) 0%, var(--sage) 100%);
  }
  .ph .note{
    position:absolute; left:0; right:0; bottom:0;
    padding: 14px 18px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(98,94,91,0.55);
  }
  .ph img{ width:100%; height:100%; object-fit:cover; }

  /* ---------- CTA system ---------- */
  .cta{
    display:inline-flex; align-items:center; gap: 8px;
    font-family: "Questrial", sans-serif;
    font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--charcoal);
    border-bottom: 1px solid transparent; padding-bottom: 3px;
    transition: border-color 0.2s ease, gap 0.2s ease;
  }
  .cta .arrow{ transition: transform 0.2s ease; }
  .cta:hover{ border-color: currentColor; gap: 12px; }
  .cta:hover .arrow{ transform: translateX(2px); }
  .cta.teal{ color: var(--teal); }
  .cta.strong{ font-size: 0.88rem; }

  .eyebrow{
    font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--teal);
  }

  /* ======================================================
     OPENING — hero photograph, then the manifesto.
     No name-as-logo, no text over the photo.
     ====================================================== */

  .hero{ margin:0; }
  .hero .ph{ aspect-ratio: 5/6; background: none; }
  .hero .ph img{ object-position: 76% 32%; }

  @media (min-width: 900px){
    .hero .ph{ aspect-ratio: 20/9; }
    .hero .ph img{ object-position: center 34%; }
  }

  .manifesto{ max-width: 900px; padding: 46px 28px 72px; }

  .manifesto-label{
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--teal);
  }

  .manifesto-passage{
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    line-height: 1.5;
    max-width: 560px;
    margin-top: 14px;
  }
  .manifesto-passage p{ margin: 0; }

  .manifesto-reflect{ margin-top: 34px; }
  .manifesto-reflect p{
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    line-height: 1.5;
    color: var(--charcoal);
    opacity: 0.85;
    margin: 0 0 9px 0;
    max-width: 560px;
  }

  /* ======================================================
     SHARED GRAMMAR — bleed (photo + adjacent text).
     Reused for Mahalo and Compass Studio.
     ====================================================== */

  .bleed{ display:block; }
  .bleed .photo{ aspect-ratio: 4/3; }
  .bleed .text{ padding: 34px 28px 60px; }

  @media (min-width: 900px){
    .bleed{ display:grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 78vh; }
    .bleed .photo{ aspect-ratio: auto; height: 100%; }
    .bleed .text{ display:flex; flex-direction:column; justify-content:center; padding: 60px 72px; }
    .bleed.flip .photo{ order: 2; }
    .bleed.flip .text{ order: 1; }
  }

  .right-now .photo{ aspect-ratio: 3/2; }
  .right-now .title{ font-size: clamp(1.5rem, 4.5vw, 1.9rem); margin-top: 10px; }
  .right-now .desc{ margin-top: 14px; max-width: 34ch; font-size: 0.94rem; line-height: 1.6; }
  .right-now .cta{ margin-top: 18px; }

  @media (min-width: 900px){
    .bleed.right-now{ min-height: auto; align-items: center; }
    .right-now .photo{ aspect-ratio: 16/10; height: auto; }
    .right-now .text{ padding: 40px 56px; }
  }

  .place-collection .photo{ aspect-ratio: 5/4; }
  .place-collection .title{ font-size: clamp(1.5rem, 4.5vw, 1.9rem); margin-top: 10px; }
  .place-collection .desc{ margin-top: 14px; max-width: 34ch; font-size: 0.94rem; line-height: 1.6; }
  .place-collection .cta{ margin-top: 18px; }

  @media (min-width: 900px){
    .place-collection{ margin-top: 80px; }
  }

  /* ======================================================
     JOURNAL — From My Field Notes: offset 60/40 pairing.
     ====================================================== */

  .journal{ padding: 90px 28px 100px; }
  .journal-head{ max-width: var(--wide); margin: 0 auto 40px; }
  .field-notes-tagline{
    margin-top: 8px;
    font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  }

  .journal-inner{ max-width: var(--wide); margin: 0 auto; }
  .journal-media{ display: block; }

  .post-tag{
    margin-top: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.55;
  }

  .journal-link{ margin-top: 10px; }

  .journal-a{ max-width: 640px; }
  .journal-a .photo{ aspect-ratio: 3/2; }
  .journal-a .j-title{ margin-top: 8px; font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
  .journal-a .j-title a:hover{ color: var(--teal); }

  .journal-b{ max-width: 380px; margin-top: 54px; }
  .journal-b .photo{ aspect-ratio: 4/3; }
  .journal-b .j-title{ margin-top: 8px; font-size: 1.3rem; }
  .journal-b .j-title a:hover{ color: var(--teal); }

  @media (min-width: 860px){
    .journal-inner{ display:flex; align-items: flex-end; gap: 72px; }
    .journal-b{ margin-top: 0; margin-left: auto; }
  }

  @media (min-width: 1100px){
    .journal-b{ max-width: 460px; }
  }

  /* ======================================================
     EXPLORE — A Few Places to Go: quiet directory
     ====================================================== */

  .explore-links{ padding: 90px 28px 90px; }
  .el-inner{ max-width: 820px; margin: 0 auto; }
  .el-inner > .eyebrow{ margin-bottom: 6px; }

  .el-rows{ margin-top: 24px; }
  .el-row{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid rgba(98,94,91,0.16);
    transition: padding-left 0.2s ease;
  }
  .el-rows a.el-row:last-child{ border-bottom: 1px solid rgba(98,94,91,0.16); }
  .el-row:hover{ padding-left: 6px; }

  .el-mark{
    color: var(--teal);
    font-size: 0.85rem;
    line-height: 1.7;
    flex-shrink: 0;
  }

  .el-text{ display: flex; flex-direction: column; }
  .el-title{
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--charcoal);
  }
  .el-row:hover .el-title{ color: var(--teal); }
  .el-desc{
    margin-top: 3px;
    font-size: 0.86rem;
    color: var(--charcoal);
    opacity: 0.65;
  }

  @media (min-width: 700px){
    .el-rows{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  }

  /* ======================================================
     FAMILY — In the Family: the closing discovery.
     Related to the Explore directory, but warmer, roomier,
     single-column, larger type — reads as an ending, not
     a repeat of the section above it.
     ====================================================== */

  .family{
    padding: 110px 28px 130px;
    background: linear-gradient(180deg, var(--blush) 0%, var(--dusty) 100%);
  }
  .family-inner{ max-width: 880px; margin: 0 auto; }

  .family-lines{ margin-top: 14px; }
  .family-lines p{
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    line-height: 1.55;
    color: var(--charcoal);
    opacity: 0.88;
    margin: 0 0 8px 0;
    max-width: 540px;
  }

  .family-rows{
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .family-row{ display: block; }

  .family-media{
    display: block;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1/1;
    overflow: hidden;
    margin-bottom: 22px;
    background: linear-gradient(150deg, var(--dusty) 0%, var(--sage) 100%);
  }
  .family-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

  .family-name{
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 3vw, 1.5rem);
    color: var(--charcoal);
  }
  .family-name:hover{ color: var(--teal); }

  .family-desc{
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: 0.7;
    max-width: 40ch;
  }

  .family-visit{ margin-top: 14px; display: inline-block; }

  @media (min-width: 700px){
    .family-rows{ grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 80px; }
  }

  /* ======================================================
     BELIEFS — "A good life is local, too."
     An editorial pause: text-only, no cards, no images.
     ====================================================== */

  .beliefs{ padding: 100px 28px 112px; background: var(--blush); }
  .beliefs-inner{ max-width: 900px; margin: 0 auto; }

  .beliefs-heading{
    margin-top: 10px;
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    max-width: 620px;
  }

  .beliefs-intro{ margin-top: 30px; max-width: 620px; }
  .beliefs-intro p{
    font-size: 0.98rem;
    line-height: 1.75;
    margin: 0 0 16px 0;
    color: var(--charcoal);
    opacity: 0.82;
  }

  .beliefs-emphasis{
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 3vw, 1.65rem);
    line-height: 1.5;
    color: var(--charcoal);
    margin: 32px 0 18px 0;
    max-width: 640px;
  }

  .beliefs-features{
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 84px;
  }

  .belief-feature{ display: flex; flex-direction: column; gap: 24px; }

  .bf-media{
    width: 100%;
    overflow: hidden;
    background: linear-gradient(150deg, var(--dusty) 0%, var(--sage) 100%);
  }
  .bf-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

  .bf-a .bf-media{ aspect-ratio: 16/10; }
  .bf-b .bf-media{ aspect-ratio: 2/1; }

  .belief-name{
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--charcoal);
  }
  .belief-desc{
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--charcoal);
    opacity: 0.72;
    max-width: 46ch;
  }
  .belief-cta{ margin-top: 18px; display: inline-block; }

  @media (min-width: 860px){
    .belief-feature{
      display: grid;
      align-items: center;
      gap: 60px;
    }
    .bf-a{ grid-template-columns: 7fr 5fr; }
    .bf-a .bf-media{ order: 1; }
    .bf-a .bf-copy{ order: 2; }

    .bf-b{ grid-template-columns: 5fr 7fr; margin-top: 20px; }
    .bf-b .bf-copy{ order: 1; }
    .bf-b .bf-media{ order: 2; max-width: 440px; margin-left: auto; }
  }

  /* ======================================================
     FOOTER — small, quiet, personal. Not a sitemap.
     ====================================================== */

  footer{ background: var(--teal-deep); color: rgba(251,245,247,0.75); padding: 70px 28px 40px; text-align: center; }
  .footer-inner{ max-width: var(--wide); margin: 0 auto; }

  .footer-thanks{
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--blush);
  }

  .footer-links{
    margin-top: 22px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .footer-links a{ color: rgba(251,245,247,0.8); }
  .footer-links a:hover{ color: var(--blush); }
  .footer-links .dot{ color: rgba(251,245,247,0.35); }

  .footer-bottom{
    max-width: var(--wide); margin: 34px auto 0;
    padding-top: 22px; border-top: 1px solid rgba(251,245,247,0.14);
    font-size: 0.74rem; color: rgba(251,245,247,0.45);
  }

/* ======================================================
   SITE NAV — quiet wordmark + one anchor link. Sits above
   the hero, never over the photograph.
   ====================================================== */

.site-nav{
  max-width: var(--wide);
  margin: 0 auto;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav .wordmark{
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}
.site-nav .wordmark:hover{ color: var(--teal); }
.site-nav .nav-link{
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.65;
}
.site-nav .nav-link:hover{ opacity: 1; color: var(--teal); }

/* ======================================================
   FEATURED WRITING — the homepage teaser for an essay.
   Substantial, singular, not a blog card.
   ====================================================== */

.featured-writing{ padding: 30px 28px 110px; }
.fw-inner{ max-width: var(--wide); margin: 0 auto; }

.fw-media{
  width: 100%;
  aspect-ratio: 16/8;
  overflow: hidden;
  background: linear-gradient(150deg, var(--dusty) 0%, var(--sage) 100%);
}
.fw-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.fw-text{ margin-top: 40px; max-width: 700px; }
.fw-title{
  margin-top: 10px;
  font-size: clamp(2rem, 6vw, 2.9rem);
}
.fw-excerpt{
  margin-top: 24px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.88;
}
.fw-cta{ margin-top: 26px; }

@media (min-width: 900px){
  .fw-media{ aspect-ratio: 21/8; }
  .fw-text{ margin-top: 48px; }
}

/* ======================================================
   MAKING INTRO — a quiet section marker that gives the
   "#making" anchor a landing spot and introduces the
   Mahalo / Compass Studio pair that follows. Not a card,
   just a beat before the work appears.
   ====================================================== */

.making-intro{
  max-width: var(--wide);
  margin: 0 auto;
  padding: 90px 28px 0;
}
.making-intro .eyebrow{ display: block; }

/* ======================================================
   ESSAY PAGE — a single reading column. No sidebar,
   no clutter, generous whitespace.
   ====================================================== */

.essay-hero{ margin: 0; }
.essay-hero .ph{ aspect-ratio: 4/3; background: none; }
.essay-hero .ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px){ .essay-hero .ph{ aspect-ratio: 21/8; } }

.essay-head{ max-width: 700px; margin: 56px auto 0; padding: 0 28px; }
.essay-back{
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.6;
}
.essay-back:hover{ opacity: 1; color: var(--teal); }

.essay-title{
  margin-top: 22px;
  font-size: clamp(2.1rem, 6vw, 3rem);
}

.essay-content{
  max-width: 660px;
  margin: 0 auto;
  padding: 40px 28px 0;
}
.essay-content p{
  font-size: 1.06rem;
  line-height: 1.9;
  color: var(--charcoal);
  margin: 0 0 24px 0;
}
.essay-content h2{
  font-size: clamp(1.4rem, 3.6vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  margin: 70px 0 28px 0;
}

.essay-closing{
  max-width: 660px;
  margin: 90px auto 130px;
  padding: 0 28px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  line-height: 1.5;
  color: var(--charcoal);
}

.essay-making{ padding: 0 28px 110px; background: var(--blush); }
.essay-making-inner{ max-width: 700px; margin: 0 auto; }
.essay-making-inner > .eyebrow{ display: block; }
.essay-making-inner .heading{
  margin-top: 10px;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
}
.essay-making .beliefs-features{ margin-top: 48px; gap: 68px; }
.essay-making .bf-media{ aspect-ratio: 4/3; }
.essay-making .belief-name{ font-size: 1.2rem; }

@media (min-width: 860px){
  .essay-making .belief-feature{ grid-template-columns: 1fr 1fr !important; gap: 44px; }
  .essay-making .bf-b{ margin-top: 0; }
  .essay-making .bf-b .bf-media{ max-width: none; margin-left: 0; }
}