@charset "UTF-8";
:root {
  --gutter: clamp(1ch, 2.5vmax, 3ch);
  --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
  --line-length: 70ch;
  --page-padding-inline: calc(
    (100vw - min(90rem, 100vw - var(--gutter) * 3)) / 2
  );
  --section-spacing: clamp(var(--stack) * 4, 9vmax, var(--stack) * 6);
  --pt-double-canon: 4.666rem;
  --pt-canon: 3.999rem;
  --pt-double-great-primer: 2.999rem;
  --pt-double-english: 2.333rem;
  --pt-double-pica: 2rem;
  --pt-paragon: 1.666rem;
  --pt-great-primer: 1.5rem;
  --pt-english: 1.166rem;
  --pt-pica: 1rem;
  --pt-small-pica: 0.916rem;
  --pt-long-primer: 0.833rem;
  --pt-bourgeois: 0.75rem;
  --pt-chu: 3.499rem;
  --pt-xiaochu: 2.999rem;
  --pt-yi: 2.166rem;
  --pt-xiaoyi: 1.999rem;
  --pt-er: 1.833rem;
  --pt-xiaoer: 1.5rem;
  --pt-san: 1.333rem;
  --pt-xiaosan: 1.25rem;
  --pt-si: 1.166rem;
  --pt-xiaosi: 1rem;
  --pt-wu: 0.875rem;
  --pt-xiaowu: 0.75rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: clamp(100%, 90% + 0.5vw, 150%);
  font-weight: 300;
  line-height: 1.4;
  color-scheme: dark light;
  --text-shadow: 0px 0px 8px rgba(161, 165, 247, .8);
   /*========== Box, Drop & Text Shadow Hover ==========*/
    --box-shadow-inset-hover: inset 0 19px 28px -18px rgba(255, 255, 255, .5), 
                              inset 0 4px 6px -3px rgba(255, 255, 255, 1), 
                              inset 0 -51px 44px -42px rgba(96, 68, 144, .3), 
                              inset 0 59px 60px -32px rgba(202, 172, 255, .3), 
                              inset 0 4px 16px rgba(154, 146, 210, .3), 
                              inset 0 2px 25px rgba(227, 222, 255, .23);

    --drop-shadow-hover:  0 0 14px rgba(161, 165, 247, .8);

    --text-shadow-hover: 10px 10px 14px rgba(161, 165, 247, .8);

    --box-shadow-inset-button-hover: inset 0 4px 7px -4px rgba(255, 255, 255, .5), 
                                     inset 0 1px 2px -1px rgba(255, 255, 255, 1), 
                                     inset 0 -20px 16px -32px rgba(96, 68, 144, .3), 
                                     inset 0 28px 25px -20px rgba(202, 172, 255, .3), 
                                     inset 0 1px 4px rgba(154, 146, 210, .3), 
                                     inset 0 1px 16px rgba(227, 222, 255, .2);
                                     
    /*========== Filter Blur ==========*/
    --filter-blur: blur(100px);
}
}


@media (prefers-color-scheme: light) {
  :root {
	color: #000;
	background-color: #fff;
  }
}

.slide-bar {
  position: relative;
  color: transparent;
  animation: fill-text-white 2s 1.6s forwards;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    animation: slide-in-out 2s cubic-bezier(0.75, 0, 0, 1) forwards;
  }
}

@keyframes slide-in-out {
  50% {     transform-origin: left;
  }

  50.1% {
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes fill-text-white {
  to {
    color: white;
  }
}


*,
*::before,
*::after {
  font-feature-settings: "kern";
  -webkit-font-kerning: normal;
		  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  gap: var(--section-spacing);
  padding-inline: var(--page-padding-inline);  
  color: #fff;
  background-color: #000;
  overflow-x: hidden;
}

header {
  display: grid;
  align-content: end;
  min-block-size: 100vh;
  min-block-size: 100dvb;
  padding-block: var(--section-spacing);
}

 header .title {
    margin-bottom: 1vh;
padding-left: calc(1.65vw - .55vw);
line-height:1.4vh;
font-size: calc(.28ch + .3332ch);
  font-weight: 300;
  letter-spacing: calc(.89em - .9em);
  text-indent:-.65em;
    &::before {
      background: rgba(0, 0, 0, 0.0);
      animation-delay: 1s8
    }
  }


 header .subtitle {
 	margin-top: 8px;
 	
    height: 30vh;
    animation-delay: 1.95s;
	  letter-spacing: calc(.94em - .94em);
line-height:.6ex;
    &::before {
      background: rgba(0, 0, 0, 0.0);
    }

  }
  
/*@media screen and (min-width: 320px) {
header .subtitle {
    line-height:1.5vh;
 }
 header .title {	
  letter-spacing: .34em;
    line-height:1vh;
 }
}

@media screen and (min-width: 380px) {
header .subtitle {
    line-height:1.5vh;
 }
 header .title {	
  letter-spacing: .29em;
    line-height:1vh;
 }
}

@media screen and (min-width: 600px) {
header .subtitle {
    line-height:1.5vh;
 }
 header .title {	
  letter-spacing: .16em;
    line-height:1vh;
 }
}

@media screen and (min-width: 960px) {
header .subtitle {
    line-height:1.45vh;
 }
 header .title {	
  letter-spacing: .065em;
 }
}

@media screen and (min-width: 1200px) {
header .subtitle {
    line-height:1.85vh;
 }
 header .title {	
  letter-spacing: .065em;
  line-height:3.85vh;
 }
}

@media screen and (min-width: 2000px) {
header .subtitle {
    line-height:2.4vh;
 }
 header .title {	
  letter-spacing: .03em;
 }
}*/

footer {
  left: 50%;;
  font-weight: 300;
  font-size: var(--pt-bourgeois);
  padding-top: 2vh;
  margin-block: var(--section-spacing);
  -webkit-padding-start: var(--gutter);
		  padding-inline-start: var(--gutter);
  -webkit-border-start: 0px double;
		  border-inline-start: 0px double;
}

a {
  font-weight: 300;
  color: currentcolor;
  text-underline-offset: 0.2ex;
}

a, a:visited {
  color: #4bc5b7;
  text-decoration: none;
}

a:focus {
  color: #085078;
  font-weight: bold;
  outline: none;
}

em {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
}

h1,
h2 {
  font-weight: 900;
}

h1 {
  display: grid;
  gap: 0.3ex;
  align-content: center;
  font-size: clamp( var(--pt-paragon), var(--pt-pica) + 4.125vw, var(--pt-double-canon) );
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h1 small {
  text-indent: calc(-1ch - 1ch);

}

span{

}

article {
  counter-reset: section;
}

h2 {
  display: grid;
  gap: 0.25ex;
  position: relative;
  max-inline-size: 25ch;
  -webkit-margin-before: var(--section-spacing);
		  margin-block-start: var(--section-spacing);
  font-size: clamp( var(--pt-great-primer), var(--pt-small-pica) + 4.125vw, var(--pt-double-great-primer) );
  line-height: 1.75ex;
}

h2::before,
h2::after {
  font-size: var(--pt-long-primer);
  line-height: 1.5;
}

h2::before {
 /* content: "№" counter(section);
  counter-increment: section;*/
  justify-self: start;
  padding: 0.5ex;
  font-weight: 600;
  border: 0px double;
  border-radius: 1px; 
}

h2::after {
  content: "";
  position: absolute;
  transform: translate3d(-100%, calc(3px + 0.5ex + 0.5em), 0);
  inline-size: var(--page-padding-inline);
  -webkit-border-after: 2px solid;
		  border-block-end: 0px solid;
}

h2 q {
  position: relative;
}

h2 q::before {
  position: absolute;
  transform: translatex(-100%);
}

h2 + p {
  -webkit-margin-before: calc(var(--stack) * 0.5);
		  margin-block-start: calc(var(--stack) * 0.5);
}
h3 {	
  display: grid;
  gap: 0.25ex;
  position: relative;
  max-inline-size: 35ch;
  -webkit-margin-before: .5vh;
		  margin-block-start: .5vh;
  font-size: calc(1vw + .8ch);
  line-height: 5ex;
  }
  
p {
	z-index:1;
}

p,
ul {
  max-inline-size: var(--line-length);
  -webkit-margin-before: var(--stack);
		  margin-block-start: var(--stack);
}

p:first-child {
  -webkit-margin-before: 0;
		  margin-block-start: 0;
}

figure,
table {
  -webkit-margin-before: calc(var(--section-spacing) * 0.5);
		  margin-block-start: calc(var(--section-spacing) * 0.5);
}

figure {
  position: relative;
  inset-inline-start: 50%;
  inset-inline-end: 50%;
  inline-size: 100%;
  inline-size: 100vw;
  -webkit-margin-start: -50vw;
		  margin-inline-start: -50vw;
  -webkit-margin-end: -50vw;
		  margin-inline-end: -50vw;
  padding-inline: var(--page-padding-inline);
  -webkit-padding-after: 1ex;
		  padding-block-end: 1ex;
  overflow: auto;
  scrollbar-gutter: stable;
}

section {
  width: calc(85% + 15%);
  height: calc(45% + 5%);
  display: table;
}

.typ {
  height: 2vh;
  margin-top: calc(2vh + 8vh);
  margin-bottom: 15vh;
}

.center {
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
  z-index:-999;
}

table {
  inline-size: 100%;
  max-inline-size: var(--line-length);
  
}

table,
th,
td {
  border: 1px solid;
}

th,
td {
  padding: 0.5ex;
  text-align: start;
}

th {
  padding-block: 1ex;
  font-weight: 600;
  font-size: var(--pt-bourgeois);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

caption {
  -webkit-margin-after: calc(var(--stack) * 0.5);
		  margin-block-end: calc(var(--stack) * 0.5);
  font-size: var(--pt-english);
  font-weight: 900;
  text-align: start;
}

[class^=pt-] {
  display: flex;
  gap: 1rem;
  align-items: center;
  block-size: 1.5em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
[class^=pt-]::before {
  display: grid;
  place-items: center;
  min-block-size: 50%;
  -webkit-padding-end: 0.5rem;
		  padding-inline-end: 0.5rem;
  font-size: var(--pt-bourgeois);
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  word-break: break-all;
  -webkit-border-end: 6px double;
		  border-inline-end: 6px double;
}

[class^=pt-] + [class^=pt-] {
  -webkit-margin-before: 2vmax;
		  margin-block-start: 2vmax;
}

.pt-double-canon {
  font-size: var(--pt-double-canon);
}
.pt-double-canon::before {
  content: "56";
}

.pt-canon {
  font-size: var(--pt-canon);
}
.pt-canon::before {
  content: "48";
}

.pt-double-great-primer {
  font-size: var(--pt-double-great-primer);
}
.pt-double-great-primer::before {
  content: "36";
}

.pt-double-english {
  font-size: var(--pt-double-english);
}
.pt-double-english::before {
  content: "28";
}

.pt-double-pica {
  font-size: var(--pt-double-pica);
}
.pt-double-pica::before {
  content: "24";
}

.pt-paragon {
  font-size: var(--pt-paragon);
}
.pt-paragon::before {
  content: "20";
}

.pt-great-primer {
  font-size: var(--pt-great-primer);
}
.pt-great-primer::before {
  content: "18";
}

.pt-english {
  font-size: var(--pt-english);
}
.pt-english::before {
  content: "14";
}

.pt-pica {
  font-size: var(--pt-pica);
}
.pt-pica::before {
  content: "12";
}

.pt-small-pica {
  font-size: var(--pt-small-pica);
}
.pt-small-pica::before {
  content: "11";
}

.pt-long-primer {
  font-size: var(--pt-long-primer);
}
.pt-long-primer::before {
  content: "10";
}

.pt-bourgeois {
  font-size: var(--pt-bourgeois);
}
.pt-bourgeois::before {
  content: "09";
}

.pt-chu {
  font-size: var(--pt-chu);
}
.pt-chu::before {
  content: "42";
}

.pt-xiaochu {
  font-size: var(--pt-xiaochu);
}
.pt-xiaochu::before {
  content: "36";
}

.pt-yi {
  font-size: var(--pt-yi);
}
.pt-yi::before {
  content: "26";
}

.pt-xiaoyi {
  font-size: var(--pt-xiaoyi);
}
.pt-xiaoyi::before {
  content: "24";
}

.pt-er {
  font-size: var(--pt-er);
}
.pt-er::before {
  content: "22";
}

.pt-xiaoer {
  font-size: var(--pt-xiaoer);
}
.pt-xiaoer::before {
  content: "18";
}

.pt-san {
  font-size: var(--pt-san);
}
.pt-san::before {
  content: "16";
}

.pt-xiaosan {
  font-size: var(--pt-xiaosan);
}
.pt-xiaosan::before {
  content: "15";
}

.pt-si {
  font-size: var(--pt-si);
}
.pt-si::before {
  content: "14";
}

.pt-xiaosi {
  font-size: var(--pt-xiaosi);
}
.pt-xiaosi::before {
  content: "12";
}

.pt-wu {
  font-size: var(--pt-wu);
}
.pt-wu::before {
  content: "10.5";
}

.pt-xiaowu {
  font-size: var(--pt-xiaowu);
}
.pt-xiaowu::before {
  content: "9";
}

[lang=zh-Hans] {
  font-family: system-ui, sans-serif;
}

table [lang=zh-Hans] {
  font-weight: 600;
}

figure div[lang=zh-Hans] {
  -ms-writing-mode: tb-lr;
	  writing-mode: vertical-lr;
}
figure div[lang=zh-Hans] [class^=pt-] {
  font-weight: 900;
  letter-spacing: 0.25em;
}
figure div[lang=zh-Hans] [class^=pt-]::before {
  min-block-size: 100%;
  font-size: var(--pt-xiaowu);
}

.Moll {
	position: -webkit-sticky; /* Safari */
  position: sticky;
	top: calc(1vh + 20ch);
	left: 50%;
	bottom: 15vh;
	width: 90px;
	height: 90px;
	margin: 0px 0px 0px 0px;
	z-index: 2;
  transition: all 200ms ease-in-out;
	filter: drop-shadow(0px 3px 3px rgb(255,255,255, 0.9));
	filter:blur(0px);
}
.Moll:hover {
  color: transparent;
  text-shadow: 0 0 ($font-size / 7) #eee;
  transition: all 0.35s ease;
	filter:brightness(5);
	filter:blur(.15vw);
}
.Molly:hover {
  color: transparent;
  text-shadow: 0 0 ($font-size / 7) #eee;
  transition: all 0.35s ease;
	filter:brightness(5);
	filter:blur(.15vw);
}

.bos {
	margin-top: 10vh;
}

.Molly {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: calc(1vh + 20ch);
	left: 50%;
	width: 100px;
	height: 100px;
	margin: 0vh 0px 0px 0px;
	z-index: 2;
  transition: all 200ms ease-in-out;
	filter: drop-shadow(0px 3px 3px rgb(255,255,255, 0.9));
	filter:blur(0px);
}

path.Moll--chevron {
	animation: ChevronAnimation 3s ease infinite;
	transform: translateY(3px)
}

@keyframes ChevronAnimation {
	0% {
		transform: translateY(3px);
		opacity: 1
	}
	50% {
		transform: translateY(8px);
		opacity: 0
	}
	60% {
		transform: translateY(3px);
		opacity: 0
	}
}