/* Layout: editorial lookbook — oversized Bodoni headings, tall portrait, quiet generous whitespace; one shared stylesheet for every page */
:root{
  --bg:#F8F4F3; --surface:#FFFFFF; --ink:#1F191C; --muted:#5E5457; --line:#E2D8D7;
  --rose:#A8727C; --rose-soft:#EFE1E1; --plum:#2A2125;
  --display:"Playfair Display","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#151113; --surface:#1D181A; --ink:#EFE7E5; --muted:#A99C9E; --line:#342C2F;
  --rose:#D3A2AA; --rose-soft:#2A2124; --plum:#0E0B0C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151113; --surface:#1D181A; --ink:#EFE7E5; --muted:#A99C9E; --line:#342C2F;
  --rose:#D3A2AA; --rose-soft:#2A2124; --plum:#0E0B0C; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.7;
  padding-inline:clamp(16px,5vw,64px);padding-block:0;
  padding-top:env(safe-area-inset-top,0px);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid var(--rose);outline-offset:4px}
.wrap{max-width:1120px;margin-inline:auto;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:26px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-family:var(--display);font-size:21px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.brand i{color:var(--rose)}
.nav ul{display:flex;gap:clamp(16px,3vw,40px);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink);border-color:var(--rose)}

/* shared type */
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);margin:0 0 22px}
h1{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--rose)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:0 0 18px;text-wrap:balance}
p{margin:0 0 20px;max-width:62ch}
.page-head{padding-block:clamp(56px,9vw,112px) clamp(36px,5vw,56px)}
.page-head h1{font-size:clamp(52px,9vw,112px)}
.link-arrow{display:inline-flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--ink);transition:gap .3s}
.link-arrow:hover{gap:16px}
@keyframes rise{from{transform:translateY(14px);opacity:.001}to{transform:none;opacity:1}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.32s}

/* portrait frame */
.portrait{position:relative;margin:0;max-width:100%;isolation:isolate}
.portrait img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 20%}
.portrait::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--rose);z-index:-1}

/* HOME */
.home{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,6vw,88px);align-items:center;padding-block:clamp(48px,8vw,96px)}
.home-text{min-width:0}
.home .portrait{max-width:420px;justify-self:end;width:100%}
.home h1{font-size:clamp(60px,11vw,150px);line-height:.86}
.home h1 span{display:block}
.home h1 em{padding-left:.5em}
.tagline{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.35;margin:40px 0 0;max-width:24ch;color:var(--muted)}
.home-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line)}
.home-links a{display:flex;flex-direction:column;gap:4px;padding:18px 18px 18px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.home-links a + a{padding-left:18px;border-left:1px solid var(--line)}
.home-links small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.home-links span{font-family:var(--display);font-size:22px;transition:color .3s}
.home-links a:hover span{color:var(--rose)}

/* ABOUT */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,88px);align-items:start;padding-bottom:clamp(64px,9vw,112px)}
.about .portrait{position:sticky;top:32px;max-width:400px}
.about-text{min-width:0}
.about-text .lead{font-family:var(--display);font-size:clamp(24px,2.8vw,32px);line-height:1.35;max-width:28ch;margin-bottom:36px}
.about-text h2{margin-top:44px}
.about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 36px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.about-facts dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin-bottom:4px}
.about-facts dd{margin:0;font-size:16px}

/* PORTFOLIO list */
.projects{display:grid;gap:0;padding-bottom:clamp(64px,9vw,112px)}
.project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(32px,5vw,56px);border-top:1px solid var(--line);text-decoration:none}
.project-text{min-width:0}
.project h2{font-size:clamp(30px,3.8vw,44px);transition:color .3s}
.project h2 a{text-decoration:none;transition:color .3s}
.project h2 a:hover{color:var(--rose)}
.cover-link{display:block;text-decoration:none}
.project p{color:var(--muted);font-size:16px}
.project .meta{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:14px}

/* typographic covers (stand-ins until real project images) */
.cover{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,3vw,32px);background:var(--plum);color:#F3E9E8}
.cover .c-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.cover .c-word{font-family:var(--display);font-size:clamp(40px,6vw,76px);line-height:.9;letter-spacing:-.01em}
.cover .c-word em{font-style:italic}
.cover::after{content:"";position:absolute;inset:12px;border:1px solid rgba(243,233,232,.25);pointer-events:none;transition:inset .5s}
.cover-link:hover .cover::after{inset:20px}
.cover.gucci{background:#1E3128;color:#EADFC6}
.cover.gucci .c-word em{color:#C9A55C}
.cover.markstrat{background:#2A2125}
.cover.markstrat .c-word em{color:#D3A2AA}
.cover.pampers{background:#DCE6EE;color:#1E3550}
.cover.pampers::after{border-color:rgba(30,53,80,.25)}
.cover.bj{background:#EFE3CF;color:#3A2418}
.cover.bj::after{border-color:rgba(58,36,24,.22)}
.cover.bj .c-word em{color:#8E4A2E}

/* PROJECT page */
.p-head{padding-block:clamp(48px,8vw,96px) clamp(28px,4vw,44px)}
.p-head h1{font-size:clamp(42px,7vw,88px);max-width:16ch}
.p-head .back{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:36px}
.p-head .back:hover{color:var(--ink)}
.p-cover{margin-bottom:clamp(40px,6vw,72px)}
.p-cover .cover{aspect-ratio:3/1}
.p-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-bottom:clamp(48px,7vw,88px)}
.facts{margin:0;display:grid;gap:22px;align-content:start;border-top:1px solid var(--ink);padding-top:22px}
.facts dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin-bottom:2px}
.facts dd{margin:0;font-size:16px}
.facts .big{font-family:var(--display);font-size:40px;line-height:1}
.p-text{min-width:0}
.p-text h2{margin-top:40px}
.p-text h2:first-child{margin-top:0}
.p-text ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:14px;max-width:62ch}
.p-text li{padding-left:28px;position:relative}
.p-text li::before{content:"";position:absolute;left:0;top:.85em;width:14px;height:1px;background:var(--rose)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tags span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:4px 11px;color:var(--muted)}
.next{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-block:36px;border-top:1px solid var(--line);text-decoration:none;margin-bottom:24px}
.next small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.next span{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);transition:color .3s}
.next:hover span{color:var(--rose)}

/* CONTACTS */
.contact{display:grid;grid-template-columns:minmax(0,760px);gap:clamp(32px,6vw,88px);padding-bottom:clamp(64px,9vw,112px);align-items:start}
.contact-list{display:grid;gap:0;border-top:1px solid var(--ink);min-width:0}
.c-row{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;padding-block:24px;border-bottom:1px solid var(--line);text-decoration:none;flex-wrap:wrap}
.c-row .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);width:100%}
.c-row .v{text-decoration:none;font-family:var(--display);font-size:clamp(22px,2.8vw,32px);word-break:break-word;transition:color .3s}
a.c-row:hover .v{color:var(--rose)}
.c-row button{font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--muted);padding:7px 14px;cursor:pointer;border-radius:0;-webkit-appearance:none}
.c-row button:hover{border-color:var(--rose);color:var(--ink)}
.contact-note{background:var(--rose-soft);padding:clamp(28px,4vw,44px)}
.contact-note p{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.4;margin:0 0 16px}
.contact-note small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;padding-block:32px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:860px){
  .home,.about,.contact{grid-template-columns:1fr}
  .home .portrait{max-width:340px;order:-1;justify-self:start}
  .about .portrait{position:static;max-width:340px}
  .project{grid-template-columns:1fr}
  .p-body{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-cover .cover{aspect-ratio:16/9}
}
@media (max-width:560px){
  .home-links{grid-template-columns:1fr}
  .home-links a + a{padding-left:0;border-left:0}
  .about-facts{grid-template-columns:1fr}
  .portrait::before{inset:12px -10px -12px 12px}
  .nav{justify-content:center}
  .nav ul{justify-content:center;gap:18px}
}
.p-text strong{font-weight:500}

[hidden]{display:none!important}
.page{animation:fade .5s ease both}
@keyframes fade{from{opacity:.001}to{opacity:1}}
.portrait.bw img{filter:grayscale(1) contrast(1.05)}
.page-head h1{font-size:clamp(52px,8vw,104px)}
.home{min-height:0}
.home .link-arrow{margin-top:40px}
.about-text p{font-size:18px}
.contact-mark{background:var(--plum);color:#F3E9E8;aspect-ratio:4/5;max-width:100%;display:flex;align-items:center;justify-content:center;gap:.08em;font-family:var(--display);font-size:clamp(72px,10vw,140px);line-height:1;position:relative}
.contact-mark i{color:#D3A2AA;font-size:.8em}
.contact-mark::after{content:"";position:absolute;inset:14px;border:1px solid rgba(243,233,232,.25)}
@media (max-width:860px){.contact-mark{aspect-ratio:16/9}}
.c-row .url{width:100%;font-size:14px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;word-break:break-all;margin-top:-6px}
a.c-row:hover .url{color:var(--rose)}
.doc{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:36px;padding:24px 28px;background:var(--rose-soft);max-width:62ch}
.doc small{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.doc span{font-family:var(--display);font-size:24px}
.doc-btn{font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--bg);padding:12px 20px;transition:background .3s}
.doc-btn:hover{background:var(--rose)}

/* image covers + gallery + chart */
.cover.img{padding:0;background:var(--rose-soft);display:block}
.cover.img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.cover.img::after{border-color:rgba(255,255,255,.0)}
.p-cover .cover.img{aspect-ratio:auto;max-height:none}
.p-cover .cover.img img{height:auto;max-height:640px;object-fit:contain;background:var(--surface)}
.p-end{padding:0}
.gallery{padding-bottom:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,36px);border-top:1px solid var(--line);padding-top:clamp(32px,5vw,56px)}
.gallery h2{grid-column:1/-1;margin:0}
.gallery figure{margin:0;min-width:0}
.gallery figure:only-of-type{grid-column:1/-1}
.gallery img{width:100%;height:auto;border:1px solid var(--line);background:var(--surface);transition:opacity .3s}
.gallery a:hover img{opacity:.88}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:10px;max-width:60ch}
.chart{margin:40px 0 0;padding:24px 24px 16px;border:1px solid var(--line);background:var(--surface);max-width:62ch}
.chart figcaption small{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}
.chart figcaption span{font-family:var(--display);font-size:22px}
.spi{width:100%;height:auto;margin-top:12px;overflow:visible}
.spi .g{stroke:var(--line);stroke-width:1}
.spi .ax{fill:var(--muted);font-family:var(--body);font-size:12px}
.spi .lab{fill:var(--muted);font-family:var(--body);font-size:14px}
.spi .lab.me{fill:var(--ink);font-weight:500}
.spi .bar{fill:var(--line)}
.spi .bar.me{fill:var(--rose)}
.spi .val{fill:var(--muted);font-family:var(--body);font-size:13px;font-variant-numeric:tabular-nums}
.spi .val.me{fill:var(--ink);font-weight:500}
.chart .note{font-size:12px;color:var(--muted);margin:8px 0 0}
@media (max-width:860px){.gallery{grid-template-columns:1fr}}
.foot .legal{flex-basis:100%;order:3;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--muted);opacity:.8}
@media (max-width:560px){.foot nav{gap:14px}.foot{font-size:11px}}

/* --- trial: motifs, hover, rounded style --- */
.cover{border-radius:18px}
.cover::after{border-radius:12px}
.cover .c-word{transform-origin:left bottom;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cover-link:hover .c-word,.project:hover .c-word{transform:scale(1.045)}
.portrait img{border-radius:18px}
.portrait::before{border-radius:22px}
.gallery img{border-radius:14px}
.chart{border-radius:16px}
.doc{border-radius:16px}
.doc-btn{border-radius:999px}
.c-row button{border-radius:999px!important}
.tags span{border-radius:999px}
.link-arrow{border-radius:0}
@media (prefers-reduced-motion:reduce){.cover .c-word{transition:none}}
.ext{display:inline-block;width:.62em;height:.62em;vertical-align:.08em;margin-left:.15em;transition:transform .3s}
a:hover .ext{transform:translate(2px,-2px)}