/*
Theme Name: StaySelect Journal
Theme URI: https://stay-select.com/
Author: StaySelect
Description: Editorial WordPress theme for the StaySelect resources journal.
Version: 1.0.0
Text Domain: stayselect-journal
*/

:root {
  --ss-canvas: #f8f7f4;
  --ss-paper: #ffffff;
  --ss-charcoal: #171a18;
  --ss-stone: #6c706b;
  --ss-sand: #ede7dc;
  --ss-copper: #aa6042;
  --ss-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-editorial: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ss-charcoal); background: var(--ss-canvas); font-family: var(--ss-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
::selection { color: #fff; background: var(--ss-copper); }
:focus-visible { outline: 2px solid #d17b57; outline-offset: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ss-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.ss-header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--ss-charcoal); border-bottom: 1px solid rgba(23,26,24,.08); background: rgba(248,247,244,.94); backdrop-filter: blur(18px); }
.ss-header__inner { display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 28px; }
.ss-logo { font-size: 18px; font-weight: 700; letter-spacing: -.04em; }
.ss-logo span { color: var(--ss-copper); }
.ss-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 600; }
.ss-nav > a, .ss-nav__locations > summary { opacity: .72; transition: opacity .2s ease; }
.ss-nav > a:hover, .ss-nav__locations > summary:hover, .ss-nav .is-current { opacity: 1; }
.ss-nav__locations { position: relative; }
.ss-nav__locations > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.ss-nav__locations > summary::-webkit-details-marker { display: none; }
.ss-nav__locations > summary::after { content: "⌄"; position: relative; top: -1px; font-size: 12px; }
.ss-location-menu { position: absolute; top: calc(100% + 22px); left: 50%; width: 310px; padding: 12px; transform: translateX(-50%); border: 1px solid rgba(23,26,24,.08); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(23,26,24,.16); }
.ss-location-menu__label { margin: 2px 10px 10px; color: var(--ss-stone); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ss-location-menu a { display: block; padding: 9px 10px; border-radius: 11px; color: var(--ss-stone); font-size: 13px; }
.ss-location-menu a strong { color: var(--ss-charcoal); }
.ss-location-menu a:hover { background: var(--ss-sand); }
.ss-location-menu hr { margin: 7px; border: 0; border-top: 1px solid rgba(23,26,24,.08); }
.ss-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 20px; border-radius: 999px; color: #fff; background: var(--ss-charcoal); font-size: 13px; font-weight: 700; transition: background .25s ease, transform .25s ease; }
.ss-button:hover { color: #fff; background: var(--ss-copper); transform: translateY(-1px); }
.ss-menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; }
.ss-menu-toggle span, .ss-menu-toggle::before, .ss-menu-toggle::after { display: block; width: 20px; height: 1.5px; margin: 5px auto; content: ""; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.ss-menu-toggle[aria-expanded="true"] span { opacity: 0; }
.ss-menu-toggle[aria-expanded="true"]::before { transform: translateY(6.5px) rotate(45deg); }
.ss-menu-toggle[aria-expanded="true"]::after { transform: translateY(-6.5px) rotate(-45deg); }

.ss-main { min-height: 70vh; padding-top: 80px; }
.ss-hero { position: relative; overflow: hidden; padding: 110px 0 90px; border-bottom: 1px solid rgba(23,26,24,.08); }
.ss-hero::after { position: absolute; top: -170px; right: -120px; width: 520px; height: 520px; border: 1px solid rgba(170,96,66,.12); border-radius: 50%; content: ""; box-shadow: inset 0 0 0 90px rgba(170,96,66,.035), inset 0 0 0 180px rgba(170,96,66,.025); }
.ss-eyebrow { position: relative; z-index: 1; margin: 0 0 20px; color: var(--ss-copper); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.ss-hero h1, .ss-archive-title { position: relative; z-index: 1; max-width: 900px; margin: 0; font-size: clamp(3rem, 7.2vw, 6.8rem); font-weight: 500; letter-spacing: -.065em; line-height: .93; }
.ss-hero h1 em { color: var(--ss-copper); font-family: var(--ss-editorial); font-weight: 400; }
.ss-hero__copy { position: relative; z-index: 1; max-width: 610px; margin: 28px 0 0; color: var(--ss-stone); font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.7; }

.ss-posts { padding: 82px 0 110px; }
.ss-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid rgba(23,26,24,.12); }
.ss-section-head h2 { max-width: 700px; margin: 0; font-size: clamp(2rem, 4.5vw, 4.1rem); font-weight: 500; letter-spacing: -.055em; line-height: 1; }
.ss-section-head p { max-width: 390px; margin: 0; color: var(--ss-stone); line-height: 1.6; }
.ss-post-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.ss-card { position: relative; grid-column: span 6; min-height: 420px; overflow: hidden; border: 1px solid rgba(23,26,24,.09); background: var(--ss-paper); transition: transform .35s ease, box-shadow .35s ease; }
.ss-card:first-child { grid-column: span 12; }
.ss-card:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(23,26,24,.09); }
.ss-card__image { display: block; height: 240px; overflow: hidden; background: var(--ss-sand); }
.ss-card:first-child .ss-card__image { height: 420px; }
.ss-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ss-card:hover .ss-card__image img { transform: scale(1.025); }
.ss-card__body { padding: 28px; }
.ss-card__meta, .ss-article__meta { color: var(--ss-copper); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ss-card h2 { margin: 15px 0 13px; font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; }
.ss-card p { margin: 0; color: var(--ss-stone); line-height: 1.7; }
.ss-card__link { display: inline-block; margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid rgba(23,26,24,.25); font-size: 13px; font-weight: 700; }
.ss-empty { padding: 60px; border: 1px solid rgba(23,26,24,.1); background: #fff; text-align: center; }
.ss-pagination { margin-top: 44px; }
.ss-pagination .nav-links { display: flex; gap: 8px; }
.ss-pagination a, .ss-pagination span { display: grid; min-width: 42px; height: 42px; place-items: center; border: 1px solid rgba(23,26,24,.12); border-radius: 50%; }
.ss-pagination .current { color: #fff; background: var(--ss-charcoal); }

.ss-article { padding: 90px 0 120px; }
.ss-article__header { max-width: 930px; margin: 0 auto 52px; text-align: center; }
.ss-article__header h1 { margin: 18px 0 24px; font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 500; letter-spacing: -.06em; line-height: .96; }
.ss-article__lede { color: var(--ss-stone); font-family: var(--ss-editorial); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-style: italic; line-height: 1.55; }
.ss-article__image { width: min(1180px, calc(100% - 40px)); max-height: 720px; margin: 0 auto 64px; overflow: hidden; }
.ss-article__image img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; }
.ss-entry { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.ss-entry > *:first-child { margin-top: 0; }
.ss-entry h2 { margin: 2.7em 0 .7em; font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.04em; line-height: 1.08; }
.ss-entry h3 { margin-top: 2.2em; font-size: 1.35rem; letter-spacing: -.02em; }
.ss-entry p, .ss-entry li { color: #4f534f; font-size: 1.07rem; line-height: 1.85; }
.ss-entry a { color: var(--ss-copper); text-decoration: underline; text-underline-offset: 4px; }
.ss-entry blockquote { margin: 2.5rem 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--ss-copper); font-family: var(--ss-editorial); font-size: 1.35rem; font-style: italic; }
.ss-entry figure { margin: 2.4rem 0; }
.ss-post-nav { display: grid; grid-template-columns: 1fr 1fr; width: min(980px, calc(100% - 40px)); margin: 0 auto 110px; gap: 18px; }
.ss-post-nav a { padding: 24px; border: 1px solid rgba(23,26,24,.1); background: #fff; font-weight: 700; }
.ss-post-nav .nav-next { text-align: right; }

.ss-footer { padding: 80px 0 30px; color: #fff; background: var(--ss-charcoal); }
.ss-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding-bottom: 62px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ss-footer__brand { font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.ss-footer__brand span { color: var(--ss-copper); }
.ss-footer__claim { max-width: 310px; margin: 16px 0 0; color: rgba(255,255,255,.55); font-family: var(--ss-editorial); font-size: 24px; font-style: italic; line-height: 1.2; }
.ss-footer h2 { margin: 3px 0 17px; color: rgba(255,255,255,.4); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.ss-footer__links { display: grid; gap: 12px; color: rgba(255,255,255,.7); font-size: 14px; }
.ss-footer__links a:hover { color: #fff; }
.ss-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 27px; color: rgba(255,255,255,.4); font-size: 12px; }

@media (max-width: 820px) {
  .ss-wrap { width: min(100% - 32px, 1180px); }
  .ss-menu-toggle { display: block; }
  .ss-header__cta { display: none; }
  .ss-nav { position: absolute; top: 80px; right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 12px 20px 28px; border-top: 1px solid rgba(23,26,24,.08); background: var(--ss-canvas); }
  .ss-nav.is-open { display: grid; }
  .ss-nav > a, .ss-nav__locations > summary { padding: 15px 0; border-bottom: 1px solid rgba(23,26,24,.08); font-size: 19px; opacity: 1; }
  .ss-nav__locations { order: 3; }
  .ss-location-menu { position: static; width: 100%; margin: 8px 0 5px; transform: none; box-shadow: none; }
  .ss-hero { padding: 82px 0 68px; }
  .ss-hero::after { opacity: .5; }
  .ss-section-head { display: block; }
  .ss-section-head p { margin-top: 18px; }
  .ss-card, .ss-card:first-child { grid-column: span 12; min-height: 0; }
  .ss-card:first-child .ss-card__image, .ss-card__image { height: 240px; }
  .ss-footer__grid { grid-template-columns: 1fr; }
  .ss-footer__bottom { display: grid; }
  .ss-post-nav { grid-template-columns: 1fr; }
  .ss-post-nav .nav-next { text-align: left; }
}

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