:root{--ink:#292824;--muted:#716d65;--paper:#f8f6f1;--soft:#eeece5;--line:#d9d5cb;--white:#fffdf9;--accent:#e1dbcf;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.6}a{color:inherit}.container{width:min(calc(100% - 48px),var(--max));margin:auto}
.header{position:sticky;top:0;z-index:5;background:rgba(248,246,241,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;line-height:1.1}.brand b{display:block;font-size:19px}.brand small{font:11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu{display:flex;gap:25px;align-items:center;font:13px Arial,sans-serif}.menu a{text-decoration:none}.pill{border:1px solid var(--ink);border-radius:99px;padding:10px 17px}.toggle{display:none;background:none;border:0;font-size:24px}
.hero{padding:75px 0 95px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.eyebrow{font:11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:#77736a;margin:0 0 18px}
h1,h2,h3,p{margin-top:0}h1{font-size:44px;font-weight:400;line-height:1.03;letter-spacing:-.035em;margin-bottom:27px}h2{font-size:40px;font-weight:400;line-height:1.08;letter-spacing:-.025em;margin-bottom:24px}h3{font-size:26px;font-weight:400;line-height:1.15;margin-bottom:12px}
.lead{font-size:21px;max-width:650px;color:#4e4b45}.actions{display:flex;gap:25px;align-items:center;margin:34px 0 18px}.button{display:inline-block;text-decoration:none;background:var(--ink);color:var(--white);padding:15px 22px;border-radius:99px;font:13px Arial,sans-serif}.button:hover{opacity:.88}.link{font:13px Arial,sans-serif;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}.note{font:12px Arial,sans-serif;color:var(--muted);max-width:540px}
.photo{margin:0;overflow:hidden;background:#e3ded3;line-height:0}.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.hero-photo{height:auto;aspect-ratio:1 / 1}.portrait{height:auto;aspect-ratio:1 / 1}
.section{padding:105px 0}.intro{background:var(--white)}.narrow{max-width:850px}.intro h2{max-width:820px}.intro p:not(.eyebrow){font-size:18px;color:#555149;max-width:760px}
.soft{background:var(--soft)}.heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:48px}.heading>p{max-width:310px;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.cards article{background:var(--paper);padding:32px;min-height:260px}.cards em{font:11px Arial,sans-serif;color:var(--muted);display:block;margin-bottom:48px;font-style:normal}.cards p{color:#666159;font-size:15px}.cards .accent{background:var(--accent)}
.about{background:var(--white)}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.about-grid p:not(.eyebrow){font-size:18px;color:#555149;max-width:620px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:48px}.steps>div{padding:35px 35px 15px 0;border-right:1px solid var(--line)}.steps>div+div{padding-left:35px}.steps>div:last-child{border:0}.steps b{display:flex;width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;align-items:center;justify-content:center;font:12px Arial,sans-serif;margin-bottom:30px}.steps p{color:var(--muted);max-width:280px}
.quote{background:#ded8cb;padding:85px 0}.quote p{font-size:clamp(30px,4vw,49px);line-height:1.18;font-style:italic;max-width:850px;margin:0}
.contact{background:var(--white)}.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:100px;align-items:center}.contact-grid>div:first-child p:not(.eyebrow){font-size:18px;color:var(--muted);max-width:650px}.contact-box{border-top:1px solid var(--line);padding-top:28px}.contact-actions{display:flex;flex-direction:column;gap:12px}.full{width:100%;text-align:center}
.page-hero{padding:80px 0 70px;background:var(--white)}.page-hero h1{max-width:900px}.page-hero .lead{max-width:800px}.article{max-width:820px}.article p{font-size:18px;color:#555149}.article h2{font-size:36px;margin-top:50px}.article ul{padding-left:22px;color:#555149;font-size:18px}.back{display:inline-block;margin-bottom:28px;font:13px Arial,sans-serif;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}
.cta-strip{background:var(--accent);padding:65px 0}.cta-strip h2{max-width:760px}.cta-strip p{font-size:18px;color:#555149;max-width:680px}
footer{border-top:1px solid var(--line);padding:35px 0;font:12px Arial,sans-serif;color:var(--muted)}.footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}.footer b{color:var(--ink);font-size:14px}.footer a{text-decoration:none}
@media(max-width:850px){.container{width:min(calc(100% - 32px),var(--max))}.toggle{display:block}.menu{display:none;position:absolute;left:0;right:0;top:78px;background:var(--paper);border-bottom:1px solid var(--line);padding:15px 20px;flex-direction:column;align-items:stretch;gap:0}.menu.open{display:flex}.menu a{padding:13px 0}.pill{text-align:center}.hero{padding:50px 0 65px}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.hero-photo{height:auto;aspect-ratio:1 / 1}.portrait{height:auto;aspect-ratio:1 / 1}.section{padding:75px 0}.cards,.steps{grid-template-columns:1fr}.heading{display:block}.heading>p{margin-top:15px}.steps>div,.steps>div+div{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}.steps>div:last-child{border:0}.footer{grid-template-columns:1fr}.page-hero{padding:55px 0}.article p,.article ul{font-size:17px}}


/* v5 — responsive and accessibility polish */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  padding: .7rem 1rem;
  background: var(--ink, #222);
  color: var(--paper, #f7f4ed);
  transform: translateY(-180%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header { min-height: 64px; }
.site-nav a, .button, button { min-height: 44px; }
.photo { aspect-ratio: 1 / 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .container { width: min(100% - 32px, 760px); }
  .hero { padding-top: clamp(42px, 8vw, 72px); padding-bottom: clamp(52px, 10vw, 88px); }
  .hero h1 { font-size: clamp(2.35rem, 8vw, 4.2rem); line-height: .98; }
  .section { padding-block: clamp(56px, 10vw, 88px); }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 24px, 520px); }
  .site-header { padding-block: 10px; }
  .site-nav { gap: 12px; }
  .site-nav a { padding: 9px 4px; font-size: .76rem; }
  .hero { min-height: auto; padding-top: 34px; }
  .hero h1 { max-width: 9ch; font-size: clamp(2.55rem, 14vw, 4rem); }
  .hero p { max-width: 34rem; font-size: 1.05rem; }
  .photo { aspect-ratio: 1 / 1; }
  .cards, .grid-2 { gap: 14px; }
  .card { padding: 22px 20px; }
  .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* v8 mobile refinement — preserve the desktop visual language, give mobile its own composition */
@media (max-width: 640px) {
  /* Keep anchored sections visible below the sticky header. */
  #work, #about, #process, #contacts { scroll-margin-top: 82px; }

  .container { width: calc(100% - 32px); max-width: 520px; }

  .nav { min-height: 68px; }
  .menu { top: 68px; }

  .hero { padding: 42px 0 56px; }
  .hero-grid { gap: 34px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .15em; margin-bottom: 17px; }
  .hero h1 {
    max-width: none;
    font-size: clamp(42px, 11.5vw, 58px);
    line-height: 1.01;
    letter-spacing: -.035em;
    margin-bottom: 24px;
  }
  .lead { font-size: 18px; line-height: 1.48; }

  .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 30px 0 18px;
  }
  .actions .button { width: 100%; text-align: center; padding: 15px 20px; }
  .actions .link { align-self: flex-start; }
  .note { font-size: 12px; line-height: 1.45; }

  .hero-photo { height: auto; aspect-ratio: 1 / 1; }
  .hero-photo img { object-position: center center; }

  .section { padding: 68px 0; }
  h2 { font-size: clamp(34px, 9.5vw, 46px); }
  h3 { font-size: 22px; }
  .heading { margin-bottom: 34px; }
  .cards article { padding: 23px 24px; min-height: 0; }
  .cards em { margin-bottom: 24px; }
  .cards h3 { margin-bottom: 10px; }
  .cards p { font-size: 15px; line-height: 1.48; }

  .about-grid { gap: 32px; }
  .about-grid p:not(.eyebrow), .intro p:not(.eyebrow) { font-size: 17px; line-height: 1.55; }
  .portrait { height: auto; aspect-ratio: 1 / 1; }

  .steps { margin-top: 36px; }
  .steps > div, .steps > div + div { padding: 25px 0; }
  .steps b { margin-bottom: 20px; }
  .steps p { max-width: none; }

  .quote { padding: 56px 0; }
  .quote p { font-size: clamp(27px, 7vw, 36px); line-height: 1.2; }

  .contact-grid { gap: 42px; }
}

/* Mobile header — compact mode: keep only the menu control. */
@media (max-width: 640px) {
  .header { min-height: 56px; }
  .nav { min-height: 56px; justify-content: flex-end; }
  .brand { display: none; }
  .toggle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; font-size: 25px; line-height: 1; }
  .menu { top: 56px; }
  #work, #about, #process, #contacts { scroll-margin-top: 66px; }
}

/* v8 mobile refinement 2 — floating square menu + calmer heading scale */
@media (max-width: 640px) {
  /* The mobile navigation is a compact control, not a full-width header bar. */
  .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
  }
  .nav {
    min-height: 0;
    width: 100%;
    padding: 12px 12px 0;
    justify-content: flex-end;
  }
  .toggle {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    background: rgba(248,246,241,.96);
    color: var(--ink);
    font-size: 23px;
    line-height: 1;
  }
  .menu {
    top: 72px;
    left: auto;
    right: 12px;
    width: min(300px, calc(100vw - 24px));
    border: 1px solid var(--line);
    padding: 10px 18px;
    box-shadow: 0 10px 30px rgba(41,40,36,.08);
  }
  #work, #about, #process, #contacts { scroll-margin-top: 20px; }

  /* Reduce the display-heading/body contrast on small screens. */
  /* Unified mobile typography: headings stay prominent, but no longer
     dominate the body copy. Keep the v8 serif character and hierarchy. */
  .hero h1 {
    font-size: clamp(34px, 8.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin-bottom: 22px;
  }
  h2 {
    font-size: clamp(32px, 7.8vw, 40px);
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  h3 { font-size: clamp(22px, 5.6vw, 26px); line-height: 1.15; }
  .quote p { font-size: clamp(24px, 6vw, 30px); line-height: 1.22; }
}

/* v8 mobile refinement 3 — use the same calmer H1 scale on internal pages. */
@media (max-width: 640px) {
  .page-hero h1 {
    font-size: clamp(34px, 8.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin-bottom: 22px;
  }
}

/* v8 mobile typography v5 — unified heading scale for internal pages */
@media (max-width: 640px) {
  /* Same calm H1 scale as the approved homepage. */
  h1,
  .page-hero h1 {
    font-size: clamp(34px, 8.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin-bottom: 22px;
  }

  /* Internal section headings: closer to the body scale and easier to scan. */
  h2,
  .article h2,
  .cta-strip h2 {
    font-size: clamp(29px, 7.1vw, 36px);
    line-height: 1.12;
    letter-spacing: -.018em;
  }

  h3,
  .cards h3 {
    font-size: clamp(21px, 5.2vw, 24px);
    line-height: 1.18;
  }

  /* Keep the large quotation visually distinct, but within the same system. */
  .quote p {
    font-size: clamp(24px, 6vw, 30px);
    line-height: 1.22;
  }
}

/* v9 internal direction pages — keep the same calm hierarchy as the homepage */
.page-hero .back { margin-bottom: 34px; }
.article h3 { margin-top: 34px; }
.article h2 + h3 { margin-top: 0; }
@media (max-width: 640px) {
  .page-hero { padding: 78px 0 58px; }
  .page-hero .back { margin-bottom: 30px; }
  .article h2 { margin-top: 48px; margin-bottom: 20px; }
  .article h3 { margin-top: 30px; margin-bottom: 10px; }
}

/* v20 — editorial article pages */
.article-page{padding:76px 0 110px}
.article-shell{max-width:980px;margin:0 auto}
.article-head{max-width:820px;margin:42px 0 48px}
.article-head .eyebrow{margin-bottom:18px}
.article-head h1{max-width:820px;margin:0 0 24px}
.article-meta{font:11px/1.5 Arial,sans-serif;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.article-lead{max-width:720px;font-size:21px;line-height:1.55;color:#5b574f;margin:0}
.article-hero-image{display:block;width:min(100%,820px);aspect-ratio:1 / 1;height:auto;object-fit:cover;object-position:center;margin:0 auto 58px;border:1px solid var(--line)}
.article-body{max-width:720px;margin:0 auto}
.article-body p{font-size:18px;line-height:1.78;color:#4f4b45;margin:0 0 26px}
.article-body p:last-child{margin-bottom:0}
.article-body .poem{white-space:pre-line}
.article-video{margin:0 0 54px;border:1px solid var(--line);background:#e8e3d8}
.article-video-inner{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);font-family:Arial,sans-serif}
.article-video-inner span{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.article-video-inner strong{display:block;margin-top:10px;font-family:Georgia,serif;font-size:24px;font-weight:normal}
.article-nav{max-width:720px;margin:70px auto 0;border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;gap:24px;font:13px Arial,sans-serif}
.article-nav a{color:var(--ink);text-decoration:none}
.article-nav a:hover{text-decoration:underline}
@media(max-width:640px){
 .article-page{padding:68px 0 72px}
 .article-head{margin:34px 0 34px}
 .article-lead{font-size:18px;line-height:1.55}
 .article-hero-image{margin-bottom:38px;max-height:460px}
 .article-body p{font-size:17px;line-height:1.68;margin-bottom:23px}
 .article-video{margin-bottom:38px}
 .article-nav{margin-top:48px;flex-direction:column;gap:15px}
}

/* v22 — final editorial article composition */
.article-page{padding:74px 0 118px;background:var(--paper)}
.article-shell{max-width:1040px;margin:0 auto}
.article-head{max-width:860px;margin:46px 0 52px;padding-left:0}
.article-head .eyebrow{margin-bottom:16px}
.article-head h1{font-size:clamp(46px,5vw,72px);line-height:1.01;letter-spacing:-.045em;max-width:850px;margin-bottom:22px}
.article-meta{font-size:10px;letter-spacing:.14em;margin-bottom:22px}
.article-lead{font-size:22px;line-height:1.48;max-width:700px;color:#5b574f}
.article-hero-image{width:min(100%,820px);height:auto;aspect-ratio:1 / 1;max-height:none;object-fit:cover;margin:0 auto 64px;border:0}
.article-body{max-width:720px;margin:0 auto}
.article-body p{font-size:18px;line-height:1.82;color:#4f4b45;margin-bottom:28px}
.article-nav{max-width:720px;margin:78px auto 0;padding-top:28px}
@media(max-width:640px){
 .article-page{padding:62px 0 76px}
 .article-shell{width:100%}
 .article-head{margin:34px 0 34px}
 .article-head h1{font-size:clamp(36px,10vw,48px);line-height:1.05;letter-spacing:-.035em}
 .article-lead{font-size:18px;line-height:1.55}
 .article-hero-image{margin-bottom:40px}
 .article-body p{font-size:17px;line-height:1.72;margin-bottom:23px}
}


/* v24 — articles preview on homepage */
.articles-home{background:var(--white)}
.articles-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:28px}
.home-article{background:var(--paper);display:flex;flex-direction:column;text-decoration:none;min-height:390px;overflow:hidden}
.home-article:hover{background:var(--white)}
.home-article img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;object-position:center}
.home-article-content{display:flex;flex-direction:column;flex:1;padding:24px 28px 26px}
.home-article:not(:has(img)){padding:28px}
.home-article-meta{font:11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:28px;line-height:1.5}
.home-article h3{font-size:27px;margin:0 0 14px}
.home-article p{font-size:16px;color:#666159;margin:0;max-width:420px}
.home-article span{margin-top:auto;padding-top:24px;font:13px Arial,sans-serif}
.articles-home-link{display:inline-block;margin-top:4px}
@media(max-width:900px){.articles-home-grid{grid-template-columns:1fr}.home-article{min-height:0}.home-article img{height:auto;aspect-ratio:1 / 1}}
@media(max-width:640px){.home-article img{height:auto;aspect-ratio:1 / 1}.home-article h3{font-size:25px}.home-article-content{padding:22px 24px 24px}.home-article:not(:has(img)){padding:24px}}


/* Work cards: the whole card is the link, not only the heading. */
.cards .work-card {
  display: block;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  padding: 32px;
  min-height: 260px;
  transition: background .2s ease, color .2s ease;
}
.cards .work-card:hover {
  background: #eeeae1;
}
.cards .work-card.accent {
  background: var(--accent);
}
.cards .work-card.accent:hover {
  background: #d8d1c4;
}
.cards .work-card h3 {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
@media (max-width: 850px) {
  .cards .work-card { padding: 23px 24px; min-height: 0; }
}

.reviews-home{background:var(--paper)}.review-empty{border-top:1px solid var(--line);padding:28px 0 0;display:flex;justify-content:space-between;gap:40px;align-items:center}.review-empty p{margin:0;color:var(--muted);max-width:650px;font-size:17px}.review-home-actions{flex:0 0 auto}@media(max-width:850px){.review-empty{display:block}.review-home-actions{margin-top:24px}}
/* v33 — review form refinement: vertical fields, larger text area */
.review-form-wrap {
  margin-top: 72px;
  padding-top: 52px;
  border-top: 1px solid var(--line);
}
.review-form-wrap h2 {
  max-width: 850px;
  margin-bottom: 18px;
}
.form-note {
  color: var(--muted);
  font-size: 16px;
  max-width: 760px;
  margin-bottom: 34px;
}
#reviewForm {
  max-width: 760px;
}
#reviewForm label {
  display: block;
  font: 12px Arial, sans-serif;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: 28px;
}
#reviewForm input,
#reviewForm textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  font: 17px Georgia, "Times New Roman", serif;
  line-height: 1.5;
  outline: none;
}
#reviewForm input {
  max-width: 420px;
}
#reviewForm textarea {
  min-height: 230px;
  resize: vertical;
}
#reviewForm input:focus,
#reviewForm textarea:focus {
  border-color: var(--ink);
}
#reviewForm .button {
  border: 0;
  cursor: pointer;
}
.form-status {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
}
@media (max-width: 640px) {
  .review-form-wrap {
    margin-top: 54px;
    padding-top: 38px;
  }
  .form-note {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 28px;
  }
  #reviewForm input,
  #reviewForm textarea {
    font-size: 16px;
  }
  #reviewForm input {
    max-width: none;
  }
  #reviewForm textarea {
    min-height: 200px;
  }
  #reviewForm .button {
    width: auto;
    min-width: 190px;
  }
}