/* ==========================================================================
   1. Reset
   Based on Josh Comeau's CSS reset.
   ========================================================================== */

/* Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* Increase line-height */
  line-height: 1.5;
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}


/* ==========================================================================
   2. Fonts
   ========================================================================== */

@font-face {
  font-family: "Cormorant";
  src: url("fonts/Cormorant-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("fonts/Cormorant-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("fonts/Cormorant-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   3. Variables
   ========================================================================== */

:root {
  /* Fluid type scale: --text-0 is body text, negative steps are smaller */
  --text--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --text--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --text-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --text-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --text-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --text-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --text-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --text-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

}


/* ==========================================================================
   4. Base typography
   ========================================================================== */

body {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1, h2, h3, h4, em {
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

main {
    font-size: var(--text-1);
}

p {
    text-indent: 0;
    margin-top: 1em;
    text-align: justify;
    hyphens: auto;
    hyphenate-character: "–";
    hanging-punctuation: first allow-end last;

}

p + p, aside + p {
    text-indent: 2em;
    margin-top: 0;
}

header + p:first-letter {
    font-weight: 900;
  initial-letter: 2;
  -webkit-initial-letter: 3;
  -webkit-text-stroke: 1px red;
  color: white;
  padding: 0.3em;
  margin-right: 0.5em;
  border: 1px solid white;
  outline: 2px solid red;
  --s: 15px; /* control the size*/
  --c1:white;
  --c2:red;

  --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
  background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    var(--c2);
  background-size: calc(2*var(--s)) calc(2*var(--s));
  text-shadow:
     -1px -1px 0 #FFF,
      1px -1px 0 #FFF,
      -1px 1px 0 #FFF,
       1px 1px 0 #FFF;
}

ul, ol {
    padding: 0;
    margin-top: 1em;
}

/* Keep superscripts from pushing lines apart */
sup {
  line-height: 0;
}


/* ==========================================================================
   5. Layout
   ========================================================================== */


  /* Abbreviations in small caps, with the expansion printed after them */
  /* Undo synthesized smallcaps, use real ones*/
  abbr {
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    font-style: normal;
    letter-spacing: 0.1em;
    text-decoration: none;
    font-weight: 400;
    &:after {
      text-transform: none;
      font-variant: normal;
      letter-spacing: normal;
      content: " (" attr(title) ")";
    }
  }


/* Definition lists */
dt {
  font-weight: 700;
}
dd {
  padding-left: 2em;
}


/* ==========================================================================
   7. Article header (title and date)
   ========================================================================== */

article header {
  width: 100%;
  padding-top: 20vh;
  padding-bottom: 1lh;
  display: block;

  h2 {
    font-size: var(--text-5);
    text-wrap: pretty;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
  p {
    text-align: center;
    padding-top: 1lh;
  }
  time {
    font-size: var(--text--1);

  }
  time:before, time:after {
    content: " — ";
  }
}


/* ==========================================================================
   8. Side notes: blockquotes and pull quotes float into the right margin
   ========================================================================== */


/* ==========================================================================
   9. Footnotes
   ========================================================================== */

/* Reference number in the text (brackets are stripped by the templates) */
.footnote-reference {
  font-size: var(--text-1);
  font-variant-numeric: lining-nums;
  text-align: center;
  vertical-align: inherit;
  font-variant-position: super;

  a {
    top: 0.2em;
    color: red;
    border-radius: 100%;
    text-decoration: none;
  }
}

/* Footnote list at the bottom of the page */
.footnotes {
  border-top: 1px solid gray;

  p, ol {
    max-width: 100%;
    margin: 0;
    padding: 0;
    padding-top: 1em;
    font-size: var(--text-0);
  }
  p + p {
    padding-top: 0;
  }
  a {
      color: black;
      text-decoration: none;
      font-size: var(--text--2);
      min-width: 1lh;
      min-height: 1lh;
      padding: 0.1em;
      padding-left: 0.2em;
      padding-top: 0.2em;
      border-radius: 100%;
      border: 0.5px solid CanvasText;
  }
}


/* ==========================================================================
   10. Heading anchor links
   ========================================================================== */

.zola-anchor {
  margin-left: -1.5rem;
  text-decoration: none;
  cursor: pointer;
  height: 1lh;
  position: relative;
  top: 0.1em;
  color: gainsboro;

  &:hover {
    color: red;
  }
}

body {
    display: grid;
    grid-template-columns: 1fr 35rem 1fr;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    gap: 10px;
}

header:has(h1) {
    grid-row: span 2 / span 2;
    padding-left: 2rem;
}

main {
    grid-row: span 1 / span 1;
}

footer {
    grid-column: span 1 / span 1;
    grid-column-start: 2;
    grid-row-start: 2;
    max-height: 100px;
    text-align: center;
    padding: 2rem;
}

aside {
    float: right;
    margin-right: calc( -20rem + -2vw);
    clear: both;
    max-width: 20rem;
    p
    {font-size: var(--text-0);}
    blockquote {
        margin: 0;
        float: none;
    }
}

h1 {
    font-style: italic;
    a {text-decoration: none;
        color: CanvasText;}

}

h1 + nav ul {
    font-size: var(--text--1);
    a {
        text-decoration: none;
        color: CanvasText;
    }
}
div:has(h1) {
text-align: center;


    h1 a{
font-variant: small-caps;
font-style: normal;
font-size: calc(var(--text-5)* 1.5);
color: burlywood;

    }
    p {
text-align: center;
margin-top: -1em;
    }
}