:root{
  /* Offsets in rem so they scale with your fluid type */
  --nav-right: 1rem;     /* distance from the right edge */
  --nav-bottom: 1rem;    /* distance from the bottom edge */
  --reserve-bottom: 0rem;/* set >0rem if you want to keep text from going under the nav */
  --text-media-gap: 1rem;
  --about-photo-w: 22rem;   /* photo width on desktop/tablet */
  --about-gap: 1rem;        /* spacing between blocks */
  --about-col-gap: 1rem;    /* spacing between the three columns */
}

/* Text → media spacing (works in <main> and .project wrappers) */
 :is(main, .project)
   :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6)
   + :is(figure, .project-figure, img, video){
   margin-top: var(--text-media-gap);
 }

@font-face{
  font-family: "MyExperimentalSans-Mono";
  src: url("https://delightful-bienenstitch-d126bb.netlify.app/myexperimentalsans-mono.woff") format("woff");
  font-weight: 500; 
  font-style: normal;
  font-display: swap;
}

/* ==== Resets (kill ALL default gaps) ==== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }        /* no outer margins at all */
main, nav { margin: 0; padding: 0; }                        /* no inner margins either */
nav ul { list-style: none; margin: 0; padding: 0; }         /* remove UL default gaps */

/* ==== Fluid desktop/tablet ==== */
html { font-size: calc(100vw / 50); }            
body {
  font-family: "MyExperimentalSans-Mono", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin: 0;   /* 👈 change this */
  padding: 0.3rem 1rem;
  background:#fff; color:#000;
}

html{
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Full-bleed text blocks */
main, nav { width: 100%; margin: 0; padding: 0; }

/* Links yellow background blue hover */
a[href]{
  background: #ffff67;
  color: #000;
  text-decoration: none;
  padding: 0 .25em;
  line-height: 1.4;
  vertical-align: baseline;
}
a[href]:hover{ color:#1EFFF0; }



/* Remove any previous width:100% on nav; we’ll position it instead */
.contacts-nav{
  position: fixed;
  right: var(--nav-right);
  bottom: calc(var(--nav-bottom) + env(safe-area-inset-bottom, 0px)); /* iOS safe area */
  z-index: 10;
  margin: 0;
  padding: 0;
}

.contacts-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;  /* align links to the right edge */
  text-align: right;
}


.contacts-nav a[href]{
  background:#1EFFF0;  /* blue by default */
  color:#000;
  padding:.15em .4em;
  transition: background-color .15s ease; /* smooth */
}

.contacts-nav a[href]:hover,
.contacts-nav a[href]:focus-visible{
  color:#ffff67;  /* yellow txt on hover */
  
}



/* === “Fake link” that shows an image on hover/focus === */
.fake-link{
  /* copy your link chip look */
  background:#ffff67;
  color:#000;
  text-decoration:none;
  padding:0 .25em;
  cursor:default;
  position:relative;            /* anchor for the preview */
  outline:none;                  /* we'll rely on focus-visible below */
}

.fake-link:hover,
.fake-link:focus-visible{
  color:#1EFFF0;                 /* same hover color as links */
}

/* the hover image (hidden by default) */
.fake-link .hover-card{
  position:absolute;
  left:0;                        /* start under the phrase; tweak if needed */
  top:1.6em;                     /* vertical offset from baseline */
  width:min(28rem, 42vw);        /* scales with viewport, capped */
  max-height:75vh;
  object-fit:cover;
  background:#fff;

  opacity:0;
  visibility:hidden;
  transform:translateY(4px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events:none;           /* don’t steal the hover */
  z-index:20;
}

/* show it on hover OR keyboard focus */
.fake-link:hover .hover-card,
.fake-link:focus-within .hover-card{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}

/* FOR ABOUT: Panel variant: blue text card with clickable links */
.fake-link.panel .hover-card{
  /* override the image-focused defaults */
  top: 100%;               /* sit under the phrase */
  left: 0;
  width: min(26rem, 85vw);
  max-height: none;
  background: #1EFFF0;     /* your blue */
  color: #000;
  padding: .8em 1em;
  /*box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);*/
  pointer-events: auto;     /* make links clickable (base had none) */
}

/* Links inside the panel: neutralize global yellow block and style like links */
.fake-link.panel .hover-card a[href]{
  background: transparent;    /* overrides global a[href]{ background: #ffff67; } */
  padding: 0;                 /* remove inline-pill padding */
  border-radius: 0;
  text-decoration: underline;
}
.fake-link.panel .hover-card a[href]:hover,
.fake-link.panel .hover-card a[href]:focus-visible{
  color: #ffff67;             /* your yellow on hover */
}


/* keep the panel open as you move into it, and give it some room */
.fake-link.panel{
  display: inline-block;     /* anchor for the absolute card */
  position: relative;
  padding-bottom: .6em;      /* bridge so you don't fall through a gap */
}

/* nudge down a bit + margins around the panel */
.fake-link.panel .hover-card{
  top: calc(100% + .2em);    /* a little space under the phrase */
  margin: 0 .75em .75em;     /* breathing room on right/bottom/left */
  z-index: 100;              /* be safely above surrounding text */
}

/* ensure all panel text reads black by default */
.fake-link.panel .hover-card,
.fake-link.panel .hover-card p,
.fake-link.panel .hover-card li{
  color: #000;
}

/* === About page hover panel (keeps your existing fake-link behavior) === */
.is-about .fake-link{
  position: relative;
  display: block;               /* keep in-flow, don’t break the line */
  padding-bottom: .25em;         /* small “bridge” so hover doesn’t drop */
}

.is-about .fake-link .hover-card{
  /* align under the phrase, tighter top spacing */
  left: 0;
  top: -0.15em;     /* smaller gap above */
  width: 100cqi;                /* match this column’s width */
  max-width: none;
  box-sizing: border-box;       /* include padding in that width */
  background: #ffff67;          /* yellow panel */
  color: #000;                  /* black text */
  margin: 0 0 .75rem;
  padding: .5em 1em .8em;           /* only space below */
  pointer-events: auto;
  z-index: 100;                  /* sit above surrounding text */
}

/* ensure all text inside is black, links behave like links (no yellow pill) */
.is-about .fake-link .hover-card,
.is-about .fake-link .hover-card p,
.is-about .fake-link .hover-card li{ color: #000; }

.is-about .fake-link .hover-card a[href]{
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: #000;
  text-decoration: underline;
}
.is-about .fake-link .hover-card a[href]:hover,
.is-about .fake-link .hover-card a[href]:focus-visible{
  color: #1EFFF0;                /* your yellow on hover */
}

.is-about .fake-link.panel .hover-card > *{
  margin: 0;                 /* kill default p/ul margins */
}
.is-about .fake-link.panel .hover-card > * + *{
  margin-top: .35em;         /* gentle spacing between items */
}

.is-about .fake-link.panel .hover-card p:first-child,
.is-about .fake-link.panel .hover-card ul:first-child{
  margin-top: 0;
}

/* Tidy list indentation in the panel */
.is-about .fake-link.panel .hover-card ul{
  padding-left: 0;
  margin-left: 0;
  list-style: none;       
}
.is-about .fake-link.panel .hover-card li + li{
  margin-top: .2em;          /* compact list */
}

/* ==== MOBILE SINGLE BLOCK ==== */
@media (max-width: 700px){
  /* 1) Typography scale for all non-archive pages */
  html { font-size: calc(100vw / 17); }   /* smaller divisor → bigger text */
  body { line-height: 1.45; }

  /* 2) Bottom contacts nav (mobile layout) */
  .contacts-nav{
    position: static;
    left: var(--nav-left, 1rem);
    /*bottom: calc(var(--nav-bottom, 1rem) + env(safe-area-inset-bottom, 0px));*/
    
    right: auto;
    inset: auto;
    width: max-content;
    z-index: auto;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    
  }
  .contacts-nav ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .contacts-nav li{ width: auto; }

  /* 3) Reserve space if overlap worries you 
  main{ padding-bottom: var(--reserve-bottom); }*/
  main{ padding-bottom: 0; }

  /* 4) Hover preview narrower on phones */
  .fake-link:not(.panel) .hover-card{ width: 70vw; }

  /* 5) About page stacking */
  .is-about .about-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "photo"
      "cols";
    gap: .75rem;
  }
  .is-about .about-photo img{ width: 100%; }
  .is-about .about-cols{ grid-template-columns: 1fr; gap: .75rem; }


  

  :root{ --text-media-gap: 1rem; }


  /* 6) Project page header stacks */
  .is-project .project{ grid-template-columns: 1fr; }
  .is-project .project-back{ grid-column: 1; justify-self: end; }
  .is-project .project h1{ grid-column: 1; margin: 0; }

  /* 7) Two-up images stack to one */
  .project-pair{
    grid-template-columns: 1fr;
    gap: .5rem;
  }

/* Project pages on mobile: show only the bottom back chip */
.is-project .project-head .project-back{ display: none; }        /* hide the top-right chip */
.is-project .contacts-nav{ display: none; }                       /* hide the bottom contacts bar */
.is-project .project-back-mobile{
  display: inline-block;                                          /* show the bottom back chip */
  margin: 1rem 0 1.25rem;                                         /* a bit of white space after */
}
}




/* Grid: top row = [nav | photo], second row = [three columns] */
.about-grid{
  display: grid;
  grid-template-columns: 1fr var(--about-photo-w);
  grid-template-areas:
    "nav  photo"
    "cols cols";
  align-items: start;
  gap: var(--about-gap);
}

/* Top-left chip link (matches your yellow link style) */
.about-nav{
  grid-area: nav;
  justify-self: start;
  background:#ffff67;
  color:#000;
  text-decoration:none;
  padding:0 .25em;
}

/* Top-right photo */
.about-photo{ grid-area: photo; margin:0; }
.about-photo img{
  display:block;
  width: var(--about-photo-w);
  max-width: 100%;
  height:auto;
}

/* Three columns below the photo */
.about-cols{
  grid-area: cols;
  display: grid;
  gap: var(--about-col-gap);
}
@media (min-width:701px){
  .about-cols{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.about-col h2{
  margin: 0 0 .5em 0;
  font-size: 1em;           /* keep headings aligned with your body size */
  font-weight: normal;      /* or 600 if you want emphasis */
}
.about-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-col li{ margin: 0 0 .4em 0; }
.about-col{ container-type: inline-size; overflow: visible; }

/* Reusable chip links */
a.chip{
  display:inline-block;
  background:#1EFFF0;   /* blue box */
  color:#000;           /* text */
  padding:.15em 2em;
  text-decoration:none;
  transition: color .15s ease; /* only text color animates */
}
a.chip:hover,
a.chip:focus-visible{
  color:#ffff67;        /* yellow text on hover/focus */
}

/* === About page: smaller point size === */
/* Desktop / tablet */
@media (min-width:701px){
  html.is-about { font-size: calc(100vw / 61); }   /* bigger number = smaller text */
}

/* ===== Simple project page tweaks (reusable) ===== */

.project h1{ margin: 0 0 .6em; font-size: 3em; }      /* subtle title size */
.project p{ margin: 0 0 .6em; }                           /* paragraph spacing */

.project-figure{ margin: 0 0 .75rem; }                    /* space between images */
.project-figure img{
  display:block;
  width:100%;            /* full-bleed image within your page */
  height:auto;
}

/* Rezak only: put the back chip on the right, keep everything else below it */
/* Rezak page only (scoped by <html class="is-project">) */
@media (min-width: 701px){
  .is-project .project{
    display: grid;
    grid-template-columns: 1fr max-content; /* title (left) | chip (right) */
    column-gap: .75rem;                      /* tweak spacing between them */
    align-items: start;
  }

  /* top-right back chip */
  .is-project .project-back{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    line-height: 1;
    float: none;          /* neutralize any earlier float */
    position: static;     /* neutralize any earlier absolute/fixed */
  }

  /* h1 on the same top line (left) */
  .is-project .project h1{
    grid-column: 1;
    grid-row: 1;
    margin: 0;            /* kill default top margin that causes the offset */
  }

  /* everything else (paragraphs, figures) flows below, full width */
  .is-project .project > :not(.project-back):not(h1){
    grid-column: 1 / -1;
  }


  /* Rezak/project page header row */
  .is-project .project-head{
    display: flex;
    justify-content: space-between;  /* H1 left, back chip right */
    align-items: flex-start;          /* align on the same top edge */
    gap: .75rem;
    margin: 0 0 .6em;
  }

  /* Kill H1’s default top margin so it sits flush with the chip */
  .is-project .project-head h1{ margin: 0; }

  /* Optional micro-nudges (edit just these values) */
  .is-project .project-head h1{ position: relative; top: var(--rezak-h1-nudge, -0.25em); }
  .is-project .project-back{     position: relative; top: var(--rezak-back-nudge, 0.5em); }

  /* Two-up row for project images */
  .project-pair{
    display: grid;
    grid-template-columns: 1fr 1fr;     /* two columns */
    gap: .75rem;                        /* space between them (match your taste) */
    margin: 0 0 .75rem;                 /* space below the pair row */
  }

  /* Inside the pair, let the grid gap handle spacing (no extra margins) */
  .project-pair .project-figure{ margin: 0; }

  /* Make sure images behave (these likely exist already) */
  .project-figure img{
    display: block;
    width: 100%;
    height: auto;
  }
  .is-project .project-back-mobile{ display: none; }
}


/* --- Font rendering tuning (global) --- */
html{
  -webkit-font-smoothing: antialiased;   /* macOS Safari/Chrome: thins strokes */
  -moz-osx-font-smoothing: grayscale;    /* macOS Firefox */
  text-rendering: optimizeLegibility;    /* enables kerning/ligatures, softer AA */
  font-synthesis: none;                  /* prevent synthetic bold/italic */
}

/* Make sure we aren’t accidentally bolding anywhere */
body{ font-weight: 500; }


/* ================================
   ARCHIVE (scoped to html.is-archive)
   ================================ */

/* knobs & frame */
html.is-archive{
  --frame:   67.5rem;
  --content: 53.75rem;
  --space:   1.25rem;

  --fg:#111;
  --muted:#777;
  --rule:#e7e7e7;
  --br:12px;
}

/* Base face + rhythm (body 23pt at 1080) */
html.is-archive body{
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-family: "MyExperimentalSans-Mono", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.55;
  font-size: 1.55rem;                 /* ≈30.7px (23pt) */
}

/* Sizes per spec (at 1080) — expressed in rem so they scale */
.is-archive h1{                          /* “Archive” page title: 59pt ≈ 78.5px */
  font-size: 4rem;                     /* 78.5 / 16 */
  margin: 0 0 .3em;
  text-align: center;
}

/* fixed 6 columns, 2 rows; fill content width 
.is-archive .months{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: .5rem 1rem;
  width: 100%;
  box-sizing: border-box;

  justify-items: stretch;   stretch cells to column width 
} */

.is-archive .months a,
.is-archive .months span{
  display: block;
  font-size: 1rem;      /* your chosen ribbon size */
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--fg);
  text-decoration: none;
 
}

/* clickable vs placeholder */
.is-archive .months a{ opacity: .35; }
.is-archive .months a[aria-current="true"]{ opacity: 1; }
.is-archive .months span{ opacity: .25; pointer-events: none; }

/* text alignment per column:
col 1 → left (items 1&2), cols 2–5 → center, col 6 → right (items 11&12) */
.is-archive .months > :nth-child(-n+2){ text-align: left; }     /* 1,2 */
.is-archive .months > :nth-child(n+11){ text-align: right; }    /* 11,12 */
.is-archive .months > :not(:nth-child(-n+2)):not(:nth-child(n+11)){
    
text-align: center;
}


.is-archive .date-chip{                   /* exact day tag: 23pt (body size) */
  display:inline-block;
  background:#1EFFF0;
  color:#000;
  padding:.15em .35em;
  line-height:1;                          /* snug chip */
  margin: .5 0 0;
  font-size: .85em;
}
.is-archive .entry-title{                 /* post title: 28pt ≈ 37.3px */
  font-size: 2rem;
  margin: 0 0 .2em;
}
.is-archive .entry-intro{                 /* intro paragraph == body size */
  margin: 0 0 .9em;
}
.is-archive .story figcaption{            /* captions: 18pt ≈ 24px */
  font-size: 0.8rem;
  text-align:center;
  margin-top:.35em;
}
.is-archive .note{ color:#444; margin-top:.5rem; font-size:.55em; }

/* Space from the full-width figure to the following two-up row */
.is-archive article figure + .row-2{
  margin-top: var(--space);
}

/* General in-article stacking (keeps things from touching) */
.is-archive article > * + *{
  margin-top: var(--space);
}

/* ===== DESKTOP/TABLET (≥900px) ===== */
@media (min-width:800px){
  /* make 1rem scale so --frame == viewport width at 1080 */
  html.is-archive{ font-size: calc(100vw / 67.5); }

  .is-archive main{
    width: var(--frame);
    box-sizing: border-box;
    /* center content to ≈860px inside the frame */
    padding-left:  calc((var(--frame) - var(--content)) / 2);
    padding-right: calc((var(--frame) - var(--content)) / 2);
    margin: 0 auto 6rem;
  }

  
}


/* ===== Components ===== */

/* Months ribbon — fixed 6 columns, fills content width, right-aligned cells */
.is-archive .months{
  position: static !important;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;                 /* fill top→bottom per column */
  justify-items: stretch;                     /* labels hug right edge of cells */
  align-items: start;
  gap: .5rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Shared link/placeholder look */
.is-archive .months a,
.is-archive .months span{
  display:block;
  text-decoration: none;
  color: var(--fg);
  letter-spacing: .02em;
  white-space: nowrap;
}
.is-archive .months a{ opacity:.35; background:transparent !important; padding:0 !important; border-radius:0 !important; }
.is-archive .months a[aria-current="true"]{ opacity:1; }
.is-archive .months span{ opacity:.25; pointer-events:none; }

/* Stream grid + media */
.is-archive .story{ display:grid; gap: var(--space); }
.is-archive .story figure{ margin:0; }
.is-archive .story img,
.is-archive .story video{
  width:100%; height:auto; display:block; border-radius:var(--br);
}

/* Two-up pair (desktop) */
.is-archive .row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: var(--space);
  align-items:start;
}
.is-archive .row-2 > *{ min-width:0; }
.is-archive .row-2 figcaption{ text-align:center; }

/* Footer with hairline rule, content width */
.is-archive .footer{
  margin-top: 2.25rem;
  color:#777;
  font-size:.8125rem;
  border-top: .5px solid #000;
  padding-top: 1rem;
}

/* ===== ARCHIVE: Mobile layout (≤799px tighter) ===== */
@media (max-width:799px){
  html.is-archive{
    font-size: calc(100vw / 28);  /* smaller base: bigger divisor = smaller text */
  }

  .is-archive main{
    width: 100%;
    margin: 1rem auto 2rem;
    padding-inline: 1rem;         /* side breathing room */
  }

  /* Archive page title */
  .is-archive h1{
    font-size: 2.4rem;            /* ≈38px at 16px base */
    margin: 0 0 .4em;
    text-align: center;
  }

  /* Months ribbon: 3 cols × 4 rows, smaller text */
  .is-archive .months{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    justify-items: stretch;
    gap: .35rem .75rem;
  }

  
 /* .is-archive .months a,
  .is-archive .months span{
    font-size: 0.9rem; 
    }           ~14px */
  
  .is-archive .months > *{ text-align: center; }
  .is-archive .months > :nth-child(-n+4){ text-align: left; }  /* 1..4 (col 1) */
  .is-archive .months > :nth-child(n+9){  text-align: right; }


  /* Body text smaller */
  .is-archive body{
    font-size: 1.2rem;            /* ~19px */
    line-height: 1.45;
  }

  /* Date chip smaller */
  .is-archive .date-chip{
    font-size: 0.85em;
    padding: .1em .3em;
    margin: .5rem 0 0;
  }

  /* Entry title bigger than body */
  .is-archive .entry-title{
    font-size: 1.4rem;            /* ~22px */
    margin: 0 0 .4em;
  }

  /* Captions smaller */
  .is-archive .story figcaption{
    font-size: 0.75rem;           /* ~12px */
  }

  /* Stack all two-up rows */
  .is-archive .row-2{
    grid-template-columns: 1fr;
    gap: .5rem;
  }
}


.is-archive main{ outline:1px dashed hotpink; }
.is-archive .story, .is-archive .months{ outline:1px dashed lightblue; }