/* ============================================================
   Raj & Jiya — Wedding Invitation
   Design tokens are set as CSS variables so content.js (theme{})
   can re-skin the whole site for a new couple without touching
   a single line of this file.
   ============================================================ */

:root{
  --bg:            #F7E4C6;
  --bg-soft:       #F3E6D3;
  --ink:           #3A1D0E;
  --ink-soft:      #6B4A32;
  --accent:        #8A2B1E;
  --metal:         #C8A45C;
  --handoff-wash:  #6E151C;
  --intro-bg:      #6D5238;
  --bg-dim:        .30;
  --font-display:  'Cormorant Garamond', serif;
  --font-body:     'Jost', sans-serif;

  --radius: 18px;
  --shadow: 0 18px 40px -18px rgba(58,29,14,.45);

  /* frosted card sitting over the live background video */
  --card-bg:      rgba(253,245,232,.86);
  --card-border:  rgba(200,164,92,.55);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

html.intro-active, html.intro-active body{ overflow:hidden; height:100%; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }

/* ============================================================
   LIVE BACKGROUND VIDEO — the palace courtyard, behind everything
   ============================================================ */
.bg-layer{
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg);
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;
}
.bg-layer.is-live{ opacity: 1; }
.bg-layer__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  pointer-events:none; user-select:none; -webkit-user-select:none;
}
/* A warm DARK scrim, not a cream one — the palace video is bright, and the
   site's headings are cream, so lightening it would bury the text. */
.bg-layer__dim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(46,20,8,.30) 0%, rgba(46,20,8,.12) 28%, rgba(46,20,8,.18) 70%, rgba(46,20,8,.42) 100%),
    rgba(46,20,8,var(--bg-dim));
}

/* ---------- strictly mobile-screen layout ---------- */
.app{
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

section{ padding: 64px 28px; position: relative; }

.section-heading{
  text-align:center;
  font-size: clamp(1.9rem, 8.5vw, 2.5rem);
  color: #FFF4E2;
  margin-bottom: 8px;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(40,16,6,.75), 0 0 40px rgba(40,16,6,.5);
}
.section-heading::after{
  content:"";
  display:block;
  width: 64px; height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--metal), transparent);
}

/* ---------- reveal-on-scroll ---------- */
.reveal-on-scroll{ opacity:0; transform: translateY(24px); transition: opacity 900ms cubic-bezier(.16,1,.3,1), transform 900ms cubic-bezier(.16,1,.3,1); }
.reveal-on-scroll.is-visible{ opacity:1; transform:none; }

/* ============================================================
   INTRO — video behind an "Open Invitation" button
   ============================================================ */
.intro{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--intro-bg);
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.intro__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
  transform: scale(1);
  transition: transform 1200ms cubic-bezier(.4,0,.2,1), filter 1000ms ease-out, opacity 900ms ease-out;
}
.intro__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(20,6,6,.75) 100%);
  pointer-events:none;
}
.intro__wash{
  position: absolute; inset: 0;
  background: var(--handoff-wash);
  opacity: 0;
  transition: opacity 900ms ease-in;
  pointer-events: none;
}
.intro.is-handing-off .intro__video{ transform: scale(1.06); filter: blur(10px) brightness(1.05); opacity: 0; }
.intro.is-handing-off .intro__wash{ opacity: 1; }
.intro.is-handing-off .intro__open{ opacity: 0 !important; pointer-events:none; }
.intro.is-done{ opacity: 0; pointer-events: none; }
.intro.is-removed{ display: none; }

.intro__open{
  position:absolute; left:0; right:0; bottom: 12%;
  z-index: 2;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  transition: opacity 500ms ease;
}
.intro.is-playing .intro__open{ opacity:0; pointer-events:none; transform: translateY(10px); }
.intro__eyebrow{
  margin:0; color:#F6E9D8;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.4rem; letter-spacing:.04em;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.intro__joiner{ display:inline-block; margin: 0 .18em; }
.intro__btn{
  font-family: var(--font-body);
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: #F6E9D8;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(246,233,216,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px 34px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 300ms ease, transform 200ms ease;
}
.intro__btn:hover{ background: rgba(255,255,255,.16); }
.intro__btn:active{ transform: scale(.97); }

@media (prefers-reduced-motion: reduce){
  .intro, .intro__video, .reveal-on-scroll, .hero.is-live > *{ transition-duration: 1ms !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height: 92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.hero.is-waiting > *{ opacity:0; transform: translateY(18px); }
.hero.is-live > *{
  opacity:1; transform:none;
  transition: opacity 1100ms ease, transform 1100ms cubic-bezier(.16,1,.3,1);
}
.hero.is-live > *:nth-child(2){ transition-delay: 140ms; }
.hero.is-live > *:nth-child(3){ transition-delay: 280ms; }
.hero.is-live > *:nth-child(4){ transition-delay: 420ms; }

.hero__eyebrow{
  font-family: var(--font-display); font-style: italic; font-weight:500;
  font-size: clamp(1.35rem, 5.8vw, 1.8rem);
  color: #FFF4E2;
  margin-bottom: 18px;
  letter-spacing: .02em;
  text-shadow: 0 2px 16px rgba(40,16,6,.8);
}
.hero__names{
  font-size: clamp(3rem, 15vw, 4.6rem);
  line-height: .98;
  color: #FFF7EA;
  letter-spacing: .01em;
  text-shadow: 0 4px 30px rgba(40,16,6,.85), 0 0 60px rgba(40,16,6,.55);
}
.hero__names span{ display:inline-block; }
.hero__joiner{ color: var(--metal); font-style: italic; margin: 0 .12em; }
.hero__date{
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F3DFBE;
  text-shadow: 0 2px 12px rgba(40,16,6,.8);
}
/* ============================================================
   SCROLL CUE — no hard pill. A soft dark halo bleeds behind the
   mark to guarantee contrast over a bright video, while the mark
   itself stays thin and quiet.
   ============================================================ */
.scrollcue{
  position: relative;
  margin-top: 40px;
  display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  padding: 6px 10px 2px;
}
.scrollcue::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 132px; height: 108px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(26,11,3,.62), rgba(26,11,3,.28) 55%, transparent 78%);
  filter: blur(5px);
  pointer-events:none;
}
.scrollcue__text,
.scrollcue__chevrons{ position: relative; }   /* sit above the halo */

.scrollcue__text{
  font-size:.6rem; font-weight:400;
  letter-spacing:.42em; text-indent:.42em;     /* indent balances the tracking */
  text-transform:uppercase;
  color:#FFEAC6;
  text-shadow: 0 1px 6px rgba(20,8,2,.95), 0 0 18px rgba(20,8,2,.7);
  animation: cue-breathe 3s ease-in-out infinite;
}
.scrollcue__chevrons{ display:block; width:20px; height:20px; }
.chev{
  position:absolute; left:0; width:20px; height:10px;
  color:#F3D08F;
  opacity:0;
  filter: drop-shadow(0 1px 4px rgba(20,8,2,.95));
  animation: chev-fall 2.2s cubic-bezier(.45,0,.35,1) infinite;
}
.chev--1{ top:0; animation-delay: 0s; }
.chev--2{ top:6px; animation-delay: .2s; }
.chev--3{ display:none; }                      /* two reads calmer than three */
@keyframes chev-fall{
  0%   { opacity:0;   transform: translateY(-3px); }
  35%  { opacity:.95; }
  70%  { opacity:.5;  transform: translateY(3px); }
  100% { opacity:0;   transform: translateY(7px); }
}
@keyframes cue-breathe{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .chev{ opacity:.9; animation:none; }
  .scrollcue__text{ animation:none; opacity:1; }
}

/* ============================================================
   THE COUPLE
   ============================================================ */
.couple-photos__intro{
  text-align:center; color:#F3DFBE;
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem;
  margin-top: 14px;
  text-shadow: 0 2px 14px rgba(40,16,6,.8);
}
.couple-photos__list{ display:flex; flex-direction:column; gap: 30px; margin-top: 34px; }
.couple-photo{
  margin:0; text-align:center;
  background: var(--card-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 14px 14px 24px;
  box-shadow: var(--shadow);
}
.couple-photo__frame{
  padding: 6px;
  background: linear-gradient(155deg, var(--metal), rgba(253,245,232,.95) 45%, var(--metal));
  border-radius: 14px;
  overflow:hidden;
}
.couple-photo__frame img{
  border-radius: 9px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;   /* keeps faces in frame on a tall crop */
  width: 100%;
  display:block;
}
.couple-photo__body{ display:block; margin-top: 18px; }
.couple-photo__role{
  display:block;
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--accent);
}
.couple-photo__name{
  display:block; margin-top: 4px;
  font-family: var(--font-display); font-size: 2rem; line-height:1.1;
  color: var(--ink);
}
.couple-photo__name::after{
  content:""; display:block; width:44px; height:1px; margin:12px auto 0;
  background: linear-gradient(90deg, transparent, var(--metal), transparent);
}
.couple-photo__line{
  display:block; margin-top: 10px;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.06rem; line-height:1.55; color: var(--ink-soft);
  padding: 0 6px;
}

/* ============================================================
   INVITATION FLIP CARDS
   The artwork already carries its own ornate gold border, so the site
   frames it the way a gallery would — with a CREAM MATBOARD, not more
   gold. The mat gives the artwork breathing room, ties it to the site's
   warm palette, and makes the whole thing read as a physical card that
   can be turned over.
   ============================================================ */
.invitations__list{ display:flex; flex-direction:column; gap: 46px; margin-top: 40px; }

.flipcard{ perspective: 1800px; }
.flipcard__inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.22,.8,.24,1);
}
.flipcard.is-flipped .flipcard__inner{ transform: rotateY(180deg); }

.flipcard__face{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipcard__front{ position: relative; }        /* front defines the height */
.flipcard__back{
  position: absolute; inset: 0;
  transform: rotateY(180deg);
}

/* --- the matboard (the frame itself) --- */
.matboard{
  height: 100%;
  padding: 14px 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(158deg, #FBF2E0 0%, #F3E3C8 48%, #EFDCBE 100%);
  box-shadow:
    0 26px 55px -24px rgba(38,16,4,.80),
    0 6px 18px -10px rgba(38,16,4,.45),
    inset 0 0 0 1px rgba(255,255,255,.55);
  position: relative;
}
/* the classic passe-partout hairline, inset in the mat */
.matboard::after{
  content:"";
  position:absolute; inset:7px;
  border: 1px solid rgba(180,140,72,.42);
  border-radius: 11px;
  pointer-events:none;
}
.matboard__art{
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 6px 18px -8px rgba(38,16,4,.55);
}
.matboard__art img{ display:block; width:100%; border-radius: 9px; }

/* soft candlelight drifting across the artwork as it arrives */
.matboard__gloss{
  position:absolute; top:0; bottom:0; width:60%; left:-75%;
  background: linear-gradient(100deg, transparent, rgba(255,244,216,.22), transparent);
  transform: skewX(-14deg);
  pointer-events:none;
}
.flipcard.is-visible .matboard__gloss{ animation: invite-gloss 2000ms cubic-bezier(.3,0,.2,1) 620ms forwards; }
@keyframes invite-gloss{ to{ left:140%; } }

/* --- the flip button --- */
.flipcard__btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(138,43,30,.35);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(138,43,30,.06), rgba(138,43,30,.13));
  color: var(--accent);
  font-family: var(--font-body);
  font-size: .74rem; font-weight:500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 260ms ease, transform 180ms ease;
}
.flipcard__btn:hover{ background: linear-gradient(180deg, rgba(138,43,30,.12), rgba(138,43,30,.20)); }
.flipcard__btn:active{ transform: scale(.985); }
.flipcard__btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.flipcard__btnicon{ width:17px; height:17px; flex:none; transition: transform 260ms ease; }
.flipcard__btn:hover .flipcard__btnicon{ transform: translateX(3px); }
.flipcard__btn:hover .flipcard__btnicon--rev{ transform: translateX(-3px); }

/* --- the back face --- */
.matboard--back{
  display:flex;
  overflow-y: auto;                 /* long details can still scroll */
  -webkit-overflow-scrolling: touch;
}
.detail{
  width:100%;
  display:flex; flex-direction:column;
  padding: 22px 16px 16px;
  text-align:center;
}
.detail__crest{
  width:10px; height:10px; margin: 0 auto 14px;
  transform: rotate(45deg);
  background: var(--metal);
  box-shadow: 0 0 12px rgba(200,164,92,.75);
  flex:none;
}
.detail__title{
  font-size: clamp(1.7rem, 7.5vw, 2.2rem);
  color: var(--accent);
  line-height:1.1;
}
.detail__rule{
  width:70px; height:1px; margin: 14px auto 22px;
  background: linear-gradient(90deg, transparent, var(--metal), transparent);
  flex:none;
}
.detail__row{
  padding: 11px 4px;
  border-top: 1px solid rgba(180,140,72,.28);
  display:flex; flex-direction:column; gap:3px;
}
.detail__row:first-of-type{ border-top:0; }
.detail__label{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color: var(--ink-soft);
}
.detail__value{
  font-family: var(--font-display);
  font-size: 1.22rem; line-height:1.35;
  color: var(--ink);
}
.detail__note{
  margin-top: 18px;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; line-height:1.5;
  color: var(--accent);
  padding: 0 6px;
}
.detail__map{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  margin: 20px auto 0;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(138,43,30,.45);
  padding-bottom: 4px;
}
.detail__map svg{ width:15px; height:15px; }
.flipcard__btn--back{ margin-top: auto; }
/* keeps the back button clear of the directions link when the card is tall */
.detail__map + .flipcard__btn--back{ margin-top: 26px; }

@media (prefers-reduced-motion: reduce){
  .flipcard__inner{ transition-duration: 1ms; }
  .matboard__gloss{ display:none; }
}

/* ============================================================
   BLESSINGS / FAMILY NAMES
   ============================================================ */
.blessings{ text-align:center; }
.blessings__intro{
  color:#F3DFBE; margin: 16px auto 0; max-width: 330px;
  font-family: var(--font-display); font-style: italic; font-size: 1.12rem;
  line-height:1.6;
  text-shadow: 0 2px 12px rgba(40,16,6,.85);
}
.blessings__list{ display:flex; flex-direction:column; gap: 22px; margin-top: 34px; }
.family{
  display:flex; flex-direction:column; align-items:center; gap: 3px;
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}
.family__side{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--ink-soft);
}
.family__person{
  font-family: var(--font-display);
  font-size: 1.9rem; line-height:1.2;
  color: var(--accent);
  margin-top: 4px;
}
.family__role{
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--ink-soft);
  margin: 6px 0 10px;
  position: relative;
}
/* short gold rules either side of "son of" / "daughter of" */
.family__role::before,
.family__role::after{
  content:""; position:absolute; top:50%;
  width: 26px; height:1px;
  background: linear-gradient(90deg, transparent, var(--metal));
}
.family__role::before{ right: calc(100% + 10px); }
.family__role::after{ left: calc(100% + 10px); transform: scaleX(-1); }
.family__name{
  font-family: var(--font-display);
  font-size: 1.45rem; line-height:1.3;
  color: var(--ink);
}
.family__amp{
  font-family: var(--font-display); font-style: italic;
  color: var(--metal); font-size: 1.1rem;
  line-height:1;
}
.blessings__closing{
  margin-top: 30px;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; color:#F3DFBE;
  text-shadow: 0 2px 12px rgba(40,16,6,.85);
}

/* ============================================================
   VENUE / MAP
   A raw Google embed is bright grey-and-white and fights the warm
   palace behind it. So the map sits inside the same cream matboard
   as the invitations, and the iframe itself is warmed with a filter
   until its palette belongs to this site.
   ============================================================ */
.venue{ text-align:center; }
.venue__card{
  margin-top: 34px;
  padding: 26px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(158deg, #FBF2E0 0%, #F3E3C8 48%, #EFDCBE 100%);
  box-shadow:
    0 26px 55px -24px rgba(38,16,4,.80),
    0 6px 18px -10px rgba(38,16,4,.45),
    inset 0 0 0 1px rgba(255,255,255,.55);
  position: relative;
}
.venue__card::after{                 /* the passe-partout hairline */
  content:"";
  position:absolute; inset:7px;
  border: 1px solid rgba(180,140,72,.42);
  border-radius: 13px;
  pointer-events:none;
}
.venue__crest{
  display:block; width:9px; height:9px; margin: 0 auto 12px;
  transform: rotate(45deg);
  background: var(--metal);
  box-shadow: 0 0 12px rgba(200,164,92,.7);
}
.venue__name{
  font-family: var(--font-display);
  font-size: 1.7rem; line-height:1.2;
  color: var(--accent);
}
.venue__rule{
  display:block; width:60px; height:1px; margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--metal), transparent);
}
.venue__address{
  color: var(--ink-soft);
  font-size: .95rem; line-height:1.55;
  margin-bottom: 20px;
  padding: 0 8px;
}

.venue__mapwrap{ position: relative; border-radius: 10px; overflow: hidden; }
.venue__map{
  width:100%; aspect-ratio: 1 / 1;
  background: #EFE0C4;
}
.venue__map iframe{
  width:100%; height:100%; border:0; display:block;
  /* warms Google's grey/white/green into the site's sandstone palette.
     Google's own "Open in Maps" chip and logo stay visible on purpose —
     their terms require the attribution to remain. */
  filter: sepia(.60) saturate(1.18) hue-rotate(-12deg) brightness(1.02) contrast(.93);
}
/* inner shadow + gold hairline so the map reads as inset into the card,
   not as a rectangle pasted on top of it */
.venue__mapedge{
  position:absolute; inset:0; pointer-events:none;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(180,140,72,.55),
    inset 0 8px 22px -12px rgba(58,29,14,.55);
}

.venue__btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(138,43,30,.35);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(138,43,30,.06), rgba(138,43,30,.13));
  color: var(--accent);
  font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  transition: background 260ms ease, transform 180ms ease;
}
.venue__btn:hover{ background: linear-gradient(180deg, rgba(138,43,30,.12), rgba(138,43,30,.20)); }
.venue__btn:active{ transform: scale(.985); }
.venue__btn svg{ width:16px; height:16px; flex:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ text-align:center; padding-bottom: 90px; }
.footer__line{
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color:#FFF4E2;
  text-shadow: 0 2px 14px rgba(40,16,6,.8);
}
.footer__hashtag{
  margin-top: 8px; color:#E8C98C; letter-spacing:.08em; font-size:.85rem;
  text-shadow: 0 2px 12px rgba(40,16,6,.8);
}

/* ============================================================
   SOUND TOGGLE
   ============================================================ */
.sound-toggle{
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  width: 46px; height: 46px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(43,22,15,.75);
  color: #F6E9D8;
  border: 1px solid rgba(246,233,216,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor:pointer;
  opacity: 0; pointer-events:none;
  transition: opacity 500ms ease;
}
.sound-toggle.is-active{ opacity: 1; pointer-events:auto; }
.sound-toggle svg{ width:22px; height:22px; }
.sound-toggle__off{ display:none; }
.sound-toggle.is-muted .sound-toggle__on{ display:none; }
.sound-toggle.is-muted .sound-toggle__off{ display:block; }