/* Homepage hero: "Behind every climate headline is a person, a place, a number, a source and a choice."
   Built 2026-11-07. Markup in index.html (.tct-hero), behaviour in hero.js. */
.tct-hero{position:relative;margin-top:-108px;min-height:max(780px,100svh);display:flex;align-items:center;background:var(--paper);color:var(--ink);overflow:hidden}
.tct-hero-grid{position:relative;z-index:2;pointer-events:none}
.tct-copy{width:48%;padding:150px 0 80px;pointer-events:auto}
.tct-copy .eyebrow{color:#416748;margin-bottom:30px}
.tct-hero h1{font-size:clamp(54px,6vw,88px);line-height:.98;letter-spacing:-.065em;font-weight:600;color:var(--ink)}
.tct-hero h1 .l1{display:block;text-wrap:balance}
.tct-hero h1 .l2{display:block;font-family:Newsreader,"Newsreader Fallback",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.035em;color:#2f5a43;margin-top:.08em}
.tct-hero .swap{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-right:.08em}
.tct-hero .swap .w{grid-area:1/1;justify-self:start;transform:translateY(105%);opacity:0;background:linear-gradient(transparent 70%,#d5ec9d 70%,#d5ec9d 90%,transparent 90%) no-repeat 0 0/0 100%;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .45s,background-size .55s cubic-bezier(.6,0,.2,1)}
.tct-hero .swap .w::before{content:attr(data-w)}
.tct-hero .swap .w.is-on{transform:none;opacity:1;background-size:calc(100% - .3em) 100%;transition-delay:0s,0s,.35s}
.tct-hero .swap .w.is-on.first{animation:tctMark .6s .95s cubic-bezier(.6,0,.2,1) both}
.tct-hero .swap .w.is-out{transform:translateY(-105%);opacity:0}
.tct-hero .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tct-hero .lede{font-size:17px;line-height:1.75;color:#4e5c52;max-width:500px;margin:30px 0 32px}
.tct-hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.tct-hero .button{border-radius:999px;padding-inline:24px}

/* Illustration panel */
/* The mask is fully opaque. It only makes Chrome clip the multiply-blended art to the rounded corner, which otherwise can turn black after a mouse hover. */
.tct-art{--r:0 0 0 28px;position:absolute;top:0;right:0;bottom:0;width:50%;z-index:1;overflow:hidden;border-radius:var(--r);-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}
.tct-card{position:absolute;inset:0;display:block;color:var(--ink);opacity:0;clip-path:inset(0 0 0 100%);transition:opacity .6s ease,clip-path .75s cubic-bezier(.7,0,.2,1)}
.tct-card.is-on{opacity:1;clip-path:inset(0 0 0 0);z-index:2}
.tct-card.is-out{opacity:1;clip-path:inset(0 0 0 0);z-index:1}
.tct-card:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}
.tct-card[data-c=lime]{background:#e3f0c4}
.tct-card[data-c=river]{background:#e4efe7}
.tct-card[data-c=sand]{background:#ebe9dd}
.tct-card[data-c=clay]{background:#f3e6d7}
.tct-card[data-c=dark]{background:#173c2c;color:var(--paper)}
.tct-card .pic{position:absolute;inset:118px 64px 196px}
.tct-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.06);transform:scale(1.04);translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -10px);transition:transform 4s ease-out,translate .6s ease-out}
.tct-card.is-on img{transform:none}
.tct-card.is-on.first img{animation:tctSettle 1.6s .15s cubic-bezier(.2,.8,.2,1) both}
.tct-card .big{display:grid;place-content:center;text-align:center;gap:16px}
.tct-card .big em{font-family:Newsreader,"Newsreader Fallback",Georgia,serif;font-size:clamp(96px,10vw,160px);line-height:.9;letter-spacing:-.05em;color:var(--lime);font-variant-numeric:tabular-nums}
.tct-card .big .sub{font-size:17px;line-height:1.5;color:#d3ddcd;max-width:400px;margin-inline:auto}
.tct-card .cap{position:absolute;left:48px;right:48px;bottom:108px;display:block;max-width:470px}
.tct-card .cap b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:8px;opacity:.7}
.tct-card .cap .t{font-size:20px;letter-spacing:-.02em;font-weight:550;line-height:1.3}
.tct-card .cap i{display:inline-block;font-style:normal;font-size:12px;font-weight:600;margin-left:10px;border-bottom:1px solid currentColor;white-space:nowrap}
.tct-card.is-on .cap{animation:tctRise .6s .3s cubic-bezier(.2,.8,.2,1) both}
.tct-card.is-on.first .cap{animation-delay:.95s}

/* Liquid-glass selector and pause button */
.tct-tabs{position:absolute;left:44px;bottom:34px;z-index:5;display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 34px -16px rgba(12,40,28,.5),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(23,46,37,.07);animation:tctRise .7s 1s cubic-bezier(.2,.8,.2,1) both;transition:background .5s,border-color .5s}
.tct-tabs::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 160% at 18% -30%,rgba(255,255,255,.6),transparent 55%)}
.tct-tabs .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.8));box-shadow:0 6px 16px -8px rgba(12,40,28,.55),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(23,46,37,.07);overflow:hidden;z-index:0}
.tct-tabs .pill::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(213,236,157,.1),rgba(213,236,157,.95));clip-path:inset(0 100% 0 0)}
.tct-tabs .pill.run::after{animation:tctFill 2.8s linear forwards}
.tct-tabs .pill.squish{animation:tctSquish .55s cubic-bezier(.3,.7,.3,1)}
.tct-tabs button{all:unset;box-sizing:border-box;position:relative;z-index:1;cursor:pointer;padding:11px 17px;border-radius:999px;font-family:Inter,"Inter Fallback",system-ui,sans-serif;font-size:13px;font-weight:600;line-height:1;letter-spacing:-.005em;color:rgba(23,46,37,.6);filter:blur(.45px);transition:color .4s,filter .4s;-webkit-tap-highlight-color:transparent}
.tct-tabs button span{display:inline-block}
.tct-tabs button:hover{filter:none;color:var(--ink)}
.tct-tabs button[aria-pressed=true]{color:var(--ink);filter:none}
.tct-tabs button[aria-pressed=true] span{animation:tctPop .55s cubic-bezier(.3,1.6,.5,1) both}
.tct-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:1px;filter:none}
.tct-toggle{all:unset;box-sizing:border-box;position:absolute;top:118px;right:40px;z-index:5;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);border:1px solid rgba(255,255,255,.65);box-shadow:0 10px 24px -14px rgba(12,40,28,.5),inset 0 1px 1px rgba(255,255,255,.9);opacity:.75;animation:tctRise .7s 1.1s cubic-bezier(.2,.8,.2,1) both;transition:opacity .3s,background .5s,border-color .5s,color .5s;-webkit-tap-highlight-color:transparent}
.tct-toggle:hover,.tct-toggle:focus-visible{opacity:1}
.tct-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tct-toggle svg{width:13px;height:13px;fill:currentColor}
.tct-toggle .i-play,.tct-toggle[aria-pressed=true] .i-pause{display:none}
.tct-toggle[aria-pressed=true] .i-play{display:block}
.tct-art[data-c=dark] .tct-tabs,.tct-art[data-c=dark] .tct-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.tct-art[data-c=dark] .tct-tabs::before{background:radial-gradient(120% 160% at 18% -30%,rgba(255,255,255,.22),transparent 55%)}
.tct-art[data-c=dark] .tct-tabs button{color:rgba(246,245,239,.72)}
.tct-art[data-c=dark] .tct-tabs button[aria-pressed=true]{color:var(--ink)}
.tct-art[data-c=dark] .tct-toggle{color:var(--paper)}
.tct-art[data-c=dark] .tct-toggle:focus-visible{outline-color:var(--paper)}

/* Motion */
@keyframes tctRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes tctWipe{from{clip-path:inset(0 0 0 100% round var(--r))}to{clip-path:inset(0 0 0 0 round var(--r))}}
@keyframes tctSettle{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes tctMark{from{background-size:0 100%}to{background-size:calc(100% - .3em) 100%}}
@keyframes tctFill{to{clip-path:inset(0 0 0 0)}}
@keyframes tctSquish{30%{transform:scaleY(.84) scaleX(1.03)}65%{transform:scaleY(1.05)}100%{transform:none}}
@keyframes tctPop{0%{transform:scale(.9)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
.tct-copy .eyebrow{animation:tctRise .7s .05s both}
.tct-hero h1 .l1{animation:tctRise .8s .12s cubic-bezier(.2,.8,.2,1) both}
.tct-hero h1 .l2{animation:tctRise .8s .28s cubic-bezier(.2,.8,.2,1) both}
.tct-hero .lede{animation:tctRise .8s .42s both}
.tct-hero .actions{animation:tctRise .8s .52s both}
.tct-art{animation:tctWipe 1.05s .15s cubic-bezier(.7,0,.2,1) both}
.tct-hero+.principle-wrap{margin-top:28px}

/* Smaller laptops */
@media(min-width:901px) and (max-width:1150px){
 .tct-card .pic{inset:118px 40px 196px}
 .tct-card .cap{left:32px;right:32px}
 .tct-tabs{left:26px;bottom:28px}
 .tct-tabs button{padding:11px 13px;font-size:12.5px}
 .tct-toggle{right:26px}
}
/* Phones and tablets */
@media(max-width:900px){
 .tct-hero{flex-direction:column;align-items:stretch;min-height:0;padding-bottom:44px}
 .tct-hero-grid,.tct-copy{display:contents}
 .tct-copy>*{margin-inline:20px}
 .tct-copy .eyebrow{order:1;margin-top:120px;margin-bottom:22px}
 .tct-hero h1{order:1;font-size:clamp(38px,12vw,66px)}
 .tct-art{--r:26px;order:2;position:relative;inset:auto;width:auto;height:clamp(360px,48svh,420px);margin:26px 12px 0}
 .tct-hero .lede{order:3;font-size:15.5px;margin:24px 20px}
 .tct-hero .actions{order:3;margin-inline:20px}
 .tct-card .pic{inset:24px 22px 150px}
 .tct-card .big{gap:10px}
 .tct-card .big em{font-size:76px}
 .tct-card .big .sub{font-size:14px;max-width:270px}
 .tct-card .cap{left:22px;right:22px;bottom:78px}
 .tct-card .cap b{font-size:9px;margin-bottom:6px}
 .tct-card .cap .t{font-size:16.5px}
 .tct-card .cap i{font-size:11px;margin-left:8px}
 .tct-tabs{left:10px;right:10px;bottom:12px;gap:0;padding:4px;max-width:440px;margin-inline:auto}
 .tct-tabs .pill{top:4px;bottom:4px}
 .tct-tabs button{flex:1;text-align:center;padding:11px 0;font-size:12.5px}
 .tct-toggle{top:12px;right:12px;width:36px;height:36px}
 .tct-hero+.principle-wrap{margin-top:0}
}
@media(max-width:800px){.tct-hero{margin-top:-94px}}
@media(max-width:520px){.tct-hero{margin-top:-87px}}
@media (prefers-reduced-motion:reduce){
 .tct-copy .eyebrow,.tct-hero h1 .l1,.tct-hero h1 .l2,.tct-hero .lede,.tct-hero .actions,.tct-art,.tct-tabs,.tct-toggle,.tct-card.is-on .cap,.tct-card.is-on.first img,.tct-hero .swap .w.is-on.first,.tct-tabs button[aria-pressed=true] span,.tct-tabs .pill.squish{animation:none}
 .tct-card,.tct-card img,.tct-hero .swap .w,.tct-tabs .pill{transition:none!important}
 .tct-card img{translate:none}
}
@media print{
 .tct-hero{margin-top:0;min-height:0;display:block}
 .tct-copy{width:auto;padding:24px 0}
 .tct-art{display:none}
 .tct-hero *{animation:none!important}
}

/* 2026-11-08 mobile tidy: fewer stacked buttons under the hero */
@media(max-width:700px){
 .tct-hero .actions{align-items:center;gap:6px 22px}
 .tct-hero .actions .button.outline{border:0;background:none;box-shadow:none;min-height:44px;padding:8px 2px;border-radius:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
 .tct-hero .actions .button.outline:hover{background:none}
 .principle-wrap{display:none}
}

/* Journal section intro, same layout as Research and Projects */
#latest-journal .section-top{align-items:center}
#latest-journal .section-top p{max-width:46ch;margin-top:20px;color:var(--muted)}
#latest-journal h2{letter-spacing:-.035em;text-wrap:balance}
@media(max-width:540px){#latest-journal .section-top>.button{margin-top:24px}}