/*
Theme Name: Quiet Room
Theme URI: https://aspies.co.uk/
Author: Aspies
Description: A low-stimulation navy and periwinkle theme with a book-style centred header and reading-comfort switch, a photo hero with an overlapping panel, a numbered guide index, an energy-level gauge, a visual-routine split, saved-phrase cards, a note on language and a periwinkle reading shelf for Aspies, a guide for autistic adults in the UK.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quietroom
*/
@font-face{font-family:"Spectral";src:url("assets/fonts/spectral-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("assets/fonts/spectral-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inclusive Sans";src:url("assets/fonts/inclusive-sans.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
	--asp-ink:#0B1430;
	--asp-slate:#2C3A5A;
	--asp-peri:#8FA3D6;
	--asp-mist:#EEF2FA;
	--asp-line:#C9D2E6;
	--asp-mute:#3F4A63;
	--asp-sage:#5E7D6E;
	--asp-head:"Spectral",Georgia,"Times New Roman",serif;
	--asp-body:"Inclusive Sans","Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}
html.asp-roomy{font-size:118%}
html.asp-roomy body{line-height:1.95;letter-spacing:.012em;word-spacing:.06em}
body{margin:0;background:#fff;color:var(--asp-ink);font:400 1.08rem/1.75 var(--asp-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--asp-slate);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--asp-ink);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--asp-head);font-weight:600;line-height:1.18;margin:0 0 .55em}
.asp-skip{position:absolute;left:-9999px}
.asp-skip:focus{left:16px;top:12px;z-index:60;background:var(--asp-ink);color:#fff;padding:10px 16px}
.asp-wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.asp-kicker{font:400 .9rem/1.3 var(--asp-body);letter-spacing:.06em;color:var(--asp-mute);margin:0 0 .7rem}
.asp-h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--asp-ink)}

/* Header */
.asp-head{background:#fff;border-bottom:1px solid var(--asp-line)}
.asp-head-top{max-width:1120px;margin:0 auto;padding:22px 32px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.asp-brand{grid-column:2;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--asp-ink);font:600 2rem/1 var(--asp-head)}
.asp-brand img{width:40px;height:40px}
.asp-comfort{grid-column:3;justify-self:end;display:flex;border:1px solid var(--asp-line);border-radius:8px;overflow:hidden}
.asp-size{font:400 .86rem/1.2 var(--asp-body);background:#fff;color:var(--asp-ink);border:0;padding:8px 12px;cursor:pointer}
.asp-size+.asp-size{border-left:1px solid var(--asp-line)}
.asp-size[aria-pressed="true"]{background:var(--asp-ink);color:#fff}
.asp-menu-btn{display:none;grid-column:3;justify-self:end;font:400 1rem/1 var(--asp-body);background:var(--asp-mist);color:var(--asp-ink);border:1px solid var(--asp-line);border-radius:8px;padding:10px 16px;cursor:pointer}
.asp-nav{border-top:1px solid var(--asp-line)}
.asp-nav ul{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;gap:6px;max-width:1120px}
.asp-nav a{display:block;padding:13px 18px;text-decoration:none;color:var(--asp-ink)}
.asp-nav a:hover{text-decoration:underline}
.asp-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--asp-peri)}

/* Hero */
.asp-hero{position:relative;max-width:1280px;margin:36px auto 0;padding:0 32px}
.asp-hero-img{width:100%;height:560px;object-fit:cover}
.asp-hero-panel{position:relative;max-width:620px;margin:-150px 0 0 48px;background:var(--asp-mist);border-top:6px solid var(--asp-peri);padding:38px 42px 36px}
.asp-hero-panel h1{font-size:clamp(2.3rem,4.6vw,3.5rem);margin:0 0 .4em}
.asp-hero-panel p:last-child{margin:0;color:var(--asp-mute)}

/* Intro */
.asp-intro{padding:84px 0 70px}
.asp-intro-in{display:grid;grid-template-columns:1.1fr 1fr;gap:56px}
.asp-intro-big{font:400 1.75rem/1.45 var(--asp-head);margin:0;color:var(--asp-slate)}
.asp-intro-in p:last-child{margin:0;color:var(--asp-mute)}

/* Guide index */
.asp-guides{padding:0 0 90px}
.asp-index{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--asp-ink)}
.asp-index li{border-bottom:1px solid var(--asp-ink)}
.asp-index a{display:grid;grid-template-columns:140px 70px 1fr 1.3fr;align-items:center;gap:28px;padding:20px 0;text-decoration:none;color:var(--asp-ink)}
.asp-index img{width:140px;height:100px;object-fit:cover}
.asp-index-n{font:400 1.3rem/1 var(--asp-head);color:var(--asp-mute)}
.asp-index-t{font:600 1.9rem/1.1 var(--asp-head)}
.asp-index-s{color:var(--asp-mute)}
.asp-index a:hover .asp-index-t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* Energy */
.asp-energy{background:var(--asp-mist);padding:84px 0}
.asp-energy-lede{max-width:640px;color:var(--asp-mute);margin:0 0 34px}
.asp-levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.asp-levels li{background:#fff;padding:26px 24px;border:1px solid var(--asp-line)}
.asp-levels h3{font-size:1.4rem;margin:14px 0 6px}
.asp-levels p{margin:0;color:var(--asp-mute);font-size:1rem}
.asp-bar{display:flex;gap:5px}
.asp-bar i{flex:1;height:12px;border:1px solid var(--asp-slate);background:#fff}
.asp-lv4 .asp-bar i,.asp-lv3 .asp-bar i:nth-child(-n+3),.asp-lv2 .asp-bar i:nth-child(-n+2),.asp-lv1 .asp-bar i:first-child{background:var(--asp-sage);border-color:var(--asp-sage)}

/* Routine */
.asp-routine{padding:90px 0}
.asp-routine-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.asp-routine-in img{width:100%;border:12px solid var(--asp-mist)}
.asp-routine-copy p{color:var(--asp-mute)}

/* Scripts */
.asp-scripts{background:var(--asp-slate);color:#fff;padding:84px 0}
.asp-scripts .asp-h2{color:#fff}
.asp-scripts-lede{color:#DCE3F2;max-width:640px;margin:0 0 30px}
.asp-phrases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.asp-phrases li{background:#fff;color:var(--asp-ink);padding:24px 24px 26px;font:400 1.2rem/1.45 var(--asp-head);border-left:6px solid var(--asp-peri)}

/* Words */
.asp-words{padding:90px 0}
.asp-words-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.asp-words-in p{margin:0 0 18px;color:var(--asp-mute)}
.asp-words-in strong{color:var(--asp-ink)}

/* Close */
.asp-close{position:relative;max-width:1280px;margin:0 auto 90px;padding:0 32px}
.asp-close img{width:100%;height:480px;object-fit:cover}
.asp-close-q{position:absolute;right:72px;bottom:40px;max-width:430px;margin:0;background:#fff;padding:30px 32px;border-top:6px solid var(--asp-peri)}
.asp-close-q p{font:400 1.5rem/1.35 var(--asp-head);margin:0 0 14px}

/* Pages */
.asp-page-head{border-bottom:1px solid var(--asp-line);padding:70px 32px 40px}
.asp-page-head-in{max-width:760px;margin:0 auto}
.asp-page-head h1{font-size:clamp(2.3rem,4.6vw,3.4rem);margin:0}
.asp-page-body{max-width:760px;margin:0 auto;padding:48px 32px 100px}
.asp-page-body h2{font-size:1.8rem;margin-top:1.5em}
.asp-page-body h3{font-size:1.35rem;margin-top:1.3em}
.asp-page-body figure{margin:30px 0}
.asp-page-body figure img{max-width:460px;width:100%;border:10px solid var(--asp-mist)}
.asp-page-body figcaption{font-size:.95rem;color:var(--asp-mute);margin-top:10px}
.asp-page-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:1rem}
.asp-page-body th,.asp-page-body td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--asp-line);vertical-align:top}
.asp-page-body th{border-bottom:2px solid var(--asp-ink);font-weight:400;font-family:var(--asp-head);font-size:1.1rem}
.asp-page-body blockquote{margin:20px 0;border-left:4px solid var(--asp-peri);padding:6px 0 6px 20px;font-family:var(--asp-head);font-size:1.2rem}
.asp-page-body .asp-lede{font:400 1.35rem/1.55 var(--asp-head);color:var(--asp-slate)}
.asp-page-body .asp-note{background:var(--asp-mist);padding:18px 22px;margin:28px 0}
.asp-page-body .asp-next{margin-top:44px}

/* Reading field: The Quiet Shelf and singles */
.asp-field{background:#8FA3D6;color:#0B1430;padding:76px 32px 110px}
.asp-field a{color:#0B1430}
.asp-field .asp-kicker{color:#0B1430}
.asp-field h1,.asp-field h2,.asp-field h3,.asp-field h4{color:#0B1430}
.asp-shelf-head,.asp-titles,.asp-pager,.asp-shelf-none{max-width:1040px;margin-left:auto;margin-right:auto}
.asp-shelf-head{margin-bottom:36px;display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:end;border-bottom:2px solid #0B1430;padding-bottom:20px}
.asp-shelf-head .asp-kicker{grid-column:1/-1}
.asp-shelf-head h1{font-size:clamp(2.8rem,6vw,4.6rem);margin:0}
.asp-shelf-sub{margin:0 0 10px}
.asp-titles{list-style:none;padding:0;counter-reset:shelf;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.asp-titles li{counter-increment:shelf;border-bottom:1px solid rgba(11,20,48,.45);display:grid;grid-template-columns:3.2em 1fr}
.asp-titles li::before{content:counter(shelf,decimal-leading-zero);font-family:var(--asp-head);padding-top:13px}
.asp-titles a{display:block;padding:12px 0;text-decoration:none;line-height:1.45}
.asp-titles a:hover{text-decoration:underline}
.asp-pager{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px}
.asp-pager .page-numbers{display:inline-block;padding:8px 14px;border:1px solid #0B1430;text-decoration:none}
.asp-pager .current{background:#0B1430;color:#8FA3D6}
.asp-single-wrap{max-width:760px;margin:0 auto}
.asp-single-wrap h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.asp-single-body{font-size:1.12rem;line-height:1.85}
.asp-single-body a{text-decoration-thickness:1px}
.asp-single-body h2,.asp-single-body h3,.asp-single-body h4{margin-top:1.4em}
.asp-single-body img{margin:22px 0}
.asp-single-body table{width:100%;border-collapse:collapse}
.asp-single-body th,.asp-single-body td{border:1px solid #0B1430;padding:8px 10px;text-align:left}
.asp-single-body blockquote{border-left:4px solid #0B1430;margin:22px 0;padding:4px 0 4px 20px}
.asp-single-body pre,.asp-single-body code{background:#0B1430;color:#EEF2FA}

/* Contact form */
.asp-form{background:var(--asp-mist);padding:30px;margin-top:28px;border-top:6px solid var(--asp-peri)}
.asp-form-state:empty{display:none}
.asp-form-state{background:var(--asp-ink);color:#fff;padding:12px 16px}
.asp-form-body{display:grid;gap:16px}
.asp-input{display:grid;gap:6px}
.asp-input input,.asp-input textarea{font:inherit;padding:12px 14px;border:1px solid var(--asp-slate);border-radius:6px;background:#fff;color:var(--asp-ink)}
.asp-input input:focus,.asp-input textarea:focus{outline:3px solid var(--asp-peri);outline-offset:1px}
.asp-input-sum input{max-width:120px}
.asp-hint{margin:-6px 0 0;font-size:.95rem;color:var(--asp-mute)}
.asp-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.asp-send{justify-self:start;font:400 1.05rem/1 var(--asp-body);background:var(--asp-ink);color:#fff;border:0;border-radius:6px;padding:15px 26px;cursor:pointer}

/* Footer */
.asp-foot{background:var(--asp-mist);border-top:1px solid var(--asp-line)}
.asp-foot-in{max-width:1120px;margin:0 auto;padding:54px 32px 30px}
.asp-foot-line{margin:0 0 26px;font-family:var(--asp-head);font-size:1.25rem;color:var(--asp-slate)}
.asp-foot-name{font-weight:600;color:var(--asp-ink);margin-right:10px}
.asp-foot-nav{border-top:1px solid var(--asp-ink);border-bottom:1px solid var(--asp-ink);padding:14px 0}
.asp-foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 26px}
.asp-foot-legal{margin-top:8px!important}
.asp-foot-legal a{font-size:.95rem}
.asp-foot a{display:block;color:var(--asp-ink);text-decoration:none;padding:6px 0}
.asp-foot a:hover{text-decoration:underline}
.asp-foot-base{margin:18px 0 0;font-size:.92rem;color:var(--asp-mute)}

@media (max-width:980px){
	.asp-levels{grid-template-columns:1fr 1fr}
	.asp-phrases{grid-template-columns:1fr 1fr}
	.asp-index a{grid-template-columns:110px 50px 1fr;gap:18px}
	.asp-index img{width:110px;height:84px}
	.asp-index-s{grid-column:3}
}
@media (max-width:860px){
	.asp-head-top{grid-template-columns:auto 1fr auto}
	.asp-brand{grid-column:1}
	.asp-comfort{display:none}
	.asp-menu-btn{display:block}
	.asp-nav{display:none}
	.asp-menu-open .asp-nav{display:block}
	.asp-nav ul{flex-direction:column;padding:6px 32px 14px}
	.asp-menu-open .asp-comfort{display:flex;grid-column:1/-1;justify-self:start;order:3}
	.asp-intro-in,.asp-routine-in,.asp-words-in{grid-template-columns:1fr;gap:28px}
	.asp-hero-img{height:420px}
	.asp-hero-panel{margin:-90px 16px 0}
	.asp-close-q{position:relative;right:auto;bottom:auto;margin:-60px 16px 0;max-width:none}
	.asp-titles{grid-template-columns:1fr}
	.asp-shelf-head{grid-template-columns:1fr}
}
@media (max-width:600px){
	.asp-wrap,.asp-hero,.asp-close{padding-left:18px;padding-right:18px}
	.asp-hero-img{height:300px}
	.asp-hero-panel{margin:-50px 8px 0;padding:28px 24px}
	.asp-levels,.asp-phrases{grid-template-columns:1fr}
	.asp-index a{grid-template-columns:84px 1fr;gap:6px 16px}
	.asp-index img{width:84px;height:84px;grid-row:span 3}
	.asp-index-s{grid-column:2}
	.asp-close img{height:300px}
	.asp-field{padding:54px 16px 80px}
	.asp-intro-big{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}