:root {
  --tangerine: color(display-p3 1 0.525 0.424);
  --ink: #262525;
  --cream: #F7F4F1;
}

body {
  padding: 0;
  margin: 0;
  
  color: var(--ink);
  background: var(--cream);
  font-family: -apple-system, system-ui, sans-serif;
}

h1 {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
  font-variation-settings: "wght" 500, "wdth" 130;
  text-transform: uppercase;
  font-size: 1.65em;
  margin: 0; padding: 0;
}

h2 {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
  font-variation-settings: "wght" 500, "wdth" 60;
  text-transform: uppercase;
  font-size: 1.65em;
}

h2 b {
  font-variation-settings: "wght" 700, "wdth" 60;
}

h2 .dot {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin: 0 0.08em -0.1em 0.05em;
  background-color: var(--tangerine);
  border-radius: 50%;
}

h3 {
  font-variation-settings: "wght" 500, "wdth" 130;
  text-transform: uppercase;
  font-size: 0.9em;
}

h4 {
  font-variation-settings: "wght" 500, "wdth" 130;
  text-transform: uppercase;
  font-size: 0.7em;
}

h1, h2, h3, h4, h5 {
  font-family: -apple-system, system-ui, sans-serif;
  margin: 0; padding: 0;
}

h4, h5 {
  font-weight: 400;
}

p {
  margin: 0; padding: 0;
  line-height: 1.35em;
}

a {
  color: var(--tangerine);
}

.tangerine {
  color: var(--tangerine);
}

.cream {
  color: var(--cream);
}

.secondary {
  opacity: 50%;
}

.footnote {
  font-size: 0.7em;
}

.callout {
  font-size: 1.0em;
  font-variation-settings: "wght" 500, "wdth" 130;
}

.horizontal_padded {
  padding: 0 40px 0 40px;
}

.horizontal_padded-small {
  padding: 0 15px 0 15px;
}

.vertical_padded {
  padding: 40px 0 40px 0;
}

.vertical_padded-small {
  padding: 15px 0 15px 0;
}

div.hstack, div.hstack_adaptive {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

div.vstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#yoshitaka { /* finalist fantasier */
  display: grid;
  place-items: center;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  
  margin: 10px 0 0 10px;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--tangerine);
}

#header .xtra {
  display: none;
}

#social_bug {
  position: fixed;
  top: 0;
  right: 0;
  
  margin: 10px 10px 0 0;
  
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: var(--tangerine);
  gap: 7px;
}

#the_column {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  height: 100vh;
  
  min-width: 300px;
  max-width: 400px;
  
  text-align: center;
}

#the_column.centered {
  justify-content: center;
}

#the_column.block {
  align-items: flex-start;
  text-align: left;
  
  height: unset;
}

#block_content {
  padding: 10px 0 30px 0;
}

#block_content h2, #block_content h3 {
  margin-top: 25px;
}

#block_content h3 {
  font-variation-settings: "wght" 650, "wdth" 130;
}

#block_content b {
  font-weight: 570;
}

#block_content p {
  margin-top: 15px;
}

#ticket {
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

#ticket .deco {
  width: 100%;
  background-size: 12px 6px;
  position: relative;
  left: 0px;
  top: 0px;
  height: 6px;
}

#ticket .deco.head {
  display: none;
  background-image: url(/img/zig_top.png);
}

#ticket .deco.foot {
  background-image: url(/img/zag_bottom.png);
}

#ticket .content {
  background-color: var(--tangerine);
  padding: 20px;
}

#takepass {
  z-index: -10;
  display: grid;
  place-items: center;
  
  padding: 15px 0 15px 0;
  
  > * {
    grid-area: 1 / 1;
  }
}

#takepass .wheel {
  width: 300px;
  height: 300px;
  z-index: 1;
  
  transform: rotate(var(--angle));
  animation: revolve 25s linear infinite;
}

#takepass .code {
  width: 166px;
  height: 166px;
  z-index: 2;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  
  margin: 0 0 10px 10px;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 0.7em;
  text-transform: uppercase;
  color: var(--tangerine);
}

#footer .logo {
  height: 24px;
  width: auto;
  padding-bottom: 3px;
}

.solar_system {
  display: grid;
  place-items: center;
  height: 300px;
}

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@keyframes revolve {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.solar_system .planet {
  display: block;
  grid-area: 1 / 1;
  
  --x-amplitude: 100px;
  --y-amplitude: 100px;
  --x: calc(cos(var(--angle)) * var(--x-amplitude));
  --y: calc(sin(var(--angle)) * var(--y-amplitude));
  
  transform:
    rotate(var(--rotation))
    translate(var(--x), var(--y))
    rotate(calc(var(--rotation) * -1));
      
  animation: revolve 25s linear infinite;
}

img.pfp {
  clip-path: circle(48%);
  background-color: #ddd;
  object-fit: cover;
  filter: saturate(0);
}

.solar_system .planet .vstack {
  gap: 3px;
  font-size: 0.8em;
  font-weight: 600;
  max-width: 100px;
  max-height: 70px;
  overflow: hidden;
}

.solar_system .planet .pfp {
  width: 50px;
  height: 50px;
}

.solar_system .planet .count {
  width: 22px;
  height: 16px;
  padding: 3px 0 3px 0;
  font-size: 0.8em;
  
  background-color: var(--cream);
  border-radius: 50%;
  color: var(--tangerine);
}

.spacer {
  flex-grow: 1;
}

.code {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, monospace;
  letter-spacing: 0.3em;
  font-weight: 600;
  text-transform: uppercase;
}

.code.large {
  font-size: 2.5em;
  text-align: center;
}

.only_desktop {
  display: initial;
}

.only_desktop-large {
  display: none;
}

.only_iphone {
  display: none;
}

@media only screen and (max-width: 680px) {
  .only_desktop {
    display: none !important;
  }
  
  .only_iphone {
    display: initial !important;
  }
  
  div.hstack_adaptive {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  h3 {
    font-size: 1.0em;
  }
  
  h4 {
    font-size: 1.0em;
  }
  
  #header .xtra {
    display: initial;
  }
  
  #the_column {
    
    width: 100vw;
    
    min-width: inherit;
    max-width: inherit;
  }
  
  #the_column.centered {
    height: 60vh;
  }
  
  #block_content {
    padding: 50px 15px 50px 15px;
  }
  
  #ticket {
    margin-top: 20px;
  }
  
  #ticket .deco.head {
    display: block;
  }
  
  #header, #footer {
    position: unset;
    bottom: unset;
    left: unset;
    align-items: center;
  }
  
  #social_bug {
    display: none;
  }
  
  #takepass .wheel {
	  width: 300px;
	  height: 300px;
  }
  
  #footer {
    padding: 40px 10px 10px 10px;
  }
  
  #footer .logo {
    height: 22px;
    padding-bottom: 15px;
  }
  
  #qr_code {
    display: none;
  }

}

/* Wide-screen, show some more wide bits */
@media only screen and (min-width: 1000px) {
  #header .xtra, .only_desktop-large {
    display: initial;
  }
}

/* Super-tall screen, center the main content */
@media only screen and (min-height: 1000px) {
  #the_column {
    justify-content: center;
  }
}