/* ==========================================================================
   kensyring.com
   Design system derived from Ken Syring's printed business card.
   Colors and type are locked — see README before changing anything here.
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subset) ----------
   Spectral and IBM Plex Mono, both SIL Open Font License.
   Self-hosted rather than loaded from Google so the page makes no
   third-party requests. ------------------------------------------------- */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/spectral-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/spectral-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/spectral-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-normal.woff2') format('woff2');
}

:root{
  --white:#FFFFFF;
  --ink:#2A385A;
  --federal:#2F5584;
  --signal:#DE262D;
  --ink-soft:#66718C;
  --hairline:#D8DCE5;
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--federal);text-decoration:none;border-bottom:1px solid var(--hairline);transition:border-color .15s ease,color .15s ease;}
a:hover{border-bottom-color:var(--signal);}
a:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-bottom-color:transparent;}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

/* Skip link — visually hidden until focused. */
.skip{
  position:absolute;left:-9999px;top:0;
  font-family:var(--mono);font-size:13px;
  background:var(--white);color:var(--ink);
  padding:12px 16px;border:1px solid var(--hairline);border-bottom-color:var(--hairline);
  z-index:10;
}
.skip:focus{left:24px;top:12px;}

/* ---------- Masthead ---------- */
header{padding:64px 0 0;}
.mast-name{
  font-weight:600;
  font-size:clamp(26px,5vw,34px);
  letter-spacing:.32em;
  text-transform:uppercase;
  text-indent:.32em; /* balance tracking */
  white-space:nowrap;
}
.mast-rule{
  width:64px;height:3px;background:var(--signal);
  margin:14px 0 16px;border:none;
}
.mast-tag{
  font-style:italic;
  font-weight:500;
  color:var(--federal);
  font-size:clamp(16px,2.6vw,19px);
}
nav{
  margin-top:36px;
  padding:14px 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  display:flex;gap:32px;flex-wrap:wrap;
}
nav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:none;
}
nav a:hover{color:var(--signal);}

/* ---------- Hero ---------- */
/* Vertical padding only — the horizontal gutter comes from .wrap. Using the
   `padding` shorthand here would zero out .wrap's 24px and let hero text run
   to the screen edge on mobile. */
.hero{padding-top:72px;padding-bottom:56px;display:grid;grid-template-columns:1fr 264px;gap:48px;align-items:start;}
.hero-photo{width:100%;display:block;filter:contrast(1.02);}
.hero-photo img{width:100%;height:auto;display:block;aspect-ratio:4/5;}
.photo-credit{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:8px;letter-spacing:.06em;}
@media (max-width:700px){
  .hero{grid-template-columns:1fr;gap:36px;}
  .hero-photo{max-width:300px;}
}
.hero-thesis{
  font-weight:300;
  font-size:clamp(24px,4.2vw,32px);
  line-height:1.45;
  max-width:40ch;
}
.hero-thesis em{font-style:italic;font-weight:400;color:var(--federal);}
.hero-bio{
  margin-top:28px;
  max-width:62ch;
  color:var(--ink);
}
.hero-links{margin-top:32px;display:flex;gap:28px;flex-wrap:wrap;}
.hero-links a{
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--signal);padding-bottom:3px;
}
.hero-links a:hover{color:var(--signal);}

/* ---------- Section scaffolding ---------- */
/* `section.wrap` rather than `section` so this outranks .wrap's padding and the
   56px vertical rhythm actually applies. */
section.wrap{padding-top:56px;padding-bottom:56px;}
.sec-label{
  display:flex;align-items:center;gap:14px;
  margin-bottom:36px;
}
.sec-label::before{content:"";display:block;width:28px;height:3px;background:var(--signal);}
.sec-label h2{
  font-family:var(--mono);
  font-size:13px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
}

/* ---------- Service record ledger ---------- */
.ledger{border-top:1px solid var(--hairline);}
.ledger-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--hairline);
}
.ledger-row .yrs{
  font-family:var(--mono);font-size:13px;color:var(--ink-soft);
  padding-top:3px;white-space:nowrap;
}
.ledger-row .role{font-weight:500;}
.ledger-row .org{color:var(--ink-soft);font-size:15.5px;}

/* ---------- Work list ---------- */
.work-item{
  padding:26px 0;
  border-bottom:1px solid var(--hairline);
}
.work-item:first-of-type{border-top:1px solid var(--hairline);}
.work-meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.work-meta .venue{color:var(--federal);}
.work-item h3{font-weight:500;font-size:20px;line-height:1.4;}
.work-item h3 a{color:var(--ink);border-bottom:none;}
.work-item h3 a:hover{color:var(--signal);}
.work-item p{margin-top:8px;font-size:15.5px;color:var(--ink-soft);max-width:60ch;}

/* ---------- Speaking ---------- */
.speak-row{
  display:grid;grid-template-columns:110px 1fr;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--hairline);
}
.speak-row:first-of-type{border-top:1px solid var(--hairline);}
.speak-row .yr{font-family:var(--mono);font-size:13px;color:var(--ink-soft);padding-top:2px;}
.speak-row .what{font-size:16px;}
.speak-row .what strong{font-weight:500;}
.speak-row .what span{color:var(--ink-soft);}

/* ---------- Affiliations ---------- */
.affil{display:flex;flex-wrap:wrap;gap:12px;}
.affil li{
  list-style:none;
  font-family:var(--mono);font-size:13px;
  border:1px solid var(--hairline);
  padding:8px 14px;
  color:var(--ink);
}

/* ---------- 404 page ---------- */
.error-page{padding:96px 0 140px;}
.error-code{
  font-family:var(--mono);
  font-size:13px;font-weight:500;
  letter-spacing:.22em;
  color:var(--ink-soft);
}
.error-msg{
  margin-top:18px;
  font-weight:300;
  font-size:clamp(24px,4.2vw,32px);
  line-height:1.45;
}
.error-page .hero-links{margin-top:36px;}

/* ---------- Contact / footer ---------- */
footer{
  margin-top:24px;
  border-top:3px solid var(--signal);
  padding:48px 0 72px;
}
.contact-grid{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:8px;}
.contact-grid a, .contact-grid span{
  font-family:var(--mono);font-size:14px;color:var(--ink);border-bottom:none;
}
.contact-grid a:hover{color:var(--signal);}
.foot-tag{
  margin-top:40px;font-style:italic;color:var(--federal);font-size:15px;
}
.foot-loc{margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;}

@media (max-width:560px){
  .ledger-row,.speak-row{grid-template-columns:1fr;gap:4px;}
  .mast-name{letter-spacing:.2em;text-indent:.2em;}
  header{padding-top:44px;}
}