/* =========================
   GLOBAL SCALE SYSTEM
   ========================= */


   :root{
  --footer-safe: 160px; /* fallback before JS runs */
}

/* Reserve space so the last content can scroll above the fixed footer */
body{
  padding-bottom: var(--footer-safe);
}

/* Helps anchor links / scroll-to behavior not hide under footer */
html{
  scroll-padding-bottom: var(--footer-safe);
}

   /* Make the page fill the screen and push footer to bottom */
.site{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page{
  padding: calc(34px * var(--scale)) calc(28px * var(--scale)) calc(40px * var(--scale));
  padding-bottom: calc(220px * var(--scale)); /* space for fixed footer + breathing room */
}

:root{
  --scale: 1.2; /* 👈 20% larger */

  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --hair:#e8e8e8;
  --hair2:#f0f0f0;
  --pill:#f4f4f5;
  --pillText:#111;
  --badge:#f1f1f1;

  --container: calc(760px * var(--scale));
  --footer-h: calc(130px * var(--scale)); /* tweak once */
}

/* =========================
   RESET / BASE
   ========================= */

*{
  box-sizing:border-box;
}

html,body{
   height: auto;
  min-height: 100%;
  overflow-y: auto;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  font-size: calc(14px * var(--scale));
  line-height: calc(1.55 * var(--scale));

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  letter-spacing: -0.01em;
   overflow-x: hidden; /* keep horizontal clean */
}

a{
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover{
  opacity: 0.65;
}

/* =========================
   TOP BAR
   ========================= */

.topbar{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.topbar-inner{
  max-width: calc(1100px * var(--scale));
  margin: 0 auto;
  padding: calc(1px * var(--scale)) calc(28px * var(--scale));
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.brand{
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav{
  display:flex;
  gap: calc(18px * var(--scale));
  align-items:center;
}

.navlink{
  color: var(--muted);
  font-size: calc(13px * var(--scale));
}

.navlink.active{
  color: var(--text);
}

.hairline{
  height:1px;
  background: var(--hair);
}

.hairline.soft{
  background: var(--hair2);
}

/* =========================
   PAGE LAYOUT
   ========================= */

.page{
  padding: calc(34px * var(--scale)) calc(28px * var(--scale))
           calc(40px * var(--scale));
}

.container{
  max-width: var(--container);
  margin: 0 auto;
}

/* =========================
   HEADINGS
   ========================= */

.h1{
  font-size: calc(40px * var(--scale));
  line-height: 1.12;
  margin: calc(6px * var(--scale)) 0
          calc(8px * var(--scale));
  letter-spacing: -0.03em;
}

.h2{
  margin: calc(28px * var(--scale)) 0
          calc(10px * var(--scale));
  font-size: calc(18px * var(--scale));
  letter-spacing: -0.02em;
}

.subtle{
  margin: 0 0 calc(22px * var(--scale));
  color: var(--muted);
}

.brand{
  display: flex;
  align-items: center;
}

.brand-logo{
  height: calc(250px * var(--scale)); /* adjust if needed */
  width: auto;
  display: block;
}

/* =========================
   SEARCH
   ========================= */

.search-wrap{
  margin: calc(18px * var(--scale)) 0
          calc(12px * var(--scale));
}

.search{
  border: 1px solid var(--hair);
  border-radius: calc(10px * var(--scale));
  padding: calc(10px * var(--scale))
           calc(12px * var(--scale));
  display:flex;
  align-items:center;
  gap: calc(10px * var(--scale));
}

.search-input{
  border:0;
  outline:none;
  width:100%;
  font-size: inherit;
}

/* =========================
   TAGS / PILLS
   ========================= */

.tag-row{
  display:flex;
  gap: calc(10px * var(--scale));
  flex-wrap: wrap;
  margin: calc(10px * var(--scale)) 0
          calc(24px * var(--scale));
}

.pill{
  border: 1px solid var(--hair);
  background: var(--pill);
  padding: calc(7px * var(--scale))
           calc(10px * var(--scale));
  border-radius: 999px;
  font-size: calc(12px * var(--scale));
  cursor: pointer;
}

.pill.active{
  background:#fff;
  border-color:#d9d9d9;
}

/* =========================
   POST LIST
   ========================= */

.post-list{
  display:flex;
  flex-direction: column;
  gap: calc(22px * var(--scale));
}

.post-title{
  font-size: calc(20px * var(--scale));
  margin: 0 0 calc(6px * var(--scale));
  letter-spacing: -0.02em;
}

.post-subtitle{
  color: var(--muted);
  margin-bottom: calc(8px * var(--scale));
}

.meta-row{
  display:flex;
  gap: calc(8px * var(--scale));
  font-size: calc(12px * var(--scale));
  color: var(--muted);
}

.badge{
  display:inline-flex;
  align-items:center;

  padding: calc(6px * var(--scale)) calc(10px * var(--scale));
  border-radius: 999px;

  background: #f3f4f6;       /* soft light grey */
  border: none;              /* no outline */
  color: #111827;            /* near-black, not harsh */

  font-size: calc(12px * var(--scale));
  line-height: 1;
}

.badge-row{
  display:flex;
  gap: calc(10px * var(--scale));
  flex-wrap: wrap;
  margin-top: calc(6px * var(--scale));
}

/* =========================
   ARTICLE PAGE
   ========================= */

.article-title{
  font-size: calc(44px * var(--scale));
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.prose{
  margin-top: calc(22px * var(--scale));
  font-size: calc(14px * var(--scale));
  line-height: 1.8;
}

.prose h2{
  font-size: calc(18px * var(--scale));
  margin: calc(26px * var(--scale)) 0
          calc(8px * var(--scale));
}

.prose .lede{
  font-size: calc(16px * var(--scale));
}

/* =========================
   FOOTER
   ========================= */



/* =========================
   MEDIA COMPONENTS
   ========================= */

.media{
  margin: calc(18px * var(--scale)) 0;
}

.media-wide{ max-width: 100%; }
.media-full{ max-width: 100%; }
.media-narrow{ max-width: calc(560px * var(--scale)); }

.media-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(12px * var(--scale));
  background: #f3f4f6;
}

.media-cap{
  margin-top: calc(10px * var(--scale));
  color: var(--muted);
  font-size: calc(12px * var(--scale));
}

.cap-sep{ margin: 0 calc(6px * var(--scale)); }
.cap-credit{ opacity: 0.9; }

/* =========================
   CAROUSEL
   ========================= */

.carousel{
  position: relative;
}

.carousel-viewport{
  overflow: hidden;
  border-radius: calc(12px * var(--scale));
}

.carousel-track{
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 260ms ease;
}

.carousel-slide{
  min-width: 100%;
  margin: 0;
}

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(36px * var(--scale));
  height: calc(36px * var(--scale));
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  cursor: pointer;
  line-height: 1;
  font-size: calc(22px * var(--scale));
}

.carousel-btn.prev{ left: calc(12px * var(--scale)); }
.carousel-btn.next{ right: calc(12px * var(--scale)); }

.carousel-dots{
  display: flex;
  gap: calc(8px * var(--scale));
  margin-top: calc(12px * var(--scale));
}



.dot.active{
  background: #111827;
}

/* =========================
   SLIDESHOW
   ========================= */

.slideshow-stage{
  position: relative;
}

.slideshow-slide{
  display: none;
  margin: 0;
}

.slideshow-slide.active{
  display: block;
}

/* =========================
   IMAGES INDEX PAGE
   ========================= */

.image-index{
  margin-top: calc(22px * var(--scale));
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--scale));
}

.image-index-item{
  display: flex;
  gap: calc(14px * var(--scale));
  padding: calc(10px * var(--scale));
  border: 1px solid var(--hair2);
  border-radius: calc(12px * var(--scale));
}

.image-index-thumb{
  width: calc(160px * var(--scale));
  flex: 0 0 auto;
}

.image-index-thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(10px * var(--scale));
  background: #f3f4f6;
}

.image-index-title{
  font-size: calc(14px * var(--scale));
  font-weight: 600;
  margin-bottom: calc(4px * var(--scale));
}

.image-index-subtle{
  color: var(--muted);
  font-size: calc(12px * var(--scale));
}

/* Fixed footer that is always visible */
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);

  

  padding: calc(16px * var(--scale)) 0;
  z-index: 20;
}

.footer .container{
  max-width: calc(1100px * var(--scale));
  margin: 0 auto;
}

.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(24px * var(--scale));
  padding-top: calc(16px * var(--scale));
}

.footer-title{
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: calc(4px * var(--scale));
}

.footer-subtle{
  color: var(--muted);
  font-size: calc(12px * var(--scale));
}

.footer-links{
  display: flex;
  gap: calc(14px * var(--scale));
  flex-wrap: wrap;
  font-size: calc(12px * var(--scale));
  color: var(--muted);
}

.footer-links a{
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer-links a:hover{
  opacity: 0.65;
}

.footer-text{
  margin: calc(14px * var(--scale)) 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--scale));
}

/* Forces the footer to sit below the fold even on short pages */
.footer-spacer{
  height: 35vh;               /* adjust: 25vh to 50vh depending on taste */
  min-height: 800px;          /* ensures it still works on small screens */
}

/* Centered logo header */
.topbar-inner.centered{
  justify-content: center;
}

.topbar-inner.centered .brand{
  margin: 0 auto;
}