/* =======================
   Page/grid layout rules
   ======================= */

.frontpage{
  max-width:var(--max);
  margin:18px auto 64px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--gutter);
}

/* ==================
   Header + banner
   ================== */

/* Single-line motto hidden on desktop; returns on small screens */
.motto{
  grid-column:1/7;
  text-align:center;
  font:12px 'Roboto Mono',monospace;
  color:#666;
  letter-spacing:.8px;
  display:none;
}

/* Masthead with side capsules */
.masthead{
  grid-column:1/7;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin:-6px 0 4px;
}
.masthead .name{
  grid-column:2;
  font-family:'HarbourDecor','HarbourRegular','Playfair Display',serif;
  font-weight:700;
  font-size:clamp(54px,8.5vw,128px);
  letter-spacing:-1px;
  color:var(--ink);
}

/* Square newspaper capsules */
.mast-capsule{
  justify-self:stretch;
  background:var(--paper, #fdfcf8);
  padding:18px 20px;
  border-radius:0;
  height:120px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-width:220px;
}
.mast-capsule.left{  border:none; background:var(--paper, #fdfcf8); }
.mast-capsule.right{ border:none; }

.capsule-kicker{
  font:11px 'Roboto Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#666;
  text-align:center;
  margin-bottom:6px;
}
.capsule-body{
  font:13px 'Roboto Mono',monospace;
  text-align:center;
  line-height:1.45;
  max-width:200px;
}

/* Meta line */
.meta-line{
  grid-column:1/7;
  display:flex; justify-content:space-between; align-items:center;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
  padding:6px 8px;
  font:12px 'Roboto Mono',monospace;
}
.meta-line .right{ display:flex; gap:18px }

/* Banner */
.banner{ grid-column:1/7; text-align:center; margin:10px 0 12px; }
.banner .eyebrow{
  font:11px 'Roboto Mono',monospace;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#666;
}
.banner .hed{
  font-family:'Playfair Display',serif;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.04;
  font-size:clamp(28px,4.2vw,48px);
  margin:.2em 0 .25em;
}
.banner .dek{ max-width:900px; margin:0 auto; font-size:18px; letter-spacing:.2px }

/* ==========================
   Lead row (image + rail)
   ========================== */

.lead-row{
  grid-column:1/7;
  display:grid;
  grid-template-columns:4fr 2fr;
  align-items:start;
  gap:var(--gutter);
}
.lead-row.lead-tighter{ grid-template-columns:3fr 2fr; }

.lead-photo{
  border:1px solid var(--rule);
  background:rgba(255,255,255,.6);
  display:flex; flex-direction:column;
  margin:0;
}
.lead-photo img{
  width:100%; height:auto; display:block;
  aspect-ratio:3/2; object-fit:cover;
  mix-blend-mode:multiply; filter:grayscale(100%);
}
.lead-photo .caption{
  font:12px 'Roboto Mono',monospace; color:#666;
  padding:6px; border-top:1px solid var(--rule);
  background:rgba(255,255,255,.4);
}
.right-rail{ display:flex; flex-direction:column; gap:var(--gutter) }
.right-rail .sticky{ position:sticky; top:16px }

/* Remove double rule between lead and first section */
.lead-row + .feature-column{ border-top:0; padding-top:0; margin-top:8px }

/* ==========================
   About (feature column)
   ========================== */

.feature-column{
  grid-column:1/7;
  margin:28px 0 10px;
  border-top:1px solid var(--rule);
  padding-top:18px;
}
.feature-column .kicker{ margin-bottom:.4em }
.feature-column h2{ margin:.15em 0 .25em }
.feature-column .italic-head, .feature-column .fancy-byline{ margin-bottom:.9em }
.feature-column .feature-body{ width:100% }

/* one-col variant */
.feature-column.one-col .feature-body{ max-width:72ch; margin:0 auto }

/* 3-column About grid */
.about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  align-items:start;
}
.about-grid .col{
  display:block;
}
.about-grid .col > *{ margin:.55em 0 0; }
.about-grid .col > :first-child{ margin-top:0; }
.about-grid .col > :last-child{ margin-bottom:0; }

.about-contact{
  margin:12px auto 16px;
  max-width:360px;
}

@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; align-items:start; }
  .about-grid .col{ display:block; }
  .about-contact{ margin-left:0; margin-right:0; }
}

/* ==========================
   Experience band
   ========================== */

.exp-section{
  grid-column:1/7;
  margin:28px 0 10px;
  border-top:1px solid var(--rule);
  padding-top:18px;
}
.exp-section .kicker{ margin-bottom:.4em }
.exp-section h2{ margin:.15em 0 .25em }
.exp-section .exp-meta{ margin-bottom:.9em }
.exp-section .exp-lede{ max-width:72ch; margin:0 0 8px 0; color:#333 }

/* 3-column grid with subtle column rules */
.experience-grid{
  grid-column:1/7;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  margin-top:10px;
}
/* vertical rules */
.experience-grid.ruled .exp-card{
  padding-left:calc(var(--gutter) - 2px);
  border-left:1px solid var(--rule);
}
.experience-grid.ruled .exp-card:first-child{
  border-left:none;
  padding-left:0;
}

/* --- Override for top Experience section (2-column layout) --- */
#experience .experience-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

#experience .experience-grid.ruled .exp-card:first-child {
  border-left: none;
  padding-left: 0;
}

#experience .experience-grid.ruled .exp-card:nth-child(2) {
  border-left: 1px solid var(--rule);
  padding-left: calc(var(--gutter) - 2px);
}

/* remove 3rd-column rule for two-card layout */
#experience .experience-grid.ruled .exp-card {
  border-left: none;
  padding-left: 0;
}

/* keep mobile single-column stacking */
@media (max-width:980px) {
  #experience .experience-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================
   Certifications band
   ================== */

.certs-band{
  grid-column:1/7;
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  background:transparent;
}
.band-title{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.2;
  color:var(--ink);
  margin:.3em 0 .4em;
}

/* ==================
   Footer
   ================== */

footer{
  grid-column:1/7;
  text-align:center;
  margin-top:12px;
  font:12px 'Roboto Mono',monospace;
  color:#666;
}

/* ==================
   Responsive
   ================== */

@media (max-width:1100px){
  .lead-row{ grid-template-columns:1fr 1fr }
  .feature-column.three-col .feature-body{ column-count:2 }
  .experience-grid.ruled{ grid-template-columns:repeat(2,1fr) }
  .experience-grid.ruled .exp-card:nth-child(2n+1){ border-left:none; padding-left:0 }
}
@media (max-width:980px){
  .masthead{ grid-template-columns:1fr }
  .mast-capsule{ display:none }
  .motto{ display:block }

  .lead-row, .lead-row.lead-tighter{ grid-template-columns:1fr }
  .right-rail .sticky{ position:static }

  .experience-grid, .experience-grid.ruled{ grid-template-columns:1fr }
  .experience-grid.ruled .exp-card{ border-left:none; padding-left:0 }
}
@media (max-width:700px){
  .feature-column.three-col .feature-body{ column-count:1 }
  .feature-column.one-col .feature-body{ max-width:60ch }
}