/* Sew Chic website. Linen ground, ink text, sage and madder used sparingly.
   Libre Caslon for the voice, Hanken Grotesk for everything you need to read.
   Three motions per page at most: sections easing in, photographs crossfading,
   and the mobile menu. */
:root{
  --sc-canvas:#F4EFE6; --sc-surface:#FBF8F2; --sc-ink:#15213B; --sc-ink-soft:#57607A;
  --sc-accent:#A5502F; --sc-accent-ink:#FFFFFF;
  --sc-font-display:"Libre Caslon Display","Libre Caslon Text",Georgia,serif; --sc-font-text:"Hanken Grotesk",system-ui,sans-serif;
  --sc-shadow-color:222 45% 16%;
  --oat:#E8DFCF; --oat-soft:#EFE8DB; --sage:#8B9A80; --sage-deep:#4F6048; --sage-soft:#DDE2D4; --night:#0E1526;
  --bar-h:5rem; --sc-maxw:96rem;
  --serif-i:"Libre Caslon Text",Georgia,serif;
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--bar-h)}
body{font-feature-settings:"kern","liga"}
.sc-display{font-weight:400;letter-spacing:-.012em;line-height:1}
.sc-display em,.em{font-family:var(--serif-i);font-style:italic;font-weight:400;letter-spacing:-.025em;font-size:.93em}
.sc-body{color:var(--sc-ink-soft)}
h1,h2,h3{font-weight:400}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-family:var(--sc-font-text);font-weight:600;font-size:.95rem;padding:.9rem 1.45rem;border-radius:3px;border:0;background:var(--sc-ink);color:#fff;text-decoration:none;cursor:pointer;transition:transform .14s var(--sc-ease-out),background-color .14s var(--sc-ease-out)}
.btn:hover{background:#26345A}
.btn:active{transform:scale(.98)}
.btn--quiet{background:transparent;color:var(--sc-ink);box-shadow:inset 0 0 0 1px var(--sc-ink)}
.btn--quiet:hover{background:color-mix(in oklab,var(--sc-ink) 6%,transparent)}
.btn--light{background:#F6F1E7;color:var(--sc-ink)}
.btn--light:hover{background:#fff}
.btn--line-light{background:transparent;color:#F6F1E7;box-shadow:inset 0 0 0 1px rgba(246,241,231,.6)}
.btn--line-light:hover{background:rgba(246,241,231,.1)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.link{color:var(--sc-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:color-mix(in oklab,var(--sc-ink) 40%,transparent)}
.link:hover{text-decoration-color:var(--sc-accent)}
.eyebrow{display:block;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sc-accent)}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:var(--sc-z-chrome);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.95rem var(--sc-gutter);transition:background-color .3s var(--sc-ease-out),box-shadow .3s var(--sc-ease-out)}
.bar.solid{background:color-mix(in oklab,var(--sc-canvas) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--sc-hairline)}
.mark{display:block;line-height:0}
.mark img{display:block;height:1.95rem;width:auto}
.nav{display:flex;gap:2.1rem}
.nav a{text-decoration:none;font-size:.95rem;font-weight:600}
.nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
.bar__right{display:flex;justify-content:flex-end;align-items:center;gap:.6rem}
.bar__tel{font-size:.95rem;font-weight:600;text-decoration:none;margin-right:.6rem}
.menu-btn{display:none}

/* footer */
.foot{background:var(--sc-ink);color:#E9E3D6;padding:clamp(3rem,6vw,5rem) var(--sc-gutter) 1.6rem}
.foot a{color:inherit}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,4rem);max-width:calc(var(--sc-maxw) - 2 * var(--sc-gutter));margin-inline:auto}
.foot__logo{height:2.3rem;width:auto;display:block}
.foot p{margin:0;font-size:.95rem;line-height:1.6}
.foot h3{margin:0 0 .7rem;font:600 .78rem/1.3 var(--sc-font-text);letter-spacing:.09em;text-transform:uppercase;color:#B9C6AE}
.foot ul{margin:0;padding:0;list-style:none;font-size:.95rem;line-height:1.9}
.foot ul a{text-decoration:none}
.foot ul a:hover{text-decoration:underline;text-underline-offset:.25em}
.foot__small{max-width:calc(var(--sc-maxw) - 2 * var(--sc-gutter));margin:clamp(2rem,4vw,3.5rem) auto 0;padding-top:1.1rem;border-top:1px solid rgba(233,227,214,.18);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:.82rem;color:rgba(233,227,214,.72)}
.tag{position:fixed;left:8px;bottom:14px;z-index:70;writing-mode:vertical-rl;rotate:180deg;font-size:.72rem;font-weight:600;letter-spacing:.01em;padding:.7rem .32rem;border-radius:3px;background:var(--sc-ink);color:#fff;text-decoration:none;box-shadow:var(--sc-e2);transition:opacity .3s var(--sc-ease-out)}

/* inner page opening */
.page{padding-top:var(--bar-h)}
.intro{padding-block:clamp(2.5rem,5.5vw,5rem) clamp(1.6rem,3vw,2.8rem)}
.intro h1{font-size:clamp(3rem,1.6rem + 5vw,6.2rem);line-height:.98}
.intro .sc-body{margin-top:1.1rem;font-size:var(--sc-t-lg);line-height:1.4;max-width:36ch}

/* whole photographs */
figure{margin:0}
.ph{display:block;width:100%;height:auto;background:var(--oat)}
.cap{margin-top:.75rem;font-size:.92rem;color:var(--sc-ink-soft);line-height:1.45}
.cap b{color:var(--sc-ink);font-weight:600}

/* choosers shared by the home teaser and Dress your window */
.opts{display:grid;gap:.55rem}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt > span{display:flex;gap:.8rem;align-items:center;height:100%;padding:.6rem .75rem;border-radius:3px;background:var(--sc-surface);box-shadow:inset 0 0 0 1px var(--sc-hairline-strong);transition:box-shadow .16s var(--sc-ease-out),background-color .16s var(--sc-ease-out)}
.opt:hover > span{box-shadow:inset 0 0 0 1px var(--sc-ink-soft)}
.opt input:checked + span{box-shadow:inset 0 0 0 1.5px var(--sc-ink);background:#fff}
.opt input:focus-visible + span{outline:2px solid var(--sc-accent);outline-offset:2px}
.opt b{display:block;font-weight:600;font-size:.97rem;color:var(--sc-ink);line-height:1.25}
.opt small{display:block;font-size:.84rem;color:var(--sc-ink-soft);line-height:1.35;margin-top:.1rem}
.opt i{flex:none;display:block;width:2.9rem;height:2.9rem;border-radius:2px;background-size:cover;background-position:center}
.opt input:disabled + span{opacity:.45;cursor:not-allowed}

/* crossfading photograph */
.stagephoto{position:relative;aspect-ratio:1024/688;overflow:hidden;background:var(--oat)}
.stagephoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .42s var(--sc-ease-out)}
.stagephoto img.on{opacity:1}

@media (max-width:1040px){
  .nav{display:none}
  .bar{grid-template-columns:1fr auto}
  .bar__tel{display:none}
  .menu-btn{display:inline-flex}
  .bar.open{background:var(--sc-canvas);box-shadow:0 1px 0 var(--sc-hairline)}
  .bar.open .nav{display:flex;flex-direction:column;gap:0;grid-column:1/-1;order:3;padding:.4rem 0 .6rem}
  .bar.open .nav a{font-size:1.15rem;padding:.75rem 0;border-top:1px solid var(--sc-hairline);opacity:1}
}
@media (max-width:760px){
  :root{--bar-h:4.3rem}
  .mark img{height:1.55rem}
  .bar{padding-block:.75rem}
  .bar .btn{padding:.6rem .85rem;font-size:.88rem}
  .tag{display:none}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.stagephoto img{transition:none}}