/* ==========================================================================
   July & West — shared design system
   Extracted from design/"july 5". Single source of truth for july.us,
   west.us, and (copied into assets/) the julyandwest.com Shopify theme.
   Change a token here, not a value in a template.
   ========================================================================== */

/* --- Typefaces ------------------------------------------------------------
   Self-hosted, so the browser never has to reach fonts.googleapis.com and then
   fonts.gstatic.com in sequence before a single glyph can be drawn. Only the
   latin and latin-ext subsets are carried; unicode-range means a subset is
   fetched only if the page actually uses those characters, and the italic face
   only when italic text renders.

   Newsreader is the variable font rather than static instances: one file
   covers 400 and 500 AND keeps the optical-size axis, which is what makes the
   large headlines hold up. Both families are OFL-licensed, so self-hosting is
   permitted. `fallback` holds text briefly so the real face usually wins the
   race, instead of swapping in visibly after paint.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url('/assets/fonts/mulish-v18-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;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url('/assets/fonts/mulish-v18-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: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: fallback;
  src: url('/assets/fonts/newsreader-v26-italic-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: fallback;
  src: url('/assets/fonts/newsreader-v26-italic-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: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: fallback;
  src: url('/assets/fonts/newsreader-v26-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: fallback;
  src: url('/assets/fonts/newsreader-v26-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;
}


/* --- Tokens: July (default) ---------------------------------------------- */
:root {
  --paper:        #F6EFE3;
  --paper-lit:    #FBF6EC;
  --paper-sunk:   #EFE6D6;
  --ink:          #2E2218;
  --ink-soft:     #6B5A48;
  --ink-muted:    #9B8A74;
  --rule:         #E2D6C2;
  --rule-strong:  #CBBBA1;

  --accent:       #C0603C;   /* terracotta */
  --accent-lit:   #D88A5F;   /* on dark ground */
  --accent-wash:  #F4D9C4;

  --footer-bg:    #2E2218;
  --footer-ink:   #E9DDC9;
  --footer-soft:  #D6C8B0;
  --footer-muted: #8C7B62;
  --footer-rule:  #4A3B2B;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans:  'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1280px;
  --measure:   680px;
  --gutter:    clamp(22px, 4vw, 32px);
  --header-h:  66px;

  --step--1: 13px;
  --step-0:  16px;
  --step-1:  clamp(18px, 2vw, 23px);
  --step-2:  clamp(28px, 3.4vw, 42px);
  --step-3:  clamp(34px, 4.8vw, 60px);
  --step-4:  clamp(38px, 5.6vw, 78px);

  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* --- Tokens: West overrides ----------------------------------------------
   Same skeleton, cooler paper, cold accent. The colour shift alone should
   tell you which side of the tab you are on.                              */
[data-site="west"] {
  --paper:        #F1EEE7;
  --paper-lit:    #F8F6F0;
  --paper-sunk:   #E8E4DA;
  --ink:          #2B2A26;
  --ink-soft:     #5A5C55;
  --ink-muted:    #8B8C83;
  --rule:         #DCD8CC;
  --rule-strong:  #BFBBAD;

  --accent:       #4E6E7D;   /* dusty blue — big sky, distance */
  --accent-lit:   #8FB3C2;
  --accent-wash:  #D9E4E9;

  --footer-bg:    #2B2A26;
  --footer-ink:   #E4E1D8;
  --footer-soft:  #CBC8BC;
  --footer-muted: #85857B;
  --footer-rule:  #45443D;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--paper-lit); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

/* --- Layout --------------------------------------------------------------- */
/* The page content is an opaque sheet sitting above the footer, which is
   pinned behind it. Scrolling to the end slides the sheet up and uncovers the
   footer; scrolling back up draws it over again. See .sitefoot.
   The bottom padding is the old footer margin — it has to be *inside* the
   sheet, or the footer would show through the gap. */
main {
  position: relative;
  z-index: 1;
  background: var(--paper);
  padding-bottom: clamp(64px, 10vw, 120px);
}

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* --- Eyebrow / small caps ------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--quiet { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.14em; }

/* --- Header / the July|West tab switch ------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  transition: transform .28s var(--ease);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
/* Set by the scroll script: out of the way going down, back on the way up.
   Without JS the class is never added and the bar simply stays put. */
.masthead--away { transform: translateY(-100%); }
.masthead__inner {
  max-width: var(--container); margin-inline: auto;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
}
/* The brand switch. Order is fixed — July, then West — so the reader keeps
   their anchor when crossing between sites; only the marking moves. */
.switch { display: flex; align-items: baseline; gap: 28px; }
.switch__brand {
  font-family: var(--serif);
  font-size: 26px; font-weight: 400;
  line-height: 1; letter-spacing: -0.01em;
  color: var(--ink-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.switch__brand:hover { color: var(--ink-soft); }
.switch__brand--on { color: var(--accent); border-bottom-color: var(--accent); }
/* West's compass, on both mastheads — part of the mark, not a link cue. */
.switch__compass { font-size: .68em; }

/* Wordmark: july·us — the footer colophon's domain mark. */
.wordmark {
  font-family: var(--serif);
  font-size: 30px; font-weight: 400;
  line-height: 1; letter-spacing: -0.01em;
  color: var(--footer-ink);
  display: inline-flex; align-items: baseline; gap: 2px;
}
.wordmark__dot { color: var(--accent-lit); }
.wordmark__tld { font-size: .52em; font-weight: 500; color: var(--accent-lit); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid {
  background: var(--paper-lit); border-color: transparent;
  font-size: 13px; letter-spacing: 0.14em; padding: 14px 26px;
}
.btn--solid:hover { background: var(--accent-wash); color: var(--ink); transform: translateY(-1px); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; }
.hero__frame {
  position: relative; width: 100%;
  height: clamp(460px, 82vh, 820px);
  overflow: hidden; background: var(--paper-sunk);
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(40,28,16,.18) 0%, rgba(40,28,16,0) 38%, rgba(34,22,12,.66) 100%);
}
.hero__body {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
}
.hero__inner {
  max-width: var(--container); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter) clamp(36px, 5vw, 58px);
}
.hero__text { max-width: 720px; animation: julyUp .7s var(--ease) both; }
.hero .eyebrow { color: var(--accent-wash); margin-bottom: 18px; display: inline-block; }
.hero h1 { font-size: var(--step-4); color: var(--paper-lit); margin-bottom: 20px; }
.hero__standfirst {
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55;
  color: #F0E6D6; max-width: 560px; margin: 0 0 26px;
}

/* --- Section heads -------------------------------------------------------- */
.section { padding-block: clamp(56px, 8vw, 84px) 0; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 40px;
  border-bottom: 1px solid var(--rule); padding-bottom: 22px;
}
.section__head h2 { font-size: var(--step-2); }
.section__marker {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap; padding-bottom: 8px;
}

/* --- Article grid --------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 44px 36px;
}
.card { display: flex; flex-direction: column; animation: julyFade .6s var(--ease) both; }
.card__media { overflow: hidden; background: var(--paper-sunk); aspect-ratio: 4 / 3; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }
.card .eyebrow { margin: 18px 0 8px; }
.card__title {
  font-family: var(--serif); font-size: 23px; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 10px;
  transition: color .2s var(--ease);
}
.card:hover .card__title { color: var(--accent); }
.card__dek { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* --- Article -------------------------------------------------------------- */
.article__head { padding-block: clamp(40px, 6vw, 72px) 0; }
.article__head .wrap { max-width: 760px; }
.article h1 { font-size: var(--step-3); margin-block: 14px 20px; }
.article__standfirst {
  font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 26px; max-width: 600px;
}
.article__meta {
  font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--rule);
}
.article__lede { margin-block: clamp(32px, 5vw, 52px); }
/* The ratio is what reserves the space, so the page does not jump as the
   photo loads; 70vh caps it on tall screens and object-fit crops the rest. */
.article__lede img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; max-height: 70vh;
  object-fit: cover; background: var(--paper-sunk);
}

.prose { max-width: var(--measure); margin-inline: auto; }
.prose p { font-size: 18px; line-height: 1.72; margin: 0 0 1.35em; }
.prose p:first-of-type::first-letter {
  font-family: var(--serif); float: left;
  font-size: 76px; line-height: .82;
  padding: 6px 10px 0 0; color: var(--accent);
}
.prose h2 { font-size: 30px; margin: 2em 0 .6em; }
.prose h3 { font-size: 23px; margin: 1.8em 0 .5em; }
.prose blockquote {
  margin: 2em 0; padding-left: 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 26px; line-height: 1.35;
  color: var(--ink); font-style: italic;
}
.prose figure { margin: 2.4em 0; }
.prose figcaption {
  font-size: 12.5px; color: var(--ink-muted); margin-top: 10px;
  letter-spacing: .02em;
}
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-wash); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose ul, .prose ol { font-size: 18px; line-height: 1.72; padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }

/* --- Page head (calendar, month) ------------------------------------------ */
.pagehead { padding-block: clamp(44px, 6vw, 78px) 0; }
.pagehead .wrap { max-width: 860px; margin-inline: 0; }
.pagehead h1 { font-size: var(--step-3); margin-block: 16px 20px; }
.pagehead__dek {
  font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft);
  margin: 0; max-width: 640px;
}

/* --- Calendar hub --------------------------------------------------------- */
.season { padding-block: clamp(52px, 7vw, 78px) 0; }
.season__intro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 48px); align-items: center;
  padding-bottom: 34px; border-bottom: 1px solid var(--rule);
}
.season__photo { margin: 0; overflow: hidden; background: var(--paper-sunk); }
.season__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.season__text h2 { font-size: var(--step-2); margin-block: 12px 14px; }
.season__text p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 520px; }

.months {
  list-style: none; margin: 0; padding: 34px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.month-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 26px 24px 22px;
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.month-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.month-card--now { border-color: var(--accent); background: var(--accent-wash); }
.month-card__num {
  font-family: var(--serif); font-size: 15px; letter-spacing: .1em;
  color: var(--ink-muted);
}
.month-card--now .month-card__num { color: var(--accent); }
.month-card__name {
  font-family: var(--serif); font-size: 30px; line-height: 1.1;
  letter-spacing: -0.02em; margin: 8px 0 10px;
  transition: color .2s var(--ease);
}
.month-card:hover .month-card__name { color: var(--accent); }
.month-card__note {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 20px; flex: 1;
}
.month-card__cta {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}

/* --- Month page ----------------------------------------------------------- */
.month__nav {
  display: flex; gap: 18px; align-items: baseline;
  font-size: 13px; letter-spacing: .04em; color: var(--ink-muted);
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.month__nav a { color: var(--ink-muted); }
.month__nav a:hover { color: var(--accent); }
.month__nav a:nth-child(2) { margin-inline: auto; }
.month h1 { font-size: var(--step-4); }
.month__facts {
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 12.5px; letter-spacing: .06em; color: var(--ink-muted);
}
.month .article__lede figcaption {
  font-size: 12.5px; color: var(--ink-muted); margin-top: 10px;
}

/* Notes: "In Season", "What to Wear Now" */
.notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 36px 40px;
}
.notes--three { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.note h3 {
  font-family: var(--serif); font-size: 22px; line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 12px;
  padding-top: 16px; border-top: 2px solid var(--accent);
}
.note p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* The month's shopping list */
.picks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.pick {
  display: flex; flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--paper-lit); border: 1px solid var(--rule);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pick:hover { border-color: var(--accent); transform: translateY(-2px); }
.pick__title {
  font-family: var(--serif); font-size: 21px; line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 10px;
}
.pick__note { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; flex: 1; }
.pick__cta {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.disclosure {
  margin: 22px 0 0; font-size: 12px; letter-spacing: .04em;
  color: var(--ink-muted);
}

/* --- Footer --------------------------------------------------------------- */
.sitefoot {
  background: var(--footer-bg); color: var(--footer-ink);
  padding: 64px var(--gutter) 48px;
  /* Pinned to the foot of the viewport and painted beneath main, so it is
     revealed rather than scrolled to. It still occupies its normal space at
     the end of the document, so nothing about the page height changes. */
  position: sticky;
  bottom: 0;
  z-index: 0;
}
.sitefoot__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 40px;
  justify-content: space-between; align-items: flex-start;
}
.sitefoot__blurb { max-width: 320px; }
.sitefoot__mark { margin-bottom: 14px; }
.sitefoot__blurb p { font-size: 14.5px; line-height: 1.6; color: #B9A98F; margin: 0; }
[data-site="west"] .sitefoot__blurb p { color: var(--footer-soft); }
.sitefoot__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.sitefoot__h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--footer-muted); margin-bottom: 16px;
}
.sitefoot__links { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; color: var(--footer-soft); }
.sitefoot__links a:hover { color: var(--accent-lit); }
.sitefoot__base {
  max-width: var(--container); margin: 44px auto 0;
  padding-top: 24px; border-top: 1px solid var(--footer-rule);
  font-size: 12.5px; color: var(--footer-muted);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* --- 404 ------------------------------------------------------------------ */
.notfound .section { min-height: 52vh; }
.notfound p {
  max-width: 38em; margin: 0;
  font-size: 16.5px; line-height: 1.65; color: var(--ink-soft);
}
.notfound a { color: var(--accent); }

/* --- Motion --------------------------------------------------------------- */
@keyframes julyUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes julyFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --header-h: 58px; }
  .switch { gap: 20px; }
  .switch__brand { font-size: 22px; }
  .grid { gap: 36px 24px; grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section__marker { padding-bottom: 0; }
  .prose p, .prose ul, .prose ol { font-size: 17px; }
  .prose p:first-of-type::first-letter { font-size: 58px; }
  .sitefoot__cols { gap: 32px; }
  /* Stacked, the footer is taller than a phone screen — pinning it to the
     bottom would clip its head. Let it scroll normally at this size; main's
     bottom padding keeps the spacing identical either way. */
  .sitefoot { position: static; }
  .season__intro { grid-template-columns: 1fr; }
  .months { grid-template-columns: 1fr; }
  .notes, .notes--three, .picks { grid-template-columns: 1fr; gap: 28px; }
  .month__nav { flex-wrap: wrap; gap: 12px 16px; }
  .month__nav a:nth-child(2) { margin-inline: 0; order: -1; width: 100%; }
}