@font-face {
  font-family:Campaign;
  src:url('/assets/cormorant-garamond-500.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap
}
:root {
  --paper:#e8e2d5;
  --muted:#a39d90;
  --ink:#171714;
  --hairline:rgba(224,213,190,.2);
  color-scheme:dark
}
.not-found {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}
.not-found p { margin: 0; }
.not-found h1 { line-height: 1; }
.not-found a { color: var(--paper); text-underline-offset: .3em; padding: .75rem; }
.not-found a:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
* {
  box-sizing:border-box
}
html {
  background:var(--ink)
}
body {
  margin:0;
  color:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
.campaign {
  isolation:isolate;
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:720px;
  height:100svh;
  padding:30px 42px 24px;
  overflow:hidden;
  background:radial-gradient(ellipse at 52% 47%,#302c24 0, #1a1915 48%,#151613 85%)
}
.campaign:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.89' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}
.metadata {
  font-size:10px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.115em
}
.masthead {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-top:1px solid var(--hairline);
  padding-top:17px;
  position:relative;
  z-index:5
}
.company {
  font-weight:600;
  font-size:11px;
  letter-spacing:.13em
}
.division {
  display:block;
  font-size:9px;
  font-weight:400;
  color:var(--muted);
  margin-top:4px;
  letter-spacing:.11em
}
.edition {
  color:var(--muted);
  padding-top:2px
}
.slash {
  padding:0 12px;
  color:#726b5d
}
.file {
  text-align:right
}
.file-number {
  display:block;
  color:var(--muted);
  margin-top:4px
}
.stage {
  position:relative;
  margin-top:24px;
  min-height:0
}
.topline {
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:9px
}
.identity-wrap {
  position:absolute;
  inset:7% 0 auto;
  z-index:3;
  pointer-events:none
}
h1 {
  margin:0;
  font-family:Campaign,'Bodoni MT','Didot',Georgia,serif;
  font-weight:500;
  text-align:center;
  font-size:clamp(110px,15.5vw,245px);
  line-height:.71;
  letter-spacing:-.063em
}
h1 span {
  display:block;
  animation:type-in 1.6s ease both
}
.young {
  padding-right:17%;
}
.draper {
  padding-left:11%;
  margin-top:.12em;
  animation-delay:170ms!important
}
.announcement {
  position:absolute;
  z-index:4;
  bottom:13%;
  left:0;
  right:0;
  text-align:center;
  animation:type-in 1.8s 1s both
}
.coming {
  font-size:8px;
  letter-spacing:.28em;
  color:#c4bba8
}
.announcement p {
  font-size:11px;
  letter-spacing:.21em;
  line-height:1.7;
  margin:15px 0 0;
  font-weight:400
}
.announcement-line {
  display:block;
  height:1px;
  width:28px;
  margin:21px auto 0;
  background:var(--paper)
}
.mobile-break {
  display:none
}
.plate {
  position:absolute;
  right:0;
  bottom:32px;
  color:var(--muted);
  font-size:8px;
  display:flex;
  gap:18px
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--hairline);
  padding-top:18px;
  font-size:8px;
  color:var(--muted);
  gap:20px
}
@keyframes type-in {
  from {
    opacity:0;
    transform:translateY(9px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1600px) {
  .campaign {
    padding:36px 58px 28px
  }
  .stage {
    margin-top:34px
  }
  .identity-wrap {
    top:9%
  }
  h1 {
    font-size:min(15.7vw,30vh)
  }
}
@media(max-height:760px) and (min-width:761px) {
  .campaign {
    min-height:560px;
    padding-top:21px
  }
  .stage {
    margin-top:15px
  }
  h1 {
    font-size:min(15.5vw,28vh)
  }
  .identity-wrap {
    top:9%
  }
  .announcement {
    bottom:13%
  }
}
@media(max-width:760px) {
  .campaign {
    padding:23px 22px 20px;
    min-height:640px
  }
  .masthead {
    padding-top:14px
  }
  .company {
    font-size:10px
  }
  .division {
    font-size:8px
  }
  .edition {
    display:none
  }
  .file {
    font-size:8px
  }
  .file-number {
    font-size:8px
  }
  .stage {
    margin-top:30px
  }
  .topline {
    font-size:7px;
    letter-spacing:.11em
  }
  .topline span:last-child {
    display:none
  }
  .identity-wrap {
    top:13%;
    left:-24px;
    right:-24px
  }
  h1 {
    font-size:24vw;
    letter-spacing:-.07em;
    line-height:.81
  }
  .young {
    padding-right:13%
  }
  .draper {
    padding-left:0;
    margin-top:.04em
  }
  .side-note {
    display:none
  }
  .announcement {
    bottom:21%
  }
  .announcement p {
    font-size:9px;
    letter-spacing:.16em;
    line-height:1.8;
    margin-top:12px
  }
  .coming {
    font-size:7px
  }
  .announcement-line {
    margin-top:15px;
    width:22px
  }
  .plate {
    bottom:23px;
    font-size:7px
  }
  .footer {
    font-size:7px;
    padding-top:15px;
    gap:10px;
    flex-wrap:wrap
  }
  .footer .slash {
    padding:0 5px
  }
  .footer>span:last-child {
    margin-left:auto
  }
}
@media(max-width:380px) {
  .campaign {
    padding-left:18px;
    padding-right:18px
  }
  .announcement p {
    font-size:8px
  }
}
@media(max-width:760px) and (max-height:700px) {
  .campaign {
    min-height:560px;
    padding-top:16px;
    padding-bottom:14px
  }
  .stage {
    margin-top:18px
  }
  .identity-wrap {
    top:12%
  }
  .announcement {
    bottom:18%
  }
  .plate {
    bottom:13px
  }
  .footer {
    padding-top:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media(forced-colors:active) {
  .announcement,.identity-wrap {
    color:CanvasText
  }
}
/* The Don: a centered, typography-only campaign. */
.identity-wrap {
  inset: 50% 0 auto;
  transform: translateY(-56%);
}
h1 {
  font-size: clamp(110px, 14vw, 225px);
  line-height: .76;
}
.young {
  padding-right: 0;
}
.draper {
  padding-left: 0;
  margin-top: .1em;
}
h1 .the-don {
  font-size: .32em;
  font-style: italic;
  letter-spacing: -.045em;
  line-height: 1;
  margin-top: .37em;
  animation-delay: 350ms;
}
.announcement {
  bottom: 4%;
}
.plate {
  bottom: 22px;
}
@media (min-width: 761px) and (max-height: 760px) {
  h1 {
    font-size: min(14vw, 25vh);
  }
  .identity-wrap {
    top: 46%;
  }
  .announcement {
    bottom: 4%;
  }
}
@media (max-width: 760px) {
  .identity-wrap {
    inset: 45% -16px auto;
  }
  h1 {
    font-size: 24vw;
    line-height: .81;
  }
  .young, .draper {
    padding: 0;
  }
  .draper {
    margin-top: .05em;
  }
  h1 .the-don {
    font-size: .4em;
    margin-top: .4em;
  }
  .announcement {
    bottom: 12%;
  }
  .plate {
    bottom: 20px;
  }
}
@media (max-width: 760px) and (max-height: 700px) {
  .identity-wrap {
    top: 43%;
  }
  .announcement {
    bottom: 11%;
  }
  .plate {
    bottom: 12px;
  }
}