:root{
  /* Calm TPS palette */
  --sand:#e6effa85;
  --paper:#ebf7f3;
  --sage:#b0cacca9;
  --charcoal:#2F2F2F;
  --forest:#2E3B32;
  --clay:#9D7C66;
  --rose:#B8A398;

  --radius:12px;
  --radius-lg:22px;
  --maxw:1080px;

  --shadow-s:0 1px 0 rgba(0,0,0,.03),0 8px 22px -16px rgba(0,0,0,.22);
  --shadow-m:0 1px 0 rgba(0,0,0,.03),0 18px 50px -28px rgba(0,0,0,.35);

  /* Spacing rhythm */
  --section-pad: clamp(56px, 8vw, 112px);
  --gap: clamp(16px, 3vw, 28px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--charcoal);
  background:linear-gradient(180deg,var(--sand),#fff 44%);
  font-family:'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Containers */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(16px,3vw,24px)}
.wrap p, .wrap li{max-width:68ch}
.section{padding-block:var(--section-pad)}
.section-alt{background:linear-gradient(#fff,var(--paper)); padding-block:calc(var(--section-pad) - 22px)}
.section-head{margin-bottom:clamp(24px,4vw,40px)}
.section-kicker{font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); opacity:.88}
.section-title{margin:8px 0 0}

/* Header */
.site{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #EAE8E2}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--forest)}
.brand span{font-family:'Cormorant',serif; font-weight:700; font-size:18px; letter-spacing:.2px}
.nav a.link{color:var(--charcoal); text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a.link:hover{background:#F2F0EC}

/* Reading progress */
.read-progress{position:fixed; left:0; top:0; height:2px; width:0%; background:var(--forest); z-index:999; opacity:.6}
@media (prefers-reduced-motion:reduce){ .read-progress{display:none} }

/* Typography */
.stitle{
  font-family:'Cormorant',serif; font-weight:700; color:var(--forest);
  font-size:clamp(24px,3.2vw,34px); margin:0 0 6px
}
.subtitle{margin:.2rem 0 .7rem; opacity:.9}

/* Links (subtle underline grow) */
.link-underline{position:relative; text-decoration:none}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.link-underline:hover::after{transform:scaleX(1)}

/* Buttons */
.button-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.btn{
  appearance:none; border:0; padding:12px 18px; border-radius:999px; font-weight:600; cursor:pointer;
  background:var(--forest); color:#fff; box-shadow:var(--shadow-s);
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent; color:var(--forest); border:1px solid rgba(46,59,50,.22); box-shadow:none;
}
.btn.ghost:hover{background:rgba(126,143,123,.08)}

/* HERO */
.grid-hero{
  display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,640px) 0.9fr;
  align-items:center;
}
@media (max-width:960px){ .grid-hero{grid-template-columns:1fr} }

.hero h1{
  font-family:'Cormorant',serif; font-weight:700; color:var(--forest);
  font-size:clamp(34px,5.4vw,64px); line-height:1.04;
  margin:0 0 12px; max-width:22ch; text-wrap:balance;
}
.lead{font-size:clamp(16px,2.1vw,20px); margin:0 0 8px; max-width:58ch}

/* Abstract hero art / media */
.media-reveal{overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-m)}
.media-reveal img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .6s ease}
.media-reveal:hover img{transform:scale(1.03)}
.hero-art{border:1px solid #EAE8E2; background:linear-gradient(160deg,#fff,var(--paper))}

/* ABOUT */
.about-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,420px) 1fr;
  align-items:center;
}
@media (max-width:960px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  border:1px solid #EAE8E2; box-shadow:var(--shadow-m);
  background:
    radial-gradient(60% 60% at 18% 20%, color-mix(in srgb,var(--sage) 18%, transparent), transparent 70%),
    radial-gradient(65% 65% at 82% 85%, color-mix(in srgb,var(--clay) 18%, transparent), transparent 72%),
    linear-gradient(160deg,#fff,var(--paper));
}
.about-copy{ display:grid; gap:12px; }
.about-lead{ font-size:clamp(16px,2.1vw,19px); margin:0; max-width:60ch; }
.about-points{ margin:0; padding-left:1.1rem; list-style:disc; }
.about-points li{ margin:6px 0; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#F2F0EC; color:#2e2e2e; font-weight:600; font-size:12px }

/* WHAT I DO */
.cards{display:grid; gap:14px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .g3{grid-template-columns:1fr} }

.card{
  position:relative;
  background:linear-gradient(180deg,#fff,rgba(245,242,237,.65));
  border:1px solid #EAE8E2; border-radius:var(--radius); padding:18px 16px 16px 18px;
  box-shadow:var(--shadow-s);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px;
  border-radius:12px 0 0 12px; background:linear-gradient(180deg,var(--forest),var(--sage));
  opacity:.18;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); }
.card h3{margin:0 0 4px; font-family:'Cormorant',serif; color:var(--forest); font-size:21px}
.list{margin:.35rem 0 0; padding-left:1.15rem; list-style:disc; list-style-position:outside}
.list li{margin:6px 0; padding-left:.1rem; line-height:1.55}

/* GALLERY */
.gallery{
  list-style:none; padding:0; margin:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .gallery{ grid-template-columns:1fr; } }

.g-item{
  display:block; position:relative; overflow:hidden;
  border:1px solid #EAE8E2; border-radius:12px; background:#fff;
}
.g-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .25s ease;
}
.g-item:hover img{ transform:scale(1.02); }
.g-cap{
  position:absolute; left:8px; bottom:8px;
  background:rgba(46,59,50,.86); color:#fff;
  border-radius:8px; padding:4px 8px; font-size:12px;
}

/* Lightbox */
#lightbox{ border:0; padding:0; background:transparent; max-width:min(92vw,1080px); }
#lightbox::backdrop{ background:rgba(0,0,0,.5); }
#lightbox figure{ margin:0; position:relative; }
#lb-img{ width:100%; height:auto; display:block; border-radius:12px; background:#000; object-fit:contain; }
#lb-cap{ margin-top:6px; text-align:center; font-size:13px; color:#fff; opacity:.9; }
#lb-close{
  position:absolute; top:-14px; right:-14px;
  width:32px; height:32px; border:0; border-radius:50%;
  background:#ffffff; color:#333; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
}

/* Accordion */
.accordion{border-radius:var(--radius); overflow:hidden; border:1px solid #EAE8E2; box-shadow:var(--shadow-s); background:#fff}
.acc{background:#fff}
.acc + .acc{border-top:1px solid #EAE8E2}
.acc button{width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; font-weight:600; color:var(--forest); background:none; border:0; cursor:pointer}
.acc button:hover{background:#F8F7F4}
.acc .panel{display:none; padding:0 14px 14px}
.acc[aria-expanded="true"] .panel{display:block}

/* Form */
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .g2{grid-template-columns:1fr} }
.field{display:grid; gap:6px}
label{font-size:14px; opacity:.95}
input,textarea{border:1px solid #E0DED8; background:#fff; padding:10px 12px; border-radius:10px; font:inherit}
textarea{min-height:110px; resize:vertical}

/* Footer */
.foot{padding:28px 0 40px; color:#555; border-top:1px solid #bba565}
.footgrid--simple{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start}
.foot-right{text-align:right}
.foot .link{color:#4b4b4b; text-decoration:none}
.foot .note{margin-top:8px; font-size:12px; opacity:.75}
@media (max-width:900px){
  .footgrid--simple{grid-template-columns:1fr}
  .foot-right{text-align:left}
}
.logo-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover }

/* Reveal on scroll (calm) */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}


.radial-progress{
  position:fixed; right:18px; bottom:18px; z-index:1000;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; box-shadow:var(--shadow-m); display:grid; place-items:center;
}
.radial-progress svg{ width:36px; height:36px; transform:rotate(-90deg) }
.rp-bg{ fill:none; stroke:rgba(46,59,50,.12); stroke-width:4 }
.rp-fg{
  fill:none; stroke:var(--forest); stroke-width:4; stroke-linecap:round;
  stroke-dasharray: 126; /* ~2πr where r=20 */
  stroke-dashoffset: 126; transition:stroke-dashoffset .15s ease;
}
.rp-arrow{ position:absolute; font-weight:700; color:var(--forest); font-size:14px; pointer-events:none }
.radial-progress:focus-visible{ outline:2px solid var(--forest); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  .rp-fg{ transition:none }
}
@media (max-width:900px){
  .radial-progress{ right:12px; bottom:12px; width:44px; height:44px }
  .radial-progress svg{ width:32px; height:32px }
}


/* 1) Make anchored sections stop below the sticky header */
:root{ --sticky: 64px; } /* keep in sync with your header height */
section[id]{ scroll-margin-top: calc(var(--sticky) + 12px); }

/* 2) Remove the tiny forced nudge that can cause visual misalignment */
.about{ margin-top: 0; }

/* 3) Keep About visually contained */
#about .about-photo{ max-height: min(58vh, 540px); }
#about .about-photo img{ height: 100%; object-fit: cover; }
#about .about-grid{ align-items: center; }


/* ABOUT layout: image left, all text (including heading) right */
#about.section--fit{
  padding-block: clamp(48px, 7vh, 96px);
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) 1.1fr;
  align-items:center;
  gap:clamp(24px, 4vw, 48px);
}

/* Photo block */
.about-photo{
  aspect-ratio:4/5;
  max-height:min(60vh,520px);
  border-radius:var(--radius-lg);
  border:1px solid #EAE8E2;
  box-shadow:var(--shadow-m);
  overflow:hidden;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}

/* Right column */
.about-copy{
  display:flex;
  flex-direction:column;
  gap:clamp(10px,2vw,18px);
}
.about-head .section-kicker{
  margin-bottom:4px;
}
.about-head .stitle{
  font-size:clamp(26px,3.4vw,36px);
  line-height:1.15;
  margin:0;
}

.about-lead{max-width:62ch;font-size:1.05rem;line-height:1.6;}
.about-points{margin:0;padding-left:1.1rem;list-style:disc;}
.about-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;}

@media(max-width:960px){
  .about-grid{grid-template-columns:1fr;gap:clamp(20px,5vw,32px);}
  .about-photo{max-height:420px;}
  .about-head .stitle{font-size:clamp(22px,5vw,30px);}
}









/* ---------------------------------------------
   TYPO PATCH — Swap to Lora (headings/brand) + Inter (body/UI)
   Paste this at the END of D1.css
----------------------------------------------*/

/* Base body */
body{
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:1.65;
  letter-spacing:0.2px;
}

/* Small labels / kicker stay sans for clarity */
.section-kicker,
label,
.chip,
.nav a.link,
.btn{ 
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Brand & Headings → Lora */
.brand span,
.stitle,
.hero h1,
.card h3{
  font-family:'Lora', Georgia, "Times New Roman", serif;
  font-weight:600; /* confident but not shouty */
  letter-spacing:0.2px;
  color:var(--forest);
}

/* Fine-tuned sizes/weights for key elements */
.hero h1{
  font-weight:600;
  line-height:1.08;
  /* keep your existing clamp, only font & weight changed */
}

.stitle{
  font-weight:600;
  /* keep your existing clamp size */
}

.card h3{
  font-weight:600;
  font-size:21px; /* keep as in original */
}

/* Body text tone */
.lead,
.about-lead,
.wrap p,
.wrap li{
  font-weight:400;           /* Inter Regular for body */
  line-height:1.7;
}

/* Optional: slightly lighter body for air */
@media (min-width: 880px){
  body{ font-weight:400; }   /* keep 400 on desktop */
}

/* Buttons / UI emphasis */
.btn{ font-weight:600; }
.btn.ghost{ font-weight:600; }

/* Form fields inherit body font already */
input, textarea{ font: inherit; }

/* Accessibility/consistency touch: quotes/italics look great in Lora */
em, blockquote{
  font-family:'Lora', Georgia, "Times New Roman", serif;
  font-style:italic;
}












/* HERO SECTION FIX */
.hero {
  background: linear-gradient(
    180deg,
    rgba(230, 239, 250, 0.45) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(2px);
  padding-block: clamp(80px, 10vh, 140px);
}

/* HERO TEXT SIZE FIX */
.hero h1 {
  font-size: clamp(32px, 4.2vw, 52px); /* slightly smaller for better control */
  line-height: 1.1;
}

/* Optional: make paragraph lighter */
.hero .lead {
  opacity: 0.95;
  font-size: clamp(16px, 1.8vw, 20px);
}










/* Match LIVE hero translucent band exactly */
.hero{
  position: relative;
  /* use the live lavender sand only for hero scope */
  --sand: #e6effa85;
  /* cancel the earlier local "HERO SECTION FIX" background */
  background: transparent;
  backdrop-filter: none;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0 -6vw;                /* stretch slightly wider than content */
  z-index: -1;
  background: linear-gradient(180deg, var(--sand), #fff 70%);
}