/*
Theme Name: The Other Journal
Description: A collaboration between Derek Long at <a href="https://madebytincans.com/">Tin Cans & String</a> and Zac Settle for The Seattle School & The Other Journal.
Author: Derek Long at Tin Cans & String
Version: 1.0
*/


/* --------------------------------------------------------------------------

   Foundation

----------------------------------------------------------------------------- */


*,
*:after,
*:before { box-sizing: border-box; }

* { margin: 0; }

html, body {
 height: 100%;
}

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

button {
  appearance: none;
  background: transparent;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

textarea { resize: vertical; }

pre { white-space: pre-wrap; }



/* --------------------------------------------------------------------------

   Base Styles

----------------------------------------------------------------------------- */

:root {

    /* type */

    font-size: 22px;
    line-height: 1.55; /* 34px */
    font-family: var(--f-primary);
    font-weight: var(--f-primary-regular);
    color: var(--c-black);

    --f-primary: garamond-premier-pro, 'Garamond', serif;
    --f-secondary: trade-gothic-next, sans-serif;
    --f-regular: 400;
    --f-semi: 600; /* only primary */
    --f-bold: 700;

    /* type scale */

    --t--4: .55rem;  /* 12px */
    --t--3: .64rem;  /* 14px */
    --t--2: .73rem;  /* 16px */
    --t--1: .82rem;  /* 18px */
    --t-base: 1rem;  /* 22px */
    --t-1: 1.09rem;  /* 24px */
    --t-2: 1.36rem;  /* 30px */
    --t-3: 1.64rem;  /* 36px */
    --t-4: 2.18rem;  /* 48px */
    --t-5: 2.73rem;  /* 60px */


    /* spacing scale - # is pixel value */

    --s-4: .18rem;
    --s-8: .36rem;
    --s-12: .55rem;
    --s-16: .73rem;
    --s-24: 1.09rem;
    --s-32: 1.45rem;
    --s-48: 2.18rem;
    --s-64: 2.91rem;
    --s-96: 4.36rem;
    --s-128: 5.82rem;


    /* container spacing - both gutters added together */

    --gutter: 8rem;
 

    /* colors */

    --c-black: #231F20;
    --c-grey: #6B6B68;
    --c-off-white: #F4F2E9;
    --c-teal: #3191A2;
    --c-teal-dark: #0B6170;
    --c-teal-light: #69C3D3;
    
}

body {
    background-color: var(--c-off-white);
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: flex;
    border: 0;
    border-top: 1px solid var(--c-black);
    margin: 1em 0;
    padding: 0;
    justify-content: center;
    margin-bottom: var(--s-48);
}

hr:after {
    content: '';
    height: var(--s-32);
    width: 1px;
    background-color: var(--c-black);
}

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid var(--c-grey);
    padding: 0.5rem;
  }

/* --------------------------------------------------------------------------

   Typography

----------------------------------------------------------------------------- */


/* Common margin-bottom for vertical rhythm based on our base line-height */

h1,h2,h3,h4,h5,h6,
ul,ol,dl,
fieldset,
p,
table,
pre,
figure,
figcaption,
blockquote {
    margin-bottom: var(--s-24);
}

dd,li {
    margin-bottom: var(--s-12);
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
    line-height: calc(2px + 2.5ex + 2px);
    margin-bottom: 0.3em;
 }

h1, .hsize1 { font-size: var(--t-5); }     /* px */
h2, .hsize2 { font-size: var(--t-4); }     /* px */
h3, .hsize3 { font-size: var(--t-3); }     /* px */
h4, .hsize4 { font-size: var(--t-2); }
h5, h6 { font-size: var(--t-base); }     /* px */

strong { font-weight: var(--f-bold); }


/* --------------------------------------------------------------------------

   Links & Butons

----------------------------------------------------------------------------- */


a { 
    color: var(--c-teal);
    transition: color .2s ease;
}

a:hover  { color: var(--c-teal-dark);  }


button {
    border: 0;
    outline: 0;
    cursor: pointer;
}

button,
.button,
a.wp-block-button__link {
     display: inline-flex;
     align-items: center;
     padding: var(--s-16) var(--s-32);
     margin-bottom: var(--s-16);
     color: var(--c-black);
     background-color: var(--c-teal);
     text-decoration: none;
     text-align: center;
     font-family: var(--f-secondary);
     font-weight: var(--f-bold);
     font-size: var(--t--1);
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.2;
     transition: background-color .2s ease, color .2s ease;
     cursor: pointer;
 }

a.wp-block-button__link { color: var(--c-off-white); }

button:hover,
.button:hover,
a.wp-block-button__link:hover {
    color: var(--c-off-white);
    background-color: var(--c-teal-dark);
}

/* --------------------------------------------------------------------------

   Forms

----------------------------------------------------------------------------- */


/* small form reset */

input,
textarea,
select {
    background: transparent;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    outline: none;
    font-size: inherit;
    font-family: var(--f-secondary);
}

label {
    font-family: var(--f-secondary);
    font-size: var(--t--1);
}

select {
    border: 1px solid var(--c-black);
}



input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([readonly]):not(.mat-mdc-input-element),
textarea {
    border: 1px solid var(--c-black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: var(--s-8);
}


label input[type=checkbox],
label input[type=radio] {
    margin-right: var(--s-4);
}

input[type=submit],
input[type=submit].button {
     align-items: center;
     padding: var(--s-16) var(--s-32);
     margin-bottom: var(--s-16);
     color: var(--c-off-white);
     background-color: var(--c-black);
     text-decoration: none;
     text-transform: none;
     text-align: center;
     font-family: var(--f-secondary);
     font-weight: var(--f-bold);
     font-size: var(--t--1);
     letter-spacing: 1px;
     line-height: 1.2;
     transition: background-color .2s ease, color .2s ease;
     cursor: pointer;
 }

 input[type=submit]:hover {
    color: var(--c-black);
    background-color: var(--c-teal);
}

/* form assembly */
.wFormContainer {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    border: none !important;
    margin: 0 !important;
    max-width: none !important;
}

.wForm {
    padding: 0 !important;
}

.wFormFooter { display: none !important; }

.wForm .oneField input {
    background: transparent !important;
    border-color: var(--c-black) !important;
}

.wForm input[type=submit] {
    padding: var(--s-16) var(--s-32) !important;
    margin-bottom: var(--s-16) !important;
    color: var(--c-black) !important;
    background-color: var(--c-teal) !important;
    font-family: var(--f-secondary) !important;
    font-weight: var(--f-bold) !important;
    font-size: var(--t--1) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    background-image: none !important;
    border-radius: 0 !important;
    transition: background-color .2s ease, color .2s ease;
    cursor: pointer;
}

.wForm input[type=submit]:hover {
    color: var(--c-off-white) !important;
    background-color: var(--c-teal-dark) !important;;
}

/* placeholder text */

::-webkit-input-placeholder { color: var(--c-grey); }
          :-moz-placeholder { color: var(--c-grey); }
         ::-moz-placeholder { color: var(--c-grey); }
     :-ms-input-placeholder { color: var(--c-grey); }




/* --------------------------------------------------------------------------

   Container 

----------------------------------------------------------------------------- */

.container {
    --padding: var(--gutter);
    width: min(100% - var(--padding), var(--max-width, 72.73rem)); /* 1600px */
    margin-inline: auto;
}

.container--narrow {
    --max-width: 36.36rem; /* 800px */
}

.container--wide { 
    --max-width: 54.55rem; /* 1200px */
}

.container--no-padding {
    --padding: 0;
}

.section {
    padding-block: 4rem;
}

/* --------------------------------------------------------------------------

   Grid

----------------------------------------------------------------------------- */

[class*="grid-"] {
    display: grid;
    gap: var(--s-48);
}

.grid-home {
    grid-template-columns: 2fr 1fr 1fr;
    row-gap: var(--s-16);
    column-gap: var(--s-24);
}

.grid-home > *:nth-child(1) {
    grid-row: 1/3;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-even-columns {
    /* if smaller than 500px then 100% of parent, also prevents overflow */
    grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr));
}

.grid-auto-columns {
    /* auto columns, similar to flexbox but equal sizes, use on desktop only */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

/* use a background <img> below the grid and center */

.grid-stack {
    display: grid;
    place-items: center;
}

.grid-stack > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.grid-stack > img {
    z-index: -1;
}

/* --------------------------------------------------------------------------

   Header

----------------------------------------------------------------------------- */

.header {
    position: relative;
    display: flex;
    align-items: stretch;
    padding-block-start: var(--s-64);
    margin-block-end: var(--s-48);
    border-bottom: 1px solid var(--c-black);
}

.header_right {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    justify-content: space-between;
    gap: 12px;
}

.logo {
    display: flex;
    align-self: self-end;
}

.logo img {
    width: 6.82rem;
    height: auto;
}



/* --------------------------------------------------------------------------

   Navigation

----------------------------------------------------------------------------- */

/* horizontal for all navigation */
.nav {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav li { margin-bottom: 0; }

.nav a { 
    display: block;
    text-decoration-line: none;
}

/* main site nav */

.nav-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: end;
}

.nav-container .button {
    margin-bottom: 0;
}

.nav-main {
    align-self: flex-end;
}

.nav-main a {
    display: block;
    font-style: italic;
    font-weight: var(--f-bold);
    color: var(--c-black);
}

.nav-main li { position: relative; }

.nav-main li > a {
    padding-inline: var(--s-48);
    border-right: 1px solid var(--c-black);
}

.nav-main a:hover {
    color: var(--c-teal-dark);
}

.nav-main .sub-menu {
    position: absolute;
    z-index: 100;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease-in;
    list-style: none;
    background-color: var(--c-black);
}

.nav-main .nav .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    pointer-events: all;
}

.nav-main .sub-menu a { 
    font-size: var(--t--1);
    padding: var(--s-16) var(--s-12);
    border-right: 0;
    color: var(--c-off-white);
    line-height: 1;
    transition: background-color .2s ease;
}

.nav-main .sub-menu a:hover,
.nav-main .sub-menu li.current_page_item a  { 
    background-color: var(--c-teal-dark);
}

/* right navigation in header */
.nav-right {
    display: flex;
    margin-left: auto;
    font-family: var(--f-secondary);
    align-items: center
}

.nav-right a:not(.button) {
    margin-left: var(--s-16);
    font-size: var(--t--1);
    color: var(--c-black);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--t--2);
    text-decoration: none;
}

.nav-right-logged {
    margin-bottom: var(--s-12);
}

.nav-right a:not(.button):hover {
    color: var(--c-teal);
}

.nav-right .button {
    margin-bottom: 0;
    margin-left: var(--s-32);
}


/* social in header & footer */

.nav-social a {
    display: inline-block;
    text-indent: -99999px;
    text-align: left;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px;
    margin-left: var(--s-12);
    transition: opacity .25s ease-in;
}

.nav-social__header a { 
    margin-left: 0;
    background-size: 24px;
}

.nav-social a:hover { opacity: .8; }

.nav-social a[href^="https://www.facebook.com"] { background-image: url('assets/icons/facebook.svg'); }
.nav-social a[href^="https://twitter.com"]   { background-image: url('assets/icons/twitter.svg'); }
.nav-social a[href^="https://www.instagram.com"] { background-image: url('assets/icons/instagram.svg'); }
.nav-social a[href^="https://www.youtube.com"]  { background-image: url('assets/icons/youtube.svg'); }
.nav-social a[href^="https://www.linkedin.com"] { background-image: url('assets/icons/linkedin.svg'); }

.nav-social__header a[href^="https://www.facebook.com"] { background-image: url('assets/icons/facebook-dark.svg'); }
.nav-social__header a[href^="https://twitter.com"]   { background-image: url('assets/icons/twitter-dark.svg'); }
.nav-social__header a[href^="https://www.instagram.com"] { background-image: url('assets/icons/instagram-dark.svg'); }
.nav-social__header a[href^="https://www.youtube.com"]  { background-image: url('assets/icons/youtube-dark.svg'); }
.nav-social__header a[href^="https://www.linkedin.com"] { background-image: url('assets/icons/linkedin-dark.svg'); }


/* --------------------------------------------------------------------------

   Mobile Navigation

----------------------------------------------------------------------------- */

.menu-active.header { 
    padding-block-start: 0;
    align-items: center;
}

.menu-active .logo { 
    width: 75px;
    order: -1;
    margin-right: var(--s-24);
}

.menu-active .nav-right a {
    margin-bottom: 0;
    padding-right: 0;
    background-color: transparent;
    color: var(--c-teal-dark);
}

.menu-active .nav-right a:hover { color: var(--c-teal); }

.mean-push { display: none }

/* menu button */
.menu-reveal {
    display: block;
    margin: 0;
    border-bottom: none;
    padding: var(--s-24) var(--s-16);
    text-decoration: none;
    background-color: transparent;
}

.menu-reveal span {
	display: block;
	background: var(--c-black);
	height: 2px;
    width: 41px;
    color: var(--c-black);
    transition: background-color .2s ease;
}

.menu-reveal span:nth-child(2) {
    margin: 8px 0;
}

.menu-reveal:hover { background: transparent; }

.menu-reveal:hover span {
    background-color: var(--c-teal);
}

/* navigation items */

.nav-mobile .nav {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 5px;
    background-color: var(--c-off-white);
    border-top: 1px solid var(--c-black);
    z-index: 10000;
}

.nav-mobile .nav > li {
    position: relative;
    border-left: 1px solid var(--c-black);
    border-right: 1px solid var(--c-black);
}

.nav-mobile .sub-menu { 
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-mobile .sub-menu li a {
    padding-left: var(--s-32);
    
}

.nav-mobile .menu-item > a {
    display: flex;
    align-items: center;
    height: 74px;
    font-size: var(--t-1);
    border-bottom: 1px solid var(--c-black);
    padding: var(--s-16) var(--s-12) var(--s-16) var(--s-16);
    font-style: italic;
    font-weight: var(--f-bold);
    color: var(--c-black);
}

.nav-mobile .nav li:hover > a:not(.nav-expand),
.nav-mobile .current_page_item > a,
.nav-mobile .current-menu-ancestor > a {
    color: var(--c-teal);
}

.nav-mobile .nav .nav-expand {
    position: absolute;
	right: 0;
    top: 0;
    padding: var(--s-24) var(--s-32);
    color: var(--c-black);
    font-size: 30px;
    font-family: monospace;
    font-style: normal;
    line-height: 1.15;
    border-left: 1px solid var(--c-black);
    transition: all .2s ease;
    border-bottom: 0;
}

.nav-mobile .nav .nav-expand:hover {
    background-color: var(--c-black);
    color: var(--c-off-white);
}

/* for nav items without a URL that are "buckets" 

.nav-mobile .menu-item-has-children > a[href="#"] ~ .nav-expand  {
    background-color: transparent;
    width: 100%;
    text-align: right;
    border: 0;
}

.nav-mobile .menu-item-has-children > a[href="#"] ~ .nav-expand:hover {
    background-color: transparent;
}
*/

/* --------------------------------------------------------------------------

   Content

----------------------------------------------------------------------------- */

.main {
    margin-block: var(--s-128);
}

.issue-number {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--s-12) var(--s-24);
    background-color: var(--c-black);
    color: var(--c-off-white);
    font-size: var(--t--3);
    font-style: italic;
    font-weight: var(--f-bold);
    letter-spacing: .5px;
    z-index: 1;
    transition: background-color .2s ease;
}

.featured-img {
    margin-bottom: var(--s-24);
}

.page-header {
    text-align: center;
    margin-bottom: var(--s-64);
}

/* --------------------------------------------------------------------------

   Cards (used to display posts)

----------------------------------------------------------------------------- */


.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    text-decoration: none;
}

.card__link {
    color: var(--c-black);
    text-decoration: none;
}

.card__link:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}

.card__title {
    font-size: var(--t-1);
    font-style: italic;
}

.card__author {
    font-size: var(--t--2);
    font-weight: var(--f-semi);
    color: var(--c-teal);
}

.card__text {
    font-size: var(--t--2);
    font-family: var(--f-secondary);
    line-height: 1.8;
}

.card__img {
    width: 100%;
    order: -1;
    margin-bottom: var(--s-12);
    transition: filter .2s ease;
}

.card__meta {
    display: flex;
    align-content: center;
    align-items: baseline;
}

.card__meta .card__season {
    margin-left: var(--s-12);
}

.card__season {
    font-size: var(--t--3);
    font-family: var(--f-secondary);
}

/* card hover state */

.card:hover .card__title a {
    color: var(--c-teal);
}

.card:hover .card__img {
    filter: brightness(0.9);
}

.card:hover .issue-number {
    background-color: var(--c-teal-dark);
}

/* cards for the issue archive page & bottom of home */

.card--issue .card__title .card__link {
    font-size: var(--t-base);
    font-style: normal;
    color: var(--c-teal);
}

.card--issue .card__title {
    text-align: left;
    font-style: normal;
}

.card--issue .card__img {
    margin-bottom: var(--s-24);
    box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.25);
}



/* --------------------------------------------------------------------------

   Home

----------------------------------------------------------------------------- */

.home .main { margin-block-start: 0; }

/* Featured Posts -------------------------------------------------------- */

.featured-posts {
    margin-bottom: var(--s-128);
}

.featured-posts .card__title {
    font-weight: var(--f-semi);
}

.featured-posts article:nth-child(4) .card__title,
.featured-posts article:nth-child(5) .card__title {
    order: -1;
    padding-top: var(--s-64); 
    padding-right: var(--s-12);
}

.featured-posts article:nth-child(4):before,
.featured-posts article:nth-child(5):before {
    content: '';
    position: absolute;
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--c-black);
    order: -2;
}

.featured-posts article:nth-child(4) { border-right: 1px solid var(--c-black); }

.featured-posts article:nth-child(5):before { left: calc(-1 * var(--s-32)); }

/* different size type for cards */
.featured-posts article:first-of-type .card__title { font-size: var(--t-4); }

.featured-posts article:first-of-type .card__text { font-size: var(--t--1); }

.featured-posts .card__author {
    font-size: var(--t-base);
    font-weight: var(--f-bold);
}

.featured-posts article .card__season { font-size: var(--t--1); }

.featured-posts article:first-of-type .card__meta { padding-block: var(--s-8); }

.featured-posts article:nth-child(2) .card__title,
.featured-posts article:nth-child(3) .card__title { font-size: var(--t-3); }

.featured-posts article:nth-child(4) .card__title,
.featured-posts article:nth-child(5) .card__title { font-size: var(--t-2); }


/* CTA ---------------------------------------------------------------------- */

.cta {
    padding-block: var(--s-96);
    color: var(--c-off-white);
    text-align: center;
    background-color: var(--c-black);
    box-shadow: 0 0 0 100vmax var(--c-black);
    clip-path: inset(0 -100vmax);
}

.cta__title {
    font-size: 4rem;
    font-style: italic;
    font-weight: var(--f-semi);
    margin-bottom: var(--s-16);
}

.cta__text {
    font-family: var(--f-secondary);
    max-width: 50ch;
    margin: 0 auto var(--s-48);
}

/* Isues -------------------------------------------------------------------- */

.issues-section {
    padding-block-start: var(--s-128);
    text-align: center;
}

.issues-section__title {
    font-size: var(--t-5);
    text-align: center;
    margin: 0 auto var(--s-48);
    max-width: 23ch;
}

.issues-section .grid {
    margin-bottom: var(--s-64);
}

/* --------------------------------------------------------------------------

   Posts

----------------------------------------------------------------------------- */

.post-header {
    text-align: center;
    margin-bottom: var(--s-64);
}

.post-header a { text-decoration: none; }

.post-title {
    font-weight: var(--f-semi);
    margin-bottom: var(--s-32);
}

.post-subtitle {
    font-weight: var(--f-regular);
    font-style: italic;
}

.post-content .post-subtitle { display: none; } /* temp fix for parsing the subtitle */

.post-issue {
    font-weight: var(--f-semi);
}

.post-author {
    margin-block: var(--s-32) var(--s-48);
    font-size: var(--t-1);
    font-weight: var(--f-bold);
    font-style: italic;
}

.post-author a { font-style: normal; }

.post .featured-img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-block-start: var(--s-64);
}

.post-content h2,
.post-content h3 {
    text-transform: uppercase;
}

.post-content h2 {
    font-size: var(--t-3);
}

.post h3 {
    margin-left: 3ch;
    font-size: var(--t-2);
}


/* --------------------------------------------------------------------------

   Issue Taxonomy

----------------------------------------------------------------------------- */

.tax-issue .page-title {
    font-style: italic;
}

.tax-header {
    display: grid;
    gap: var(--s-128);
    grid-template-columns: 1fr 1.5fr;
    margin-bottom: var(--s-128);
}

.tax__season {
    font-family: var(--f-secondary);
    font-size: var(--t--1);
    color: var(--c-teal);
}

.tax__desc {
    max-width: 80ch;
}

.tax-header img {
    box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.25);
}

/* --------------------------------------------------------------------------

   Issue Archive Layout (tempaltes/issues.php)

----------------------------------------------------------------------------- */

.page-template-issues .page-title {
    text-align: center;
    font-style: italic;
}

.page-template-issues .page-header { text-align: left; }

.page-template-issues .page-title { text-align: center; }




/* --------------------------------------------------------------------------

   Footer

----------------------------------------------------------------------------- */

.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--c-black);
    color: var(--c-off-white);
    padding-block: var(--s-96);
    box-shadow: 0 0 0 100vmax var(--c-black);
    clip-path: inset(0 -100vmax);
    font-size: var(--t--1);
    font-family: var(--f-secondary);
}

.footer__logo {
    width: 12rem;
}

.footer p {
    max-width: 300px;
}

.footer p span {
    display: block;
    font-size: var(--t-base);
    font-family: var(--f-primary);
    font-weight: var(--f-semi);
    font-style: italic;
    line-height: 1.2;
    margin-bottom: var(--s-8);
}

.footer a {
    color: var(--c-off-white);
}

/* --------------------------------------------------------------------------

   WordPress

----------------------------------------------------------------------------- */

/* adjusting block styles */

.has-drop-cap:not(:focus):first-letter {
    font-size: 5em !important;
    line-height: .85 !important;
}

.wp-block-image {
    margin: 0 0 var(--s-24) !important;
}

.wp-block-separator { border-bottom: 0 !important; }

.wp-block-quote {
    border-left: 2px solid var(--c-teal);
    padding-left: var(--s-24);
    margin-block: var(--s-64);
}

.wp-block-image figcaption { 
    font-family: var(--f-secondary);
    text-align: center;
    font-size: var(--t--2);
}

.wp-block-spacer {
    height: 3rem !important;
}


/* --------------------------------------------------------------------------

   Leaky Paywall - all styling for leaky paywall plugin is here

----------------------------------------------------------------------------- */

/* form on login page */
#leaky-paywall-login-form {
    border: none;
    box-shadow: none;
    max-width: none;
    padding: 0;
}

/* paywall register button */
#leaky-paywall-submit,
.leaky-paywall-payment-button a {
    background-color: var(--c-black);
    color: var(--c-off-white);
    text-transform: none;
    border: none;
    border-radius: 0;
    padding: var(--s-16) var(--s-32);
    margin-top: 1rem;
    font-size: var(--t--1);
    font-family: var(--f-secondary);
}

#leaky-paywall-submit:hover {
    color: var(--c-black);
    background-color: var(--c-teal);
    text-decoration: none;
}

/* profile */
.leaky-paywall-profile-subscription-title,
.leaky-paywall-your-profile-header {
    font-size: var(--t-2);
}


/* subscription options */

.subscription-options-title {
    padding-top: var(--s-64);
    text-align: center;
}

.leaky_paywall_subscription_options {
    margin-left: calc(-90vw / 2 + 36.36rem / 2); /* using the narrow container size */
    margin-right: calc(-90vw / 2 + 36.36rem / 2);
    padding: var(--s-64) var(--gutter);
}

.leaky_paywall_subscription_option {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0;
    padding: var(--s-48) var(--s-24);
    background-color: transparent;
    color: var(--c-black);
    border: 1px solid;
}

#option-1.leaky_paywall_subscription_option {
    background-color: var(--c-black);
    color: var(--c-off-white);
    border: none;
}

#option-1.leaky_paywall_subscription_option .leaky_paywall_subscription_allowed_content {
    margin-top: 0;
    padding-top: 0;
}

#option-1.leaky_paywall_subscription_option .leaky_paywall_subscription_allowed_content strong {
    display: block;
    font-family: var(--f-secondary);
    font-size: var(--t--2);
    color: var(--c-teal-light);
    margin-bottom: 1.5em;
    font-weight: var(--f-regular);
    text-transform: uppercase;
}

.leaky_paywall_subscription_allowed_content {
    font-size: var(--t--1);
    border: none;
}

.leaky_paywall_subscription_option.current-level {
    border-color: var(--c-teal);
    box-shadow: none;
}

.leaky_paywall_subscription_option .leaky-paywall-subscription-current-level {
    font-family: var(--f-secondary);
    color: var(--c-teal-dark);
    letter-spacing: .5px;
}

.leaky_paywall_subscription_option.current-level .leaky-paywall-payment-button { display: none;}

.leaky-paywall-payment-button a {
    background-color: var(--c-teal);
    transition: background-color .2s ease;
}

.leaky-paywall-payment-button a:hover {
    background-color: var(--c-teal-dark);
}

/* nag restriction */
.leaky_paywall_message_wrap {
    background: linear-gradient(to bottom, rgba(244,242,233,0), rgba(244,242,233,0.5) 0.5em, var(--c-off-white) 5.5em, var(--c-off-white) 100%);
}

#leaky_paywall_message {
    background-color: var(--c-off-white);
    border: 1px solid var(--c-black);
    background: var(--c-black);
    color: var(--c-off-white);
    border-radius: 0;
    box-shadow: none;
}

#leaky_paywall_message a {
    color: var(--c-teal-light);
}


/* --------------------------------------------------------------------------

   Helper Classes

----------------------------------------------------------------------------- */


/* hide visually and from screen readers */

.hidden { display: none !important; }


/* hide visually, content accessible to screen readers */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}


/* hide visually and from screen readers, without affecting the layout */

.invisible { visibility: hidden; }




/* --------------------------------------------------------------------------

   Media Queries

----------------------------------------------------------------------------- */


 @media only screen and (max-width: 87.5em) {
    
    :root {
        --gutter: 2rem;
    }

    .logo img {
        width: 4.55rem;
    }

}

@media only screen and (max-width: 80em) { /* 1280 */
    
    :root {
        font-size: 20px;

        --t--4: .55rem;  /* 12px */
        --t--3: .64rem;  /* 14px */
        --t--2: .73rem;  /* 16px */
        --t--1: .82rem;  /* 18px */
        --t-base: 1rem;  /* 22px */
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .tax-header {
        gap: var(--s-32);
        grid-template-columns: 1fr;
    }


}

@media only screen and (max-width: 75em) { /* 1200 */

    :root {
       
        --t-1: 1.2rem;  /* 24px */
        --t-2: 1.4rem;  /* 28px */
        --t-3: 1.6rem;  /* 32px */
        --t-4: 1.8rem;  /* 36px */
        --t-5: 2rem;    /* 40px */
    }

    .grid-home,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-home {
        row-gap: var(--s-32);
    }

    .cta__title {
        font-size: 2.5rem;
    }

    /* featured posts at top of home */
    .featured-posts article:nth-child(4) { border: none; }

    .featured-posts article .card__title { font-size: var(--t-3) !important; }

    .featured-posts article .card__text { font-size: var(--t--1) !important; }

    .featured-posts article .card__season { font-size: var(--t--1) !important; }

    .featured-posts article:first-of-type .card__meta { padding-block: 0; }

    
    

}

@media only screen and (max-width: 67.5em) { /* 1080 */

    /* subscribe options */
    .leaky_paywall_subscription_options {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .leaky_paywall_subscription_option { width: 100%; }

    .footer {
        flex-direction: column;
        gap: var(--s-32);
        align-items: center;
    }

}


/* --------------------------------------------------------------------------

   Print

----------------------------------------------------------------------------- */


@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre { white-space: pre-wrap !important; }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead { display: table-header-group; }

    tr,
    img { page-break-inside: avoid; }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}