/* =========================================================
  REDOVAR — CAMPS
========================================================= */


/* =========================================================
  BASE
========================================================= */

main {
  overflow:
    clip;
}


section {
  scroll-margin-top:
    calc(
      var(--header-h)
      +
      20px
    );
}


h1,
h2,
h3,
p {
  text-wrap:
    pretty;
}


/* =========================================================
  INDEX H2 SYSTEM
  EXACT SAME SCALE AS HOMEPAGE
========================================================= */

main h2 {
  margin:
    0;

  color:
    var(--light-text);

  font-size:
    clamp(
      42px,
      4.7vw,
      68px
    );

  line-height:
    .96;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


section p {
  margin:
    20px
    0
    0;

  max-width:
    590px;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      15px,
      1.2vw,
      17px
    );

  line-height:
    1.68;
}


/* =========================================================
  BUTTONS
========================================================= */

.camps-button {
  min-height:
    44px;

  padding:
    0
    17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    var(--radius);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    background-color
    150ms
    ease,
    color
    150ms
    ease,
    transform
    150ms
    ease;
}


.camps-button:active {
  transform:
    translateY(
      1px
    );
}


.camps-button--terracotta {
  background:
    var(--redovar-terracotta);

  color:
    #FFFFFF;
}


.camps-button--terracotta:hover,
.camps-button--terracotta:focus-visible {
  background:
    #A83D0D;
}


/* =========================================================
  QUIET REVEALS
========================================================= */

.camps-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.camps-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
  HERO
========================================================= */

.camps-hero {
  position:
    relative;

  min-height:
    100svh;

  padding-top:
    var(--header-h);

  overflow:
    hidden;

  background:
    #111111;

  color:
    #F5F5F3;

  isolation:
    isolate;
}


/* =========================================================
  HERO IMAGE
========================================================= */

.camps-hero-image,
.camps-hero-shade {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;
}


.camps-hero-image {
  z-index:
    -3;

  background-image:
    url("../../../assets/images/camp-hero.PNG");

  background-size:
    cover;

  background-position:
    center
    center;

  background-repeat:
    no-repeat;

  transform:
    scale(
      1.001
    );
}


/* =========================================================
  HERO SHADE
========================================================= */

.camps-hero-shade {
  z-index:
    -2;

  background:
    linear-gradient(
      180deg,
      rgba(7, 7, 7, .30)
      0%,
      rgba(7, 7, 7, .38)
      48%,
      rgba(7, 7, 7, .34)
      100%
    );
}


/* =========================================================
  HERO INNER
========================================================= */

.camps-hero-inner {
  min-height:
    calc(
      100svh
      -
      var(--header-h)
    );

  padding:
    clamp(
      90px,
      9vw,
      144px
    )
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


/* =========================================================
  HERO COPY
========================================================= */

.camps-hero-copy {
  width:
    min(
      100%,
      980px
    );

  margin-inline:
    auto;
}


.camps-hero h1 {
  margin:
    0
    auto;

  max-width:
    960px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      60px,
      6.3vw,
      96px
    );

  line-height:
    .92;

  letter-spacing:
    -.064em;

  font-weight:
    500;
}


.camps-hero-copy > p {
  margin:
    30px
    auto
    0;

  max-width:
    660px;

  color:
    rgba(
      245,
      245,
      243,
      .72
    );

  font-size:
    clamp(
      16px,
      1.25vw,
      18px
    );

  line-height:
    1.66;
}


/* =========================================================
  HERO ACTIONS
========================================================= */

.camps-hero-actions {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    24px;

  flex-wrap:
    wrap;
}


.camps-hero-link {
  padding:
    8px
    0;

  color:
    rgba(
      245,
      245,
      243,
      .80
    );

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    550;

  transition:
    color
    160ms
    ease;
}


.camps-hero-link:hover,
.camps-hero-link:focus-visible {
  color:
    #FFFFFF;
}


/* =========================================================
  STAFF DEVICE
========================================================= */

.camp-device {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    var(--light-surface);
}


/* =========================================================
  DEVICE GRID

  Right side supplies the section height.
  Left device stays locked while that content finishes.
========================================================= */

.camp-device-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      400px,
      .92fr
    )
    minmax(
      470px,
      1.08fr
    );

  gap:
    clamp(
      80px,
      10vw,
      160px
    );

  align-items:
    start;
}


/* =========================================================
  DEVICE VISUAL — STICKY
========================================================= */

.camp-device-visual {
  position:
    sticky;

  top:
    calc(
      var(--header-h)
      +
      28px
    );

  min-height:
    calc(
      100svh
      -
      var(--header-h)
      -
      56px
    );

  max-height:
    780px;

  display:
    grid;

  place-items:
    center;

  align-self:
    start;
}


.camp-device-visual img {
  width:
    min(
      100%,
      570px
    );

  height:
    min(
      70svh,
      690px
    );

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  filter:
    drop-shadow(
      0
      30px
      54px
      rgba(
        0,
        0,
        0,
        .07
      )
    );
}


/* =========================================================
  DEVICE CONTENT
========================================================= */

.camp-device-content {
  min-width:
    0;

  padding-bottom:
    clamp(
      180px,
      22vh,
      280px
    );
}


.camp-device-head {
  max-width:
    700px;
}


/* =========================================================
  DEVICE LIST
========================================================= */

.camp-device-list {
  margin-top:
    clamp(
      56px,
      6vw,
      78px
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


/* =========================================================
  DEVICE ITEM
========================================================= */

.camp-device-item {
  min-height:
    178px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    44px;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

  transition:
    transform
    220ms
    var(--ease),
    background-color
    220ms
    ease;
}


.camp-device-item:hover {
  transform:
    translateY(
      -3px
    );

  background:
    #FDFDFC;
}


.camp-device-item > img {
  width:
    21px;

  height:
    21px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    );

  opacity:
    .72;
}


.camp-device-item > div {
  display:
    grid;

  gap:
    7px;
}


.camp-device-item strong {
  color:
    var(--light-text);

  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    550;
}


.camp-device-item span {
  max-width:
    270px;

  color:
    var(--light-secondary);

  font-size:
    11px;

  line-height:
    1.58;
}


/* =========================================================
  SCHEDULE
========================================================= */

.camp-schedule {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    #FFFFFF;
}


/* =========================================================
  SCHEDULE HEAD
========================================================= */

.camp-schedule-head {
  max-width:
    var(--max);
}


.camp-schedule-head h2 {
  max-width:
    900px;
}


.camp-schedule-head p {
  max-width:
    560px;
}


/* =========================================================
  SCHEDULE STAGE
========================================================= */

.camp-schedule-stage {
  width:
    100%;

  margin-top:
    clamp(
      64px,
      7vw,
      96px
    );

  background:
    var(--light-surface);
}


.camp-schedule-inner {
  width:
    min(
      100%,
      var(--max)
    );

  margin-inline:
    auto;

  padding:
    12px
    var(--gutter)
    0;
}


/* =========================================================
  SCHEDULE TOP BAR
========================================================= */

.camp-schedule-topbar {
  min-height:
    78px;

  padding:
    0
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    26px;

  border-radius:
    var(--radius)
    var(--radius)
    0
    0;

  background:
    #FFFFFF;
}


.camp-schedule-topbar > div {
  display:
    flex;

  align-items:
    baseline;

  gap:
    14px;
}


.camp-schedule-topbar strong {
  color:
    var(--light-text);

  font-size:
    13px;

  font-weight:
    550;
}


.camp-schedule-topbar > div > span {
  color:
    var(--light-soft);

  font-size:
    10px;
}


/* =========================================================
  CHANGE BUTTON

  Rest:
  soft gray + dark text.

  Loading / completed:
  soft Redovar blue.
========================================================= */

.camp-schedule-change {
  position:
    relative;

  min-width:
    132px;

  min-height:
    38px;

  padding:
    0
    14px;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #ECECEA;

  color:
    #111111;

  font-size:
    10px;

  font-weight:
    600;

  cursor:
    pointer;

  isolation:
    isolate;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}


.camp-schedule-change:hover:not(.is-loading):not(.is-complete),
.camp-schedule-change:focus-visible:not(.is-loading):not(.is-complete) {
  background:
    #E5E5E2;
}


.camp-schedule-change:disabled {
  cursor:
    default;
}


.camp-schedule-change > span {
  position:
    relative;

  z-index:
    2;
}


.camp-schedule-change::before {
  content:
    "";

  position:
    absolute;

  z-index:
    1;

  inset:
    0;

  width:
    0;

  background:
    rgba(
      11,
      54,
      154,
      .10
    );
}


.camp-schedule-change.is-loading {
  background:
    #E9EEFB;

  color:
    var(--redovar-blue);
}


.camp-schedule-change.is-loading::before {
  animation:
    campScheduleFill
    900ms
    cubic-bezier(
      .22,
      1,
      .36,
      1
    )
    forwards;
}


.camp-schedule-change.is-complete {
  background:
    #E3EAFB;

  color:
    var(--redovar-blue);
}


@keyframes campScheduleFill {

  from {
    width:
      0;
  }

  to {
    width:
      100%;
  }

}


/* =========================================================
  SCHEDULE SCROLL
========================================================= */

.camp-schedule-scroll {
  overflow-x:
    auto;
}


/* =========================================================
  SCHEDULE TABLE
========================================================= */

.camp-schedule-table {
  min-width:
    940px;

  background:
    #FFFFFF;
}


.camp-schedule-row {
  min-height:
    72px;

  display:
    grid;

  grid-template-columns:
    158px
    repeat(
      3,
      minmax(
        220px,
        1fr
      )
    );

  border-top:
    1px
    solid
    var(--light-border);
}


.camp-schedule-row > div {
  padding:
    15px
    18px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  border-left:
    1px
    solid
    var(--light-border);

  transition:
    background-color
    180ms
    ease,
    box-shadow
    180ms
    ease;
}


.camp-schedule-row > div:first-child {
  border-left:
    0;

  color:
    var(--light-secondary);

  font-size:
    11px;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
  SCHEDULE HEAD ROW
========================================================= */

.camp-schedule-row--head {
  min-height:
    46px;

  border-top:
    0;

  background:
    var(--redovar-blue);

  color:
    #FFFFFF;
}


.camp-schedule-row--head > div {
  padding-top:
    0;

  padding-bottom:
    0;

  border-left-color:
    rgba(
      255,
      255,
      255,
      .16
    );

  color:
    rgba(
      255,
      255,
      255,
      .88
    ) !important;

  font-size:
    10px;

  font-weight:
    600;
}


.camp-schedule-row strong {
  color:
    var(--light-text);

  font-size:
    12px;

  font-weight:
    550;
}


.camp-schedule-row span {
  color:
    var(--light-secondary);

  font-size:
    10px;
}


.camp-schedule-row--focus {
  background:
    #FCF8F5;
}


.camp-archery-cell {
  box-shadow:
    inset
    3px
    0
    0
    var(--redovar-terracotta);
}


.camp-archery-cell.is-updated {
  background:
    #F4F7FE;

  box-shadow:
    inset
    3px
    0
    0
    var(--redovar-blue);
}


/* =========================================================
  SCHEDULE FOOT
========================================================= */

.camp-schedule-foot {
  min-height:
    66px;

  padding:
    0
    22px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    24px;

  align-items:
    center;

  color:
    var(--light-soft);

  font-size:
    10px;
}


.camp-schedule-foot > span {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.camp-schedule-foot img {
  width:
    15px;

  height:
    15px;

  flex:
    0
    0
    15px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    );

  opacity:
    .42;
}


/* =========================================================
  RESPONSIBILITY
========================================================= */

.camp-responsibility {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    var(--light-surface);
}


/* =========================================================
  RESPONSIBILITY GRID
========================================================= */

.camp-responsibility-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      350px,
      .72fr
    )
    minmax(
      600px,
      1.28fr
    );

  gap:
    clamp(
      80px,
      9vw,
      150px
    );

  align-items:
    start;
}


/* =========================================================
  RESPONSIBILITY HEAD
========================================================= */

.camp-responsibility-head {
  position:
    sticky;

  top:
    calc(
      var(--header-h)
      +
      42px
    );

  max-width:
    620px;
}


.camp-responsibility-head p {
  max-width:
    500px;
}


/* =========================================================
  WORKSPACE
========================================================= */

.campers-workspace {
  min-width:
    0;

  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;
}


/* =========================================================
  CABINS
========================================================= */

.campers-cabins {
  padding:
    10px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  background:
    #F0F0ED;
}


.campers-cabins button {
  min-height:
    94px;

  padding:
    17px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    5px;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background-color
    180ms
    ease;
}


.campers-cabins button:hover,
.campers-cabins button:focus-visible {
  background:
    rgba(
      255,
      255,
      255,
      .62
    );
}


.campers-cabins button.is-active {
  background:
    #FFFFFF;
}


.campers-cabins strong {
  color:
    var(--light-text);

  font-size:
    13px;

  font-weight:
    550;
}


.campers-cabins span {
  color:
    var(--light-secondary);

  font-size:
    10px;
}


.campers-cabins small {
  color:
    var(--light-soft);

  font-size:
    9px;
}


/* =========================================================
  CAMPERS PANEL
========================================================= */

.campers-panel {
  min-width:
    0;

  padding:
    30px
    30px
    0;
}


/* =========================================================
  PANEL HEAD
========================================================= */

.campers-panel-head {
  min-height:
    84px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;
}


.campers-panel-head h3 {
  margin:
    0;

  color:
    var(--light-text);

  font-size:
    28px;

  line-height:
    1;

  letter-spacing:
    -.04em;

  font-weight:
    500;
}


.campers-panel-head p {
  margin-top:
    8px;

  color:
    var(--light-secondary);

  font-size:
    10px;
}


/* =========================================================
  RESPONSIBLE STAFF
========================================================= */

.campers-responsible {
  display:
    grid;

  gap:
    5px;

  text-align:
    right;
}


.campers-responsible span {
  color:
    var(--light-soft);

  font-size:
    9px;
}


.campers-responsible strong {
  color:
    var(--light-text);

  font-size:
    11px;

  font-weight:
    550;
}


/* =========================================================
  ROSTER
========================================================= */

.campers-table {
  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    var(--light-surface);
}


.campers-row {
  min-height:
    64px;

  display:
    grid;

  grid-template-columns:
    minmax(
      180px,
      1.3fr
    )
    70px
    minmax(
      170px,
      1fr
    );

  align-items:
    stretch;
}


.campers-row + .campers-row {
  border-top:
    1px
    solid
    var(--light-border);
}


.campers-row > div {
  padding:
    14px
    16px;

  display:
    flex;

  align-items:
    center;

  color:
    var(--light-secondary);

  font-size:
    10px;
}


.campers-row strong {
  color:
    var(--light-text);

  font-size:
    11px;

  font-weight:
    550;
}


/* =========================================================
  ROSTER HEAD
========================================================= */

.campers-row--head {
  min-height:
    42px;

  background:
    var(--redovar-blue);
}


.campers-row--head > div {
  color:
    rgba(
      255,
      255,
      255,
      .88
    );

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
  PANEL FOOT
========================================================= */

.campers-panel-foot {
  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}


.campers-panel-foot span {
  color:
    var(--light-soft);

  font-size:
    9px;
}


/* =========================================================
  NEXT CABIN BUTTON
========================================================= */

.campers-panel-foot button {
  min-height:
    36px;

  padding:
    0
    13px;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #ECECEA;

  color:
    #111111;

  font-size:
    10px;

  font-weight:
    550;

  cursor:
    pointer;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease,
    transform
    160ms
    ease;
}


.campers-panel-foot button:hover,
.campers-panel-foot button:focus-visible {
  background:
    #E9EEFB;

  color:
    var(--redovar-blue);
}


.campers-panel-foot button:active {
  transform:
    translateY(
      1px
    );
}


/* =========================================================
  COMMUNICATION
========================================================= */

.camp-communication {
  --communication-left-x:
    -18px;

  --communication-right-x:
    18px;

  padding:
    clamp(
      132px,
      12vw,
      202px
    )
    0;

  background:
    #111111;

  color:
    #F5F5F3;
}


/* =========================================================
  COMMUNICATION HEAD
========================================================= */

.camp-communication-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      420px,
      1fr
    )
    minmax(
      340px,
      .72fr
    );

  column-gap:
    clamp(
      80px,
      10vw,
      170px
    );

  align-items:
    end;
}


/* =========================================================
  COMMUNICATION TITLE
========================================================= */

.camp-communication-head h2 {
  max-width:
    720px;

  color:
    #F5F5F3;
}


/* =========================================================
  COMMUNICATION SUBTITLE
========================================================= */

.camp-communication-head p {
  width:
    min(
      100%,
      470px
    );

  max-width:
    470px;

  margin:
    0
    0
    6px;

  justify-self:
    end;

  color:
    rgba(
      245,
      245,
      243,
      .60
    );

  font-size:
    clamp(
      15px,
      1.2vw,
      17px
    );

  line-height:
    1.68;
}


/* =========================================================
  COMMUNICATION GRID
========================================================= */

.camp-communication-grid {
  margin-top:
    clamp(
      68px,
      7vw,
      104px
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}


/* =========================================================
  COMMUNICATION CARD

  Left starts slightly left.
  Center remains still.
  Walkie starts slightly right.

  Scroll down:
  outer cards meet.

  Scroll up:
  outer cards separate.
========================================================= */

.camp-communication-card {
  --communication-card-x:
    0px;

  --communication-card-y:
    0px;

  min-height:
    320px;

  padding:
    clamp(
      30px,
      3vw,
      40px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    72px;

  border-radius:
    var(--radius);

  background:
    rgba(
      255,
      255,
      255,
      .055
    );

  transform:
    translate3d(
      var(--communication-card-x),
      var(--communication-card-y),
      0
    );

  will-change:
    transform;

  transition:
    transform
    90ms
    linear,
    background-color
    220ms
    ease;
}


.camp-communication-card:first-child {
  --communication-card-x:
    var(--communication-left-x);
}


.camp-communication-card:last-child {
  --communication-card-x:
    var(--communication-right-x);
}


.camp-communication-card:hover {
  --communication-card-y:
    -3px;

  background:
    rgba(
      255,
      255,
      255,
      .075
    );
}


/* =========================================================
  WALKIE CARD
========================================================= */

.camp-communication-card--walkie {
  background:
    var(--redovar-blue);
}


.camp-communication-card--walkie:hover {
  --communication-card-y:
    -3px;

  background:
    var(--redovar-blue);
}


/* =========================================================
  COMMUNICATION ICON
========================================================= */

.camp-communication-icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .08
    );
}


.camp-communication-icon img {
  width:
    20px;

  height:
    20px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    )
    invert(
      1
    );

  opacity:
    .70;
}


/* =========================================================
  WALKIE ICON
========================================================= */

.camp-communication-card--walkie
.camp-communication-icon {
  background:
    #FFFFFF;
}


.camp-communication-card--walkie
.camp-communication-icon img {
  opacity:
    1;

  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      18%
    )
    sepia(
      62%
    )
    saturate(
      3380%
    )
    hue-rotate(
      218deg
    )
    brightness(
      80%
    )
    contrast(
      105%
    );
}


/* =========================================================
  COMMUNICATION COPY
========================================================= */

.camp-communication-card > div:last-child {
  display:
    grid;

  gap:
    11px;
}


.camp-communication-card span {
  color:
    rgba(
      245,
      245,
      243,
      .42
    );

  font-size:
    9px;
}


.camp-communication-card h3 {
  margin:
    0;

  max-width:
    380px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      25px,
      2.35vw,
      36px
    );

  line-height:
    1;

  letter-spacing:
    -.043em;

  font-weight:
    500;
}


/* =========================================================
  SECOND COMMUNICATION CARD

  Deliberately sized so the requested heading holds
  its two-line composition on desktop.
========================================================= */

@media (min-width: 901px) {

  .camp-communication-card:nth-child(2) h3 {
    max-width:
      none;

    font-size:
      clamp(
        24px,
        2vw,
        30px
      );

    white-space:
      nowrap;
  }

}


.camp-communication-card p {
  margin:
    4px
    0
    0;

  max-width:
    420px;

  color:
    rgba(
      245,
      245,
      243,
      .58
    );

  font-size:
    12px;

  line-height:
    1.62;
}


/* =========================================================
  WALKIE COPY
========================================================= */

.camp-communication-card--walkie span {
  color:
    rgba(
      255,
      255,
      255,
      .58
    );
}


.camp-communication-card--walkie p {
  color:
    rgba(
      255,
      255,
      255,
      .72
    );
}


/* =========================================================
  ACCESS
========================================================= */

.camp-access {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    var(--light-hover);
}


/* =========================================================
  ACCESS GRID
========================================================= */

.camp-access-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      360px,
      .78fr
    )
    minmax(
      520px,
      1.22fr
    );

  gap:
    clamp(
      80px,
      10vw,
      160px
    );

  align-items:
    start;
}


/* =========================================================
  ACCESS HEAD
========================================================= */

.camp-access-head {
  position:
    sticky;

  top:
    calc(
      var(--header-h)
      +
      42px
    );
}


.camp-access-head h2 {
  max-width:
    650px;
}


.camp-access-head p {
  max-width:
    490px;
}


/* =========================================================
  ACCESS ROLES
========================================================= */

.camp-access-roles {
  display:
    grid;

  gap:
    10px;
}


/* =========================================================
  ACCESS ROLE
========================================================= */

.camp-access-role {
  min-height:
    170px;

  padding:
    30px;

  display:
    grid;

  grid-template-columns:
    minmax(
      110px,
      .45fr
    )
    minmax(
      120px,
      .55fr
    )
    minmax(
      220px,
      1fr
    );

  gap:
    24px;

  align-items:
    center;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;
}


.camp-access-role > span {
  color:
    var(--light-soft);

  font-size:
    10px;
}


.camp-access-role strong {
  color:
    var(--light-text);

  font-size:
    15px;

  font-weight:
    550;
}


.camp-access-role p {
  margin:
    0;

  color:
    var(--light-secondary);

  font-size:
    11px;

  line-height:
    1.6;
}


/* =========================================================
  CLOSING
========================================================= */

.camp-closing {
  padding:
    clamp(
      132px,
      12vw,
      202px
    )
    0;

  background:
    #FFFFFF;
}


.camp-closing-inner {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}


.camp-closing h2 {
  max-width:
    780px;
}


/* =========================================================
  RESPONSIVE — 1100
========================================================= */

@media (max-width: 1100px) {

  .camp-device-grid,
  .camp-responsibility-grid,
  .camp-access-grid {
    gap:
      70px;
  }


  .camp-responsibility-grid {
    grid-template-columns:
      minmax(
        300px,
        .62fr
      )
      minmax(
        560px,
        1.38fr
      );
  }

}


/* =========================================================
  RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {

  .camp-device-grid,
  .camp-responsibility-grid,
  .camp-access-grid {
    grid-template-columns:
      1fr;

    gap:
      56px;
  }


  /* =======================================================
    DEVICE

    End sticky behavior once the page becomes one column.
  ======================================================== */

  .camp-device-visual {
    position:
      static;

    top:
      auto;

    min-height:
      520px;

    max-height:
      none;
  }


  .camp-device-visual img {
    height:
      auto;

    max-height:
      620px;
  }


  .camp-device-content {
    padding-bottom:
      0;
  }


  /* =======================================================
    COMMUNICATION HEAD
  ======================================================== */

  .camp-communication-head {
    grid-template-columns:
      1fr;

    row-gap:
      28px;
  }


  .camp-communication-head p {
    width:
      min(
        100%,
        560px
      );

    max-width:
      560px;

    margin:
      0;

    justify-self:
      start;
  }


  .camp-responsibility-head,
  .camp-access-head {
    position:
      static;

    top:
      auto;
  }


  /* =======================================================
    COMMUNICATION

    Cards stack normally on tablet/mobile.
  ======================================================== */

  .camp-communication {
    --communication-left-x:
      0px;

    --communication-right-x:
      0px;
  }


  .camp-communication-grid {
    grid-template-columns:
      1fr;
  }


  .camp-communication-card {
    min-height:
      260px;
  }


  .camp-access-role {
    grid-template-columns:
      120px
      140px
      minmax(
        0,
        1fr
      );
  }

}


/* =========================================================
  RESPONSIVE — 700
========================================================= */

@media (max-width: 700px) {

  main h2 {
    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      );
  }


  .camp-schedule-head h2 {
  width:
    100%;

  max-width:
    none;

  font-size:
    clamp(
      34px,
      8.7vw,
      42px
    );

  line-height:
    .98;

  letter-spacing:
    -.046em;
}



.camp-communication-head {
  row-gap:
    18px;
}


.camp-communication-head h2 {
  width:
    100%;

  max-width:
    100%;

  font-size:
    clamp(
      38px,
      9.6vw,
      46px
    );

  line-height:
    .98;

  letter-spacing:
    -.048em;

  white-space:
    normal;
}


.camp-communication-head p {
  width:
    100%;

  max-width:
    430px;

  margin:
    0;

  font-size:
    15px;

  line-height:
    1.58;

  white-space:
    normal;
}



  /* =======================================================
    HERO
  ======================================================== */

  .camps-hero {
    min-height:
      760px;
  }


  .camps-hero-inner {
    min-height:
      calc(
        760px
        -
        var(--header-h)
      );

    padding:
      90px
      0;
  }


  .camps-hero h1 {
    font-size:
      clamp(
        50px,
        13.5vw,
        70px
      );
  }


  .camps-hero-copy > p {
    max-width:
      520px;
  }


  /* =======================================================
    DEVICE
  ======================================================== */

  .camp-device-visual {
    min-height:
      440px;
  }


  .camp-device-visual img {
    max-height:
      520px;
  }


  .camp-device-list {
    grid-template-columns:
      1fr;
  }


  .camp-device-item {
    min-height:
      140px;

    padding:
      26px;

    gap:
      38px;
  }


  /* =======================================================
    SCHEDULE
  ======================================================== */

  .camp-schedule-topbar {
    padding:
      18px;

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .camp-schedule-topbar > div {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }


  .camp-schedule-change {
    width:
      100%;
  }


  .camp-schedule-foot {
    padding:
      18px;

    grid-template-columns:
      1fr
      1fr;
  }


  /* =======================================================
    RESPONSIBILITY
  ======================================================== */

  .campers-cabins {
    grid-template-columns:
      1fr;
  }


  .campers-cabins button {
    min-height:
      82px;
  }


  .campers-panel {
    padding:
      24px
      18px
      0;
  }


  .campers-table {
    overflow-x:
      auto;
  }


  .campers-row {
    min-width:
      620px;
  }


  .campers-panel-foot {
    padding:
      14px
      0;

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  /* =======================================================
    ACCESS
  ======================================================== */

  .camp-access-role {
    min-height:
      150px;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .camp-access-role p {
    max-width:
      440px;
  }


  /* =======================================================
    CLOSING
  ======================================================== */

  .camp-closing-inner {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
  RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

  .camps-hero {
    min-height:
      720px;
  }


  .camps-hero-inner {
    min-height:
      calc(
        720px
        -
        var(--header-h)
      );
  }


  .camps-hero h1 {
    font-size:
      clamp(
        46px,
        13vw,
        60px
      );
  }


  .camps-hero-actions {
    flex-direction:
      column;

    gap:
      14px;
  }


  .camps-hero-link {
    width:
      max-content;
  }


  .camp-schedule-head h2 {
  font-size:
    clamp(
      32px,
      8.4vw,
      38px
    );
}


  .camp-device-visual {
    min-height:
      360px;
  }


  .camp-device-visual img {
    max-height:
      430px;
  }


  .camp-device-item {
    min-height:
      126px;

    padding:
      24px;
  }


  .camp-schedule-foot {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }


  .campers-panel-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .campers-responsible {
    text-align:
      left;
  }


.camp-communication-card {
  min-height:
    230px;

  padding:
    27px;

  overflow:
    hidden;
}


.camp-communication-card > div:last-child {
  min-width:
    0;

  width:
    100%;
}


.camp-communication-card h3 {
  width:
    100%;

  max-width:
    100%;

  margin:
    0;

  font-size:
    24px;

  line-height:
    1.08;

  letter-spacing:
    -.038em;

  font-weight:
    500;

  white-space:
    normal;

  overflow-wrap:
    normal;

  word-break:
    normal;
}

/* =======================================================
  Second communication card

  Keep the intentional HTML break as the only break:
  Need another staff member
  at the cabin
======================================================= */

.camp-communication-card:nth-child(2) h3 {
  font-size:
    clamp(
      20px,
      5.6vw,
      22px
    );

  line-height:
    1.08;

  letter-spacing:
    -.038em;

  white-space:
    nowrap;
}

}


/* =========================================================
  REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .camps-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .camp-device-item,
  .camp-communication-card {
    transition:
      none;
  }


  .camp-communication {
    --communication-left-x:
      0px;

    --communication-right-x:
      0px;
  }


  .camp-schedule-change.is-loading::before {
    animation:
      none;

    width:
      100%;
  }

}