/* Front page (prototype index.html) */
/* hero */
.hero{position:relative;background:linear-gradient(180deg,#eef1f3 0%,#e9edf1 60%,#e6ebef 100%)}
.hero-copy{position:relative;z-index:3;padding-top:40px;padding-bottom:0}
.hello{margin:0 0 16px;font-size:var(--fs-base);color:#3b4a58}
.hero h1{margin:0 0 18px;font-family:var(--display);font-weight:var(--dw);font-size:var(--fs-3xl);line-height:.92;letter-spacing:var(--dls);color:#14202b}
.hero h1 em{font-style:normal;color:var(--rust)}
.lead{margin:0 0 26px;max-width:640px;font-size:var(--fs-md);line-height:1.55;color:#2c3b48}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* panorama: 4 equal pins, all labels on one line, no hierarchy */
.pano{position:relative;margin-top:-44px}
.photo{position:relative;aspect-ratio:1672/790;overflow:hidden}
.photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
/* the pin layer keeps the photo's own 1672:941 geometry, so --x/--y stay on the peaks when the frame is cropped */
.pins{position:absolute;left:0;top:0;width:100%;aspect-ratio:1672/941;z-index:2;pointer-events:none;margin:0;padding:0;list-style:none}
.pin{position:absolute;left:var(--x);top:17%;bottom:calc(100% - var(--y));display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);pointer-events:auto;text-decoration:none;color:var(--ink)}
.pin-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:var(--pw,214px);min-height:86px;padding:10px 14px 11px;border-radius:14px;background:#fbfaf7eb;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 14px 30px -20px #17243080;text-align:center}
.pin-name{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:var(--dw);font-size:var(--fs-lg);line-height:1.1;white-space:nowrap}
.pin-name img{width:26px;height:26px}
.pin-desc{font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--ink-3);text-wrap:balance}
.pin-line{flex:1;width:0;border-left:1.5px solid #fbfaf7d9}
.pin-dot{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fbfaf7;margin-bottom:-6px}
.pin:hover .pin-name span{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:5px}
.pin:focus-visible{outline:none}
.pin:focus-visible .pin-label{outline:2px solid var(--rust);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .js .pin{opacity:0;animation:pin .7s ease forwards;animation-delay:calc(.3s + var(--i) * .12s)}
  .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .pin.shown{opacity:1;animation:none}
}
@keyframes pin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pinc{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* tag cards */
.cards{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:-120px}
.card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:var(--paper);text-decoration:none;box-shadow:0 1px 0 #17243012,0 28px 50px -30px #17243080;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card-logo{display:flex;align-items:center;justify-content:center;height:140px;background:color-mix(in srgb,var(--c) 9%,#fbfaf7)}
.card-logo img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 10px 18px #17243022);transition:transform .3s}
.card:hover .card-logo img{transform:scale(1.08) rotate(-3deg)}
.card-body{display:grid;gap:6px;padding:18px 20px 20px}
.card-top{display:flex;flex-direction:column;gap:3px}
.card-name{font-family:var(--display);font-weight:var(--dw);font-size:var(--fs-lg);line-height:1.1}
.card:hover .card-name{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:5px}
.card-topic{font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--ct)}
.card-desc{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}

/* sections */
.sec{padding:88px 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:30px}
.head p{margin:0;max-width:440px;font-size:16px;color:var(--ink-2)}
.head>a{font-weight:500;white-space:nowrap}
.news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:1px solid var(--ink)}
.news a{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px;row-gap:8px;align-content:start;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.news a>*{grid-column:2}
.news .thumb{grid-column:1;grid-row:1/span 3;margin:0;width:150px;border:1px solid var(--line);border-radius:10px}
.flag{font-family:var(--mono);font-size:12px;color:var(--rust)}
.news-title{font-family:var(--display);font-weight:var(--dw);font-size:clamp(20px,1.7vw,23px);line-height:1.25;text-wrap:balance}
.post.feature{grid-column:span 2;grid-row:span 2;gap:12px;padding:0 32px 30px}
.post.feature .thumb{margin:0 -32px 10px}
.post.feature .post-title{font-size:var(--fs-2xl);line-height:1.05;letter-spacing:-.02em}
.post.feature p{margin:0;max-width:620px;font-size:18px;color:var(--ink-2)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:72px 0}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:260px;padding:30px;border-radius:20px;text-decoration:none;color:var(--paper);background:var(--bg)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .4s}
.tile:hover img{opacity:.7}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 120%)}
.tile>*:not(img){position:relative;z-index:1}
.tile b{font-family:var(--display);font-weight:var(--dw);font-size:var(--fs-xl);line-height:1.15;text-wrap:balance}
.tile:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tile span{color:#d7dee4}
.tile .go{font-weight:500;color:#f0a676}

/* about */
.about{background:var(--sand)}
.about-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:72px;align-items:start}
.about-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:22px}
.about .h2{margin-bottom:22px}
.about .about-lead{font-size:22px;line-height:1.45;color:var(--ink)}
.about p{max-width:640px;color:var(--ink-2)}
.roles{list-style:none;margin:26px 0 8px;padding:0;border-top:1px solid #dcd8cf}
.roles li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid #dcd8cf;color:var(--ink-2)}
.roles b{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--rust);padding-top:3px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 28px}
.badges img{display:block;height:64px;width:auto}
.about-links{display:flex;gap:24px;flex-wrap:wrap;font-weight:500}

/* kalendarium */
.cal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}
.cal-side{position:sticky;top:96px;align-self:start}
.cal-label{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.next-row{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;background:var(--sand);text-decoration:none;font-weight:500}
.next-row:hover{text-decoration:underline;text-underline-offset:4px}
.cal-stats{display:grid;gap:14px;margin:26px 0 0}
.cal-stats div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cal-stats dt{font-family:var(--display);font-weight:var(--dw);font-size:var(--fs-xl);line-height:1;letter-spacing:-.03em;color:var(--rust)}
.cal-stats dd{margin:0;color:var(--ink-2)}
.past{list-style:none;margin:0;padding:0}
.cal-list{border-top:1px solid var(--ink)}
.past li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.past li.yr{display:block;padding:22px 0 8px;border-bottom:0;font-family:var(--display);font-weight:var(--dw);font-size:var(--fs-lg);color:var(--ink)}
.past li.yr:first-child{padding-top:12px}
.past b{color:var(--ink);font-weight:600}
.past li a{display:grid;gap:3px;text-decoration:none;color:inherit}
.past li a:hover b{text-decoration:underline;text-decoration-color:var(--rust);text-underline-offset:3px}
.ev-year{font-family:var(--mono);font-size:13px;color:var(--rust);padding-top:2px}
.ev-where{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.with{font-size:14px;color:var(--ink-3)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);font-weight:500;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary:after{content:"+";font-family:var(--mono);font-size:20px;color:var(--rust)}
.more[open] summary:after{content:"−"}
.more summary:hover{color:var(--rust)}

@media (max-width:1000px){
  .about-grid,.cal-grid{grid-template-columns:1fr;gap:40px}
  .about-photo{max-width:360px}
  .cal-side{position:static}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-40px}
  .news,.duo{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:start;gap:14px}
  .post.feature{grid-column:1/-1;grid-row:auto}
  .pano{margin-top:0}
  .pin{top:12%}
  .pin-label{--pw:clamp(128px,17vw,168px);min-height:0;padding:7px 10px;border-radius:10px}
  .pin-name{font-size:16px;gap:6px}.pin-name img{width:20px;height:20px}
  .pin-desc{display:none}
}
/* narrow: pins become a compact, equal row of labels (no stems) */
@media (max-width:760px){
  .pins{top:auto;bottom:auto;inset-block-start:31%;aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 16px}
  .pin{position:static;transform:none;display:block}
  .js .pin{animation-name:pinc}
  .pin-line,.pin-dot{display:none}
  .pin-label{--pw:100%;padding:8px 4px 7px;gap:4px}
  .pin-name{flex-direction:column;gap:4px;font-size:13px;line-height:1.15}
}
@media (max-width:600px){
  .sec{padding:64px 0}
  .pano{margin-top:-24px}
  .photo{aspect-ratio:auto;height:340px}
  .photo>img{object-position:60% 50%}
  .pins{inset-block-start:40%}
  .cards{grid-template-columns:1fr;gap:12px;margin-top:-72px}
  .card{flex-direction:row}
  .card-logo{flex:0 0 88px;height:auto}
  .card-logo img{width:44px;height:44px}
  .card-body{padding:14px 16px 16px;gap:4px}
  .card-name{font-size:var(--fs-md)}
  .news a{grid-template-columns:96px minmax(0,1fr);column-gap:14px}
  .news .thumb{width:96px}
  .roles li{grid-template-columns:1fr;gap:4px}
  .post.feature{padding:0 22px 24px}.post.feature .thumb{margin:0 -22px 6px}
  .post.feature .post-title{font-size:var(--fs-xl)}
  .past li{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .tile{padding:24px}
}
/* one news item: a single wide card */
.news.one{grid-template-columns:minmax(0,1fr)}
.news.one a{grid-template-columns:300px minmax(0,1fr);column-gap:32px;padding:26px 0}
.news.one .thumb{width:300px;grid-row:1/span 4}
.news.one .news-title{font-size:var(--fs-xl);line-height:1.15}
.news-desc{max-width:680px;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.news a:hover .news-title{text-decoration:underline;text-decoration-color:var(--rust);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:600px){.news.one a{grid-template-columns:96px minmax(0,1fr);column-gap:14px;padding:22px 0}.news.one .thumb{width:96px;grid-row:1/span 2}.news.one .news-title{font-size:clamp(20px,5.4vw,23px)}.news.one .news-desc,.news.one .meta{grid-column:1/-1}}