/* The groups page's own passages, in page order. Served on /groups only, after styles.css. */

/* ---------- the opening (data-section="opening") ----------
   The words in the column, then 3 photographs that touch: the great room (67) the largest, the same room in soft light
   and the games loft stacked beside it. All 2,560 files; on a phone the great room first, the other two side by side. */
.gp-open{padding-block:clamp(32px, 5vw, 72px) clamp(56px, 7vw, 110px)}
.gp-open h1{font-size:clamp(36px, 9.6vw, 46px);line-height:1.04;letter-spacing:-.018em;max-width:12em}
.gp-head .lede{margin-top:14px}
.gp-links{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:0 24px}
.gp-cluster{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:clamp(24px, 3vw, 44px)}
.gp-cluster .photo{height:100%}
.gp-cluster .gp-a{grid-column:1 / -1}
.gp-cluster .gp-a .photo,.gp-cluster .gp-b .photo,.gp-cluster .gp-c .photo{aspect-ratio:4/3}
.gp-cap{margin-top:10px;font-size:15px;line-height:1.4;color:var(--moss)}
@media (min-width:900px){
  .gp-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .gp-head h1{grid-column:1 / 8;font-size:clamp(54px, 22px + 3.3vw, 88px);line-height:1.02;max-width:none}
  .gp-head .lede{grid-column:8 / 13;margin-top:0}
  .gp-links{grid-column:8 / 13;margin-top:6px}
  .gp-cluster{grid-template-columns:repeat(12,1fr);grid-template-rows:1fr 1fr}
  .gp-cluster .gp-a{grid-column:1 / 9;grid-row:1 / span 2}
  .gp-cluster .gp-b{grid-column:9 / 13;grid-row:1}
  .gp-cluster .gp-c{grid-column:9 / 13;grid-row:2}
  .gp-cluster figure{display:flex;flex-direction:column}
  .gp-cluster .photo{flex:1;aspect-ratio:auto!important}
  .gp-cluster .gp-a .photo{aspect-ratio:4/3!important;flex:none}
  .gp-cluster .gp-b .photo,.gp-cluster .gp-c .photo{aspect-ratio:auto!important}
}

/* ---------- who sleeps where (data-section="who-sleeps-where") ----------
   The words beside the 5 rooms (their beds are the record's), then 3 bedroom photographs of different widths that touch. */
.gp-sleep{padding-block:clamp(56px, 8vw, 130px);border-top:1px solid var(--line)}
.gp-rooms{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.gp-rooms li{padding:18px 0;border-top:1px solid var(--line)}
.gp-rooms h3{font-size:clamp(24px, 3vw, 30px)}
.gp-rooms .room-beds{margin-top:4px;font-weight:600}
.gp-rooms p{margin-top:4px;color:var(--moss)}
.gp-rooms .room-beds{color:var(--pine)}
.gp-split .lede{margin-top:14px}
.gp-beds{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:clamp(32px, 4vw, 64px)}
.gp-beds .photo{aspect-ratio:4/3}
.gp-beds .gp-b1{grid-column:1 / -1}
.gp-beds figcaption{padding-top:8px}
.gp-beds .gp-b1{order:-1}
@media (min-width:900px){
  .gp-split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .gp-split>div{grid-column:1 / 6}
  .gp-rooms{grid-column:7 / 13;margin-top:0}
  .gp-rooms li:first-child{padding-top:0;border-top:0}
  .gp-beds{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto}
  .gp-beds .gp-b1{grid-column:5 / 13;grid-row:1 / span 2}
  .gp-beds .gp-b2{grid-column:1 / 5;grid-row:1}
  .gp-beds .gp-b3{grid-column:1 / 5;grid-row:2}
}

/* ---------- where the group gathers (data-section="gathering") ----------
   The page's one pine band: words in white on pine, the chess table and the foosball macro (a portrait file in a
   portrait frame) running down out of the band's bottom edge into the white below. */
.gp-gather{background:var(--pine);color:var(--white);padding-block:clamp(52px, 7vw, 110px) 0;margin-bottom:clamp(90px, 9vw, 190px)}
.gp-gather .lede{margin-top:14px;color:var(--white)}
.gp-g-words{padding-bottom:clamp(52px, 7vw, 110px)}
.gp-g-words p+p{margin-top:14px;max-width:34em;font-size:clamp(17px, 16px + .25vw, 21px);line-height:1.55}
.gp-g-words .more{color:var(--lichen)}
.gp-g-photos{display:grid;grid-template-columns:3fr 2fr;gap:4px;margin-top:clamp(28px, 4vw, 56px)}
.gp-g-photos .gp-g1 .photo{aspect-ratio:4/3}
.gp-g-photos .gp-g2 .photo{aspect-ratio:3/4;max-height:100%}
.gp-g-photos figcaption{color:var(--lichen)}
.gp-gather .more,.gp-park .more,.gp-wk .more{display:inline;min-height:0}
.gp-g-photos figure{position:relative}
@media (min-width:900px){
  .gp-gather .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .gp-g-words{grid-column:1 / 6}
  .gp-g-photos{grid-column:6 / 13;margin-top:0;align-items:start;margin-bottom:calc(-1*clamp(90px, 9vw, 230px))}
  .gp-g-photos .gp-g1 figcaption{position:absolute;left:0;top:calc(100% + 10px)}
}

/* ---------- trucks, trailers and dogs (data-section="trucks-trailers-dogs") ---------- */
.gp-park{padding-block:clamp(32px, 4vw, 60px) clamp(56px, 8vw, 130px)}
.gp-p-words p{margin-top:14px;max-width:34em}
.gp-p-words .more{display:inline-flex;min-height:44px}
.gp-p-photos{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:clamp(24px, 3vw, 44px)}
.gp-p-photos .photo{aspect-ratio:4/3}
.gp-p-photos .gp-p1,.gp-p-photos .gp-p2{grid-column:1 / -1}
@media (min-width:900px){
  .gp-park .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .gp-p-words{grid-column:1 / 5}
  .gp-p-photos{grid-column:5 / 13;grid-template-columns:2fr 1fr;margin-top:0}
  .gp-p-photos .gp-p1,.gp-p-photos .gp-p2{grid-column:auto}
  .gp-p-photos{align-items:end}
}

/* ---------- the weekends (data-section="weekends") ----------
   The page's one birch band: 4 weekends told as a run of month and name, not cards. */
.gp-weekends{background:var(--birch);padding-block:clamp(56px, 8vw, 130px)}
.gp-weekends .lede{margin-top:14px}
.gp-wk{list-style:none;margin:clamp(28px, 4vw, 56px) 0 0;padding:0}
.gp-wk li{display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--line)}
.gp-wk b{font-family:var(--display);font-weight:400;font-size:clamp(30px, 6vw, 44px);line-height:1;letter-spacing:-.01em}
.gp-wk h3{font-size:clamp(22px, 2.4vw, 28px)}
.gp-wk p{margin-top:6px;color:var(--moss);max-width:34em}
@media (min-width:900px){
  .gp-wk li{grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .gp-wk b{grid-column:1 / 5}
  .gp-wk li>div{grid-column:5 / 13}
}

/* At 2,560 the opening's 3 photographs (all 2,560 files) run edge to edge, past the 1,320 column; the frame stays wide. */
@media (min-width:1500px){
  .gp-cluster{width:100vw;margin-inline:calc(50% - 50vw);gap:6px}
  .gp-cluster .gp-a .photo{aspect-ratio:3/2!important}
}