/* ==========================================================================
   THINGS TO DO
   The hub and its nine category guides.
   ========================================================================== */

/* --- Answer-first opening ------------------------------------------------ */
.lead{
  background:var(--sand-lite);
  padding:clamp(2.75rem,5vw,5.5rem) var(--gutter);
  scroll-margin-top:var(--header-h);
}
/* The opening needs something to sit against. Three paragraphs alone on a
   cream field is not a section — it is a gap. This is the same copy-beside-
   photograph structure the homepage uses, with the image running off the
   right edge so the band reads as composed rather than boxed. */
/* The text track is its own reading measure and the photograph takes whatever
   is left, so the two always sit together. The earlier version gave the text a
   proportional track and then capped the paragraphs inside it, which past
   roughly 1600px left the image stranded 300px from the words it belongs to;
   capping the whole row instead pulled the section off the page gutter that
   every other section aligns to. min() keeps the text from hogging the row at
   laptop widths. */
.lead__inner{
  display:grid;
  grid-template-columns:minmax(0,min(38rem,48%)) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,4rem);
  align-items:stretch;
}
.lead__body{align-self:center}
/* The photograph takes its height from the row rather than from a fixed
   ratio, bounded at both ends: a ratio plus a max-height made the browser
   shrink the width to keep the proportion, which pulled the image away from
   the right gutter on a wide monitor. min/max keep it a band, never a sliver
   and never a monolith. */
.lead__media{
  position:relative;
  height:100%;
  min-height:clamp(14rem,21vw,21rem);
  max-height:clamp(20rem,30vw,30rem);
  border-radius:14px;
  overflow:clip;
  background:#D9D2C8;
}
.lead__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.lead__body{min-width:0}
.lead__body p{
  margin:0 0 clamp(1rem,1.7vw,1.5rem);
  max-width:60ch;
  font-size:clamp(1rem,1.1vw,1.0625rem);
  line-height:1.72;
  color:var(--text-mid);
}
.lead__body p:first-of-type{
  font-size:clamp(1.125rem,1.58vw,1.5625rem);
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--ink);
}
.lead__body p:last-child{margin-bottom:0}
/* --- Guide blocks -------------------------------------------------------- */
.guide{
  background:var(--sand-lite);
  padding:clamp(2rem,3.6vw,3.75rem) var(--gutter) clamp(2.5rem,4.6vw,4.75rem);
}
.guide__block{
  padding-block:clamp(2.25rem,4.2vw,4.25rem);
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 1rem);
}
.guide__block:first-child{border-top:0;padding-top:clamp(1rem,2vw,2rem)}
/* The places block opens its own section, so it carries neither the rule
   above it nor the air that rule needs. Doubled class on purpose: it is also
   :first-child, and the rule above is a class plus a pseudo-class, so a single
   class would lose to it. */
.guide__block.guide__block--flush{border-top:0;padding-top:0}
.guide__inner{max-width:88rem}
.guide__head{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:clamp(1rem,2.2vw,2.25rem);
  /* baseline, not start: the numeral and the title are set at very different
     sizes, so aligning their boxes leaves the numeral floating low */
  align-items:baseline;
  margin-bottom:var(--block-gap);
}
.guide__no{
  font-family:var(--font-serif);
  font-size:clamp(1.5rem,2.6vw,2.75rem);
  line-height:1;
  color:var(--tan);
  font-variant-numeric:tabular-nums;
}
.guide__title{
  margin:0;
  font-weight:400;
  font-size:clamp(1.5rem,2.9vw,3rem);
  line-height:1.08;letter-spacing:-.014em;
  color:var(--ink);
}
.guide__lede{
  grid-column:2;
  margin:clamp(.6rem,1.1vw,1rem) 0 0;
  max-width:62ch;
  font-size:clamp(.9375rem,1.16vw,1.1875rem);
  line-height:1.58;
  color:var(--text-body);
}
/* --- Place entries ------------------------------------------------------
   Not cards. A bordered box around every item, each one carrying a serif
   name, an uppercase letterspaced address and seven pills, is what made this
   page feel generated — five type treatments inside one 300px box. This is a
   guidebook entry instead: the name and address hold the left column, the
   description and the facts hold the right, and a hairline separates one from
   the next. One typeface change per entry, not four.
   ------------------------------------------------------------------------ */
.places{list-style:none;margin:0;padding:0}
.place{
  display:grid;
  grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);
  gap:clamp(.4rem,2.2vw,3rem);
  padding-block:clamp(1.5rem,3vw,2.75rem);
  border-top:1px solid var(--line);
}
.place:first-child{border-top:0;padding-top:0}
.place__head{min-width:0}
.place__name{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.1875rem,1.62vw,1.625rem);
  line-height:1.2;letter-spacing:-.006em;
  color:var(--ink);
}
/* sentence case, no letterspacing, darker: the old treatment was 12px
   uppercase tracked out to 1.4px at 4.41:1, which failed on both counts */
.place__addr{
  margin:clamp(.3rem,.6vw,.5rem) 0 0;
  font-size:clamp(.8125rem,.93vw,.9375rem);
  line-height:1.45;
  color:#5F574A;
}
/* The paragraph and the fact list share one measure, so every entry ends on
   the same right edge instead of the prose stopping short of the list. */
.place__body{min-width:0;max-width:48rem}
.place__note{
  margin:0;
  font-size:clamp(1rem,1.13vw,1.0625rem);
  line-height:1.68;
  color:#3F3F44;
}
/* Facts as a plain two-column list. Pills at 11.5px were legible on paper and
   unreadable in practice once there were seven of them. */
.place__facts{
  list-style:none;
  margin:clamp(.9rem,1.5vw,1.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem clamp(1rem,2.2vw,2.25rem);
  font-size:clamp(.875rem,.97vw,.96875rem);
  line-height:1.5;
  color:var(--text-body);
}
.place__facts li{position:relative;padding-left:1.15em}
.place__facts li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:6px;height:1px;background:rgba(138,113,70,.85);
}
/* A caution reads as a caution without shouting in orange. */
.place__facts li.is-warn{color:#7A4119}
.place__facts li.is-warn::before{
  content:"";left:.1em;top:.44em;
  width:5px;height:5px;border-radius:50%;background:#A3521C;
}
/* --- Season by season ---------------------------------------------------- */
.seasons{
  background:var(--sand-lite);
  padding:var(--section-y) var(--gutter);
  scroll-margin-top:var(--header-h);
}
.seasons__head{max-width:62rem;margin-bottom:clamp(1.75rem,3.2vw,3.25rem)}
.seasons__title{
  margin:clamp(.75rem,1.4vw,1.4rem) 0 0;
  font-weight:400;font-size:clamp(1.625rem,3.2vw,3.25rem);
  line-height:1.06;letter-spacing:-.015em;color:var(--ink);
}
.seasons__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.85rem,1.6vw,1.5rem);
}
.season{
  display:flex;flex-direction:column;
  padding:clamp(1.1rem,1.9vw,1.75rem);
  background:#FCF9F4;border:1px solid #E7E3DC;border-radius:10px;
  min-width:0;
}
.season__name{
  margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.2;color:var(--ink);
}
.season__months{
  margin:.3rem 0 0;
  font-size:clamp(.6875rem,.8vw,.8125rem);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8A7146;
}
.season__note{
  margin:clamp(.7rem,1.2vw,1rem) 0 0;
  font-size:clamp(.875rem,.99vw,.96875rem);line-height:1.56;color:var(--text-body);
}
.season__temp{
  margin:auto 0 0;padding-top:clamp(.85rem,1.4vw,1.25rem);
  font-size:clamp(.75rem,.88vw,.875rem);color:var(--text-muted);
}
.season__temp b{font-weight:500;color:var(--ink)}
@media (max-width:1000px){
.lead__inner{grid-template-columns:1fr;gap:clamp(1.5rem,3.6vw,2.25rem)}
.lead__media{height:auto;aspect-ratio:16/9;min-height:0;order:-1}
.seasons__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
.place{grid-template-columns:1fr;gap:clamp(.5rem,1.6vw,.85rem)}
.place__facts{grid-template-columns:1fr}
}
@media (max-width:760px){
.guide__head{grid-template-columns:1fr;row-gap:.4rem}
.guide__lede{grid-column:1}
.guide__no{font-size:clamp(1.125rem,4.4vw,1.5rem)}
}
@media (max-width:560px){
.seasons__grid{grid-template-columns:1fr}
}
/* --- Hub: alternating category rows -------------------------------------
   These replaced an on-page anchor grid. Each category is a real page now, so
   the row's job is to say enough that the click is an informed one.
   ------------------------------------------------------------------------ */
.cats{
  background:var(--sand-lite);
  padding:clamp(1.5rem,2.8vw,3rem) var(--gutter) clamp(2.5rem,4.6vw,4.75rem);
}
.cats__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,3.25rem)}
.cat{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(1.25rem,2.8vw,3rem);
  align-items:center;
  padding-top:clamp(1.5rem,3vw,3.25rem);
  border-top:1px solid var(--line);
}
.cats__list > li:first-child .cat{border-top:0;padding-top:0}
.cats__list > li:nth-child(even) .cat__media{order:2}
/* alternate the photograph */
.cat__media{
  position:relative;aspect-ratio:16/10;
  border-radius:12px;overflow:clip;background:#0B2238;
}
.cat__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.cat__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,16,26,.42),rgba(9,38,60,.22));
}
.cat__body{min-width:0}
.cat__no{
  display:block;
  font-size:var(--fs-eyebrow);
  font-weight:600;letter-spacing:.22em;font-variant-numeric:tabular-nums;
  color:#8A7146;
}
.cat__title{
  margin:clamp(.5rem,.9vw,.75rem) 0 0;
  font-weight:400;
  font-size:clamp(1.4375rem,2.6vw,2.625rem);
  line-height:1.08;letter-spacing:-.014em;color:var(--ink);
}
.cat__title a{color:inherit;text-decoration:none}
/* one tab stop per row: the heading link is stretched over the whole row */
.cat__title a::after{content:"";position:absolute;inset:0;border-radius:12px}
.cat{position:relative}
.cat:hover .cat__media img,.cat:focus-within .cat__media img{transform:scale(1.045)}
.cat__note{
  margin:clamp(.6rem,1.1vw,1rem) 0 0;max-width:54ch;
  font-size:clamp(.9375rem,1.1vw,1.125rem);line-height:1.58;color:var(--text-body);
}
/* What the page covers, as a line of copy rather than a row of tags. Pills
   everywhere were the other half of why this read as generated. */
.cat__inside{
  list-style:none;display:flex;flex-wrap:wrap;
  margin:clamp(.85rem,1.5vw,1.25rem) 0 0;padding:0;
  font-size:clamp(.8125rem,.93vw,.9375rem);
  line-height:1.6;color:#5F574A;
}
.cat__inside li + li::before{
  content:"\00B7";margin:0 .55em;color:rgba(138,113,70,.9);
}
.cat__go{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:clamp(1rem,1.8vw,1.5rem);padding-bottom:.35rem;
  border-bottom:1px solid rgba(17,110,156,.4);
  color:var(--brand);
  font-size:clamp(.6875rem,.8vw,.84375rem);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cat__go svg{transition:transform .3s var(--ease)}
.cat:hover .cat__go{color:var(--brand-deep);border-color:var(--brand-deep)}
.cat:hover .cat__go svg{transform:translateX(4px)}
@media (max-width:760px){
.cat{grid-template-columns:1fr;gap:clamp(1rem,2.4vw,1.5rem)}
.cats__list > li:nth-child(even) .cat__media{order:0}
.cat__media{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
.cat__media img{transition:none}
}