:root{
  --ink:#141413;
  --muted:#5f5e59;
  --bg:#f7f6f2;
  --wrap:72rem;
  --pad:2.5rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:17px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.hello,.brand,.contact h2{
  font-family:"Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  font-weight:400;
  letter-spacing:-0.01em;
}
a{color:var(--ink); text-underline-offset:.2em}
img{display:block; max-width:100%; height:auto}

header.site, footer.site, main:not(.home), .hello, .contact{
  max-width:var(--wrap);
  margin-left:auto; margin-right:auto;
  padding-left:var(--pad); padding-right:var(--pad);
}
header.site{padding-top:2.25rem}

/* Wordmark */
.brand{
  font-weight:500;
  font-size:1.8rem;
  line-height:1;
  letter-spacing:-0.012em;
  color:#111110;
  text-decoration:none;
}

/* Intro */
.hello{
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  line-height:1.2;
  margin-top:6.5rem; margin-bottom:6.5rem;
}
.hello{max-width:calc(17.5em + 2*var(--pad)); margin-left:max(0px, calc((100% - var(--wrap)) / 2))}

/* Full-bleed product sections */
.app{
  position:relative;
  height:clamp(560px, 56.25vw, 920px);
  overflow:hidden;
}
.app picture, .app > picture img{position:absolute; inset:0; width:100%; height:100%}
.app > picture img{object-fit:cover; object-position:60% 50%}
.app::after{content:""; position:absolute; inset:0; pointer-events:none}
.overlay{
  position:absolute; z-index:1;
  left:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  bottom:clamp(2.75rem, 5vw, 4.5rem);
  max-width:24rem;
}
.app h2{margin:0}
.pitch{margin:0 0 1.6rem}
.store{
  display:inline-block;
  text-decoration:none;
  padding:.62rem 1.15rem;
  border:1px solid currentColor;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}

/* Keepwell: app palette (WhereStyle) and SF Pro wordmark */
#where{
  --kw-paper:#F5F7FB; --kw-ink:#1C2B42; --kw-blue:#1856B0; --kw-muted:#556478;
  background:var(--kw-paper);
  color:var(--kw-ink);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif;
}
.kw-mark{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:clamp(2.5rem, 4vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--kw-blue);
  margin-bottom:.35rem !important;
}
#where .tagline{margin:0 0 .85rem; font-size:1.3rem; font-weight:600; line-height:1.3; letter-spacing:-0.01em}
#where .overlay{max-width:17.5rem}
#where .pitch{font-size:1.05rem; line-height:1.5; color:var(--kw-muted)}
#where .store{font-size:.95rem; font-weight:600; color:var(--kw-blue)}
#where .store:hover, #where .store:focus-visible{background:var(--kw-blue); color:#fff; border-color:var(--kw-blue)}

/* Painted Bride: app palette (paper / ai-iro / sumi), EB Garamond and brush mark */
#slash{
  --pb-paper:#EFE9DC; --pb-ai:#2E4B71; --pb-sumi:#27221F; --pb-ink2:#696259;
  background:var(--pb-paper);
  color:var(--pb-sumi);
  font-family:"EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
}
#slash .overlay{
  left:auto;
  right:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  max-width:21rem;
}
.pb-mark{
  display:flex; align-items:center; gap:.85rem;
  font-family:"EB Garamond", Garamond, Georgia, serif;
  font-weight:500;
  font-size:clamp(1.35rem, 1.9vw, 1.6rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  color:var(--pb-sumi);
  margin-bottom:1.1rem !important;
}
.pb-mark img{width:auto; height:2.1em; position:static}
#slash .pitch{font-size:1.4rem; line-height:1.4; max-width:20rem}
#slash .store{font-size:1.05rem; letter-spacing:.04em; color:var(--pb-ai); background:rgba(239,233,220,.92)}
#slash .store:hover, #slash .store:focus-visible{background:var(--pb-ai); color:var(--pb-paper); border-color:var(--pb-ai)}

/* Product shot: the whole phone, real app screen in a simple device frame, set in the open part of the photo */
.shot{
  position:absolute; z-index:2;
  top:50%; transform:translateY(-50%);
  width:clamp(200px, 23vw, 380px);
  pointer-events:none;
}
#where .shot{left:1.5%; top:auto; bottom:3%; transform:none}
#slash .shot{right:2.5%}
.device{
  padding:4.2%;
  background:#1b1b1d;
  border-radius:15% / 7%;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 24px 50px rgba(20,20,19,.30), 0 3px 8px rgba(20,20,19,.20);
}
.device img{width:100%; height:auto; border-radius:11% / 5.1%; position:static}

/* Desktop: light text with a soft shadow, sitting over the person's clothing */
@media (min-width:761px){
  .overlay{bottom:7%}
  #where .overlay{left:auto; right:3%; max-width:17.5rem}
  #slash .overlay{right:auto; left:3%; bottom:7.5%; max-width:17rem}
  .overlay, .overlay .kw-mark, .overlay .pb-mark, #where .pitch, #slash .pitch{color:#fff}
  .overlay > *{text-shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.28)}
  .pb-mark img{filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  #where .store, #slash .store{color:#fff; background:transparent; border-color:rgba(255,255,255,.9)}
  #where .store:hover, #where .store:focus-visible, #slash .store:hover, #slash .store:focus-visible{background:#fff; color:#1b1b1d; text-shadow:none; border-color:#fff}
}

@media (min-width:761px) and (max-width:1279px){
  #where .overlay{max-width:14.5rem}
  .kw-mark{font-size:2.15rem}
  #where .tagline{font-size:1.05rem; margin-bottom:.5rem}
  #where .pitch{font-size:.9rem; margin-bottom:1rem}
  #where .store{font-size:.82rem; padding:.5rem .95rem}
  #slash .overlay{max-width:14rem}
  .pb-mark{font-size:1.1rem; margin-bottom:.7rem !important}
  #slash .pitch{font-size:1.12rem; margin-bottom:1rem}
  #slash .store{font-size:.9rem; padding:.5rem .95rem}
}


/* Tipfeed: app palette (night bg, cream, green mark), Outfit wordmark and Fraunces headline */
#tipfeed{
  --tf-bg:#0b0c10; --tf-cream:#f7f2e8; --tf-muted:#c9c1b3;
  background:radial-gradient(1100px 620px at 72% 18%, #1b2230 0%, transparent 62%), var(--tf-bg);
  color:var(--tf-cream);
  font-family:Outfit, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
#tipfeed .overlay{top:50%; bottom:auto; transform:translateY(-50%); max-width:26rem}
.tf-mark{display:flex; align-items:center; gap:.7rem; font-family:Outfit, system-ui, sans-serif; font-weight:700; font-size:clamp(2.4rem, 3.8vw, 3.3rem); letter-spacing:-0.04em; line-height:1; margin-bottom:1.1rem !important}
.tf-tile{width:1.1em; height:1.1em; border-radius:.3em; display:grid; place-items:center; background:linear-gradient(160deg, #2a9a5f, #145c38); color:#e9f8ef; font-size:.42em; letter-spacing:0; box-shadow:0 6px 14px rgba(28,122,74,.35)}
#tipfeed .nw{white-space:nowrap}
#tipfeed .tagline{font-family:Fraunces, Georgia, serif; font-weight:500; font-size:clamp(1.5rem, 2.3vw, 2rem); line-height:1.2; letter-spacing:-0.01em; margin:0 0 1rem}
#tipfeed .pitch{font-size:1.1rem; line-height:1.55; color:var(--tf-muted); max-width:24rem}
#tipfeed .shot{right:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad) + 2rem))}
#tipfeed .device{box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.10) inset, 0 30px 70px rgba(0,0,0,.55)}
@media (min-width:761px){ #tipfeed .overlay > *{text-shadow:none} #tipfeed .pitch{color:var(--tf-muted)} #tipfeed .overlay{bottom:auto} }
@media (max-width:760px){
  #tipfeed .overlay{transform:none; top:auto; padding-top:3rem}
  #tipfeed .shot{right:auto; margin-bottom:3.25rem}
}

/* Contact */
.contact{padding-top:6.5rem; padding-bottom:5.5rem; border-bottom:1px solid #dcdad3}
.contact h2{text-wrap:balance; font-size:clamp(1.9rem, 3.4vw, 2.9rem); line-height:1.2; margin:0 0 1.4rem}
.contact-mail{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(1.3rem, 2.2vw, 1.7rem);
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px;
  overflow-wrap:anywhere;
}
.contact-mail:hover, .contact-mail:focus-visible{text-decoration-thickness:2px}

/* Footer */
footer.site{
  padding-top:2.75rem;
  padding-bottom:3rem;
  color:var(--ink);
  font-size:.92rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem 2rem;
}
footer.site p{margin:0}
footer.site nav{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem}
footer.site nav a{text-decoration:none}
footer.site nav a:hover{text-decoration:underline}

/* Legal pages */
.doc{max-width:40rem; padding:1rem 0 5rem}
.doc h1{font-size:2.5rem; line-height:1.15; margin:4rem 0 .5rem}
.doc h2{font-size:1.45rem; margin:2.5rem 0 .5rem}
.doc h3{font-size:1.15rem; margin:1.75rem 0 .4rem}
.meta{color:var(--muted); margin-top:0}
dt{font-weight:500; margin-top:1.1rem}
dd{margin:.2rem 0 0}

@media (max-width:760px){
  :root{--pad:1.4rem}
  body{font-size:16px}
  header.site{padding-top:1.6rem}
  .brand{font-size:1.5rem}
  .hello{margin-top:3.5rem; margin-bottom:3.5rem; margin-left:0}
  .app{height:auto}
  .app picture{position:relative; display:block; aspect-ratio:1/1; height:auto}
  .app > picture img{position:absolute; object-position:50% 50%}
  .app::after{display:none}
  .overlay, #slash .overlay{position:relative; left:auto; right:auto; top:auto; bottom:auto; max-width:none; padding:2rem var(--pad) 2.25rem}
  #where .overlay{max-width:none}
  .shot, #where .shot, #slash .shot{position:relative; left:auto; right:auto; top:auto; transform:none; width:min(62%, 250px); margin:0 auto 2.75rem}
  .kw-mark{font-size:2.4rem}
  #where .tagline{font-size:1.2rem}
  #slash .pitch{font-size:1.3rem}
  .contact{padding-top:3.75rem; padding-bottom:3.5rem}
  footer.site{flex-direction:column; padding-bottom:2.5rem}
  .doc h1{margin-top:2.5rem; font-size:2.1rem}
}