:root {
  --paper: #f4f0e8;
  --paper-deep: #e8dfd1;
  --stone: #776f66;
  --ink: #28221f;
  --plum: #5d334c;
  --plum-dark: #422337;
  --mint: #b8d6c8;
  --mint-deep: #769d90;
  --line: rgba(40,34,31,.17);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
body::before { content: ''; pointer-events: none; position: fixed; inset: 0; opacity: .28; z-index: 20; background-image: radial-gradient(rgba(67,55,46,.12) .45px, transparent .55px); background-size: 5px 5px; mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font: inherit; }
img { display: block; width: 100%; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 100; left: 18px; top: -52px; padding: 10px 14px; background: var(--mint); color: var(--ink); transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 12; border-bottom: 1px solid var(--line); background: rgba(244,240,232,.92); backdrop-filter: blur(12px); }
.nav-wrap { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -.04em; font-size: 23px; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; background: var(--plum); color: var(--paper); border-radius: 50% 50% 45% 50%; font: 500 20px/1 var(--serif); transform: rotate(-9deg); }
.site-nav { display: flex; align-items: center; gap: 29px; font-size: 13px; font-weight: 500; }
.site-nav a { position: relative; padding: 4px 0; }
.site-nav a:not(.nav-contact)::after { content: ''; position: absolute; height: 1px; width: 0; bottom: 0; left: 0; background: var(--plum); transition: width .2s ease; }
.site-nav a:hover::after { width: 100%; }
.nav-contact { padding: 9px 15px !important; border: 1px solid var(--plum); color: var(--plum); }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); align-items: center; gap: 7px; font-size: 13px; }
.menu-toggle i { display: block; width: 17px; height: 1px; background: currentColor; }
.section { padding: 116px 0; }
.hero { min-height: 680px; padding: 86px 0 42px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); align-items: center; gap: clamp(45px, 8vw, 112px); }
.eyebrow, .section-no { margin: 0 0 19px; color: var(--plum); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 700px; margin-bottom: 27px; font-size: clamp(48px, 6vw, 82px); }
h1 em { font-weight: 400; color: var(--plum); }
h2 { font-size: clamp(40px, 4.3vw, 65px); }
h3 { letter-spacing: -.035em; font-weight: 500; }
.intro { max-width: 560px; margin-bottom: 31px; color: #514a44; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.button { display: inline-flex; align-items: center; gap: 24px; padding: 13px 16px 13px 19px; border: 1px solid transparent; font-size: 13px; font-weight: 500; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 19px; line-height: 1; }
.button-plum { background: var(--plum); color: var(--paper); }
.button-mint { background: var(--mint); border-color: var(--mint-deep); }
.quiet-link { border-bottom: 1px solid var(--ink); padding-bottom: 3px; font-size: 13px; }
.micro-note { margin: 27px 0 0; color: var(--stone); font-size: 12px; }
.image-frame { margin: 0; position: relative; background: var(--paper-deep); }
.image-frame img { height: 100%; object-fit: cover; filter: saturate(.78) contrast(.97); }
.image-frame figcaption { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--stone); font-size: 10px; letter-spacing: .035em; text-transform: uppercase; }
.image-frame figcaption span { color: var(--plum); }
.image-hero { height: 467px; padding: 11px 11px 0; transform: rotate(1.3deg); box-shadow: 10px 12px 0 rgba(93,51,76,.08); }
.image-hero::before { content: 'FIELD NOTE'; position: absolute; top: -20px; right: 13px; color: var(--plum); font-size: 10px; letter-spacing: .17em; transform: rotate(90deg); transform-origin: right bottom; }
.image-hero img { height: calc(100% - 28px); }
.hero-rule { display: flex; align-items: center; gap: 14px; margin-top: 57px; color: var(--stone); font-size: 10px; letter-spacing: .1em; }
.hero-rule span { flex: 1; height: 1px; background: var(--line); }
.hero-rule b { font-weight: 500; }
.paper-section { background: #eee8de; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.split-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 12vw; align-items: end; }
.split-heading h2 { margin: 0; }
.section-lead { margin: 0 0 6px; color: #554e47; font-size: 17px; line-height: 1.7; }
.coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 68px; }
.coverage-card { min-height: 255px; padding: 27px; border: 1px solid rgba(40,34,31,.16); }
.coverage-card h3 { margin: 42px 0 10px; font-size: 24px; }
.coverage-card p { margin: 0; font-size: 14px; line-height: 1.65; }
.card-index { display: block; color: var(--plum); font: 30px/1 var(--serif); }
.mint-card { background: var(--mint); }
.stone-card { background: #ded6ca; }
.plum-card { background: var(--plum); color: var(--paper); }
.plum-card .card-index { color: var(--mint); }
.boundaries-section { background: #f8f5ee; }
.boundaries-grid { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(45px, 10vw, 135px); align-items: center; }
.tall-image { height: 540px; padding: 10px 10px 0; transform: rotate(-1deg); }
.tall-image img { height: calc(100% - 28px); }
.boundaries-copy h2 { margin-bottom: 23px; }
.boundaries-copy > p { max-width: 545px; color: #504943; font-size: 16px; line-height: 1.75; }
.rule-dot { width: 35px; height: 35px; margin: 26px 0; border: 1px solid var(--plum); border-radius: 50%; position: relative; }
.rule-dot::after { content: ''; width: 7px; height: 7px; background: var(--plum); border-radius: 50%; position: absolute; top: 13px; left: 13px; }
.margin-note { max-width: 500px; margin-top: 33px; padding: 16px 0 16px 20px; border-left: 2px solid var(--mint-deep); }
.margin-note span { display: block; margin-bottom: 6px; color: var(--mint-deep); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.margin-note strong { font: 400 19px/1.35 var(--serif); }
.prompts-section { background: var(--plum); color: var(--paper); }
.prompts-section .section-no { color: var(--mint); }
.section-topline { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid rgba(244,240,232,.3); }
.section-topline p { margin: 0; }
.topline-copy { color: #d7c8ce; font-size: 13px; }
.prompts-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 23px; padding-top: 45px; }
.prompt-card { min-height: 220px; padding: 4px 15px 20px 0; border-right: 1px solid rgba(244,240,232,.28); }
.prompt-card.offset { margin-top: 68px; }
.prompt-card span { color: var(--mint); font: 25px var(--serif); }
.prompt-card h3 { margin: 28px 0 10px; font-size: 20px; }
.prompt-card p { margin: 0; color: #dbd1d5; font-size: 13px; line-height: 1.65; }
.principles-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 8vw; }
.principles-intro h2 { margin-bottom: 24px; }
.principles-intro > p:last-child { max-width: 460px; color: #554e47; }
.principles-list { border-top: 1px solid var(--line); }
.principles-list article { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.principles-list span { color: var(--plum); font: 25px var(--serif); }
.principles-list h3 { margin: 0 0 4px; font-size: 22px; }
.principles-list p { margin: 0; color: #625a53; font-size: 14px; }
.image-strip { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 24px; margin-top: 83px; }
.image-strip .image-frame { height: 290px; }
.hygiene-section { background: var(--mint); }
.hygiene-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(40px, 8vw, 100px); align-items: center; }
.checklist-panel h2 { max-width: 590px; margin-bottom: 34px; }
.checklist { max-width: 600px; padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(40,34,31,.25); }
.checklist li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 9px; padding: 14px 0; border-bottom: 1px solid rgba(40,34,31,.25); font-size: 15px; }
.checklist span { color: var(--plum); font-size: 20px; line-height: 1.2; }
.square-image { height: 395px; padding: 10px 10px 0; transform: rotate(1.2deg); box-shadow: 10px 12px 0 rgba(40,34,31,.12); }
.square-image img { height: calc(100% - 28px); }
.glossary-section { background: #f8f5ee; }
.glossary-list { margin: 70px 0 0; border-top: 1px solid var(--line); }
.glossary-list > div { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 8vw; padding: 26px 0; border-bottom: 1px solid var(--line); }
dt { font: 400 28px/1.15 var(--serif); letter-spacing: -.035em; }
dd { max-width: 570px; margin: 0; color: #5b544e; }
.workflow-section { background: #e5ddd0; }
.workflow-head h2 { margin: 0; }
.workflow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 52px; background: rgba(40,34,31,.25); border: 1px solid rgba(40,34,31,.25); }
.workflow-card { min-height: 337px; padding: 27px; background: #f5f0e8; display: flex; flex-direction: column; }
.workflow-card.dark { background: var(--plum); color: var(--paper); }
.workflow-card.mint { background: var(--mint); }
.workflow-number { color: var(--plum); font: 29px/1 var(--serif); }
.workflow-card.dark .workflow-number { color: var(--mint); }
.workflow-card h3 { margin: auto 0 10px; font-size: 26px; }
.workflow-card p { min-height: 90px; margin: 0; color: #5d554e; font-size: 14px; }
.workflow-card.dark p { color: #ded2d7; }
.workflow-card small { display: block; margin-top: 24px; padding-top: 12px; border-top: 1px solid rgba(40,34,31,.25); color: var(--stone); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.workflow-card.dark small { border-color: rgba(244,240,232,.27); color: var(--mint); }
.editorial-section { background: #f8f5ee; }
.editorial-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(45px, 8vw, 110px); align-items: center; }
.editorial-copy h2 { margin-bottom: 28px; }
.editorial-copy > p { max-width: 510px; color: #554e47; font-size: 16px; line-height: 1.75; }
blockquote { max-width: 430px; margin: 31px 0 0; padding: 18px 0 18px 21px; border-left: 1px solid var(--plum); color: var(--plum); font: 400 23px/1.35 var(--serif); }
.editorial-images { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.66fr); gap: 18px; align-items: end; }
.editorial-images > :first-child { height: 380px; }
.editorial-images > :last-child { height: 230px; }
.small-tilt { transform: rotate(2.2deg); }
.reflection-section { padding: 100px 0; background: var(--plum); color: var(--paper); }
.reflection-section .section-no { color: var(--mint); }
.reflection-title { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); column-gap: 6vw; align-items: end; }
.reflection-title h2 { grid-column: 1; margin: 0; }
.reflection-title p:last-child { grid-column: 2; grid-row: 2; max-width: 460px; margin: 0; color: #d9cbd1; font-size: 14px; }
.reflection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 50px; }
.reflection-card { min-height: 180px; padding: 22px; text-align: left; color: var(--paper); background: transparent; border: 1px solid rgba(244,240,232,.38); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.reflection-card:hover, .reflection-card.is-active { color: var(--ink); background: var(--mint); transform: translateY(-3px); }
.reflection-card span, .reflection-card em, .reflection-card strong { display: block; }
.reflection-card span { color: var(--mint); font: 26px var(--serif); }
.reflection-card.is-active span, .reflection-card:hover span { color: var(--plum); }
.reflection-card strong { margin: 38px 0 4px; font: 400 23px var(--serif); }
.reflection-card em { color: #d8cad0; font-size: 12px; font-style: normal; }
.reflection-card.is-active em, .reflection-card:hover em { color: var(--stone); }
.reflection-result { min-height: 34px; max-width: 720px; margin: 24px 0 0; color: var(--mint); font-size: 14px; }
.gallery-section { padding: 38px 0; background: #e5ddd0; }
.gallery-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1fr); gap: 16px; }
.gallery-grid .image-frame { height: 240px; }
.faq-section { background: #f8f5ee; }
.faq-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 8vw; }
.faq-layout h2 { margin-bottom: 25px; }
.faq-intro { max-width: 340px; color: #5b544e; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; justify-content: space-between; gap: 30px; padding: 23px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 400 22px/1.25 var(--serif); letter-spacing: -.025em; }
.faq-question b { flex: 0 0 auto; color: var(--plum); font: 400 27px/1 var(--sans); transition: transform .2s ease; }
.faq-question[aria-expanded="true"] b { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.faq-answer > p { overflow: hidden; margin: 0; color: #5d554f; font-size: 14px; line-height: 1.75; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > p { padding-bottom: 24px; }
.contact-section { padding: 95px 0; background: var(--paper-deep); }
.contact-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7vw; padding: clamp(32px, 5vw, 70px); background: var(--mint); border: 1px solid rgba(40,34,31,.25); }
.contact-card h2 { margin: 0; }
.contact-copy { max-width: 470px; }
.contact-copy p { font-size: 15px; }
.contact-copy strong { font-weight: 500; }
.site-footer { padding: 23px 0; background: var(--ink); color: #ded7cc; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 11px; }
.footer-row p { margin: 0; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-row a { color: var(--mint); }
@media (max-width: 900px) {
  .site-nav { gap: 17px; }
  .hero-grid, .boundaries-grid, .hygiene-grid, .editorial-layout, .faq-layout { grid-template-columns: minmax(0,1fr); }
  .hero-copy { max-width: 680px; }
  .hero-visual { max-width: 600px; width: 100%; }
  .tall-image { max-width: 520px; }
  .principles-layout { gap: 46px; }
  .prompts-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .prompt-card.offset { margin-top: 0; }
  .prompt-card:nth-child(2n) { border-right: 0; }
  .contact-card { grid-template-columns: minmax(0,1fr); gap: 30px; }
}
@media (max-width: 680px) {
  .shell { width: min(100% - 32px, 1180px); }
  .nav-wrap { height: 66px; }
  .menu-toggle { display: inline-flex; }
  .site-nav { position: absolute; top: 65px; left: 0; width: 100%; padding: 18px 16px 21px; display: none; align-items: flex-start; gap: 15px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 10px 16px rgba(40,34,31,.07); }
  .site-nav.is-open { display: flex; flex-direction: column; }
  .nav-contact { margin-top: 3px; }
  .section { padding: 76px 0; }
  .hero { min-height: 0; padding: 60px 0 34px; }
  h1 { font-size: 49px; }
  h2 { font-size: 42px; }
  .intro { font-size: 15px; }
  .image-hero { height: 330px; margin-top: 6px; }
  .split-heading, .principles-layout, .reflection-title { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .section-lead { font-size: 15px; }
  .coverage-grid, .workflow-grid, .reflection-grid { grid-template-columns: minmax(0,1fr); }
  .coverage-card { min-height: 190px; }
  .coverage-card h3 { margin-top: 27px; }
  .prompts-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .prompt-card { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(244,240,232,.28); }
  .image-strip, .editorial-images { grid-template-columns: minmax(0,1fr); }
  .image-strip .image-frame { height: 215px; }
  .square-image { height: 310px; }
  .glossary-list > div { grid-template-columns: minmax(0,1fr); gap: 11px; }
  .workflow-card { min-height: 275px; }
  .editorial-images > :first-child { height: 270px; }
  .editorial-images > :last-child { height: 210px; max-width: 65%; }
  .reflection-title h2 { grid-column: auto; }
  .reflection-title p:last-child { grid-column: auto; grid-row: auto; }
  .reflection-card { min-height: 148px; }
  .reflection-card strong { margin-top: 25px; }
  .gallery-grid { grid-template-columns: minmax(0,1fr); }
  .gallery-grid .image-frame { height: 210px; }
  .faq-question { font-size: 20px; }
  .footer-row { align-items: flex-start; flex-direction: column; }
}
@media(max-width:360px){
  .nav-wrap .button{gap:8px;padding:9px 10px;font-size:12px}
  .nav-wrap .brand{font-size:20px;gap:7px}
  .nav-wrap .brand-mark{width:26px;height:26px;font-size:18px}
}