/* ===========================================================
   LA MUSIC · E-LIBRARY — art direction
   Giấy ấm · serif cổ điển · vàng đồng · nét dây đàn
   =========================================================== */

:root{
  --paper:      #F2EBDF;
  --paper-2:    #EAE0CE;
  --paper-3:    #E0D3BC;
  --ink:        #191411;
  --ink-2:      #4A3E35;
  --ink-3:      #7B6B5C;
  --wine:       #6E2B24;
  --wine-lt:    #8E3A30;
  --gold:       #A9822F;
  --gold-lt:    #C9A54B;
  --forest:     #2E3A32;
  --night:      #14100E;
  --line:       rgba(25,20,17,.14);
  --line-2:     rgba(25,20,17,.08);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-h: 66px;
  --maxw: 720px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ margin:0; padding:0; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* hạt giấy */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- typography ---------- */
.display{
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.kicker{
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker.dim{ color: var(--ink-3); }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* ---------- app shell ---------- */
#app{ max-width: var(--maxw); margin:0 auto; padding-bottom: calc(var(--nav-h) + 34px); position:relative; }
.view{ animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.pad{ padding: 0 22px; }
.section{ padding: 40px 22px; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:12px;
  height:54px; padding:0 16px;
  background: rgba(242,235,223,.86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-2);
}
.topbar.hidden{ display:none; }
.back{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:15px;
  transition:.2s;
}
.back:active{ background:var(--paper-3); }
.topbar .tb-title{
  font-family:var(--serif); font-size:19px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background: var(--night);
  color: var(--paper);
  padding: 54px 24px 40px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(169,130,47,.22), transparent 62%),
    radial-gradient(90% 60% at 12% 100%, rgba(110,43,36,.35), transparent 70%);
}
.strings{ position:absolute; inset:0; opacity:.5; }
.strings i{
  position:absolute; top:-10%; bottom:-10%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,165,75,.55),transparent);
  animation: vib 5s ease-in-out infinite;
}
@keyframes vib{ 0%,100%{ transform:scaleX(1); opacity:.35 } 50%{ transform:scaleX(2.4); opacity:.8 } }

.hero-in{ position:relative; z-index:2; }
.hero .brand{
  display:flex; align-items:center; gap:10px; margin-bottom:36px;
}
.brand-mark{
  width:30px; height:30px; border:1px solid var(--gold-lt); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:16px; color:var(--gold-lt); padding-bottom:2px;
}
.brand-name{ font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:rgba(242,235,223,.72); }

.hero .edition{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt); }
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size: clamp(52px, 17vw, 88px);
  line-height:.92; margin:14px 0 4px; letter-spacing:-.02em;
}
.hero h1 em{ font-style:italic; color:var(--gold-lt); }
.hero .ens{
  font-family:var(--serif); font-style:italic; font-size:19px;
  color:rgba(242,235,223,.7); margin-bottom:30px;
}
.hero-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(242,235,223,.14); border:1px solid rgba(242,235,223,.14);
}
.hero-meta div{ background:var(--night); padding:13px 14px; }
.hero-meta span{ display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,235,223,.45); margin-bottom:3px;}
.hero-meta b{ font-family:var(--serif); font-size:17px; font-weight:500; letter-spacing:.01em; }

.scroll-cue{
  margin-top:30px; display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,235,223,.5);
}
.scroll-cue i{ flex:1; height:1px; background:rgba(242,235,223,.22); }

/* ---------- welcome note ---------- */
.welcome{
  padding:38px 24px 34px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--paper-2), var(--paper));
}
.welcome p{
  font-family:var(--serif); font-size:21px; line-height:1.52; margin:14px 0 0; color:var(--ink-2);
}
.welcome p::first-letter{
  font-size:52px; float:left; line-height:.82; padding:6px 10px 0 0; color:var(--wine); font-weight:500;
}

/* ---------- progress ---------- */
.progress{
  display:flex; align-items:center; gap:14px;
  margin:26px 22px 0; padding:14px 16px;
  border:1px solid var(--line); background:rgba(255,255,255,.4);
}
.ring{ width:38px; height:38px; flex:none; }
.progress .pt{ font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.progress .pt b{ font-weight:500; color:var(--ink); }

/* ---------- section head ---------- */
.shead{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.shead h2{ font-family:var(--serif); font-weight:400; font-size:32px; margin:0; letter-spacing:-.01em; }
.rule{ height:1px; background:var(--line); flex:1; }
.slead{ font-size:13.5px; color:var(--ink-3); margin:6px 0 26px; max-width:52ch; }

/* ---------- timeline ---------- */
.tl{ position:relative; padding-left:6px; }
.tl::before{
  content:""; position:absolute; left:44px; top:8px; bottom:20px; width:1px;
  background:linear-gradient(180deg,var(--gold) 0%, var(--line) 12%, var(--line) 88%, transparent);
}
.tlitem{
  position:relative; display:grid; grid-template-columns:44px 1fr; gap:18px;
  padding:0 0 22px; text-align:left; width:100%;
  background:none; border:0; color:inherit;
}
.tltime{ font-size:11px; letter-spacing:.08em; color:var(--ink-3); padding-top:15px; font-variant-numeric:tabular-nums; }
.tldot{
  position:absolute; left:38px; top:20px; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:1px solid var(--gold); z-index:2; transition:.3s;
}
.tlitem.read .tldot{ background:var(--gold); box-shadow:0 0 0 3px rgba(169,130,47,.16); }
.tlcard{
  border:1px solid var(--line); background:rgba(255,255,255,.46);
  padding:16px 16px 15px; transition:.25s;
}
.tlitem:active .tlcard{ background:rgba(255,255,255,.85); transform:translateY(-1px); }
.tlno{
  font-family:var(--serif); font-size:12px; color:var(--gold); letter-spacing:.16em;
}
.tlcard h3{ font-family:var(--serif); font-weight:500; font-size:24px; margin:2px 0 3px; line-height:1.15; }
.tlcomposer{ font-size:12.5px; color:var(--ink-2); }
.tlcomposer em{ font-family:var(--serif); font-size:14px; }
.tltldr{ font-size:13px; color:var(--ink-3); margin-top:9px; line-height:1.6; border-top:1px solid var(--line-2); padding-top:9px;}
.tlfoot{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; align-items:center; }

.chip{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); padding:3px 8px; color:var(--ink-3); background:rgba(255,255,255,.5);
}
.chip.gold{ border-color:rgba(169,130,47,.45); color:var(--gold); }
.chip.solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.tlbreak{
  grid-column:1/-1; margin-left:62px; margin-bottom:22px;
  border:1px dashed rgba(25,20,17,.24); padding:14px 16px; background:transparent;
}
.tlbreak h4{ font-family:var(--serif); font-style:italic; font-size:20px; margin:0 0 4px; font-weight:400; }
.tlbreak p{ margin:0; font-size:12.5px; color:var(--ink-3); }

/* ---------- talk card ---------- */
.talkcard{
  margin:8px 22px 0; padding:24px 22px; position:relative;
  background:var(--forest); color:var(--paper); overflow:hidden;
}
.talkcard::before{
  content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px;
  border:1px solid rgba(201,165,75,.28); border-radius:50%;
}
.talkcard .kicker{ color:var(--gold-lt); }
.talkq{ font-family:var(--serif); font-size:25px; line-height:1.3; margin:12px 0 18px; min-height:66px; }
.shuffle{
  background:transparent; border:1px solid rgba(242,235,223,.4); color:var(--paper);
  padding:9px 16px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.shuffle:active{ background:rgba(242,235,223,.14); }

/* ---------- detail page ---------- */
.dhead{ padding:34px 24px 26px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--paper-2),var(--paper)); }
.dhead .dno{ font-family:var(--serif); font-size:13px; letter-spacing:.2em; color:var(--gold); }
.dhead h1{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,10vw,52px); line-height:1.02; margin:8px 0 6px; letter-spacing:-.02em; }
.dhead .orig{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-3); }
.dhead .byline{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.dhead .byline b{ font-family:var(--serif); font-size:22px; font-weight:500; display:block; }
.dhead .byline span{ font-size:12px; color:var(--ink-3); }
.dmeta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

.tldr{
  margin:0 22px; padding:20px 20px; border-left:2px solid var(--wine);
  background:rgba(110,43,36,.05);
  font-family:var(--serif); font-size:21px; line-height:1.46; color:var(--ink);
}

.body{ padding:30px 24px 6px; }
.body h3{
  font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.2;
  margin:34px 0 10px; letter-spacing:-.01em;
}
.body h3:first-child{ margin-top:0; }
.body p{ margin:0; font-size:15.5px; line-height:1.82; color:var(--ink-2); }

.box{
  margin:30px 22px; border:1px solid var(--line); background:rgba(255,255,255,.5);
}
.box-h{
  padding:13px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.5);
}
.box-b{ padding:16px 18px; }
.box-b p{ margin:0; font-size:14.5px; color:var(--ink-2); }
.ol{ margin:0; padding:0; list-style:none; counter-reset:l; }
.ol li{
  counter-increment:l; position:relative; padding-left:30px; font-size:14.5px;
  line-height:1.68; color:var(--ink-2); margin-bottom:13px;
}
.ol li:last-child{ margin-bottom:0; }
.ol li::before{
  content:counter(l); position:absolute; left:0; top:1px;
  font-family:var(--serif); font-size:13px; color:var(--gold);
  width:19px; height:19px; border:1px solid rgba(169,130,47,.4); border-radius:50%;
  display:grid; place-items:center;
}
.ul{ margin:0; padding:0; list-style:none; }
.ul li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.7; color:var(--ink-2); margin-bottom:9px; }
.ul li:last-child{ margin-bottom:0; }
.ul li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:1px; background:var(--gold); }

.specs{ width:100%; border-collapse:collapse; }
.specs tr{ border-bottom:1px solid var(--line-2); }
.specs tr:last-child{ border-bottom:0; }
.specs td{ padding:10px 0; font-size:14px; vertical-align:top; color:var(--ink-2); }
.specs td:first-child{ width:38%; color:var(--ink-3); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding-right:14px; }

.pull{
  margin:34px 22px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.42; color:var(--wine); text-align:center;
}

/* ---------- stage 3D ---------- */
.stagewrap{ padding:0 16px 8px; }
.stage3d{ perspective:1000px; perspective-origin:50% 32%; margin:-26px 0 -30px; }
.plane{
  position:relative; width:100%; aspect-ratio:1/.82;
  transform-style:preserve-3d;
  transform:rotateX(56deg) scale(.94);
  transition:transform .8s cubic-bezier(.3,.8,.3,1);
  background:
    linear-gradient(180deg, rgba(46,58,50,.95), rgba(20,16,14,.98));
  border:1px solid rgba(169,130,47,.34);
  box-shadow:0 40px 60px -30px rgba(0,0,0,.5);
}
.plane.top{ transform:rotateX(0deg) scale(.98); }
.plane .arc{
  position:absolute; border:1px solid rgba(201,165,75,.15); border-radius:50%;
  left:50%; transform:translateX(-50%);
}
.plane .grain{
  position:absolute; inset:0; opacity:.16;
  background:repeating-linear-gradient(90deg, transparent 0 7px, rgba(201,165,75,.25) 7px 8px);
}
.front-label{
  position:absolute; left:0; right:0; bottom:6px; text-align:center;
  font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:rgba(242,235,223,.4);
}
.mk{
  position:absolute; transform-style:preserve-3d;
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotateX(-56deg);
  transition:transform .8s cubic-bezier(.3,.8,.3,1);
  background:none; border:0; padding:0; display:grid; justify-items:center; gap:4px;
}
.plane.top .mk{ transform:translate(-50%,-50%) rotateX(0deg); }
.mk .lb{
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); background:rgba(20,16,14,.86); border:1px solid rgba(201,165,75,.4);
  padding:2px 7px; white-space:nowrap;
}
.mk .dot{
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%, var(--gold-lt), var(--wine));
  border:1px solid rgba(242,235,223,.55);
  display:grid; place-items:center; color:#2a1204;
  animation: pulse 3.6s ease-out infinite;
}
.mk .dot svg{ width:16px; height:16px; }
.mk .stem{ width:1px; height:12px; background:linear-gradient(180deg,rgba(201,165,75,.7),rgba(201,165,75,0)); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(201,165,75,.4);} 70%{ box-shadow:0 0 0 11px rgba(201,165,75,0);} 100%{ box-shadow:0 0 0 0 rgba(201,165,75,0);} }
.mk:active .dot{ transform:scale(1.12); }

.stagectl{ display:flex; gap:8px; justify-content:center; margin-top:22px; }
.gbtn{
  border:1px solid var(--line); background:rgba(255,255,255,.5); color:var(--ink-2);
  padding:8px 14px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
}
.gbtn.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.seatlist{ margin-top:14px; }
.seatrow{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line-2);
  padding:14px 0; color:inherit;
}
.seatrow:last-child{ border-bottom:0; }
.seatrow .ic{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.5);
}
.seatrow .ic svg{ width:19px; height:19px; }
.seatrow b{ font-family:var(--serif); font-size:19px; font-weight:500; display:block; line-height:1.2;}
.seatrow span{ font-size:12px; color:var(--ink-3); }
.seatrow .arw{ color:var(--gold); font-size:16px; }

/* ---------- artist ---------- */
.agrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acard{
  border:1px solid var(--line); background:rgba(255,255,255,.46); padding:18px 16px 16px;
  text-align:left; color:inherit; display:block; width:100%;
}
.acard:active{ background:rgba(255,255,255,.85); }
.portrait{
  width:58px; height:58px; border-radius:50%; margin-bottom:13px;
  background:linear-gradient(145deg,var(--paper-3),var(--paper-2));
  border:1px solid rgba(169,130,47,.5);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:22px; color:var(--wine);
  box-shadow:inset 0 0 0 4px rgba(242,235,223,.7);
}
.acard b{ font-family:var(--serif); font-size:20px; font-weight:500; display:block; line-height:1.18; }
.acard span{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

.ahero{ padding:36px 24px 28px; background:linear-gradient(180deg,var(--paper-2),var(--paper)); border-bottom:1px solid var(--line); text-align:center; }
.ahero .portrait{ width:88px; height:88px; font-size:34px; margin:0 auto 18px; }
.ahero h1{ font-family:var(--serif); font-weight:400; font-size:40px; margin:0 0 4px; }
.ahero .role{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.ahero .since{ font-size:12.5px; color:var(--ink-3); margin-top:8px; }

/* ---------- pillars / La ---------- */
.pillar{ border:1px solid var(--line); background:rgba(255,255,255,.46); padding:22px 20px; margin-bottom:16px; }
.pillar .tag{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.pillar h3{ font-family:var(--serif); font-weight:400; font-size:28px; margin:6px 0 8px; line-height:1.12; }
.pillar p.lead{ font-size:14px; color:var(--ink-2); margin:0 0 15px; line-height:1.72; }

.btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:12px 20px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.btn:active{ background:var(--wine); border-color:var(--wine); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:#1a1408; }
.btn.wide{ width:100%; justify-content:center; }

/* ---------- form ---------- */
.form{ padding:0 22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 14px; font-family:var(--sans); font-size:15px; font-weight:300;
  background:rgba(255,255,255,.62); border:1px solid var(--line); color:var(--ink);
  border-radius:0; -webkit-appearance:none;
}
.field textarea{ min-height:110px; resize:vertical; line-height:1.65; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); background:#fff; }
.hint{ font-size:11.5px; color:var(--ink-3); margin-top:6px; }

.opts{ display:grid; gap:9px; }
.opt{
  display:flex; gap:11px; align-items:flex-start; padding:13px 14px;
  border:1px solid var(--line); background:rgba(255,255,255,.5); text-align:left; color:inherit; width:100%;
}
.opt.on{ border-color:var(--gold); background:rgba(169,130,47,.09); }
.opt .bx{ width:15px; height:15px; border:1px solid var(--ink-3); border-radius:50%; flex:none; margin-top:4px; }
.opt.on .bx{ border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px var(--paper); }
.opt b{ font-weight:400; font-size:14.5px; display:block; line-height:1.4; }
.opt small{ font-size:11.5px; color:var(--ink-3); }

.ok{
  margin:22px; padding:22px; border:1px solid rgba(169,130,47,.5); background:rgba(169,130,47,.09);
  font-family:var(--serif); font-size:19px; line-height:1.5; text-align:center;
}

/* ---------- footer ---------- */
.foot{ padding:40px 24px 30px; border-top:1px solid var(--line); text-align:center; }
.foot .brand-mark{ margin:0 auto 12px; border-color:var(--gold); color:var(--gold); }
.foot p{ font-size:12px; color:var(--ink-3); margin:4px 0; }
.foot a{ color:var(--wine); text-decoration:none; border-bottom:1px solid rgba(110,43,36,.3); }

/* ---------- bottom nav ---------- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  max-width:var(--maxw); margin:0 auto;
  height:var(--nav-h); padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(242,235,223,.93); backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid var(--line);
}
.nav button{
  background:none; border:0; display:grid; place-items:center; gap:4px; color:var(--ink-3);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; padding-top:9px;
}
.nav button svg{ width:20px; height:20px; }
.nav button.on{ color:var(--wine); }
.nav button.on svg{ stroke:var(--wine); }

/* ---------- misc ---------- */
.sticky-cta{ position:sticky; bottom:calc(var(--nav-h) + 12px); z-index:50; padding:0 22px; }
.mono{ font-variant-numeric:tabular-nums; }
.center{ text-align:center; }
.mt24{ margin-top:24px; }
.hr{ height:1px; background:var(--line); margin:34px 22px; }

@media (min-width:640px){
  .hero{ padding:70px 40px 52px; }
  .section{ padding:52px 40px; }
  .pad,.form,.tldr,.box,.progress,.talkcard,.pull,.hr,.sticky-cta{ padding-left:40px; padding-right:40px; }
  .box,.tldr,.talkcard,.progress,.pull,.hr{ margin-left:40px; margin-right:40px; padding-left:22px; padding-right:22px; }
  .body,.dhead,.welcome,.ahero,.stagewrap,.foot{ padding-left:40px; padding-right:40px; }
}