/* Geometric type, useful hierarchy, tactile stock. */
@font-face{font-family:Jost;src:url('/assets/jost-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url('/assets/jost-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{--display:Jost,Futura,Arial,sans-serif;--body:Jost,Futura,Arial,sans-serif;--paper:#f8efd9}
body{font-family:var(--body);font-size:18px;background-image:linear-gradient(#f8efd9d9,#f8efd9d9),url('/assets/ivory-paper.jpg');background-size:auto,720px 720px}
h1,h2,h3,button,input,select,textarea{font-family:var(--body)}h1,h2,h3{letter-spacing:-.035em!important}h1 em,h2 em{font-style:normal!important;transform:none!important;text-shadow:none!important}.hero h1{font-size:clamp(46px,5.5vw,80px);line-height:1.06}.hero h1 em{color:var(--ink)}.hero-copy>p{font-size:20px;line-height:1.6}.eyebrow{font-size:13px;letter-spacing:.1em}.button,.nav-cta{border-radius:4px;box-shadow:none;font-weight:700}.button:hover,.nav-cta:hover{box-shadow:3px 3px 0 var(--ochre)}.button.light{box-shadow:none}.hero-media{border-radius:4px;box-shadow:8px 8px 0 var(--ochre)}.hero-media .photo-caption{background:var(--ink)}.photo-caption strong{font-family:var(--body)}.topline span:first-child{border-radius:2px}.choose-path{border-radius:0 0 48px 0}.choose-path h2{font-size:30px}.wood-feature{border-radius:72px 4px 4px 4px}.wood-feature h2{font-size:clamp(42px,4.8vw,67px)}.wood-feature h2 em{color:#f4c266}.editorial-split{border-radius:4px 48px 4px 4px;background-image:linear-gradient(#e8b044ee,#e8b044ee),url('/assets/ivory-paper.jpg');background-size:auto,720px}.note-card{border-width:1px;border-radius:2px;padding:30px!important;background:#faf5e9}.note-card h3{font-size:31px}.note-grid .note-card:nth-child(2){transform:none}.note-grid .note-card:nth-child(2):hover{transform:translateY(-4px)}.product{border-radius:3px;box-shadow:none;border-width:1px}.product .shop-photo{border-bottom-width:1px}.product-body h3{font-size:32px}.products .product:nth-child(2){margin-top:0;margin-bottom:0}.cta{border-radius:4px 64px 4px 4px;box-shadow:none}.note-body{font-size:19px;line-height:1.8;max-width:760px}.note-body section{margin-bottom:40px}.note-body section:first-child{border-top:5px solid var(--orange);padding-top:24px}.note-body h2{font-size:34px;line-height:1.15}.note-body a{text-decoration:underline;text-underline-offset:3px}.note-body section:first-child>div:first-letter{font-size:1.6em;font-weight:700;color:var(--orange)}.article-layout aside{font-size:15px}.legal-copy{max-width:780px;padding-bottom:70px}.legal-copy h2{font-size:30px;margin-top:36px}.legal-copy p{font-size:18px}.privacy-note{font-size:15px;line-height:1.5;margin:16px 0}.privacy-note a,.legal-copy a{text-decoration:underline}.footer-bottom{gap:20px;flex-wrap:wrap}.footer-bottom a{font-size:14px}.note-body .editorial-disclosure{font-size:14px;border-top:1px solid var(--line);padding-top:18px}.sign-review{border-radius:3px}.sign-choice{border-radius:4px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.wood-feature a:focus-visible,.cta a:focus-visible{outline-color:#fff4db}
@media(max-width:800px){body{font-size:17px}.hero h1{font-size:clamp(44px,9vw,66px)}.hero-copy>p{font-size:18px}.hero-media{border-radius:3px}.choose-path h2{font-size:29px}.wood-feature{border-radius:40px 3px 3px 3px}.wood-feature h2{font-size:43px}.note-body{font-size:18px}.note-body h2{font-size:29px}.footer-bottom{align-items:flex-start}.cta{border-radius:3px 40px 3px 3px}}

/* The complete Boston Art Review system must stay inside every frame. */
img[src="/assets/photo-1.jpg"]{display:block!important;position:static!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:1500/893!important;object-fit:contain!important;object-position:center!important;border-radius:3px!important;transform:none!important}
.story:has(img[src="/assets/photo-1.jpg"]),.wood-intro:has(img[src="/assets/photo-1.jpg"]),.service-detail:has(img[src="/assets/photo-1.jpg"]),.material-section:has(img[src="/assets/photo-1.jpg"]){grid-template-columns:1fr;gap:32px}
.story:has(img[src="/assets/photo-1.jpg"]) .reading,.wood-intro:has(img[src="/assets/photo-1.jpg"])>div,.service-detail:has(img[src="/assets/photo-1.jpg"])>div{max-width:850px}
/* Walnut is an accent surface; forms and product backdrops stay clear. */
.wood-feature{background-color:#143f39;background-image:linear-gradient(#143f39db,#143f39db),url('/assets/walnut-grain.jpg');background-size:auto,900px 900px}
.shop-banner,.quiet-callout{background-color:#eee0c6;background-image:linear-gradient(#f3e6c9eb,#f3e6c9eb),url('/assets/walnut-grain.jpg');background-size:auto,900px 900px}
footer{background-image:linear-gradient(#f8efd9ed,#f8efd9ed),url('/assets/walnut-grain.jpg');background-size:auto,900px 900px}

/* The cat crosses a dedicated masthead runway while navigation stays still and easy to use. */
header.site-header{height:auto;min-height:168px;display:grid;grid-template-columns:minmax(190px,1fr) auto;grid-template-rows:104px 64px;position:relative;align-items:center;border-bottom:2px solid var(--ink)}
.cat-logo-track{grid-column:1/-1;grid-row:1;align-self:stretch;position:relative;overflow:hidden;border-bottom:1px solid var(--ink);background:linear-gradient(90deg,#e4a735 0 29%,#f4d9c2 29% 57%,#dfe6ce 57% 100%)}
.cat-track-heading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font:700 clamp(27px,4.5vw,62px)/1 Jost,Futura,Arial,sans-serif;letter-spacing:.07em;color:#103b3b24}
.cat-logo-runner{position:absolute;left:18px;top:50%;z-index:2;display:block;width:164px!important;height:auto!important;max-width:none!important;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(0 2px 0 #fff4db)}
.header-home{grid-column:1;grid-row:2;justify-self:start;display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.header-home strong{font:700 21px/1 Jost,Futura,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.header-home span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
header.site-header nav{grid-column:2;grid-row:2;justify-self:end}
header.site-header .menu{grid-column:2;grid-row:2;justify-self:end}
@media(prefers-reduced-motion:no-preference){
 .cat-logo-runner{animation:cat-crossing 18s linear infinite,cat-step .52s steps(2,end) infinite}
 @keyframes cat-crossing{0%{left:-175px;opacity:0}4%{opacity:1}93%{opacity:1}100%{left:calc(100% + 12px);opacity:0}}
 @keyframes cat-step{from{transform:translateY(-50%) rotate(-.65deg)}to{transform:translateY(calc(-50% - 4px)) rotate(.65deg)}}
}

/* Listening Notes borrow the hierarchy, rules, dials, and confident color of vintage hi-fi advertising. */
.listening-ad{--ad-accent:#aa3a23;--ad-panel:#e4a735;--ad-soft:#f2d6bb;--ad-dark:#103b3b}
.listening-ad[data-note="clear-sound-without-more-volume"]{--ad-accent:#174d48;--ad-panel:#e3ad38;--ad-soft:#dfe6ce}
.listening-ad[data-note="materials-and-purpose"]{--ad-accent:#663650;--ad-panel:#e6b34a;--ad-soft:#ecd9df}
.listening-ad[data-note="boston-symphony-hall-acoustics"]{--ad-accent:#213f68;--ad-panel:#d45a2f;--ad-soft:#d9e1e5}
.listening-ad[data-note="cambridge-hifi-klh"]{--ad-accent:#9b351f;--ad-panel:#d9b13f;--ad-soft:#efd6c4}
.listening-ad[data-note="altec-lansing-voice-of-the-theatre"]{--ad-accent:#153f39;--ad-panel:#d66a32;--ad-soft:#dce1c9}
.listening-ad[data-note="jbl-vintage-cabinets"]{--ad-accent:#6b304d;--ad-panel:#e1a938;--ad-soft:#ead8df}
.listening-ad[data-note="bauhaus-materials-and-listening"]{--ad-accent:#a8321d;--ad-panel:#e3ad38;--ad-soft:#dce4cc}
.article-ad-hero,.listening-cover{margin:18px 0 68px;border:3px solid var(--ink);background:#fff8e8;box-shadow:8px 8px 0 var(--ochre);overflow:hidden}
.ad-running-head{display:flex;justify-content:space-between;gap:20px;padding:10px 15px;background:var(--ink);color:var(--paper);font:700 12px/1.3 Jost,Futura,Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.article-ad-hero .ad-running-head{background:var(--ad-accent)}
.article-ad-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:45px;padding:52px;background-color:#fff8e8;background-image:radial-gradient(var(--ad-accent) .7px,transparent .7px);background-size:7px 7px}
.article-ad-copy{max-width:850px}
.article-ad-copy .eyebrow{display:inline-block;color:var(--ad-accent);margin-bottom:20px}
.article-ad-copy h1{font-size:clamp(50px,7.2vw,103px);line-height:.98;letter-spacing:-.045em!important;margin:0;max-width:980px}
.article-ad-copy p{max-width:680px;margin:26px 0 0;font-size:21px;line-height:1.5;color:var(--ink)}
.ad-control,.cover-control{position:relative;justify-self:center;width:220px;aspect-ratio:1;border:4px solid var(--ink);border-radius:50%;background:var(--ad-panel);display:grid;place-items:center;text-align:center;box-shadow:inset 0 0 0 12px var(--ad-panel),inset 0 0 0 15px var(--ink),0 8px 0 #0000001f;transform:rotate(4deg)}
.ad-control span,.cover-control span{position:absolute;top:28px;font:700 12px Jost,Futura,Arial,sans-serif;letter-spacing:.18em}
.ad-control strong,.cover-control strong{font:700 49px/.78 Fraunces,Georgia,serif;letter-spacing:-.04em}
.ad-control small,.cover-control small{position:absolute;bottom:28px;font:700 11px Jost,Futura,Arial,sans-serif;letter-spacing:.16em}
.ad-control i,.cover-control i{position:absolute;right:18px;top:50%;width:27px;height:4px;background:var(--ink);transform:rotate(-8deg);transform-origin:left center}
.ad-strap{padding:23px 34px;border-top:3px solid var(--ink);background:var(--ad-panel);font:700 clamp(22px,3vw,38px)/1.15 Fraunces,Georgia,serif;letter-spacing:-.02em}
.ad-spec-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink);background:var(--ad-dark);color:var(--paper)}
.ad-spec-strip span{padding:14px 18px;font:700 12px/1.3 Jost,Futura,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.ad-spec-strip span+span{border-left:1px solid #fff4db70}
.vintage-article{grid-template-columns:245px minmax(0,1fr);gap:55px;padding-bottom:80px}
.vintage-article aside{position:sticky;top:20px;align-self:start;border-top:5px solid var(--ad-accent);padding-top:20px}
.vintage-article aside ol{list-style:none;padding:0;margin:18px 0 36px}
.vintage-article aside li{margin:0;border-top:1px solid var(--line)}
.vintage-article aside a{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:12px 0;font-size:14px;line-height:1.35}
.vintage-article aside a b{color:var(--ad-accent);font-family:Jost,Futura,Arial,sans-serif;font-size:12px;letter-spacing:.08em}
.listening-ad .note-body{max-width:980px}
.listening-ad .ad-copy-section{display:grid;grid-template-columns:90px minmax(0,1fr);gap:26px;margin:0;padding:39px 34px;border-top:3px solid var(--ink);scroll-margin-top:25px}
.listening-ad .ad-copy-section:nth-child(even){background:var(--ad-soft)}
.listening-ad .ad-copy-section:first-child{background:var(--ad-panel);border:3px solid var(--ink);padding:44px 38px;margin-bottom:22px}
.section-number{font:700 46px/1 Jost,Futura,Arial,sans-serif;letter-spacing:-.05em;color:var(--ad-accent)}
.listening-ad .ad-copy-section:first-child .section-number{color:var(--ink)}
.listening-ad .ad-copy-section .eyebrow{display:block;color:var(--ad-accent);margin-bottom:10px}
.listening-ad .ad-copy-section:first-child .eyebrow{color:var(--ink)}
.listening-ad .ad-copy-section h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;margin:0 0 18px;letter-spacing:-.035em!important}
.section-text{font-size:18px;line-height:1.78;color:#233f3b}
.citation{vertical-align:super;line-height:0;margin-left:3px}
.citation a{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--ad-accent);color:white!important;text-decoration:none!important;font:700 11px/1 Jost,Futura,Arial,sans-serif}
.stereo-specs{display:grid;grid-template-columns:155px 1fr;margin:8px 0 0;border-top:2px solid var(--ink)}
.stereo-specs dt,.stereo-specs dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.stereo-specs dt{font:700 14px Jost,Futura,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ad-accent)}
.listening-ad .article-sources{display:block;margin:54px 0 0;padding:38px;background:var(--ad-dark);color:var(--paper);border:3px solid var(--ink)}
.article-sources .sources-heading{display:grid;grid-template-columns:1fr 2fr;gap:25px;align-items:end;padding-bottom:24px}
.article-sources .eyebrow{color:#efbd51}
.article-sources h2{font-size:clamp(31px,4vw,49px);margin:0;color:var(--paper)}
.article-sources ol{list-style:none;margin:0;padding:0;border-top:1px solid #fff4db70}
.article-sources li{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid #fff4db70}
.source-number{font:700 25px Jost,Futura,Arial,sans-serif;color:#efbd51}
.article-sources li div{display:flex;flex-direction:column;gap:3px}
.article-sources li strong{font-size:17px;line-height:1.35;color:var(--paper)}
.article-sources li div span{font-size:14px;color:#d6d4c6}
.article-sources li>a{font:700 13px Jost,Futura,Arial,sans-serif;color:var(--paper);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.article-actions{padding-top:28px}
.listening-cover{margin-top:32px}
.listening-cover-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:45px;padding:52px;background-color:#f0c04e;background-image:radial-gradient(#103b3b1b .8px,transparent .8px);background-size:7px 7px}
.listening-cover h1{font-size:clamp(64px,9vw,125px);line-height:.82;margin:18px 0 26px;letter-spacing:-.055em!important}
.listening-cover p{max-width:690px;font-size:20px;line-height:1.55;margin:0}
.cover-control{background:#e9dce2;transform:rotate(-4deg)}
.cover-control strong{font-size:45px}
.journal-note-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:55px}
.note-number{display:block;font:700 42px/1 Jost,Futura,Arial,sans-serif;letter-spacing:-.05em;color:var(--orange);margin-bottom:28px}
.journal-note-grid .note-card{min-height:390px}
.journal-note-grid .note-card:nth-child(4n+1){background:#f5d7bd}
.journal-note-grid .note-card:nth-child(4n+2){background:#e0e6ce}
.journal-note-grid .note-card:nth-child(4n+3){background:#eadce3}
.journal-note-grid .note-card:nth-child(4n){background:#f0c85f}

@media(max-width:1100px){
 header.site-header{grid-template-columns:170px auto}
 .header-home span{display:none}
 .article-ad-grid,.listening-cover-grid{grid-template-columns:minmax(0,1fr) 190px;padding:40px}
 .ad-control,.cover-control{width:180px}
 .ad-control strong,.cover-control strong{font-size:40px}
 .vintage-article{grid-template-columns:205px minmax(0,1fr);gap:35px}
 .journal-note-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
 header.site-header{min-height:152px;grid-template-columns:1fr auto;grid-template-rows:88px 64px}
 .cat-logo-track{height:88px}
 .cat-logo-runner{width:135px!important}
 .cat-track-heading{font-size:clamp(22px,6vw,38px)}
 .header-home strong{font-size:19px}
 header.site-header nav{top:152px;grid-column:1/-1;grid-row:auto}
 .article-ad-hero,.listening-cover{margin-bottom:48px;box-shadow:5px 5px 0 var(--ochre)}
 .article-ad-grid,.listening-cover-grid{grid-template-columns:minmax(0,1fr) 145px;gap:24px;padding:30px 25px}
 .article-ad-copy h1{font-size:clamp(43px,10vw,67px)}
 .article-ad-copy p,.listening-cover p{font-size:18px}
 .ad-control,.cover-control{width:140px;border-width:3px;box-shadow:inset 0 0 0 8px var(--ad-panel),inset 0 0 0 11px var(--ink),0 5px 0 #0000001f}
 .cover-control{box-shadow:inset 0 0 0 8px #e9dce2,inset 0 0 0 11px var(--ink),0 5px 0 #0000001f}
 .ad-control strong,.cover-control strong{font-size:31px}
 .ad-control span,.cover-control span{top:18px}.ad-control small,.cover-control small{bottom:18px}.ad-control i,.cover-control i{right:10px;width:20px;height:3px}
 .ad-strap{padding:20px 24px}
 .ad-spec-strip{grid-template-columns:1fr}
 .ad-spec-strip span+span{border-left:0;border-top:1px solid #fff4db70}
 .vintage-article{grid-template-columns:1fr;gap:28px}
 .vintage-article aside{position:static}
 .vintage-article aside ol{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
 .listening-ad .ad-copy-section{grid-template-columns:56px minmax(0,1fr);gap:17px;padding:30px 20px}
 .listening-ad .ad-copy-section:first-child{padding:32px 22px}
 .section-number{font-size:33px}
 .section-text{font-size:17px}
 .article-sources .sources-heading{grid-template-columns:1fr}
 .article-sources li{grid-template-columns:42px minmax(0,1fr)}
 .article-sources li>a{grid-column:2}
 .listening-cover h1{font-size:clamp(55px,14vw,88px)}
}
@media(max-width:520px){
 .header-home span{display:none}
 .article-ad-grid,.listening-cover-grid{grid-template-columns:1fr}
 .ad-control,.cover-control{width:132px;justify-self:start}
 .ad-running-head span:nth-child(2){display:none}
 .article-ad-copy p{margin-top:20px}
 .vintage-article aside ol{grid-template-columns:1fr}
 .listening-ad .ad-copy-section,.listening-ad .ad-copy-section:first-child{grid-template-columns:1fr;padding:27px 19px}
 .section-number{font-size:28px}
 .stereo-specs{grid-template-columns:1fr}
 .stereo-specs dt{border-bottom:0;padding-bottom:3px}
 .stereo-specs dd{padding-top:0}
 .listening-ad .article-sources{padding:27px 20px}
 .journal-note-grid{grid-template-columns:1fr}
}
