/*! TÄHTI — data tables, comments and footer.
    Loaded after tahti.css. Everything here is a deliberate override. */

/* ==========================================================================
   1. FACT TABLES  (actor quick facts, title details)
   Full width of the content column, card-like, emoji-led, scannable.
   ========================================================================== */
.facts,
.fp{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 1px 2px rgba(14,14,18,.04), 0 10px 30px rgba(14,14,18,.07);
  margin:0 0 30px;
  width:100%;
}
.facts h3,
.fp h4{
  display:flex;align-items:center;gap:10px;margin:0;
  padding:16px 20px;
  font-size:15.5px;font-weight:900;letter-spacing:-.015em;text-transform:none;
  color:#fff;
  background:linear-gradient(100deg,#15151F 0%,#3A0F2A 55%,#6B0F35 100%);
  border-bottom:0;
}
.facts h3 svg,.fp h4 svg{width:16px;height:16px;stroke:var(--hot);fill:none;stroke-width:2.4}

.facts dl,
.fp dl{
  display:grid;
  grid-template-columns:minmax(190px,auto) minmax(0,1fr);
  margin:0;
}
.facts dt,.facts dd,
.fp dt,.fp dd{
  margin:0;padding:13px 20px;min-width:0;
  border-bottom:1px solid var(--line-soft);
}
.facts dt,.fp dt{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);
  background:linear-gradient(90deg,#FBFAFD,#FDFCFE);
  white-space:nowrap;
}
.facts dt .fx,.fp dt .fx{
  font-size:16px;line-height:1;flex:none;
  filter:saturate(1.15);
}
.facts dd,.fp dd{
  font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.facts dd a,.fp dd a{color:var(--link);font-weight:800}
.facts dd a:hover,.fp dd a:hover{text-decoration:underline}
.facts dl > :nth-last-child(-n+2),
.fp dl > :nth-last-child(-n+2){border-bottom:0}

/* zebra: tint every other pair so the eye tracks across */
.facts dl > :nth-child(4n+3),
.facts dl > :nth-child(4n+4),
.fp dl > :nth-child(4n+3),
.fp dl > :nth-child(4n+4){background-color:var(--card-2)}
.facts dl > :nth-child(4n+3),
.fp dl > :nth-child(4n+3){background-image:none}

/* highlight the money and award rows — they are what readers come for */
.facts dd.tahti-f-net_worth,
.fp dd.tahti-f-net_worth{
  font-size:17px;font-weight:900;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.facts dd.tahti-f-awards_won,.fp dd.tahti-f-awards_won,
.facts dd.tahti-f-age,.fp dd.tahti-f-age{font-weight:900}

.facts-sec{
  grid-column:1/-1;
  margin:0;padding:14px 20px 8px;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
  background:var(--card);border-bottom:1px solid var(--line-soft);
}

@media(max-width:860px){
  .facts dl,.fp dl{grid-template-columns:minmax(0,1fr)}
  .facts dt,.fp dt{border-bottom:0;padding:12px 18px 3px;background:var(--card)}
  .facts dd,.fp dd{padding:0 18px 13px}
  .facts dl > :nth-child(4n+3),.facts dl > :nth-child(4n+4),
  .fp dl > :nth-child(4n+3),.fp dl > :nth-child(4n+4){background-color:transparent}
}

/* ==========================================================================
   2. DATA TABLES  (filmography, cast, awards, chart)
   ========================================================================== */
.tw{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 2px rgba(14,14,18,.04), 0 10px 30px rgba(14,14,18,.07);
  margin:0 0 30px;
}
.tw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.dtable,
.tw table,
.tahti-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:15px;
  background:var(--card);
}
.tw table{min-width:600px}

table.dtable thead th,
.tw table thead th,
.tahti-table thead th{
  text-align:left;white-space:nowrap;
  padding:14px 18px;
  font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  background:linear-gradient(100deg,#15151F 0%,#3A0F2A 55%,#6B0F35 100%);
  border:0;
}
table.dtable tbody td,
.tw table tbody td,
.tahti-table tbody td{
  padding:14px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
}
table.dtable tbody tr:last-child td,
.tw table tbody tr:last-child td,
.tahti-table tbody tr:last-child td{border-bottom:0}
table.dtable tbody tr:nth-child(even),
.tw table tbody tr:nth-child(even),
.tahti-table tbody tr:nth-child(even){background:var(--card-2)}
table.dtable tbody tr,
.tw table tbody tr,
.tahti-table tbody tr{transition:background .16s}
table.dtable tbody tr:hover,
.tw table tbody tr:hover,
.tahti-table tbody tr:hover{background:rgba(var(--brand-rgb),.045)}

/* first column reads as the anchor */
.tw table tbody td:first-child,
.tahti-table tbody td:first-child{
  font-weight:900;color:var(--brand);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.tw table tbody td a,.tahti-table tbody td a{font-weight:800;color:var(--ink)}
.tw table tbody td a:hover,.tahti-table tbody td a:hover{color:var(--brand)}

/* pills used inside tables */
.t-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
}
.t-pill.sarja{color:var(--c-sarjat);border-color:rgba(11,111,232,.28);background:rgba(11,111,232,.07)}
.t-pill.elokuva{color:var(--c-elokuvat);border-color:rgba(242,101,34,.28);background:rgba(242,101,34,.08)}
.t-pill.dok{color:var(--c-musiikki);border-color:rgba(0,164,106,.28);background:rgba(0,164,106,.08)}
.t-pill.win{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-lt));border-color:transparent}

.tw-hint{
  display:none;font-size:11.5px;font-weight:700;color:var(--muted);
  margin:-22px 0 26px;padding-left:4px;
}
@media(max-width:760px){.tw-hint{display:block}}

/* ==========================================================================
   3. SECTION HEADINGS inside profile pages
   ========================================================================== */
.tahti-sec-h{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
}
.tahti-sec-h h2{
  font-size:21px;font-weight:900;letter-spacing:-.025em;margin:0;
  display:flex;align-items:center;gap:10px;
}
.tahti-sec-h h2 .fx{font-size:20px;line-height:1}
.tahti-sec-h i{
  flex:1;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),transparent);
}

/* ==========================================================================
   4. COMMENTS — branded, not default WordPress
   ========================================================================== */
.cmts{
  border:0;border-radius:22px;padding:0;overflow:hidden;
  background:var(--card);
  box-shadow:0 1px 2px rgba(14,14,18,.04), 0 12px 36px rgba(14,14,18,.09);
  margin:36px 0 34px;
}
.cmts > h3{
  display:flex;align-items:center;gap:11px;margin:0;
  padding:20px 26px 6px;
  font-size:20px;font-weight:900;letter-spacing:-.025em;color:var(--ink);
}
.cmts > h3::before{content:"\1F4AC";font-size:20px;line-height:1}
.cmts > p.sub{
  margin:0;padding:0 26px 20px;
  font-size:13.5px;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line-soft);
}
.cmts .comment-list{padding:6px 26px 0}
.cmts .cmt-row{padding:16px 26px}

.comment-list li{border-top:1px solid var(--line-soft);padding:18px 0}
.comment-list > li:first-child{border-top:0}
.comment-list .children{border-left:3px solid rgba(var(--brand-rgb),.18);padding-left:20px;margin-top:10px}
.comment-author .fn{font-weight:900;font-style:normal;color:var(--ink);font-size:14.5px}
.comment-meta{font-size:12px;color:var(--muted);font-weight:700}
.comment-content{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin-top:6px}
.comment-body .avatar{border-radius:50%}
.comment-reply-link{
  display:inline-block;margin-top:8px;font-size:12px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand);
  padding:6px 14px;border-radius:999px;background:rgba(var(--brand-rgb),.08);
}
.comment-reply-link:hover{background:rgba(var(--brand-rgb),.18)}

/* the form */
/* One card, not two glued together. The form used to paint itself a hard-coded
   #FBFAFD-to-#F6F4FA wash, so the bottom half of the discussion box arrived in
   a different colour from the top half with a seam across the middle -- and,
   being a literal pair of hex values, it was the one panel in the theme that
   could not follow the colour scheme. It sits on the card now, and the hairline
   above it does the dividing, exactly as the hairline between two comments does. */
.comment-respond{
  margin:0;border:0;border-radius:0;padding:24px 26px 28px;box-shadow:none;
  background:transparent;
  border-top:1px solid var(--line-soft);
}
.comment-reply-title{
  display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:900;letter-spacing:-.02em;margin:0 0 4px;
}
.comment-reply-title::before{content:"\270D\FE0F";font-size:17px;line-height:1}
.comment-notes,.comment-form-cookies-consent label,.logged-in-as{
  font-size:12.5px;color:var(--muted);font-weight:600;
}
.comment-notes{margin:0 0 18px}
/* The form is a three-column grid so that a visitor's name, e-mail and website
   stand in one row. A signed-in commenter has none of those fields -- their one
   line of "commenting as ..." was landing in the first track of three and
   wrapping mid-sentence inside 184 of the 580 pixels it had. Both notes and the
   sign-in line are sentences, and a sentence takes the full row. */
.comment-notes,.logged-in-as{grid-column:1/-1}
.comment-form{display:grid;gap:14px}
.comment-form p{margin:0}
.comment-form-comment{grid-column:1/-1}
/* The visitor's row: three fields side by side above the comment box, each in
   one track of the three. They were core's markup until the theme took the
   strings over, and with the markup came the job of styling them. */
.comment-form-author,.comment-form-email,.comment-form-url{grid-column:auto}
@media(max-width:699px){
  .comment-form-author,.comment-form-email,.comment-form-url{grid-column:1/-1}
}
/* The asterisk that marks a field as required, and the sentence that explains
   what the asterisk means. */
.required{color:var(--brand-ink,var(--brand));font-weight:900}
.required-field-message{white-space:nowrap}
@media(min-width:700px){
  .comment-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .comment-form-cookies-consent,.form-submit,.comment-notes{grid-column:1/-1}
}
.comment-form label{
  display:block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
/* font-family and color were both left to the browser. A bare <textarea>
   defaults to monospace, so a reader's comment was typed in a different
   typeface from every other word on the page; and the default ink is black,
   which on the dark scheme's near-black field meant typing into the dark. */
.comment-form textarea,
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url]{
  width:100%;border:1.5px solid var(--line);border-radius:14px;
  padding:13px 16px;font-family:inherit;font-size:15px;line-height:1.55;
  color:var(--ink);background:var(--card);outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.comment-form textarea::placeholder,.comment-form input::placeholder{color:var(--muted);opacity:1}
.comment-form textarea{min-height:130px;resize:vertical;border-radius:16px}
.comment-form textarea:focus,.comment-form input:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.10);
}
.comment-form-cookies-consent{display:flex;align-items:center;gap:9px}
.comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
.comment-form input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand)}
.form-submit{margin:0}
/* White on this gradient measured 4.14:1 at the label -- the pale end of
   --brand to --brand-lt is too light to carry white. Running the same brand
   the other way, toward --brand-dk, keeps the depth and clears 4.92:1 at its
   lightest point. */
.comment-form .submit{
  background:linear-gradient(100deg,var(--brand),var(--brand-dk));color:#fff;border:0;
  border-radius:999px;padding:14px 30px;
  font-size:13.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 6px 20px rgba(var(--brand-rgb),.3);
  transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s;
}
.comment-form .submit:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(var(--brand-rgb),.4)}
.comment-form .submit:active{transform:translateY(0)}
/* The button paints itself from --brand, and after dark the brand is a pale
   pink -- it is the colour of a LINK on a dark ground, not of a filled chip.
   White on it measured 1.81:1 across the gradient. The fill is right; the ink
   was not. #3B0011 clears 5.17:1 at the tightest end of the same gradient. */
[data-theme="dark"] .comment-form .submit{
  background:linear-gradient(100deg,var(--brand),var(--brand-lt));color:#3B0011}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .comment-form .submit{
    background:linear-gradient(100deg,var(--brand),var(--brand-lt));color:#3B0011}
}

/* ==========================================================================
   5. FOOTER — proper columns
   ========================================================================== */
.footer{padding:52px 0 30px}
.foot-top{
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;
  padding-bottom:34px;border-bottom:1px solid #26262F;
}
.foot-brand .logo b{color:#fff}
.foot-brand p{font-size:13.5px;line-height:1.65;margin-top:14px;max-width:36ch;color:#9C9CAA}
.foot-col h3{
  font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin:0 0 14px;padding-bottom:10px;position:relative;
}
.foot-col h3::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis));
}
.foot-col ul{margin:0;padding:0;list-style:none}
.foot-col li{margin-bottom:9px;font-size:13.5px}
.foot-col a{color:#9C9CAA;transition:color .18s,padding-left .18s}
.foot-col a:hover{color:#fff;padding-left:4px}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;
  padding-top:24px;font-size:12.5px;color:#7C8398;
}
.foot-bot .soc{display:flex;gap:10px;margin-left:auto}
.foot-bot .soc a{
  width:36px;height:36px;border:1px solid #2E2E38;border-radius:50%;
  display:grid;place-items:center;color:#9C9CAA;
  transition:background .2s,border-color .2s,color .2s,transform .2s cubic-bezier(.22,.9,.3,1);
}
.foot-bot .soc a:hover{
  transform:translateY(-2px);color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--brand),var(--c-julkkis));
}
.foot-bot .soc svg{width:16px;height:16px;fill:currentColor}
@media(max-width:900px){.foot-top{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}.foot-bot .soc{margin-left:0}}

/* ==========================================================================
   6. LANGUAGE SWITCHER (utility bar)
   ========================================================================== */
.tahti-lang{display:flex;align-items:center;gap:2px}
.tahti-lang a{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;
  color:#A9A9B6;transition:background .18s,color .18s;
}
.tahti-lang a:hover{background:rgba(255,255,255,.10);color:#fff}
.tahti-lang a[aria-current]{background:var(--brand);color:#fff}
.tahti-lang .flag{font-size:13px;line-height:1}

/* ==========================================================================
   7. PROFILE LAYOUT — portrait left, everything else in a wide column
   ========================================================================== */
.profile{
  display:grid;grid-template-columns:320px minmax(0,1fr);gap:36px;
  padding:26px 0 30px;align-items:start;
}
.profile .pic{position:relative;min-width:0}
.profile .pic .ph{border-radius:20px;box-shadow:0 10px 34px rgba(14,14,18,.16)}
.profile .p-main{min-width:0}
.profile .p-main > .hl-xxl{margin:6px 0 8px}
.profile .p-main .lead-in{margin-bottom:4px}
.profile .p-main .tags{margin:18px 0 14px}
.profile .p-main .share{margin-bottom:24px}
@media(max-width:900px){
  .profile{grid-template-columns:minmax(0,1fr);gap:22px}
  .profile .pic{max-width:260px}
}

/* facts flowing in TWO column pairs on wide screens, so the card fills the
   space instead of running as one thin list down the page */
@media(min-width:1000px){
  .facts--split dl{
    grid-template-columns:minmax(150px,auto) minmax(0,1fr) minmax(150px,auto) minmax(0,1fr);
  }
  .facts--split dl > *:nth-child(8n+5),
  .facts--split dl > *:nth-child(8n+6),
  .facts--split dl > *:nth-child(8n+7),
  .facts--split dl > *:nth-child(8n+8){background-color:var(--card-2)}
  .facts--split dt{border-right:0}
  .facts--split dd + dt{border-left:1px solid var(--line-soft)}
  .facts--split .facts-sec{grid-column:1/-1}
}

/* the stat tiles above the table */
.profile .stats{margin:18px 0 4px}
.profile .stat{
  border-radius:16px;padding:15px 18px;
  background:linear-gradient(150deg,#FFFFFF,#FBF8FD);
  border-color:var(--line);
}
.profile .stat b{font-size:28px}

/* ==========================================================================
   8. LAYOUT GUARD
   The site chrome is structural, not decorative. A plugin, a page builder or a
   leftover stylesheet that puts the page into a flex or grid context would
   otherwise collapse the utility bar, masthead and nav into one shrink-wrapped
   row. These few declarations pin the skeleton so that cannot happen.

   WordPress also prints template state onto the body element: a search results
   page is <body class="search ...">, an author archive <body class="author">,
   a tag archive <body class="tag">. Any theme class sharing one of those names
   is therefore a body selector too. Every such rule in this theme is scoped
   with :not(body); this block is the second line of defence, and it resets
   decoration as well as layout, because a stray border-radius or border on the
   body is every bit as visible as a stray flex.
   ========================================================================== */
html{display:block !important}
body{display:block !important;width:auto !important;max-width:none !important;
  float:none !important;position:static !important;
  border:0 !important;border-radius:0 !important;padding:0 !important;
  box-shadow:none !important;gap:normal !important;
  grid-template-columns:none !important;grid-template-rows:none !important}
/*
 * display: is deliberately NOT reset here any more.
 *
 * body{display:block !important} above is what actually stops a plugin from
 * shrink-wrapping the chrome: once the body is back in normal flow, each of
 * these is a block-level child whatever it declares for itself. Repeating
 * display:block on the children added nothing against a hostile stylesheet
 * and took something real away from this one — #tahti-content is the front
 * page's own two-column grid, and a !important block collapsed it every
 * time. The rail dropped under the stories, the lead column widened to the
 * full measure, and a 16:9 hero became two thirds of the first screen. The
 * article kept its rail only because there the id sits on an outer <main>
 * and the grid is a child, out of this selector's reach.
 *
 * What remains is the part that was doing the work: undoing flex and float
 * sizing imposed from outside, without dictating what these elements are.
 */
body > .util,
body > .masthead,
body > .mainnav,
body > .ticker,
body > .crumb,
body > main,
body > .footer,
body > #tahti-content{
  width:auto !important;
  min-width:0 !important;
  flex:none !important;
  float:none !important;
}

/*
 * max-width used to be in that list, and it was the one declaration that did
 * damage rather than repair. The block above stops a stray table shrink-
 * wrapping the page, and width:auto is what undoes shrink-wrapping. But every
 * article style puts its own container class on the same element —
 * <main id="tahti-content" class="hy-wrap"> — and an ID outranks a class, so
 * the theme's own page width was erased on every article while the front page
 * kept its own. Reset on the element, without !important and without the id.
 */
body > main{max-width:none}

body > .mainnav{position:sticky !important}
.util .wrap{display:flex !important}
.util,.masthead,.mainnav,.ticker,.footer{box-sizing:border-box}
.wrap{max-width:var(--max);margin-left:auto;margin-right:auto;width:100%}

/* A stray unclosed table in third-party output turns the page into table
   layout and shrink-wraps every block. Refuse to participate. */
body > table{display:block !important;width:100% !important}