/* TFK-124 Thesis Showcase Kiosk — академический минимализм, ч/б, офлайн.
   Три самодостаточных экрана: титул · облако тем · список работ. */
@font-face{
  font-family:"Q3DIN";
  src:url("fonts/Q3_DIN_Condensed.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --ink:#141414; --bg:#ffffff; --muted:#5f5f5f; --hair:#d6d6d6;
  --serif:Georgia,"PT Serif","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Q3DIN","Segoe UI Semibold",var(--sans);
  --pad:clamp(20px,3vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:20px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
img{display:block}
a{color:inherit}

/* Экраны */
.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  scroll-snap-align:start;position:relative;padding:clamp(28px,4vw,64px) var(--pad)}
.hero,.cloud-screen{justify-content:center;text-align:center}
.list-screen{justify-content:flex-start}
.screen + .screen{border-top:2px solid var(--ink)}

.screen-head{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.5vw,40px);margin:0 0 clamp(24px,3vw,48px);width:100%}
.head-emblem{height:clamp(48px,6vw,86px);width:auto;flex:none}
.screen-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;font-size:clamp(24px,3.4vw,52px);line-height:1.05;margin:0;text-align:center}

/* Экран 1 — титул */
.hero .seals{display:flex;justify-content:center;align-items:center;
  gap:clamp(28px,5vw,72px);margin-bottom:clamp(22px,2.6vw,40px)}
.hero .seals img{height:clamp(96px,11vw,150px);width:auto}
.hero .seals .logo-tfk{height:clamp(78px,8.8vw,120px)}
.hero-kicker{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.14em;font-weight:700;font-size:clamp(20px,3vw,40px);margin:0 0 .25em}
.hero-title{font-family:var(--serif);font-weight:700;line-height:1.1;
  font-size:clamp(30px,5vw,64px);margin:.1em auto .35em;max-width:20ch}
.hero-sub{color:var(--muted);font-size:clamp(15px,1.6vw,22px);margin:0 auto;max-width:60ch}
.hero-sub b{color:var(--ink)}
.scroll-hint{position:absolute;bottom:clamp(16px,3vh,40px);left:50%;transform:translateX(-50%);
  font-size:clamp(28px,3vw,44px);color:var(--muted);animation:bob 1.8s ease-in-out infinite;line-height:1}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* Экран 2 — облако */
.cloud-screen{justify-content:center}
.cloud{display:flex;flex-wrap:wrap;gap:.4em .85em;justify-content:center;align-items:baseline;
  max-width:1320px;margin:0 auto}
.cloud-tag{border:0;background:none;padding:.05em .15em;line-height:1.05;
  font-weight:600;color:var(--ink);border-bottom:3px solid transparent}
.cloud-tag:hover,.cloud-tag:focus{border-bottom-color:var(--ink);outline:none}
.cloud-tag.w1{font-size:clamp(15px,1.5vw,22px);color:var(--muted);font-weight:500}
.cloud-tag.w2{font-size:clamp(20px,2.2vw,33px)}
.cloud-tag.w3{font-size:clamp(26px,3vw,46px);font-weight:700}

/* Экран 3 — список */
.list-screen{padding-bottom:clamp(48px,7vw,110px)}
.list-screen .screen-head{margin-top:clamp(6px,1vw,18px)}
.filterbar{display:none;align-items:center;justify-content:space-between;gap:20px;width:100%;
  max-width:1500px;border:2px solid var(--ink);padding:.7em 1.1em;margin:0 auto;flex-wrap:wrap}
.filterbar.active{display:flex}
.filterbar .ftxt{font-size:clamp(16px,1.8vw,23px)}
.filterbar .ftxt b{font-weight:700}
.filterbar button{border:2px solid var(--ink);background:var(--bg);padding:.45em 1em;font-weight:600;font-size:clamp(15px,1.5vw,20px)}
.filterbar button:hover{background:var(--ink);color:var(--bg)}
.count{width:100%;max-width:1500px;margin:clamp(18px,2.4vw,32px) auto 14px;color:var(--muted);
  font-size:clamp(15px,1.5vw,20px);text-transform:uppercase;letter-spacing:.08em}
.cards{width:100%;max-width:1500px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:clamp(16px,1.8vw,28px)}
.card{border:2px solid var(--ink);background:var(--bg);padding:clamp(20px,1.8vw,30px);
  text-align:left;display:flex;flex-direction:column;gap:.55em;min-height:236px}
.card:hover{background:var(--ink);color:var(--bg)}
.card:hover .card-title,.card:hover .chip,.card:hover .lang-tag{color:var(--bg);border-color:var(--bg)}
.card-top{display:flex;justify-content:flex-end}
.card-name{font-size:clamp(20px,1.9vw,27px);font-weight:700;line-height:1.15}
.card-title{font-family:var(--serif);font-size:clamp(16px,1.5vw,21px);color:var(--ink);line-height:1.3;flex:1}
.card-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chip{font-size:clamp(12px,1.1vw,15px);border:1.5px solid var(--ink);padding:.2em .6em;color:var(--ink);white-space:nowrap}

.lang-tag{font-family:var(--sans);font-size:clamp(11px,1vw,14px);text-transform:uppercase;
  letter-spacing:.07em;font-weight:600;border:1.5px solid var(--ink);color:var(--ink);
  padding:.16em .6em;white-space:nowrap;border-radius:2px}

/* Деталь */
.overlay{position:fixed;inset:0;background:var(--bg);z-index:50;display:none;overflow:auto}
.overlay.active{display:block}
.detail{max-width:1000px;margin:0 auto;padding:clamp(84px,9vw,120px) var(--pad) clamp(40px,6vw,90px)}
.back{position:fixed;top:clamp(16px,2vw,28px);left:clamp(16px,2vw,28px);
  border:2px solid var(--ink);background:var(--ink);color:var(--bg);
  font-weight:700;font-size:clamp(18px,1.9vw,26px);padding:.55em 1.4em;z-index:60;border-radius:3px}
.back:hover{background:var(--bg);color:var(--ink)}
.detail .d-kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(13px,1.2vw,17px);margin:0 0 1em}
.detail .d-name{font-size:clamp(26px,3.4vw,46px);font-weight:700;line-height:1.1;margin:0 0 .25em}
.detail .d-title{font-family:var(--serif);font-size:clamp(20px,2.3vw,32px);line-height:1.3;margin:.3em 0 1.1em}

.d-intro{margin:0 0 1.8em}
.d-intro-head{display:flex;align-items:center;gap:14px;margin:0 0 .5em}
.d-intro-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(18px,1.9vw,26px);margin:0}
.d-trnote{font-size:clamp(13px,1.3vw,17px);color:var(--muted);background:#f4f4f4;
  border-left:3px solid var(--ink);padding:.55em .9em;margin:.3em 0 .8em;max-width:74ch}
.d-trbtn{border:2px solid var(--ink);background:var(--bg);color:var(--ink);
  font-weight:600;font-size:clamp(14px,1.4vw,19px);padding:.5em 1.1em;margin:0 0 1em;border-radius:3px}
.d-trbtn:hover{background:var(--ink);color:var(--bg)}
.d-intro-body{font-size:clamp(16px,1.55vw,21px);line-height:1.62;max-width:74ch;
  white-space:pre-line;margin:0 0 .4em;text-align:left}

.detail .d-tags{display:flex;flex-wrap:wrap;gap:10px;margin:1.4em 0 2em}
.detail .d-pdf{display:inline-block;border:2px solid var(--ink);background:var(--ink);color:var(--bg);
  text-decoration:none;padding:.7em 1.6em;font-size:clamp(17px,1.7vw,24px);font-weight:700;border-radius:3px}
.detail .d-pdf:hover{background:var(--bg);color:var(--ink)}

@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .head-emblem{height:42px}
  .screen-title{font-size:clamp(20px,6vw,30px)}
}