/* ---------------------------------------------------------------------------
   site.css — the shared stylesheet for every generated page.

   The design came from a styled sample post (an artifact bundle) which
   inlined every rule as a style="" attribute. Those are lifted here so pages
   cache, stay editable, and share one type system with index.html.

   Topic colours are index.html's muted palette (the finished homepage), not
   the brighter first-pass values in the sample.

   Copied to /assets/site.css at build time by scripts/build_site.py.
--------------------------------------------------------------------------- */

:root{
  --bg:#eef3fb;
  --surface:#f8faff;
  --ink:#1e3a66;
  --body:#333d52;
  --muted:#5a6580;
  --faint:#7b86a0;
  --accent:#5a77ab;
  --rule:#d8e0ec;

  --innovation:#c2453d;
  --food:#2f6bab;
  --personal:#c9962c;

  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;

  --col:680px;
  --gutter:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--serif);
  font-size:18.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{color:var(--food)}
a:hover{color:var(--innovation)}

img{max-width:100%;height:auto}

/* ---------- header ---------- */

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:24px var(--gutter);
  font-family:var(--sans);
}

.site-header .brand{
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-.01em;
}
.site-header .brand:hover{color:var(--accent)}

.site-nav{
  display:flex;
  gap:clamp(16px,2.4vw,26px);
  font-size:14px;
  font-weight:500;
}

.site-nav a{
  text-decoration:none;
  color:var(--muted);
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
}
.site-nav a:hover{border-bottom-color:currentColor}

.site-nav a[data-topic="innovation"]{color:var(--innovation)}
.site-nav a[data-topic="food"]{color:var(--food)}
.site-nav a[data-topic="personal"]{color:var(--personal)}

/* the section you are already in stays underlined */
.site-nav a[aria-current="page"]{border-bottom-color:currentColor}

/* ---------- shared column ---------- */

main{flex:1 0 auto}

.wrap{
  width:var(--col);
  max-width:100%;
  margin:0 auto;
  padding:30px var(--gutter) 64px;
}

/* ---------- meta: category pills + date ---------- */

.meta-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
}

.pill{
  padding:5px 12px;
  border-radius:999px;
  text-decoration:none;
  background:rgba(90,119,171,.12);
  color:var(--accent);
}
.pill:hover{color:var(--ink)}

.pill[data-topic="innovation"]{background:rgba(194,69,61,.12);color:#a3352e}
.pill[data-topic="food"]{background:rgba(47,107,171,.12);color:#255789}
.pill[data-topic="personal"]{background:rgba(201,150,44,.16);color:#8d6716}

.date{color:var(--faint);font-weight:500}

/* ---------- the three dots, used as a rule ---------- */

.dots{display:flex;gap:6px;margin:26px 0 10px}
.dots span{width:9px;height:9px;border-radius:50%}
.dots span:nth-child(1){background:var(--innovation)}
.dots span:nth-child(2){background:var(--food)}
.dots span:nth-child(3){background:var(--personal)}

/* ---------- post ---------- */

.post-title{
  margin:22px 0 0;
  font-size:clamp(32px,5.2vw,46px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--ink);
}

.post-body{margin-top:16px}

.post-body > :first-child{margin-top:0}
.post-body p{margin:0 0 20px}

.post-body h2,
.post-body h3,
.post-body h4{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--ink);
  margin:38px 0 14px;
}
.post-body h2{font-size:27px}
.post-body h3{font-size:22px}
.post-body h4{font-size:19px}

.post-body ul,
.post-body ol{margin:0 0 20px;padding-left:1.3em}
.post-body li{margin-bottom:8px}
.post-body li > ul,
.post-body li > ol{margin:8px 0 0}

.post-body blockquote{
  margin:26px 0;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--rule);
  color:var(--muted);
  font-style:italic;
}

.post-body hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:40px 0;
}

.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85em;
  background:rgba(90,119,171,.1);
  padding:2px 6px;
  border-radius:4px;
}
.post-body pre{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:16px 18px;
  overflow-x:auto;
  font-size:14.5px;
  line-height:1.55;
  margin:0 0 22px;
}
.post-body pre code{background:none;padding:0;font-size:inherit}

/* tables can be wider than the column, so they scroll inside themselves */
.table-scroll{overflow-x:auto;margin:0 0 22px}
.post-body table{border-collapse:collapse;font-size:16px;min-width:100%}
.post-body th,.post-body td{
  border:1px solid var(--rule);
  padding:8px 12px;
  text-align:left;
}
.post-body th{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}

/* ---------- figures, images, WordPress galleries ---------- */

.post-body figure{margin:30px 0}
.post-body figure img{
  display:block;
  width:100%;
  border-radius:6px;
}

.post-body figcaption,
.post-body .blocks-gallery-item__caption{
  margin-top:8px;
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.45;
  color:var(--faint);
  text-align:center;
}

/* Gutenberg galleries ship as <ul class="blocks-gallery-grid"> */
.post-body .blocks-gallery-grid,
.post-body .wp-block-gallery > ul{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  list-style:none;
  margin:0;
  padding:0;
}
.post-body .wp-block-gallery.columns-3 .blocks-gallery-grid{grid-template-columns:repeat(3,1fr)}
.post-body .wp-block-gallery.columns-1 .blocks-gallery-grid{grid-template-columns:1fr}
.post-body .blocks-gallery-item{margin:0}
.post-body .blocks-gallery-item figure{margin:0}
.post-body .wp-block-gallery.is-cropped .blocks-gallery-item img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.post-body .aligncenter{display:block;margin-left:auto;margin-right:auto}
.post-body .alignleft{float:left;margin:6px 24px 16px 0;max-width:50%}
.post-body .alignright{float:right;margin:6px 0 16px 24px;max-width:50%}
.post-body .wp-block-image{margin:30px 0}

.post-body iframe,
.post-body embed,
.post-body video{max-width:100%;border-radius:6px}

/* ---------- listing ---------- */

.listing-head{margin-bottom:6px}

.listing-title{
  margin:0;
  font-size:clamp(30px,4.6vw,40px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--ink);
}
.listing-title[data-topic="innovation"]{color:var(--innovation)}
.listing-title[data-topic="food"]{color:var(--food)}
.listing-title[data-topic="personal"]{color:#a37a1f}

.listing-blurb{
  margin:12px 0 0;
  font-size:18px;
  line-height:1.55;
  color:var(--muted);
}

.listing-count{
  margin:14px 0 0;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--faint);
}

.cards{
  margin:34px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}

.card{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--rule);
}
.card.no-thumb{grid-template-columns:minmax(0,1fr)}

.card-thumb{
  display:block;
  border-radius:6px;
  overflow:hidden;
  background:var(--surface);
  aspect-ratio:4/3;
}
.card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.card:hover .card-thumb img{transform:scale(1.04)}

.card-title{
  margin:10px 0 0;
  font-size:25px;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.22;
}
.card-title a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .28s ease;
}
.card:hover .card-title a,
.card-title a:focus-visible{background-size:100% 1.5px}

.card-excerpt{
  margin:9px 0 0;
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
}

.card-more{
  display:inline-block;
  margin-top:10px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:var(--accent);
}
.card-more:hover{color:var(--ink)}

/* ---------- pager ---------- */

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin:40px 0 0;
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:500;
}

.pager a,
.pager span{
  min-width:36px;
  padding:7px 11px;
  border-radius:8px;
  text-align:center;
  text-decoration:none;
  color:var(--accent);
}
.pager a:hover{background:rgba(90,119,171,.1);color:var(--ink)}
.pager .current{background:var(--ink);color:#fff}
.pager .gap{color:var(--faint);min-width:0;padding:7px 2px}
.pager .edge{font-weight:600}

/* ---------- static page ---------- */

.page-title{
  margin:0;
  font-size:clamp(32px,5.2vw,46px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--ink);
}

/* ---------- about page ---------- */

.about-hero{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:6px;
}

.about-photo{
  flex-shrink:0;
  width:148px;
  height:auto;
  border-radius:14px;
  box-shadow:0 0 0 1px var(--rule),0 10px 24px -14px rgba(30,58,102,.4);
}

.about-hero .page-title{margin:0}

.about-role{
  margin:8px 0 0;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:500;
  color:var(--muted);
}

@media (max-width:520px){
  .about-hero{flex-direction:column;align-items:flex-start;gap:18px}
  .about-photo{width:118px}
}

/* ---------- footer ---------- */

.site-footer{
  flex-shrink:0;
  border-top:1px solid var(--rule);
  padding:26px var(--gutter) 40px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  color:var(--faint);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.site-footer a{color:var(--accent);text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.site-footer .footer-links{display:flex;gap:18px}

/* ---------- 404 ---------- */

.notfound{text-align:center;padding-top:60px}
.notfound .dots{justify-content:center}

/* ---------- responsive ---------- */

@media (max-width:640px){
  body{font-size:17.5px}
  .site-header{padding:18px var(--gutter) 14px}
  .site-nav{gap:16px;font-size:13.5px}
  .card{grid-template-columns:minmax(0,1fr);gap:14px}
  .card-thumb{aspect-ratio:16/9}
  .card-title{font-size:22px}
  .post-body .wp-block-gallery.columns-3 .blocks-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .post-body .alignleft,
  .post-body .alignright{float:none;margin:24px 0;max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}