/* Patrick Daether — paper-cut workspace diorama
   Colour tokens live in scene.js (PALETTE) and are injected as custom properties. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- palette (day / night) ---------- */

:root {
  --sky: #f3e8d2;
  --sky2: #f1d9b1;
  --sun: #d9a45b;
  --sun2: #c8642d;
  --sun3: #e6b872;
  --moon: #f3e8d2;
  --moon2: #e2d5b6;
  --star: #f3e8d2;
  --cloud: #fbf6ea;
  --cloud2: #ecdfc4;
  --far: #c6d5bb;
  --far2: #b3c8aa;
  --city: #a9bfab;
  --city2: #95af9c;
  --win: #c9d8c3;
  --lit: #c9d8c3;
  --near: #9bb89b;
  --near2: #5f7f5b;
  --tree: #5f7f5b;
  --tree2: #4b6947;
  --wall: #274e52;
  --wall2: #1f4347;
  --frame: #efe3c8;
  --frame2: #d9c8a3;
  --sill: #efe3c8;
  --sill2: #cbb891;
  --pot: #c8642d;
  --pot2: #a8502a;
  --leaf: #5f7f5b;
  --leaf2: #9bb89b;
  --desk: #d9a45b;
  --desk2: #e7bd7e;
  --desk3: #c8913f;
  --lamp: #c8642d;
  --lamp2: #a44f24;
  --metal: #274e52;
  --bulb: #f3e8d2;
  --mug: #f3e8d2;
  --mug2: #274e52;
  --coffee: #6b4226;
  --steam: #fbf6ea;
  --laptop: #e9ddc4;
  --laptop2: #d5c6a7;
  --laptop3: #bca985;
  --bezel: #274e52;
  --screen: #eef0dc;
  --codebar: #dde2c9;
  --code1: #c8642d;
  --code2: #5f7f5b;
  --code3: #d9a45b;
  --code4: #274e52;
  --phone: #274e52;
  --phone2: #173538;
  --pscreen: #1c3d41;
  --note: #fbf5e7;
  --note2: #bfd2bd;
  --bind: #c8642d;
  --ring: #274e52;
  --ink2: #274e52;
  --check: #c8642d;
  --sheet: #f7efdd;
  --sheet2: #e9ddc3;
  --pen1: #d9a45b;
  --pen2: #274e52;
  --pen3: #9bb89b;
  --wood: #f0d3a4;
  --lead: #33403f;
  --eraser: #e0907c;
  --ferrule: #cfc7b1;
  --tag: #f8f0de;
  --tag2: #e8dabd;
  --xtag: #d9a45b;
  --intag: #9bb89b;
  --ink: #274e52;
  --accent: #c8642d;
  --string: #7a6247;
  --focus: #c8642d;
  --plit: #cfe6d6;
  --shadow: rgba(22, 36, 34, .34);
  --shadow-soft: rgba(22, 36, 34, .16);
}

html.night {
  --sky: #1c2150;
  --sky2: #283069;
  --sun: #c8642d;
  --sun2: #9c4a2a;
  --sun3: #d27a3e;
  --moon: #f3e8d2;
  --moon2: #d9ccab;
  --star: #f6ecd4;
  --cloud: #3b437f;
  --cloud2: #303870;
  --far: #353f79;
  --far2: #2e3771;
  --city: #252c5e;
  --city2: #20265a;
  --win: #2a3166;
  --lit: #f2c46b;
  --near: #262e5c;
  --near2: #1d2350;
  --tree: #1a2049;
  --tree2: #161b40;
  --wall: #191d3e;
  --wall2: #141733;
  --frame: #3b4480;
  --frame2: #303870;
  --sill: #3b4480;
  --sill2: #282f63;
  --pot: #6a3f5c;
  --pot2: #56324f;
  --leaf: #2b4b5a;
  --leaf2: #3b6270;
  --desk: #3a3668;
  --desk2: #4a457e;
  --desk3: #322e60;
  --lamp: #7b4659;
  --lamp2: #5f3549;
  --metal: #2b305f;
  --bulb: #fff1c4;
  --mug: #a9a4c6;
  --mug2: #3b4478;
  --coffee: #3b2a3c;
  --steam: #8f8cb4;
  --laptop: #5d6196;
  --laptop2: #4c5086;
  --laptop3: #3e4277;
  --bezel: #12163a;
  --screen: #1d3453;
  --codebar: #284464;
  --code1: #f29a62;
  --code2: #9fd3a4;
  --code3: #f5c56e;
  --code4: #9cc9d6;
  --phone: #232857;
  --phone2: #10132f;
  --pscreen: #161a3f;
  --note: #a8a5c6;
  --note2: #8987ae;
  --bind: #6a3f5c;
  --ring: #2b305f;
  --ink2: #3b4478;
  --check: #9a4f5e;
  --sheet: #9a98bc;
  --sheet2: #8a88ae;
  --pen1: #7d6a80;
  --pen2: #2d3563;
  --pen3: #4b6079;
  --wood: #9a8ca0;
  --lead: #1b1d36;
  --eraser: #7a4d68;
  --ferrule: #6a6d92;
  --tag: #e4d9c1;
  --tag2: #cbbfa5;
  --xtag: #c29558;
  --intag: #8fae95;
  --ink: #1e2b4c;
  --accent: #b85c33;
  --string: #a39cc9;
  --focus: #f2c46b;
  --plit: #bfe0d4;
  --shadow: rgba(4, 5, 22, .55);
  --shadow-soft: rgba(4, 5, 22, .4);
}

.f-sky { fill: var(--sky); }
.f-sky2 { fill: var(--sky2); }
.f-sun { fill: var(--sun); }
.f-sun2 { fill: var(--sun2); }
.f-sun3 { fill: var(--sun3); }
.f-moon { fill: var(--moon); }
.f-moon2 { fill: var(--moon2); }
.f-star { fill: var(--star); }
.f-cloud { fill: var(--cloud); }
.f-cloud2 { fill: var(--cloud2); }
.f-far { fill: var(--far); }
.f-far2 { fill: var(--far2); }
.f-city { fill: var(--city); }
.f-city2 { fill: var(--city2); }
.f-win { fill: var(--win); }
.f-lit { fill: var(--lit); }
.f-near { fill: var(--near); }
.f-near2 { fill: var(--near2); }
.f-tree { fill: var(--tree); }
.f-tree2 { fill: var(--tree2); }
.f-wall { fill: var(--wall); }
.f-wall2 { fill: var(--wall2); }
.f-frame { fill: var(--frame); }
.f-frame2 { fill: var(--frame2); }
.f-sill { fill: var(--sill); }
.f-sill2 { fill: var(--sill2); }
.f-pot { fill: var(--pot); }
.f-pot2 { fill: var(--pot2); }
.f-leaf { fill: var(--leaf); }
.f-leaf2 { fill: var(--leaf2); }
.f-desk { fill: var(--desk); }
.f-desk2 { fill: var(--desk2); }
.f-desk3 { fill: var(--desk3); }
.f-lamp { fill: var(--lamp); }
.f-lamp2 { fill: var(--lamp2); }
.f-metal { fill: var(--metal); }
.f-bulb { fill: var(--bulb); }
.f-mug { fill: var(--mug); }
.f-mug2 { fill: var(--mug2); }
.f-coffee { fill: var(--coffee); }
.f-steam { fill: var(--steam); }
.f-laptop { fill: var(--laptop); }
.f-laptop2 { fill: var(--laptop2); }
.f-laptop3 { fill: var(--laptop3); }
.f-bezel { fill: var(--bezel); }
.f-screen { fill: var(--screen); }
.f-codebar { fill: var(--codebar); }
.f-code1 { fill: var(--code1); }
.f-code2 { fill: var(--code2); }
.f-code3 { fill: var(--code3); }
.f-code4 { fill: var(--code4); }
.f-phone { fill: var(--phone); }
.f-phone2 { fill: var(--phone2); }
.f-pscreen { fill: var(--pscreen); }
.f-note { fill: var(--note); }
.f-note2 { fill: var(--note2); }
.f-bind { fill: var(--bind); }
.f-ring { fill: var(--ring); }
.f-ink2 { fill: var(--ink2); }
.f-check { fill: var(--check); }
.f-sheet { fill: var(--sheet); }
.f-sheet2 { fill: var(--sheet2); }
.f-pen1 { fill: var(--pen1); }
.f-pen2 { fill: var(--pen2); }
.f-pen3 { fill: var(--pen3); }
.f-wood { fill: var(--wood); }
.f-lead { fill: var(--lead); }
.f-eraser { fill: var(--eraser); }
.f-ferrule { fill: var(--ferrule); }
.f-tag { fill: var(--tag); }
.f-tag2 { fill: var(--tag2); }
.f-xtag { fill: var(--xtag); }
.f-intag { fill: var(--intag); }
.f-hi { fill: rgba(255, 255, 255, .22); }
.f-lo { fill: rgba(0, 0, 0, .12); }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--wall, #274e52);
  transition: background-color 1.4s ease .5s;
}

body {
  font-family: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  color: var(--ink, #274e52);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- stage & layers ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .8s ease;
}
html.js:not(.ready) .stage { opacity: 0; }

.layer {
  --td: calc(var(--i, 0) * 95ms);
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.layer > svg,
.layer .cut { position: absolute; overflow: visible; }

#L-sky    { --i: 0; z-index: 1; }
#L-orbs   { --i: 0; z-index: 2; }
#L-clouds { --i: 1; z-index: 3; filter: drop-shadow(0 3px 3px var(--shadow-soft)); }
#L-far    { --i: 1; z-index: 4; filter: drop-shadow(0 2px 4px var(--shadow-soft)); }
#L-city   { --i: 2; z-index: 5; filter: drop-shadow(1px 3px 4px var(--shadow-soft)); }
#L-near   { --i: 3; z-index: 6; filter: drop-shadow(1px 4px 6px var(--shadow)); }
#L-wall   { --i: 4; z-index: 7; filter: drop-shadow(3px 7px 9px var(--shadow)); }
#L-tags   { --i: 5; z-index: 8; }
#L-desk   { --i: 5; z-index: 9; filter: drop-shadow(3px 6px 8px var(--shadow)); }
#L-glow   { --i: 6; z-index: 10; mix-blend-mode: screen; }
#L-laptop { --i: 6; z-index: 11; filter: drop-shadow(4px 8px 9px var(--shadow)); }
#L-phone  { --i: 7; z-index: 12; }
#L-front  { --i: 8; z-index: 13; filter: drop-shadow(4px 9px 11px var(--shadow)); }
#L-glow2  { --i: 8; z-index: 14; mix-blend-mode: screen; }

/* every cut piece recolours; the delay staggers from the sky forward */
.cut path,
.tag-paper path {
  transition: fill 1.3s cubic-bezier(.45, 0, .3, 1) var(--td);
}

.root-still *,
.root-still *::before,
.root-still *::after { transition: none !important; animation-play-state: paused !important; }

/* ---------- sky furniture ---------- */

.orb { position: absolute; will-change: transform; }

.sun {
  transform: translateY(0);
  transition: transform 1.9s cubic-bezier(.55, 0, .7, 1) .75s;
}
.night .sun {
  transform: translateY(var(--set));
  transition-delay: 0s;
}

.moon {
  transform: translateY(var(--set));
  transition: transform 1.3s cubic-bezier(.4, 0, .9, .6) 0s;
  filter: drop-shadow(0 0 0 transparent);
}
.night .moon {
  transform: translateY(0);
  transition: transform 2s cubic-bezier(.2, .6, .3, 1) 1s, filter 1s ease 2.4s;
  filter: drop-shadow(0 0 14px rgba(243, 232, 210, .45));
}

.cut .star {
  opacity: 0;
  transition: opacity .8s ease var(--sd, 0s);
}
.night .cut .star {
  opacity: 1;
  transition-delay: calc(1.6s + var(--sd, 0s));
  animation: twinkle var(--sp, 3.4s) ease-in-out calc(2.4s + var(--sd, 0s)) infinite;
}
@keyframes twinkle { 50% { opacity: .35; } }

.cloud {
  position: absolute;
  left: 0;
  will-change: transform;
  animation: drift var(--dur, 90s) linear var(--delay, 0s) infinite;
}
@keyframes drift {
  from { transform: translateX(var(--x0)); }
  to   { transform: translateX(var(--x1)); }
}

.f-lit { transition-delay: calc(var(--td) + var(--wd, 0s)) !important; }

/* ---------- desk bits ---------- */

.steam { position: absolute; }
.steam path { animation: steam 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.steam path:nth-child(2) { animation-delay: -2.7s; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(8%) scaleY(.7); }
  30%  { opacity: .75; }
  100% { opacity: 0; transform: translateY(-22%) scaleY(1.05); }
}

.lamp-hit { pointer-events: all; cursor: pointer; fill: transparent; }

.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* lamp + screen light, blended with `screen` */
.g-lamp { opacity: 0; }
.night .g-lamp { animation: lampOn .9s linear 1.25s both; }
@keyframes lampOn {
  0%   { opacity: 0; }
  12%  { opacity: .7; }
  20%  { opacity: .1; }
  34%  { opacity: .85; }
  44%  { opacity: .35; }
  60%, 100% { opacity: 1; }
}
.f-bulb { transition-duration: .15s !important; transition-delay: 0s !important; }
.night .f-bulb { transition-delay: 1.37s !important; }

.g-screen { opacity: 0; transition: opacity 1.2s ease .2s; }
.night .g-screen { opacity: 1; transition-delay: 1s; }

/* ---------- phone ---------- */

.phone {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform;
  border-radius: 12px;
  outline-offset: 6px;
}
.phone svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 4px 4px var(--shadow)); }
.phone:focus-visible { outline: 2px dashed var(--focus); }
.phone .notif { opacity: 0; transition: opacity .25s ease; }
.phone.buzz .notif { opacity: 1; }
.phone .f-pscreen { transition: fill .25s ease !important; }
.phone.buzz .f-pscreen { fill: var(--plit); }

.phone-shadow {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--shadow), transparent);
  will-change: transform, opacity;
}

/* ---------- laptop typing ---------- */

.laptop-hit {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 10px;
}
.laptop-hit:focus-visible { outline: 2px dashed var(--focus); outline-offset: 4px; }
.typer .tcur { opacity: 0; }
.typing .typer .tcur { opacity: 1; }
.typing .cursor-home { visibility: hidden; }
.typing .cut .key { transition: fill .12s ease 0s; }
.cut .key.down { fill: var(--bezel); transition: none; }

/* ---------- pencils ---------- */

.pencil {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 0 50%;
  will-change: transform;
  border-radius: 6px;
}
.pencil:focus-visible { outline: 2px dashed var(--focus); outline-offset: 2px; }

/* ---------- loose sheet ---------- */

.flutter {
  position: absolute;
  left: 0;
  top: 0;
  transform: var(--base);
  transform-origin: 50% 100%;
  filter: drop-shadow(2px 3px 3px var(--shadow));
}
.flutter.go { animation: flutter 3.4s cubic-bezier(.35, 0, .3, 1) 1; }
@keyframes flutter {
  0%   { transform: var(--base); filter: drop-shadow(2px 3px 3px var(--shadow)); }
  16%  { transform: var(--base) perspective(500px) translateY(-7px) rotateX(34deg) rotate(3deg); filter: drop-shadow(5px 14px 9px var(--shadow)); }
  34%  { transform: var(--base) perspective(500px) translateY(-2px) rotateX(9deg) rotate(-1.6deg); }
  52%  { transform: var(--base) perspective(500px) translateY(-6px) rotateX(24deg) rotate(2.2deg); filter: drop-shadow(4px 11px 8px var(--shadow)); }
  74%  { transform: var(--base) perspective(500px) translateY(-1px) rotateX(5deg) rotate(-.6deg); }
  100% { transform: var(--base); filter: drop-shadow(2px 3px 3px var(--shadow)); }
}

/* ---------- hanging tags ---------- */

.rig {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  color: inherit;
  text-decoration: none;
  outline: none;
  will-change: transform;
}

.string {
  position: absolute;
  left: -.75px;
  top: 0;
  width: 1.5px;
  background: var(--string);
  border-radius: 1px;
  transition: background-color 1.3s ease var(--td);
}

.tag {
  position: absolute;
  display: block;
  pointer-events: auto;
  filter: drop-shadow(2px 7px 7px var(--shadow));
}
.rig-social .tag { cursor: pointer; }
.rig-title { z-index: 3; }
.rig-x { z-index: 2; }
.rig-in { z-index: 1; }
.rig-home { z-index: 2; }

.tag-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tag-body {
  position: relative;
  text-align: center;
}

.tag-title h1 {
  margin: 0;
  font-weight: 600;
  font-size: var(--h1, 34px);
  line-height: 1.04;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 96, 'SOFT' 50, 'WONK' 0;
  color: var(--ink);
  transition: color 1.3s ease var(--td);
}
.tag-title h1::after {
  content: '';
  display: block;
  width: 2.2em;
  height: 3px;
  margin: .42em auto .5em;
  border-radius: 2px;
  background: var(--accent);
  transition: background-color 1.3s ease var(--td);
}
.tag-title p {
  margin: 0;
  font-size: var(--p, 15px);
  line-height: 1.45;
  font-weight: 400;
  font-variation-settings: 'opsz' 14, 'SOFT' 100;
  color: var(--ink);
  text-wrap: pretty;
  transition: color 1.3s ease var(--td);
}

.tag-social .logo {
  position: absolute;
  left: 50%;
  width: 44%;
  height: auto;
  transform: translateX(-50%);
  fill: var(--ink);
  transition: fill 1.3s ease var(--td);
}

.tag-social .tag-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
  color: var(--ink);
  transition: color 1.3s ease var(--td);
}
.rig-social:focus-visible .tag {
  outline: 2px dashed var(--focus);
  outline-offset: 5px;
  border-radius: 6px;
}

/* ---------- vignette & grain ---------- */

.vignette {
  position: absolute;
  inset: -10%;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse 75% 70% at var(--vx, 30%) var(--vy, 70%), transparent 25%, rgba(10, 12, 40, .55) 100%);
  transition: opacity 1.6s ease .4s;
}
.night .vignette { opacity: 1; transition-delay: 1s; }

.grain {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .7;
  background-size: 320px 320px;
}
.night .grain { opacity: .9; }

/* ---------- day / night toggle ---------- */

.daynight {
  position: fixed;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 8px;
  border: 0;
  border-radius: 999px;
  font: 600 13px/1 'Fraunces', Georgia, serif;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--tag);
  box-shadow: 2px 5px 9px var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, .04);
  cursor: pointer;
  transition: background-color 1.3s ease .4s, color 1.3s ease .4s, transform .2s ease;
}
.daynight:hover { transform: translateY(-1px) rotate(-1deg); }
.daynight:active { transform: translateY(1px); }
.daynight:focus-visible { outline: 2px dashed var(--focus); outline-offset: 4px; }

.dn-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--sky2);
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .18);
  transition: background-color 1.2s ease;
}
.dn-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .25);
  transition: transform .55s cubic-bezier(.6, -.3, .3, 1.4), background-color .5s ease;
}
.dn-knob::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sky2);
  transform: translate(9px, -4px) scale(0);
  transition: transform .5s ease, background-color 1.2s ease;
}
.night .dn-knob { transform: translateX(18px); background: var(--moon); }
.night .dn-knob::after { transform: translate(6px, -3px) scale(.8); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cloud, .steam path, .cursor, .night .cut .star { animation: none !important; }
  .cloud { transform: translateX(var(--xs)); }
  .sun, .moon, .night .sun, .night .moon { transition-duration: .01s !important; transition-delay: 0s !important; }
  .night .g-lamp { animation: none; opacity: 1; }
  .rig-social:hover .tag, .tag-social .tag-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
  color: var(--ink);
  transition: color 1.3s ease var(--td);
}
.rig-social:focus-visible .tag { transform: rotate(-3deg); }
  .tag { transition: transform .3s ease; }
}

/* ---------- without JavaScript: a plain, readable card ---------- */

html:not(.js) body { overflow: auto; background: #274e52; }
html:not(.js) .stage { position: static; padding: 48px 20px; }
html:not(.js) .layer:not(#L-tags), html:not(.js) .daynight, html:not(.js) .string, html:not(.js) .tag-paper { display: none; }
html:not(.js) #L-tags, html:not(.js) .rig, html:not(.js) .tag { position: static; width: auto; height: auto; }
html:not(.js) .tag { max-width: 420px; margin: 0 auto 16px; padding: 28px; background: #f8f0de; border-radius: 6px; }
html:not(.js) .tag-social { width: 64px; height: 64px; padding: 0; position: relative; display: inline-block; }
html:not(.js) .tag-social .logo { top: 28%; }
html:not(.js) .tag-social .tag-label { position: static; display: block; transform: none; padding-top: 24px; }
html:not(.js) .rig-home .tag-social { width: auto; padding: 0 16px; }