*{box-sizing:border-box}html{scroll-behavior:smooth}:root{--bg:#f4f0e9;--ink:#1b1918;--wine:#5b2431;--sand:#dfd0bd;--line:#cfc6bb}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}a{color:inherit}header{height:68px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,240,233,.94);backdrop-filter:blur(12px);z-index:20}.logo{text-decoration:none;font-weight:600;font-size:14px}nav{display:flex;gap:26px}nav a{text-decoration:none;font-size:12px}.hero{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1.08fr .92fr;padding:4vw;gap:5vw;align-items:center}.label,.section-tag{font-size:10px;letter-spacing:.16em;font-weight:600}.hero h1{font:400 clamp(50px,6.5vw,100px)/.93 "Instrument Serif";max-width:820px;margin:24px 0 28px}.intro{font-size:17px;line-height:1.55;max-width:470px}.hero-links{display:flex;gap:28px;margin-top:35px}.hero-links a{font-size:12px;text-underline-offset:5px}.hero-photo{height:72vh;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%}.about,.work,.ideas{padding:9vw 6vw;border-top:1px solid var(--line);display:grid;grid-template-columns:180px 1fr;gap:4vw}.about h2,.work h2,.experience h2,.ideas h2,.life h2,.end h2{font:400 clamp(43px,5.4vw,78px)/.96 "Instrument Serif";margin:0 0 45px}.about h2 em,.experience em{color:var(--wine);font-weight:400}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5vw;max-width:900px}.two-col p,.life p{font-size:15px;line-height:1.75}.quote{font:400 clamp(31px,4vw,55px)/1.05 "Instrument Serif";color:var(--wine);max-width:850px;margin:70px 0 0}.photo-strip{height:72vh;position:relative;background:#111;overflow:hidden}.photo-strip img{width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:.8}.strip-copy{position:absolute;left:6vw;right:6vw;bottom:5vw;color:white}.strip-copy span{font-size:10px;letter-spacing:.16em}.strip-copy p{font:400 clamp(30px,4.2vw,60px)/1 "Instrument Serif";margin:15px 0}.work-head{display:flex;justify-content:space-between;gap:50px;align-items:end}.work-head p{font-size:14px;max-width:330px;line-height:1.6}.menu{grid-column:2;margin-top:30px;border-top:1px solid var(--ink)}.menu>a{display:grid;grid-template-columns:55px 1fr 30px;gap:20px;padding:30px 5px;border-bottom:1px solid var(--line);text-decoration:none;align-items:center;transition:.2s}.menu>a:hover{padding-left:15px;background:rgba(91,36,49,.04)}.menu .n,.menu small{font-size:9px;letter-spacing:.13em}.menu h3{font:400 clamp(25px,2.5vw,38px)/1.05 "Instrument Serif";margin:7px 0 0}.menu b{font-size:20px;font-weight:400}.experience{background:var(--wine);color:var(--bg);padding:8vw 6vw;display:grid;grid-template-columns:1.2fr .55fr;gap:7vw;align-items:end}.experience h2{margin-top:28px}.experience em{color:var(--sand)}.experience img{width:100%;aspect-ratio:4/5;object-fit:cover}.ideas-head{grid-column:2}.idea-grid{grid-column:2;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.idea-grid div{min-height:220px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}.idea-grid span{font-size:9px}.idea-grid p{font:400 clamp(26px,2.8vw,40px)/1.04 "Instrument Serif";margin:0}.life{display:grid;grid-template-columns:1fr 1fr;min-height:75vh}.life-photo img{width:100%;height:100%;object-fit:cover}.life-copy{padding:8vw 7vw;align-self:center}.life-copy h2{margin-top:30px}.end{background:var(--sand);padding:10vw 6vw}.end h2{font-size:clamp(70px,10vw,150px);margin:25px 0 70px}.contact-links{display:flex;gap:30px;flex-wrap:wrap}.contact-links a{font-size:13px;text-underline-offset:6px}.pronounce{margin-top:10vw;padding-top:35px;border-top:1px solid #b8a995;display:flex;align-items:end;justify-content:space-between}.pronounce strong{font:400 clamp(60px,9vw,130px)/.8 "Instrument Serif"}.pronounce span{font-size:12px}footer{padding:28px 4vw;background:var(--ink);color:var(--bg);display:flex;justify-content:space-between;font-size:10px}footer a{color:inherit}
@media(max-width:760px){header{padding:0 5vw}nav{display:none}.hero{grid-template-columns:1fr;padding:10vw 5vw 12vw}.hero-copy{order:1}.hero-photo{order:2;height:55vh;margin-top:25px}.hero h1{font-size:15vw}.about,.work,.ideas{padding:18vw 5vw;display:block}.section-tag{display:block;margin-bottom:35px}.two-col{grid-template-columns:1fr;gap:0}.photo-strip{height:65vh}.work-head{display:block}.menu{margin-top:45px}.menu>a{grid-template-columns:35px 1fr 20px;padding:25px 0}.experience{grid-template-columns:1fr;padding:18vw 5vw}.experience img{max-height:520px}.ideas-head{margin-top:0}.idea-grid{grid-template-columns:1fr}.idea-grid div{min-height:160px}.life{grid-template-columns:1fr}.life-photo{height:58vh}.life-copy{padding:16vw 5vw}.end{padding:20vw 5vw}.pronounce{display:block}.pronounce span{display:block;margin-top:30px}}
@media(max-width:760px){.hero-photo img{object-position:center 24%}}

/* V7 — dark brand opening */
header{
  background:rgba(53,21,29,.97);
  color:#F7F3ED;
  border-bottom:1px solid rgba(247,243,237,.18);
}
.hero{
  background:#35151D;
  color:#F7F3ED;
}
.hero .label{color:#E8D9C5}
.hero .intro{color:#F7F3ED}
.hero-links a{color:#E8D9C5}
.hero h1{color:#F7F3ED}

/* V8 — workspace image without duplicated text overlay */
.photo-strip.photo-only{height:52vh;min-height:360px}
.photo-strip.photo-only img{opacity:1;object-fit:cover;object-position:center center}
@media(max-width:760px){
  .photo-strip.photo-only{height:42vh;min-height:280px}
}

/* V11 — mobile content/photo alternation */
@media(max-width:760px){
  .experience{display:flex;flex-direction:column;gap:36px}
  .experience>div{order:1}
  .experience>img{order:2;width:100%;margin:0}
  .life{display:flex;flex-direction:column}
  .life-copy{order:1}
  .life-photo{order:2}
}

/* V12 — contact icons and responsive process graphic */
.contact-links a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.contact-links a span{
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
}
.contact-links svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:760px){
  .contact-links{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    align-items:start;
  }
  .contact-links a{
    font-size:12px;
    min-width:0;
  }
  .contact-links svg{
    width:27px;
    height:27px;
  }

  /* Do not crop the process graphic on phones. */
  .photo-strip.photo-only{
    height:auto !important;
    min-height:0 !important;
    overflow:visible;
    background:#35151D;
  }
  .photo-strip.photo-only img{
    display:block;
    width:100%;
    height:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}

/* V14 — clearer opening, duplicated access icons, dark pathway block */

/* Make the opening photo and copy feel like one intentional introduction. */
.hero{
  background:#F4EEE5;
  color:#26191A;
}
.hero h1,.hero .intro{color:#26191A}
.hero .label{color:#642334}
.hero-links a{color:#26191A}
header{
  background:#35151D;
  color:#F7F3ED;
}

/* Access shortcuts immediately below the opening message. */
.hero-access{
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid rgba(38,25,26,.22);
}
.hero-access .contact-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.hero-access .contact-links a{
  color:#35151D;
}

/* The four conversion paths become the darker follow-on block. */
.choices{
  background:#35151D !important;
  color:#F7F3ED !important;
}
.choices h2,.choices p,.choices small,.choices span,.choices a{
  color:#F7F3ED !important;
}
.choices .choice,
.choices a{
  border-color:rgba(232,217,197,.35) !important;
}

/* Replace platform/emoji arrows with a restrained brand arrow. */
.choices a{
  position:relative;
  padding-right:76px !important;
}
.choices a::after{
  content:"→";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:1px solid #D7B16C;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#D7B16C;
  font-family:Arial,sans-serif;
  font-size:22px;
  line-height:1;
}

@media(max-width:760px){
  /* Opening returns to light brand surface so it works with the photo. */
  .hero{
    background:#F4EEE5 !important;
    color:#26191A !important;
  }
  .hero h1,.hero .intro{color:#26191A !important}
  .hero .label{color:#642334 !important}

  .hero-access{
    margin:28px 0 8px;
    padding-top:24px;
  }
  .hero-access .contact-links{
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }
  .hero-access .contact-links a{
    color:#35151D !important;
    font-size:11px;
    text-align:center;
  }
  .hero-access .contact-links svg{
    width:25px;
    height:25px;
  }

  .choices{
    background:#35151D !important;
    color:#F7F3ED !important;
  }
  .choices a{
    padding-right:62px !important;
  }
  .choices a::after{
    right:12px;
    width:36px;
    height:36px;
    font-size:20px;
  }
}

/* =========================================================
   V17 — CREATIVE DIRECTION
   Editorial hierarchy, reduced visual noise, mobile-first rhythm
   ========================================================= */

:root{
  --ink:#211819;
  --wine:#35151D;
  --wine2:#642334;
  --paper:#F4EEE5;
  --sand:#E7D7C1;
  --gold:#CBA66B;
}

/* 1. Editorial opening */
.hero{
  background:var(--paper) !important;
  color:var(--ink) !important;
}
.hero h1{
  max-width:760px;
  letter-spacing:-.035em;
  line-height:.92;
}
.hero .intro{
  max-width:560px;
  line-height:1.45;
}
.hero-access{
  opacity:.88;
}
.hero-access .contact-links svg{
  width:23px;
  height:23px;
  stroke-width:1.35;
}

/* 2. Fewer visual languages: thin rules, typography, photography */
section{border-color:rgba(33,24,25,.16)}
.label,.eyebrow,.method-label{
  letter-spacing:.18em;
  font-size:10px;
  font-weight:600;
}
.contact-links svg{stroke-width:1.35}

/* 3. Experience becomes a proof point rather than a CV block */
.experience h2{
  max-width:760px;
  letter-spacing:-.025em;
}
.experience em{
  display:block;
  margin-top:.15em;
}

/* 4. Method: typography carries the idea; image is context only */
.photo-strip.photo-only{
  margin-bottom:0 !important;
}
.method{
  background:var(--wine);
  color:var(--paper);
  padding:52px max(48px,calc((100vw - 1240px)/2));
  border:0;
}
.method-label{
  color:var(--sand);
  margin-bottom:24px;
}
.method-flow{
  display:flex;
  align-items:center;
  gap:18px;
  white-space:nowrap;
}
.method-flow span{
  font-family:var(--serif, Georgia, serif);
  font-size:clamp(29px,3vw,52px);
  line-height:1;
  letter-spacing:-.03em;
}
.method-flow i{
  font-style:normal;
  font-family:Arial,sans-serif;
  font-size:22px;
  color:var(--gold);
}

/* 5. Conversion pathways: editorial, not link-in-bio */
.choices{
  background:var(--wine) !important;
  color:var(--paper) !important;
}
.choices a::after{
  content:"→" !important;
  background:transparent !important;
  border:0 !important;
  width:auto !important;
  height:auto !important;
  color:var(--gold) !important;
  font-size:28px !important;
}
.choices small{
  letter-spacing:.17em;
}
.choices a{
  transition:padding-left .25s ease, background .25s ease;
}
@media(hover:hover){
  .choices a:hover{
    padding-left:10px;
    background:rgba(255,255,255,.025);
  }
}

/* 6. Family photo: preserve the celebration context */
.life-photo img,
img[src*="family.jpg"]{
  object-position:center 42% !important;
}

/* Closing shortcuts remain secondary */
.contact-links a{
  opacity:.9;
}
.contact-links a:hover{
  opacity:1;
}

/* MOBILE — composed as its own editorial page */
@media(max-width:760px){
  body{overflow-x:hidden}

  .hero{
    padding-top:42px !important;
    padding-bottom:46px !important;
  }
  .hero h1{
    font-size:clamp(54px,15vw,76px) !important;
    line-height:.9 !important;
    max-width:100%;
    margin-bottom:28px;
  }
  .hero .intro{
    font-size:17px;
    max-width:94%;
  }
  .hero-access{
    margin-top:32px;
  }
  .hero-access .contact-links{
    grid-template-columns:repeat(2,1fr) !important;
    gap:22px 14px !important;
  }
  .hero-access .contact-links a{
    flex-direction:row !important;
    justify-content:flex-start;
    text-align:left !important;
    font-size:12px !important;
  }
  .hero-access .contact-links a span{
    border-bottom:0;
    text-align:left;
  }

  .experience{
    gap:28px !important;
  }
  .experience h2{
    font-size:clamp(42px,12vw,60px);
    line-height:.95;
  }

  /* Process image displays naturally; method becomes vertical */
  .photo-strip.photo-only{
    height:auto !important;
    overflow:hidden !important;
  }
  .photo-strip.photo-only img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  .method{
    padding:42px 30px 48px;
  }
  .method-flow{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    white-space:normal;
  }
  .method-flow span{
    font-size:46px;
    line-height:.98;
  }
  .method-flow i{
    transform:rotate(90deg);
    margin:1px 0 1px 5px;
    font-size:19px;
  }

  /* Four paths: strong dark chapter, minimal arrow */
  .choices{
    padding-top:50px !important;
    padding-bottom:54px !important;
  }
  .choices a{
    padding-right:42px !important;
  }
  .choices a::after{
    right:4px !important;
    font-size:24px !important;
  }

  /* Keep family as a real photo, not a tight portrait crop */
  .life-photo,
  .life-photo img,
  img[src*="family.jpg"]{
    height:auto !important;
    min-height:0 !important;
  }
  .life-photo img,
  img[src*="family.jpg"]{
    width:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* Closing links: no link-tree feeling */
  .contact-links{
    grid-template-columns:repeat(2,1fr) !important;
    gap:24px 16px !important;
  }
  .contact-links a{
    flex-direction:row !important;
    justify-content:flex-start;
    text-align:left;
  }
  .contact-links a span{
    border-bottom:0 !important;
    text-align:left !important;
    font-size:12px !important;
  }
}