/* Public front-end design system for taosarts.org — bright, photo-forward,
   taos.org-inspired. Separate from assets/css/style.css, which is the
   admin dashboard's own (older, unrelated) look — kept apart deliberately
   so redesigning one never risks the other. */

@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --cream:#F5EEDF;
  --surface:#FCF9F1;
  --ink:#211D1A;
  --muted:#4A453C;
  --sage:#8A9A82;
  --teal:#1C6B64;
  --teal-dark:#153B38;
  --terracotta:#C1502F;
  --forest:#4B6B52;
  --line:rgba(33,29,26,0.1);
  --shadow:0 10px 24px rgba(33,29,26,0.08);
  --shadow-lg:0 16px 30px rgba(33,29,26,0.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.mag{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Source Sans 3',system-ui,sans-serif;
}
.mag img{max-width:100%;display:block}
.mag a{color:var(--terracotta);text-decoration:none}
.mag a:hover{color:var(--teal)}

.mono{font-family:'IBM Plex Mono',monospace}
.display{font-family:'Bevan',serif}
.caps{font-family:'Oswald',sans-serif;text-transform:uppercase}

/* Nav ---------------------------------------------------------------- */
.site-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 56px;background:var(--surface);border-bottom:1px solid var(--line);
  flex-wrap:wrap;gap:14px;
}
.wordmark{font-family:'Bevan',serif;font-size:26px;color:var(--teal)}
.nav-links{display:flex;gap:22px;flex-wrap:wrap;font-family:'Oswald',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.nav-links a{color:var(--muted)}
.nav-links a.active,.nav-links a:hover{color:var(--terracotta)}

/* Buttons / pills ------------------------------------------------------ */
.pill-btn{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;padding:10px 20px;border:0;cursor:pointer;
}
.pill-btn.terracotta{background:var(--terracotta);color:var(--surface)}
.pill-btn.teal{background:var(--teal);color:var(--surface)}
.mono-input{
  font-family:'IBM Plex Mono',monospace;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:12.5px;background:var(--surface);color:var(--ink);
}

/* Type badges (person/place/tradition) -------------------------------- */
.type-tag{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:10.5px;
  font-weight:600;letter-spacing:.03em;padding:7px 14px;border-radius:999px;color:var(--surface)}
.type-tag.person{background:var(--terracotta)}
.type-tag.place{background:var(--teal)}
.type-tag.tradition{background:var(--forest)}
.type-pill{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:11px;
  font-weight:600;letter-spacing:.03em;padding:5px 12px;border-radius:999px;display:inline-block}
.type-pill.person{background:rgba(193,80,47,0.12);color:var(--terracotta)}
.type-pill.place{background:rgba(28,107,100,0.12);color:var(--teal)}
.type-pill.tradition{background:rgba(75,107,82,0.12);color:var(--forest)}

/* Secondary badges: era / place-category / recurring — outline style so
   they stay visually subordinate to the primary type-pill above. */
.era-pill{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:9.5px;
  font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:999px;
  display:inline-block;margin-top:6px;border:1px solid var(--line);color:var(--muted)}
.era-pill.contemporary{border-color:var(--terracotta);color:var(--terracotta)}
.era-pill.both{border-color:var(--sage);color:var(--sage)}
.era-pill.gallery_studio{border-color:var(--teal);color:var(--teal)}
.era-pill.recurring{border-color:var(--forest);color:var(--forest)}

/* Entity index sub-filters (people/places/traditions) ------------------- */
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap}
.filter-tab{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12px;
  font-weight:600;letter-spacing:.02em;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);text-decoration:none}
.filter-tab:hover{border-color:var(--ink);color:var(--ink)}
.filter-tab.active{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* Hero ------------------------------------------------------------------ */
.hero{margin:34px 56px 0;border-radius:12px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);min-height:420px;background:var(--muted)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(21,20,17,.7) 0%,rgba(21,20,17,0) 55%)}
.hero-caption{position:absolute;left:40px;bottom:40px;max-width:480px;z-index:1}
.hero-caption .caps{font-size:12px;font-weight:600;letter-spacing:.1em;color:#E3A874}
.hero-caption .display{font-size:clamp(24px,4vw,36px);color:var(--surface);line-height:1.15;margin-top:12px}
.hero-caption .dek{font-family:'Source Sans 3';font-size:14px;color:rgba(252,249,241,.88);margin-top:10px;line-height:1.5}

/* Section chrome --------------------------------------------------------- */
.section-eyebrow{padding:44px 56px 0;font-family:'Oswald',sans-serif;font-size:14px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.container{padding:0 56px;max-width:1200px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto;padding:0 56px}

/* Card grid --------------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px}
.card{background:var(--surface);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column}
.card-image{position:relative;height:160px;background:linear-gradient(145deg,#8B5A29,#C1502F 60%,#E3B583)}
.card-image.portrait{height:220px}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-image .type-tag{position:absolute;left:14px;bottom:-14px}
.card-body{padding:26px 18px 20px}
.card-title{font-family:'Bevan',serif;font-size:19px;color:var(--ink);line-height:1.25}
.card-title a{color:inherit}
.card-dek{font-family:'Source Sans 3';font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.card-meta{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--sage);margin-top:12px}
.card-meta a{color:var(--sage);text-decoration:underline}

/* Compact row (Appears In lists) ------------------------------------------ */
.row-list{display:flex;flex-direction:column}
.row-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row-item:last-child{border-bottom:none}
.row-date{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sage);flex:0 0 90px}
.row-title{font-family:'Bevan',serif;font-size:19px;color:var(--ink)}
.row-dek{font-family:'Source Sans 3';font-size:13.5px;color:var(--muted);margin-top:4px}

/* Story page --------------------------------------------------------------- */
.story-header{max-width:820px;margin:0 auto;padding:56px 56px 0}
.story-kicker{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.story-title{font-family:'Bevan',serif;font-size:clamp(30px,5vw,48px);color:var(--ink);
  line-height:1.1;margin-top:14px}
.story-dek{font-family:'Source Sans 3';font-style:italic;font-size:18px;color:var(--muted);
  margin-top:16px;line-height:1.55}
.story-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sage);margin-top:20px}
.story-meta a{color:var(--sage);text-decoration:underline}
.story-body{max-width:720px;margin:40px auto 0;padding:0 56px;font-size:17px;line-height:1.75}
.story-body p{margin:0 0 22px}
.story-body h2{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;
  font-size:15px;color:var(--teal);margin:2.2em 0 0.9em;border-top:1px solid var(--line);padding-top:1.2em}
.story-body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.story-body a{text-decoration:underline}
.story-body figure{margin:32px 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.story-body figure img{width:100%;display:block}
.story-body figcaption{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);
  padding:12px 16px;background:var(--surface)}
.related-wrap{max-width:720px;margin:0 auto;padding:0 56px 60px}
.related-label{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sage);margin-bottom:12px}

/* Entity page — photo and bio share the top fold like an editorial
   contributor page, instead of stacking portrait under header text. -------- */
.entity-layout{display:flex;gap:40px;max-width:900px;margin:0 auto;padding:56px 56px 0;align-items:flex-start}
.entity-photo{flex:0 0 240px}
.entity-photo-frame{aspect-ratio:4/5;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);background:var(--line)}
.entity-photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.entity-photo figcaption{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
  margin-top:10px;line-height:1.5}
.entity-main{flex:1;min-width:0}
.entity-name{font-family:'Bevan',serif;font-size:clamp(28px,4.5vw,44px);color:var(--ink);
  line-height:1.08;margin-top:12px}
.entity-oneliner{font-family:'Source Sans 3';font-style:italic;font-size:17px;color:var(--muted);margin-top:12px}
.entity-dates{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sage);margin-top:10px}
.entity-bio{max-width:900px;margin:36px auto 0;padding:0 56px;font-size:16.5px;line-height:1.7}
.entity-bio p:first-child{margin-top:0}

/* Footer ------------------------------------------------------------------- */
.site-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding:26px 56px;background:var(--teal-dark);margin-top:60px}
.site-footer .mono{font-size:10px;color:#9EC4BE}
.site-footer .mono a{color:#9EC4BE;text-decoration:underline}
.footer-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footer-form input{font-family:'IBM Plex Mono',monospace;border:1px solid rgba(158,196,190,.4);
  border-radius:999px;padding:9px 16px;font-size:10.5px;background:transparent;color:#9EC4BE}
.footer-form input::placeholder{color:#9EC4BE}

/* Page header (non-story pages: archive/people/places/traditions/about) ---- */
.page-header{max-width:1200px;margin:0 auto;padding:48px 56px 0}
.page-title{font-family:'Bevan',serif;font-size:clamp(28px,4vw,40px);color:var(--ink)}
.page-lead{font-family:'Source Sans 3';color:var(--muted);margin-top:10px;max-width:640px;line-height:1.6}

/* Responsive ----------------------------------------------------------------- */
@media (max-width:680px){
  .site-nav,.hero,.section-eyebrow,.container,.narrow,.story-header,.story-body,
  .related-wrap,.entity-layout,.entity-bio,.page-header,.site-footer{padding-left:20px;padding-right:20px}
  .hero{margin-left:20px;margin-right:20px;min-height:300px}
  .entity-layout{flex-direction:column;gap:20px}
  .entity-photo{flex:0 0 auto;width:160px}
  .card-grid{grid-template-columns:1fr}
}