fieldset,
p {
  margin: 0 0 .75em
}

.url-creator .url-creator-title-info select:active,
.url-creator .url-creator-title-info select:focus,
.url-creator .url-creator-title-info select:hover,
a:active,
a:focus {
  outline: 0
}

.copy-action,
.url-creator {
  position: relative
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

a.btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  background-color: #E9C56C;
  border-radius: 3px;
  border: none;
  color: #1D1D1D;
  cursor: pointer;
  display: inline-block;
  font-family: "Open Sans";
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  padding: .75em 1em;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap
}

td,
th {
  padding: .75em 0
}

a.btn:focus,
a.btn:hover,
button:focus,
button:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:focus,
input[type=submit]:hover {
  background-color: #ecce82;
  color: #1D1D1D
}

body,
input,
label,
select,
textarea {
  color: #FFF;
  font-size: 1em;
  font-family: "Open Sans"
}

a.btn:disabled,
button:disabled,
input[type=button]:disabled,
input[type=reset]:disabled,
input[type=submit]:disabled {
  cursor: not-allowed;
  opacity: .5
}

fieldset {
  background-color: #494949;
  border: 1px solid #2F2F2F;
  padding: 1.5em
}

input,
label,
select {
  display: block;
  background-color: #1F1F1F !important
}

::-webkit-input-placeholder {
  color: #7d7d7d
}

:-moz-placeholder {
  color: #7d7d7d
}

::-moz-placeholder {
  color: #7d7d7d
}

:-ms-input-placeholder {
  color: #7d7d7d
}

label {
  font-weight: 600;
  margin-bottom: .375em
}

label.required::after {
  content: "*"
}

label abbr {
  display: none
}

select {
  padding: 5px;
  margin-bottom: 1.5em;
  max-width: 100%;
  width: auto
}

input:not([type]),
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
select[multiple=multiple],
textarea {
  background-color: #242424;
  border: 1px solid #2F2F2F;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
  box-sizing: border-box;
  font-family: "Open Sans";
  font-size: 1em;
  margin-bottom: .75em;
  padding: .5em;
  transition: border-color;
  width: 100%
}

input:not([type]):focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
select[multiple=multiple]:focus,
textarea:focus {
  border-color: #555;
  outline: 0
}

hr,
td {
  border-bottom: 1px solid #2F2F2F
}

textarea {
  resize: vertical
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none
}

input[type=checkbox],
input[type=radio] {
  display: inline;
  margin-right: .375em
}

input[type=file] {
  padding-bottom: .75em;
  width: 100%
}

ol,
ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}

dl {
  margin-bottom: .75em
}

dl dt {
  font-weight: 700;
  margin-top: .75em
}

dl dd {
  margin: 0
}

table {
  -webkit-font-feature-settings: "kern", "liga", "tnum";
  -moz-font-feature-settings: "kern", "liga", "tnum";
  -ms-font-feature-settings: "kern", "liga", "tnum";
  font-feature-settings: "kern", "liga", "tnum";
  border-collapse: collapse;
  margin: .75em 0;
  table-layout: fixed;
  width: 100%
}

th {
  border-bottom: 1px solid #090909;
  font-weight: 600;
  text-align: left
}

td,
th,
tr {
  vertical-align: middle
}

body {
  -webkit-font-feature-settings: "kern", "liga", "pnum";
  -moz-font-feature-settings: "kern", "liga", "pnum";
  -ms-font-feature-settings: "kern", "liga", "pnum";
  font-feature-settings: "kern", "liga", "pnum";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans";
  font-size: 1em;
  line-height: 1.2;
  margin: 0 0 .75em
}

a {
  transition: color .1s linear;
  text-decoration: underline;
  color: #fff
}

a:active,
a:focus,
a:hover {
  color: #dfab29
}

hr {
  border-left: none;
  border-right: none;
  border-top: none;
  margin: 1.5em 0
}

img,
picture {
  margin: 0;
  max-width: 100%
}

html {
  padding: 0;
  margin: 0
}

body:not(.ember-testing-container) {
  padding: 0;
  margin: 0;
  background-color: #1D1D1D
}

a:hover {
  color: #E9C56C
}

.page-content {
  background-color: #242424;
  padding: 0 0 65px;
  margin: auto
}

.page-inner {
  max-width: 900px;
  margin: auto;
  overflow: hidden
}

.site-header {
  padding: 20px 0 0;
  text-align: center
}

@media screen and (min-width:40em) {
  .site-header {
    padding: 20px 0 10px
  }
}

.site-header.small {
  padding: 10px 0
}

.site-header.small .site-header-title-text {
  background-size: 200px auto !important;
  background: url("/assets/logo-header-3e1e819e.png") center 20px no-repeat;
  min-height: 60px;
  min-width: 230px
}

.site-header-title {
  display: inline-block
}

.site-header-title-text {
  min-height: 80px;
  background: url("/assets/logo-header-3e1e819e.png") center 20px no-repeat;
  background-size: 290px auto;
  text-indent: -9000px;
  display: inline-block;
  min-width: 300px
}

@media screen and (min-width:40em) {
  .site-header-title-text {
    min-height: 120px;
    background-size: 460px auto;
    min-width: 470px
  }
}

.video-player-embed,
.video-player-overlay {
  min-width: 100%;
  background-repeat: no-repeat
}

.video-slogan-text {
  display: block;
  text-align: center;
  font-size: 16px;
  font-family: "Open Sans";
  font-weight: 700;
  text-transform: uppercase;
  color: #E9C56C;
  min-height: 80px
}

.video-slogan {
  opacity: 0;
  text-align: center;
  padding: 20px 0
}

.video-slogan.is-visible {
  opacity: 1
}

.site-tagline {
  text-align: center;
  color: #909090;
  max-width: 420px;
  margin: auto auto 40px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  padding: 0 20px
}

@media screen and (min-width:40em) {
  .site-tagline {
    line-height: 22px;
    font-size: 16px;
    padding: 0
  }
}

.site-footer {
  padding: 40px 20px 20px;
  font-size: 12px;
  text-align: center
}

@media screen and (min-width:40em) {
  .site-footer {
    padding: 60px 50px 40px;
    font-size: 14px
  }
}

.site-footer p {
  color: #909090
}

.url-creator {
  max-width: 100%;
  margin: auto;
  border: 0;
  padding: 6px
}

@media screen and (min-width:40em) {
  .url-creator {
    max-width: 90%;
    border: 2px solid #2f2f2f
  }
}

.url-creator .url-creator-title-info {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto
}

.url-creator .url-creator-title-info::after {
  clear: both;
  content: "";
  display: table
}

.url-creator .url-creator-title-info select {
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  float: left;
  display: block;
  width: 100%;
  padding: 0 15px;
  border: 1px solid #2F2F2F !important;
  border-radius: 3px;
  margin: 0;
  height: 40px
}

.url-creator .url-creator-title-info select:last-child {
  margin-right: 0
}

@media screen and (min-width:40em) {
  .url-creator .url-creator-title-info select {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%
  }

  .url-creator .url-creator-title-info select:last-child {
    margin-right: 0
  }
}

.url-creator .url-creator-title-info input {
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%
}

.url-creator .url-creator-title-info input:last-child {
  margin-right: 0
}

@media screen and (min-width:40em) {
  .url-creator .url-creator-title-info input {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%
  }

  .url-creator .url-creator-title-info input:last-child {
    margin-right: 0
  }
}

.copy-action .copy-button::after,
.copy-action::after {
  content: "";
  display: table;
  clear: both
}

.url-creator .url-creator-inner {
  padding: 2px;
  border: 0
}

@media screen and (min-width:40em) {
  .url-creator .url-creator-inner {
    border: 5px solid #2f2f2f;
    padding: 50px
  }
}

.copy-action .copy-area,
.copy-action .copy-button {
  width: 100%;
  z-index: 2;
  white-space: normal;
  height: 60px;
  padding: 0 40px
}

.url-creator .url-creator-inner>form {
  margin: 0 0 20px
}

.url-creator .separator {
  margin: 0 -25px
}

.url-creator .separator path {
  stroke: #2f2f2f;
  stroke-width: 2px
}

.copy-action .copy-button {
  background: url("/assets/copy-icon-4102ca9e.png") 10px center no-repeat #E9C56C;
  background-size: 20px
}

.copy-action .copy-button:hover {
  background-color: #d4ae50
}

.copy-action .copy-button button {
  display: block;
  width: 100%
}

@media screen and (min-width:40em) {
  .url-creator .separator {
    margin: 15px -25px
  }

  .copy-action .copy-button {
    display: block;
    right: 0;
    top: 0;
    bottom: 0;
    left: auto;
    width: 100%;
    height: 60px;
    position: relative
  }

  .copy-action .copy-button button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
  }
}

.copy-action .copy-area {
  font-weight: 600;
  line-height: 1.1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 2px;
  background-color: #242424;
  border: 1px solid #2F2F2F
}

.copy-action .copy-area a {
  color: #E9C56C
}

.copy-action .copy-area a:hover {
  color: #d4ae50
}

.copy-action .show-success .copy-action:after {
  content: "COPIED!";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  background-color: red
}

.copy-action .copy-button.zeroclipboard-is-hover {
  cursor: pointer !important
}

.copy-action .copy-button.zeroclipboard-is-hover button {
  color: #1D1D1D;
  background-color: #ecce82
}

.copy-action .url-result {
  overflow: hidden;
  background-color: #1f1f1f;
  padding: 0;
  font-size: 15px;
  line-height: 18px;
  position: relative;
  text-align: center
}

.copy-action .url-result::after {
  clear: both;
  content: "";
  display: table
}

.copy-action .url-result a {
  display: inline-block;
  background-color: #1f1f1f;
  padding: 9px 18px 13px 14px
}

@media screen and (min-width:40em) {
  .copy-action .url-result {
    line-height: 44px;
    white-space: nowrap;
    text-align: left;
    min-height: 0;
    padding: 3px 110px 3px 14px
  }

  .copy-action .url-result a {
    display: inline-block;
    padding: 0
  }
}

.copy-action .copy-button.zeroclipboard-is-hover+.url-result {
  box-shadow: 0 0 3px #E9C56C
}

.field-label {
  text-transform: uppercase;
  padding: 5px 0;
  display: block;
  text-align: center;
  font-size: 15px;
  background-color: transparent !important;
  margin-top: 10px;
  color: #E9C56C
}

.url-creator-video-selector {
  border: 1px solid #2F2F2F;
  border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  margin: 10px auto;
  background-color: #1f1f1f;
  white-space: nowrap;
  padding: 10px;
  text-align: center;
  max-width: 68em
}

.url-creator-video-selector label.field-label {
  margin-top: -10px
}

@media screen and (min-width:40em) {
  .field-label {
    display: none
  }

  .url-creator-video-selector {
    margin: 10px auto 0;
    padding: 10px
  }
}

.url-creator-video-selector::after {
  clear: both;
  content: "";
  display: table
}

.url-creator-video-selector label.video-option {
  cursor: pointer;
  float: left;
  margin-right: 2.35765%;
  width: 31.76157%;
  display: inline-block;
  border-radius: 5px;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  box-sizing: border-box;
  border: 3px solid transparent;
  position: relative;
  margin-bottom: 0
}

.url-creator-video-selector label.video-option:last-child {
  margin-right: 0
}

.url-creator-video-selector label.video-option:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 80%
}

.url-creator-video-selector label.video-option>* {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

@media screen and (min-width:40em) {
  .url-creator-video-selector label.video-option {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
    position: relative
  }

  .url-creator-video-selector label.video-option:last-child {
    margin-right: 0
  }

  .url-creator-video-selector label.video-option:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 70%
  }

  .url-creator-video-selector label.video-option>* {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }

  .url-creator-video-selector label.video-option .info {
    display: none
  }

  .url-creator-video-selector label.video-option:has(input:checked) .info {
    display: block
  }
}

.url-creator-video-selector label.video-option:has(input:checked) {
  border: 3px solid #E9C56C
}

.url-creator-video-selector label.video-option .video-still {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  top: 3px;
  background-size: cover;
  background-repeat: no-repeat
}

.url-creator-video-selector label.video-option .video-still.active {
  background-size: 130% 130%;
  background-position: center center
}

.url-creator-video-selector label.video-option .video-still .info {
  vertical-align: middle;
  text-transform: uppercase;
  color: #fff;
  display: none;
  box-sizing: border-box;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  right: 0
}

@media screen and (min-width:40em) {
  .url-creator-video-selector label.video-option .video-still .info {
    font-size: 20px;
    font-weight: 700;
    display: block
  }
}

.url-creator-video-selector label.video-option:has(input:checked) .video-still .info {
  color: #fff
}

.url-creator-video-selector input {
  display: none
}

.video-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center
}

.video-player-content {
  width: 560px;
  height: 315px;
  position: relative;
  display: block;
  overflow: hidden
}

.unmute-and-play-video {
  background-color: #111;
  color: #FFF;
  text-transform: uppercase;
  font-size: 13px;
  position: absolute;
  left: 10px;
  bottom: 40px;
  cursor: pointer;
  border-radius: 0;
  padding: 10px;
  opacity: 0
}

.video-player-embed>iframe,
.video-player-overlay iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0
}

.unmute-and-play-video:hover {
  background-color: #FFF;
  color: #000
}

.is-silent .unmute-and-play-video {
  opacity: 1
}

.video-player-embed {
  position: absolute;
  text-align: center;
  width: 100%;
  height: inherit;
  display: block
}

.video-player-embed:before,
.video-player-overlay:before {
  display: block;
  height: 0;
  padding-top: 177.21519%;
  width: 100%;
  content: ""
}

.video-player-embed>iframe {
  width: 100%
}

.video-player-overlay {
  position: absolute;
  top: 0;
  text-align: center;
  display: block;
  width: 100%
}

.video-player-overlay iframe {
  width: 100%
}

.lets-talk-about-this {
  border-top: 1px solid #555;
  margin: 40px auto 20px;
  width: 75%;
  max-width: 68em
}

.lets-talk-about-this::after {
  clear: both;
  content: "";
  display: table
}

@media screen and (min-width:40em) {
  .lets-talk-about-this {
    margin: 90px auto 60px
  }
}

.lets-talk-about-this h3 {
  text-align: center;
  line-height: 25px
}

.lets-talk-about-this .words {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  color: #aaa
}

.lets-talk-about-this .words:last-child {
  margin-right: 0
}

@media screen and (min-width:40em) {
  .lets-talk-about-this .words {
    line-height: 22px;
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
    padding: 20px 0
  }

  .lets-talk-about-this .words:last-child {
    margin-right: 0
  }
}

.lets-talk-about-this .actions {
  text-align: right;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%
}

.lets-talk-about-this .actions:last-child {
  margin-right: 0
}

.lets-talk-about-this .actions a {
  display: block;
  text-align: center;
  width: 100%;
  text-transform: uppercase
}

@media screen and (min-width:40em) {
  .lets-talk-about-this .actions {
    position: relative;
    top: 3px;
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
    padding: 20px 0
  }

  .lets-talk-about-this .actions:last-child {
    margin-right: 0
  }
}
.account-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 4px 0;
}

.account-bar-main,
.account-bar-you {
  display: flex;
  align-items: center;
  gap: 24px;
}

.account-bar .button_to {
  display: flex;
  margin: 0;
}

.account-bar a,
.account-bar .account-menu-name,
.account-bar .link-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
  color: #909090;
  font-family: "Open Sans";
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.account-bar a:hover,
.account-bar .account-menu-name:hover,
.account-bar .link-button:hover {
  color: #E9C56C;
}

.flashes {
  max-width: 90%;
  margin: 10px auto 0;
}

.flash {
  border: 1px solid #2F2F2F;
  background-color: #1f1f1f;
  border-radius: 3px;
  padding: 10px 14px;
  font-size: 14px;
  text-align: center;
}

.flash-alert {
  color: #E9C56C;
}

.copy-hint {
  text-align: center;
  color: #909090;
  font-size: 12px;
  margin-top: 12px;
}

.premium-domain {
  text-align: center;
  padding: 10px 0 16px;
  font-size: 13px;
  color: #aaa;
}

.premium-domain-choice {
  display: inline-block;
  background-color: transparent !important;
}

.premium-domain-choice input {
  display: inline;
  background-color: transparent !important;
}

.premium-domain-choice,
.premium-domain-pitch {
  margin: 0;
}

.premium-domain-pitch a {
  color: #E9C56C;
}

.account-panel,
.premium,
.my-links,
.stats {
  max-width: 640px;
  margin: 20px auto 60px;
  padding: 0 20px;
}

.account-panel h2,
.premium h2,
.my-links h2,
.stats h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #E9C56C;
}

.account-panel input[type=submit] {
  width: 100%;
  height: 50px;
}

.account-section {
  margin-top: 38px;
}

/* The panel boxes every form it holds, which on a page of four of them is a wall of borders. */
.account-panel .account-section form {
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
}

.account-section .account-panel-links {
  text-align: left;
  margin-top: 12px;
}

.account-perks {
  font-size: 14px;
  line-height: 26px;
  color: #ddd;
  margin: 0 0 20px;
}

.account-perks li:before {
  content: "→ ";
  color: #E9C56C;
}

.press-pass-redemption {
  margin-top: 30px;
  text-align: center;
}

.press-pass-redemption .premium-note {
  margin-bottom: 10px;
}

.account-section h3 {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #909090;
  margin-bottom: 12px;
}

.account-standing {
  font-size: 15px;
  margin-bottom: 10px;
}

.account-panel-links {
  text-align: center;
  font-size: 13px;
  color: #909090;
  margin-top: 20px;
}

.form-errors {
  color: #E9C56C;
  font-size: 13px;
  margin-bottom: 12px;
}

.premium-features {
  margin: 0 auto 30px;
  font-size: 15px;
  line-height: 28px;
  color: #ddd;
}

.premium-features li:before {
  content: "→ ";
  color: #E9C56C;
}

.premium form,
.premium .btn-large {
  text-align: center;
}

.premium .btn-large {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 40px;
  text-transform: uppercase;
}

.premium-plans {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 10px;
}

@media screen and (min-width: 40em) {
  .premium-plans {
    flex-direction: row;
  }

  .premium-plan {
    flex: 1;
  }
}

.premium-plan h3 {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #909090;
  text-align: center;
  margin-bottom: 10px;
}

.premium-plan-terms {
  font-size: 14px;
  line-height: 22px;
  color: #b4b4b4;
  margin-top: 14px;
}

.premium-signin,
.premium-active {
  text-align: center;
  font-size: 13px;
  color: #909090;
  margin-top: 16px;
}

.my-links-table,
.stats-table {
  font-size: 14px;
}

.my-links-table th,
.stats-table th {
  color: #909090;
  font-size: 12px;
  text-transform: uppercase;
}

.my-links-table a,
.stats-url a {
  color: #E9C56C;
  text-decoration: none;
  word-break: break-all;
}

.my-links {
  max-width: 900px;
}

.my-links-table th,
.my-links-table td {
  padding-right: 20px;
}

.my-links-table th:last-child,
.my-links-table td:last-child {
  padding-right: 0;
}

.my-links-table .link-headline {
  width: 34%;
}

.my-links-table .link-url {
  width: 26%;
}

.my-links-table .link-video {
  width: 13%;
}

.my-links-table .numeric {
  width: 8%;
}

.my-links-table .link-stats {
  width: 11%;
}

.my-links-table .link-remove {
  width: 8%;
}

.my-links-table .link-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
  color: #909090;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.my-links-table .link-button:hover {
  color: #E9C56C;
}

/* A url broken across five lines is unreadable, and the headline beside it already says which link this is. */
.my-links-table .link-url a,
.my-links-table .link-video a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.numeric {
  text-align: right;
}

.my-links-empty {
  text-align: center;
  color: #909090;
}

.stats-url {
  text-align: center;
  font-size: 14px;
  margin-bottom: 36px;
}

.stats-totals {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border: 1px solid #2F2F2F;
  background-color: #1f1f1f;
  border-radius: 3px;
  padding: 20px 10px;
  margin-bottom: 36px;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #E9C56C;
}

.stat-number.is-phrase {
  font-size: 15px;
  line-height: 1.6;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #909090;
}

.stats h3 {
  font-size: 13px;
  text-transform: uppercase;
  color: #909090;
  margin-top: 30px;
}

input[type=submit] {
  background-color: #E9C56C !important;
  color: #1D1D1D;
}

input[type=submit]:hover {
  background-color: #ecce82 !important;
}

/* --- Refresh: the original look with room to breathe --- */

body {
  font-size: 17px;
  line-height: 1.6;
}

.page-content {
  padding-bottom: 90px;
}

.page-inner {
  max-width: 960px;
  padding: 0 24px;
  overflow: visible;
}

.site-header {
  padding: 34px 0 6px;
}

.site-tagline {
  max-width: 520px;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 28px;
  color: #8b8b8b;
}

@media screen and (min-width: 40em) {
  .site-tagline {
    font-size: 18px;
    line-height: 30px;
  }
}

.url-creator {
  max-width: 780px;
  border-radius: 12px;
  border-color: #333;
  padding: 8px;
}

.url-creator .url-creator-inner {
  border-radius: 8px;
}

@media screen and (min-width: 40em) {
  .url-creator .url-creator-inner {
    border-width: 3px;
    padding: 44px 40px 36px;
  }
}

.url-creator .url-creator-inner > form {
  margin-bottom: 0;
}

.url-creator .url-creator-title-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.url-creator .url-creator-title-info input,
.url-creator .url-creator-title-info select {
  float: none;
  width: 100%;
  margin: 0;
  height: 52px;
  font-size: 17px;
  padding: 0 16px;
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

@media screen and (min-width: 40em) {
  .url-creator .url-creator-title-info input {
    flex: 1;
    width: auto;
  }

  .url-creator .url-creator-title-info select {
    width: 190px;
  }
}

.url-creator .url-creator-title-info input:focus,
.url-creator .url-creator-title-info select:focus {
  border-color: #E9C56C !important;
  box-shadow: 0 0 0 3px rgba(233, 197, 108, .12);
}

.url-creator .url-creator-title-info input.is-wanted {
  animation: headline-wanted .9s ease-out;
}

@keyframes headline-wanted {
  from { box-shadow: 0 0 0 4px rgba(233, 197, 108, .6); }
  to { box-shadow: 0 0 0 4px rgba(233, 197, 108, 0); }
}

.url-creator-video-selector {
  display: flex;
  gap: 10px;
  padding: 10px;
  margin: 0 auto 10px;
  border-radius: 8px;
}

.url-creator-video-selector label.video-option {
  float: none;
  width: auto;
  flex: 1;
  margin: 0;
  border-radius: 8px;
  border-width: 2px;
  transition: transform .15s ease, border-color .15s ease;
}

.url-creator-video-selector label.video-option:hover {
  transform: translateY(-2px);
}

.url-creator-video-selector label.video-option:has(input:checked) {
  border: 2px solid #E9C56C;
}

.url-creator-video-selector label.video-option .video-still {
  border-radius: 6px;
}

.url-creator-video-selector label.video-option .video-still .info {
  font-size: 15px;
  letter-spacing: .06em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.url-creator .separator {
  margin: 22px -25px;
}

.copy-action .copy-button {
  height: 72px;
  font-size: 17px;
  border-radius: 8px;
  background-position: 18px center;
  background-size: 22px;
  padding: 0 24px 0 56px;
  letter-spacing: .01em;
  transition: background-color .15s ease, transform .15s ease;
}

.copy-action .copy-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Nothing to publish until there is a headline, and a button that lifts and darkens says otherwise. */
.copy-action .copy-button:disabled,
.copy-action .copy-button:disabled:hover {
  background-color: #E9C56C;
  transform: none;
}

@media screen and (min-width: 40em) {
  .copy-action .copy-button {
    height: 72px;
  }
}

.copy-hint {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-footer {
  padding-top: 70px;
}

.account-panel,
.premium,
.my-links,
.stats {
  margin: 40px auto 80px;
}

.account-panel h2,
.premium h2,
.my-links h2,
.stats h2 {
  font-size: 24px;
  letter-spacing: .06em;
  margin-bottom: 28px;
}

.account-panel form,
.premium {
  border: 1px solid #2F2F2F;
  border-radius: 10px;
  padding: 32px;
  background-color: #1f1f1f;
}

.account-panel input {
  height: 52px;
  font-size: 16px;
  padding: 0 16px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.account-panel input[type=submit] {
  height: 54px;
  margin: 6px 0 0;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.premium-features {
  font-size: 16px;
  line-height: 32px;
}

.stats-totals {
  border-radius: 10px;
  padding: 26px 10px;
}

.stat-number {
  font-size: 30px;
}

.my-links-table,
.stats-table {
  font-size: 15px;
}

.stats-table td {
  padding: 14px 0;
}

.my-links-table td {
  padding: 14px 20px 14px 0;
}

.my-links-table td:last-child {
  padding-right: 0;
}

.domain-selector {
  text-align: center;
  padding: 0 0 6px;
}

.domain-selector-caption {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #909090;
}

.domain-options {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #2F2F2F;
  border-radius: 999px;
  background-color: #1f1f1f;
}

.domain-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent !important;
  color: #8b8b8b;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.domain-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.domain-option:hover {
  color: #fff;
}

/* Gold on gold is what the publish button looks like. A choice made on this page is outlined, not filled. */
.domain-option:has(input:checked) {
  border-color: #E9C56C;
  background-color: #2b2517 !important;
  color: #E9C56C;
}

.domain-option.is-locked {
  color: #909090;
}

.domain-option-badge {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E9C56C;
  border: 1px solid rgba(233, 197, 108, .4);
  border-radius: 999px;
  padding: 2px 8px;
}

.kicker {
  text-align: center;
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #E9C56C;
}

.account-lede,
.premium-lede {
  text-align: center;
  color: #adadad;
  font-size: 16px;
  line-height: 28px;
  margin: 0 auto 32px;
  max-width: 52ch;
}

.account-panel h2,
.premium h2 {
  border-bottom: 1px solid #2F2F2F;
  padding-bottom: 20px;
}

.account-footnote,
.premium-note {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  line-height: 22px;
  color: #909090;
}

.premium-features {
  border-top: 1px solid #2F2F2F;
  padding-top: 24px;
  margin-bottom: 32px;
}

.premium-features li {
  padding-left: 26px;
  text-indent: -26px;
}

.video-still-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #262626;
  border: 1px dashed #3d3d3d;
}

.url-creator-video-selector label.video-option.video-option-custom .video-still .info {
  position: static;
  display: block;
  transform: none;
  color: #adadad;
  font-size: 14px;
  letter-spacing: .04em;
  text-shadow: none;
}

.video-option-custom:has(input:checked) .video-still-custom {
  background-color: #2b2517;
  border-style: solid;
  border-color: #E9C56C;
}

.url-creator-video-selector label.video-option.video-option-custom:has(input:checked) .video-still .info {
  color: #E9C56C;
}

.video-still-badge {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E9C56C;
  border: 1px solid rgba(233, 197, 108, .4);
  border-radius: 999px;
  padding: 2px 8px;
}

.custom-video-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* An author display rule outranks the hidden attribute, which is how this came back uninvited. */
.custom-video-field[hidden] {
  display: none;
}

.custom-video-field input {
  height: 48px;
  flex: 1;
  min-width: 0;
  margin: 0 0 4px;
  font-size: 15px;
  padding: 0 16px;
  border-radius: 6px;
}

.custom-video-field .btn {
  flex: none;
  height: 48px;
  margin: 0;
}

.video-preview-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, .55) !important;
  color: #fff;
  font-family: "Open Sans";
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.video-preview-button:hover,
.video-preview-button:focus {
  border-color: #E9C56C;
  color: #E9C56C;
}

.video-preview {
  width: min(880px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
  background-color: #1a1a1a;
  color: #e8e8e8;
}

.video-preview::backdrop {
  background-color: rgba(0, 0, 0, .78);
}

.video-preview-inner {
  padding: 16px;
}

.video-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.video-preview-header h3 {
  margin: 0;
  font-size: 15px;
  color: #E9C56C;
}

/* Every dialog closes the same way. The sheet paints a focused button dark on gold, and with the gold
   taken off it that leaves a glyph the colour of the panel it sits on. */
.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none !important;
  color: #909090;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus,
.dialog-close:focus-visible {
  background-color: #262626 !important;
  color: #E9C56C;
}

.dialog-close:focus-visible {
  outline: 2px solid rgba(233, 197, 108, .55);
  outline-offset: 1px;
}

.video-preview-frame {
  position: relative;
  padding-top: 56.25%;
}

.video-preview-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
}

.url-creator-video-selector .video-option {
  position: relative;
  flex: 1;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  text-decoration: none;
}

.url-creator-video-selector .video-option:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 70%;
}

.url-creator-video-selector .video-option > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.url-creator-video-selector .video-option .video-still {
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}

/* --- The premium domain wears a different paper --- */

.site-header-wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0;
  color: #1a1a1a;
}

@media screen and (min-width: 40em) {
  .site-header-wordmark {
    font-size: 58px;
  }
}

.site-header-tagline {
  margin: 12px 0 0;
  font-family: "Open Sans";
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #767676;
}

body.theme-washlngtonpost {
  background-color: #ebe7de;
  color: #1a1a1a;
}

.theme-washlngtonpost .page-content {
  background-color: #f6f4ef;
  box-shadow: 0 0 60px rgba(0, 0, 0, .06);
}

.theme-washlngtonpost .site-header {
  border-bottom: 1px solid #1a1a1a;
  padding: 34px 0 18px;
  margin-bottom: 34px;
}

.theme-washlngtonpost .site-header.small {
  padding-top: 26px;
}

.theme-washlngtonpost .site-header-title {
  text-decoration: none;
}

.theme-washlngtonpost a {
  color: #1a1a1a;
}

.theme-washlngtonpost a:hover {
  color: #6b0f1a;
}

.theme-washlngtonpost .account-bar a,
.theme-washlngtonpost .account-bar .link-button {
  color: #767676;
}

.theme-washlngtonpost .video-slogan-text {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 900;
  text-transform: none;
  color: #1a1a1a;
  min-height: 0;
}

.theme-washlngtonpost .video-player-content {
  border: 1px solid #d5d0c5;
}

.theme-washlngtonpost .lets-talk-about-this {
  border-top: 1px solid #d5d0c5;
}

.theme-washlngtonpost .lets-talk-about-this .words {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  color: #4a4a4a;
}

.theme-washlngtonpost a.btn,
.theme-washlngtonpost button,
.theme-washlngtonpost input[type=submit] {
  background-color: #1a1a1a !important;
  color: #f6f4ef;
  border-radius: 2px;
}

.theme-washlngtonpost a.btn:hover,
.theme-washlngtonpost button:hover,
.theme-washlngtonpost input[type=submit]:hover {
  background-color: #6b0f1a !important;
  color: #fff;
}

.theme-washlngtonpost .site-footer p {
  color: #767676;
}

.theme-washlngtonpost .unmute-and-play-video {
  background-color: #f6f4ef;
  color: #1a1a1a;
}

.theme-washlngtonpost .site-footer {
  background-color: #ebe7de;
}

.copy-action .copy-button [data-url-creator-target="preview"] {
  user-select: text;
}

.account-menu {
  position: relative;
}

.account-menu-name {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.account-menu-name::-webkit-details-marker {
  display: none;
}

.account-menu-caret {
  width: 9px;
  height: 9px;
  transition: transform .12s linear;
}

.account-menu[open] .account-menu-caret {
  transform: rotate(180deg);
}

.account-menu[open] .account-menu-name {
  color: #E9C56C;
}

.account-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  padding: 6px;
  background-color: #1f1f1f;
  border: 1px solid #2F2F2F;
  border-radius: 3px;
}

/* A menu you have to hit the lettering of is a menu you miss. */
.account-menu-items a,
.account-menu-items .link-button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 3px;
  text-align: left;
}

.account-menu-items .button_to {
  display: block;
  width: 100%;
  padding: 0;
}

.account-menu-items a:hover,
.account-menu-items .link-button:hover {
  background-color: #2b2b2b !important;
  color: #E9C56C;
}

.account-bar-plan {
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.account-bar-plan.is-member {
  border-color: rgba(233, 197, 108, .5);
  color: #E9C56C;
}

.share-fields {
  padding: 0;
}

/* The teaser is written where it will be read, so the card is the field rather than a copy of it. */
.share-card-teaser-field {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  padding: 6px 8px;
  border: 1px dashed #3d3d3d;
  border-radius: 4px;
  background-color: transparent;
  color: #8b8b8b;
  font-family: "Open Sans";
  font-size: 12px;
  line-height: 16px;
  resize: none;
}

.share-card-teaser-field:focus {
  outline: none;
  border-color: #E9C56C;
  border-style: solid;
  color: #c9c9c9;
}

.share-fields-caption {
  margin: 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #909090;
  text-align: center;
}

.share-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The video tiles are flex items whose contents are absolutely positioned, so they shrink to nothing
   unless they are given a basis and told not to share a row with the label. */
@media screen and (max-width: 39.99em) {
  .url-creator-video-selector {
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
  }

  .url-creator-video-selector label.field-label {
    flex: 0 0 100%;
    margin-bottom: 0;
  }

  .url-creator-video-selector label.video-option,
  .url-creator-video-selector a.video-option {
    flex: 0 0 calc(50% - 4px);
    width: auto;
    margin-right: 0;
  }
}

/* A quiet offer under the card, not a second panel competing with it. */
.editor-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
  color: #767676;
  font-family: "Open Sans";
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* The site's buttons turn gold on hover, which would leave gold text on a gold ground. */
.editor-help:hover:not(:disabled),
.editor-help:focus:not(:disabled) {
  color: #E9C56C;
}

.photo-desk {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
  background-color: #1a1a1a;
  color: #e8e8e8;
}

.photo-desk::backdrop {
  background-color: rgba(0, 0, 0, .72);
}

.photo-desk-inner {
  padding: 20px;
}

.photo-desk-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.photo-desk-header h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #E9C56C;
}

.photo-desk-header p {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: #909090;
}

.photo-desk-search {
  display: flex;
  gap: 8px;
}

.photo-desk-search input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  background-color: #131313;
  color: #e8e8e8;
  font-family: "Open Sans";
  font-size: 14px;
}

.photo-desk-search input:focus {
  outline: none;
  border-color: #E9C56C;
}

.photo-desk-search .btn {
  margin: 0;
  flex: none;
}

/* The line is kept whether or not there is anything to say, so saying something moves nothing. */
.photo-desk-note {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: #E9C56C;
}

.photo-desk .photo-results {
  max-height: 46vh;
  overflow-y: auto;
}

/* An empty grid still draws its margin, which leaves a gap above the actions before the first search. */
.photo-desk .photo-results:empty {
  margin: 0;
}

/* Picking a photograph is what closes the desk, so what is left down here are the two ways not to pick one. */
.photo-desk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.photo-desk-actions .btn {
  margin: 0;
  padding: 6px 12px;
  height: auto;
  font-size: 12px;
  line-height: 18px;
}

.editor-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #E9C56C;
}

.photo-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.photo-result {
  height: 72px;
  padding: 0;
  border: 1px solid #2F2F2F;
  border-radius: 6px;
  background-color: #1f1f1f !important;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.photo-result:hover,
.photo-result.is-chosen {
  border-color: #E9C56C;
}

.editor-help.is-locked {
  text-decoration: underline;
}

.editor-help-badge {
  border: 1px solid rgba(233, 197, 108, .5);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E9C56C;
}

.editor-help:disabled {
  cursor: default;
  opacity: .6;
}

.share-photo {
  display: block;
  background-color: transparent !important;
  margin: 0;
  cursor: pointer;
}

.share-photo input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.share-photo-label {
  display: block;
  padding: 12px 16px;
  border: 1px dashed #3d3d3d;
  border-radius: 6px;
  background-color: #1f1f1f;
  color: #adadad;
  font-size: 13px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-photo:hover .share-photo-label {
  border-color: #E9C56C;
  color: #E9C56C;
}

.share-card {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #2F2F2F;
  border-radius: 6px;
  overflow: hidden;
  background-color: #1f1f1f;
}

@media screen and (min-width: 40em) {
  .share-card {
    width: 260px;
    flex: none;
  }
}

.share-card-file {
  display: none;
}

.share-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 130px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.share-card-image-hint {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #adadad;
}

/* the site's buttons turn gold on hover, which would paint over the photo */
.share-card-image:hover,
.share-card-image:focus {
  background-color: #2a2a2a;
}

.share-card-image:hover .share-card-image-hint {
  color: #E9C56C;
}

.share-card-image.is-empty {
  background-image: linear-gradient(135deg, #2a2a2a 25%, #242424 25%, #242424 50%, #2a2a2a 50%, #2a2a2a 75%, #242424 75%);
  background-size: 16px 16px;
}

.share-card-caption {
  display: block;
  padding: 10px 12px 12px;
}

.share-card-domain {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
  color: #767676;
  margin-bottom: 3px;
}

.share-card-headline {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  color: #eee;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.share-card-teaser {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  color: #8b8b8b;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.adblock-notice {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, .35);
  cursor: pointer;
}

.adblock-notice[hidden] {
  display: none;
}

.adblock-notice-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 34px 30px 30px;
  border-radius: 6px;
  background-color: #fff;
  color: #1a1a1a;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.adblock-notice-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 23px;
  font-weight: 900;
  margin-bottom: 12px;
}

.adblock-notice-card p {
  font-size: 15px;
  line-height: 23px;
  color: #4a4a4a;
  margin-bottom: 24px;
}

.adblock-notice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 8px;
  background: none !important;
  color: #999;
  font-size: 22px;
  line-height: 1;
}

.adblock-notice-close:hover {
  color: #1a1a1a;
}

.adblock-notice-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.adblock-notice-actions .btn {
  width: 100%;
  padding: 14px;
  background-color: #1a1a1a !important;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
}

.adblock-notice-secondary {
  background: none !important;
  color: #767676;
  font-size: 13px;
  text-decoration: underline;
  padding: 0;
}

.adblock-notice-secondary:hover {
  color: #1a1a1a;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242424;
}

.page-loader[hidden] {
  display: none;
}

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
}

.page-loader-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #adadad;
}

.page-loader-bar {
  display: block;
  width: 180px;
  height: 2px;
  background-color: #333;
  overflow: hidden;
  position: relative;
}

.page-loader-bar:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background-color: #E9C56C;
  animation: page-loader-sweep 1.1s ease-in-out infinite;
}

@keyframes page-loader-sweep {
  from { left: -40%; }
  to { left: 100%; }
}

.page-loader-note {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #909090;
}

.theme-washlngtonpost .page-loader {
  background-color: #f6f4ef;
}

.theme-washlngtonpost .page-loader-name {
  color: #1a1a1a;
}

.theme-washlngtonpost .page-loader-bar {
  background-color: #ddd8cc;
}

.theme-washlngtonpost .page-loader-bar:after {
  background-color: #6b0f1a;
}

.theme-washlngtonpost .page-loader-note {
  color: #767676;
}

.article-facade {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  background-color: #242424;
}

.article-facade[hidden] {
  display: none;
}

.article-facade-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  filter: blur(9px);
  transform: scale(1.03);
}

.facade-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #767676;
}

.facade-headline {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 14px;
}

@media screen and (min-width: 40em) {
  .facade-headline {
    font-size: 40px;
  }
}

.facade-teaser {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 28px;
  color: #adadad;
  margin: 0 0 24px;
}

.facade-byline {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: .04em;
  color: #767676;
}

.facade-body {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  line-height: 30px;
  color: #c9c9c9;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.facade-body p {
  margin-bottom: 20px;
}

.theme-washlngtonpost .article-facade {
  background-color: #f6f4ef;
}

.theme-washlngtonpost .facade-teaser {
  color: #4a4a4a;
}

.theme-washlngtonpost .facade-body {
  color: #2c2c2c;
}



.preview-choices {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.preview-choices .domain-options {
  display: flex;
  width: 100%;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
}

.preview-choices .domain-option {
  flex: 1;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.preview-choices .domain-option {
  font-size: 13px;
}

.share-editor[hidden] {
  display: none;
}

.parody-note {
  max-width: 56em;
  margin: 14px auto 0;
  font-size: 11px;
  line-height: 18px;
  color: #909090;
  text-align: center;
}

.theme-washlngtonpost .parody-note {
  color: #8a8a8a;
}

.facade-photo {
  margin: 0 0 26px;
}

.facade-photo span {
  display: block;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: #2a2a2a;
}

@media screen and (min-width: 40em) {
  .facade-photo span {
    height: 320px;
  }
}

.facade-photo-credit {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  color: #7d7d7d;
}

.facade-photo-credit a {
  color: inherit;
  text-decoration: none;
}

.theme-washlngtonpost .facade-photo span {
  background-color: #e6e1d6;
}

/* --- The video is the whole point, so give it the room --- */

.video-player {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 12px;
}

.video-player-content {
  width: min(100% - 24px, calc((100dvh - 230px) * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background-color: #000;
}

.video-player-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-player-embed:before {
  content: none;
}

.video-player-embed > iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.video-slogan {
  padding: 24px 0 0;
}

.video-slogan-text {
  min-height: 0;
}

@media screen and (min-width: 40em) {
  .video-player {
    padding: 0 24px;
  }

  .video-player-content {
    width: min(100% - 48px, calc((100dvh - 250px) * 16 / 9));
  }
}

.leaderboard {
  max-width: 640px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

.leaderboard h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: #E9C56C;
  letter-spacing: .06em;
  margin-bottom: 28px;
  border-bottom: 1px solid #2F2F2F;
  padding-bottom: 20px;
}

.leaderboard-table {
  font-size: 15px;
}

.numeric-unit {
  display: none;
}

.leaderboard-table th {
  color: #909090;
  font-size: 12px;
  text-transform: uppercase;
}

.leaderboard-table td {
  padding: 14px 0;
}

.leaderboard-table .rank {
  width: 40px;
  color: #909090;
}

.leaderboard-table tr.is-you td {
  color: #E9C56C;
}

.leaderboard-empty,
.leaderboard-join,
.my-links-nudge {
  text-align: center;
  font-size: 13px;
  color: #909090;
}

/* An invitation set as a footnote reads as a footnote. */
.leaderboard-join {
  margin-top: 30px;
  padding: 22px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #c4c4c4;
  background-color: #1f1f1f;
  border: 1px solid #2F2F2F;
  border-radius: 3px;
}

.leaderboard-join a {
  color: #E9C56C;
  font-weight: 600;
}

.my-links-nudge {
  margin-bottom: 20px;
}

.leaderboard {
  max-width: 900px;
}

.leaderboard-table th,
.leaderboard-table td {
  padding-right: 24px;
}

.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
  padding-right: 0;
}

.leaderboard-table .filed {
  width: 42%;
}

.leaderboard-table .byline {
  width: 18%;
}

.leaderboard-table .sent-to {
  width: 20%;
}

.leaderboard-table .numeric {
  width: 12%;
}

.leaderboard-table td {
  vertical-align: top;
}

.leaderboard-table .byline {
  white-space: nowrap;
  padding-right: 20px;
}

.leaderboard-table .sent-to {
  white-space: nowrap;
  padding-right: 20px;
  color: #adadad;
}

.leaderboard-table .byline.is-unsigned {
  color: #909090;
  font-style: italic;
}

.leaderboard-table .filed li + li {
  margin-top: 12px;
}

.leaderboard-table .filed a {
  color: #E9C56C;
  text-decoration: none;
}

.leaderboard-table .filed a:hover {
  text-decoration: underline;
}

.filed-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.filed-copy {
  min-width: 0;
}

.filed-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 4px;
  object-fit: cover;
}

/* A headline that came with no photograph keeps the column anyway, so the list has one left edge. */
.filed-card:not(:has(.filed-thumb)) .filed-copy {
  margin-left: 76px;
}

.filed-teaser {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 19px;
  color: #adadad;
}

.leaderboard-table .filed-detail {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #909090;
  margin-top: 3px;
}

.claim-hint {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #909090;
}

.claim-hint a {
  color: #E9C56C;
  text-decoration: none;
}

.claim-hint a:hover {
  text-decoration: underline;
}

.admin {
  max-width: 820px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

.admin h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: #E9C56C;
  letter-spacing: .06em;
  margin-bottom: 28px;
  border-bottom: 1px solid #2F2F2F;
  padding-bottom: 20px;
}

.admin-lede {
  color: #909090;
  font-size: 13px;
  line-height: 22px;
  margin-bottom: 24px;
}

.admin-lede a {
  color: #E9C56C;
  text-decoration: none;
}

.admin-search {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.press-pass-form {
  border: 1px solid #2F2F2F;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 34px;
}

.press-pass-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.press-pass-fields input {
  flex: 1;
  min-width: 120px;
}

.press-pass-fields label {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 150px;
}

.press-pass-fields label span {
  color: #909090;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.press-pass-note {
  color: #909090;
  font-size: 12px;
  margin: -8px 0 18px;
}

.press-pass-hint {
  color: #909090;
  font-size: 12px;
  margin: 4px 0 16px;
}

.admin-search input[type=search] {
  flex: 1;
}

.admin-table {
  width: 100%;
  font-size: 14px;
}

.admin-table th {
  color: #909090;
  font-size: 12px;
  text-transform: uppercase;
  text-align: left;
}

.admin-table th.numeric {
  text-align: right;
}

.admin-table td {
  padding: 14px 0;
  vertical-align: top;
}

.admin-table .writer {
  padding-right: 20px;
  word-break: break-all;
}

.admin-table .writer-detail,
.stats-table .writer-detail {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #909090;
  margin-top: 3px;
}

.admin-plan {
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #909090;
}

.admin-plan.is-member,
.admin-plan.is-comped {
  border-color: rgba(233, 197, 108, .5);
  color: #E9C56C;
}

.admin-table .link-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
  color: #E9C56C;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Two answers to a bad headline, and the one that deletes a photograph does not look like the other. */
.admin-table .admin-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.admin-table .link-button.is-severe {
  color: #c96a5f;
}

.admin-note,
.admin-empty {
  color: #909090;
  font-size: 12px;
}

.admin-empty {
  text-align: center;
}


@media screen and (max-width: 39.99em) {
  .account-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    padding-top: 16px;
  }

  .account-bar-main,
  .account-bar-you {
    gap: 18px;
  }

  /* Five columns in a phone's width is a wall of one-word lines, so each row becomes an entry. */
  .leaderboard-table thead,
  .my-links-table thead,
  .readers-table thead {
    display: none;
  }

  .leaderboard-table tr,
  .my-links-table tr,
  .readers-table tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid #2F2F2F;
  }

  .leaderboard-table,
  .my-links-table,
  .readers-table,
  .leaderboard-table tbody,
  .my-links-table tbody,
  .readers-table tbody {
    display: block;
  }

  .leaderboard-table td,
  .my-links-table td,
  .readers-table td,
  .leaderboard-table .filed,
  .leaderboard-table .byline,
  .leaderboard-table .sent-to,
  .leaderboard-table .numeric,
  .my-links-table .link-headline,
  .my-links-table .link-url,
  .my-links-table .link-video,
  .my-links-table .numeric,
  .my-links-table .link-stats {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .filed-copy {
    flex: 1;
  }

  /* The rank is a number in the margin, so an entry with a photograph and one without still line up. */
  .leaderboard-table tbody tr {
    position: relative;
    padding-left: 28px;
  }

  .leaderboard-table .rank {
    position: absolute;
    top: 16px;
    left: 0;
    width: auto;
    margin: 0;
    font-size: 12px;
  }

  .leaderboard-table .filed a {
    font-size: 14px;
    line-height: 19px;
  }

  /* A teaser is the bait, not the story, and four lines of it is most of a phone. */
  .filed-teaser {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 17px;
  }

  .filed-thumb {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .filed-card {
    gap: 10px;
  }

  .filed-card:not(:has(.filed-thumb)) .filed-copy {
    margin-left: 62px;
  }

  .leaderboard-table .byline,
  .leaderboard-table .sent-to,
  .leaderboard-table .numeric,
  .my-links-table .link-url,
  .my-links-table .link-video,
  .my-links-table .numeric,
  .my-links-table .link-stats {
    display: inline-block;
    margin: 8px 14px 0 0;
    font-size: 12px;
    color: #909090;
  }

  /* A column headed Readers says what the number is on a wide screen. Down here the number says it itself. */
  .numeric-unit {
    display: inline;
  }

  .my-links-table .link-url {
    display: block;
    max-width: 100%;
  }

  .readers-table td ~ td {
    display: inline-block;
    margin: 8px 14px 0 0;
    font-size: 12px;
    color: #909090;
  }
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: .75em;
}

/* Every label on the site is a block with a background of its own, and a pill is neither. */
.category-pills .category-pill {
  display: inline-block;
  margin: 0;
  background: none !important;
}

.category-pills .category-pill input[type="radio"] {
  display: none;
}

.category-pills .category-pill span {
  display: block;
  padding: 5px 11px;
  border: 1px solid #2F2F2F;
  border-radius: 999px;
  color: #909090;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.category-pills .category-pill span:hover {
  border-color: #555;
  color: #fff;
}

.category-pills .category-pill:has(input:checked) span {
  border-color: #E9C56C;
  background-color: #2b2517;
  color: #E9C56C;
}

/* --- What actually got them, once the video has had its moment --- */

.prank-reveal {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0 24px;
}

.prank-reveal-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  color: #909090;
  text-align: center;
}

.prank-reveal-card {
  border: 1px solid #2F2F2F;
  border-radius: 6px;
  overflow: hidden;
  background-color: #1f1f1f;
}

.prank-reveal-photo {
  position: relative;
  margin: 0;
}

.prank-reveal-photo img {
  display: block;
  width: 100%;
}

.prank-reveal-credit {
  padding: 6px 12px;
  font-size: 11px;
  color: #8b8b8b;
  background-color: #1a1a1a;
}

.prank-reveal-credit a {
  color: #8b8b8b;
}

.prank-reveal-words {
  padding: 14px 16px 16px;
}

.prank-reveal-domain {
  margin: 0 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  color: #767676;
}

.prank-reveal-headline {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: #eee;
}

.prank-reveal-teaser {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: #8b8b8b;
}

.prank-reveal-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: #adadad;
  text-align: center;
}

.prank-reveal-count {
  margin: 8px 0 0;
  font-size: 13px;
  color: #E9C56C;
  text-align: center;
}

/* Five tiles share the row the three-across percentages assumed. The part below opens its own gap. */
.url-creator-video-selector {
  margin-bottom: 0;
  white-space: normal;
}

.url-creator-video-selector label.video-option {
  flex: 1 1 0;
  min-width: 0;
}

/* A name that cannot wrap runs straight over the tile beside it. */
.url-creator-video-selector label.video-option .video-still .info {
  padding: 0 6px;
  font-size: 13px;
  line-height: 16px;
  white-space: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* What the video is, under what it is called, since the name alone assumes you already know the joke. */
.video-name {
  display: block;
}

.video-tagline {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 14px;
  text-transform: none;
  color: rgba(255, 255, 255, .82);
}

/* Eight desks carry a prank headline; the other fifteen sit behind one of them rather than three more rows. */
.category-menu {
  position: relative;
}

.category-menu summary {
  padding: 5px 11px;
  border: 1px dashed #3d3d3d;
  border-radius: 999px;
  color: #909090;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.category-menu summary::-webkit-details-marker {
  display: none;
}

.category-menu summary:hover,
.category-menu[open] summary {
  border-color: #555;
  color: #fff;
}

/* More ends the line, so its shelf hangs from the right rather than off the side of the screen. */
.category-menu-more {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  background-color: #131313;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}

/* A wide screen has room for the desks to stop wrapping and the tiles to stop shrinking. */
@media screen and (min-width: 75em) {
  .url-creator {
    max-width: 1040px;
  }
}

/* The headline and its sections take the whole panel, and so does everything under them. */
.creator-top {
  margin-bottom: 18px;
}

.creator-top .category-pills {
  margin-bottom: 10px;
}

.creator-top .url-creator-title-info input[type="text"] {
  margin-bottom: 0;
}

/* One action, and the alternative reads as an aside rather than competing with it. */
.copy-hint {
  min-height: 16px;
}

.creator-aside {
  margin: 6px 0 0;
  text-align: center;
}

.creator-aside a {
  color: #909090;
  font-size: 12px;
}

.creator-aside a:hover {
  color: #E9C56C;
}

/* A padlock says members only in the space a badge saying so cannot fit. */
.members-lock {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: #E9C56C;
}

.members-lock svg {
  width: 13px;
  height: 13px;
}

.for-screen-readers {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The still is what a tile shows; the one you picked moves, and is the only gif the page asks for. */
.video-still {
  background-image: var(--still);
}

.video-option:has(input:checked) .video-still {
  background-image: var(--moving, var(--still));
  background-size: 130% 130%;
  background-position: center center;
}

/* The still is the poster; the clip only runs on the tile you picked, and only that one is fetched. */
.video-still-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.video-option:has(input:checked) .video-still-loop {
  opacity: 1;
}

/* The headline, then the teaser under it, with the photo standing the height of both beside them. */
.headline-and-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
}

.headline-and-photo .share-fields {
  grid-column: 1;
}

/* The headline section styles every input in it as the headline, which would put the file picker on show. */
.url-creator .url-creator-title-info .share-card-file {
  display: none;
}

.share-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.share-strip-image {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 128px;
  height: auto;
  margin-left: 8px;
  border-radius: 4px;
}

.share-strip-image .share-card-image-hint {
  font-size: 9px;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* The editor's offer sits inside the box it fills in, so the teaser has no label but that. */
.share-strip-teaser {
  position: relative;
  flex: 1;
  min-width: 0;
}

.share-strip .share-card-teaser-field {
  display: block;
  height: 50px;
  margin: 0;
  padding: 6px 96px 6px 8px;
  line-height: 18px;
}

.share-strip .editor-help {
  position: absolute;
  right: 8px;
  bottom: 7px;
  margin: 0;
  font-size: 11px;
}

/* The choice is what the message looks like when it lands, so it is made on two of them side by side. */
.link-unfurl-inner {
  min-width: 0;
  max-width: min(100%, clamp(420px, 56vw, 680px));
  margin: 0 auto;
}

.link-unfurl .domain-selector {
  padding-bottom: 24px;
}

/* One heading over each part, so the trick reads top to bottom: what they get, what they think they are
   getting, how it arrives. Heavier and wider than the labels inside the parts, which is what tells them apart. */
.creator-caption {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b9b9b9;
  text-align: center;
}

.preview-choices {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 4px 8px;
}

.unfurl-choice {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin: 0;
  background: none !important;
}

.unfurl-choice-title {
  display: block;
  margin: 0 0 8px;
  background: none !important;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: #8b8b8b;
  transition: color .15s ease;
}

.unfurl-choice:has(input:checked) .unfurl-choice-title {
  color: #E9C56C;
}

/* The blurbs sit on the bottom of both columns, whatever else one of them carries above. */
.unfurl-blurb {
  display: block;
  margin-top: auto;
  padding: 10px 2px 0;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  color: #767676;
}

.unfurl-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Each choice is shown where it is going. A phone is its proportions, a black screen and the furniture around
   the thread, so the aspect ratio does the sizing and the two screens come out level by having equal widths. */
.phone-mock {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 9 / 16;
  padding: 7px;
  border-radius: 20px;
  background-color: #2a2a2c;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  transition: box-shadow .15s ease, opacity .15s ease;
  opacity: .55;
}

.unfurl-choice:hover .phone-mock {
  opacity: .85;
}

/* The ring is drawn inside the bezel. A ring outside it is cut off by the clip the section opens with. */
.unfurl-choice:has(input:checked) .phone-mock {
  box-shadow: inset 0 0 0 2px #E9C56C, 0 10px 24px rgba(0, 0, 0, .5);
  opacity: 1;
}

/* The whole screen picks the choice it is showing. */
.phone-hit {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  padding: 0;
  background: none !important;
  border-radius: inherit;
  cursor: pointer;
}

.phone-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 7px 7px 5px;
  border-radius: 15px;
  background-color: #000;
  overflow: hidden;
}

.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 0 6px;
  color: #fff;
}

.phone-status-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-signal {
  width: 15px;
  height: 10px;
}

.phone-wifi {
  width: 13px;
  height: 10px;
}

.phone-battery {
  display: block;
  width: 20px;
  height: 11px;
  padding: 1.5px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 3px;
}

.phone-battery-fill {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: 1px;
  background-color: #fff;
}

/* The thread has a name at the top of it, which is most of what makes a screenshot read as Messages. */
.phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 8px 4px 10px;
  border-bottom: 1px solid #1c1c1e;
  color: #3b82f7;
}

.phone-header-back {
  width: 8px;
  height: 13px;
  flex: none;
}

.phone-avatar {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background-image: linear-gradient(160deg, #6e6e73, #3a3a3c);
}

.phone-header-facetime {
  width: 18px;
  height: 12px;
  flex: none;
}

/* A thread fills from the bottom, which is what leaves the short message level with the long one. A tall card
   scrolls off the top of the screen rather than stretching it past the shape of a phone. */
.phone-thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  margin-top: auto;
  padding: 10px 2px 0;
  overflow: hidden;
}

/* A thread with one message in it is mostly empty black, so the conversation it landed in is sketched above it. */
/* One line of a message, and the field one gets typed into, are the same height at every size of phone. */
.ghost-bubble {
  display: block;
  flex: none;
  width: 62%;
  height: 16px;
  margin-bottom: 5px;
  border-radius: 999px;
  background-color: #26262a;
}

.ghost-bubble-out {
  width: 46%;
  margin-left: auto;
  background-color: #2f5ea8;
}

.ghost-bubble-short {
  width: 38%;
}

/* The message is one they sent, so it hangs off the right the way a sent one does. A bubble that will not fit
   keeps its size and runs off the top of the thread, the way the last message in a long one does. */
.message-bubble {
  display: block;
  flex: none;
  margin-left: 8%;
  border-radius: 17px;
  background-color: #26262a;
  overflow: hidden;
}

.message-bubble .share-card {
  width: 100%;
  border: 0;
  border-radius: 0;
  background-color: #d1d1d6;
}

/* A rich link arrives as a photograph over a caption on light grey, whatever the rest of the thread is wearing. */
.message-bubble .share-card-caption {
  padding: 7px 10px 9px;
}

.message-bubble .share-card-domain {
  color: #6e6e73;
}

.message-bubble .share-card-headline {
  color: #1d1d1f;
}

/* The photograph keeps its shape as the phone grows rather than staying the one height at every size. */
.message-bubble .share-card-image {
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #c7c7cc;
}

.message-bubble .share-card-image.is-empty {
  background-image: linear-gradient(135deg, #c7c7cc 25%, #bdbdc2 25%, #bdbdc2 50%, #c7c7cc 50%, #c7c7cc 75%, #bdbdc2 75%);
}

.message-bubble .share-card-image-hint {
  color: #48484a;
}

.message-bubble .share-card-teaser {
  color: #3a3a3c;
}

/* A link nothing was hung on arrives as the url and a browser icon, and that is all. */
.message-bubble-bare {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
}

.bare-link-url {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 17px;
  color: #d4d4d4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bare-link-glyph {
  flex: none;
  width: 24px;
  height: 24px;
}

.bare-link-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.message-receipt {
  display: block;
  padding: 4px 4px 0;
  font-size: 9px;
  text-align: right;
  color: #8e8e93;
}

.phone-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 2px 0;
}

.phone-composer-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  background-color: #1c1c1e;
  color: #8e8e93;
  font-size: 12px;
  line-height: 1;
}

.phone-composer-field {
  flex: 1;
  min-width: 0;
  height: 16px;
  padding: 0 10px;
  border: 1px solid #2c2c2e;
  border-radius: 999px;
  color: #6e6e73;
  font-size: 10px;
}

.phone-home {
  display: block;
  width: 34%;
  height: 3px;
  flex: none;
  margin: 6px auto 0;
  border-radius: 999px;
  background-color: #48484a;
}

/* Two phones side by side is the whole comparison, so a narrow screen shrinks them rather than stacking them. */
@media screen and (max-width: 39.99em) {
  /* Three gutters stacked inside each other cost a phone 68px of its width, which is a desk or two off
     the front page. One gutter is enough to keep a thumb off the edge. */
  .page-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .url-creator,
  .url-creator-inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* Five tiles across a phone are five slivers, and the row that wraps them is set further up the sheet. */
  .url-creator-video-selector label.video-option {
    flex: 0 0 calc(50% - 4px);
  }

  /* A desk or two more on the row is worth a point of type and a few pixels of pill. */
  .category-pills .category-pill span,
  .category-menu summary {
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: .06em;
  }

  /* Hung off a pill at the end of the row, the shelf of desks opens past the left edge of the screen.
     It hangs off the row itself instead, which is as wide as the page. */
  .category-pills {
    position: relative;
  }

  .category-menu {
    position: static;
  }

  .category-menu-more {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  /* Beside the headline on a phone the photo leaves no room to type, so it goes under the teaser it dresses. */
  .headline-and-photo {
    display: block;
  }

  .share-strip-image {
    width: 100%;
    height: 56px;
    margin: 10px 0 0;
  }

  /* Anything under 16px is a field Safari zooms the whole page into the moment it is tapped. */
  .url-creator .url-creator-title-info input[type="text"] {
    height: 56px;
    font-size: 16px;
  }

  .share-strip .share-card-teaser-field {
    height: 76px;
    padding: 10px;
    font-size: 16px;
    line-height: 21px;
  }

  /* A link tucked into the corner of a box this narrow is a link written over the placeholder. */
  .share-strip .editor-help {
    position: static;
    display: block;
    margin-top: 6px;
    text-align: right;
  }

  /* Two hostnames side by side are wider than a phone, and the pill they sit in cannot shrink them. The
     caption goes above them rather than breaking in half beside them. */
  .domain-selector {
    flex-direction: column;
    gap: 10px;
  }

  .domain-selector-caption {
    white-space: nowrap;
  }

  /* A pill is a shape for one row of choices. Stacked, that radius wraps the whole block in a stadium. */
  .domain-options {
    flex-direction: column;
    width: 100%;
    border-radius: 12px;
  }

  .domain-option {
    justify-content: center;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
  }

  .preview-choices {
    gap: 8px;
  }

  .unfurl-choice-title {
    font-size: 10px;
    letter-spacing: .06em;
  }

  .phone-mock {
    padding: 5px;
    border-radius: 16px;
  }

  .phone-screen {
    padding: 5px 5px 4px;
    border-radius: 12px;
  }

  .phone-status-time {
    font-size: 9px;
  }

  .phone-avatar {
    width: 20px;
    height: 20px;
  }

  .phone-header {
    padding: 6px 2px 8px;
  }

  .message-bubble {
    margin-left: 4%;
    border-radius: 14px;
  }

  .message-bubble .share-card-caption {
    padding: 7px 8px 8px;
  }

  .share-card-domain {
    font-size: 9px;
  }

  .share-card-headline {
    font-size: 12px;
    line-height: 15px;
  }

  .share-card-teaser {
    font-size: 10px;
    line-height: 14px;
  }

  .message-bubble-bare {
    gap: 6px;
    padding: 10px;
  }

  .bare-link-url {
    font-size: 11px;
  }

  .bare-link-glyph {
    width: 20px;
    height: 20px;
  }

  .unfurl-blurb {
    padding-top: 8px;
    font-size: 11px;
    line-height: 15px;
  }
}

/* A lock is an answer, not an errand: the pitch comes to them and the page they were working on stays put. */
.members-gate {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
  background-color: #1a1a1a;
  color: #e8e8e8;
}

.members-gate::backdrop {
  background-color: rgba(0, 0, 0, .72);
}

/* The dialog is already the panel. The membership page's own panel inside it was the second frame. */
.members-gate-inner.premium {
  position: relative;
  max-height: calc(100vh - 64px);
  margin: 0;
  padding: 26px 28px 28px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow-y: auto;
}

/* This dialog has no header row to sit in, so its close hangs in the corner of the panel itself. */
.members-gate-close {
  position: absolute;
  top: 10px;
  right: 12px;
}

.members-gate .premium-lede {
  font-size: 14px;
  line-height: 21px;
}

/* The link forms as the headline is typed. It is there to watch, not to grab; the button copies it. */
.building-url {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: #6f6f6f;
  word-break: break-all;
  user-select: none;
  -webkit-user-select: none;
}

/* This was a row when a category select sat beside the headline. It stacks now. */
.creator-top .url-creator-title-info {
  display: block;
}

.creator-top .url-creator-title-info input[type="text"] {
  width: 100%;
}

/* Two long hostnames and a caption do not fit across a column this narrow. */
.domain-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 0 12px;
}

.domain-selector-caption {
  margin: 0;
}

/* One line of sections at any width, with the rest waiting behind More. */
.category-pills {
  flex-wrap: nowrap;
}

.category-menu-more {
  flex-wrap: wrap;
}

/* Each part opens on a rule with the same air above and below it, so a part looks like a part. */
.creator-top,
.link-unfurl {
  margin: 42px 0 0;
  padding-top: 36px;
  border-top: 1px solid #262626;
}

.creator-aside {
  margin: 42px 0 26px;
}