/* ============================================================
   beta.ktklub.com — About-area pages (Rólunk / Csapat / Kapcsolat)
   Kept in its own file so a redeploy of ktk.css cannot drop it.
   ============================================================ */

/* ---- Rólunk: hub cards ---- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.hub-card{display:flex;flex-direction:column;gap:10px;padding:28px 26px 24px;border:1px solid var(--edge);border-radius:16px;background:linear-gradient(158deg,#201e1a,#151310);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.hub-card:hover{transform:translateY(-4px);border-color:var(--gold-dk);box-shadow:0 22px 44px rgba(0,0,0,.45)}
.hub-ico{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;color:var(--gold-lt);background:radial-gradient(120% 120% at 30% 25%,rgba(232,184,75,.28),rgba(201,146,42,.07));border:1px solid rgba(201,146,42,.3)}
.hub-ico svg{width:24px;height:24px}
.hub-card h2{font-family:var(--display);font-size:24px;font-weight:600;margin:6px 0 0;color:var(--tx)}
.hub-card p{color:var(--tx-dim);margin:0;font-size:16.5px;line-height:1.55}
.hub-more{margin-top:auto;padding-top:12px;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.hub-card:hover .hub-more{color:var(--gold)}

/* ---- Csapat: person cards ---- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:16px;overflow:hidden;background:linear-gradient(178deg,#1b1917,#141210);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.pcard:hover{transform:translateY(-4px);border-color:var(--gold-dk);box-shadow:0 24px 48px rgba(0,0,0,.5)}
.pcard-photo{aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.pcard-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pcard:hover .pcard-photo img{transform:scale(1.04)}
.pcard-body{padding:20px 22px 24px;display:flex;flex-direction:column}
.pcard-name{font-family:var(--display);font-size:26px;font-weight:600;margin:0 0 14px;color:var(--tx);letter-spacing:.01em}
.pcard-lbl{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mut);margin:14px 0 9px}
.pcard-lbl:first-of-type{margin-top:0}
.pcard-tags{display:flex;flex-wrap:wrap;gap:8px}
.ptag{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--gold-lt);background:rgba(201,146,42,.09);border:1px solid var(--gold-dk);border-radius:999px;padding:6px 14px}
.ptag--role{color:var(--tx);background:rgba(240,237,232,.05);border-color:var(--edge)}
.pcard-langs{display:flex;flex-wrap:wrap;gap:8px}
.plang{display:inline-flex;align-items:center;gap:8px;background:rgba(240,237,232,.04);border:1px solid var(--edge);border-radius:999px;padding:5px 13px 5px 6px}
.plang .flag{width:22px;height:16px;border-radius:3px;object-fit:cover;display:block}
.plang em{font-family:var(--body);font-style:normal;font-size:15px;color:var(--tx)}
.pcard-mail{font-family:var(--ui);font-size:15px;letter-spacing:.02em;color:var(--gold-lt);word-break:break-all}
.pcard-mail:hover{color:var(--gold)}

/* ---- Kapcsolat ---- */
@media (max-width:820px){ .kap-grid{grid-template-columns:1fr} }

/* ---- header: Rólunk dropdown ---- */
.nav-drop{position:relative;display:inline-flex}
/* the trigger is a <button>, so the .nav a rules do not reach it — mirror them */
.nav-drop>a{display:inline-flex;align-items:center;gap:7px}
.nav-drop>a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.nav-drop[data-open="1"]>a::after{transform:rotate(-135deg) translateY(-2px)}
.nav-drop>a:hover,.nav-drop[data-open="1"]>a{color:var(--tx);border-bottom-color:var(--gold)}
.nav-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:210px;background:#141210;border:1px solid var(--edge);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 50px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.nav-drop:focus-within .nav-menu,
.nav-drop[data-open="1"] .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-menu a{display:block;padding:11px 15px;border-radius:9px;white-space:nowrap;color:var(--tx-dim)}
.nav-menu a:hover{background:rgba(201,146,42,.12);color:var(--gold-lt)}
.nav-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
@media (max-width:900px){
  .nav-drop{display:block}
  .nav-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 0 14px;display:none}
  .nav-drop[data-open="1"] .nav-menu{display:flex;transform:none}
  .nav-menu a{padding:8px 0}
}

/* section jump links under the intro */
.onthis{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.onthis a{font-family:var(--ui);font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);border:1px solid var(--edge);border-radius:999px;padding:9px 18px;background:rgba(201,146,42,.06);transition:.18s}
.onthis a:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#1a1408}

/* ============================================================
   Cégadatok — register, not feature cards.
   Ruled rows carry the data; the IBAN is the one loud element
   because it is the only value a visitor acts on.
   ============================================================ */
.reg-wrap{padding-bottom:8px}
.reg{margin:26px 0 0;border-top:1px solid rgba(201,146,42,.22)}
.reg-row{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:baseline;padding:18px 2px;border-bottom:1px solid rgba(201,146,42,.16)}
.reg dt{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mut);padding-top:4px}
.reg dd{margin:0;font-family:var(--body);font-size:19px;color:var(--tx);line-height:1.4}
.reg dd a{color:var(--tx);border-bottom:1px solid rgba(201,146,42,.4);padding-bottom:1px}
.reg dd a:hover{color:var(--gold-lt);border-bottom-color:var(--gold)}
/* every value sits at one size in one face — mixing three faces at three sizes
   read as inconsistent, not as a hierarchy. Numerals only get tabular figures so
   the digit groups line up. */
.reg-name{letter-spacing:.01em}
.reg-num{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* --- the signature: account number, set like a filled-in transfer field --- */
.iban{max-width:720px;margin:32px 0 0}
.iban-k{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.iban-line{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:10px;padding-bottom:11px;border-bottom:2px solid rgba(201,146,42,.5)}
.iban-v{margin:0;font-family:var(--ui);font-size:clamp(22px,2.5vw,31px);font-weight:600;letter-spacing:.07em;font-variant-numeric:tabular-nums;color:var(--tx);line-height:1.1;white-space:nowrap}
.iban-copy{flex:0 0 auto;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);background:transparent;border:1px solid var(--gold-dk);border-radius:999px;padding:8px 17px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.iban-copy:hover{background:var(--gold);border-color:var(--gold);color:#1a1408}
.iban-copy.is-done{color:#8fd08f;border-color:#4d7a4d;background:rgba(124,196,124,.10)}

/* --- venue: one ruled line, not a call-to-action block --- */
.reg-venue{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:30px 0 0;padding-top:18px;border-top:1px solid rgba(201,146,42,.22)}
.reg-venue-k{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mut)}
.reg-venue-v{font-family:var(--body);font-size:19px;color:var(--tx)}
.reg-venue-a{margin-left:auto;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);border-bottom:1px solid rgba(201,146,42,.45);padding-bottom:2px}
.reg-venue-a:hover{color:var(--gold);border-bottom-color:var(--gold)}

@media (max-width:620px){
  .reg-row{grid-template-columns:1fr;gap:5px;padding:15px 2px}
  .reg dt{padding-top:0}
  .iban{padding:20px 20px 18px}
  .iban-v{letter-spacing:.1em}
  .reg-venue-a{margin-left:0}
}

/* .btn is a bare <a>: it only becomes a block when a flex parent blockifies it.
   In this column it is a plain child, so give it an explicit box or its padding
   overlaps whatever sits above. */

@media (max-width:560px){
  .iban-v{white-space:normal;word-break:break-word}
}

/* the lead is gone, so close the gap between the title and the first paragraph */
.blog-head + .gp-section{padding-top:var(--sec-gap-tight)}

/* Kapcsolat: equal columns that start AND finish on the same line.
   align-items:start would let the shorter column stop early — stretch instead
   and push the social chips down so they land level with the send button. */

/* maths check on the contact form.
   .cform label is display:grid (0-1-1), so these need matching specificity or the
   question stacks one word per line. */
.cform .cform-cap{display:flex;flex-direction:row;align-items:center;gap:10px;
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-mut);white-space:nowrap}
.cform .cform-cap strong{color:var(--gold-lt);font-weight:700;letter-spacing:.12em}
.cform .cform-cap input{width:80px;flex:0 0 auto;padding:9px 12px;text-align:center}

/* .lines is capped at 460px globally, which left the contact list ending well
   short of its column and opened a 220px hole beside the form */
/* First line of each column must sit on the same baseline. The eyebrow margin
   below collapses with anything positive here, so the correction has to be
   negative: -3px cancels the row line-box leading the form label does not have. */

/* The form reserves an empty status line under the button (min-height 1.2em),
   which pushed the column 33px past its last visible element. Collapse it while
   empty so the chips and the send button finish on the same line; it reappears
   the moment JS writes a message into it. */

/* Pinning the chips to the bottom left a hole in the middle of the left column.
   Shorten the oversized message box, then let the four contact rows share what
   space remains so the column reads as evenly spaced rather than top-heavy. */

/* Kapcsolat reuses the homepage events+form block (.foot-cols), so its layout
   lives in ktk.css. Only the captcha row is ours. */

/* .foot-cols is a footer band on the homepage and carries 96px of top padding.
   Inside an article section that stacks with the section's own padding, so drop
   it here only — .article exists on the sub-pages, never on the homepage. */
.article .foot-cols{padding-top:0}

/* ============================================================
   Hero buttons — chosen layout: stacked under the lead, left aligned.
   Everything else in the hero (eyebrow, wordmark, lead, category row, hours)
   shares one left edge; the buttons now join it instead of floating right.
   ============================================================ */
.hero-ed .hero-row{flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.hero-ed .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,28px);min-width:0}
.hero-ed .hero-row .acts{display:flex;gap:14px;flex-wrap:wrap}

/* Club mark as a background watermark — out of the flow entirely, behind the
   copy (z-index:-1 is safe: the section and .sheet are transparent over the
   body colour). It sets atmosphere without taking part in the layout. */
.hero-ed .hero-mark{
  position:absolute;z-index:-1;pointer-events:none;user-select:none;
  right:0;top:0;
  width:min(40vw,440px);height:auto;opacity:.07}

@media (max-width:860px){
  .hero-ed .hero-row{flex-direction:column;align-items:flex-start}
  /* Centred rather than right-anchored: at this width the desktop position puts
     half the mark past the right edge, so it reads as a graphic that did not fit
     instead of a backdrop. */
  .hero-ed .hero-mark{
    width:min(76vw,320px);opacity:.055;
    right:auto;left:50%;transform:translateX(-50%);
  }
}

/* Hero -> Rólunk: 96px of hero padding-bottom met 120px of section padding-top,
   leaving 251px between the hours cards and the next heading. Scoped to that one
   seam (adjacent sibling) so other sections keep their rhythm. */
.hero-ed{padding-bottom:clamp(26px,3.2vw,44px)}
.hero-ed + .about{padding-top:clamp(40px,4.6vw,64px)}

/* Article column: .art-body is 768px with margin:0, so it sat hard left inside
   the 1425px sheet while the cover was centred. Centre the whole column — title,
   body and everything after it — so the page reads as one measure. */
.article:has(.art-head) > .sheet > *{max-width:768px;margin-inline:auto}
.article:has(.art-head) .art-body{max-width:768px;margin-inline:auto}

/* ============================================================
   Sub-page top spacing. main carries 52px of padding and .blog-head another
   80px, so every inner page opened with ~136px of nothing under the nav.
   Scoped to pages that have a page-header or are article-shaped, so the
   homepage hero keeps its own rhythm.
   ============================================================ */
main:has(> .blog-head), main.article{padding-top:clamp(8px,1.2vw,16px)}
.blog-head{padding-top:clamp(12px,1.6vw,22px)}

/* ============================================================
   ARTICLE PAGE
   Photograph first (these are painting guides — the picture is the hook),
   then meta, title, rule. The plate frames a photo whose own background is
   often white studio paper, so it needs a mat rather than bleeding into the page.
   ============================================================ */
.article:has(.art-head) > .sheet > .gp-back{max-width:880px;margin-inline:auto;display:inline-block}

.art-head{max-width:880px;margin:0 auto;padding:clamp(14px,2vw,26px) clamp(18px,4vw,48px) 0;text-align:center}

/* the plate */
.art-plate{margin:0 auto;padding:clamp(10px,1.2vw,16px);display:inline-block;
  background:linear-gradient(178deg,#1c1a17,#141210);
  border:1px solid var(--edge);border-radius:16px;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.03) inset}
.art-plate img{display:block;width:auto;max-width:100%;height:auto;max-height:460px;
  border-radius:9px;object-fit:contain}

/* meta line */
.art-meta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:clamp(20px,2.6vw,30px) 0 0;
  font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-mut)}
.art-meta i{font-style:normal;color:var(--gold-dk)}

/* title + closing rule */
body .art-title{font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.3vw,52px);letter-spacing:-.02em;line-height:1.08;
  color:var(--tx);margin:14px auto 0;max-width:20ch}
.art-rule{display:block;width:64px;height:1px;margin:clamp(22px,2.8vw,32px) auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- body ---------------------------------------------------------------
   Was 18px in the muted grey used for captions, which is what made a long read
   feel washed out. Full text colour, a little larger, looser leading. */
.article:has(.art-head) .art-body{max-width:768px;margin-inline:auto;
  font-size:19px;line-height:1.78;color:var(--tx)}
.article:has(.art-head) .art-body > p:first-of-type{font-size:21px;line-height:1.7;color:var(--tx)}
.article:has(.art-head) .art-body p{margin:0 0 22px}
.article:has(.art-head) .art-body strong{color:var(--gold-lt);font-weight:600}

/* section heads get a small gold marker, so scanning finds the steps */
.article:has(.art-head) .art-body h2{position:relative;font-family:var(--display);font-weight:600;
  font-size:clamp(23px,2.6vw,30px);color:var(--tx);margin:46px 0 16px;padding-top:18px;line-height:1.2}
.article:has(.art-head) .art-body h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--gold)}
.article:has(.art-head) .art-body h3{font-family:var(--display);font-weight:600;font-size:21px;color:var(--tx);margin:32px 0 10px}

/* in-body photos: same plate treatment as the cover, at column width */
.article:has(.art-head) .art-body img{width:100%;height:auto;margin:30px 0;border:1px solid var(--edge);
  border-radius:12px;box-shadow:0 18px 38px rgba(0,0,0,.45)}
.article:has(.art-head) .art-body blockquote{border-left:2px solid var(--gold-dk);padding:2px 0 2px 22px;
  margin:28px 0;font-style:italic;color:var(--tx-dim)}
.article:has(.art-head) .art-body a{color:var(--gold-lt);text-decoration-color:var(--gold-dk);text-underline-offset:3px}

/* ---- end of article ---- */
.art-end{max-width:768px;margin:clamp(34px,4vw,52px) auto 0;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--edge);display:flex;flex-direction:column;align-items:center;gap:20px}
.art-end-mark{width:9px;height:9px;transform:rotate(45deg);background:var(--gold);opacity:.85}

@media (max-width:640px){
  .art-plate{padding:8px;border-radius:12px}
  .art-plate img{max-height:340px}
  .article:has(.art-head) .art-body{font-size:18px}
  .article:has(.art-head) .art-body > p:first-of-type{font-size:19.5px}
}

/* ============================================================
   ARTICLE INDEX
   A grid of identical cards says "list of things". A club archive has an order
   worth showing: the newest piece leads, everything else reads as a chronicle
   with a date column — same register vocabulary as the Cégadatok block.
   ============================================================ */
.blog-list{padding-top:clamp(18px,2.4vw,30px)}

/* ---- featured (newest) ---- */
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,44px);align-items:center;
  padding-bottom:clamp(26px,3.4vw,40px);border-bottom:1px solid var(--edge)}
.feat-img{display:block;overflow:hidden;border:1px solid var(--edge);border-radius:14px;
  box-shadow:0 22px 46px rgba(0,0,0,.5);aspect-ratio:16/10;background:var(--panel)}
.feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.feat:hover .feat-img img{transform:scale(1.03)}
.feat-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.feat-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--ui);font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mut)}
.feat-meta em{font-style:normal;color:#1a1408;background:var(--gold);border-radius:999px;padding:4px 11px;letter-spacing:.14em}
.feat-meta i{font-style:normal;color:var(--gold-dk)}
.feat-title{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.1;
  letter-spacing:-.02em;color:var(--tx);margin-top:16px}
.feat:hover .feat-title{color:var(--gold-lt)}
.feat-ex{font-family:var(--body);font-size:17.5px;line-height:1.62;color:var(--tx-dim);margin-top:14px;max-width:52ch}
.feat-more{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lt);margin-top:22px;border-bottom:1px solid var(--gold-dk);padding-bottom:3px}

/* ---- chronicle ---- */
.chron-lbl{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tx-mut);margin:clamp(30px,3.6vw,44px) 0 4px}
.chron{list-style:none;margin:0;padding:0}
.chron li{border-bottom:1px solid var(--edge)}
.chron a{display:grid;grid-template-columns:64px 116px 1fr auto;gap:clamp(14px,2vw,26px);align-items:center;
  padding:18px 10px;border-radius:10px;transition:background .18s ease}
.chron a:hover{background:rgba(201,146,42,.06)}

.chron-date{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--tx-mut)}
.chron-date b{font-family:var(--display);font-size:26px;font-weight:700;color:var(--gold-lt)}
.chron-date em{font-style:normal;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-top:4px}
.chron-date i{font-style:normal;font-family:var(--ui);font-size:11px;letter-spacing:.1em;margin-top:2px;opacity:.7}

.chron-thumb{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--edge);border-radius:8px;background:var(--panel)}
.chron-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.chron-txt{min-width:0}
.chron-title{display:block;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.24;color:var(--tx)}
.chron a:hover .chron-title{color:var(--gold-lt)}
.chron-ex{display:block;font-family:var(--body);font-size:15.5px;line-height:1.5;color:var(--tx-mut);margin-top:6px}
.chron-read{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-mut);white-space:nowrap}

@media (max-width:900px){
  .feat{grid-template-columns:1fr}
  .chron a{grid-template-columns:52px 92px 1fr;gap:14px}
  .chron-read{display:none}
}
@media (max-width:560px){
  .chron a{grid-template-columns:52px 1fr}
  .chron-thumb{display:none}
  .chron-ex{display:none}
}

/* ============================================================
   TÁMOGATÁS
   The amounts are not pricing tiers — they are what a donation buys, so they are
   set as a ledger. The IBAN reuses the transfer-slip instrument from Cégadatok,
   so the site has one way of presenting an account number, not three.
   ============================================================ */
/* the page header's 32px bottom padding met the section's 25.6px top padding,
   leaving 58px between the title and the first line */
.tam .blog-head{padding-bottom:clamp(10px,1.3vw,16px)}
/* .article .blog-head + .gp-section (three classes) sets 25.6px here, so this
   needs equal specificity to win — it is later in the stylesheet. */
.tam{--sec-gap:clamp(34px,4vw,60px)}          /* this page runs tighter on purpose */
.tam .blog-head + .gp-section{padding-top:calc(var(--sec-gap-tight) / 2)}
.tam-prose{max-width:70ch;font-size:18px;line-height:1.75;color:var(--tx-dim)}
.tam-prose p{margin:0 0 20px}
.tam-lead{font-size:clamp(20px,2.2vw,24px);line-height:1.5;color:var(--tx)}

.tam-hinge{max-width:62ch;margin:0 0 clamp(24px,3vw,34px);
  font-family:var(--body);font-size:19px;line-height:1.6;color:var(--tx)}

/* ---- transfer panel: account number above, QR below, in one frame ---- */
.tam-panel{max-width:560px;margin-top:clamp(30px,3.6vw,44px);
  padding:clamp(24px,2.8vw,32px);border:1px solid var(--edge);border-radius:16px;
  background:linear-gradient(178deg,#1b1917,#141210);
  box-shadow:0 22px 46px rgba(0,0,0,.42)}
.tam-k{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0}
.tam-line{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:10px;padding-bottom:11px;border-bottom:2px solid rgba(201,146,42,.5)}
.tam-iban{margin:0;font-family:var(--ui);font-size:clamp(20px,2.2vw,27px);font-weight:600;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--tx);line-height:1.1;white-space:nowrap}
.tam-copy{flex:0 0 auto;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-lt);background:transparent;border:1px solid var(--gold-dk);
  border-radius:999px;padding:8px 17px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.tam-copy:hover{background:var(--gold);border-color:var(--gold);color:#1a1408}
.tam-copy.is-done{color:#8fd08f;border-color:#4d7a4d;background:rgba(124,196,124,.10)}
.tam-note{margin:13px 0 0;font-family:var(--body);font-size:16px;color:var(--tx-mut)}

/* the QR sits under the number, separated by a hairline, as the alternative */
.tam-qr{margin:clamp(20px,2.4vw,26px) 0 0;padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--edge);display:flex;align-items:center;gap:18px}
.tam-qr img{flex:0 0 auto;display:block;width:112px;height:112px;background:#fff;padding:7px;
  border-radius:10px;border:1px solid var(--edge)}
.tam-qr figcaption{font-family:var(--body);font-size:15.5px;line-height:1.45;color:var(--tx-dim);max-width:24ch}

/* ---- supporters ---- */
.tam-supporters .plogos{margin-top:18px}

/* ---- cooperation: one ruled band, not a centred card ---- */
.tam-coop{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:clamp(22px,2.8vw,30px);border-top:1px solid rgba(201,146,42,.24)}
.tam-coop-line{margin:10px 0 0;font-family:var(--body);font-size:19px;color:var(--tx);max-width:48ch}

@media (max-width:640px){
  .tam-iban{white-space:normal;word-break:break-word}
  .tam-panel{padding:20px}
  .tam-qr{flex-direction:column;align-items:flex-start;gap:12px}
}

/* placeholder login page: the two actions sit side by side in the ruled band */
.dc-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   DISCORD SECTION (homepage)
   Built like every other homepage band — rail label, eyebrow, .hd headline,
   prose, button — instead of a bordered widget with an icon chip. The glyph is
   a faint watermark, the same device as the club mark in the hero.
   ============================================================ */
.discord-sec{position:relative;overflow:hidden}
.discord-sec .sheet{position:relative}
.dc-body{max-width:60ch}
.dc-body .hd{margin-top:8px}
.dc-lead{font-family:var(--body);font-size:18px;line-height:1.65;color:var(--tx-dim);margin:14px 0 26px;max-width:56ch}
.dc-body .btn{display:inline-flex;align-items:center}

/* ------------------------------------------------------------------
   Discord and Facebook, as two tiles.

   The whole tile is the link: the border closes off the space beside the copy,
   which is what made the earlier open two-column version read as unfinished.

   The marks are embers — the glyph is filled with the page's own background so
   it reads as a silhouette, with a warm glow behind it. Discord's eyes and
   Facebook's f are holes in their paths, so what shows through them is the
   light behind. Not brand colours, not gold-filled.

   Nothing inside a tile may be a link: it would nest inside this one and not
   work. That is why the Messenger line here is plain text.
   ------------------------------------------------------------------ */
.comm-head{margin:0 0 clamp(26px,3vw,38px)}
.comm-head .eyebrow{margin:0}
.comm-head .hd{margin-top:6px;text-wrap:balance}

/* Three now. auto-fit rather than repeat(3): at 900px it drops to two and
   then to one by itself, and the tiles always fill the row they land on. */
.comm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(16px,2vw,26px)}

.comm-tile{
  /* top-aligned, not centred: a one-line lead beside a two-line one would
     otherwise put the two names at different heights (14px apart in English).
     The mark is re-centred below, so only the text is pinned to the top. */
  position:relative;display:flex;align-items:flex-start;gap:clamp(18px,2.2vw,30px);
  padding:clamp(22px,2.4vw,34px);padding-right:clamp(46px,4vw,64px);
  border:1px solid var(--edge);border-radius:16px;
  background:linear-gradient(180deg,#151311,#111010);
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,background .18s ease;
}
.comm-tile::after{
  content:"→";position:absolute;right:clamp(18px,1.8vw,26px);top:50%;
  transform:translateY(-50%);color:var(--gold);font-size:22px;line-height:1;
}
.comm-tile:hover,.comm-tile:focus-visible{border-color:var(--gold-dk);background:#171513}
.comm-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.comm-txt{display:block;min-width:0}
.comm-nm{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(21px,1.9vw,27px);line-height:1.15;margin:0 0 7px}
.comm-ln{display:block;font-family:var(--body);color:var(--tx-dim);
  font-size:17px;line-height:1.6;max-width:36ch}
/* One size for every line in the tile — the lead, the notes and the Discord
   presence line (sized in assets/inc/discord.php) all sit at 17px. Three
   different sizes read as three tiers of importance in a box that has one
   thing to say. The platform name stays larger; it is a heading. */
.comm-note{display:block;font-family:var(--body);color:var(--tx-mut);
  font-size:17px;line-height:1.6;margin-top:9px;max-width:36ch}
.comm-note + .comm-note{margin-top:6px}

.comm-mark{position:relative;display:grid;place-items:center;flex:0 0 auto;
  align-self:center;width:clamp(72px,7vw,104px);aspect-ratio:1}
.comm-mark::before{
  content:"";position:absolute;inset:-24%;pointer-events:none;filter:blur(6px);
  background:radial-gradient(circle at 50% 50%,
    rgba(201,146,42,.22),rgba(201,146,42,.09) 42%,rgba(201,146,42,.02) 64%,transparent 78%);
}
/* The mark used to be var(--ink) — a near-black cut-out on the amber glow.
   At tile size that reads as a smudge, not a logo. It takes the gold now
   and the glow behind is pulled back, so the mark GLOWS like an ember
   instead of being a hole punched in one. */
.comm-mark svg{position:relative;display:block;width:100%;height:auto;color:var(--gold)}
.comm-tile:hover .comm-mark svg{color:var(--gold-lt)}
/* a circle fills its box and the Discord blob does not, so equal glyphs would
   not read as equal weight — the box stays the same either way, because an
   unequal box would drag everything beside it out of line */
.comm-mark--fb svg{width:86%}

@media (max-width:860px){
  .comm-grid{grid-template-columns:1fr;gap:14px}
  .comm-tile{gap:16px;padding:20px;padding-right:44px}
  .comm-mark{width:62px}
  .comm-nm{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .comm-tile{transition:none}
}

/* the Messenger line: a quieter second action under the button */
.dc-note{margin:16px 0 0;font-family:var(--body);font-size:16px;color:var(--tx-mut);max-width:52ch}

/* The chevron that folds the submenu. On a mouse the whole row opens on hover,
   so the button is not needed; on a phone it is the only way to fold the list
   without leaving the page, and it sits beside the link rather than replacing
   it so the words still go to Rólunk. */
.nav-drop-toggle{display:none}
@media (max-width:900px){
  .nav-drop{display:flex;flex-wrap:wrap;align-items:center}
  .nav-drop>a{flex:1}
  .nav-drop>a::after{display:none}
  .nav-menu{flex-basis:100%}
  .nav-drop-toggle{display:block;flex:0 0 auto;width:46px;align-self:stretch;
    border:0;border-bottom:1px solid var(--edge);background:none;cursor:pointer;position:relative}
  .nav-drop-toggle::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
    border-right:1.7px solid var(--tx-mut);border-bottom:1.7px solid var(--tx-mut);
    transform:translate(-50%,-70%) rotate(45deg);transition:transform .2s ease}
  .nav-drop[data-open="1"] .nav-drop-toggle::after{transform:translate(-50%,-30%) rotate(-135deg)}
  .nav-drop-toggle:hover::after,.nav-drop-toggle:focus-visible::after{border-color:var(--gold-lt)}
}

/* The article date ran to 11px, which is below what is comfortable on a phone.
   Found by the compatibility sweep; the floor belongs here rather than in
   ktk.css, which loads first and would be overridden by the rules above. */
@media (max-width:900px){
  .chron-date em{font-size:12px}
  .chron-date i{font-size:12px;opacity:.8}
}

/* an article list with nothing in it — this language simply has no articles yet */
.chron-empty{margin:34px 0;color:var(--tx-dim);font-style:italic}

/* ── Page transitions ─────────────────────────────────────────────────────
   Cross-document view transitions, handled by the browser. Clicking Kezdőlap
   or any other link now dissolves into the next page instead of blinking to
   white. Browsers without support navigate exactly as before.

   .top and .bottom get names of their own so they are lifted out of the page
   snapshot and hold still while the content moves — the chrome should look
   continuous, since it IS continuous. */
/* Cross-document view transitions are OFF on purpose (2026-08-23).
   They caused a whole-screen white flash in Chrome on every navbar click —
   confirmed by switching them off; never reproducible in automated capture.
   The view-transition-name rules below are inert without this and are kept
   so the feature can be restored in one edit:  @view-transition{ navigation: auto }  */

header.top{ view-transition-name: ktk-top }
footer.bottom{ view-transition-name: ktk-bottom }

/* No custom opacity keyframes here, deliberately. Chrome blends these two
   snapshots with mix-blend-mode:plus-lighter — they ADD — which only looks
   right while their opacities sum to 1. An asymmetric fade (130ms out against
   260ms in, different easings) breaks that sum and the two dark frames add
   into a white wash across the whole screen. The browser's own cross-fade is
   built to sum correctly; ktk.css sets its duration symmetrically. */

/* asked for less motion: give the plain navigation back. The second rule is
   there because a browser that ignores @view-transition inside @media would
   otherwise keep animating. */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none }
}

/* ── Támogatás: the text scrolls, the ask stays ───────────────────────────
   The mission statement used to run for three paragraphs before the reader
   met the account number. Now it runs down the left while the ask sits in a
   sticky column, so the IBAN is on screen however far anyone reads.
   Two cards: giving, and the reason to keep giving. */
.tam-split{display:grid;grid-template-columns:minmax(0,1fr) 372px;
  row-gap:clamp(26px,3vw,40px);column-gap:clamp(26px,4vw,58px);align-items:start}
.tam-side{position:sticky;top:22px;display:grid;gap:16px}

.tam-ask{padding:clamp(20px,2.2vw,26px);border:1px solid var(--edge);border-radius:16px;
  background:linear-gradient(178deg,#1b1917,#141210);box-shadow:0 22px 46px rgba(0,0,0,.42)}
.tam-ask .tam-hinge{font-size:16.5px;line-height:1.6;color:var(--tx-dim);margin:0 0 20px;max-width:none}
.tam-ask .tam-line{margin-top:9px;padding-bottom:10px}
/* the number has to fit a 372px column, so it is smaller here and may wrap */
.tam-ask .tam-iban{font-size:clamp(17px,1.55vw,21px);white-space:normal;letter-spacing:.05em}
.tam-ask .tam-copy{margin-top:14px}
.tam-ask .tam-qr{margin-top:20px;padding-top:20px;gap:14px}
.tam-ask .tam-qr img{width:86px;height:86px;padding:5px}
.tam-ask .tam-qr figcaption{font-size:14.5px;max-width:none}


.tam-main .tam-prose{max-width:62ch}
.tam-main .tam-supporters{margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--edge)}
.tam-main .tam-coop{margin-top:clamp(26px,3vw,34px)}

/* one column on a narrow screen: the ask follows the text instead of sticking */
@media (max-width:900px){
  .tam-split{grid-template-columns:1fr}
  .tam-side{position:static;top:auto}
}

/* the homepage row is centred and generously spaced; in this column that
   wraps into two ragged rows, so it is tighter and left-aligned here */
.tam-main .plogos{justify-content:flex-start;gap:clamp(16px,2.2vw,30px);margin-top:16px}
.tam-main .plogos img{height:clamp(32px,3.2vw,42px);max-width:148px;padding:6px 10px}

/* Placement, so that stacking on a phone does not push the ask to the bottom:
   column one holds the pitch and then everything else, the ask spans both and
   sticks. On a narrow screen they fall in DOM order — pitch, ask, supporters. */
.tam-lead-block{grid-column:1;grid-row:1}
.tam-side{grid-column:2;grid-row:1 / span 2}
.tam-rest{grid-column:1;grid-row:2}
/* margin-top:0 — the row-gap above already separates this from the prose.
   The margin dates from when this block was full width with no grid gap
   over it; with both applied the same seam was paid for twice. */
.tam-rest .tam-supporters{margin-top:0;padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid var(--edge)}
.tam-rest .tam-coop{margin-top:clamp(26px,3vw,34px)}
.tam-rest .plogos{justify-content:flex-start;gap:clamp(16px,2.2vw,30px);margin-top:16px}
.tam-rest .plogos img{height:clamp(32px,3.2vw,42px);max-width:148px;padding:6px 10px}
@media (max-width:900px){
  .tam-lead-block,.tam-side,.tam-rest{grid-column:1;grid-row:auto}
}

/* ── Rólunk: a spine for a page doing five jobs ───────────────────────────
   A sticky index down the side, and the sections separated by a rule so the
   page reads as parts rather than one long scroll. */
.rol-spine{display:grid;grid-template-columns:186px minmax(0,1fr);
  gap:clamp(22px,3.6vw,54px);align-items:start}
.rol-nav{position:sticky;top:22px;display:grid;gap:2px}
.rol-nav a{font-family:var(--ui);font-size:13.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-mut);text-decoration:none;padding:9px 13px;
  border-left:2px solid var(--edge);border-radius:0 9px 9px 0;transition:color .18s,border-color .18s,background .18s}
.rol-nav a:hover{color:var(--tx-dim)}
.rol-nav a.on{color:var(--gold-lt);border-left-color:var(--gold);background:rgba(201,146,42,.07)}

.rol-sec{scroll-margin-top:26px}
.rol-sec + .rol-sec{margin-top:clamp(32px,4.4vw,58px);padding-top:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--edge)}
.rol-body .art-body{max-width:62ch}

/* Four across. Seven people never fill a row evenly, but three of four reads
   as intentional where one of three reads as a mistake. */
.rol-body .pcards{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
.rol-body .pcard-photo{aspect-ratio:1/1}

@media (max-width:900px){
  .rol-spine{grid-template-columns:1fr}
  .rol-nav{position:static;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
  .rol-nav a{border-left:0;border:1px solid var(--edge);border-radius:9px;padding:7px 13px}
  .rol-nav a.on{border-color:var(--gold)}
  .rol-body .pcards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ---- iPhone install guide (/ios-alkalmazas/) ---------------------------- */
.ios-lead{font-size:19px;line-height:1.65;color:var(--tx-dim);max-width:62ch;margin:18px 0 0}
.ios-lead strong{color:var(--gold-lt)}
/* Neutral card, not a second amber panel - the amber belongs to the CTA
   underneath, which is the step we actually want tapped. */
.ios-warn{margin:0 0 34px;padding:18px 20px 17px;border-radius:12px;
  font-size:15.5px;line-height:1.6;
  background:var(--card);border:1px solid var(--edge);color:var(--tx-dim)}
.ios-warn p{margin:0}
.ios-warn strong{color:var(--tx);font-weight:600}
.ios-warn-tag{display:inline-block;margin-bottom:9px;padding:3px 10px;border-radius:20px;
  background:var(--gold);color:#17120a;font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.ios-steps{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:26px}
.ios-steps li{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:center;
  padding:20px;border:1px solid var(--edge);border-radius:14px;background:var(--card)}
.ios-steps figure{margin:0}
.ios-steps svg{width:100%;height:auto;display:block;border-radius:12px}
.ios-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--gold);color:#0d0d0d;font-weight:700;font-size:13px;
  font-family:var(--ui);margin-bottom:10px}
.ios-steps h3{margin:0 0 8px;font-size:20px}
.ios-steps p{margin:0;color:var(--tx-dim);line-height:1.6}
.ios-steps em{color:var(--gold-lt);font-style:normal;font-weight:600}
.ios-artnote{margin:0 0 34px;font-size:13px;color:var(--tx-mut)}
.ios-done{margin:0 0 22px;padding:18px 20px;border-radius:12px;border:1px solid var(--edge);background:var(--card)}
.ios-done h3{margin:0 0 8px;font-size:19px}
.ios-done p{margin:0;color:var(--tx-dim);line-height:1.65}
.ios-done{border-color:#375537;background:rgba(124,196,124,.07)}
.ios-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:30px 0 10px}
.ios-cta span{font-size:14px;color:var(--tx-mut);max-width:36ch}
.ios-android{margin:0;font-size:14px}
.ios-android a{color:var(--gold-lt)}
@media(max-width:720px){
  .ios-steps li{grid-template-columns:1fr;gap:16px}
  .ios-steps figure{max-width:190px;margin:0 auto}
  .ios-lead{font-size:17px}
}

.ios-first{margin:0 0 34px;padding:18px 20px;border-radius:12px;
  border:1px solid #6b5324;background:rgba(201,146,42,.07)}
.ios-first span{color:var(--tx-dim);max-width:44ch}

/* Article tags — carried over from the WordPress article_tag taxonomy. Plain
   chips, not links: there is no tag archive to send anyone to. */
.art-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.art-tag{font:600 11px/1 var(--f-cond,inherit);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold,#c9922a);border:1px solid rgba(201,146,42,.38);border-radius:999px;padding:6px 11px}


/* ============================================================
   GALÉRIA
   The lead sits directly on top of the grid, with no sub-heading between them,
   so the standard section boundary read as a hole: 20px of collapsed .lead
   margin + 32px of .blog-head padding + 24px of .gp-section padding = 76px.
   Same three-part sum as .tam above, and the same fix.
   ============================================================ */
.gal-page .blog-head{padding-bottom:clamp(4px,.6vw,8px)}
.gal-page .blog-head .lead{margin-bottom:0}
/* equal specificity to `.blog-head + .gp-section` is not enough on its own -
   the page class makes it (0,3,0), so it wins wherever it sits in the file. */
.gal-page .blog-head + .gp-section{padding-top:clamp(16px,1.6vw,22px)}


/* ============================================================
   HOMEPAGE — "who do I play with?" band
   One row on a wide screen, stacked on a phone. The buttons keep their own
   column so the lead can run to a comfortable measure instead of stretching
   the full sheet width.
   ============================================================ */
.findsec{border-bottom:1px solid var(--edge)}
.find-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 46px;align-items:center}
.find-txt .gp-sechead{margin:6px 0 0}
.find-lead{margin:14px 0 0;max-width:54ch;font-size:18px;line-height:1.65;color:var(--tx-dim)}
.find-acts{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:230px}
.find-acts .btn{text-align:center}
.find-note{margin:4px 0 0;font-size:13.5px;color:var(--tx-mut);text-align:center}
@media(max-width:820px){
  .find-band{grid-template-columns:1fr;gap:20px}
  .find-acts{min-width:0}
  .find-lead{font-size:17px}
}


/* ============================================================
   HOMEPAGE — the four game categories
   Four links, not four cards: everything on a tile is part of one target, so
   the whole tile is the hit area and nothing inside it competes for the click.
   No counts on purpose — they would need maintaining, and the old heading
   ("Kilenc rendszer") had already gone stale.
   ============================================================ */
.gtiles{
  display:grid;
  /* auto-fit rather than a fixed 4: at 900px this becomes 2x2 by itself, and
     the tiles fill the row instead of leaving a gap at the end */
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(12px,1.5vw,18px);
}
.gtile{
  position:relative;display:block;overflow:hidden;border-radius:15px;
  border:1px solid var(--edge);text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s;
}
.gtile:hover{border-color:var(--gold-dk);transform:translateY(-3px)}
.gtile:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.gtile img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  /* the photographs are busy, so they are dimmed to let the label read; the
     hover lift brings them back up rather than adding another effect */
  filter:brightness(.44) saturate(.85);
  transition:filter .28s,transform .4s;
}
.gtile:hover img{filter:brightness(.58) saturate(1);transform:scale(1.04)}
.gtile-on{
  position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:4px;
  padding:16px 17px 15px;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.86) 48%);
}
.gtile-n{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.05}
.gtile-h{
  font-family:var(--ui);font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-dim);
}
@media (prefers-reduced-motion:reduce){
  .gtile,.gtile img{transition:none}
  .gtile:hover{transform:none}
  .gtile:hover img{transform:none}
}

/* Three across leaves roughly 400px per tile, and the Discord one carries a
   presence line and an avatar row above its lead — side by side that squeezes
   the text to a few words per line. So the tile stacks while the grid is
   multi-column, and keeps the horizontal layout once it is one per row. */
@media(min-width:761px){
  .comm-tile{flex-direction:column;align-items:flex-start;gap:clamp(14px,1.4vw,20px);
    padding-right:clamp(22px,2.4vw,34px)}
  .comm-mark{align-self:flex-start;width:clamp(60px,4.6vw,76px)}
  /* the arrow moves out of the text's way now that nothing sits beside it */
  .comm-tile::after{top:auto;bottom:clamp(18px,1.8vw,26px);transform:none}
  .comm-ln,.comm-note{max-width:40ch}
}
.comm-mark--ig svg{width:82%}

/* /hazirend/ — the documents the club uploads itself. One card per file; the
   extension badge is the only thing that says what will land in the visitor's
   downloads folder, so it is the loudest part of the card. */
.art-body ul.doclist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.art-body ul.doclist li{margin:0}
.doc-card{display:flex;align-items:center;gap:15px;padding:15px 17px;border:1px solid var(--edge);
  border-radius:14px;background:var(--card);text-decoration:none;color:inherit;height:100%;
  box-sizing:border-box;transition:border-color .18s ease,transform .18s ease}
.doc-card:hover{border-color:var(--gold-dk);transform:translateY(-2px);text-decoration:none}
.doc-ext{flex:none;min-width:52px;text-align:center;padding:8px 6px;border-radius:9px;
  border:1px solid var(--edge);background:rgba(0,0,0,.18);font-family:var(--ui);font-size:11px;
  font-weight:700;letter-spacing:.08em;color:var(--gold-lt)}
.doc-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.doc-t{font-family:var(--ui);font-weight:600;font-size:16px;line-height:1.3;color:var(--tx)}
.doc-n{font-size:14px;line-height:1.45;color:var(--tx-mut)}
.doc-m{font-family:var(--ui);font-size:12px;letter-spacing:.04em;color:var(--tx-mut)}
.doc-dl{flex:none;font-size:19px;color:var(--tx-mut)}
.doc-card:hover .doc-dl{color:var(--gold-lt)}