@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Mono:wght@300;400&display=swap');

:root{
  --ink:#231D18;
  --paper:#FBF9F3;
  --butter:#EDEBB4;
  --line:rgba(35,29,24,.22);
  --serif:"Cormorant Garamond", Georgia, serif;
  --mono:"DM Mono", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
img{max-width:100%;display:block}

.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");mix-blend-mode:multiply}

.nav{position:fixed;z-index:40;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 24px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;background:linear-gradient(var(--paper),transparent);transition:background .3s}
.nav.scrolled{background:rgba(251,249,243,.9);backdrop-filter:blur(8px)}
.nav nav{display:flex;gap:25px}
.shop{justify-self:end}
.mini-mark{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font:22px/1 var(--serif)}
.mini-mark img{width:27px;height:27px;object-fit:cover;mix-blend-mode:multiply}

.hero{height:100svh;min-height:720px;position:relative;padding:100px 5vw 30px;display:grid;place-items:center}
.hero-meta{position:absolute;left:5vw;top:92px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.hero-flower{position:absolute;top:13%;left:50%;transform:translateX(-50%);width:min(22vw,260px);opacity:.72;mix-blend-mode:multiply;animation:float 8s ease-in-out infinite}
.hero-flower img{width:100%}
.hero-logo{position:absolute;z-index:3;left:50%;bottom:20%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.script-word,.script-line{font-family:"Brush Script MT","Segoe Script",cursive;font-weight:400}
.hero-logo .script-word{font-size:clamp(76px,13vw,190px);line-height:.75;letter-spacing:-.055em}
.hero-logo p{font:9px var(--mono);letter-spacing:.16em;margin:25px 0 0}
.hero-image{position:absolute;width:min(54vw,700px);height:63vh;right:8vw;top:18vh;transform:rotate(2deg);z-index:1}
.image-placeholder{background:var(--butter);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:rgba(35,29,24,.5);text-align:center}
.image-placeholder span{font:10px var(--mono);letter-spacing:.14em}
.image-placeholder small{position:absolute;bottom:12px;left:14px;font:8px var(--mono);opacity:.65}
.hero-caption{position:absolute;left:7vw;bottom:13%;font-size:19px;line-height:1.05;font-style:italic}
.scroll{position:absolute;right:5vw;bottom:30px;font:10px var(--mono)}

.manifesto{min-height:82vh;background:var(--ink);color:var(--paper);padding:15vh 10vw;display:grid;grid-template-columns:1fr 2.1fr;gap:5vw}
.eyebrow,.micro,.section-note{font:9px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.manifesto-copy{max-width:820px}
.script-line{font-size:62px;line-height:.9;margin:0 0 25px}
.large-copy{font-size:clamp(27px,4vw,54px);line-height:.96;margin:0;max-width:850px}

.collections{padding:15vh 5vw}
.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:13vh}
.look{display:grid;grid-template-columns:1.15fr .85fr;gap:9vw;align-items:center;margin-bottom:20vh}
.look-two{grid-template-columns:.85fr 1.15fr}
.portrait{height:78vh}
.landscape{height:58vh}
.look-copy{max-width:350px}
.look-copy h2,.pulls h2,.about h2{font-size:clamp(56px,8vw,125px);line-height:.8;font-weight:400;margin:15px 0 30px}
.look-copy h2 em,.pulls h2 em,.about h2 em{font-style:italic}
.look-copy>p:not(.micro){font-size:19px;line-height:1.15;margin-bottom:30px}
.text-link{font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:5px}
.butter-strip{margin:4vh -5vw 0;background:var(--butter);overflow:hidden;white-space:nowrap;padding:16px 0;display:flex;gap:70px;font:10px var(--mono);letter-spacing:.13em;animation:marquee 18s linear infinite}

.archive{background:var(--ink);color:var(--paper);padding:15vh 5vw 18vh}
.archive-intro{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;margin-bottom:12vh}
.small-script{font-size:72px;margin:0}
.archive-intro>p:last-child{font-size:22px;line-height:1.05;max-width:290px;margin:0}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;align-items:start}
.archive-card.raised{margin-top:13vh}
.square{aspect-ratio:1;background:#d9d1bd}
.archive-data{display:flex;justify-content:space-between;margin-top:12px;font:8px var(--mono);text-transform:uppercase;letter-spacing:.07em}
.archive-card h3{font-size:34px;font-weight:400;margin:12px 0}

.pulls{min-height:90vh;padding:16vh 7vw;display:grid;grid-template-columns:1fr 2fr .7fr;gap:5vw;align-items:center;position:relative;overflow:hidden}
.pulls-side{font:9px var(--mono);text-transform:uppercase;letter-spacing:.1em;line-height:1.6}
.pulls-main{position:relative;z-index:2;max-width:780px}
.pulls-main>p:not(.script-line){font-size:22px;max-width:500px;line-height:1.05;margin:0 0 40px}
.outline-link{display:inline-block;border:1px solid var(--ink);padding:13px 17px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.pulls-flower{width:min(27vw,350px);opacity:.65;mix-blend-mode:multiply}
.pulls-flower img{width:100%;animation:spin 35s linear infinite}

.about{padding:17vh 7vw;background:var(--butter)}
.about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:10vw;align-items:end;margin-top:14vh}
.about-copy{font-size:23px;line-height:1.05;max-width:470px}
.about-copy p{margin:0 0 30px}

footer{padding:55px 24px 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
.footer-mark{display:flex;align-items:center;gap:12px}
.footer-mark img{width:48px;height:48px;mix-blend-mode:multiply}
.footer-mark .script-word{font-size:45px}
.footer-links{display:flex;gap:22px;font:9px var(--mono);text-transform:uppercase}
footer>.micro{justify-self:end;margin:0}

@keyframes float{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg)}50%{transform:translateX(-50%) translateY(12px) rotate(2deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-30%)}}

@media(max-width:800px){
  .nav{grid-template-columns:1fr auto;padding:15px}
  .nav nav{display:none}
  .mini-mark{font-size:20px}
  .hero{min-height:700px}
  .hero-meta{top:80px}
  .hero-image{width:78vw;height:55vh;right:4vw;top:20vh}
  .hero-flower{width:40vw;top:14%}
  .hero-logo{bottom:22%;left:7vw;transform:none;text-align:left}
  .hero-logo .script-word{font-size:78px}
  .hero-caption{left:7vw;bottom:8%;font-size:15px}
  .scroll{display:none}
  .manifesto{display:block;padding:13vh 7vw}
  .manifesto .eyebrow{margin-bottom:16vh}
  .script-line{font-size:48px}
  .large-copy{font-size:31px}
  .collections{padding:12vh 6vw}
  .section-top{margin-bottom:8vh}
  .look,.look-two{display:flex;flex-direction:column;gap:35px;margin-bottom:14vh;align-items:stretch}
  .look-two .look-copy{order:1}
  .look-two .image-placeholder{order:2}
  .portrait{height:72vh}
  .landscape{height:52vh}
  .archive{padding:12vh 6vw}
  .archive-intro{display:block;margin-bottom:9vh}
  .archive-intro .small-script{margin:25px 0}
  .archive-grid{grid-template-columns:1fr;gap:9vh}
  .archive-card.raised{margin-top:0}
  .pulls{min-height:80vh;display:block;padding:13vh 7vw}
  .pulls-side{margin-bottom:12vh}
  .pulls-flower{width:55vw;margin:8vh auto 0}
  .about{padding:13vh 7vw}
  .about-grid{display:block;margin-top:9vh}
  .about h2{margin-bottom:10vh}
  footer{grid-template-columns:1fr;gap:25px}
  .footer-links{order:2;flex-wrap:wrap}
  footer>.micro{justify-self:start;order:3}
}