/* Nina Taplick - standalone, no external resources */
:root { --ink:#332b28; --muted:#78716e; --paper:#f9f8f5; --warm:#f1eee9; --line:#e6e2dc; --ease:cubic-bezier(.19,.7,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:3px solid #916a54; outline-offset:4px; }
.skip-link { position:absolute; left:12px; top:-120px; z-index:100; padding:10px 20px; background:#fff; }
.skip-link:focus { top:12px; }
.site-header { position:absolute; inset:0 0 auto; min-height:94px; padding:19px clamp(24px,5vw,86px); display:flex; justify-content:space-between; align-items:center; gap:30px; z-index:20; background:rgba(251,250,247,.79); border-bottom:1px solid rgba(85,77,72,.08); backdrop-filter:blur(13px); }
.brand { font-size:20px; line-height:1.05; font-weight:400; letter-spacing:.01em; text-decoration:none; white-space:nowrap; }
.brand span { display:block; margin-top:9px; font-size:10px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:#635c58; }
.main-nav { display:flex; flex-wrap:wrap; column-gap:clamp(18px,2.6vw,40px); row-gap:12px; align-items:center; }
.main-nav a { color:#39332f; text-decoration:none; font-size:12px; font-weight:500; letter-spacing:.105em; text-transform:uppercase; transition:opacity .3s ease; }
.main-nav a:hover { opacity:.6; }
.main-nav a[aria-current=page] { text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1px; }
.hero { position:relative; display:grid; place-items:center; overflow:hidden; background:#bcb3aa; isolation:isolate; }
.home-hero { height:min(930px,100svh); min-height:650px; }
.detail-hero { min-height:510px; height:65svh; max-height:760px; }
.hero-photo { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:center 48%; opacity:0; transform:scale(1.035); animation:photo-reveal 2.25s var(--ease) .08s forwards; }
.hero-veil { position:absolute; z-index:-2; inset:0; background:linear-gradient(105deg,rgba(251,249,246,.33),rgba(251,249,246,.17) 42%,rgba(251,249,246,.17)),linear-gradient(0deg,rgba(247,245,241,.13),transparent 38%); }
.hero-copy { z-index:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(90%,1100px); padding:100px 24px 60px; text-align:center; color:#2b2521; }
.hero-copy>* { opacity:0; transform:translateY(17px); animation:text-reveal 1.65s var(--ease) .65s forwards; }
.hero-eyebrow { margin:0 0 26px; font-size:clamp(12px,1.25vw,17px); letter-spacing:.27em; font-weight:300; text-transform:uppercase; }
.hero-copy h1 { margin:0; font-size:clamp(54px,8vw,126px); line-height:1.08; font-weight:200; letter-spacing:-.055em; text-wrap:balance; }
.hero-location { margin:28px 0 0; font-size:12px; letter-spacing:.24em; text-transform:uppercase; animation-delay:1.05s; }
.detail-hero .hero-copy h1 { max-width:950px; font-size:clamp(37px,5.9vw,80px); letter-spacing:-.04em; }
.detail-hero .hero-veil { background:linear-gradient(90deg,rgba(253,251,247,.6),rgba(253,251,247,.18) 75%); }
.scroll-cue { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; color:#403832; font-size:10px; letter-spacing:.2em; text-decoration:none; text-transform:uppercase; opacity:0; animation:cue-appear 1.2s ease 1.95s forwards; }
.scroll-cue svg { animation:float-arrow 2.8s ease-in-out 3s infinite; }
main { background:var(--paper); }
.work-section { padding:clamp(64px,9vw,142px) clamp(22px,6vw,90px) 140px; }
.work-intro { margin:0 auto 70px; max-width:780px; text-align:center; }
.section-kicker { margin:0 0 20px; color:#79716d; font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
.work-intro h2 { font-size:clamp(31px,4vw,52px); font-weight:300; line-height:1.17; letter-spacing:-.03em; margin:0 0 24px; }
.work-intro>p:last-child { font-size:17px; font-weight:300; max-width:610px; margin:0 auto; color:#5c544f; }
.category-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:18px 48px; margin:0 auto 64px; padding:23px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:1150px; }
.category-nav a { font-size:11px; letter-spacing:.18em; text-decoration:none; text-transform:uppercase; color:#665e59; }
.category-nav a:hover { color:#241b17; }
.portfolio-grid { display:grid; max-width:1160px; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(30px,5vw,82px); row-gap:clamp(75px,8vw,118px); margin:0 auto; }
.portfolio-card { display:block; min-width:0; text-decoration:none; align-self:start; }
.portfolio-card.stagger { margin-top:65px; }
.card-media { overflow:hidden; position:relative; aspect-ratio:1.22; background:#e2d8cf; }
.card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.35s var(--ease),filter 1.35s ease; }
.portfolio-card:hover .card-media img, .portfolio-card:focus-visible .card-media img { transform:scale(1.055); filter:saturate(.86); }
.card-caption { padding:22px 0 0; }
.card-category { display:block; color:#857d76; font-size:10px; text-transform:uppercase; letter-spacing:.2em; }
.card-caption h3 { margin:8px 0 0; font-size:clamp(21px,2.35vw,32px); font-weight:300; line-height:1.28; letter-spacing:-.02em; }
.card-caption p { color:#716862; font-size:16px; font-weight:300; }
.portfolio-card--wide { grid-column:1/-1; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:clamp(30px,7vw,100px); margin:12px 0 0; }
.portfolio-card--wide .card-media { aspect-ratio:1.5; }
.portfolio-card--wide .card-media img { object-position:center 30%; }
.portfolio-card--wide .card-caption { padding:0 24px 0 0; }
.portfolio-card--wide .card-caption h3 { font-size:clamp(32px,4vw,55px); }
/* Content pages */
.article-body { width:min(100% - 48px,800px); margin:0 auto; padding:90px 0 116px; font-size:17px; font-weight:350; line-height:1.88; color:#4d4540; }
.article-body p { margin:0 0 25px; }
.article-body h2 { margin:55px 0 14px; font-size:27px; font-weight:400; line-height:1.25; color:var(--ink); }
.article-body ul { padding-left:23px; margin:20px 0 32px; }
.article-body li { padding-left:5px; margin:0 0 11px; }
.article-body a { text-decoration-thickness:1px; text-underline-offset:4px; }
.article-pager { border-top:1px solid var(--line); margin-top:75px; padding-top:30px; display:flex; justify-content:space-between; gap:30px; font-size:13px; letter-spacing:.04em; }
.article-pager a { text-decoration:none; }
.article-pager a:hover { text-decoration:underline; }
.plain-heading { max-width:800px; margin:0 auto; padding:195px 24px 0; }
.plain-heading h1 { margin:0; font-size:clamp(44px,6vw,78px); font-weight:300; line-height:1.1; letter-spacing:-.05em; }
.article-body--plain { padding-top:45px; min-height:36vh; }
.article-body--plain h2 { font-size:25px; }
.editor-note { border-left:3px solid #a98471; padding:16px 22px; background:#f3ece5; font-size:14px; line-height:1.7; }
.site-footer { border-top:1px solid var(--line); background:var(--warm); padding:65px clamp(22px,6vw,90px) 80px; }
.footer-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:35px; font-size:13px; color:#736963; }
.footer-brand { font-size:19px; color:var(--ink); font-weight:300; margin:0 0 12px; }
.footer-inner p { margin:0 0 12px; }
.footer-inner>div:nth-child(2), .footer-inner nav { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer-inner a { text-decoration:none; }
.footer-inner a:hover { text-decoration:underline; }
.reveal { opacity:1; transform:none; }
.reveal.will-reveal { opacity:0; transform:translateY(38px); transition:transform 1.2s var(--ease),opacity 1.2s ease; }
.reveal.will-reveal.is-visible { opacity:1; transform:none; }
@keyframes photo-reveal { to { opacity:1; transform:scale(1); } }
@keyframes text-reveal { to { opacity:1; transform:none; } }
@keyframes cue-appear { to { opacity:1; } }
@keyframes float-arrow { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
@media(max-width:850px) {
 .site-header { position:absolute; padding:17px 25px; gap:15px; flex-direction:column; align-items:flex-start; }
 .main-nav { column-gap:25px; }
 .main-nav a { font-size:10px; }
 .home-hero { height:91svh; min-height:590px; }
 .hero-copy { padding-top:135px; }
 .portfolio-card.stagger { margin-top:30px; }
 .portfolio-grid { gap:70px 30px; }
 .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:610px) {
 .brand { font-size:18px; }
 .site-header { background:rgba(251,250,247,.88); }
 .main-nav { gap:9px 19px; }
 .home-hero { min-height:580px; }
 .hero-copy h1 { font-size:clamp(52px,13vw,75px); }
 .hero-eyebrow { font-size:10px; letter-spacing:.15em; }
 .detail-hero { min-height:540px; height:70svh; }
 .detail-hero .hero-copy h1 { font-size:clamp(37px,9vw,58px); }
 .portfolio-grid { grid-template-columns:1fr; row-gap:54px; }
 .portfolio-card.stagger { margin-top:0; }
 .portfolio-card--wide { display:block; }
 .portfolio-card--wide .card-media { aspect-ratio:1.22; }
 .portfolio-card--wide .card-caption { padding:22px 0 0; }
 .portfolio-card--wide .card-caption h3 { font-size:28px; }
 .work-section { padding-bottom:90px; }
 .category-nav { gap:18px; margin-bottom:55px; }
 .category-nav a { letter-spacing:.08em; }
 .article-body { font-size:16px; padding-top:65px; }
 .plain-heading { padding-top:190px; }
 .footer-inner { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
 .hero-photo,.hero-copy>*,.scroll-cue,.reveal.will-reveal { opacity:1!important; transform:none!important; }
}