:root{
  --leading: 1.7;
  --measure: 74ch;

  --link: rgba(140, 220, 215, 0.95);
  --link-hover: rgba(170, 240, 235, 0.98);
  --link-visited: rgba(170, 210, 255, 0.92);
  --link-underline: rgba(140, 220, 215, 0.35);
  --link-underline-hover: rgba(140, 220, 215, 0.70);
}

html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  font-size: 15.5px;
  line-height: var(--leading);
  letter-spacing: 0.1px;
  color: rgba(245,250,255,0.88);
}
div{
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
p{
  margin: 0.9em 0;
  color: rgba(245,250,255,0.86);
}

h1, h2, h3, h4, h5, h6{
  margin: 1.2em 0 0.55em;
  line-height: 1.18;
  letter-spacing: -0.25px;
  color: rgba(245,250,255,0.94);
  font-weight: 780;
}
h1{
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.6px;
  line-height: 1.08;
  margin-top: 0.2em;
}
h2{
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.45px;
}
h3{
  font-size: 18px;
  letter-spacing: -0.25px;
  color: rgba(245,250,255,0.92);
}
h4{
  font-size: 16px;
  letter-spacing: -0.15px;
  color: rgba(245,250,255,0.90);
}
h5{
  font-size: 14px;
  letter-spacing: 0.0px;
  color: rgba(245,250,255,0.88);
  text-transform: none;
}
h6{
  font-size: 13px;
  letter-spacing: 0.1px;
  color: rgba(245,250,255,0.80);
  font-weight: 750;
}
/* If headings are the first element, avoid huge top gaps */
:where(h1,h2,h3,h4,h5,h6):first-child{ margin-top: 0; }

/* Lists */
ul, ol{
  margin: 0.9em 0;
  padding-left: 1.2em;
  color: rgba(245,250,255,0.84);
}
li{
  margin: 0.42em 0;
}

/* Definition lists */
dl{
  margin: 1.0em 0;
  color: rgba(245,250,255,0.84);
}
dt{
  font-weight: 750;
  color: rgba(245,250,255,0.92);
  margin-top: 0.8em;
}
dd{
  margin: 0.25em 0 0.6em 0;
  color: rgba(245,250,255,0.82);
}

/* Inline emphasis */
strong{
  font-weight: 800;
  color: rgba(245,250,255,0.94);
}
em{
  font-style: italic;
  color: rgba(245,250,255,0.86);
}

/* Links (normal / visited / hover / focus) */
a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: filter 150ms ease, text-decoration-color 150ms ease, color 150ms ease;
}

a:visited{
  color: var(--link-visited);
  text-decoration-color: rgba(170, 210, 255, 0.32);
}

a:hover{
  color: var(--link-hover);
  text-decoration-color: var(--link-underline-hover);
  filter: brightness(1.02);
}

a:active{
  filter: brightness(1.06);
}

/* Accessible focus for keyboard navigation */
a:focus-visible{
  outline: 2px solid rgba(79,182,176,0.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Horizontal rule */
hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 1.5em 0;
}

/* Small text helpers */
small{
  font-size: 0.88em;
  color: rgba(245,250,255,0.62);
}

/* Keep code/blockquote aligned with the same aesthetic (nice globally) */
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.15em 0.35em;
  border-radius: 9px;
}
pre{
  margin: 1.1em 0;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  overflow: auto;
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}
pre code{
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  color: rgba(245,250,255,0.88);
  font-size: 13px;
  line-height: 1.6;
  display: block;
  min-width: max-content;
}

blockquote{
  margin: 1.1em 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(245,250,255,0.82);
}
blockquote p{ margin: 0; }

/* Optional: nicer selection highlight */
::selection{
  background: rgba(79,182,176,0.25);
}
/* =========================================================
   IMAGES & FIGURES (global style)
   Rounded, lightly bordered, subtle depth
========================================================= */

/* Base image behavior */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Rounded + slightly bordered images */
img{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 14px 34px rgba(0,0,0,0.30);
}

/* Slight hover polish (only when image is inside link) */
a img{
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
a:hover img{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Figures */
figure{
  margin: 1.4em 0;
  display: grid;
  gap: 10px;
}

/* Remove double styling if img is inside figure */
figure img{
  border-radius: 16px;
}

/* Figcaption styling */
figcaption{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(245,250,255,0.60);
  text-align: left;
}

/* Optional: centered figure helper */
figure.center{
  justify-items: center;
  text-align: center;
}
figure.center figcaption{
  text-align: center;
}

/* Optional: full-bleed style for large visuals */
figure.wide{
  margin-left: -4px;
  margin-right: -4px;
}
@media (min-width: 980px){
  figure.wide{
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* Optional: small inline illustration */
img.inline{
  display: inline-block;
  vertical-align: middle;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Slightly softer look inside article prose */
article img{
  border-radius: 16px;
  border-color: rgba(255,255,255,0.12);
}

/* =========================================================
   FLOAT UTILITIES (wide screens only)
   For article-style image wrapping
========================================================= */

/* Mobile-first: no floats */
.left,
.right{
  float: none;
  margin: 1.4em 0;
  max-width: 100%;
}

/* Activate floats on wide screens */
@media (min-width: 980px){

  .left{
    float: left;
    margin: 0.4em 1.6em 1em 0;
    max-width: min(46%, 420px);
  }

  .right{
    float: right;
    margin: 0.4em 0 1em 1.6em;
    max-width: min(46%, 420px);
  }

  /* Optional: slightly narrower when used inside prose */
  article .left, article .right{
    max-width: min(44%, 380px);
  }
}

/* Clearing utilities */
.clear{
  clear: both;
}

.clear-left{
  clear: left;
}

.clear-right{
  clear: right;
}

/* Text indent */
/* Only indent paragraphs that follow another paragraph */
p + p{
  text-indent: 1.2em;
}
article p + p {
  text-indent: 1.2em;
}
p, div{
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
}

i.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  opacity: 0.9;
}
.no-border {
  border: none!important;
}

/* ---------------------------------
   Video
---------------------------------- */

video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75rem 0;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--panel-2);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* When wrapped in figure (recommended) */
figure video {
  margin: 0;
}

/* Responsive embed wrapper (for aspect-ratio control) */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.75rem 0;
  
  & video, & iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: var(--panel-alt);
  }
  /* <div class="video-wrapper">
  <iframe src="..." allowfullscreen></iframe>
  </div> */
}