@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, 10vmax, 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;
      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;
    }
    
    *,
    *::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);
      overflow-x: hidden;
    }
    
    header {
      display: grid;
      align-content: end;
      min-block-size: 100vh;
      padding-block: var(--section-spacing);
    }
    
    footer {
      margin-block: var(--section-spacing);
      -webkit-padding-start: var(--gutter);
              padding-inline-start: var(--gutter);
      -webkit-border-start: 6px double;
              border-inline-start: 6px double;
    }
    
    a {
      font-weight: 600;
      color: currentcolor;
      text-underline-offset: 0.2ex;
    }
    
    em,
	q {
      font-family: "Georgia", serif;
	  font-style: italic;
    }

	p span {
	
	}
    
    h1,
    h2 {
      font-weight: 900;
    }
    
    h1 {
      display: grid;
      gap: 0.2ex;
      align-content: center;
      font-size: clamp( var(--pt-paragon), var(--pt-pica) + 4.125vw, var(--pt-double-canon) );
      line-height: 1;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
    
    h1 small {
      font-size: var(--pt-bourgeois);
      font-weight: 300;
      letter-spacing: 0.1em;
      text-indent: 0.1ch;
    }
    
    h1 span {
      text-indent: -0.225ch;
    }
    
    article {
      counter-reset: section;
    }
    
    h2 {
      display: grid;
      gap: 1ex;
      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.2;
    }
    
    h2::before,
    h2::after {
      font-size: var(--pt-long-primer);
      line-height: 1;
    }
    
    h2::before {
      /*content: "№" counter(section);*/
      content: "Section " counter(section);
      counter-increment: section;
      justify-self: start;
      padding: 0.5ex;
      font-weight: 600;
      border: 6px 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: 2px solid;
    }
    
    
    h2 + p {
      -webkit-margin-before: calc(var(--stack) * 0.5);
              margin-block-start: calc(var(--stack) * 0.5);
    }
    
    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;
    }

	ul li {
		margin-top: var(--pt-english);
	}
	
	.material-icons.md-sm {
		font-size: var(--pt-long-primer);
	}
    
    [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;
    }