html, body{
  height: 100%;
}
img,
svg,
video,
iframe {
    max-width: 100%;
}
body{
  display: grid;
  grid-template-rows: auto 1fr auto; /* header / main / footer */
}
*, *::before, *::after {
    box-sizing: border-box;
}
.swatch{
  max-width:960px;margin:0 auto;
  border:1px solid var(--line);border-radius:8px;
  padding:44px;
  display:flex;align-items:center;justify-content:center;gap:24px;
  background:var(--paper-soft);
}
.swatch.on-light{background:#F3F1FF;}
.swatch.stacked{flex-direction:column;gap:16px;}
.swatch.tight{padding:24px;}
.logo-lockup{
  display:inline-flex;align-items:center;gap:14px;
}
.logo-word{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-0.01em;
}
.logo-word .geek{color:var(--ink);}
.logo-word .corner{
  background:linear-gradient(100deg, var(--gold), var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-word.sm{font-size:2rem;}
.icon-64{width:64px;height:64px;}
.icon-40{width:40px;height:40px;}
.icon-28{width:28px;height:28px;}
header.site{
  grid-row: 1;
}
footer.site-footer{
  grid-row: 3;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}
header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
footer.site-footer {
    z-index: 5;
    width: 100%;
    background: var(--paper-soft);
    border-top: 1px solid var(--line);
    padding: 18px 0;
}
.logo a{
    color: var(--ink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 2rem;
}
.logo-mark{
    width: 26px;
    height: 26px;
    background: var(--ink);
    position: relative;
    flex: none;
}
.logo-mark::after{
    content:"";position:absolute;top:0;right:0;
    width:0;height:0;
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:transparent var(--paper) transparent transparent;
}
.logo-mark::before{
content:"";position:absolute;top:0;right:0;
width:10px;height:10px;
background:var(--gold);
clip-path:polygon(0 0,100% 100%,100% 0);
}
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
}
main {
  width: 100%;
  max-width: min(100%,var(--maxw));
  margin: 0 auto;
  padding: 0 28px;
  grid-row: 2;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:1.2rem;
  line-height:1;
  letter-spacing:0.01em;
  padding:13px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;transform:none;}

.btn-sm{padding:9px 16px;font-size:1.1rem;}
.btn-lg{padding:15px 30px;font-size:1.3rem;}

.btn-primary{background:var(--gold);border-color:var(--gold);color:#241800;}
.btn-primary:hover:not(:disabled){background:var(--gold-deep);border-color:var(--gold-deep);}

.btn-secondary{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn-secondary:hover:not(:disabled){
  background:color-mix(in srgb, var(--ink) 82%, black);
  border-color:color-mix(in srgb, var(--ink) 82%, black);}

.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover:not(:disabled){border-color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, transparent);}

.btn-ghost{background:transparent;border-color:transparent;color:var(--teal);padding-left:4px;padding-right:4px;}
.btn-ghost:hover:not(:disabled){color:var(--teal-deep);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px;}

.btn-danger{background:transparent;border-color:#B23A2E;color:#B23A2E;}
.btn-danger:hover:not(:disabled){background:#B23A2E;color:#fff;}

.form-group{margin-bottom:22px;}

label,  .robots-row-label{
  display:block;
  font-size:1.2rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:7px;
}
label .optional{font-weight:400;color:var(--ink-faint);font-size:1rem;margin-left:4px;}

.form-control,
.form-select,
textarea.form-control{
  display:block;
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:1.3rem;
  color:var(--ink);
  background-color:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  line-height:1.4;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder{color:var(--ink-faint);}
.form-control:hover{border-color:var(--line)}
.form-control:focus,
.form-select:focus{
  outline:none;
  background: var(--card);
  color:var(--ink);
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(31,92,87,.13);
}
.form-control:disabled,
.form-control.disabled{
  background-color:var(--paper);color:var(--ink-faint);cursor:not-allowed;
}
.form-control:-internal-autofill-selected{
  background-color: var(--card);
}

textarea.form-control{resize:vertical;min-height:120px;}

.form-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23565C63' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}

.form-text,.form-hint{font-size:12.5px;color:var(--ink-faint);margin-top:6px;}

.form-control.is-invalid,
.form-select.is-invalid{
  border-color:var(--error);
  background-color:var(--error-bg);
}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(178,58,46,.13);}
.invalid-feedback{display:block;font-size:1.2rem;color:var(--error);margin-top:6px;font-weight:500;}
.invalid-feedback::before{content:"⚠ ";}

.form-control.is-valid{border-color:var(--success);}
.valid-feedback{display:block;font-size:1.2rem;color:var(--success);margin-top:6px;font-weight:500;}

.form-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.form-check-input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:none;margin-top:2px;
  border:1px solid var(--line);background:var(--card);
  cursor:pointer;position:relative;transition:all .15s ease;
  border-radius:3px;
}
.form-check-input[type="radio"]{border-radius:50%;}
.form-check-input:hover{border-color:var(--ink-soft);}
.form-check-input:checked{background:var(--teal);border-color:var(--teal);}
.form-check-input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.form-check-input[type="radio"]:checked::after{
  content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;
  border-radius:50%;background:#fff;
}
.form-check-input:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.form-check label{font-size:1.2rem;font-weight:400;color:var(--ink-soft);margin-bottom:0;cursor:pointer;}

.font-weight-bold{font-weight:var(--font-bold);}
.advertising{
    border: 1px solid var(--line);
    background: var(--paper-soft);
    overflow: hidden;
    max-width: 100%;
}
.top-advertising {
    width: 100%;
    max-height: 6rem;
    margin-bottom: 1rem;
}
.bottom-advertising {
    width: 100%;
    max-height: 6rem;
}
.in-article-advertising {
    width: 100%;
    max-height: 6rem;
    margin-bottom: 1rem;
}
.side-top-advertising {
    width: 100%;
    max-height: 6rem;
}
.side-bottom-advertising {
    width: 100%;
    max-height: 6rem;
}
/************* article ****************/
.content-container {
  display: flex;
  flex-direction: column;
  background: var(--paper-soft);
  padding: 3rem;
  margin: 1rem 0;
}
.content-container .title-container{
  margin-bottom: .5rem;
  padding:0 0 1rem 0;
}
.content-container .title-container .breadcrumb span{
  margin-right: .5rem;
  color: var(--ink-faint);
}
.content-container .title-container .breadcrumb-link,.content-container .title-container .breadcrumb-link a{
  text-decoration: none;
  color: var(--teal);
}
.content-container .title-container .breadcrumb-link a:hover{
  color:var(--ink);
}
.content-container .title-container h1{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1rem;
  font-size: 2.2rem;
  line-height: 1.15;
  max-width: 26ch;
  margin-bottom: 18px;
}
.content-container .title-container p{
  color: var(--ink-faint);
  font-size: 1rem;
  margin: 1rem 0 0 0;
}
.content-container .article-container{
  display: flex;
  flex-direction: row;
  border-top: solid 1px var(--line);
}
.article-container .article-content{
  width: 75%;
  padding: 1rem 1rem 1rem 0;
}
.article-content p {
    text-align: justify;
}
.article-container .article-sidebar{
  width: 25%;
  padding: 1rem;
}
.article-content>p:first-of-type::first-letter{
    font-family:'Fraunces',serif;font-size:3.5rem;font-weight:600;float:left;line-height:.85;
    padding:4px 8px 0 0;color:var(--gold-deep);
  }
.article-content blockquote {
    background: var(--teal-pale);
    border-left: 3px solid var(--teal);
    padding: 16px 20px;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 26px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.affiliate-links__title{
  font-size: 1.5rem;
}
.article-content .affiliate-links{
    background: var(--teal-pale);
    border-left: 3px solid var(--teal);
    padding: 16px 20px;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 26px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.article-content .affiliate-links__list
{
  padding-left: 0;
}
.article-content .affiliate-links li{  
    list-style-type: none;
}
.article-content .affiliate-links__item{
  background-color: var(--card);
  padding: .5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.article-content .affiliate-links__item p{
  margin-bottom: 0;
}
.article-content .affiliate-links__item .affiliate-links__item-subcontainer
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size:1rem;
}
.article-content .affiliate-links__item a{  
  padding: 3px 2rem;
  border-radius: 36px;
  border: 1px solid var(--teal);
  color: var(--ink);
  text-decoration: none;
}
.article-content .affiliate-links__item a:hover{  
    color: var(--teal);
    text-decoration: none;
}
.article-content blockquote p{
  margin-bottom: 0;
}
.sidebar{position:sticky;top:96px;display:flex;flex-direction:column;}
.toc-box {
    font-size: .85rem;
    top: 96px;
    align-self: start;
    border-left: 2px solid var(--line);
    padding-left: 16px;
}
.toc-box a {
    display: block;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 6px 0;
    line-height: 1.4;
}
.toc-box a:hover {
    color: var(--teal);
    font-weight: 600;
}
  .side-box{
    width:100%;
    border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;margin-bottom:28px;background:var(--card);
  }
  .side-box h3{
    font-family:'IBM Plex Mono',monospace;font-size:.85rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:16px;
  }
  .popular-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);}
  .popular-item:first-of-type{border-top:none;padding-top:0;}
  .popular-item .num{font-family:'Fraunces',serif;font-weight:600;color:var(--gold);font-size:20px;flex:none;width:22px;}
  .popular-item h4{font-size:1rem;font-weight:600;line-height:1.35;font-family:'Inter',sans-serif;}
  .popular-item a{color:var(--ink);text-decoration: none;}
  .popular-item a:hover{color:var(--teal);}
  .newsletter-box{
    background:var(--ink-soft);
    color:var(--paper);
    border:none;
  }
  .newsletter-box h3{color:color-mix(in srgb, var(--paper) 65%, transparent);}
  .newsletter-box p{font-size:.85rem;line-height:1.5;color:color-mix(in srgb, var(--paper) 85%, transparent);margin:0 0 16px;}
  .nl-form{display:block;gap:0;border:1px solid #3a4048;border-radius:var(--radius);overflow:hidden;}
  .nl-form input{
    min-width:0;flex:1;border:none;background:transparent;padding:12px 14px;color:var(--paper);font-size:1rem;font-family:'Inter',sans-serif;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .nl-form input::placeholder{color:#7d838a;}
  .nl-form button{
    min-width:0;border:none;background:var(--gold);color:#241800;font-weight:600;font-size:1rem;
    padding:0 16px;cursor:pointer;
  }
  .nl-form .nl-form-input-box{
    display:flex;
    flex-direction: row;
  }
.meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    color: var(--ink-faint);
}
.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--line);
    flex: none;
}
.dot::before {
    content: "·";
    margin-right: 14px;
    color: var(--ink-faint);
}
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 0;
}
.tag-link{
  display:inline-flex;
  align-items:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:1rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 13px;
  text-decoration:none;
  transition:all .15s ease;
}
.tag-link::before{
  content:"#";
  color:var(--ink-faint);
  margin-right:2px;
}
.tag-link:hover{
  color:var(--teal);
  border-color:var(--teal);
  background:var(--teal-pale);
}
.tag-link:hover::before{
  color:var(--teal);
}
.tag-link:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
/* ---------- HERO ---------- */
  .hero-section{padding:36px 0 8px;}
  .hero-grid{
    display:grid;grid-template-columns:1.7fr 1fr;gap:44px;
    padding-bottom:36px;border-bottom:1px solid var(--line);
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--teal);display:flex;align-items:center;gap:8px;margin-bottom:14px;
  }
  .eyebrow::before{content:"";width:16px;height:1px;background:var(--teal);display:inline-block;}
  .hero-fig{
    position:relative;margin-bottom:22px;border-radius:var(--radius);overflow:hidden;
  }
  .hero-fig img{max-width:100%;width:100%;object-fit:cover;}
  .ia-mention {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.4;
    pointer-events: none;
}
.ia-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    padding: 3px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    pointer-events: none;
}

.ia-badge svg {
    flex-shrink: 0;
}
  .corner-fold{
    position:absolute;top:0;right:0;width:0;height:0;
    border-style:solid;border-width:0 46px 46px 0;
    border-color:transparent var(--gold) transparent transparent;
    filter:drop-shadow(-2px 2px 3px rgba(0,0,0,.18));
  }
  .corner-fold::after{
    content:"";position:absolute;top:4px;right:-44px;
    font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:#3c2a06;
  }
  .hero-title{
    font-size:2.3rem;line-height:1.08;margin-bottom:16px;
    overflow-wrap: break-word;
  }
  .hero-title a{text-decoration:none;color:var(--ink);}
  .hero-title a:hover{text-decoration:none;color:var(--teal);}
  .hero-dek{
    color:var(--ink-soft);font-size:1.3rem;line-height:1.6;margin-bottom:18px;max-width:56ch;
  }
  .meta-row{
    display:flex;align-items:center;gap:14px;font-size:.9rem;color:var(--ink-faint);
  }
  .avatar{width:26px;height:26px;border-radius:50%;background:var(--line);flex:none;}
  .dot::before{content:"·";margin-right:0px;color:var(--ink-faint);}

  a.side-link {
    color: var(--ink);
    text-decoration: none;
  }
  a.side-link:hover {
    color: var(--teal);
    text-decoration: none;
  }
  .side-list{display:flex;flex-direction:column;}
  .side-list h3{
    font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:18px;
  }
  .side-item{
    display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-soft);
  }
  .side-item:first-of-type{border-top:none;}
  .side-num{
    font-family:'Fraunces',serif;font-size:1.9rem;color:var(--line);flex:none;width:30px;font-weight:600;
  }
  .side-item h4{
    font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;line-height:1.32;margin-bottom:6px;
  }
  .side-item .cat{
    display:block;margin: .7rem 0;font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;
  }

  /* ---------- CATEGORY PILLS ---------- */
  a.pill-link, a.pill-link:hover{
    text-decoration: none;
  }
  .pills{
    display:flex;gap:10px;overflow-x:auto;padding:22px 0;
    border-bottom:1px solid var(--line);
  }
  .pills::-webkit-scrollbar{display:none;}
  .pill{
    flex:none;font-size:1rem;font-weight:500;
    padding:8px 16px;border-radius:20px;border:1px solid var(--line);
    color:var(--ink-soft);background:var(--paper-soft);white-space:nowrap;
    transition:all .15s ease;
  }
  .pill.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .pill:hover:not(.active){border-color:var(--gold);color:var(--ink);}
    /* ---------- MAIN LAYOUT ---------- */
  .main-layout{
    display:grid;grid-template-columns:1fr 320px;gap:56px;
    padding:40px 0 60px;align-items:start;
  }
  .section-head{
    display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;
  }
  .section-head h2{font-size:2rem;}
  .section-head .see-all{font-size:.9rem;color:var(--teal);font-weight:500;}

  .grid-articles{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 26px;
    padding-bottom: 2rem;
  }
  .card{
    display:flex;flex-direction:column;
    background: var(--card);
    border-color: var(--line);
  }
  .card a.card-link{
    color:var(--ink);
    text-decoration: none;
  }
  .card a.card-link:hover{
    color:var(--teal);
    text-decoration: none;
  }
  .card-fig{position:relative;margin-bottom:14px;border-radius:var(--radius);overflow:hidden;background:var(--line-soft);}
  .card-fig img{width:100%;max-width:100%;object-fit:cover;transition:transform .35s ease;}
  .card:hover .card-fig img{transform:scale(1.035);}
  .card-fold{
    position:absolute;top:0;right:0;width:0;height:0;
    border-style:solid;border-width:0 26px 26px 0;
    border-color:transparent var(--teal) transparent transparent;
  }
  .card .cat{
    font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--teal);
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
  }
  .card h3{font-size:1.5rem;line-height:1.28;margin-bottom:8px;}
  .card h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;}
  .card p{font-size:1rem;color:var(--ink-soft);line-height:1.55;margin:0 0 12px;}
  .card .meta-row{font-size:.9rem;}


    /* ---------- AD SLOT (shared style) ---------- */
  .ad-slot{
    background:var(--ad-bg);
    border:1px solid var(--ad-line);
    border-radius:var(--radius);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:var(--ink-faint);
    position:relative;
  }
  .ad-slot .ad-label{
    position:absolute;top:8px;left:10px;
    font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-faint);
  }
  .ad-slot .ad-dims{
    font-size:1rem;color:var(--ink-faint);
  }
  .ad-leaderboard{height:90px;margin:0 0 8px 0;}
  .ad-banner-wrap{padding:14px 0 6px;}
  .ad-infeed{
    grid-column:1 / -1;
    padding:22px 20px;
    min-height:96px;
    flex-direction:row;justify-content:flex-start;gap:16px;
    text-align:left;
  }
  .ad-infeed .ad-dims{font-size:1rem;}
  .ad-sidebar{height:250px;margin-bottom:28px;}
  .ad-sidebar-tall{height:600px;}
  .ad-incontent{height:280px;margin:36px 0;}
  nav.primary a:hover{color:var(--ink);border-color:var(--gold);}
  nav .nav-item a{color:var(--ink);}
  nav .nav-item a:hover{color:var(--teal);}

  .header-actions{display:flex;align-items:center;gap:18px;}
  .search-box{
    display:flex;align-items:center;gap:8px;
    font-size:1.1rem;color:var(--ink-soft);
    border:1px solid var(--line);border-radius:20px;
    padding:8px 14px;background:var(--paper-soft);
  }
  .search-btn, .search-box input,.search-box input:focus, .search-box input:focus-visible{
    background: none;
    border: none;
    outline: none;
    color: var(--ink);
    background: var(--card);
  }
  .burger{display:none;}
  .search-page-not-found-box > div{
    margin:auto;
  }
  .cookie-banner {
    background-color: var(--paper-soft-transparent);
    border-bottom: 2px solid var(--line);
    padding: 20px;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 100%;
    width: 100%;
    margin: auto;
  }
  .cookie-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 2rem;
    background: var(--paper-soft);
    height: 80%;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .cookie-banner__actions{
    display:flex;
    justify-content: center;
  }
  .cookie-banner__settings-container{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .flash-messages .alert{
    position: fixed;
    width: 80%;
    bottom: 10%;
    left:50%;
    transform: translateX(-50%);
    border: 1px solid;
  }
  .flash-messages .alert-success{
    border-color: var(--teal-deep);
    background-color: var(--teal-pale);
    color: var(--teal-deep);
  }
  .flash-messages .alert-error{
    border-color: var(--red-deep);
    background-color: var(--red);
    color: var(--red-deep);
  }
  .flash-messages .alert-newsletter_success{
    border-color: var(--teal-deep);
    background-color: var(--teal-pale);
    color: var(--teal-deep);
  }
  /* ---------- FOOTER SEO COLUMNS ---------- */
  footer{border-top:1px solid var(--line);margin-top:20px;background:var(--paper-soft);}
  .footer-top{padding:1rem 0 ;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;}
  .footer-brand .logo{margin-bottom:14px;}
  .footer-brand p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:32ch;}
  .footer-col h4{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:16px;font-weight:500;
  }
  .footer-col a{display:block;font-size:13.5px;color:var(--ink-soft);padding:6px 0;text-decoration: none;}
  .footer-col a:hover{color:var(--teal);}
  .footer-bottom{
    border-top:1px solid var(--line);padding:20px 0;
    display:flex;justify-content:space-between;align-items:center;
    font-size:1rem;color:var(--ink-faint);
  }
  .footer-bottom a{color:var(--ink-faint);}
  #main-menu-toggle{display:none;}
@media (max-width: 1165px){
  .hero-grid
  {
    display: flex;
    flex-direction: column;
  }
  .side-list{
    text-align: center;
  }
  .side-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .side-num{
    display: block;
    margin: auto;
  }
  .main-layout{
    display:flex;
    min-width: 0;
    flex-direction: column;
  }
  .footer-top{
    
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
}
@media (max-width:920px){
    body{font-size:1.4rem;}
    h1.hero-title{font-size: 2.7rem;}
    nav.primary,.header-actions .search-btn span{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .main-layout{grid-template-columns:1fr;}
    .sidebar{position:static;margin:auto;width:100%;min-width: 0;max-width: 100%;}
    .grid-articles{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr;}
    .article-body{grid-template-columns:1fr;}
    .toc-box{display:none;}
    .article-mock .inner{padding:36px 24px 44px;} 
    .content-container .article-container{flex-direction: column;}
    .article-container .article-content, .article-container .article-sidebar{
      width: auto;
    }   
  .header-row
  {
    display: flex;
    flex-direction: column;
  }
  .header-row > div {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
  .footer-top{
    
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  .copyright{
    margin:auto;
  }
  /********* mobile menu ******/
  main{
    margin-top: 5rem;
  }
  .mobile-top-secure-margin{
    margin-top: 2rem;
  }
  header.site {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 50;
  }
  #main-menu-toggle{
    z-index: 999;
    display: block;
    position: fixed;
    top: 11px;
    right: 2rem;
    background: var(--card);
    border: 1px solid var(--teal);
    border-radius: var(--radius);
    height: 40px;
    width: 40px;
  }
  #main-menu-toggle line{
    color: var(--teal);
  }
  .navbar{
    text-align: center;
    position: absolute;
    top: 100px;
    left: 50%;
    padding: 0 20px;
    width: 80%;
    background: var(--card);
    border: solid 1px var(--line);
  }
  .navbar.show{
    transform: translateX(-50%);
    transition: transform 0.2s ease;
  }
  .navbar{
    transform: translateX(-250%);
    transition: transform 0.3s ease;
  }

  .navbar ul.navbar-nav{
    width: 100%;
  }
  .navbar .nav-item{
    border-bottom: 1px solid var(--line);
  }
  .navbar .nav-link{
    margin: 1rem;
  }
  .icon-64 {
    width: 32px;
    height: 32px;
  }
  .logo-word{    
    font-size: 1rem;
  }
  .content-container{
    padding: 3rem 1rem;
  }
  .article-sidebar{
    padding: 0.2rem;
  }
  .article-sidebar{
    padding: .5rem;
  }
  .pills{
    flex-wrap: wrap;
    justify-content: center;
  }
  .pill-link:first{
    margin-bottom: .7rem;
  }
  .meta-row{
    flex-wrap: wrap;
    justify-content: center;
  }
  .nl-form .nl-form-input-box{
    flex-direction: column;
  }
  .nl-form button{
    padding : 1rem;
  }
  .cookie-banner
  {
  font-size: 1.3rem;
  }
  .cookie-banner__actions{
  flex-direction: column-reverse;
  }
  .cookie-banner__settings-container{
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
  }
  .footer-bottom{
    padding: 20px 0 4rem 0;
  }
  .tag-list{    
    justify-content: center;
  }
  .tag-list a.tag-link {
    font-size: .7rem;
  }
}