:root{
    --stone:#F1F0EC; --paper:#FAFAF8; --ink:#262A27; --muted:#6D716B;
    --sage:#5F6A52; --line:#D9D8D2;
    --serif:"Libre Caslon Display", Georgia, "Times New Roman", serif;
    --sans:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--stone);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--sage);outline-offset:3px}

  /* Header */
  header{position:sticky;top:0;z-index:10;background:rgba(241,240,236,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
  .bar{max-width:1240px;margin:auto;padding:18px 28px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
  .logo{font:400 22px/1 var(--serif);text-decoration:none;letter-spacing:.01em}
  nav{display:flex;gap:28px}
  nav a{text-decoration:none;font-size:15px;color:var(--muted)}
  nav a:hover{color:var(--ink)}

  /* Hero */
  .hero{max-width:1240px;margin:auto;padding:72px 28px 56px}
  .hero h1{font:400 clamp(44px,8.5vw,120px)/.95 var(--serif);letter-spacing:-.015em;max-width:11ch}
  .hero p{margin-top:28px;max-width:34ch;font-size:19px;color:var(--muted)}

  /* Projects */
  .work{max-width:1240px;margin:auto;padding:0 28px 40px}
  .project{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;align-items:end;padding:56px 0;border-top:1px solid var(--line)}
  .project .cover{grid-column:1 / span 8;aspect-ratio:4/3;border:0;background:none;cursor:pointer;overflow:hidden;padding:0}
  .project:nth-child(even) .cover{grid-column:5 / span 8;grid-row:1}
  .project:nth-child(even) .info{grid-column:1 / span 4;grid-row:1;text-align:right}
  .project .info{grid-column:9 / span 4}
  .project h2{font:400 clamp(30px,3.6vw,46px)/1.05 var(--serif)}
  .project .where{color:var(--muted);margin-top:8px;font-size:15px}
  .project .open{margin-top:18px;background:none;border:0;border-bottom:1px solid var(--ink);font:500 15px var(--sans);color:var(--ink);cursor:pointer;padding:0 0 2px}
  .cover img,.cover .ph{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .cover:hover img{transform:scale(1.02)}

  /* Placeholder shown until real photos are added */
  .ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:#E2E1DB;color:var(--muted);font-size:14px;width:100%;height:100%}

  /* About */
  .about{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .about-inner{max-width:1240px;margin:auto;padding:96px 28px;display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
  .about h2{grid-column:1 / span 4;font:400 clamp(34px,4vw,52px)/1.05 var(--serif)}
  .about .copy{grid-column:6 / span 6;font-size:18px;line-height:1.7}
  .about .copy p+p{margin-top:1.1em}

  /* Press */
  .press{max-width:1240px;margin:auto;padding:96px 28px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
  .press h2{grid-column:1 / span 4;font:400 clamp(34px,4vw,52px)/1.05 var(--serif)}
  .press ul{grid-column:6 / span 7;list-style:none;border-top:1px solid var(--line)}
  .press li{border-bottom:1px solid var(--line)}
  .press a{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:22px 0;text-decoration:none}
  .press .pub{font:400 26px/1.15 var(--serif)}
  .press .title{grid-column:1;color:var(--muted);font-size:16px}
  .press .year{grid-column:2;grid-row:1;color:var(--muted);font-size:15px}
  .press a:hover .pub{color:var(--sage)}

  /* Contact */
  .contact{max-width:1240px;margin:auto;padding:96px 28px;display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
  .contact h2{grid-column:1 / span 5;font:400 clamp(34px,4vw,52px)/1.05 var(--serif)}
  .contact .details{margin-top:24px;font-size:17px;line-height:1.9}
  .contact .details a{text-decoration:none;border-bottom:1px solid var(--line)}
  form{grid-column:7 / span 6;display:grid;gap:18px}
  label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
  input,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:12px 14px;border-radius:2px}
  textarea{min-height:140px;resize:vertical}
  form button{justify-self:start;background:var(--ink);color:var(--paper);border:0;padding:14px 26px;font:500 15px var(--sans);cursor:pointer;border-radius:2px}
  form button:hover{background:var(--sage)}

  footer{border-top:1px solid var(--line)}
  footer .bar{font-size:14px;color:var(--muted)}

  /* Gallery viewer */
  dialog{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:var(--stone);color:var(--ink)}
  dialog::backdrop{background:var(--stone)}
  .viewer{height:100%;display:grid;grid-template-rows:auto 1fr auto}
  .viewer-top{display:flex;justify-content:space-between;align-items:baseline;padding:20px 28px}
  .viewer-top h3{font:400 28px/1 var(--serif)}
  .viewer button{background:none;border:0;font:500 15px var(--sans);color:var(--ink);cursor:pointer;padding:8px}
  .stage{display:flex;align-items:center;justify-content:center;padding:0 28px;min-height:0}
  .stage img,.stage .ph{max-height:100%;max-width:100%;object-fit:contain}
  .stage .ph{width:min(900px,100%);aspect-ratio:4/3;height:auto}
  .viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 24px;color:var(--muted);font-size:14px}

  @media (max-width:820px){
    .bar{padding:16px 20px}
    nav{gap:18px}
    .hero{padding:48px 20px 40px}
    .work{padding:0 20px 24px}
    .project,.about-inner,.contact{grid-template-columns:1fr;gap:18px}
    .project .cover,.project:nth-child(even) .cover,.project .info,.project:nth-child(even) .info,
    .about h2,.about .copy,.contact h2,form,.press h2,.press ul{grid-column:1;grid-row:auto;text-align:left}
    .project{padding:40px 0}
    .about-inner,.contact{padding:64px 20px}
    .press{grid-template-columns:1fr;gap:18px;padding:64px 20px 0}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cover img{transition:none}}

  /* ===== Restyle: photo-first, inspired by Lindsay's references ===== */
  :root{--stone:#FDFBF6;--paper:#F7F4EC;--ink:#2B2B29;--muted:#77756E;--line:#E4E0D6;
        --serif:"Archivo","Helvetica Neue",Arial,sans-serif;--sans:"Archivo","Helvetica Neue",Arial,sans-serif}
  body{font-weight:400}
  header.site-head{position:static;background:none;border:0;backdrop-filter:none;
    max-width:1400px;margin:auto;padding:28px 40px 0;display:flex;justify-content:space-between}
  header.site-head nav{gap:56px}
  header.site-head nav a{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  header.site-head nav a:hover{color:var(--muted)}
  .mark{text-align:center;padding:48px 20px 40px}
  .mark a{text-decoration:none;font-weight:600;font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;
    font-size:clamp(20px,3.4vw,46px);line-height:1.1;color:#474744}
  .hero{max-width:1180px;padding:0 40px 24px}
  .slides{position:relative;aspect-ratio:3/2;background:var(--paper);overflow:hidden}
  .slides figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
  .slides figure.on{opacity:1}
  .slides img,.slides .ph{width:100%;height:100%;object-fit:cover}
  .hero p{margin:22px auto 0;text-align:center;max-width:none;font-size:15px;letter-spacing:.06em;color:var(--muted)}
  .project h2,.about h2,.press h2,.contact h2{font-weight:500;font-stretch:108%;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);line-height:1.2}
  .project .open{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
  .press .pub{font:500 18px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
  .viewer-top h3{font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:18px}
  form button{letter-spacing:.12em;text-transform:uppercase;font-size:13px}
  @media (max-width:820px){
    header.site-head{padding:20px 20px 0;justify-content:center;gap:28px}
    header.site-head nav{gap:22px}
    header.site-head nav a{font-size:12px}
    .mark{padding:32px 16px 28px}
    .hero{padding:0 20px 16px}
    .slides{aspect-ratio:4/5}
  }
  @media (prefers-reduced-motion:reduce){.slides figure{transition:none}}

  /* ===== Portfolio grid (like the reference sites) ===== */
  .work{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 40px;padding-top:72px;padding-bottom:40px}
  .work.cols-3{grid-template-columns:repeat(3,1fr)}
  .work .project{display:block;padding:0;border:0}
  .work .project .cover{display:block;width:100%;aspect-ratio:4/3}
  .work .project .info{text-align:center;margin-top:16px}
  .work .project h2{font-size:15px;letter-spacing:.16em;margin:0}
  .work .project h2 button{all:unset;cursor:pointer}
  .work .project h2 button:hover,.work .project h2 button:focus-visible{color:var(--muted)}
  .work .project .where,.work .project .open{display:none}
  @media (max-width:820px){.work,.work.cols-3{grid-template-columns:1fr;gap:40px;padding-top:48px}}

  /* Highlights slideshow: show each photo whole (tall or wide), no cropping */
  .slides{aspect-ratio:auto;height:min(78vh,860px);background:none}
  .slides img{object-fit:contain}
  @media (max-width:820px){.slides{aspect-ratio:auto;height:62vh}}

  /* About with portrait */
  .about-inner{align-items:center}
  .about .portrait{grid-column:1 / span 5;margin:0}
  .about .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .about .about-text{grid-column:7 / span 6}
  .about .about-text h2{margin-bottom:28px}
  .about .about-text .copy{max-width:52ch}
  @media (max-width:820px){.about .portrait,.about .about-text{grid-column:1}}

  /* ===== Variant B: quiet and elegant ===== */
  :root{--serif:"Cormorant Garamond",Georgia,serif}
  header.site-head.b{max-width:1240px;padding:26px 40px 44px;align-items:baseline}
  header.site-head.b nav{gap:22px}
  header.site-head.b nav a{font-size:12px;letter-spacing:.16em}
  .mark-b{text-decoration:none;font:500 22px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
  .hero{max-width:1240px}
  .hero p{display:none}
  .project h2,.about h2,.press h2,.contact h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-stretch:100%;letter-spacing:.2em;font-size:clamp(22px,2.4vw,30px)}
  .work .project h2{font-size:17px}
  .press .pub{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:20px;letter-spacing:.14em}
  .viewer-top h3{font-family:"Cormorant Garamond",Georgia,serif}
  @media (max-width:820px){
    header.site-head.b{flex-direction:column;align-items:center;gap:16px;padding:22px 16px 26px}
    .mark-b{font-size:18px;letter-spacing:.22em;text-align:center}
    header.site-head.b nav{gap:18px}
  }

  /* Contact without form */
  .contact{align-items:end}
  .contact > div:first-child{grid-column:1 / span 5}
  .contact-cta{grid-column:7 / span 6}
  .contact-cta p{color:var(--muted);margin-bottom:14px}
  .email-big{font:500 clamp(20px,2.4vw,30px)/1.2 "Cormorant Garamond",Georgia,serif;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--line);word-break:break-word}
  .email-big:hover{color:var(--muted)}
  @media (max-width:820px){.contact-cta,.contact > div:first-child{grid-column:1}}

  /* ===== Multi-page layout ===== */
  header.site-head.b nav{align-items:center}
  header.site-head.b nav a[aria-current="page"]{color:var(--muted);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
  header.site-head.b nav a.ig{display:inline-flex;align-items:center;margin-left:2px}
  body.home .hero{padding-bottom:0}
  body.home .slides{height:calc(100vh - 160px);height:calc(100svh - 160px);min-height:320px}
  .work{padding-top:16px}
  .page-main{min-height:calc(100vh - 220px)}
  .about{background:none;border:0}
  .about-inner{padding-top:24px;align-items:start}
  .about .portrait{position:sticky;top:24px}
  .about .about-text h2.sub{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
  .about .about-text .copy p{margin:0 0 1.1em}
  .about .about-text .copy p{font-family:"EB Garamond",Georgia,"Times New Roman",serif;font-size:19px;line-height:1.65;color:var(--ink)}
  @media (max-width:820px){.about .portrait{position:static}.about .about-text .copy p{font-size:18px}}
  .press{padding-top:24px;padding-bottom:96px;align-items:start}
  .press .press-img{grid-column:1 / span 5;margin:0;position:sticky;top:24px}
  .press .press-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .press .press-list{grid-column:7 / span 6}
  .press .press-list h2{margin-bottom:24px}
  .press .press-list ul{grid-column:auto}
  @media (max-width:820px){.press .press-img{position:static}.press .press-img,.press .press-list{grid-column:1}}
  .contact-page{max-width:720px;margin:auto;padding:12vh 28px 96px;text-align:center}
  .contact-page p{font-family:"EB Garamond",Georgia,"Times New Roman",serif;font-size:20px;line-height:1.5;color:var(--ink);margin-bottom:18px}
  .contact-page .email-big{display:inline-block}
  .contact-page .ig-line{margin-top:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
  .contact-page .ig-line a{display:inline-flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
  .contact-page .ig-line a:hover{color:var(--muted)}
  .contact-page .where{margin-top:14px;font-size:14px;color:var(--muted)}
  footer .bar{justify-content:center}
  @media (max-width:820px){
    body.home .slides{height:calc(100svh - 190px)}
    .contact-page{padding-top:8vh}
  }