/* ===== Hausel Group — ISTA brand: Rubik typeface + ISTA blue palette ===== */
@font-face{ font-family:"Rubik"; src:url("../fonts/Rubik.ttf") format("truetype-variations");
  font-weight:300 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Rubik"; src:url("../fonts/Rubik-Italic.ttf") format("truetype-variations");
  font-weight:300 900; font-style:italic; font-display:swap; }
:root{
  /* ISTA palette (green family, tone-on-tone) + warm-gray neutrals */
  --bg:#ffffff; --card:#ffffff; --text:#2b2b2b; --strong:#00643a; /* ISTA Dark Green = Orsay26 poster green */ --muted:#6e6e70;
  --accent:#00643a;      /* Dark Green — links/interaction */
  --accent-ink:#062d08;  /* ISTA Deep Green — hover (darker) */
  --bright:#aee914;      /* ISTA Bright Green — small accents (nav active, badges) */
  --nav-bg:#00643a;      /* Dark Green nav = poster green */ --nav-text:#ffffff; --nav-hover:#062d08;
  --rule:#dbd9d4;        /* ISTA Warm Gray */ --soft:#f5f5f3; /* ISTA Warm Gray 20% */
  --shadow:0 1px 3px rgba(6,45,8,.08),0 1px 2px rgba(6,45,8,.05);
  --container:1040px;
  --body:"Rubik", Arial, Helvetica, sans-serif;   /* ISTA body font (Surt is licensed; Rubik + Arial fallback) */
  --head:"Rubik", Arial, Helvetica, sans-serif;
}
/* Light theme always — no dark-mode override (site keeps white bg + green ISTA scheme on all devices) */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; color-scheme:light; }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.55 var(--body); overflow-y:scroll; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-ink); text-decoration:underline; }
img{ max-width:100%; height:auto; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 1.25rem; }
h1,h2,h3,h4{ font-family:var(--head); color:var(--strong); font-weight:600; line-height:1.25; }

/* header */
header{ padding:1.5rem 0 .8rem; }
.head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.wordmark,.wordmark:hover{ text-decoration:none; }
.wordmark .name{ display:block; font-family:var(--head); font-size:clamp(28px,4.6vw,46px); color:var(--strong); font-weight:400; letter-spacing:-.005em; }
.wordmark .tag{ display:block; margin-top:.25rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.logo{ display:flex; align-items:center; gap:.45rem; border:1.5px solid #c9d3da; color:var(--strong);
  border-radius:6px; padding:.3rem .55rem; font-weight:800; letter-spacing:.1em; }
.logo small{ font-weight:500; letter-spacing:.02em; color:var(--muted); font-size:.6rem; text-transform:uppercase; }
.istalogo{ display:block; flex:none; padding:.25rem; border-radius:4px; }  /* padding = logo clear space */
.istalogo:hover{ background:var(--soft); text-decoration:none; }
.istalogo img{ height:78px; width:auto; display:block; }
@media (max-width:520px){ .istalogo img{ height:60px; } }

/* nav */
nav.bar{ background:var(--nav-bg); border-radius:6px; margin:.3rem 0 1.6rem; }
.menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; }
.menu>li{ position:relative; }
.menu a{ display:block; color:var(--nav-text); padding:.6rem .95rem; font-size:.93rem; }
.menu a:hover{ background:var(--nav-hover); color:#fff; text-decoration:none; }
.menu a.active{ color:#fff; box-shadow:inset 0 -3px 0 var(--bright); }
.menu .has::after{ content:" ▾"; color:#98a2aa; }
.sub{ list-style:none; margin:0; padding:.25rem 0; position:absolute; left:0; top:100%; min-width:190px;
  background:var(--nav-bg); border-radius:0 0 6px 6px; display:none; z-index:30; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.menu li:hover>.sub{ display:block; }
.sub a{ padding:.5rem .95rem; } .sub .has::after{ content:" ▸"; color:#98a2aa; }
.sub .sub{ left:100%; top:0; border-radius:6px; }
.search{ margin-left:auto; padding:.35rem .6rem; }
.search input{ background:#333a40; border:1px solid #3d454c; color:#fff; border-radius:5px; padding:.3rem .55rem; font-size:.85rem; width:130px; }
.search input::placeholder{ color:#9aa3ab; }
.navtoggle,.navlabel{ display:none; }

/* ===== homepage: main + right rail ===== */
.grid{ display:grid; grid-template-columns:1fr 300px; gap:2rem; align-items:start; }
section.block{ margin-bottom:1.9rem; }
.kicker{ font-family:var(--head); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem; }
.feature{ display:grid; grid-template-columns:96px 1fr; gap:1rem; padding:1rem 0; border-top:1px solid var(--rule); }
.feature:first-of-type{ border-top:0; padding-top:0; }
.fthumb{ width:96px; height:96px; border-radius:8px; background:linear-gradient(135deg,#eef4e4,#d3e6b3); flex:none; }
.fthumb.g1{ background:linear-gradient(135deg,#eaf6cf,#c3e588); }
.fthumb.g2{ background:linear-gradient(135deg,#e9f5ec,#c7e6d1); }
.feature h3{ margin:.1rem 0 .3rem; font-size:1.12rem; }
.feature h3 a{ color:var(--strong); }
.feature .date{ color:var(--muted); font-size:.82rem; }
.feature p{ margin:.35rem 0 .3rem; color:var(--text); font-size:.95rem; }
.feature .rm{ font-size:.88rem; font-weight:600; }
.newslist{ list-style:none; margin:.2rem 0 0; padding:0; }
.newslist li{ display:flex; gap:.9rem; padding:.5rem 0; border-top:1px dashed var(--rule); }
.newslist li:first-child{ border-top:0; }
.newslist .date{ flex:none; width:5.2rem; color:var(--muted); font-size:.86rem; font-variant-numeric:tabular-nums; padding-top:.05rem; }

/* right rail cards */
.card{ background:var(--card); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:1rem 1.1rem; margin-bottom:1.2rem; }
.card h3{ font-size:.95rem; margin:0 0 .6rem; }
.quick{ list-style:none; margin:0; padding:0; }
.quick li{ padding:.28rem 0; border-top:1px solid var(--rule); }
.quick li:first-child{ border-top:0; }
.quick a{ font-weight:600; }
.quick .sub2{ color:var(--muted); font-weight:400; font-size:.86rem; }
.zoocard .shot{ display:block; height:120px; border-radius:8px; margin:-.2rem 0 .7rem; position:relative; overflow:hidden;
  background:radial-gradient(circle at 42% 34%, #eafaf0, #bfe9cf 42%, #6ec98d 74%, #2f9e57); }
.zoocard .shot .b{ position:absolute; left:8px; bottom:8px; font-size:.62rem; background:rgba(0,0,0,.55); color:#fff; padding:.12rem .45rem; border-radius:4px; letter-spacing:.03em; }
.zoocard p{ font-size:.9rem; margin:.2rem 0 .55rem; color:var(--muted); }
.btn{ display:inline-block; background:var(--accent); color:#fff; padding:.4rem .8rem; border-radius:6px; font-size:.85rem; font-weight:600; }
.btn:hover{ background:var(--accent-ink); color:#fff; text-decoration:none; }
.pubs{ list-style:none; margin:0; padding:0; }
.pubs li{ padding:.5rem 0; border-top:1px solid var(--rule); }
.pubs li:first-child{ border-top:0; }
.badges a{ display:inline-block; font-size:.74rem; padding:.06rem .45rem; margin:.25rem .3rem 0 0; border-radius:4px;
  background:var(--soft); color:var(--muted); border:1px solid var(--rule); }
.badges a:hover{ background:var(--accent); color:#fff; border-color:var(--accent); text-decoration:none; }

/* ===== interior pages ===== */
.page{ padding-bottom:1rem; }
.page h1.ptitle{ font-size:clamp(24px,3.6vw,34px); margin:.2rem 0 1.2rem; padding-bottom:.5rem; border-bottom:2px solid var(--rule); }
.lead{ color:var(--muted); font-size:1.02rem; margin:-.6rem 0 1.2rem; }
/* profile page: text + portrait */
.profile{ display:flex; gap:1.8rem; align-items:flex-start; flex-wrap:wrap; margin-top:.3rem; }
.profile-body{ flex:1 1 320px; }
.profile-body ul{ list-style:none; padding:0; margin:.7rem 0 0; }
.profile-body li{ padding:.22rem 0; font-weight:500; }
.profile-photo{ margin:0; flex:0 0 58%; max-width:760px; min-width:320px; }
.profile-photo img{ width:100%; height:auto; border-radius:10px; box-shadow:var(--shadow); display:block; }
@media (max-width:640px){ .profile-photo{ flex-basis:100%; order:-1; max-width:none; } }
.prose{ max-width:78ch; }
.prose:has(.profile){ max-width:none; }   /* profile page uses full width so the portrait can fill the right side */
.prose p{ margin:.7rem 0; }
.prose h2{ font-size:1.3rem; margin:1.8rem 0 .5rem; }
.prose h3{ font-size:1.08rem; margin:1.3rem 0 .4rem; color:var(--accent-ink); }
.prose ul{ padding-left:1.2rem; } .prose li{ margin:.25rem 0; }
.prose table{ border-collapse:collapse; width:100%; margin:1rem 0; font-size:.94rem; }
.prose td,.prose th{ border:1px solid var(--rule); padding:.45rem .6rem; vertical-align:top; text-align:left; }
.prose hr{ border:0; border-top:1px solid var(--rule); margin:1.5rem 0; }

/* publications */
.publist{ list-style:none; margin:0; padding:0; max-width:82ch; }
.publist li{ display:grid; grid-template-columns:2.2rem 1fr; gap:.3rem; padding:.7rem 0; border-top:1px solid var(--rule); }
.publist li:first-child{ border-top:0; }
.publist .num{ color:var(--muted); font-variant-numeric:tabular-nums; font-size:.9rem; }
.publist .title{ color:var(--strong); font-weight:600; }
.publist .meta{ color:var(--muted); font-size:.93rem; }

/* talk archive */
.talkyear{ margin:1.4rem 0 .3rem; font-family:var(--head); font-size:1.35rem; color:var(--accent-ink); }
.talklist{ list-style:none; margin:0 0 .8rem; padding:0; }
.talklist li{ padding:.35rem 0; border-top:1px dashed var(--rule); }
.talklist li:first-child{ border-top:0; }
.talklist .venue{ color:var(--muted); }

/* team */
.teamgroup{ margin:1.4rem 0 .4rem; font-size:1.15rem; color:var(--accent-ink); }
.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.6rem 1.4rem; margin:.3rem 0 1rem; }
.person{ padding:.4rem 0; }
.person .pname{ font-weight:600; color:var(--strong); }
.person .prole,.person .pcontact{ color:var(--muted); font-size:.9rem; }
.alumni{ list-style:none; margin:.3rem 0; padding:0; columns:2; column-gap:2rem; }
.alumni li{ padding:.18rem 0; break-inside:avoid; font-size:.94rem; }

/* news archive */
.newsarchive{ list-style:none; margin:0; padding:0; max-width:80ch; }
.newsarchive li{ display:flex; gap:1rem; padding:.6rem 0; border-top:1px solid var(--rule); }
.newsarchive li:first-child{ border-top:0; }
.newsarchive .date{ flex:none; width:6rem; color:var(--muted); font-size:.86rem; font-variant-numeric:tabular-nums; padding-top:.1rem; }
.newsarchive .nbody a{ font-weight:600; }
.newsarchive .asum{ color:var(--muted); font-size:.9rem; margin-top:.15rem; }

/* simple lists (courses/seminars/events) */
.simplelist{ list-style:none; margin:0; padding:0; max-width:80ch; }
.simplelist li{ padding:.45rem 0; border-top:1px solid var(--rule); }
.simplelist li:first-child{ border-top:0; }
.simplelist .term{ color:var(--muted); font-size:.9rem; }

/* zoo */
.zoogrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem; margin:1rem 0; }
.exhibit{ background:var(--card); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.exhibit .thumb{ height:150px; background:var(--soft); display:block; width:100%; object-fit:cover; }
.exhibit .body{ padding:.7rem .85rem; }
.exhibit h3{ font-size:1rem; margin:0 0 .25rem; }
.exhibit p{ margin:0; font-size:.88rem; color:var(--muted); }
.exhibit .badge{ display:inline-block; font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:var(--accent); border-radius:4px; padding:.08rem .4rem; margin-bottom:.35rem; }
.exhibit .badge.print{ background:#8a6d3b; } .exhibit .badge.nb{ background:#5b6770; }
.gkmhero{ display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:1.4rem; align-items:center; background:var(--card);
  border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:1.2rem; margin:1rem 0 1.8rem; }
.gkmhero .shot{ display:block; height:200px; border-radius:8px; overflow:hidden; background:radial-gradient(circle at 42% 34%, #eafaf0, #bfe9cf 42%, #6ec98d 74%, #2f9e57); background-size:cover; background-position:center; }
.gkmhero h2{ margin:.1rem 0 .4rem; }
.gkmhint{ color:var(--muted); font-size:.85rem; margin-top:.5rem; }

footer{ border-top:1px solid var(--rule); margin-top:2rem; padding:1.2rem 0 2.4rem; color:var(--muted); font-size:.85rem; white-space:nowrap; overflow-x:auto; }

/* responsive */
@media (max-width:820px){ .grid{ grid-template-columns:1fr; } }
@media (max-width:640px){ .gkmhero{ grid-template-columns:1fr; } .alumni{ columns:1; } }
@media (max-width:720px){
  .navlabel{ display:block; color:#fff; padding:.6rem .95rem; cursor:pointer; user-select:none; }
  .menu{ display:none; flex-direction:column; align-items:stretch; }
  .navtoggle:checked ~ .menu{ display:flex; }
  .sub,.sub .sub{ position:static; display:block; box-shadow:none; background:transparent; padding-left:1rem; }
  .menu .has::after,.sub .has::after{ content:""; }
  .search{ margin:0; } .search input{ width:100%; }
  .people{ grid-template-columns:1fr; }
}