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

/* 2. Remove default margin */
* {
  margin: 0;
}

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

body {
  /* 4. Add accessible line-height */
  line-height: 1.6;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}   
   
// Typography
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Chaparral", "Inria Serif","Libre Baskerville","Redaction","Literata", Georgia, "Times New Roman", serif;
    --font-mono: "Victor Mono","SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace;
    
// Spacing
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;

body {background-color:#d1e7e0;background-attachment: fixed;}

article a, .recent a, .archive a, .intro a, .meta a, .nav-links-active {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

article a::after, .archive a::after, .recent a::after, .intro a::after, .meta a::after, .nav-links-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .05em;
  height: .1em;
  width: 100%;
/*  background: linear-gradient(110deg, #D95B44, #FF9060, #FF927F, #FEDC95); */
  background: linear-gradient(110deg, #b31240, #ff1a40, #ff8dad, #ffc6d6);
  z-index: -1;
  transition: height .25s cubic-bezier(.6,0,.4,1);
}

article a:hover::after, .archive a:hover::after, .recent a:hover::after, .intro a:hover::after, .meta a:hover::after, .nav-links-active:hover::after {
  height: .2em;
}

a{color:#bf213f}
a:visited{color:#ee5d6c}
a.active,a:active,a:hover{color:#d82547}
p,ul,ol,.desc{color:#666}
blockquote,pre,code,article>img,article>p>img,.g img{background:#FFF1E6!important}
#container ::selection{background:#cf0;color:#000}

article p:first-of-type {
  text-indent: 2em; /* Indents the first line by 2 times the current font size */
}

article.blog p:first-of-type, article.haiku p:first-of-type, blockquote p:first-of-type, li p:first-of-type, a {
  text-indent: 0; /* Indents the first line by 2 times the current font size */
}

article.haiku p {font-family:"Victor Mono",monospace;font-size:1rem;background-color: #F2E9E4;
opacity: 0.8;
background-image:  repeating-linear-gradient(to right, #F2E9E4 0, #F2E9E4 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #d9cbbd 1px, transparent 1px);
background-size: 100% 100%, 100% 25px;
}
    
img{max-width:100%}
img:not([src$=".svg"])
img[src$="#pixelate"]{image-rendering:pixelated}

.littlefoot {
  --button-active-background-color: #d2b450;
  --button-text-color: #666;
  --button-background-color: oklch(0.985 0.022 75);
  --button-height:	1rem;
  --button-margin:	0 0.25rem;
  --button-padding:	0 0.07rem;
  --popover-background-color:	#fff6ec;
  --popover-font-family: 'Inria Serif',serif;
}

button.littlefoot__button {
    background-color: #fff6ec !important;
    color: #000 !important;
    border-radius: 16%;
    padding: 0 0.25em 0;
    transform: scale(1.1);
    line-height: 0;
    vertical-align: super;
    height: fit-content !important;
    font-size: 14px;
    font-variant: small-caps;
    line-height: 18px;
  }

.littlefoot__content>*:last-child{margin-bottom:0 !important;font-family: "Inria Serif",serif;font-size: 1.1rem;font-style:italic; line-height: 1.5;color:#000;}

.spl-title{
    font-size: 15px !important;
    text-align: center;
}

figure img {
  --s: 10px; /* control the size */
  margin-top: 0;
  margin-right: 2rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: auto;
}

img,blockquote {margin-top:0;padding-top:0;border-radius: 12px;}

figure {margin: 2.5rem 0 2.5rem;}

figcaption {
  font-family: 'Inria Serif',serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #666;
  text-align: center;
  margin: 0;
  padding: 0 1rem;
  font-style: italic;
}

p.linky {
  font-family: 'Inria Serif',serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #666;
  margin-bottom: 2rem;
  padding: 0;
  font-style: italic;
}

.wrap-image {
  /* Push image to the left (or 'right') */
  float: right;            
  
  /* Prevent text from touching the image */
  margin-right: 20px;     
  margin-bottom: 10px;    
  
  /* Define image boundaries */
  max-width: 300px;       
  height: auto;
}

/* Ensure the parent box contains the floated image */
.content-box {
  overflow: auto;         
}

#container {
/*box-sizing: content-box;
margin:0 auto;
max-width:75vw;
min-height:100vh;
height: 100%;
padding:0;*/
box-sizing: content-box;
background-color:#F2E9E4;
width: 100%;             /* Fills the viewport on small mobile devices */
  max-width: 60rem;        /* Prevents the layout from stretching too wide on desktops (1280px) */
  margin-inline: auto;     /* Centers the container horizontally within the viewport */
  padding-inline: 0;  /* Keeps content from touching the screen edges on mobile */
}

h1,h2,h3,h4,h5,h6{
  font-family:'Chaparral',serif;font-weight:600;margin:2em 0 1em;
  }
  
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

h1#title, h1#title a {display: block; margin: 0 auto;padding-top:1.25rem;padding-bottom:1rem;font-family: "Young Serif",serif; color:#d82547;text-decoration: none; text-align: center; font-size: clamp(2rem, 5vw + 1rem, 8rem);}
h2#title, h2#title a {margin:0;padding-top:1.25rem;padding-bottom:1rem;font-family: "Young Serif",serif; color:#d82547; text-decoration: none; text-align: center; font-size: clamp(2rem, 5vw + 1rem, 3.5rem);}

/* Stack vertically on mobile devices under 768px */
@media (max-width: 768px) {
  h2#title, h2#title a {
    text-align: center;
  }
}

h1.post-title {margin-bottom:0;text-align:center;}
time.post-date {text-align:center}

ul.np {padding-left: 0;} 
.s{font-family:'Inria Serif';font-size:1.05rem;}
.nd a{text-decoration: none;}
.ita {font-style: italic; font-size: 1.1rem;line-height: 2;}

blockquote,blockquote p {font-family:'Inria Serif',serif;font-size:1.05rem;font-style:italic;}

p,ul,ol,.tags,.post-navigation,footer{
    font-family: 'Chaparral','Literata','Libre Baskerville',serif;
    font-size: 1.35rem;
    line-height: 1.75;}   

/*article p {margin-right:4rem;margin-left:4rem;font-family: 'Inria Serif', serif;font-size: 1.05rem; line-height: 1.75;}*/

header {margin: 0; padding: 0 4rem 0;
background-color: #F2E9E4;
opacity: 0.8;
background-image: conic-gradient(from 60deg at 56.25% calc(425% / 6), transparent 0deg, transparent 0.5deg, #eecfbe 0.5deg, #eecfbe 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from 60deg at 56.25% calc(425% / 6), transparent 0deg, transparent 0.5deg, #eecfbe 0.5deg, #eecfbe 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from 180deg at 43.75% calc(425% / 6), transparent 0deg, transparent 0.5deg, #eecfbe 0.5deg, #eecfbe 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from 180deg at 43.75% calc(425% / 6), transparent 0deg, transparent 0.5deg, #eecfbe 0.5deg, #eecfbe 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from -60deg at 50% calc(175% / 12), transparent 0deg, transparent 0.5deg, #eecfbe 0.5deg, #eecfbe 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from -60deg at 50% calc(175% / 12), transparent 0deg, transparent 0.5deg, #eecfbe 0.5deg, #eecfbe 119.5deg, transparent 119.5deg, transparent 120deg);
background-position: 0 0, 10px 17px, 0 0, 10px 17px, 10px 0, 0 17px;
background-size: 20px 34px;
}
main {margin: 0; padding:0 7rem 0;}
article {margin:0;padding:0;}
footer {margin:3rem auto 0; padding:1rem 4rem; width: 100%; background-color: rgb(237 221 212/50%); border-top: 2px dashed #D6CCC2; border-bottom: 25px solid #D6CCC2;}

/* img{max-width:100%}img:not([src$=".svg"]),article>div,pre{border-radius:.3rem}img[src$="#pixelate"]{image-rendering:pixelated} */

/*
h1::before{content:'# '/''}
h2::before{content:'## '/''}
h3::before{content:'### '/''}
*/

p {margin:1.15em 0 1.15em}
p, ul,ol,.g,article>footer,article>header{margin:0 0 1.25em 0}
pre,blockquote{padding:1.5rem;margin:0 1.5rem 1.5rem 1.5rem;}
pre{overflow-x:auto}
pre code{background:0!important}
blockquote{border-left:3px solid}
blockquote>*:last-child{margin-bottom:0}

article>img,article>p>img,article>div,article>time{display:block;margin-bottom:1.5rem;width:100%}

.yt{aspect-ratio:16/9;width:100%;overflow:hidden}
.yt iframe{width:100%;height:100%;border:0}

/*.theme{display:inline-block;width:1.5rem;height:1.5rem}
.theme img,.theme svg{width:100%;height:100%}
.theme img:first-child,html.lt .theme svg:first-child,html.dk .theme img:last-child,html.dk .theme svg:last-child{display:none}*/

header>div{margin-bottom:0}

#container>footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
#container>footer img,#container>footer svg{width:1em;height:1em;vertical-align:middle}

.tags{margin:0;padding:0 0 3rem 0;font-size:1rem;text-align:center;}
.tags li{display:inline}
.tags a{text-decoration-style:none;}

.tags {
  display: flex;
  align-items: center;
  text-align: center;
}

.tags::before,
.tags::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed #333; /* Line thickness and color */
}

.tags li+li::before{content:' · '}

.tags::before {
  margin-right: 15px; /* Gap between left line and text */
}

.tags::after {
  margin-left: 15px; /* Gap between right line and text */
}


.recent,article {background-color: rgb(242 233 228 / 75%);border-radius: 20px;}

/* Navbar Wrapper */
.navbar {
  display: grid;
  grid-auto-flow: column; /* Automatically spaces links horizontally */
  text-align: center;
  margin:0;
  padding:0;
/*  border-width: 2px; 
  border-radius: 20px; 
  background-color: rgb(242 233 228 / 50%);
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3); */
}

/* CSS Grid Links Layout */
.nav-links, .nav-links-active {
  display: block;
  margin: 0 auto:  
  color: #A7333F;
  padding: 0;
  text-decoration: none;
  font-family: "Chaparral",serif;
  transition: background-color 0.3s ease;
}

/* Individual Link Styling */
a.nav-links, a.nav-links-active {
  color: #A7333F; 
  text-decoration: none; /* Removes default underlines */ 
  font-size: 1.2rem; 
  font-weight: 700;
  transition: color 0.3s ease; /* Smooth color change on interaction */ 
}

/* Hover Effect */
a.nav-links:hover {
  color: #A7333F;
  transform: translateY(-1px); /* Lifts item up slightly */
  background: rgb(235 212 203);
  border-radius: 10px;
}

a.nav-links-active {
  padding-bottom: 0;
  color: #A7333F;
  text-decoration: none;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(7, auto); /* Creates 4 horizontal columns for desktop */
  justify-content: center; /* Aligns menu items to the right (change to start or center if preferred) */
  gap: 0.25rem;
  padding: 0.5rem;
  border-width: 0 0 2px 2px; 
  border-radius: 0 0 20px 20px; 
  background-color: #eecfbe;
  box-shadow: 0 10px 5px 0 rgba(0,0,0,0.05);
}

.nav-menu a {
  text-decoration: none;
  font-family: "Chaparral",serif;
  padding: 0.5rem 1rem 0 1rem;
}

/* Stack vertically on mobile devices under 768px */
@media (max-width: 768px) {
  .nav-menu {
    grid-template-columns: 1fr; /* Changes layout to a single stacking column */
    justify-items: center; /* Centers the links horizontally when stacked */
    gap: 0.5rem;
  }
}

.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.5rem}
.g a{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.g img{object-fit:contain;max-height:100%;max-width:100%}

.phogal{
  display: grid;
  grid-template-columns: 150px 1fr; /* Left column is always 250px, right fills the rest */
  gap: 30px;}
.thumb img{object-fit:contain;max-height:100%;max-width:100%}
.meta h2 {margin:0; padding:0;}
.meta time {margin-bottom:1rem;padding-bottom:0;font-variant-caps:all-small-caps;font-weight:300;font-size:1.2rem;line-height:2}

@media (max-width: 768px) {
  .phogal,ul.p {
    grid-template-columns: 1fr; /* Changes layout to a single stacking column */
    justify-items: start; /* Centers the links horizontally when stacked */
    gap: 1.5rem;
  }
}

/* .phogal a{aspect-ratio:1;display:flex;align-items:center;justify-content:center}

.phogal img{object-fit:contain;max-height:100%;max-width:100%} */

.p{list-style:none;padding:0}
.p ul{margin:0}
.p>li{display:flex;gap:1rem;margin-bottom:1rem}
.p time{display:flex;flex-direction:column;align-items:left;min-width:4rem;margin:0;font-variant-caps: all-small-caps;font-size:1.1rem;line-height:2}
.p time span:first-child{font-variant-caps: all-small-caps;font-size:1rem;line-height:2}

time.post-date {margin-bottom:1.5rem;padding-bottom:0;font-variant-caps:all-small-caps;font-weight:300;font-size:1.2rem;line-height:2;}

h1.post-title span {padding-bottom:0.5rem;border-bottom:3px groove #D64045;}

h1.moment-title {margin-top:0; padding-top:0;}
h1.moment-title span {padding-bottom:0.5rem;border-bottom:5px ridge brown;}
time.moment {margin-top:0;margin-bottom:1.5rem;padding-top:0;padding-bottom:1rem;font-variant-caps:all-small-caps;font-weight:300;font-size:1.2rem;line-height:0;}

.lb{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:999;cursor:pointer}
.lb img{max-width:95vw;max-height:95vh}

/*.footnote-definition{font-size:.85rem;margin:0.5em;display:flex;gap:.5em}
.footnote-definition-label{min-width:1.5em}
.footnote-definition p{margin:0}.footnote-reference{margin:0 .15em}*/

hr {
/*    border: none;
    border-top: 2px dashed #D6CCC2;
    overflow: visible;
    text-align: center; */
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(102, 102, 102, 0.1), rgba(102, 102, 102, 0.75), rgba(102, 102, 102, 0.1));
    margin-bottom:3rem;
}

.post-navigation {
 display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; 
    margin-bottom: 3rem;
    border-top: 1px solid var(--color-border);
    font-size: 1rem;
}

.page-navigation {
 display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; 
    margin-bottom: 3rem;
    padding: 0;
    border-top: 1px solid var(--color-border);
    font-size: 1rem;
}

span.earlier, a.earlier {
    text-decoration: none;
    justify-content: right;
}

span.later, a.later {
    text-align: left;
    text-decoration: none;
    justify-content: left;
    margin-left: auto;
}

.tag-cloud ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    font-family:'Chaparral',serif;
    font-size: 1.1rem;
}

.tag-cloud a {
    text-decoration: none;
    background: #fff6ec;
    padding: 5px 12px;
    border-radius: 20px;
    color: #333;
}

.tag-cloud a:hover {
    background: #FFE5D9;
    color: #666;
}

.tag-cloud .count {
    font-size: 0.8rem;
    color: #666;
}

.welcome {
  display: grid; grid-template-columns: 1fr 4fr; gap: 16px; margin-top: 1.5rem; padding: 0;
}
.photo {padding-top:3rem;}
.photo img {object-fit: cover;}
.intro {margin-bottom:1rem;padding-top:2rem;font-size: 1.9rem;color: #253237;line-height:1.5;}

@media (max-width: 768px) {
  .welcome {
    grid-template-columns: 1fr; /* Changes layout to a single stacking column */
    align-items: start; /* Centers the links horizontally when stacked */
    gap: 1.5rem;
  }
  .photo img {margin: 0 auto;}
  .intro {margin: 0 auto 1.5rem auto;}
}

.about {
  display: grid; grid-template-columns: 1fr 4fr; gap: 16px; margin-top: 3rem; padding: 0;
}
.profile {margin:0 auto;padding: 0;item-align: center;}
.profile img {border-radius: 10%;object-fit: cover;}
.text {display:block;margin:0 auto;padding:0 0 2rem 2rem;}

/* On screens smaller than 800px, stack the columns */
@media (max-width: 800px) {
  .welcome {
    grid-template-columns: 1fr; 
  }
}
.bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; 
  border-top: 2px dashed #D6CCC2;
background-color: #edddd4;
opacity: 0.8;
background-image:  radial-gradient(circle farthest-side at 0% 50%, #edddd4 23.5%, transparent 0), radial-gradient(circle farthest-side at 0% 50%, #F2E9E4 24%, transparent 0), linear-gradient(#edddd4 14%, transparent 0, transparent 85%, #edddd4 0), linear-gradient(150deg, #edddd4 24%, #F2E9E4 0 26%, transparent 0 74%, #F2E9E4 0 76%, #edddd4 0), linear-gradient(30deg, #edddd4 24%, #F2E9E4 0 26%, transparent 0 74%, #F2E9E4 0 76%, #edddd4 0), linear-gradient(90deg, #F2E9E4 1.6%, #edddd4 0 98.4%, #F2E9E4 0);
background-position: 16px 23px, 14px 23px, 0 0, 0 0, 0 0, 0 0;
background-size: 30px 45px;
}

.foot,.mid-foot {
  background-color: transparent; 
}

.foot h3,.mid-foot h3 {
 margin: 1rem 0 0.5rem;
 padding:0;
}

.foot h3 div.s,mid-foot div.s {
margin:0;
padding:0;
}

.s a{text-decoration: none;}

/* Position the progress bar at the top of the viewport */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 9999;
    appearance: none;
    border: none;
    background: transparent; /* Background of the empty bar */
}

/* Styling for the filled portion (Webkit/Blink) */
#scroll-progress::-webkit-progress-value {
    background-color: #009177; /* Change this to your preferred color */
    border-radius: 0 4px 4px 0;
}

/* Styling for the filled portion (Firefox) */
#scroll-progress::-moz-progress-bar {
    background-color: #009177;
    border-radius: 0 4px 4px 0;
}

.gallery {
    display: grid;
    /* Automatically creates columns that are at least 250px wide */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Adds consistent spacing between grid items */
    gap: 15px; 
    max-width: 1200px;
    margin: 0 auto; /* Centers the gallery container on the page */
    padding-bottom: 2rem;
}

/* Individual Image Wrapper */
.gallery-item {
    overflow: hidden;
    border-radius: 8px; /* Smooth rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */
    background-color: #fff;
    aspect-ratio: 3 / 2; /* Keeps all grid items uniform in size */
}

/* Image Formatting */
.gallery-item img {
    width: 100%;
    height: 100%;
    /* Forces the image to fill the box without losing its aspect ratio */
    object-fit: cover; 
    transition: transform 0.3s ease-in-out; /* Smooth hover transition */
    display: block;
}

/* Interactive Hover Zoom Effect */
.gallery-item:hover img {
    transform: scale(1.05); /* Gentle zoom in on hover */
    cursor: pointer;
}