/*
Theme Name: Friends of Environment and Sustainability
Theme URI: https://environmentandsustainability.org
Author: Built for Steve Bender
Description: Meetings, recordings and project network for Friends of Environment and Sustainability. Twice monthly schedule with a time zone calculator, YouTube recordings, speaker profiles, newsletter signup, contact form and a directory of network sites with their own pages.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: fes
*/


  :root{
    color-scheme: light dark;
    --surface:#F1F6F4;
    --panel:#FFFFFF;
    --ink:#0E3B47;
    --ink-soft:#436B74;
    --teal:#1F7A86;
    --shallow:#86C9C2;
    --foam:#DDEDE8;
    --gold:#E0A038;
    --coral:#D0554A;
    --line:rgba(14,59,71,.16);
    --shadow:0 18px 40px rgba(10,50,60,.10);
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --surface:#071E26;
      --panel:#0D2A33;
      --ink:#DDEDE8;
      --ink-soft:#9FC3C4;
      --teal:#5FB4B8;
      --foam:#123642;
      --line:rgba(221,237,232,.18);
      --shadow:0 18px 40px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --surface:#071E26;
    --panel:#0D2A33;
    --ink:#DDEDE8;
    --ink-soft:#9FC3C4;
    --teal:#5FB4B8;
    --foam:#123642;
    --line:rgba(221,237,232,.18);
    --shadow:0 18px 40px rgba(0,0,0,.35);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
  body{
    margin:0;
    background:var(--surface);
    color:var(--ink);
    font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%}
  a{color:inherit}
  .wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 22px}

  /* Header */
  header{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .bar{display:flex;align-items:center;gap:18px;min-height:68px}
  .mark{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:700;letter-spacing:.005em}
  .drop{width:22px;height:22px;flex:none;border-radius:50% 50% 50% 2px;transform:rotate(45deg);
        background:linear-gradient(160deg,var(--shallow),var(--teal) 55%,#0E3B47)}
  .mark span{font-family:"Fraunces",Georgia,serif;font-size:1.06rem;line-height:1.15}
  .mark small{display:block;font-family:"Karla",sans-serif;font-weight:500;font-size:.72rem;color:var(--ink-soft);letter-spacing:.06em}
  nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.93rem;color:var(--ink-soft)}
  nav a:hover{color:var(--ink);background:var(--foam)}
  nav a:focus-visible,.btn:focus-visible,.tile:focus-visible,.mark:focus-visible,.chip:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

  /* Hero: a water column, surface light down to deep water */
  .hero{position:relative;overflow:hidden;color:#EAF6F3;background-color:#0C3644;
    background-image:linear-gradient(175deg,rgba(7,38,49,.78) 0%,rgba(7,38,49,.58) 42%,rgba(7,38,49,.88) 100%),
      url("assets/hero-panama.jpg");
    background-size:cover;background-position:center 46%;background-repeat:no-repeat}
  .credit{position:absolute;left:0;right:0;bottom:0;z-index:3;font-size:.8rem;
    color:rgba(234,246,243,.8);padding:0 22px 14px}
  .credit span{max-width:1060px;margin:0 auto;display:block}
  .hero .wrap{position:relative;z-index:2;padding-top:104px;padding-bottom:104px;max-width:900px}
  .hero h1{font-family:"Fraunces",Georgia,serif;font-weight:600;font-optical-sizing:auto;
    font-size:clamp(2.4rem,6.4vw,4.35rem);line-height:1.02;margin:0 0 20px;letter-spacing:-.015em;
    text-shadow:0 2px 24px rgba(6,40,52,.35)}
  .hero h1 em{font-style:normal;display:block}
  .hero p{max-width:34em;font-size:clamp(1.02rem,2.2vw,1.18rem);margin:0 0 30px;color:rgba(236,250,246,.93)}
  .actions{display:flex;flex-wrap:wrap;gap:12px}
  .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;
    text-decoration:none;font-weight:700;font-size:.97rem;border:1.5px solid transparent;cursor:pointer}
  .btn-solid{background:var(--gold);color:#22160B}
  .btn-solid:hover{background:#EFB456}
  .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
  .btn-ghost:hover{background:rgba(255,255,255,.14)}

  /* Sections */
  section{padding:76px 0}
  .head{max-width:52ch;margin-bottom:38px}
  h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(1.7rem,3.6vw,2.3rem);
     line-height:1.12;margin:0 0 12px;letter-spacing:-.01em}
  .head p{margin:0;color:var(--ink-soft)}

  /* Meetings */
  .meeting{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;
    background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
    box-shadow:var(--shadow);margin-bottom:26px}
  .player{position:relative;background:#0C3644;min-height:236px}
  .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .tile{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;display:grid;place-items:center;
    background:linear-gradient(165deg,#7FC5BE 0%,#2E8C97 45%,#0B3341 100%)}
  .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
  .tile::before{content:"";position:absolute;inset:0;z-index:2;
    background:linear-gradient(180deg,rgba(6,35,45,.10) 0%,rgba(6,35,45,.22) 55%,rgba(6,35,45,.62) 100%)}
  .play{position:relative;z-index:3;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.93);
    display:grid;place-items:center;box-shadow:0 10px 26px rgba(4,30,40,.4)}
  .play svg{margin-left:4px}
  .tile:hover .play{background:#fff;transform:scale(1.04)}
  .play{transition:transform .18s ease}
  .body{padding:30px 30px 28px}
  .speaker{font-weight:700;color:var(--teal);font-size:.92rem;margin:0 0 6px;letter-spacing:.02em}
  .meeting h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.32rem;line-height:1.2;margin:0 0 10px}
  .meeting p{margin:0 0 18px;color:var(--ink-soft);font-size:.97rem}
  .links{display:flex;flex-wrap:wrap;gap:9px}
  .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
    border:1.5px solid var(--line);text-decoration:none;font-size:.88rem;font-weight:500;color:var(--ink)}
  .chip:hover{border-color:var(--teal);color:var(--teal)}
  .dot{width:7px;height:7px;border-radius:50%;flex:none}
  .dot.yt{background:var(--coral)}
  .dot.zm{background:#2D8CFF}
  @media (max-width:760px){
    .meeting{grid-template-columns:1fr}
    .player{min-height:0;aspect-ratio:16/9}
    .body{padding:24px 22px}
    .hero .wrap{padding-top:66px;padding-bottom:62px}
    section{padding:58px 0}
  }

  .channel{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
    padding:24px 28px;border-radius:16px;background:var(--foam);border:1px solid var(--line)}
  .channel p{margin:0;font-size:.98rem}

  /* About */
  #about{background:var(--surface)}
  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:30px}
  .cols h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.16rem;margin:0 0 8px}
  .cols p{margin:0;color:var(--ink-soft);font-size:.97rem}
  .rule{height:3px;width:44px;border-radius:2px;background:var(--gold);margin-bottom:14px}

  /* Join */
  .join-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;align-items:start}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
  .card h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.14rem;margin:0 0 10px}
  .card p{margin:0 0 14px;color:var(--ink-soft);font-size:.96rem}
  .card a.textlink{color:var(--teal);font-weight:700;text-decoration:none;border-bottom:2px solid var(--shallow)}
  .card a.textlink:hover{border-color:var(--teal)}

  /* Schedule */
  .sched-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:22px;margin-bottom:32px}
  .sched{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--teal);
    border-radius:16px;padding:26px;box-shadow:var(--shadow)}
  .sched:last-child{border-top-color:var(--gold)}
  .when{margin:0 0 6px;font-weight:700;font-size:.92rem;color:var(--teal)}
  .sched:last-child .when{color:#B07C1D}
  .sched h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.3rem;line-height:1.18;margin:0 0 8px}
  .sched p.host{margin:0 0 16px;color:var(--ink-soft);font-size:.97rem}
  .sched .clock{font-family:"Fraunces",Georgia,serif;font-size:1.75rem;line-height:1;margin:0 0 4px}
  .sched .clock small{font-family:"Karla",sans-serif;font-size:.86rem;font-weight:500;color:var(--ink-soft);
    display:block;margin-top:7px;line-height:1.5}
  .next{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.93rem;color:var(--ink-soft)}
  .next b{color:var(--ink)}

  .tzpanel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
  .tzpanel h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.22rem;margin:0 0 6px}
  .tzpanel .lede{margin:0 0 20px;color:var(--ink-soft);font-size:.96rem}
  .controls{display:flex;flex-wrap:wrap;gap:14px}
  .field{flex:1 1 230px;min-width:0}
  .field label{display:block;font-size:.88rem;font-weight:700;margin-bottom:6px}
  .field select{width:100%;padding:11px 13px;border-radius:10px;border:1.5px solid var(--line);
    background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem}
  .field select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .yours{margin-top:20px;background:var(--foam);border-radius:14px;padding:20px 22px}
  .yours .label{margin:0 0 4px;font-size:.88rem;font-weight:700;color:var(--ink-soft)}
  .yours .big{margin:0;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.45rem,4vw,2rem);line-height:1.15}
  .zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;margin-top:20px;
    background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .zone{background:var(--panel);padding:15px 16px}
  .zone b{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.12rem;font-weight:600;margin-bottom:2px}
  .zone span{font-size:.84rem;color:var(--ink-soft)}

  /* Projects */
  .proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:22px}
  .proj{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
  .proj h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.14rem;margin:0 0 9px}
  .proj p{margin:0 0 14px;color:var(--ink-soft);font-size:.95rem}
  .proj a{color:var(--teal);font-weight:700;text-decoration:none;font-size:.92rem;border-bottom:2px solid var(--shallow)}

  /* Promo strip and home page banner */
  .promo{background:#0C3644;color:#EAF6F3}
  .promo-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:11px 22px;justify-content:center}
  .promo p{margin:0;font-size:.93rem}
  .promo strong{color:var(--gold)}
  .promo a{color:#0C3644;background:var(--gold);text-decoration:none;font-weight:700;font-size:.85rem;
    padding:6px 15px;border-radius:999px;white-space:nowrap}
  .promo a:hover{background:#EFB456}
  .promo a:focus-visible{outline:3px solid #fff;outline-offset:2px}

  .banner-wrap{padding:70px 0 0}
  #projects{padding-top:30px}
  .banner{position:relative;overflow:hidden;border-radius:22px;padding:40px 42px;color:#EAF6F3;
    background:linear-gradient(135deg,#0C3644 0%,#134C5C 55%,#1B6B72 100%);box-shadow:var(--shadow)}
  .banner::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,rgba(224,160,56,.45),rgba(224,160,56,0) 68%)}
  .banner > *{position:relative;z-index:2}
  .banner .with{margin:0 0 14px;font-size:.88rem;color:rgba(234,246,243,.82)}
  .banner h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(1.85rem,4.6vw,2.9rem);
    line-height:1.05;margin:0 0 14px;letter-spacing:-.01em}
  .banner .lead{margin:0 0 24px;max-width:46em;font-size:1.02rem;color:rgba(234,246,243,.93)}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin:0 0 26px;
    padding:20px 0;border-top:1px solid rgba(234,246,243,.22);border-bottom:1px solid rgba(234,246,243,.22)}
  .fact b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.12rem;margin-bottom:3px}
  .fact span{font-size:.87rem;color:rgba(234,246,243,.78);line-height:1.45}
  .flagship{margin:0 0 24px;font-size:.97rem;background:rgba(224,160,56,.16);border-left:3px solid var(--gold);
    padding:13px 16px;border-radius:0 10px 10px 0}
  .flagship a{color:var(--gold);font-weight:700}
  @media (max-width:760px){.banner{padding:30px 24px;border-radius:18px}.banner-wrap{padding:30px 0 4px}}

  .proj .rank{margin:0 0 8px;font-weight:700;font-size:.82rem;color:#B07C1D}
  .proj .place{margin:0 0 10px;font-size:.88rem;color:var(--ink-soft);font-weight:500}
  .proj h3{margin-bottom:4px}
  .enter{margin-top:30px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;
    align-items:center;background:var(--foam);border:1px solid var(--line);border-radius:18px;padding:28px 30px}
  .enter h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.3rem;margin:0 0 10px}
  .enter p{margin:0 0 12px;font-size:.97rem}
  .enter .fine{margin:0;font-size:.87rem;color:var(--ink-soft)}
  .enter-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .enter-actions .btn,.enter-actions .chip{justify-content:center;text-align:center}
  @media (max-width:760px){.enter{grid-template-columns:1fr;padding:24px}}

  /* Network */
  #network{background:var(--foam);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .net-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px}
  .netgroup{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
  .netgroup h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.06rem;margin:0 0 14px;
    padding-bottom:10px;border-bottom:2px solid var(--shallow)}
  .netgroup ul{list-style:none;margin:0;padding:0}
  .netgroup li{margin:0 0 13px}
  .netgroup li:last-child{margin-bottom:0}
  .netgroup a{display:block;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--teal);word-break:break-word}
  .netgroup a:hover{text-decoration:underline}
  .netgroup span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.45}

  /* Site description pages */
  #sitepage{padding:54px 0 84px}
  .sp-video{margin:0 0 26px}
  .sp-video video{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line);background:#07262F}
  .sp-video figcaption{margin-top:9px;font-size:.86rem;color:var(--ink-soft)}
  .sp-photo{margin:0 0 26px}
  .sp-photo img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line)}
  .sp-photo figcaption{margin-top:9px;font-size:.86rem;color:var(--ink-soft)}
  .crumb{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;
    font-size:.9rem;color:var(--teal);margin-bottom:26px}
  .crumb:hover{text-decoration:underline}
  .sp-cat{margin:0 0 10px;font-weight:700;font-size:.86rem;color:#B07C1D}
  #sitepage h1{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.015em;
    font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.06;margin:0 0 10px}
  .sp-domain{margin:0 0 26px;font-size:1.02rem;color:var(--ink-soft)}
  .sp-body{max-width:62ch}
  .sp-body p{font-size:1.04rem;margin:0 0 18px}
  .sp-visit{margin:30px 0 0;padding:26px 28px;border-radius:16px;background:var(--foam);
    border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
  .sp-visit p{margin:0;font-size:.95rem;color:var(--ink-soft);max-width:38ch}
  .sp-related{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
  .sp-related h2{font-size:1.25rem;margin-bottom:16px}
  .sp-related ul{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  .sp-related a{display:block;text-decoration:none;padding:15px 17px;border:1px solid var(--line);
    border-radius:13px;background:var(--panel)}
  .sp-related a:hover{border-color:var(--teal)}
  .sp-related b{display:block;font-weight:700;color:var(--teal);font-size:.93rem;margin-bottom:3px;word-break:break-word}
  .sp-related span{font-size:.86rem;color:var(--ink-soft)}

  /* Speakers */
  #speakers{background:var(--foam);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .people{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
  .person{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;
    box-shadow:var(--shadow)}
  .avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;margin-bottom:16px;position:relative;
    background:linear-gradient(150deg,var(--shallow),var(--teal) 70%,#0B3341);display:grid;place-items:center}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
  .avatar span{position:absolute;font-family:"Fraunces",Georgia,serif;font-size:1.9rem;color:#fff;z-index:0}
  .person h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.2rem;margin:0 0 4px}
  .person .role{margin:0 0 3px;font-weight:700;font-size:.9rem;color:var(--teal)}
  .person .org{margin:0 0 12px;font-size:.87rem;color:var(--ink-soft)}
  .person p.bio{margin:0;font-size:.94rem;color:var(--ink-soft)}

  /* Newsletter signup */
  #newsletter{padding:64px 0 10px}
  .signup{border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:18px;
    background:var(--panel);box-shadow:var(--shadow);padding:34px 36px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
  .signup h2{font-size:clamp(1.5rem,3.4vw,2rem);margin:0 0 12px}
  .signup .pitch p{margin:0 0 14px;font-size:1rem}
  .signup .pitch ul{margin:0;padding:0;list-style:none}
  .signup .pitch li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.95rem;color:var(--ink-soft)}
  .signup .pitch li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
    border-radius:50%;background:var(--shallow)}
  .signup .fine{margin:16px 0 0;font-size:.85rem;color:var(--ink-soft)}
  @media (max-width:760px){.signup{grid-template-columns:1fr;padding:26px 22px;gap:24px}#newsletter{padding:44px 0 4px}}

  /* Contact form */
  #contact{background:var(--foam);border-top:1px solid var(--line)}
  .form-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:30px 32px;box-shadow:var(--shadow);max-width:680px}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .f{margin-bottom:16px}
  .f label{display:block;font-size:.88rem;font-weight:700;margin-bottom:6px}
  .f input,.f select,.f textarea{width:100%;padding:12px 13px;border-radius:10px;
    border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.96rem}
  .f textarea{min-height:140px;resize:vertical}
  .f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .status{margin:16px 0 0;font-size:.94rem;min-height:1.4em}
  .status.ok{color:var(--teal);font-weight:700}
  .status.bad{color:var(--coral);font-weight:700}
  @media (max-width:620px){.row{grid-template-columns:1fr}.form-card{padding:24px 22px}}

  footer{background:#0C3644;color:#CFE6E2;padding:44px 0 56px}
  footer a{color:#CFE6E2}
  .foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:.92rem}
  .foot p{margin:0}
  .note{opacity:.72;font-size:.85rem;margin-top:16px}


/* Host and speaker pages */
.person h3 a{text-decoration:none;color:inherit}
.person h3 a:hover{color:var(--teal)}
.person .bio-more{margin:12px 0 0;font-size:.9rem}
.person .bio-more a{color:var(--teal);font-weight:700;text-decoration:none;border-bottom:2px solid var(--shallow)}
a.avatar{display:grid;text-decoration:none}
.bio-head{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-bottom:30px}
.bio-photo{flex:none;width:168px;height:168px;border-radius:50%;overflow:hidden;border:1px solid var(--line)}
.bio-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bio-place{margin:0 0 12px;font-size:.92rem;color:var(--ink-soft)}
#sitepage .sp-body p{margin:0 0 18px}
@media (max-width:620px){.bio-photo{width:120px;height:120px}.bio-head{gap:18px}}