/* =========================================================
   MAGAZINE THEME — STATIC PAGES
========================================================= */


/* =========================================================
   LAYOUT RESET
========================================================= */

body:has(.static-page-shell) main.content-card,
.content-card:has(.static-page-shell){
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}


/* =========================================================
   PAGE SHELL
========================================================= */

.static-page-shell{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:0 0 40px;

  color:#111;
  background:#fff;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.static-page-head{
  position:relative;

  margin:0 0 34px;
  padding:24px 0 30px;

  border-top:6px solid #111;
  border-bottom:1px solid #d8d8d8;
}

.static-page-head::before{
  content:"";

  position:absolute;
  top:-6px;
  left:0;

  width:92px;
  height:6px;

  background:var(--mag-red, #e31b23);
}

.static-page-kicker{
  display:inline-flex;
  align-items:center;

  margin:0 0 15px;
  padding:0;

  color:var(--mag-red, #e31b23);
  background:transparent;
  border:0;
  border-radius:0;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:10px;
  font-weight:900;
  line-height:1;

  letter-spacing:.14em;
  text-transform:uppercase;
}

.static-page-title{
  max-width:18ch;

  margin:0;

  color:#111;

  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(44px, 5.5vw, 74px);
  font-weight:900;
  line-height:.96;

  letter-spacing:-.045em;
  text-wrap:balance;
}


/* =========================================================
   PAGE BODY
========================================================= */

.static-page-body{
  width:100%;
  max-width:760px;

  margin:0 auto;

  color:#252525;

  font-family:Georgia, "Times New Roman", serif;
  font-size:18px;
  line-height:1.72;
}

.static-page-body > *:first-child{
  margin-top:0;
}

.static-page-body > *:last-child{
  margin-bottom:0;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.static-page-body p{
  margin:0 0 1.35em;
}

.static-page-body p:empty{
  display:none;
}


/* =========================================================
   HEADINGS
========================================================= */

.static-page-body h2{
  position:relative;

  margin:2.2em 0 .85em;
  padding-top:18px;

  border-top:3px solid #111;

  color:#111;

  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(28px, 3vw, 38px);
  font-weight:900;
  line-height:1.08;

  letter-spacing:-.025em;
}

.static-page-body h2::before{
  content:"";

  position:absolute;
  top:-3px;
  left:0;

  width:68px;
  height:3px;

  background:var(--mag-red, #e31b23);
}

.static-page-body h3{
  margin:1.8em 0 .7em;

  color:#111;

  font-family:Georgia, "Times New Roman", serif;
  font-size:25px;
  font-weight:900;
  line-height:1.15;

  letter-spacing:-.02em;
}

.static-page-body h4{
  margin:1.55em 0 .65em;

  color:#111;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:15px;
  font-weight:900;
  line-height:1.35;

  letter-spacing:.04em;
  text-transform:uppercase;
}


/* =========================================================
   LINKS
========================================================= */

.static-page-body a{
  color:#111;
  text-decoration-color:var(--mag-red, #e31b23);
  text-decoration-thickness:2px;
  text-underline-offset:3px;

  transition:
    color .18s ease,
    text-decoration-color .18s ease;
}

.static-page-body a:hover{
  color:var(--mag-red, #e31b23);
}


/* =========================================================
   LISTS
========================================================= */

.static-page-body ul,
.static-page-body ol{
  margin:0 0 1.5em;
  padding-left:1.4em;
}

.static-page-body li{
  margin:.45em 0;
  padding-left:.15em;
}

.static-page-body li::marker{
  color:var(--mag-red, #e31b23);
  font-weight:900;
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.static-page-body blockquote{
  position:relative;

  margin:2em 0;
  padding:22px 26px 22px 30px;

  border:0;
  border-left:5px solid var(--mag-red, #e31b23);

  color:#222;
  background:#f5f3ef;

  font-size:21px;
  font-style:italic;
  line-height:1.55;
}

.static-page-body blockquote p:last-child{
  margin-bottom:0;
}


/* =========================================================
   STRONG / EMPHASIS
========================================================= */

.static-page-body strong,
.static-page-body b{
  color:#111;
  font-weight:900;
}

.static-page-body em,
.static-page-body i{
  color:#333;
}


/* =========================================================
   HORIZONTAL RULE
========================================================= */

.static-page-body hr{
  width:100%;

  margin:36px 0;

  border:0;
  border-top:1px solid #ccc;
}


/* =========================================================
   IMAGES / FIGURES
========================================================= */

.static-page-body img{
  display:block;

  max-width:100%;
  height:auto;

  margin:28px auto;

  border-radius:0;
}

.static-page-body figure{
  margin:30px 0;
}

.static-page-body figure img{
  margin:0;
}

.static-page-body figcaption{
  margin-top:9px;

  color:#777;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:11px;
  font-weight:600;
  line-height:1.45;
}


/* =========================================================
   TABLES
========================================================= */

.static-page-body table{
  width:100%;

  margin:28px 0;

  border-collapse:collapse;
  border-spacing:0;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:13px;
  line-height:1.5;
}

.static-page-body th,
.static-page-body td{
  padding:12px 13px;

  border:1px solid #d7d7d7;

  text-align:left;
  vertical-align:top;
}

.static-page-body th{
  color:#fff;
  background:#111;

  font-size:11px;
  font-weight:900;

  letter-spacing:.04em;
  text-transform:uppercase;
}

.static-page-body tr:nth-child(even) td{
  background:#f7f7f7;
}


/* =========================================================
   CODE
========================================================= */

.static-page-body code{
  padding:2px 5px;

  color:#111;
  background:#f0f0f0;

  font-family:Consolas, Monaco, monospace;
  font-size:.88em;
}

.static-page-body pre{
  max-width:100%;

  margin:26px 0;
  padding:20px;

  overflow:auto;

  border-left:5px solid var(--mag-red, #e31b23);

  color:#f4f4f4;
  background:#111;

  font-family:Consolas, Monaco, monospace;
  font-size:13px;
  line-height:1.6;
}

.static-page-body pre code{
  padding:0;

  color:inherit;
  background:transparent;
}


/* =========================================================
   FORMS
========================================================= */

.static-page-body form{
  margin:28px 0;
}

.static-page-body label{
  display:block;

  margin:0 0 7px;

  color:#111;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:11px;
  font-weight:900;

  letter-spacing:.04em;
  text-transform:uppercase;
}

.static-page-body input,
.static-page-body textarea,
.static-page-body select{
  width:100%;
  max-width:100%;

  min-height:46px;

  padding:11px 13px;

  border:1px solid #aaa;
  border-radius:0;

  color:#111;
  background:#fff;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:14px;
}

.static-page-body textarea{
  min-height:150px;
  resize:vertical;
}

.static-page-body input:focus,
.static-page-body textarea:focus,
.static-page-body select:focus{
  border-color:#111;
  outline:2px solid rgba(227,27,35,.16);
  outline-offset:1px;
}

.static-page-body button,
.static-page-body input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;
  min-height:44px;

  padding:0 18px;

  border:1px solid #111;
  border-radius:0;

  color:#fff;
  background:#111;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:11px;
  font-weight:900;

  letter-spacing:.05em;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.static-page-body button:hover,
.static-page-body input[type="submit"]:hover{
  border-color:var(--mag-red, #e31b23);
  background:var(--mag-red, #e31b23);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

  .static-page-title{
    font-size:clamp(40px, 7vw, 62px);
  }

  .static-page-body{
    max-width:none;
  }
}


@media (max-width:720px){

  .static-page-shell{
    padding-bottom:28px;
  }

  .static-page-head{
    margin-bottom:26px;
    padding:18px 0 23px;
  }

  .static-page-head::before{
    width:64px;
  }

  .static-page-kicker{
    margin-bottom:12px;
    font-size:9px;
  }

  .static-page-title{
    max-width:none;

    font-size:clamp(36px, 11vw, 50px);
    line-height:.98;
  }

  .static-page-body{
    font-size:17px;
    line-height:1.68;
  }

  .static-page-body h2{
    font-size:29px;
  }

  .static-page-body h3{
    font-size:23px;
  }

  .static-page-body blockquote{
    padding:19px 20px;
    font-size:19px;
  }

  .static-page-body table{
    display:block;
    max-width:100%;
    overflow-x:auto;
  }
}


@media (max-width:480px){

  .static-page-title{
    font-size:36px;
  }

  .static-page-body{
    font-size:16px;
  }

  .static-page-body h2{
    font-size:27px;
  }

  .static-page-body h3{
    font-size:21px;
  }
}