/*
Theme Name: On The Grind
Description: Editorial theme for On The Grind Magazine.
Version: 1.1.0
Text Domain: on-the-grind
*/
.otg-skip{position:fixed;z-index:99999;top:8px;left:8px;transform:translateY(-180%);background:var(--paper);color:var(--ink);padding:.6rem 1rem}
.otg-skip:focus{transform:none}
.otg-global-nav{gap:clamp(15px,3.3vw,50px)}
.inner{width:min(1240px,calc(100% - clamp(32px,8vw,112px)));margin-inline:auto;padding:clamp(38px,6vw,88px) 0 clamp(56px,7.4vw,106px)}
.inner.narrow:not(.article){max-width:720px}
.inner h1,.inner h2,.inner h3{font-family:var(--display);font-weight:400;letter-spacing:-.038em;text-wrap:balance}
.inner h1{font-size:clamp(49px,8vw,113px);line-height:.95;max-width:15ch;margin:.13em 0 .22em;overflow-wrap:break-word}
.inner h2{font-size:clamp(30px,4.5vw,59px);line-height:1.02}
.inner h3{font-size:clamp(24px,3.2vw,39px);line-height:1.09}
.eyebrow{display:block;color:var(--red);font:800 .69rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.inner>.eyebrow:first-child,.otg-back{border-top:3px solid var(--ink);padding-top:14px}
.intro{color:var(--muted);max-width:62ch;font-size:clamp(1.02rem,1.65vw,1.28rem);line-height:1.55;margin:0 0 clamp(23px,4vw,45px)}
.inner>h2+.intro{margin-top:13px;margin-bottom:24px}
.inner>div+h2,.inner>figure+h2{margin-top:35px}
.inner>.button,.inner .offer-list+.button{margin-top:22px}
.inner .img-wrap,.artist-img{overflow:hidden;background:#e8e0d3}
.inner .img-wrap img,.inner>.wide-image{height:auto}
.inner>.img-wrap .wide-image,.inner>.wide-image{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:center 58%}
.inner .section-head{margin-top:44px}
.inner .section-head .eyebrow{margin-bottom:6px}
.otg-back{width:fit-content;display:block;color:var(--red);font-size:.69rem;line-height:1.4;text-transform:uppercase;font-weight:800;letter-spacing:.1em}
.inner.article{max-width:1070px}
.article .intro{font-family:var(--display);font-size:clamp(1.22rem,2.6vw,2rem);line-height:1.25;letter-spacing:-.014em;max-width:38ch}
.article>.otg-byline{margin:25px 0 11px}
.otg-article-image{margin:0 0 clamp(26px,5vw,54px)}
.otg-article-image img{width:100%;height:auto;aspect-ratio:1.92;max-height:570px;object-fit:cover;object-position:50% 60%}
.otg-article-image figcaption{font-size:.8rem;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--rule)}
.body-copy{max-width:685px;margin-inline:auto;font-family:Georgia,serif;font-size:clamp(18px,2vw,22px);line-height:1.68}
.body-copy :where(p,h2,h3,ul,ol,figure,blockquote){margin:0 0 1em}
.body-copy a:not(.button){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.body-copy .otg-byline{margin-top:34px;padding-top:15px;border-top:1px solid var(--rule)}
.body-copy .button{font-family:var(--sans)}
.magazine-filters{display:flex;flex-wrap:wrap;gap:5px 20px;border-block:1px solid var(--rule);margin-bottom:25px}
.magazine-filters button{border:0;border-bottom:2px solid transparent;background:transparent;font:800 .68rem/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);padding:13px 2px}
.magazine-filters button:is(:hover,.active){border-bottom-color:var(--red);color:var(--red)}
.story-grid,.products,.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.1vw,29px)}
.otg-magazine-index .story-grid:not(.is-filtered)>.story:first-child{grid-column:span 2}
.story-grid .story,.products>a,.plan{min-width:0;border-top:1px solid var(--ink);padding-top:12px}
.story-grid .story[hidden]{display:none!important}
.story-grid .img-wrap,.products .img-wrap{height:clamp(155px,21vw,285px);margin-bottom:12px}
.story-grid .img-wrap img,.products .img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 57%;transition:scale .36s ease}
.story-grid a.story:hover img,.products a:hover img{scale:1.025}
.story-grid h2,.products h2{font-size:clamp(24px,3.15vw,40px);margin:6px 0}
.story-grid .story p,.products a p{font-size:.92rem;line-height:1.45}
.inner:not(.otg-magazine-index)>.story-grid{grid-template-columns:1.18fr 1fr 1fr}
.inner:not(.otg-magazine-index)>.story-grid .img-wrap{height:auto;aspect-ratio:1/1.08;margin:0}
.inner:not(.otg-magazine-index)>.story-grid .img-wrap img{height:100%}
.offer-list{display:grid;border-top:1px solid var(--ink);margin-top:30px}
.offer-list a{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:13px;align-items:center;border-bottom:1px solid var(--rule);padding:15px 0}
.offer-list .n,.offer-list .arr{color:var(--red)}
.otg-contact .submission{max-width:690px;border-top:1px solid var(--ink);padding-top:25px}
.submission{display:grid;gap:13px}
.submission label,.product-layout label{display:grid;gap:6px;font-size:.83rem;font-weight:650}
.submission input:not([type=checkbox]),.submission textarea,.product-layout select{width:100%;min-height:48px;border:1px solid var(--rule);border-radius:0;background:#fffdf6;color:var(--ink);padding:10px 12px;font:inherit}
.submission textarea{min-height:137px;resize:vertical}
.submission label.check{display:flex;align-items:flex-start;gap:8px;font-size:.78rem;font-weight:500}
.submission input[type=checkbox]{accent-color:var(--red);margin:.22em 0 0}
.submission .button{justify-self:start;border:0}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ce342d;outline-offset:3px}
.artist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.1vw,29px)}
.artist-card{display:block;border-top:1px solid var(--ink);padding-top:12px}
.artist-img{aspect-ratio:4/4.6;margin-bottom:12px}
.artist-img img,.artist-hero>img{object-position:center 64%}
.artist-meta,.artist-location,.artist-bio p,.artist-music p{color:var(--muted)}
.artist-meta{font-size:.8rem}
.artist-hero{display:grid;grid-template-columns:1fr .96fr;background:#201b18;color:#fffaf1;min-height:365px}
.artist-hero>img{aspect-ratio:1.18;height:100%}
.artist-hero-info{align-self:center;padding:clamp(20px,4vw,52px)}
.artist-hero h1{font-size:clamp(47px,7vw,89px)}
.artist-hero .eyebrow,.artist-hero a{color:#ffafa5}
.artist-hero .artist-location{color:#e3d7ca}
.artist-bio,.artist-music{margin-top:32px;border-top:1px solid var(--ink);padding-top:15px}
.artist-bio p{white-space:pre-line;max-width:65ch;margin-top:12px}
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;font-size:.77rem;font-weight:700}
.social-links a{text-decoration:underline;text-underline-offset:.25em}
.products{grid-template-columns:repeat(4,minmax(0,1fr))}
.products .img-wrap{height:auto;aspect-ratio:1}
.product-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(18px,4vw,55px);border-top:1px solid var(--ink);padding-top:18px;align-items:start}
.product-layout .img-wrap img{aspect-ratio:1;object-fit:cover}
.product-layout>div+div{display:grid;gap:15px;padding:clamp(15px,3vw,36px);background:#eee7d9}
.product-layout label{margin-top:10px}
.product-layout select{margin-top:4px}
.plan{display:flex;flex-direction:column;gap:12px;padding:16px 14px;background:#eee7d9}
.plan h2{font-size:clamp(29px,3vw,43px)}
.plan .price{margin-top:auto;border-top:1px solid var(--rule);padding-top:12px;font-family:var(--display);font-size:1.55rem}
.plan .price small{font-family:var(--sans);font-size:.75rem}
.otg-site-footer{background:#201b18;color:#fffaf1}
.otg-site-footer>div{width:min(1240px,calc(100% - clamp(32px,8vw,112px)));margin:auto;padding:clamp(23px,4vw,45px) 0;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
.footer-top h2{font:400 clamp(32px,5vw,54px)/1.05 var(--display);margin:6px 0}
.footer-top :is(.eyebrow,a:hover),.footer-bottom a:hover{color:#ffafa5}
.footer-top p{margin-top:7px;color:#dfd6cc}
.footer-top .submission{width:min(100%,400px)}
.footer-bottom{border-top:1px solid #786c60;font-size:.8rem}
.footer-bottom>div{display:flex;flex-wrap:wrap;gap:12px}
.footer-bottom .brand b{font:400 24px/1 var(--mark);display:block}
.footer-bottom .brand i{font-style:normal;color:#ff8076}
.footer-bottom .brand span{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em}
@media(max-width:740px){
  .otg-global-nav{gap:19px}
  .inner,.otg-site-footer>div{width:calc(100% - 32px)}
  .story-grid,.products,.plans,.artist-grid,.inner:not(.otg-magazine-index)>.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .otg-magazine-index .story-grid:not(.is-filtered)>.story:first-child .img-wrap{height:clamp(210px,48vw,360px)}
  .artist-hero{min-height:0}
  .artist-hero>img{aspect-ratio:.85}
  .product-layout>div+div{padding:15px}
}
@media(max-width:480px){
  .inner h1{font-size:clamp(39px,10.8vw,57px)}
  .artist-hero,.product-layout{grid-template-columns:minmax(0,1fr)}
  .artist-hero>img{aspect-ratio:1.23}
  .artist-grid,.plans{grid-template-columns:minmax(0,1fr)}
  .artist-img{aspect-ratio:1.24}
  .products h2,.story-grid h2{font-size:clamp(22px,6vw,30px)}
  .story-grid .story p,.products a p{font-size:.8rem}
  .footer-bottom>div{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.story-grid .img-wrap img,.products .img-wrap img{transition:none}}