@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}
ul,ol{list-style:none;}

:root{
  --bg:#FDFCFA;--surf:#F9F8F5;--pri:#1A1816;--sec:#7A7874;
  --acc:#C17A6F;--acc2:#A86860;--bor:#E6E4DF;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter','Helvetica Neue',sans-serif;
  --r:0.75rem;--max:480px;
}

body{font-family:var(--sans);font-size:1rem;color:var(--pri);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;}

.skip{position:absolute;top:-40px;left:0;background:var(--acc);color:#fff;padding:.5rem 1rem;z-index:9999;transition:top .2s;}
.skip:focus{top:0;}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(253,252,250,.95);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;padding:1rem 1.5rem;}
.site-header.scrolled{border-bottom-color:var(--bor);box-shadow:0 1px 20px rgba(26,24,22,.06);}
.header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.header-handle{font-size:.875rem;color:var(--sec);}
.header-socials{display:flex;align-items:center;gap:1rem;}
.header-socials a{color:var(--pri);display:flex;width:20px;height:20px;transition:color .18s;}
.header-socials a:hover{color:var(--acc);}
.header-socials svg{width:20px;height:20px;}

/* LAYOUT */
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem;}
.wrap-wide{max-width:960px;margin:0 auto;padding:0 1.5rem;}

/* HERO */
.hero{padding:4rem 0;text-align:center;}
.hero-photo{width:140px;height:140px;border-radius:50%;border:2px solid var(--bor);overflow:hidden;margin:0 auto 1.5rem;background:var(--surf);animation:fadeIn .4s ease .1s both;}
@media(min-width:640px){.hero-photo{width:160px;height:160px;}}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;}
.hero-name{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:400;margin-bottom:.5rem;animation:fadeUp .4s ease .2s both;}
.hero-tagline{font-size:.875rem;color:var(--sec);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;animation:fadeUp .4s ease .25s both;}
.hero-bio{font-size:1rem;max-width:36ch;margin:0 auto 1.5rem;line-height:1.7;animation:fadeIn .4s ease .3s both;}
.hero-socials{display:flex;justify-content:center;gap:1rem;animation:fadeIn .4s ease .35s both;}
.hero-socials a{color:var(--pri);display:flex;transition:color .18s,transform .18s;}
.hero-socials a:hover{color:var(--acc);transform:scale(1.1);}
.hero-socials svg{width:24px;height:24px;}

/* CTA */
.cta-wrap{margin-bottom:3rem;animation:fadeIn .4s ease .4s both;}
.cta-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;max-width:400px;margin:0 auto;background:var(--acc);color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.03em;padding:1rem 2rem;border-radius:var(--r);transition:background .18s,box-shadow .18s,transform .18s;}
.cta-btn:hover{background:var(--acc2);box-shadow:0 4px 20px rgba(193,122,111,.3);transform:translateY(-1px);}
.cta-btn:active{transform:none;box-shadow:none;}
.cta-btn svg{width:16px;height:16px;flex-shrink:0;}

/* LINKS */
.links{display:flex;flex-direction:column;gap:.75rem;}
.link-item{display:flex;align-items:center;background:var(--surf);border:1px solid var(--bor);padding:1rem 1.5rem;border-radius:var(--r);transition:border-color .18s,transform .18s,box-shadow .18s;}
.link-item:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,24,22,.08);}
.link-icon{font-size:1.25rem;margin-right:.75rem;flex-shrink:0;width:28px;text-align:center;}
.link-text{font-size:.875rem;font-weight:500;flex:1;}
.link-arrow{color:var(--sec);margin-left:.75rem;display:flex;}
.link-arrow svg{width:16px;height:16px;}

/* FOOTER */
.site-footer{padding:3rem 0;text-align:center;border-top:1px solid var(--bor);}
.footer-socials{display:flex;justify-content:center;gap:1rem;margin-bottom:.75rem;}
.footer-socials a{color:var(--sec);display:flex;transition:color .18s;}
.footer-socials a:hover{color:var(--acc);}
.footer-socials svg{width:28px;height:28px;}
.footer-handles{font-size:.75rem;color:var(--sec);margin-bottom:.5rem;}
.footer-copy{font-size:.75rem;color:var(--sec);}
.footer-links{margin-top:.75rem;display:flex;justify-content:center;gap:1rem;}
.footer-links a{font-size:.75rem;color:var(--pri);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s;}
.footer-links a:hover{text-decoration-color:var(--pri);}

/* PAGE HERO */
.page-hero{padding:3rem 0;text-align:center;}
.page-title{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin-bottom:.75rem;}
.page-subtitle{font-size:1rem;color:var(--sec);}

/* PRODUCT GRID */
.product-section{padding-bottom:4rem;}
.product-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media(min-width:640px){.product-grid{grid-template-columns:1fr 1fr;}}
.product-card{background:var(--surf);border:1px solid var(--bor);border-radius:var(--r);padding:1rem;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,box-shadow .2s;}
.product-card.visible{opacity:1;transform:none;}
.product-card:hover{box-shadow:0 6px 24px rgba(26,24,22,.1);}
.product-img{aspect-ratio:1;border-radius:calc(var(--r) - 4px);overflow:hidden;background:var(--bor);margin-bottom:1rem;display:flex;align-items:center;justify-content:center;font-size:2.5rem;}
.product-img img{width:100%;height:100%;object-fit:cover;}
.product-name{font-size:1rem;font-weight:600;margin-bottom:.5rem;}
.product-tag{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sec);background:rgba(230,228,223,.6);padding:.2rem .5rem;border-radius:4px;margin-bottom:.75rem;}
.product-note{font-size:.875rem;font-style:italic;margin-bottom:1rem;line-height:1.65;}
.product-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--surf);border:1px solid var(--bor);padding:.625rem 1rem;border-radius:var(--r);font-size:.875rem;font-weight:500;transition:border-color .18s,color .18s,transform .18s;}
.product-btn:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px);}
.product-btn svg{width:12px;height:12px;}

/* OUTFIT GRID */
.outfit-section{padding-bottom:4rem;}
.outfit-grid{display:grid;grid-template-columns:1fr;gap:2rem;}
@media(min-width:640px){.outfit-grid{grid-template-columns:1fr 1fr;}}
.outfit-card{background:var(--surf);border:1px solid var(--bor);border-radius:var(--r);padding:1.5rem;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,box-shadow .2s;}
.outfit-card.visible{opacity:1;transform:none;}
.outfit-card:hover{box-shadow:0 6px 24px rgba(26,24,22,.1);}
.outfit-img{aspect-ratio:4/5;border-radius:calc(var(--r) - 4px);overflow:hidden;background:var(--bor);margin-bottom:1rem;display:flex;align-items:center;justify-content:center;font-size:3rem;}
.outfit-img img{width:100%;height:100%;object-fit:cover;}
.outfit-name{font-size:1.125rem;font-weight:600;margin-bottom:.75rem;}
.outfit-items{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem;}
.outfit-item-link{font-size:.875rem;display:inline-flex;align-items:center;gap:.3rem;text-decoration:underline;text-decoration-color:transparent;transition:color .15s,text-decoration-color .15s;}
.outfit-item-link:hover{color:var(--acc);text-decoration-color:var(--acc);}
.outfit-item-link svg{width:10px;height:10px;}
.outfit-season{font-size:.75rem;color:var(--sec);}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--surf) 25%,var(--bor) 50%,var(--surf) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--r);}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}