/* =====================================================
   Two-column layout: sticky About (left) + scrolling Posts (right)
   Modern approach: CSS Grid + sticky; no floats. 
   Stacks automatically on short viewport heights and narrow widths.
   ===================================================== */
:root{
  --bg: #FCFCFC;
  --text: #240e19;
  --muted: #414349;
  --faint: #787C87;
  --link: #f15b3c;
  --cta: #f15b3c;             /* base orange */
  --cta-hover: #f36f53;       /* lighter on hover (fallback) */
  --cta-text: #111111;        /* dark text for WCAG contrast */
  --cta-border: #c84a31;      /* slightly darker border */
  --panel: rgba(255,255,255,0.06);
  --border: #414349;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --header-h: 84px;
  --header-pad: clamp(16px, 4vw, 48px);
  --font-display: linotype-sabon, ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --font-headers: neue-haas-grotesk-display, ui-sans-serif, Segoe UI, Roboto, Arial, sans-serif;

  /* Behavior thresholds (tweak as needed) */
  --stack-below-height: 820px;    /* when viewport height is smaller, stack columns */
  --desktop-breakpoint: 980px;    /* when viewport is wider than this, use two columns */
  --post-media-width: 320px;      /* desktop width of media column */

    /* About (left) height-aware type + spacing */
  /* height-driven sizing for About on wide screens */
  --about-base-min: 18px;     /* minimum base size */
  --about-base-max: 32px;     /* maximum base size (raise for bigger) */
  --about-base-scale: 2.6svh; /* how fast it grows with height */

  --about-top-offset: calc(var(--header-h) + 1rem); /* sticky offset under header */
  --about-bottom-pad: 1rem;                         /* breathing room at bottom */
}

/* Base */
*,
*::before,
*::after { box-sizing:border-box; }
html:focus-within { scroll-behavior:smooth; }
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: var(--header-h);
}
img{ display:block; max-width:100%; height:auto; }
a{ color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
p{ margin:0 0 1rem; }

.container{ width:min(1450px, 92%); margin-inline:auto; }
.visually-hidden{ position:absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap; }
.skip-link{ position:absolute; left:0; top:-40px; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; }
.skip-link:focus{ top:10px; z-index:100; }

/* Header */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--bg);
  padding-inline: var(--header-pad);
}
/* Inner header layout */
.site-header .header-inner {
  width: 100%;
  max-width: none;
  margin: 0;
}

.header-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* brand on left, nav on right */
  margin: 0;
}
/* Brand group (avatar + name) */
.brand{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  padding-left: .55rem;
}
.brand-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.brand-name{
  font-family: var(--font-headers); 
  font-weight: 700;
  letter-spacing: .2px;
  font-size:1em;
}

/* Right-side links */
.site-nav{
  display: flex;
  gap: 1rem;
}
.site-nav a{
  text-decoration: none;
  color: var(--faint);
  padding: .35rem .55rem;
  border-radius: .5rem;
}
.site-nav a:last-child{ padding-right: 0; }

.site-nav a:hover{
  color: var(--text);
}
.site-nav .social-ico { height: 15px;}


/* Layout */
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  /*padding: clamp(1.2rem, 5vw, 2rem) 0;*/
}

/* About (left) */
.about{
  align-self: start;
  position: static;              /* becomes sticky on desktop (see media rule) */
  display:flex; flex-direction:column; gap: 1rem;
}
.about-title{ 
  font-family: var(--font-display); 
  /*font-size: clamp(1.4rem, 3vw, 1.8rem); */
  margin:0; 
  text-wrap:balance;
}
.about-text{ 
  color: var(--muted); 
  font-family: var(--font-display); 
  font-size: clamp(1.05rem, 2.1vw, 1.7rem); 
}
.about-photo img{ /*Not Used Right Now*/
  border-radius: 50% 50%;
  max-width: 180px;
  width: 100%;
  height: auto;
  margin:auto;
  max-height: 70vh;
  object-fit: cover;
}

/* ===== Buttons ===== */
.btn{
  appearance:none; display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:.6rem; border:1px solid var(--border);
  background:transparent; color:var(--text); font:inherit; line-height:1.15;
  text-decoration:none; cursor:pointer; transition:background .2s,border-color .2s,transform .02s,opacity .2s;
}
.btn:hover{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}
.btn-icon{ transform: translateY(1px); }

/* Solid CTA */
.btn--cta{
  background: var(--cta);
  color: var(--cta-text);
  border-color: var(--cta-border);
  font-weight: 600;   
}
.btn--cta:hover{
  background: var(--cta-hover);  /* fallback for older browsers */
  background: color-mix(in srgb, var(--cta) 75%, white 25%);
  border-color: color-mix(in srgb, var(--cta-border) 88%, white 12%);
}
.btn--cta:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 35%, white 65%);
}

/* =========================
   Posts
   ========================= */
/* Posts container */
.posts{
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  /* Optional: enable container queries on the list
     container-type: inline-size;
  */
}

/* Base card: side-by-side (text 2fr / image 1fr) */
.post{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); /* text / image */
  grid-template-rows: auto auto;                            /* row1: meta+image, row2: body */
  gap: 0.75rem 1rem;
  padding: clamp(1rem, 2vw, 1.25rem) 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.post:first-of-type{ border-top: none; }
.post:last-of-type{ padding-bottom: 0; }

/* meta top-left */
.post-meta{
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center;
  column-gap: .5rem; row-gap: .25rem;
  flex-wrap: wrap;            /* allow wrapping */
  min-width: 0;               /* prevent overflow */
  color: var(--muted); font-size: .95rem; width: 100%;
}
/* Never truncate publication name */
.post-source{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.post-meta .post-date{ margin: 0; }
.post-dot{ opacity: .6; }

/* small pub icon */
.pub-badge{
  width: 20px; height: 20px; border-radius: 4px; object-fit: cover;
  box-shadow: var(--shadow);
}

/* body below meta, left column */
.post-body{
  grid-column: 1; grid-row: 2;
  display: grid; gap: .35rem;
  justify-items: start;
}
.post-date{ font-family: var(--font-mono); font-size: .75rem; color: var(--muted); letter-spacing: .02em; }
.post-title{ font-family: var(--font-headers); font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: .3rem 0; }
.post-desc{ font-family: var(--font-body); font-size: 0.85em; font-style: italic; }
.post-btn{
  margin-top: .25rem;
  display: inline-flex;
  justify-self: start;
  align-self: start;
  width: auto;
  min-width: 0;
  font-size:0.8em;
}

/* image pinned top-right spanning both rows */
.post-media{
  grid-column: 2; grid-row: 1 / span 2;     /* align with meta at top; span through body */
  align-self: start; justify-self: end;
}
.post-media img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* optional:
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow);
  */
}

/* =========================
   Footer
   ========================= */
.site-footer{ border-top:1px solid var(--border); padding: 2px 0 2rem 0; margin-top:2rem; }
.footer-inner{
  display:grid; gap:1rem; grid-template-columns: 1fr; align-items:start;
}
.footer-block{
  color: var(--muted); 
  font-family: var(--font-headers);
}
.footer-block li a {text-decoration:underline;}
.footer-header { font-weight: 600;}
.footer-contact a{ text-decoration:none; }
.social{ list-style:none; padding:0; margin:0; display:block; gap:1rem; }
.social a{ text-decoration:none; color: var(--muted); }
.social a:hover{ color: var(--text); }

/* =========================
   Breakpoints
   ========================= */
/* Progressive enhancement: use the About column’s OWN height */
@supports (font-size: 1cqh){
  @media (min-width: 980px){
    .about{
      /* You can keep the base clamp if you like; not required here */
    }
    .about-title{
      /* title ~ scales with container height, capped */
      font-size: clamp(1.6em, 6cqh, 2.4em);
    }
    .about-text{
      /* body text also scales with container height */
      font-size: clamp(1em, 2.6cqh, 1.25em);
      line-height: clamp(1.4, 1.1 + 0.2cqh, 1.6);
    }
    .about{
      gap: clamp(.6rem, 2cqh, 1.4rem);
    }
    .about-photo img{
      max-height: 32cqh; /* tie image cap to the column’s height */
    }
  }
}
/* LARGE (≥980px): side-by-side */
@media (min-width: 980px){
  .layout{ grid-template-columns: 1.2fr 1fr; align-items:start; }

  .about{
    position: sticky;
    top: var(--about-top-offset);
    padding: 0 1rem 0 0;

    /* ensure the column is at least the visible space below the header */
    min-height: calc(100svh - var(--about-top-offset) - var(--about-bottom-pad));

    /* center the content vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* height-responsive base font size for the whole block */
    font-size: clamp(var(--about-base-min),
                     calc(0.25rem + var(--about-base-scale)),
                     var(--about-base-max));

    /* spacing that also breathes a bit with height */
    gap: clamp(.6rem, 1.6svh, 1.4rem);
  }

  /* Title/body sizes are relative to the base above,
     so the whole block grows/shrinks together. */
  .about-title{
    font-size: clamp(1.5em, 1.9em, 2.3em);
    margin: 0;
    text-wrap: balance;
  }
  .about-text{
    font-size: 1em;          /* 1× the scalable base */
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
  }

  /* Headshot restraint on wide/short screens */
  .about-photo img{
    max-height: 30svh;
    width: auto; height: auto; object-fit: cover;
  }
  .post{ grid-template-columns: 1fr var(--post-media-width); align-items: start; }
  .post-media{ justify-self:end; }
  .header-inner { margin: 0; }
  .brand-avatar{ width: 60px; height: 60px; }
  .brand-name{ font-size:1.3em; }
  .site-nav .social-ico { height: 18px;}
}

/* LARGE (680–979.98px): stack posts so description runs full width */
@media (min-width:980px) and (max-width: 1380px){
  .post{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto; /* meta, image, body */
  }
  .post-media{ grid-column: 1; grid-row: 2; justify-self: stretch; }
  .post-body{  grid-column: 1; grid-row: 3; }
}

/* SMALL (520–679.98px): side-by-side again */
@media (min-width: 520px) and (max-width: 979.98px){
  .post{
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    grid-template-rows: auto auto;
  }
  .post-media{ grid-column: 2; grid-row: 1 / span 2; justify-self:end; }
  .post-body{  grid-column: 1; grid-row: 2; }
}

@media (min-width: 680px){
  .footer-inner{ grid-template-columns: 1fr 1fr 1fr; }
}

/* MOBILE (<520px): stack everything */
@media (max-width: 519.98px){
  .post{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .post-media{ grid-column: 1; grid-row: 2; }
  .post-body{  grid-column: 1; grid-row: 3; }
}

/* Tighter header on small screens */
@media (max-width: 520px){
  .brand-avatar{ width: 28px; height: 28px; }
  .brand-name{ font-size: .95rem; }
  .site-nav{ gap: .6rem; }
}

/* OPTIONAL: container query safety net for tight cards
.posts{ container-type: inline-size; }
@container (max-width: 560px){
  .post{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .post-media{ grid-column: 1; grid-row: 2; }
  .post-body{  grid-column: 1; grid-row: 3; }
}
*/