.team-letter{display:grid}
.team-letter__sheet{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  gap:2rem;
  padding:clamp(1.75rem,1rem + 4vw,4.5rem);
  border-radius:var(--r-plate);
  background:
    radial-gradient(55% 45% at 100% 0%,rgb(194 24 91 / .35),transparent 70%),
    radial-gradient(45% 40% at 0% 100%,rgb(107 18 56 / .6),transparent 70%),
    var(--c-night);
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .1),0 2rem 4rem -2rem rgb(0 0 0 / .6);
}
.team-letter__aside{display:grid;gap:.75rem}
.team-letter__title{max-width:none}
.team-letter__greeting{margin-top:.5rem;font-family:var(--f-wide);font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);letter-spacing:-.02em;color:var(--c-blush)}
.team-letter__intro{font-size:1rem;line-height:1.55;color:rgb(255 255 255 / .7)}
.team-letter__body{display:grid;gap:1.1rem}
.team-letter__text{font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.7;color:rgb(255 255 255 / .9)}
.team-letter__foot{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.5rem;row-gap:.5rem}
.team-letter__closing{font-size:1.0625rem;color:rgb(255 255 255 / .8)}
.team-letter__sign{display:flex;align-items:center;gap:1rem}
.team-letter__mark{width:3.25rem;height:auto}
.team-letter__hand{
  font-family:var(--f-hand);
  font-size:clamp(2.1rem,1.8rem + 1vw,2.7rem);
  line-height:1;
  white-space:nowrap;
  color:var(--c-blush);
  transform:rotate(-5deg);
  text-shadow:0 .1em .5em rgb(194 24 91 / .55);
}

.pledge-switch{display:grid;gap:1.5rem}
.pledge-switch__title{max-width:12em}
.pledge-switch__lead,.pledge-switch__note{max-width:30em;font-size:1.0625rem;line-height:1.6;color:rgb(255 255 255 / .88)}
.pledge-switch__note{max-width:40em;font-size:1rem;color:rgb(255 255 255 / .75)}
.pledge-switch__control{
  display:inline-flex;
  justify-self:start;
  gap:.25rem;
  margin-top:.5rem;
  padding:.3rem;
  border-radius:var(--r-pill);
  background:rgb(255 255 255 / .1);
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .25);
}
.pledge-switch__radio{position:absolute;opacity:0;width:1px;height:1px}
.pledge-switch__option{
  padding:.7rem 1.4rem;
  border-radius:var(--r-pill);
  font-weight:500;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}
.pledge-switch__option:hover{background:rgb(255 255 255 / .12)}
.pledge-switch__radio:checked + .pledge-switch__option{background:var(--c-blush);color:var(--c-ink)}
#pledge-nem:checked + .pledge-switch__option{background:var(--c-ruby);color:var(--c-white);box-shadow:0 0 1.25rem rgb(194 24 91 / .55)}
.pledge-switch__radio:focus-visible + .pledge-switch__option{outline:3px solid var(--c-white);outline-offset:2px}
.pledge-switch__plate{
  display:grid;
  padding:clamp(1rem,.6rem + 1.6vw,2rem);
  border-radius:var(--r-plate);
  background:
    radial-gradient(60% 60% at 0% 0%,rgb(255 255 255 / .08),transparent 70%),
    rgb(11 10 12 / .35);
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .12);
  transition:box-shadow .4s ease;
}
.pledge-switch:has(#pledge-nem:checked) .pledge-switch__plate{box-shadow:inset 0 0 0 1.5px rgb(255 228 236 / .3),0 0 3rem rgb(194 24 91 / .3)}
.pledge-switch__list{
  grid-area:1 / 1;
  display:grid;
  gap:.75rem;
  transition:opacity .35s ease,visibility .35s ease;
}
.pledge-switch__list--no{opacity:0;visibility:hidden}
.pledge-switch:has(#pledge-nem:checked) .pledge-switch__list--no{opacity:1;visibility:visible}
.pledge-switch:has(#pledge-nem:checked) .pledge-switch__list--yes{opacity:0;visibility:hidden}
.pledge-switch__tile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-items:center;
  column-gap:.85rem;
  row-gap:.7rem;
  padding:1.1rem 1.2rem 1.25rem;
  border-radius:var(--r-panel);
  background:linear-gradient(160deg,rgb(255 255 255 / .13),rgb(255 255 255 / .04));
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .14);
}
.pledge-switch__list--no .pledge-switch__tile{background:linear-gradient(160deg,rgb(194 24 91 / .38),rgb(194 24 91 / .1))}
.pledge-switch__icon{
  display:grid;
  place-items:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:var(--r-thumb);
  background:linear-gradient(160deg,rgb(255 255 255 / .42),rgb(255 255 255 / .12));
  box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .55),inset 0 1px 10px rgb(255 255 255 / .35);
  color:var(--c-white);
}
.pledge-switch__name{font-family:var(--f-wide);font-size:1.125rem;line-height:1.2;letter-spacing:-.02em}
.pledge-switch__text{grid-column:1 / -1;align-self:start;font-size:1rem;line-height:1.55;color:rgb(255 255 255 / .88)}

@container sub-section (min-width:46rem){
  .pledge-switch__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container sub-section (min-width:62rem){
  .pledge-switch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:end}
  .pledge-switch__lead{justify-self:end;padding-bottom:.4rem}
  .pledge-switch__control,.pledge-switch__plate,.pledge-switch__note{grid-column:1 / -1}
  .pledge-switch__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.photo-diary{display:grid;gap:1.5rem}
.photo-diary__title{max-width:10em}
.photo-diary__lead{max-width:30em;font-size:1.0625rem;line-height:1.6;color:rgb(255 255 255 / .88)}
.photo-diary__wall{display:grid;gap:1.25rem;margin-top:1rem}
.photo-diary__column{display:grid;align-content:start;gap:1.25rem}
.photo-diary__item{
  position:relative;
  overflow:hidden;
  margin:0;
  border-radius:var(--r-panel);
  box-shadow:0 1.25rem 2.5rem -1.25rem rgb(0 0 0 / .55);
}
.photo-diary__photo{
  display:block;
  width:100%;
  height:auto;
  transition:filter .4s ease;
}
.photo-diary__item:hover .photo-diary__photo{filter:brightness(1.1) saturate(1.08)}
.photo-diary__caption{
  position:absolute;
  inset:auto 0 0;
  display:grid;
  gap:.2rem;
  padding:3.5rem 1.1rem 1rem;
  font-size:.9375rem;
  line-height:1.4;
  color:rgb(255 255 255 / .9);
  background:linear-gradient(0deg,rgb(11 10 12 / .88) 0%,rgb(11 10 12 / .5) 55%,rgb(11 10 12 / 0) 100%);
}
.photo-diary__name{font-family:var(--f-wide);font-size:1.0625rem;letter-spacing:-.02em;color:var(--c-blush)}
@container sub-section (min-width:46rem){
  .photo-diary__wall{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
}
@container sub-section (min-width:62rem){
  .photo-diary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:end}
  .photo-diary__lead{justify-self:end;padding-bottom:.4rem}
  .photo-diary__wall{grid-column:1 / -1}
}