/* ===========================================================================
   Hatchure — the cover: a climb near you, its loops, the day's light
   ---------------------------------------------------------------------------
   The web port of the iOS Home cover (HomeCover.swift). Two surfaces: the
   homepage once it knows where the visitor is (#homeCover, #homeCoverMore)
   and the map while nothing is planned (#mapCover). Markup in
   js/home-cover-view.js; everything is .hc-prefixed so neither page's own
   rules reach in.

   The photo band and the horizon are dark in BOTH themes, like the
   homepage's hero band they stand in for: a photo's tones are not ours, so
   type on it is always light on a darkened foot. The map card's body and
   the climb tiles follow the page's theme through the brand tokens.
   =========================================================================== */

/* ---------- Shared pieces ---------- */

.hcEyebrow{
  margin:0; font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--amber);
}
.hcEyebrow.isSepia{ color:var(--sepia); }
.hcIcon{ flex-shrink:0; }

.hcMasthead{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
}
.hcPlace{ color:#EDEFE8; text-transform:uppercase; }
.hcDot{ color:#A7B2A9; }
.hcLight{ color:var(--amber); }
.hcChange{
  font:inherit; letter-spacing:0; text-transform:none; color:#EDEFE8;
  background:none; border:0; padding:4px 2px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

.hcCredit{ margin:6px 0 0; font-family:var(--mono); font-size:10.5px; color:rgba(237,239,232,0.72); }

/* The photo, and the scrims that keep type on it legible whatever it is. */
.hcPhoto, .hcCardHead > img{ position:absolute; inset:0; }
.hcPhoto img, .hcCardHead > img{
  width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block;
}
.hcScrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(10,16,12,0.66), rgba(10,16,12,0) 34%),
    linear-gradient(rgba(10,16,12,0) 40%, rgba(10,16,12,0.86));
}

.hcCaption{ display:flex; flex-direction:column; gap:6px; color:#EDEFE8; }
/* A photo can be snow or sky behind any word: a soft shadow keeps the
   type readable where the scrim alone does not reach. */
.hcCaption, .hcMasthead{ text-shadow:0 1px 2px rgba(0,0,0,0.65), 0 0 12px rgba(0,0,0,0.35); }
.hcName{
  margin:0; font-family:var(--display); font-weight:800; line-height:0.98;
  letter-spacing:-0.02em; font-size:44px;
}
.hcName a{ color:inherit; text-decoration:none; }
.hcName a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.hcLine{ margin:0; font-family:var(--mono); font-size:14px; color:#EDEFE8; }

/* ---------- The loops over the climb ---------- */

.hcTabs{ display:flex; border-bottom:1px solid var(--hc-line, #4C6053); }
.hcTab{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:10px 4px; background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;
  font:500 14px/1.2 'IBM Plex Sans', system-ui, sans-serif; color:var(--hc-soft, #A7B2A9);
}
.hcTab.isOn{ color:var(--hc-ink, #EDEFE8); border-bottom-color:var(--amber); font-weight:600; }
.hcTab:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.hcCount{ font-family:var(--mono); font-size:12px; color:inherit; opacity:0.8; }
.hcTab.isOn .hcCount{ color:var(--amber); opacity:1; }

.hcLoops{ list-style:none; margin:0; padding:4px 0 0; }
.hcLoops > li + li{ border-top:1px solid var(--hc-rule, #3A4A40); }
.hcLoop{
  display:flex; gap:14px; align-items:flex-start; padding:12px; margin:0 -12px;
  border-radius:10px; color:var(--hc-ink, #EDEFE8); text-decoration:none;
}
.hcLoop:hover, .hcLoop:focus-visible, .hcLoop.isPreviewing{ background:var(--hc-hover, rgba(237,239,232,0.06)); }
.hcLoop:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.hcThumb{
  width:96px; height:70px; object-fit:cover; border-radius:8px; flex-shrink:0;
  background:var(--hc-rule, #3A4A40);
}
.hcLoopText{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hcKinds{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--hc-sepia, #C9A57F); }
.hcLoopTitle{ font-weight:600; font-size:15px; line-height:1.25; }
.hcFigures{ font-family:var(--mono); font-size:12.5px; }
.hcFrom{ font-size:12.5px; color:var(--hc-soft, #A7B2A9); }
.hcDaylight{
  display:flex; gap:7px; align-items:flex-start; margin:0 0 10px;
  font-family:var(--mono); font-size:12px; line-height:1.45; color:var(--hc-soft, #A7B2A9);
}
.hcDaylight .hcIcon{ margin-top:1px; }
.hcDaylight.is-dark{ color:var(--hc-warn, #FFB199); }
.hcAll{
  display:inline-flex; align-items:center; gap:4px; min-height:44px;
  font-weight:600; font-size:14px; color:var(--amber); text-decoration:none;
}
.hcAll:hover{ text-decoration:underline; }

/* ---------- The horizon ---------- */

.hcHorizon{ display:block; width:100%; height:auto; overflow:visible; }
.hcHorizon .hcGround{ fill:var(--hc-ground, #0F1813); }
.hcHorizon .hcStrokes{ stroke:#EDEFE8; fill:none; }
.hcHorizon .hcBase{ stroke:#EDEFE8; stroke-opacity:0.35; }
.hcHorizon .hcSun{ fill:var(--amber); }
/* The sun's day, behind the hills: faint, so it reads as the sky's and
   not as one more ridge. */
.hcHorizon .hcSunArc{ fill:none; stroke:var(--amber); stroke-opacity:0.4; stroke-width:1.2; stroke-dasharray:2 5; stroke-linecap:round; }
.hcHorizon .hcSunNow{ fill:var(--amber); stroke:var(--amber); stroke-opacity:0.25; stroke-width:6; }
.hcHorizon .hcSunLabel, .hcHorizon .hcPeak{ font:10.5px 'IBM Plex Mono', ui-monospace, monospace; }
.hcHorizon .hcSunLabel{ fill:var(--amber); font-size:10px; }
.hcHorizon .hcPeak{ fill:#EDEFE8; }
.hcHorizon .hcHeight{ fill:#A7B2A9; }
.hcHorizon .hcPlate{ fill:var(--hc-ground, #0F1813); fill-opacity:0.85; }
.hcHorizon .hcSummits{ fill:#EDEFE8; }
.hcHorizon .hcLeader{ stroke:#EDEFE8; stroke-opacity:0.55; }
.hcHorizon .hcCompass{ font:10px 'IBM Plex Mono', ui-monospace, monospace; fill:#A7B2A9; }
.hcHorizon a:hover .hcPeak, .hcHorizon a:focus .hcPeak{ fill:var(--amber); }

/* ===========================================================================
   The homepage
   =========================================================================== */

/* The id: the wide screen's cover is a grid by #homeCover.hcCover, which
   would outrank a class-only [hidden] and leave an empty band on the page. */
#homeCover.hcCover[hidden], .hcCover[hidden], .hcMore[hidden]{ display:none; }
/* The homepage gives every <section> its band padding; the cover is a
   photo edge to edge, so it takes none. */
#homeCover.hcCover{ padding:0; margin:0; }
.hcCover{
  position:relative; background:var(--band); color:#EDEFE8;
  --hc-ink:#EDEFE8; --hc-soft:#A7B2A9; --hc-sepia:#C9A57F; --hc-line:#4C6053; --hc-rule:#3A4A40; --hc-ground:#0F1813;
}
/* The site's bar floats over the cover's top (css/site-header.css): the
   homepage pulls the cover up under it, so what sits at the top moves down
   by the bar's reach. */
.hcBand{ position:relative; min-height:calc(440px + var(--bar-space, 0px)); overflow:hidden; }
.hcBand .hcMasthead{ position:absolute; left:16px; right:16px; top:calc(16px + var(--bar-space, 0px)); z-index:1; }
.hcBand .hcCaption{ position:absolute; left:16px; right:16px; bottom:18px; z-index:1; }
.hcCard{ padding:12px 16px 8px; }

.hcMore{ background:var(--paper); }
/* The search, on the cover's dark ground as on today's hero: a light glass
   capsule with the amber button inside it, and the map a glass pill. */
.hcSearchRow{
  position:relative; z-index:1;
  max-width:var(--wrap, 1080px); margin:0 auto; padding:20px 16px 28px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.hcSearchRow form{
  flex:1 1 320px; display:flex; gap:4px; max-width:560px; padding:5px; border-radius:999px;
  background:color-mix(in srgb, #FFFFFF 88%, transparent);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.6), 0 12px 32px -12px rgba(0,0,0,0.6);
}
.hcSearchRow form:focus-within{ box-shadow:0 0 0 3px var(--amber), 0 12px 32px -12px rgba(0,0,0,0.6); }
.hcSearchRow input{
  flex:1 1 auto; min-width:0; height:46px; padding:0 16px; font:16px 'IBM Plex Sans', system-ui, sans-serif;
  border:0; background:transparent; color:#14201A;
}
.hcSearchRow input::placeholder{ color:#6B776F; }
.hcSearchRow input:focus{ outline:none; }
.hcSearchRow button{
  flex-shrink:0; white-space:nowrap; height:46px; padding:0 20px; border:0; border-radius:999px; cursor:pointer;
  background:var(--amber); color:var(--on-amber); font:600 16px 'IBM Plex Sans', system-ui, sans-serif;
}
.hcPill{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border:1px solid rgba(237,239,232,0.22); border-radius:999px; color:#EDEFE8; text-decoration:none; font-size:14px;
  background:color-mix(in srgb, #14201A var(--glass-a-pill), transparent);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge);
}
.hcPill:hover{ border-color:var(--amber); color:#EDEFE8; }

/* The sports over the loops: one switch, as over today's loop card
   (.ltBar), the chosen one a chalk capsule. */
#homeCover .hcTabs{
  gap:2px; padding:4px; margin:0 0 6px; border:1px solid rgba(237,239,232,0.14); border-radius:999px;
  background:rgba(10,16,12,0.35);
}
#homeCover .hcTab{ min-height:38px; padding:6px 4px; margin:0; border:0; border-radius:999px; font-size:13.5px; color:#D5DCD6; }
#homeCover .hcTab.isOn{ background:rgba(237,239,232,0.94); color:#14201A; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
#homeCover .hcTab.isOn .hcCount{ color:#8A5A00; }
#homeCover .hcTab:focus-visible{ outline-offset:2px; }

.hcHorizonBand{
  margin-top:36px; background:var(--band); color:#EDEFE8; padding:24px 0 18px;
  --hc-ground:var(--band);
}
.hcHorizonBand > *{ max-width:var(--wrap, 1080px); margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
.hcHorizonTitle{ margin:6px auto 0; font-family:var(--display); font-weight:800; font-size:24px; line-height:1.15; }
.hcHorizonNote{ margin:6px auto 0; color:#A7B2A9; font-size:14px; line-height:1.45; }
.hcHorizonArt{ margin-top:8px; }

.hcTilesWrap{ max-width:var(--wrap, 1080px); margin:0 auto; padding:32px 16px 8px; }
.hcTiles{
  list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* Fixed columns, so the first two rows home-page-cover.js shows are full. */
@media (min-width: 640px){ .hcTiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px){ .hcTiles{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.hcTile{
  display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none;
}
.hcTile:hover{ border-color:var(--amber); }
.hcTile img{ width:100%; height:110px; object-fit:cover; display:block; background:var(--line); }
.hcTiles > li[hidden], .hcCredits > span[hidden]{ display:none; }
/* A climb with no photo: the ground it would have had, and a peak on it. */
.hcTileBlank{
  display:flex; align-items:center; justify-content:center; height:110px;
  background:var(--paper-dim, var(--line)); color:var(--ink-soft);
}
span.hcTile{ cursor:default; }
span.hcTile:hover{ border-color:var(--line); }
.hcShowMore{
  display:inline-flex; align-items:center; min-height:44px; margin:16px 0 0; padding:0 18px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:none; color:var(--ink);
  font:600 14px 'IBM Plex Sans', system-ui, sans-serif;
}
.hcShowMore:hover{ border-color:var(--amber); }
.hcShowMore:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.hcTileText{ display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px; }
.hcTile .hcKinds{ color:var(--sepia); }
.hcTileName{ font-family:var(--display); font-weight:700; font-size:17px; }
.hcTile .hcFigures{ font-size:11.5px; color:var(--ink-soft); }
.hcCredits{ margin:10px 0 0; font-family:var(--mono); font-size:10px; line-height:1.5; color:var(--ink-soft); }

/* The one new control on today's hero: where the cover comes from. */
.heroNear[hidden]{ display:none; }
.heroNear{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:18px 0 0; }
.heroNearBtn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; cursor:pointer;
  border:1px solid var(--amber); border-radius:999px; background:rgba(240,179,58,0.12);
  color:var(--on-ink, #EDEFE8); font:600 14px 'IBM Plex Sans', system-ui, sans-serif;
}
.heroNearBtn:hover{ background:rgba(240,179,58,0.2); }
.heroNearBtn[aria-busy="true"]{ opacity:0.7; cursor:progress; }
.heroNearNote{ font-size:13px; color:var(--on-ink-3, #8B978E); }

/* A phone: the place and the light on two lines, no dot left hanging. */
@media (max-width: 959px){
  .hcBand .hcMasthead{ flex-direction:column; align-items:flex-start; gap:2px; }
  .hcBand .hcDot{ display:none; }
}

/* A wide screen: today's hero, with this climb in it. The photo fills the
   cover behind a scrim; the place, the climb and the search are the left
   column, the loops a card of their own in the right one — a column, not
   laid over the photo, so neither can run into the other however long the
   loop names are. The band's own box steps aside (display:contents) so its
   pieces are the grid's. */
@media (min-width: 960px){
  #homeCover.hcCover{
    --hc-edge:max(24px, calc((100vw - 1200px) / 2));
    display:grid; grid-template-columns:minmax(0, 1fr) 470px; grid-template-rows:auto 1fr auto auto;
    column-gap:56px; min-height:min(100vh, 900px); overflow:hidden;
    padding:calc(var(--bar-space, 0px) + 28px) var(--hc-edge) 72px;
  }
  .hcBand{ display:contents; }
  .hcBand .hcPhoto, .hcBand .hcScrim{ z-index:0; }
  /* The place and its light: a glass pill, as the day's climb is on
     today's hero. */
  .hcBand .hcMasthead{
    position:relative; z-index:1; grid-column:1; grid-row:1; justify-self:start;
    min-height:40px; padding:4px 8px 4px 16px; border-radius:999px; text-shadow:none;
    background:color-mix(in srgb, #14201A var(--glass-a-pill), transparent);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid rgba(237,239,232,0.22); box-shadow:var(--glass-edge), var(--glass-lift);
  }
  .hcBand .hcChange{ padding:6px 8px; }
  .hcBand .hcCaption{ position:relative; z-index:1; grid-column:1; grid-row:3; gap:10px; }
  .hcBand .hcName{ font-size:clamp(44px, 5.4vw, 104px); hyphens:auto; }
  .hcBand .hcLine{ font-size:17px; }
  .hcBand .hcScrim{
    background:
      linear-gradient(90deg, rgba(10,16,12,0.86) 0%, rgba(10,16,12,0.55) 40%, rgba(10,16,12,0.12) 72%),
      linear-gradient(rgba(10,16,12,0.45), rgba(10,16,12,0) 24%, rgba(10,16,12,0) 60%, rgba(10,16,12,0.8));
  }
  #homeCover .hcSearchRow{ grid-column:1; grid-row:4; margin:28px 0 0; padding:0; max-width:none; }
  .hcCard{
    position:relative; z-index:2; grid-column:2; grid-row:1 / -1; align-self:center;
    padding:14px 22px 10px; border-radius:22px;
    background:color-mix(in srgb, #14201A 94%, transparent); border:1px solid rgba(237,239,232,0.14);
    box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);
  }
  .hcHorizonTitle{ font-size:32px; }
}

/* ===========================================================================
   The map
   =========================================================================== */

#mapCover[hidden]{ display:none; }
#mapCover{
  position:absolute; z-index:520; left:16px; top:calc(112px + env(safe-area-inset-top));
  width:392px; max-height:calc(100% - 220px); overflow:auto; overscroll-behavior:contain;
  border-radius:16px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,0.35); color:var(--ink);
  --hc-ink:var(--ink); --hc-soft:var(--ink-soft); --hc-sepia:var(--sepia); --hc-line:var(--line);
  --hc-rule:var(--line); --hc-hover:var(--chalk-dim); --hc-warn:var(--closed);
}
.hcCardHead{ position:relative; height:184px; overflow:hidden; background:#0F1813; }
.hcCardHead .hcScrim{
  background:
    linear-gradient(rgba(10,16,12,0.72), rgba(10,16,12,0) 38%),
    linear-gradient(rgba(10,16,12,0) 22%, rgba(10,16,12,0.55) 52%, rgba(10,16,12,0.92));
}
.hcCardHead .hcMasthead{ position:absolute; left:14px; right:52px; top:16px; font-size:10.5px; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; }
.hcCardHead .hcCaption{ position:absolute; left:14px; right:14px; bottom:12px; gap:3px; }
.hcCardHead .hcName{ font-size:30px; }
.hcCardHead .hcLine{ font-size:12px; }
.hcCardHead .hcCredit{ margin-top:2px; font-size:9.5px; }
.hcCardHead .hcEyebrow{ font-size:10px; }
.hcHide{
  position:absolute; right:10px; top:10px; z-index:1; width:36px; height:36px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid color-mix(in srgb, #EDEFE8 22%, transparent); color:#EDEFE8;
  /* Glass over the photo, as the app's controls over a picture are
     (css/tokens.css). */
  background:color-mix(in srgb, #14201A var(--glass-a-pill), transparent);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge);
}
.hcHide:focus-visible{ outline:2px solid var(--amber); }
.hcCardBody{ padding:0 16px 6px; }
#mapCover .hcThumb{ width:84px; height:62px; }
#mapCover .hcLoopTitle{ font-size:14px; }

@media (max-width: 640px){
  #mapCover{
    left:12px; right:12px; width:auto; top:calc(116px + env(safe-area-inset-top));
    max-height:calc(100% - 300px);
  }
  .hcCardHead{ height:156px; }
  .hcCardHead .hcName{ font-size:26px; }
  #mapCover .hcLoops > li:nth-child(n+2){ display:none; }
}

.hero[hidden]{ display:none; }

/* Good days near you (js/home-good-near.js, docs/when-to-go.md §7): the
   loops near the place the forecast suits in the window, between the search
   and the horizon. Green only for a good day, as for an open stop. */
.hcGood{ max-width:var(--wrap, 1080px); margin:0 auto; padding:28px 16px 4px; }
.hcGoodHead{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 20px; margin-bottom:14px; }
.hcGoodHead > div:first-child{ flex:1 1 320px; }
.hcGoodEyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-text); }
.hcGood h2{ margin:6px 0 0; font-family:var(--display); font-weight:800; font-size:26px; line-height:1.15; color:var(--ink); }
.hcGoodSports{ display:flex; flex-wrap:wrap; gap:6px; }
.hcGoodSports button{
  min-height:40px; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:none; color:var(--ink); font:500 14px/1.2 'IBM Plex Sans', system-ui, sans-serif; cursor:pointer;
}
.hcGoodSports button[aria-pressed="true"]{ background:var(--ink); color:var(--chalk); border-color:var(--ink); }
.hcGoodSports button[aria-busy="true"]{ opacity:0.6; }
.hcGoodCards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.hcGoodCard{
  display:flex; flex-direction:column; height:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--surface); color:var(--ink); text-decoration:none;
}
.hcGoodCard:hover{ border-color:var(--ink-soft); }
.hcGoodCard:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.hcGoodCard .hcThumb{ width:100%; height:120px; border-radius:0; }
.hcGoodText{ display:flex; flex-direction:column; gap:5px; padding:12px 14px 14px; }
.hcGoodDays{ display:flex; flex-wrap:wrap; gap:6px; }
.hcGoodChip{ font-size:12.5px; font-weight:600; color:var(--open); background:var(--open-tint); border-radius:999px; padding:3px 10px; }
.hcGoodCard .hcFigures{ color:var(--ink-soft); font-size:12px; }
.hcGoodFacts{ font-size:13px; color:var(--ink-soft); line-height:1.4; }
.hcGoodNone{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.hcGoodNone p{ margin:0; flex:1 1 320px; font-family:var(--display); font-weight:500; font-size:19px; color:var(--ink-soft); }
.hcGoodNone a{ min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border:1px solid var(--line); border-radius:999px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; }
.hcGood .hcAll{ color:var(--amber-text); margin-top:6px; }
@media (max-width: 959px){ .hcGoodCards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px){
  .hcGoodCards{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 4px; }
  .hcGoodCards > li{ flex:0 0 240px; scroll-snap-align:start; }
}
.hcGood[hidden]{ display:none; }