@charset "UTF-8";

/* iOS first-paint stability */
html { -webkit-text-size-adjust: 100%; }

/* Color tokens */
:root{
  --ink:#1b1b1b;
  --muted:#6b6b6b;
  --accent:#0a84ff;
  --bg:#fdfbf6;

  --container: 1000px;
  --gutter: 16px;

  /* safe-area friendly outer padding */
  --pad-left: max(var(--gutter), env(safe-area-inset-left));
  --pad-right: max(var(--gutter), env(safe-area-inset-right));
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

/* links */
a { color: inherit; }
a:hover { color: var(--accent); }

/* accessibility */
.skip {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip:focus {
  position: static; width: auto; height: auto; padding: 8px 12px; background:#000; color:#fff;
}

a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* wrappers */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-left);
  padding-right: var(--pad-right);
}

/* header */
.site-header { padding-top: 22px; }
.masthead { text-align: center; margin: 0 0 6px; }
.masthead a {
  font-family: "adobe-caslon-pro", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: .2px;
  text-decoration: none;
}
.issuebar{
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
  color:var(--muted);
  font:700 12px/1 'Poppins', Arial, sans-serif;
  letter-spacing:.08em; text-transform:uppercase; padding-bottom:.9em;
}
.issuebar .dot{ width:.45em; height:.45em; background:var(--muted); border-radius:50%; display:inline-block; }

.contact-icons a svg {
  color: #111; /* default ink */
  transition: color 0.2s ease;
}
.contact-icons a:hover svg {
  color: #555; /* hover state */
}



/* intro */
.intro { padding: 10px 0 6px; text-align: center; }
.prelede { font-family:"adobe-caslon-pro", serif; font-size: 35px; margin: 0 0 6px; }
.lede {
  font: 400 clamp(16px, 1.45vw, 19px)/1.5 'Poppins', Arial, sans-serif;
  max-width: 75ch; margin: 0 auto 6px;
}

/* section rules */
.rule {
  height: 1px;
  border: 0;
  background: #aaa;
  margin: 18px auto;
  width: 100%;
  max-width: var(--container); /* matches your wrap max width */
}


/* generic grid */
.grid {
  display: grid;
  gap: 36px 16px;
}

/* cards (features) */
.tiles .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.card .thumb {
  position: relative; display: block; aspect-ratio: 16/10;
  background: #eee; overflow: hidden; border-radius: 6px;
}
.card .thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display:block;
}
.overline {
  font:700 12px/1 'Poppins', Arial, sans-serif; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; padding-top:1em;
}
.hed { font-family:"adobe-caslon-pro", serif; font-size: 1.5rem; line-height: 1.1; margin: 6px 0 6px; }
.dek { font: 400 16px/1.45 'Poppins', Arial, sans-serif; color: #2a2a2a; }

/* posts */
.section-hed {
  font-family:"adobe-caslon-pro", serif; font-size:1.8em; margin: 0 0 16px;
}
.grid--posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.post .thumb {
  position: relative; display:block; aspect-ratio:16/10;
  background:#eee; overflow:hidden; border-radius:6px;
}
.post .thumb img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* footer */
.site-footer { padding: 28px 0 40px; color: var(--muted); font-size: 13px; }

/* universal media safety */
img, svg, video { max-width: 100%; height: auto; display: block; }
html, body { max-width: 100%; overflow-x: hidden; }


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}




/* responsive */
@media (max-width: 900px) {
  .tiles .grid {
    grid-template-columns: 1fr; /* stack features */
  }
  .grid--posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px){
  /* full-width look for intro content on phones */
  .intro .wrap { padding-left: 0; padding-right: 0; }
  .lede { padding-left: var(--pad-left); padding-right: var(--pad-right); }

  .tiles .grid { grid-template-columns: 1fr; }
  .grid--posts { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .grid--posts {
    grid-template-columns: 1fr; /* stack posts */
  }
}
@media (max-width: 500px){
  :root{ --container: 385px; }
}


/* Stack EG middle section blocks on mobile: image first, copy below */
@media (max-width: 820px){
  /* Target the two-column content rows inside section blocks */
  .section .grid{
    display: grid;
    grid-template-columns: 1fr !important; /* override inline 1fr 1.6fr */
    gap: 14px;
  }

  /* Ensure the <figure> (image) appears on top even if markup varies */
  .section .grid figure.card{ order: -1; }

  /* Make sure images scale nicely when stacked */
  .section .grid .thumb img{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Keep each side to its content width */
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; }
.masthead, .contact-icons { flex: 0 0 auto; }

/* Make the masthead link only as wide as its text */
.masthead a { display: inline-block; position: relative; }

/* Ensure icons sit above any accidental overlays */
.contact-icons { position: relative; z-index: 2; }
.contact-icons a { display: inline-flex; align-items: center; }


/* If you discover a pseudo-element or header background overlaying, ignore clicks on it */
.site-header::before,
.site-header::after { pointer-events: none; }

/* (Optional) belt-and-suspenders: allow clicks on the SVG itself */
.contact-icons svg { pointer-events: auto; cursor: pointer; }