/* Of The Rose Boutique — see DESIGN.md */
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --blush:#EBD5D6; --blush-2:#F4E6E6; --paper:#FBF7F4; --taupe:#7D6965; --rose:#8E4F5A; --rose-dark:#743E48;
  --ink:#3A3333; --plum:#4A2E33; --line:#D9C3C2;
  --serif:"Cormorant",Georgia,"Times New Roman",serif; --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --r:2px; --shadow:0 6px 18px rgba(74,46,51,.16);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rose-dark)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--plum);margin:0 0 var(--s2)}
h1{font-size:clamp(2.75rem,8vw,5.5rem);letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.6vw,2.75rem)}
h3{font-size:1.875rem}
p{margin:0 0 var(--s2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
.skip{position:absolute;left:-999px;top:0;background:var(--plum);color:#fff;padding:.75rem 1rem;z-index:20}
.skip:focus{left:1rem}
.caps{font:500 .8125rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.ruled{display:flex;align-items:center;gap:.9rem}
.ruled::before,.ruled::after{content:"";height:1px;background:currentColor;flex:0 0 2.5rem;opacity:.8}
.lede{font-size:1.25rem;line-height:1.6;max-width:36ch}
@media (max-width:599px){.hero .ruled{letter-spacing:.18em;font-size:.75rem}.hero .ruled::after{display:none}}
.tbc{font-style:italic;color:var(--taupe);border-bottom:1px dashed var(--taupe)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.6rem;border:1px solid var(--rose);border-radius:var(--r);background:var(--rose);color:#fff;font:500 .9375rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.btn--line{background:transparent;color:var(--rose)}
.btn--line:hover{background:var(--rose);color:#fff}
.textlink{font-weight:500;color:var(--rose);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.textlink:hover{color:var(--rose-dark)}

/* Header */
.site-head{background:var(--blush);position:relative;z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--plum)}
.brand img{width:26px;height:auto}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font:500 1.375rem/1 var(--serif);letter-spacing:.16em;text-transform:uppercase}
.brand small{font:400 .75rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--taupe);margin-top:.35rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;align-items:center}
.nav a{color:var(--plum);text-decoration:none;font-size:1rem;letter-spacing:.04em;padding:.4rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--rose);color:var(--rose)}
.nav .btn{color:#fff;padding:.7rem 1.1rem;min-height:44px;font-size:.8125rem;border-bottom:1px solid var(--rose)}
.nav .btn:hover{color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--taupe);border-radius:var(--r);color:var(--plum);font:500 .875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.7rem .9rem;min-height:44px;cursor:pointer}
@media (max-width:899px){
  .menu-btn{display:inline-block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--blush);border-top:1px solid var(--line);display:none;box-shadow:var(--shadow)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:var(--s1) var(--s3) var(--s3)}
  .nav li a{display:block;padding:.85rem 0;font-size:1.125rem;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:var(--s2);display:flex}
}

/* Hero: lettering first */
.hero{background:var(--blush);padding:var(--s4) 0 var(--s5);overflow:hidden}
.hero .wrap{display:grid;gap:var(--s4);align-items:center}
.hero h1{margin:var(--s2) 0 var(--s3)}
.hero h1 em{font-style:italic;font-weight:400;color:var(--rose)}
.hero .lede{margin-bottom:var(--s3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.hero-photo{position:relative;justify-self:center;width:min(100%,440px)}
@media (min-width:900px){
  .hero{padding:var(--s5) 0 var(--s6)}
  .hero .wrap{grid-template-columns:1.25fr 1fr;gap:var(--s5)}
  .hero-photo{justify-self:end}
}
@media (max-width:599px){
  .hero{padding:var(--s3) 0 var(--s4)}
  .hero h1{font-size:2.9rem;margin:.75rem 0 1rem}
  .hero .lede{font-size:1.125rem;margin-bottom:1.25rem}
  .hero .wrap{gap:var(--s3)}
  .hero-photo{width:86%}
}

/* Doorway-arch photo frame */
.arch{border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--blush-2);aspect-ratio:3/4}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.arch--frame{padding:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.arch--frame img{border-radius:999px 999px 0 0}

/* Hang tag */
.tag{position:relative;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:1.6rem 1.15rem 1rem}
.tag::after{content:"";position:absolute;left:50%;top:-30px;width:1px;height:42px;background:var(--taupe)}
.tag::before{content:"";position:absolute;left:50%;top:9px;width:10px;height:10px;margin-left:-4.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px #BFA6A6}
.tag .tn{font:500 1.375rem/1.15 var(--serif);color:var(--plum);margin:0 0 .35rem}
.tag .meta{font-size:.9375rem;color:var(--taupe);margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.25rem .9rem}
.tag .price{font-family:var(--serif);font-size:1.375rem;color:var(--plum);font-weight:500}
.tag .ask{font-style:italic}
.tag a.req{display:inline-block;font:500 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose);text-decoration:none;padding:.55rem 0;border-bottom:1px solid currentColor}
.tag a.req:hover{color:var(--rose-dark)}
.tag .note{font-size:.9375rem;line-height:1.5;margin:0 0 .5rem;color:var(--ink)}
.hero-photo .tag{position:absolute;left:-1.5rem;bottom:2.25rem;width:15.5rem;transform:rotate(-3deg)}
@media (max-width:599px){.hero-photo .tag{left:-1rem;bottom:1.25rem;width:13.25rem;padding:1.4rem .9rem .7rem}.hero-photo .tag .tn{font-size:1.2rem}}

/* Lookbook */
.lookbook{padding:var(--s6) 0 var(--s5)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s2);margin-bottom:var(--s4)}
.section-head h2{margin:0}
.section-head p{margin:.5rem 0 0;max-width:46ch}
.pieces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s2)}
@media (min-width:900px){.pieces{grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s3)}}
.piece{display:flex;flex-direction:column}
.piece .arch{margin:0 .4rem}
.piece .tag{margin:-2.5rem 0 0 0;transform:rotate(-1.5deg);position:relative}
.piece:nth-child(even) .tag{transform:rotate(1.2deg)}
@media (max-width:599px){.piece .tag{padding:1.4rem .75rem .7rem}.tag .tn{font-size:1.15rem}.tag .note{font-size:.875rem}.tag .meta{font-size:.875rem;gap:.1rem .7rem}.rq-long{display:none}}

/* How to shop band */
.howto{background:var(--plum);color:#F6E9E9;padding:var(--s6) 0}
.howto .caps{color:var(--blush)}
.howto blockquote{margin:var(--s2) 0 var(--s4);font:400 italic clamp(2rem,4.4vw,3.3rem)/1.12 var(--serif);color:#fff;max-width:20ch}
@media (min-width:900px){.howto .wrap{display:grid;grid-template-columns:1.1fr 1fr;column-gap:var(--s6);align-items:start}.howto .wrap>*{grid-column:1}.howto .wrap>.steps{grid-column:2;grid-row:1/span 4}.howto .btn{margin-top:0;justify-self:start}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid rgba(235,213,214,.4);padding-top:var(--s3);display:grid;grid-template-columns:3.5rem 1fr;column-gap:var(--s2)}
.steps li>*{grid-column:2}
.steps li::before{content:counter(s);grid-column:1;grid-row:1/span 2;font:400 italic 3.5rem/1 var(--serif);color:var(--blush)}
.steps h3{color:#fff;font-size:1.75rem}
.steps p{color:#EADADA;max-width:34ch}
.steps h3{margin-bottom:.4rem}
.howto a{color:#fff}
.howto .btn{background:var(--blush);color:var(--plum);border-color:var(--blush);margin-top:var(--s4)}
.howto .btn:hover{background:#fff;border-color:#fff;color:var(--plum)}

/* Family */
.family{padding:var(--s6) 0}
.family .wrap{display:grid;gap:var(--s4);align-items:center}
@media (min-width:900px){.family .wrap{grid-template-columns:1.35fr 1fr;gap:var(--s5)}}
.family figure{margin:0;position:relative}
.family figure img{border-radius:var(--r);width:100%;aspect-ratio:1080/1180;object-fit:cover}
@media (min-width:900px){.family figure img{box-shadow:2rem 2rem 0 var(--blush)}.family figcaption{margin-top:3.25rem}}
.family figcaption{font-size:.9375rem;color:var(--taupe);margin-top:var(--s3)}
.quote{margin:0}
.quote p{font:400 italic clamp(2rem,4.2vw,3rem)/1.15 var(--serif);color:var(--plum);margin-bottom:var(--s3)}
.quote cite{font-style:normal}

/* Find us */
.findus{padding:var(--s6) 0;background:var(--blush-2)}
.findus .wrap{display:grid;gap:var(--s4)}
@media (min-width:900px){.findus--home .wrap{grid-template-columns:300px 1fr 1.1fr;gap:var(--s4);align-items:start}.findus .two{align-items:start}}
.findus .rack img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%}
.place h3{margin-bottom:.5rem}
.place address{font-style:normal;margin-bottom:var(--s2)}
.place dl{margin:0 0 var(--s3);display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem}
.place dt{font-weight:500}
.place dd{margin:0}
.dates{list-style:none;margin:0;padding:0}
.dates li{display:grid;grid-template-columns:5.25rem 1fr;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.dates li:last-child{border-bottom:1px solid var(--line)}
.date{text-align:center;border:1px solid var(--taupe);border-radius:var(--r);padding:.45rem .3rem;align-self:start;background:var(--paper)}
.date b{display:block;font:500 .75rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.date span{display:block;font:500 1.6rem/1.1 var(--serif);color:var(--plum)}
.dates h3,.dates h4{font:500 1.5rem/1.15 var(--serif);color:var(--plum);margin:0 0 .25rem}
.dates p{margin:0;font-size:1rem}
.dates .past{opacity:.75}

/* Panels & forms */
.panel{background:var(--blush);padding:var(--s5) var(--s3);border-radius:var(--r)}
.join{padding:var(--s6) 0}
.join .panel{max-width:760px;margin:0 auto;text-align:center}
.join .panel img{width:30px;margin:0 auto var(--s2)}
.join form{text-align:left;margin-top:var(--s3)}
.form{display:grid;gap:var(--s3) var(--s2);grid-template-columns:1fr}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field label,.field legend{display:block;font-weight:500;font-size:1rem;margin-bottom:.35rem;color:var(--plum)}
.field .hint{font-weight:400;color:var(--taupe);font-size:.9375rem}
.field input,.field select,.field textarea{width:100%;font:400 1.0625rem/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid #BFA6A6;border-radius:var(--r);padding:.8rem .9rem;min-height:48px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;min-height:44px;min-width:48px;justify-content:center;padding:.55rem 1rem;border:1px solid #BFA6A6;border-radius:var(--r);background:#fff;cursor:pointer;font-size:1rem}
.choice input:checked+span{background:var(--rose);border-color:var(--rose);color:#fff}
.choice input:focus-visible+span{outline:2px solid var(--rose);outline-offset:2px}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.check input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--rose);flex:none}
.form .btn{justify-self:start}
[data-hp-form-status]{font-weight:500;color:var(--plum)}
.ship-only[hidden]{display:none}

/* Inner page headers (each one different) */
.ph{padding:var(--s5) 0 var(--s4)}
.ph h1{font-size:clamp(2.75rem,7vw,4.75rem)}
.ph .lede{max-width:44ch}
.ph--blush{background:var(--blush)}
.ph--split .wrap{display:grid;gap:var(--s4);align-items:end}
@media (min-width:900px){.ph--split .wrap{grid-template-columns:1.3fr 1fr}}
.ph--center{text-align:center}
.ph--center .lede{margin:0 auto}
.ph--center .caps{justify-content:center}

/* Article */
.article{max-width:68ch;margin:0 auto;padding:var(--s5) var(--s3)}
.article h2{margin-top:var(--s5)}
.article p{margin-bottom:var(--s3)}
.pull{margin:var(--s5) 0;padding:var(--s4) 0;border-top:1px solid var(--taupe);border-bottom:1px solid var(--taupe);font:400 italic clamp(1.9rem,4vw,2.6rem)/1.2 var(--serif);color:var(--rose);text-align:center}
.timeline{list-style:none;margin:var(--s3) 0 0;padding:0;border-left:1px solid var(--taupe)}
.timeline li{position:relative;padding:0 0 var(--s4) var(--s4)}
.timeline li::before{content:"";position:absolute;left:-6px;top:.55rem;width:11px;height:11px;border-radius:50%;background:var(--blush);box-shadow:0 0 0 1px var(--taupe)}
.timeline b{display:block;font:500 1.6rem/1.2 var(--serif);color:var(--plum)}
.names{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font:400 1.75rem/1.2 var(--serif);color:var(--plum);margin:var(--s2) 0 var(--s3)}
.names small{font:400 1rem var(--sans);color:var(--taupe)}
.porch-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:var(--s4) 0}
.porch-strip img{border-radius:999px 999px var(--r) var(--r);aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}

.two{display:grid;gap:var(--s4)}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.block{padding:var(--s5) 0}
.facts{list-style:none;padding:0;margin:0}
.facts li{padding:var(--s2) 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{display:block;font:500 1.375rem/1.2 var(--serif);color:var(--plum)}
.flyer img{border-radius:var(--r);box-shadow:var(--shadow);max-width:420px;width:100%}
.contact-lines{list-style:none;padding:0;margin:0 0 var(--s4)}
.contact-lines li{padding:.8rem 0;border-bottom:1px solid var(--line)}
.contact-lines span{display:block;font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.contact-lines a{font:500 1.375rem/1.4 var(--serif);word-break:break-word}

/* Footer */
.site-foot{background:var(--plum);color:#EADADA;padding:var(--s5) 0 var(--s4);margin-top:0}
.site-foot a{color:#fff}
.foot-grid{display:grid;gap:var(--s4)}
@media (min-width:900px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr;gap:var(--s5)}}
.foot-logo{width:240px;opacity:.95}
.foot-logo-wrap{background:var(--blush);display:inline-block;padding:1.1rem 1.4rem;border-radius:var(--r)}
.site-foot h2{font:500 .8125rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--blush);margin-bottom:var(--s2)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.5rem}
.site-foot li a{text-decoration:none;display:inline-block;padding:.2rem 0;border-bottom:1px solid transparent}
.site-foot li a:hover{border-bottom-color:currentColor}
.foot-line{font:400 italic 1.5rem/1.3 var(--serif);color:#fff;margin:var(--s3) 0 var(--s2)}
.foot-base{border-top:1px solid rgba(235,213,214,.25);margin-top:var(--s4);padding-top:var(--s3);font-size:.9375rem;display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;padding-bottom:var(--s3)}

/* 404 */
.lost{text-align:center;padding:var(--s6) var(--s3)}
.lost img{width:44px;margin:0 auto var(--s3)}
.lost p{max-width:40ch;margin:0 auto var(--s3)}

/* Our story group photo: never arched, so no faces are cropped */
.story-photo{width:100%;border-radius:var(--r);margin-bottom:var(--s2)}
@media (min-width:900px){.story-photo{box-shadow:1.75rem 1.75rem 0 var(--blush);margin-bottom:var(--s4)}}