/*
Theme Name: TBS Konjo
Theme URI: https://tanaberushipyard.com/
Author: Tana Beru Shipyard Build Desk
Description: Bespoke tailored theme for tanaberushipyard.com. Built after the content, around it: the sand-and-shell palette of the Bonto Bahari boatbuilding shoreline, a stage-numbered contents rail for long build pages, and a curated yard navigation. Self-hosted type, no external asset hosts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: tbs-konjo
*/

/* ============================================================
   TYPE — self-hosted, no external font host
   ============================================================ */
@font-face{font-family:'TBSK Display';src:url('assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap;}
@font-face{font-family:'TBSK Text';src:url('assets/fonts/literata-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'TBSK UI';src:url('assets/fonts/figtree-400-500.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap;}

/* ============================================================
   TOKENS — Tana Beru sand & shell. Domain-specific palette.
   ============================================================ */
:root{
  --sand:#F2EBDD;      /* volcanic beach sand, page ground */
  --sand-2:#E7DECB;    /* deeper sand, table heads / chips */
  --paper:#FCF9F3;     /* card paper */
  --ink:#1E2519;       /* timber shadow, near-black olive */
  --ink-2:#4A5340;     /* secondary text */
  --konjo:#5B6A44;     /* lontar/moss green — primary */
  --konjo-d:#39442B;   /* deep moss — dark bands, CTA */
  --bitti:#8A5426;     /* bitti / ironwood brown — accent, links */
  --dowel:#C99A5B;     /* pale dowel timber — rules, highlights */
  --sea:#14565B;       /* Bira sea teal — secondary accent */
  --rule:#DCD1BC;
  --wrap:1180px;
  --read:74ch;
  --r:12px;
  --shadow:0 1px 0 rgba(30,37,25,.06),0 10px 28px -22px rgba(30,37,25,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.tbsk{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:'TBSK UI',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;font-weight:400;
  overflow-x:hidden;
}
/* Base element rules are wrapped in :where() so they carry (almost) no
   specificity. Every region rule below — nav, rail, sheet, footer, cards —
   is a single class and must be able to win without !important. */
:where(body.tbsk) img{max-width:100%;height:auto}
:where(body.tbsk) a{color:var(--bitti);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
:where(body.tbsk) a:where(:hover){color:var(--konjo-d)}
:where(body.tbsk) :where(h1,h2,h3,h4){
  font-family:'TBSK Display','TBSK Text',Georgia,'Times New Roman',serif;
  font-weight:600;line-height:1.18;letter-spacing:-.005em;color:var(--ink);
}
.tbsk-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.tbsk-skip{position:absolute;left:-9999px}
.tbsk-skip:focus{left:12px;top:12px;z-index:999;background:var(--paper);padding:.6em 1em;border-radius:8px}

/* ============================================================
   YARD RAIL — the working-shoreline facts strip
   ============================================================ */
.tbsk-rail{background:var(--konjo-d);color:#EFEAD9;font-size:.78rem;letter-spacing:.02em}
.tbsk-rail .tbsk-wrap{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:center;padding-top:.42rem;padding-bottom:.42rem}
.tbsk-rail b{font-weight:500;color:#fff}
.tbsk-rail span{opacity:.82}
.tbsk-rail a{color:#F0E3CC;text-decoration:none;border-bottom:1px solid rgba(240,227,204,.45)}
.tbsk-rail .tbsk-rail-cta{margin-left:auto}
@media(max-width:900px){.tbsk-rail .tbsk-hide-s{display:none}}

/* ============================================================
   MASTHEAD — sticky, above everything (z-index gate >= 900)
   ============================================================ */
.tbsk-mast{position:sticky;top:0;z-index:950;background:rgba(242,235,221,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--rule)}
.tbsk-mast .tbsk-wrap{display:flex;align-items:center;gap:1.1rem;padding-top:.55rem;padding-bottom:.55rem}
.tbsk-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.tbsk-brand:hover{color:inherit}
.tbsk-keelmark{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--konjo-d);position:relative;overflow:hidden}
.tbsk-keelmark::after{content:"";position:absolute;left:6px;right:6px;top:19px;height:9px;border-radius:0 0 14px 14px;background:var(--dowel)}
.tbsk-brand-txt{display:block;line-height:1.02}
.tbsk-brand-txt .t1{display:block;font-family:'TBSK Display',serif;font-weight:600;font-size:1.02rem;letter-spacing:.02em;color:var(--ink)}
.tbsk-brand-txt .t2{display:block;font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--konjo);margin-top:.18em}

.tbsk-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.tbsk-nav a{font-size:.86rem;color:var(--ink-2);text-decoration:none;padding:.45rem .5rem;border-radius:8px;white-space:nowrap}
.tbsk-nav a:hover{background:var(--sand-2);color:var(--ink)}
.tbsk-nav a[aria-current="page"]{color:var(--konjo-d);box-shadow:inset 0 -2px 0 var(--dowel)}
.tbsk-cta{background:var(--konjo-d);color:#fff!important;padding:.5rem .9rem!important;border-radius:9px;font-weight:500;text-decoration:none}
.tbsk-cta:hover{background:var(--bitti)}

.tbsk-navt{position:absolute;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
.tbsk-burger{display:none;margin-left:auto;align-items:center;gap:.45rem;cursor:pointer;font-size:.82rem;color:var(--ink);border:1px solid var(--rule);background:var(--paper);border-radius:9px;padding:.42rem .7rem}
.tbsk-burger i{display:block;width:16px;height:2px;background:var(--ink);position:relative}
.tbsk-burger i::before,.tbsk-burger i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink)}
.tbsk-burger i::before{top:-5px}.tbsk-burger i::after{top:5px}
.tbsk-sheet{display:none}

@media(max-width:1080px){
  .tbsk-nav{display:none}
  .tbsk-burger{display:flex}
  .tbsk-sheet{display:block;position:fixed;inset:0;z-index:960;background:var(--konjo-d);color:#F2EBDD;
    padding:5rem 1.4rem 2.4rem;overflow-y:auto;transform:translateY(-101%);transition:transform .22s ease;visibility:hidden}
  .tbsk-navt:checked ~ .tbsk-sheet{transform:none;visibility:visible}
  .tbsk-sheet h2{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dowel);margin:1.5rem 0 .5rem;font-family:'TBSK UI',sans-serif;font-weight:500}
  .tbsk-sheet ul{list-style:none;margin:0;padding:0}
  .tbsk-sheet li{border-bottom:1px solid rgba(242,235,221,.14)}
  .tbsk-sheet a{display:block;padding:.72rem 0;color:#F2EBDD;text-decoration:none;font-size:1.02rem}
  .tbsk-sheet .tbsk-close{position:absolute;top:1.1rem;right:1.2rem;border:1px solid rgba(242,235,221,.4);border-radius:9px;padding:.4rem .8rem;font-size:.82rem;cursor:pointer}
  .tbsk-sheet .tbsk-sheet-cta{display:inline-block;margin-top:1.6rem;background:var(--dowel);color:var(--ink)!important;padding:.7rem 1.2rem;border-radius:10px;font-weight:500}
}

/* ============================================================
   DOWEL RULE — edge-fastened planking, in CSS
   ============================================================ */
.tbsk-keel{height:8px;margin:1.5rem 0;border-top:2px solid var(--bitti);
  background-image:radial-gradient(circle at 5px 4px,var(--dowel) 1.7px,transparent 2px);
  background-size:22px 8px;background-repeat:repeat-x;opacity:.85}

/* ============================================================
   HERO BAND — archives, journal, 404
   ============================================================ */
.tbsk-hero{position:relative;background:var(--konjo-d);overflow:hidden}
.tbsk-hero img{width:100%;height:clamp(190px,32vw,330px);object-fit:cover;display:block;opacity:.62}
.tbsk-hero-in{position:absolute;inset:auto 0 0 0;padding:1.6rem 0 1.4rem;
  background:linear-gradient(to top,rgba(30,37,25,.86),rgba(30,37,25,0))}
.tbsk-hero-in h1{color:#FBF7EE;margin:0;font-size:clamp(1.6rem,4.2vw,2.5rem)}
.tbsk-hero-in p{color:#E4DCC8;margin:.5rem 0 0;max-width:62ch;font-size:.96rem}
.tbsk-hero figcaption{font-size:.7rem;color:var(--ink-2);opacity:.7;padding:.35rem 0 0}

/* ============================================================
   ARTICLE
   ============================================================ */
.tbsk-main{padding:2.1rem 0 3rem}
.tbsk-crumb{font-size:.78rem;color:var(--ink-2);margin:0 0 1.1rem}
.tbsk-crumb a{color:var(--ink-2);text-decoration:none}
.tbsk-crumb a:hover{color:var(--bitti);text-decoration:underline}
.tbsk-crumb span{opacity:.5;padding:0 .35em}

.tbsk-kicker{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--konjo);font-weight:500;margin:0 0 .6rem}
.tbsk-head h1{margin:0;font-size:clamp(1.75rem,4vw,2.7rem);max-width:22ch}
.tbsk-byline{font-size:.84rem;color:var(--ink-2);margin:.9rem 0 0}
.tbsk-byline time{color:var(--ink-2)}
.tbsk-figure{margin:1.7rem 0 0}
.tbsk-figure img{width:100%;aspect-ratio:21/9;max-height:360px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
.tbsk-figure figcaption{font-size:.74rem;color:var(--ink-2);opacity:.75;margin-top:.5rem}

.tbsk-layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:2.6rem;align-items:start;margin-top:1.9rem}
@media(max-width:1000px){.tbsk-layout{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* --- contents rail, numbered like build stages --- */
.tbsk-side{position:sticky;top:5.2rem}
.tbsk-rail-toc{font-size:.86rem}
.tbsk-rail-toc h2{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--konjo);
  font-family:'TBSK UI',sans-serif;font-weight:500;margin:0 0 .7rem}
.tbsk-rail-toc ol{list-style:none;margin:0;padding:0;counter-reset:tbsk}
.tbsk-rail-toc li{counter-increment:tbsk;position:relative;padding:.34rem 0 .34rem 2rem;border-left:1px solid var(--rule);margin-left:.55rem}
.tbsk-rail-toc li::before{content:counter(tbsk,decimal-leading-zero);position:absolute;left:-.62rem;top:.45rem;
  font-size:.6rem;font-weight:500;color:var(--konjo-d);background:var(--sand);border:1px solid var(--rule);
  border-radius:50%;width:1.25rem;height:1.25rem;display:grid;place-items:center;letter-spacing:0}
.tbsk-rail-toc a{color:var(--ink-2);text-decoration:none;line-height:1.4;display:block}
.tbsk-rail-toc a:hover{color:var(--bitti);text-decoration:underline}
@media(max-width:1000px){
  /* Below the two-column breakpoint the side column is dissolved so the
     contents rail can sit ABOVE the article and the enquiry card below it. */
  .tbsk-layout{display:flex;flex-direction:column}
  .tbsk-side{position:static;display:contents}
  .tbsk-rail-toc{order:-1;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:.4rem}
  .tbsk-card{order:1}
}

.tbsk-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:1.1rem 1.2rem;margin-top:1.5rem;font-size:.88rem}
.tbsk-card h2{font-size:.95rem;margin:0 0 .5rem;font-family:'TBSK Display',serif}
.tbsk-card p{margin:.35rem 0}
.tbsk-card .tbsk-wa{display:inline-block;margin-top:.6rem;background:var(--konjo-d);color:#fff!important;
  text-decoration:none;padding:.55rem .95rem;border-radius:9px;font-weight:500;font-size:.86rem}
.tbsk-card .tbsk-wa:hover{background:var(--bitti)}
.tbsk-card .tbsk-fine{font-size:.76rem;color:var(--ink-2);opacity:.85;margin-top:.7rem}

/* --- content typography (also overrides the fleet polish layer, by specificity) --- */
body.tbsk .tbsk-content{font-family:'TBSK UI',sans-serif;max-width:var(--read)}
body.tbsk .tbsk-content > *:first-child{margin-top:0}
body.tbsk .tbsk-content p{margin:0 0 1.15em}
body.tbsk .tbsk-content h2{font-size:clamp(1.28rem,2.5vw,1.62rem);margin:2.3em 0 .6em;scroll-margin-top:5.5rem}
body.tbsk .tbsk-content h2::after{content:"";display:block;width:54px;height:2px;background:var(--dowel);margin-top:.5rem}
body.tbsk .tbsk-content h3{font-size:1.09rem;margin:1.9em 0 .45em;color:var(--konjo-d);scroll-margin-top:5.5rem}
body.tbsk .tbsk-content ul,body.tbsk .tbsk-content ol{margin:0 0 1.2em;padding-left:1.3em}
body.tbsk .tbsk-content li{margin:.35em 0}
body.tbsk .tbsk-content a{color:var(--sea)}
body.tbsk .tbsk-content a:hover{color:var(--bitti)}
body.tbsk .tbsk-content blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.15em;border-left:3px solid var(--konjo);
  font-family:'TBSK Text',Georgia,serif;font-size:1.04em;color:var(--ink-2)}
body.tbsk .tbsk-content .tbs-lede{font-family:'TBSK UI',sans-serif;font-weight:400;font-size:1.1em;line-height:1.6;
  border-left:3px solid var(--bitti);color:var(--ink-2);padding:.15em 0 .15em 1.05em;margin:0 0 1.7em}
body.tbsk .tbsk-content table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.92em;display:block;overflow-x:auto;
  border:1px solid var(--rule);border-radius:10px}
body.tbsk .tbsk-content table th,body.tbsk .tbsk-content table td{border:1px solid var(--rule);padding:.62em .85em;text-align:left;vertical-align:top}
body.tbsk .tbsk-content table th{background:var(--sand-2);font-weight:500;color:var(--ink);font-size:.94em}
body.tbsk .tbsk-content table tr:nth-child(even) td{background:rgba(255,255,255,.45)}
body.tbsk .tbsk-content img{border-radius:10px}
body.tbsk .tbsk-content figcaption{font-size:.76em;color:var(--ink-2);opacity:.8}
body.tbsk .tbsk-content .tbs-faq{margin-top:2.4em;border-top:1px solid var(--rule);padding-top:.4em}
body.tbsk .tbsk-content .tbs-faq h3{font-size:1.02rem;color:var(--ink);margin-top:1.5em}
body.tbsk .tbsk-content .tbs-cta{margin:2.4em 0 0;padding:1.15em 1.3em;background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--konjo);border-radius:var(--r)}
body.tbsk .tbsk-content .tbs-cta p{margin:.3em 0}

/* ============================================================
   CARD GRID — journal & category archives
   ============================================================ */
.tbsk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1.5rem;margin:1.9rem 0 0;list-style:none;padding:0}
.tbsk-item{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tbsk-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tbsk-item .tbsk-item-in{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.tbsk-chip{align-self:flex-start;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--konjo-d);
  background:var(--sand-2);border-radius:99px;padding:.24rem .62rem;text-decoration:none}
.tbsk-item h2{font-size:1.06rem;margin:0;line-height:1.28}
.tbsk-item h2 a{color:var(--ink);text-decoration:none}
.tbsk-item h2 a:hover{color:var(--bitti)}
.tbsk-item p{font-size:.87rem;color:var(--ink-2);margin:0}
.tbsk-item .tbsk-more{margin-top:auto;padding-top:.6rem;font-size:.8rem;color:var(--bitti);text-decoration:none}
.tbsk-pager{display:flex;gap:.6rem;flex-wrap:wrap;margin:2.2rem 0 0;font-size:.88rem}
.tbsk-pager .page-numbers{padding:.4rem .78rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);text-decoration:none}
.tbsk-pager .page-numbers.current{background:var(--konjo-d);color:#fff;border-color:var(--konjo-d)}

.tbsk-lede-block{max-width:70ch;color:var(--ink-2);font-size:1.02rem}

/* --- related, at the end of an article --- */
.tbsk-related{margin-top:3rem;border-top:1px solid var(--rule);padding-top:1.6rem}
.tbsk-related h2{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--konjo);
  font-family:'TBSK UI',sans-serif;font-weight:500;margin:0 0 .9rem}
.tbsk-related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem 1.6rem}
.tbsk-related a{color:var(--ink);text-decoration:none;font-size:.93rem;border-bottom:1px solid var(--rule);display:block;padding:.45rem 0}
.tbsk-related a:hover{color:var(--bitti)}

/* ============================================================
   FOOTER
   ============================================================ */
.tbsk-foot{background:var(--konjo-d);color:#DDD6C4;margin-top:3rem;font-size:.9rem}
.tbsk-foot a{color:#EFE7D5;text-decoration:none}
.tbsk-foot a:hover{color:#fff;text-decoration:underline}
.tbsk-foot-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2rem;padding:2.6rem 0 2rem}
@media(max-width:860px){.tbsk-foot-top{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
@media(max-width:520px){.tbsk-foot-top{grid-template-columns:1fr}}
.tbsk-foot h2{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dowel);
  font-family:'TBSK UI',sans-serif;font-weight:500;margin:0 0 .75rem}
.tbsk-foot ul{list-style:none;margin:0;padding:0}
.tbsk-foot li{margin:.32rem 0}
.tbsk-foot-brand .t1{font-family:'TBSK Display',serif;font-size:1.2rem;color:#FBF7EE;display:block}
.tbsk-foot-brand p{max-width:38ch;opacity:.86;font-size:.86rem}
.tbsk-colophon{border-top:1px solid rgba(242,235,221,.16)}

/* the fleet canon blocks live inside the footer band — restyle them to match */
body.tbsk .tbsk-colophon .w2g2-disclosure{max-width:var(--wrap);margin:0 auto;border-top:0;padding:1.6rem 20px .4rem;
  color:#CFC7B4;opacity:1;font-size:.79rem}
body.tbsk .tbsk-colophon .w2g2-disclosure strong{color:#F3EDDD;font-weight:500}
body.tbsk .tbsk-colophon .w2g2-disclosure a,body.tbsk .tbsk-colophon .w2g2-eco a{color:#EFE7D5}
body.tbsk .tbsk-colophon .w2g2-eco{max-width:var(--wrap);margin:0 auto;padding:0 20px 2rem;color:#CFC7B4;opacity:1;font-size:.79rem}

/* sticky mobile enquiry bar — fleet component, this domain's colours */
body.tbsk .tbs-bar{background:var(--konjo-d);box-shadow:0 -2px 14px rgba(30,37,25,.28);z-index:940;padding:.45rem .6rem;gap:.45rem}
body.tbsk .tbs-bar a{border-color:rgba(255,255,255,.5);font-weight:500;font-size:.82rem;line-height:1.15;
  padding:.62rem .35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tbsk .tbs-bar a.p{background:var(--dowel);color:var(--ink);border-color:var(--dowel)}
@media(max-width:781px){body.tbsk{padding-bottom:4.9rem}}
@media(max-width:360px){body.tbsk .tbs-bar a{font-size:.76rem}}

/* ============================================================
   404
   ============================================================ */
.tbsk-404 ul{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem 1.6rem}
.tbsk-404 li a{display:block;padding:.5rem 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.tbsk-404 li a:hover{color:var(--bitti)}

/* ============================================================
   PRINT / MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   MOBILE FINE-TUNING — verified at 390px
   ============================================================ */
@media(max-width:600px){
  body.tbsk{font-size:16.5px}
  .tbsk-wrap{padding:0 16px}
  .tbsk-main{padding:1.4rem 0 2.2rem}
  .tbsk-head h1{font-size:1.62rem;max-width:none}
  .tbsk-figure img{max-height:210px;object-fit:cover}
  .tbsk-hero img{height:200px}
  .tbsk-hero-in{padding:1.1rem 0 1rem}
  body.tbsk .tbsk-content{max-width:none}
  body.tbsk .tbsk-content table{font-size:.86em}
  .tbsk-grid{grid-template-columns:1fr;gap:1.1rem}
  .tbsk-brand-txt .t1{font-size:.95rem}
  .tbsk-rail{font-size:.72rem}
  .tbsk-related ul{grid-template-columns:1fr}
}


/* ============================================================
   REGION HOVER STATES — explicit, so no region depends on the
   zero-specificity base rule for its interactive colour.
   ============================================================ */
.tbsk-rail a:hover{color:#fff}
.tbsk-sheet a:hover{color:#fff}
.tbsk-sheet .tbsk-sheet-cta:hover{background:#DCB07A}
.tbsk-item .tbsk-more:hover{color:var(--konjo-d)}
.tbsk-chip:hover{background:var(--dowel);color:var(--ink)}
.tbsk-pager .page-numbers:hover{border-color:var(--bitti);color:var(--bitti)}
.tbsk-card .tbsk-fine a{color:var(--sea)}
.tbsk-card .tbsk-fine a:hover{color:var(--bitti)}
.tbsk-hero figcaption a{color:var(--sea)}

/* Output injected by fleet layers on loop_start, lifted above the card grid */
.tbsk-preloop{font-size:.84rem;color:var(--ink-2);margin:1.2rem 0 .2rem}
.tbsk-preloop p{margin:0}
.tbsk-404 h2.tbsk-kicker{margin-top:2.2rem}
.tbsk-404 .tbsk-crumb + h2.tbsk-kicker{margin-top:.4rem}
.tbsk-404 .tbsk-card{max-width:420px}
