/* Vica White Photography. Calm print catalogue, harbor green accent. */
:root{
  --bg:#f5f0e6; --bg-rgb:245,240,230; --ink:#161616; --mute:#66655f; --rule:#ddd6c8;
  --hb:#0f3d35; --hb-soft:#e6ece9; --off:#f6f3ea;
  --sans:'Inter Tight','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --gut:clamp(20px,5vw,72px); --max:1320px; --gap:clamp(16px,3vw,48px);
  --sp:clamp(72px,11vw,176px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;animation:welcome 1.8s ease-out both;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.2em}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.02em;line-height:1.1}
::selection{background:var(--hb-soft)}
:focus-visible{outline:2px solid var(--hb);outline-offset:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--gut);top:8px;background:var(--bg);padding:6px 10px;z-index:20}

/* labels and links */
.label,.nav a,.foot h2,.wall .no{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;line-height:1.5}
.label{color:var(--mute)}
.ul{border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s,border-color .3s}
.ul:hover{color:var(--hb)}
.gl{color:var(--ink)}
.more{display:inline-block;margin-top:1.5rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* header: wordmark left, links right, one line at every width */
.top{position:sticky;top:0;z-index:10;background:rgba(var(--bg-rgb),.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:16px}
.mark{font-size:.6875rem;font-weight:500;letter-spacing:.2em;white-space:nowrap}
.top .mark{display:block;line-height:0;flex:none}
.top .mark img{width:150px;height:auto}
.nav{display:flex;flex-wrap:nowrap;gap:clamp(7px,2.1vw,16px)}
.nav a{padding-block:4px;color:var(--mute);border-bottom:1px solid transparent;font-size:.5625rem;letter-spacing:.08em;white-space:nowrap;transition:color .3s,border-color .3s}
.nav a:hover,.nav a[aria-current]{color:var(--hb);border-color:var(--hb)}
@media(max-width:519px){.nav .ig{display:none}.top .wrap{flex-wrap:wrap;row-gap:10px}.nav{width:100%;justify-content:space-between}}
@media(min-width:520px){.nav a{font-size:.625rem;letter-spacing:.14em}.nav{gap:20px}.mark{letter-spacing:.3em}}
@media(min-width:760px){
  .top .wrap{padding-block:20px}
  .mark{font-size:.8125rem;letter-spacing:.46em}
  .nav{gap:34px}
  .top .mark img{width:240px}
  .nav a{font-size:.6875rem;letter-spacing:.18em}
}

/* hero: full bleed, name on a soft panel, rotating stamp */
.hero{margin:0}
.shot{position:relative;height:min(80svh,980px);min-height:420px;overflow:hidden;background:var(--hb-soft)}
.hero .shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero .shot>img.on{opacity:1}
.panel{position:absolute;bottom:0;left:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));
  background:rgba(var(--bg-rgb),.93);padding:clamp(12px,2vw,28px) clamp(16px,3vw,44px) clamp(8px,1.4vw,18px)}
.name{font-size:clamp(2.6rem,8vw,7rem);font-weight:200;letter-spacing:-.035em;line-height:1}
.stamp{position:absolute;right:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));bottom:clamp(16px,3vw,36px);width:92px;aspect-ratio:1;
  border-radius:50%}
.stamp svg{display:block;width:100%;height:100%;animation:spin 24s linear infinite}
.stamp circle{fill:var(--hb);stroke:rgba(var(--bg-rgb),.9);stroke-width:6}
.stamp text{font:500 13px var(--sans);fill:var(--off)}
.stamp img{position:absolute;inset:0;margin:auto;width:44px;height:auto;filter:brightness(0) invert(1)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes welcome{from{opacity:0}to{opacity:1}}
@media(min-width:520px){.stamp{width:120px}}
.wall{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.4rem;margin-top:14px;font-size:.8125rem;line-height:1.5;color:var(--ink)}
.wall .no{color:var(--hb)}
.wall .m{color:var(--mute)}
.hero .wall{margin:0;padding-block:14px 0}

/* sections */
.sec{padding-block:var(--sp) 0}
.sec.last{padding-bottom:var(--sp)}
.top-pad{padding-top:clamp(48px,8vw,120px)}
.head{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--rule);padding-top:14px;margin-bottom:clamp(32px,5vw,72px)}
.big{font-size:clamp(1.9rem,1rem + 3.9vw,4.4rem);max-width:19ch}
.big em,.quote{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
.big em{font-size:1.08em}
.lede{max-width:44ch;color:var(--mute);margin-top:clamp(24px,3vw,44px)}
.indent{margin-left:auto;width:min(100%,520px)}
.intro{display:grid;gap:clamp(32px,5vw,64px) var(--gap);margin-top:clamp(32px,5vw,72px)}
.intro .side{width:min(100%,360px)}
@media(min-width:760px){.intro{grid-template-columns:minmax(0,420px) 1fr;align-items:end}.intro .side{width:100%}}
.sub{font-size:clamp(1.5rem,1rem + 2vw,2.6rem);max-width:22ch}
.links{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:clamp(28px,4vw,48px);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* plates */
.plate{margin:0}
.plate img{width:100%;background:var(--hb-soft)}
.ph{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.pair{display:grid;gap:clamp(48px,8vw,0px) var(--gap);grid-template-columns:1fr}
@media(min-width:700px){
  .pair.three{grid-template-columns:repeat(3,1fr)}
  .pair{grid-template-columns:1fr 1fr;align-items:start;row-gap:clamp(48px,7vw,112px)}
  .pair>.plate:nth-child(even):not(.wide){margin-top:clamp(40px,9vw,140px)}
  .pair>.wide{grid-column:1/-1}
}
.plate+.plate,.pair+.plate,.plate+.pair,.pair+.pair{margin-top:clamp(48px,7vw,112px)}

/* contact sheet film strip */
.film-cap{margin:clamp(40px,6vw,88px) 0 12px}
.film{list-style:none;margin:0;padding:20px 12px;background:var(--ink);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:6px;
  background:radial-gradient(circle,var(--bg) 0 2px,transparent 2.6px) 0 0/14px 6px repeat-x}
.film::before{top:7px}
.film::after{bottom:7px}
.film a{display:block;overflow:hidden;border-radius:2px}
.film img{width:100%;height:96px;object-fit:cover;opacity:.9;transition:opacity .3s,transform .6s}
.film a:hover img{opacity:1;transform:scale(1.05)}

/* rows (notice, lists) */
.row{display:grid;gap:.6rem 2rem;border-top:1px solid var(--rule);padding-block:clamp(22px,3vw,34px);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--rule)}
.row>*,.about>*,.pair>*{min-width:0}
.row h3{font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}
.row p{margin:0;color:var(--mute)}
@media(min-width:900px){
  .row{grid-template-columns:200px 1fr 1fr auto}
  .row.two{grid-template-columns:200px 1fr 2fr}
}

/* about */
.about{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:900px){.about{grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px)}.about aside{position:sticky;top:110px;align-self:start}}
.story::after{content:"";display:block;clear:both}
.inset{width:min(72%,300px);margin:0 0 28px}
@media(min-width:700px){.inset{float:right;width:min(42%,230px);margin:6px 0 24px 32px}}
.story p{max-width:56ch}
.story a:hover{color:var(--hb)}
.story p:first-child{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-weight:300;line-height:1.5;color:var(--ink)}
.quote{font-size:clamp(1.9rem,1rem + 3.4vw,4.2rem);line-height:1.12;max-width:22ch;margin:0}
blockquote{margin:0}
.cite{display:block;margin-top:1.6rem;font-style:normal}
.qrow{display:grid;gap:clamp(40px,6vw,64px) var(--gap);align-items:end}
@media(min-width:900px){.qrow{grid-template-columns:minmax(0,1fr) 340px}.qphoto{justify-self:end}}
.qphoto{width:100%;max-width:360px}
.pin{position:relative}
.note{position:absolute;left:-14px;bottom:18px;width:min(66%,190px);padding:26px 18px 20px;background:#f3e6c6;color:#2b2a26;
  transform:rotate(2deg);box-shadow:0 14px 26px -14px rgba(22,22,22,.4),0 1px 2px rgba(22,22,22,.14)}
.note::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--hb);box-shadow:0 2px 3px rgba(22,22,22,.35)}
.note p{margin:0;font:500 clamp(1.25rem,1.1rem + .6vw,1.5rem)/1.15 'Caveat',cursive}

/* work with me */
.work{margin-top:var(--sp);background:var(--hb);color:var(--off);padding-block:clamp(56px,9vw,128px);scroll-margin-top:60px}
.work h2{font:italic 300 clamp(3.2rem,1rem + 10vw,9rem)/.95 var(--serif);letter-spacing:-.02em}
.work p{max-width:36ch;margin:clamp(20px,3vw,32px) 0 clamp(28px,4vw,40px);font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.55;color:#d6e0da}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:16px 28px;border:1px solid var(--off);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.2;transition:background .3s,color .3s}
.btn.solid{background:var(--off);color:var(--hb)}
.btn:hover{background:var(--off);color:var(--hb)}
.btn.solid:hover{background:transparent;color:var(--off)}
.work :focus-visible{outline-color:var(--off)}
.now{display:inline-block;margin-top:clamp(28px,4vw,44px);font-size:.8125rem;letter-spacing:.06em;color:#d6e0da;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s}
.now:hover{color:#fff}

/* footer */
.foot{padding-block:clamp(40px,6vw,72px) 36px}
.foot .wrap{display:grid;gap:2rem var(--gap);grid-template-columns:1fr}
.foot h2{color:var(--mute);margin-bottom:.6rem}
.foot ul{list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:2}
.foot a:hover{color:var(--hb)}
.foot small{display:block;color:var(--mute);font-size:.75rem;line-height:1.6;margin-top:.4rem}
.fine{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:18px;margin:0;color:var(--mute);font-size:.75rem}
@media(min-width:760px){.foot .wrap{grid-template-columns:2fr 1fr 1fr 1fr}}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{animation:none}
  .stamp svg{animation:none}
  .hero .shot>img{transition:none}
  .film img,.btn{transition:none}
  .film a:hover img{transform:none}
  .js .rv{opacity:1;transform:none;transition:none}
}