:root {
  --gutter: clamp(1ch, 2.5vmax, 3ch);
  --stack: 1ex;
  --base-spacing: 1rem;
  --space-after-heading: calc(var(--base-spacing) * 0.75);
  --space-before-heading: calc(var(--base-spacing) * 1.25);
  --page-padding-inline: calc(
    (100vw - min(90rem, 100vw - var(--gutter) * 3)) / 2
  );
  --section-spacing: clamp(var(--stack) * 2, 5vmax, var(--stack) * 3);

  /* Traditional modular type scale */
  --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: "MFW-PShinGoPr6N-Regular", system-ui, -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(112.5%, 100% + 0.5vw, 125%);
  font-weight: 400;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  
  --color-text: hsl(0, 0%, 10%);
  --color-text-light: hsl(0, 0%, 30%);
  --color-link: hsl(220, 70%, 35%);
  --color-link-visited: hsl(250, 70%, 35%);
}

*,
*::before,
*::after {
  font-feature-settings: "kern", "liga", "clig", "calt";
  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;
  hanging-punctuation: first last;
  color: var(--color-text);
}

footer {
  margin-block: var(--section-spacing);
  padding-inline-start: var(--gutter);
  border-inline-start: 6px double;
}

h1,
h2 {
  font-weight: 900;
  font-family: "MFW-PShinGoPr6N-Heavy";
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(
    var(--pt-paragon),
    var(--pt-pica) + 4.125vw,
    var(--pt-double-canon)
  );
  line-height: 1.1;
  text-transform: uppercase;
  padding-top: var(--stack);
}

h2 {
  font-size: clamp(
    var(--pt-great-primer),
    var(--pt-pica) + 1vw,
    var(--pt-double-great-primer)
  );
  line-height: 1.2;
}

p {
  max-width: 85ch;
  text-align: left;
  word-spacing: 0.05em;
}

/* Improved minimal spacing rules */
h1 + p,
h2 + p {
  margin-top: var(--space-after-heading);
}

p + h1,
p + h2 {
  margin-top: var(--space-before-heading);
}

p + p {
  margin-top: var(--base-spacing);
}

a {
  font-weight: 600;
  font-family: "MFW-PShinGoPr6N-Bold";
  text-decoration: none;
  color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: all 0.2s ease;
}

a:hover,
a:focus {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media print {
  body {
    color: var(--color-text);
    background: white;
  }
  
  a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}

@media (max-width: 40em) {
  p {
    hyphens: none;
    word-spacing: normal;
  }
  
  /* Adjusted spacing for mobile - maintaining proportions */
  h1 + p,
  h2 + p {
    margin-top: calc(var(--space-after-heading) * 0.875);
  }
  
  p + h1,
  p + h2 {
    margin-top: calc(var(--space-before-heading) * 0.875);
  }
  
  p + p {
    margin-top: calc(var(--base-spacing) * 0.875);
  }
}
@media screen and (max-width: 40em) {
  p {
    text-align: justify;
    text-justify: inter-word;
    /* Prevent single words on last line */
    hyphens: auto;
  }
}