:root {
  --paper:#fffdf8;
  --canvas:#e7e8e1;
  --ink:#1c201d;
  --body:#444d46;
  --muted:#69736b;
  --line:#d8ddd5;
  --accent:#41654a;
  --warm:#ad5f3c;
  --shadow:0 16px 48px rgba(32,35,31,.12);
  --max-width:1020px;
  --sans:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:96px; }

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.52;
  text-rendering:optimizeLegibility;
}

::selection { background:var(--accent); color:var(--paper); }

a { color:inherit; text-decoration-color:var(--line); text-underline-offset:3px; }
a:hover { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }

.site-header, main, .site-footer { width:min(var(--max-width),calc(100% - 48px)); margin:0 auto; }

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:76px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--canvas) 94%,transparent);
  backdrop-filter:blur(10px);
}

.wordmark { font-size:18px; font-weight:700; letter-spacing:-.055em; text-decoration:none; }
.wordmark span { color:var(--accent); }

.nav-links { display:flex; gap:clamp(18px,3.3vw,36px); color:var(--muted); font-size:13px; }
.nav-links a { position:relative; padding:4px 0; text-decoration:none; transition:color 180ms ease; }
.nav-links a::after { content:""; position:absolute; right:0; bottom:0; left:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform 180ms ease; }
.nav-links a:hover,.nav-links a:focus-visible { color:var(--accent); }
.nav-links a:hover::after,.nav-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }

.hero {
  display:grid;
  grid-template-columns:minmax(160px,208px) minmax(0,1fr);
  gap:clamp(42px,6.2vw,70px);
  align-items:center;
  padding:clamp(58px,8vw,86px) 0 clamp(62px,8vw,90px);
}

.portrait-panel { margin:0; }
.portrait-panel picture { display:block; overflow:hidden; border-radius:50%; box-shadow:var(--shadow); }
.portrait-panel img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.portrait-panel figcaption { margin-top:10px; color:var(--muted); font-size:12px; text-align:center; }

h1,h2,h3,p { margin-top:0; }

.role-line { margin:0 0 10px; color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.01em; }
h1 { margin-bottom:15px; font-size:clamp(39px,5.25vw,64px); line-height:.96; letter-spacing:-.065em; }
.hero-headline { max-width:560px; margin-bottom:12px; font-size:clamp(23px,2.5vw,31px); font-weight:600; line-height:1.17; letter-spacing:-.035em; }
.lede { max-width:610px; margin-bottom:0; color:var(--body); font-size:17px; }

.action-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.action-list a { padding:9px 12px; border:1px solid var(--line); border-radius:5px; color:var(--body); font-size:13px; font-weight:700; text-decoration:none; }
.action-list a:hover { border-color:var(--accent); background:#f5f8f2; }
.action-list .primary-action { border-color:var(--accent); background:var(--accent); color:var(--paper); }
.action-list .primary-action:hover { background:#315a3e; }
.action-list span { margin-left:4px; }

.section { padding:clamp(36px,5vw,60px) 0; border-top:1px solid var(--line); }
h2 { margin-bottom:17px; font-size:21px; line-height:1.12; letter-spacing:-.025em; }
h2::after { content:""; display:block; width:31px; height:1px; margin-top:10px; background:var(--warm); }

.section-body p { max-width:780px; margin-bottom:0; color:var(--body); font-size:clamp(17px,1.8vw,20px); line-height:1.55; }
.recipe-link { display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:700; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
.recipe-link svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; transition:transform 180ms ease; }
.recipe-link:hover svg,.recipe-link:focus-visible svg { transform:translateX(3px); }

.example-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,44px); }
.example-grid article { padding-top:15px; border-top:1px solid var(--line); }
.example-grid h3 { margin-bottom:8px; color:var(--accent); font-size:15px; font-weight:700; }
.example-grid p { margin-bottom:0; color:var(--body); font-size:15px; line-height:1.5; }
.example-grid strong { color:var(--ink); font-weight:700; }

.featured-work { display:grid; grid-template-columns:140px minmax(0,1fr) 165px; gap:28px; padding:21px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.work-date { margin:0; color:var(--accent); font-size:13px; font-weight:700; }
.featured-work h3 { margin-bottom:8px; font-size:18px; line-height:1.24; letter-spacing:-.02em; }
.featured-work div > p { margin-bottom:0; color:var(--body); font-size:15px; line-height:1.52; }
.featured-work .work-company { align-self:start; }

.work-list { display:grid; padding:0; margin:0; list-style:none; }
.work-list li { display:grid; grid-template-columns:140px minmax(0,1fr) 165px; gap:28px; padding:20px 0; border-bottom:1px solid var(--line); }
.work-list h3 { margin-bottom:6px; font-size:17px; letter-spacing:-.02em; }
.work-list p { max-width:610px; margin-bottom:0; color:var(--body); font-size:14px; line-height:1.48; }
.work-company { color:var(--body); text-align:right; font-size:13px; }
.section-link { margin:18px 0 0; color:var(--accent); font-size:14px; font-weight:700; }
.text-link { display:inline-flex; align-items:center; gap:5px; }
.text-link svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; transition:transform 180ms ease; }
.text-link:hover svg,.text-link:focus-visible svg { transform:translateX(3px); }

.section-intro { max-width:660px; margin:0 0 23px; color:var(--body); font-size:16px; }
.project-index { border-top:1px solid var(--line); }
.project-index article { display:grid; grid-template-columns:160px minmax(0,1fr); gap:32px; padding:16px 0; border-bottom:1px solid var(--line); }
.project-index h3 { margin:0; font-size:16px; }
.project-index h3 a { color:var(--accent); text-decoration:none; }
.project-index h3 a:hover { text-decoration:underline; }
.project-link { display:inline-flex; align-items:center; gap:5px; }
.project-link svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; transition:transform 180ms ease; }
.project-link:hover svg,.project-link:focus-visible svg { transform:translateX(3px); }
.project-index p { margin:0; color:var(--body); font-size:14px; }
.project-index p a { color:var(--accent); text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
.contact-copy { max-width:580px; margin-bottom:0; color:var(--body); font-size:17px; }
.compact { margin-top:19px; }

.site-footer { display:flex; justify-content:space-between; gap:20px; padding:28px 0 38px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

.mobile-audio-note { display:none; }

.recipe-page { padding:clamp(58px,8vw,88px) 0; }
.recipe { max-width:860px; }
.recipe-header { max-width:720px; padding-bottom:clamp(38px,5vw,58px); border-bottom:1px solid var(--line); }
.recipe-header h1 { max-width:650px; margin-bottom:16px; font-size:clamp(40px,5vw,62px); }
.recipe-meta { margin:0; color:var(--body); font-size:17px; }
.recipe-controls { display:flex; flex-wrap:wrap; align-items:end; gap:15px 24px; margin-top:28px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.recipe-controls label { display:grid; gap:5px; color:var(--accent); font-size:12px; font-weight:700; }
.recipe-controls .control-label { color:var(--accent); }
.recipe-controls .control-label small { color:var(--muted); font:500 12px var(--sans); }
.recipe-controls input { width:96px; padding:5px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:0; background:transparent; color:var(--ink); font:700 18px var(--sans); }
.recipe-controls input:focus { border-bottom-color:var(--accent); }
.recipe-controls p { margin:0 0 3px auto; color:var(--muted); font-size:13px; }
.recipe-controls output { color:var(--ink); font-weight:700; }
.recipe-controls .recipe-warning { width:100%; margin:0; color:var(--warm); font-size:13px; font-weight:700; }
.recipe-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(42px,8vw,84px); padding-top:clamp(38px,5vw,58px); }
.recipe h2 { margin-bottom:16px; font-size:20px; }
.recipe h3 { margin:23px 0 8px; color:var(--accent); font-size:14px; }
.recipe-ingredients { align-self:start; position:sticky; top:108px; }
.recipe-ingredients ul { margin:0; padding-left:17px; color:var(--body); font-size:14px; line-height:1.55; }
.recipe-ingredients dl { margin:0; color:var(--body); font-size:14px; }
.recipe-ingredients dl div { display:flex; justify-content:space-between; gap:20px; padding:5px 0; border-bottom:1px solid var(--line); }
.recipe-ingredients dt,.recipe-ingredients dd { margin:0; }
.recipe-method section { padding:0 0 34px; margin:0 0 34px; border-bottom:1px solid var(--line); }
.recipe-method section:last-child { margin-bottom:0; }
.recipe-method p { margin:0 0 15px; color:var(--body); font-size:16px; line-height:1.62; }
.recipe-method p:last-child { margin-bottom:0; }
.recipe-method strong { color:var(--ink); font-weight:700; }
.recipe-pause { padding-left:14px; border-left:2px solid var(--warm); color:var(--ink) !important; font-weight:700; }

@media (max-width:700px) {
  .site-header, main, .site-footer { width:calc(100% - 40px); }
  .site-header { min-height:66px; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; gap:25px; padding:45px 0 50px; }
  .portrait-panel { width:144px; }
  h1 { font-size:44px; }
  .hero-headline { font-size:24px; }
  .example-grid { grid-template-columns:1fr; gap:21px; }
  .featured-work,.work-list li { grid-template-columns:1fr; gap:8px; }
  .work-company { text-align:left; }
  .featured-work { gap:10px; }
  .project-index article { grid-template-columns:1fr; gap:5px; }
  .site-footer { align-items:flex-start; flex-direction:column; }
  .mobile-audio-note { display:block; margin:-25px 0 27px; color:var(--warm); font-size:13px; font-weight:700; line-height:1.45; }
  .recipe-page { padding:45px 0; }
  .recipe-controls { align-items:end; }
  .recipe-controls p { width:100%; margin:0; }
  .recipe-layout { grid-template-columns:1fr; gap:42px; }
  .recipe-ingredients { position:static; }
}