@charset "UTF-8";

/* Fonts */

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-HeavyItalic.woff2') format('woff2'),
  url('../fonts/Saans-HeavyItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Heavy.woff2') format('woff2'),
  url('../fonts/Saans-Heavy.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-BoldItalic.woff2') format('woff2'),
  url('../fonts/Saans-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Bold.woff2') format('woff2'),
  url('../fonts/Saans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-SemiBoldItalic.woff2') format('woff2'),
  url('../fonts/Saans-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-SemiBold.woff2') format('woff2'),
  url('../fonts/Saans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-MediumItalic.woff2') format('woff2'),
  url('../fonts/Saans-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Medium.woff2') format('woff2'),
  url('../fonts/Saans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-RegularItalic.woff2') format('woff2'),
  url('../fonts/Saans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Regular.woff2') format('woff2'),
  url('../fonts/Saans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-LightItalic.woff2') format('woff2'),
  url('../fonts/Saans-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Light.woff2') format('woff2'),
  url('../fonts/Saans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'spacemono';
  src: url('../fonts/SpaceMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

:root
{
  --sans-serif: "saans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --monospace: 'spacemono', ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
}

/* Colors */

:root
{
  --white: rgba(255,255,255,1);
  --lightgray: rgba(235,235,235,1);
  --midgray: rgba(128, 128, 128, 1);
  --grayblack: rgba(40,40,40,1);
  --black: rgba(0,0,0,1);
  --purple: rgba(108,0,255,1);
  --light-purple: #a86aff;
  --blue: rgba(0,156,255,1);
  --dimblue: rgba(57,128,181,1);
  --alphablue: rgba(0,156,255,.6);
  --red: rgba(255,0,84,1);
  --orange: rgba(245,80,35,1);
  --yellow: rgba(247,181,0,1);
  --green: rgba(34,209,25,1);
  --teal: rgba(33,198,169,1);
  --pink: #ff2bbc;
}

@supports (color: color(display-p3 1 1 1 / 1))
{
  :root
  {
    --white: color(display-p3 1 1 1);
    --lightgray: color(display-p3 0.922 0.922 0.922);
    --midgray: color(display-p3 0.5 0.5 0.5);
    --black: color(display-p3 0 0 0);
    --purple: color(display-p3 0.424 0 1);
    --light-purple: color(display-p3 0.659 0.416 1);
    --blue: color(display-p3 0 0.612 1);
    --dimblue: color(display-p3 0.224 0.502 0.71);
    --alphablue: color(display-p3 0 0.612 1 / .6);
    --red: color(display-p3 1 0 0.329);
    --orange: color(display-p3 .933 .313 0.137);
    --yellow: color(display-p3 0.969 0.71 0);
    --green: color(display-p3 0.133 0.82 0.098);
    --teal: color(display-p3 0.129 0.77 0.66);
    --pink: color(display-p3 1 0.168 0.734);
  }
}

@media (prefers-color-scheme: dark)
{
  :root
  {
    --purple: var(--light-purple);
  }
}

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

html
{
  margin: 0;
  padding: 1rem 0;

  --background: var(--lightgray);
  --text: var(--black);
  --card: var(--white);
  --cardText: var(--grayblack);
}

@media (prefers-color-scheme: dark)
{
  html {
    --background: var(--black);
    --text: var(--lightgray);
    --card: var(--grayblack);
    --cardText: var(--white);
  }
}

body
{
  margin: 0 auto;
  padding: 0;
  background-color: var(--background);
  color: var(--text);
  font-family: var(--sans-serif);
  max-width: 120rem;
}

header
{
  padding: 0 1rem;

  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5ch;
  align-items: center;
  font-size: .75em;
}

header::before
{
  content: "";
  display: block;
  width: 4ch;
  height: 4ch;
  /* background-image: url("https://signserver.panic.com/get/altsvg"); */
  background-image: url("https://assets.panic.com/elist/elist-panic-logo.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


header nav ul,
header nav li
{
  list-style: none;
  display: contents;
}

header nav
{
  display: inline-flex;
  flex-wrap: wrap;
  color: var(--dimblue);
  font-weight: 300;
}

header nav a
{
  display: block;
  margin: 0 .25ch;
  text-decoration: none;
  color: inherit;
  letter-spacing: -0.05ch;
}

header nav a+ul a::before
{
  content: " / ";
  color: rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark)
{
  header nav
  {
    color: rgba(255,255,255,0.75);
  }

  header nav a+ul a::before
  {
    color: rgba(255,255,255,0.35);
  }
}

.intro
{
  font-size: 2em;
  line-height: 1.15em;
  font-weight: 800;
  letter-spacing: -0.03ch;
  text-align: center;
  max-width: 26ch;
  margin: 1ch auto;
}

.intro p
{
  margin: 0;
}

p
{
  text-align: center;
}

a
{
  text-decoration: none;
  color: inherit;
}
a:hover
{
  text-decoration: underline;
}


/* List */

#services
{
  list-style: none;

  padding: 0;
  margin: 0;

  text-align: center;
  letter-spacing: -0.02ch;
}

/* one "card" */
#services li
{
  display: block;
  position: relative;

  width: fit-content; 
  margin: .5em auto .5em auto;
  padding: .2em 1em .25em 1em;

  font-size: .95em;

  background: var(--card);
  color: var(--cardText);

  box-shadow: 0 .05em .05em rgba(0,0,0,.15);
  border: .04em solid rgba(0,0,0,.05);
}

#services li::before,
#services li::after
{
  display: inline-block;
  position: relative;
  content: '';
  white-space: nowrap;

  width: 1em;
  height: 1em;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
}

#services li.big
{
  font-size: 1.2em;
}

#services p
{
  font-size: 1.2em;
  font-weight: 600;
}

#services section
{
  margin: 2.5em 0;
}

#services ul
{
  list-style: none;
  padding: 0;
  margin: 0;
}

#services li a
{
  font-weight: 600;
  white-space: nowrap;
}

/* Services */

.mastodon { color: var(--purple); }
.bluesky { color: var(--blue); }
.tiktok { color: var(--teal); }
.youtube { color: var(--red); }

.elist { color: var(--pink); }
.blog { color: var(--green); }
.podcast { color: var(--purple); }
.email { color: var(--blue); }

.playdate { color: var(--yellow); }
.live { color: var(--midgray); }

.medal
{  
  position: absolute;  
  
  width: 1.5em;
  height: 1.5em;
  /* top: calc(50% - .75em); */
  top: -.4em;
  left: -.7em;
  
  border-radius: .75em;
  
  color: white;  
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0));
  
  font-size: .9em;
  font-weight: bold;
  line-height: 1.55em; 
  
  box-shadow: .05em .05em .1em rgba(0,0,0,.2);
}
#links_mail .medal
{
  padding-left: 0;
  background-color: var(--pink);
}
#links_mastodon .medal
{
  background-color: var(--purple);
}

#links_instagram a
{
 background: linear-gradient(90deg, color(display-p3 0.247 0.397 1), color(display-p3 0.708 0.084 1), color(display-p3 0.985 0.211 0.716), color(display-p3 1 0.771 0.238));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#links_instagram a.secondary
{
 background: linear-gradient(270deg, color(display-p3 0.247 0.397 1), color(display-p3 0.708 0.084 1), color(display-p3 0.985 0.211 0.716), color(display-p3 1 0.771 0.238));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

section#priorityTop li#links_mastodon
{
  max-width: 90%;
}
section#priorityTop li span
{
  display: inline-block;
  margin-left: 1.2em;
}

#services #links_mail
{
  padding-left: .2em;
}
#links_mail::after
{
  top: .2em;
  margin-left: .3em;
  background-color: var(--pink);
  -webkit-mask-image: url('../images/mail.svg');
  mask-image: url('../images/mail.svg');
}

#services #links_mastodon
{
  padding-right: 0em;
}
#links_mastodon::before
{
  top: .2em;
  margin-right: .15em;
  margin-left: .1em;
  background-color: var(--purple);
  -webkit-mask-image: url('../images/mastodon.svg');
  mask-image: url('../images/mastodon.svg');
}
#links_bluesky::after
{
  top: .15em;
  margin-left: .3em;
  background-color: var(--blue);
  -webkit-mask-image: url('../images/bluesky.svg');
  mask-image: url('../images/bluesky.svg');
}
#links_tiktok::before
{
  top: .15em;
  margin-right: .25em;
  background-color: var(--teal);
  -webkit-mask-image: url('../images/tiktok.png');
  mask-image: url('../images/tiktok.png');
}
#links_youtube::after
{
  top: .15em;
  margin-left: .25em;
  background-color: var(--red);
  -webkit-mask-image: url('../images/video.svg');
  mask-image: url('../images/video.svg');
}

#links_blog::after
{
  top: .15em;
  margin-right: .25em;
  background-color: var(--green);
  -webkit-mask-image: url('../images/blog.svg');
  mask-image: url('../images/blog.svg');
}
#services #links_playdate::before
{
  width: 1.4em;
  top: .15em;
  margin-left: .3em;
  background-color: var(--yellow);
  -webkit-mask-image: url('../images/playdate.svg');
  mask-image: url('../images/playdate.svg');
  transform: rotate(10deg);
}


#services #links_podcast::before
{
  top: .15em;
  margin-right: .2em;
  background-color: var(--purple);
  -webkit-mask-image: url('../images/twin-turbo.svg');
  mask-image: url('../images/twin-turbo.svg');
}
#services #links_podcast::after
{
  width: .9em;
  height: .9em;
  top: .15em;
  margin-left: .2em;
  background-color: var(--yellow);
  -webkit-mask-image: url('../images/podcast.svg');
  mask-image: url('../images/podcast.svg');
}
#links_live::after
{
  top: .15em;
  margin-left: .25em;
  background-color: var(--midgray);
  -webkit-mask-image: url('../images/live.svg');
  mask-image: url('../images/live.svg');
}

#services #links_email_us::after
{
  width: .9em;
  height: .9em;
  top: .15em;
  margin-left: .2em;
  background-color: var(--blue);
  -webkit-mask-image: url('../images/write.svg');
  mask-image: url('../images/write.svg');
}

#services #links_instagram::before
{
  top: .2em;
  margin-right: .3em;
  background: linear-gradient(225deg, color(display-p3 0.247 0.397 1), color(display-p3 0.708 0.084 1), color(display-p3 0.985 0.211 0.716), color(display-p3 1 0.771 0.238));
  -webkit-mask-image: url('../images/instagram.svg');
  mask-image: url('../images/instagram.svg');
}

#services li:nth-child(1)::before,
#services li:nth-child(1)::after
{
  transform: rotate(5deg);
}
#services li:nth-child(2)::before,
#services li:nth-child(2)::after
{
  transform: rotate(-3deg);
}
#services li:nth-child(3)::before,
#services li:nth-child(3)::after
{
  transform: rotate(4deg);
}

/* Footer */

footer
{
  margin: 6rem 0;

  color: var(--midgray);

  font-size: 65%;
  text-align: center;
}
footer p
{
  margin: .5em;
}

footer #japan
{
  display: inline-block;
  padding-left: 2.4rem;
  text-align: right;
  background: url("../images/lang-jp.svg") left 1.6rem no-repeat;
  background-size: 2rem 1.6rem;
  line-height: 4.6rem;
}


/* Dark mode */

@media (prefers-color-scheme: dark)
{

}



/* Scaling */

html
{
  font-size: 1vw;
}

body
{
  font-size: 4rem;
}

@media (min-width: 670px)
{
  body
  {
    font-size: 3rem;
  }
  .intro
  {
    font-size: 2.5em;
  }
  
}



@media (min-width: 1000px)
{
  html
  {
    font-size: 10px;
  }
  
  section#priorityTop li#links_mastodon
  {
    max-width: auto;
  }
  section#priorityTop li span
  {
    display: inline;
    margin-left: 0;
  }
}