/* Pillow My Fancy — static brochure site
   ---------------------------------------------------------------- */

/* Fonts (self-hosted Rubik, variable weight) */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pink: #d96381;
  --pink-dark: #b3274a;
  --purple: #563b53;
  --purple-dark: #3d2139;
  --blush: #faf5f7;
  --blush-deep: #f3e8ed;
  --text: #4f4b4e;
  --heading: #241d23;
  /* 5.2:1 on white. The old #7c757a measured 4.48:1 and missed WCAG AA. */
  --muted: #6b646a;
  --rule: #e6dfe3;
  --radius: 6px;
  --radius-lg: 12px;
  --wrap: 1240px;
  --shadow: 0 1px 2px rgba(36, 29, 35, .05), 0 8px 24px -12px rgba(36, 29, 35, .18);
  --font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--pink-dark); text-decoration: none; }
a:hover, a:focus { color: var(--pink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

h1, h2, h3 {
  color: var(--heading); line-height: 1.2; margin: 0 0 .5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.05rem);
  font-weight: 600; letter-spacing: -.02em;
}
h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
  font-weight: 600; letter-spacing: -.01em;
}
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .3em; }
strong { color: var(--heading); font-weight: 600; }

/* --pink measures 3.48:1 on white, so eyebrow text uses the darker tint and
   --pink stays for rules, underlines and hover states. */
.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pink-dark);
  margin: 0 0 .75rem;
}

blockquote {
  margin: 1.75em 0;
  padding: 1.1em 1.5em;
  border-left: 3px solid var(--pink);
  background: var(--blush);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--heading);
  font-size: 1.09375rem;
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: #fff; padding: .7rem 1.1rem;
}
.skip-link:focus { left: 0; }

/* ---------- Utility bar ---------- */
.utilitybar { background: var(--blush); border-bottom: 1px solid var(--rule); font-size: .875rem; }
.utilitybar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: .45rem;
}
.utilitybar ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.utilitybar li { margin: 0; }
.utilitybar a { color: var(--text); display: inline-flex; align-items: center; gap: .45rem; }
.utilitybar a:hover { color: var(--pink-dark); }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.utilitybar .social svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Header ---------- */
.masthead {
  background: #fff; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.1rem;
}
.masthead .logo img { width: 250px; height: 55px; }
.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--heading); font: inherit; font-size: .9rem; font-weight: 500;
  padding: .55rem .85rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--pink); color: var(--pink-dark); }

.mainnav ul {
  display: flex; gap: clamp(1.6rem, .2rem + 1.5vw, 2.25rem);
  margin: 0; padding: 0; list-style: none;
}
.mainnav li { margin: 0; }
.mainnav a {
  position: relative; display: block; padding: .3rem 0;
  color: var(--heading); font-size: .875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
}
.mainnav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--pink); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.mainnav a:hover, .mainnav a[aria-current='page'] { color: var(--pink-dark); }
.mainnav a:hover::after, .mainnav a[aria-current='page']::after { transform: scaleX(1); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; background: var(--purple-dark); isolation: isolate; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center; z-index: -2;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(36, 20, 33, .88) 0%, rgba(36, 20, 33, .72) 38%,
    rgba(36, 20, 33, .30) 70%, rgba(36, 20, 33, .18) 100%);
}
.hero .wrap {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 30rem; padding-block: 4rem; max-width: var(--wrap);
}
.hero-copy { max-width: 46ch; color: #fff; }
.hero-copy h1 { color: #fff; margin-bottom: .45em; }
.hero-copy .eyebrow { color: #f0adc0; }
.hero-lede {
  font-size: 1.125rem; line-height: 1.65; color: #efe6eb;
  margin-bottom: .9rem;
}
.hero-note {
  font-size: .9375rem; line-height: 1.55; color: rgba(239, 230, 235, .78);
  max-width: 80%;
  margin-bottom: 1.9rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: .8rem 1.7rem;
  background: var(--pink-dark); color: #fff;
  border: 1px solid var(--pink-dark); border-radius: 50em;
  font-size: .9375rem; font-weight: 500; letter-spacing: .02em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover, .btn:focus { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-ghost:hover, .btn-ghost:focus { background: #fff; border-color: #fff; color: var(--purple-dark); }
.btn-outline { background: transparent; border-color: var(--pink-dark); color: var(--pink-dark); }
.btn-outline:hover, .btn-outline:focus { background: var(--pink-dark); color: #fff; }

.arrow-link { font-weight: 500; }
.arrow-link::after { content: ' \2192'; }
.center-cta { text-align: center; margin: 2.5rem 0 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { background: var(--blush); font-size: .8125rem; }
.breadcrumbs .wrap { padding-block: .7rem 0; }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0; padding: 0; list-style: none;
}
.breadcrumbs li { margin: 0; color: var(--muted); }
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--rule); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--pink-dark); }
.breadcrumbs [aria-current='page'] { color: var(--heading); font-weight: 500; }

/* ---------- Page title (inner pages) ---------- */
.page-title { background: var(--blush); border-bottom: 1px solid var(--rule); }
.page-title .wrap { padding-block: 2.75rem; text-align: center; }
.page-title h1 { margin: 0; }
.page-title h1::after {
  content: ''; display: block; width: 3.5rem; height: 3px;
  background: var(--pink); border-radius: 2px; margin: 1.1rem auto 0;
}

/* ---------- Sections ---------- */
.section { padding-block: 4.25rem; }
.section-alt { background: var(--blush); }
.section-head { max-width: 44rem; margin: 0 auto 2.75rem; text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }

/* ---------- Layout (inner pages) ---------- */
.main { padding-block: 3rem 4rem; }
.layout { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .layout.has-aside { grid-template-columns: minmax(0, 1fr) 310px; gap: 4rem; }
}
.content { max-width: 72ch; }
.layout:not(.has-aside) .content { max-width: 78ch; margin-inline: auto; }
.content > :first-child { margin-top: 0; }
.content h2 { margin-top: 2em; }
.content h2:first-child, .content > picture:first-child + h2 { margin-top: 0; }
.content p { text-wrap: pretty; }
.content h2::after {
  content: ''; display: block; width: 2.5rem; height: 3px;
  background: var(--pink); border-radius: 2px; margin-top: .6rem;
}
.content h3 { margin-top: 1.8em; }
.content figure { margin: 0 0 1.5rem; }
.content figcaption { font-size: .875rem; font-style: italic; color: var(--muted); margin-top: .75rem; }
.banner {
  border-radius: var(--radius-lg); margin-bottom: 2.25rem;
  width: 100%; box-shadow: var(--shadow);
}

/* ---------- Cards (home promises) ---------- */
.cards { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
}
.card h3 { margin-bottom: .65em; }
.card p:last-child { margin-bottom: 0; }

/* ---------- Tiles (home explore) ---------- */
.tiles { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: var(--blush-deep); color: inherit;
}
.tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tile-body { padding: 1.4rem 1.5rem 1.6rem; }
.tile h3 { margin-bottom: .4em; }
.tile p { color: var(--text); font-size: .9688rem; margin-bottom: .9em; }
.tile span { color: var(--pink-dark); font-weight: 500; font-size: .9375rem; }
.tile span::after { content: ' \2192'; }
.tile:hover span { color: var(--pink); }

/* ---------- Galleries ---------- */
.gallery { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin: 2rem 0; }
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img { border-radius: var(--radius); width: 100%; box-shadow: var(--shadow); }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--blush-deep); border-radius: var(--radius-lg);
  background: var(--blush); padding: 1.6rem 1.75rem; margin: 2rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout p:first-child { color: var(--heading); }

/* ---------- Sidebar ---------- */
.aside .card { padding: 1.75rem; font-size: .9688rem; background: var(--blush); border-color: var(--blush-deep); }
.aside h2 { font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.aside h2::after { display: none; }
.aside h3 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pink-dark); margin: 1.5rem 0 .35rem;
}
.aside p { margin-bottom: .25em; }
.aside address { font-style: normal; margin-bottom: .9rem; }

/* ---------- Contact details ---------- */
.contact-methods { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.contact-methods li { display: flex; gap: .8rem; align-items: baseline; margin-bottom: .65rem; }
.contact-methods .icon {
  width: 1.1rem; height: 1.1rem; position: relative; top: .18rem; color: var(--pink);
}

/* ---------- Map ---------- */
.map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.map iframe { display: block; width: 100%; height: 400px; border: 0; }
/* Static map screenshot as the backdrop, with a scrim so the overlaid address
   and buttons keep contrast. min-height matches the iframe so swapping in the
   live embed does not shift the layout. */
.map-facade {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; padding: 2rem 1.5rem; text-align: center;
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--blush-deep);
  background-image: url(../img/gen/map-static-1600w.jpg);
  background-image: image-set(
    url(../img/gen/map-static-800w.avif) type('image/avif') 1x,
    url(../img/gen/map-static-1600w.avif) type('image/avif') 2x,
    url(../img/gen/map-static-800w.webp) type('image/webp') 1x,
    url(../img/gen/map-static-1600w.webp) type('image/webp') 2x,
    url(../img/gen/map-static-800w.jpg) type('image/jpeg') 1x,
    url(../img/gen/map-static-1600w.jpg) type('image/jpeg') 2x);
  background-size: cover;
  background-position: center;
}
/* A light wash keeps the map from competing with the card sitting on it. */
.map-facade::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(250, 245, 247, .30) 0%, rgba(86, 59, 83, .22) 100%);
}
.map-facade-body {
  display: grid; gap: .3rem; justify-items: center;
  /* Inner pages put this in a ~490px column, so keep enough map showing
     around the card. */
  max-width: min(21rem, 100%); padding: 1.4rem 1.5rem;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(36, 29, 35, .10), 0 18px 40px -16px rgba(36, 29, 35, .45);
}
.map-pin { width: 2rem; height: 2rem; color: var(--pink-dark); }
.map-address { margin: 0; color: var(--text); }
.map-address strong { color: var(--heading); font-size: 1.125rem; }
.map-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin: 1.1rem 0 0;
}
/* Equal widths so the pair reads as one block whether it sits on one line or
   wraps to two inside the card. */
.map-actions .btn { width: auto; min-width: 13.5rem; }
.map-note { margin: .85rem 0 0; font-size: .8125rem; color: var(--muted); }
/* Google requires their attribution to travel with the map imagery. */
.map-credit {
  position: absolute; right: .7rem; bottom: .45rem; margin: 0;
  font-size: .6875rem; color: #4f4b4e;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
caption { text-align: left; padding-bottom: .6rem; color: var(--muted); font-size: .875rem; }
th, td { border-bottom: 1px solid var(--rule); padding: .7rem .9rem; text-align: left; vertical-align: top; }
thead th {
  background: var(--blush); color: var(--heading);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}
tbody th { font-weight: 500; color: var(--heading); white-space: nowrap; }
tbody tr:hover { background: var(--blush); }

/* ---------- Footer ---------- */
.sitefooter { background: var(--purple); color: #ded2da; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-block: 3.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1fr; } }
.sitefooter h2 {
  color: #fff; font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1.1rem;
}
.sitefooter p { color: #ded2da; }
.sitefooter ul { list-style: none; margin: 0; padding: 0; }
.sitefooter li { margin-bottom: .55rem; }
.sitefooter a { color: #ded2da; }
.sitefooter a:hover { color: #fff; }
.sitefooter ul.social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.sitefooter ul.social li { margin: 0; }
.sitefooter ul.social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
  transition: background-color .2s ease;
}
.sitefooter ul.social a:hover { background: var(--pink); }
.sitefooter ul.social svg { width: 1.15rem; height: 1.15rem; }

.footer-nap address { font-style: normal; margin-bottom: .55rem; }
.footer-nap p { margin-bottom: .55rem; }
.footer-nap strong { color: #fff; }
/* Hours read as a small day/time table so the rows line up on scan. */
.footer-hours { margin: .9rem 0 0; font-size: .8125rem; }
.footer-hours dt {
  color: #fff; font-weight: 600; letter-spacing: .02em; margin-bottom: .4rem;
}
.footer-hours dd {
  display: grid; grid-template-columns: 5.5rem auto;
  column-gap: .75rem; margin: 0 0 .25rem;
}
.footer-hours dd:last-child { margin-bottom: 0; }
.footer-hours dd span:first-child { color: #bfaeba; }

.disclaimer { background: var(--purple-dark); color: #ab9ba7; }
.disclaimer .wrap { padding-block: 1.2rem; }
.disclaimer p { margin: 0; font-size: .75rem; line-height: 1.65; color: inherit; }
.disclaimer strong { color: #d6c7d2; }
.copyright { background: var(--purple-dark); border-top: 1px solid rgba(255, 255, 255, .08); }
.copyright .wrap { padding-block: 1rem; }
.copyright p { margin: 0; font-size: .8125rem; color: #ab9ba7; }
.copyright a { color: #ded2da; }
.copyright a:hover { color: #fff; }

/* ---------- Collapsed nav ----------
   Five uppercase nav items plus the logo stop fitting on one line well before
   the 800px layout breakpoint, so the toggle takes over at 950px. */
@media (max-width: 949px) {
  .masthead .wrap { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  /* The masthead is sticky, so a long open nav must scroll rather than run
     off the viewport. */
  .mainnav { flex-basis: 100%; display: none; max-height: 70vh; overflow-y: auto; }
  .mainnav.is-open { display: block; }
  .mainnav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
  .mainnav li + li { border-top: 1px solid var(--rule); }
  .mainnav a { padding: .85rem 0; }
  .mainnav a::after { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 799px) {
  .masthead .logo img { width: 200px; height: 44px; }
  .utilitybar .wrap { justify-content: center; gap: .5rem 1.25rem; }
  .hero .wrap { min-height: 26rem; padding-block: 3.25rem; }
  .hero-copy { max-width: none; }
  .hero::after {
    background: linear-gradient(175deg, rgba(36, 20, 33, .82) 0%, rgba(36, 20, 33, .68) 100%);
  }
  .section { padding-block: 3rem; }
  .page-title .wrap { padding-block: 2rem; }
  .main { padding-block: 2.25rem 3rem; }
  .btn { width: 100%; text-align: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}