@font-face{
font-family:Journal;
src:local('Georgia');
font-display:swap}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:24px}
body{
margin:0;
background:#f4f3ef;
color:#22211f;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
-webkit-font-smoothing:antialiased}
a{
color:inherit;
text-decoration:none}
button,input{
font:inherit}
button,a,input{
touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{
outline:3px solid #201f1c;
outline-offset:3px;
box-shadow:0 0 0 6px #f6f4ef}
a:hover{
color:var(--signal-dark)}
img{
display:block;
max-width:100%}
.wrap{
max-width:1520px;
margin:0 auto;
padding:0 48px}
.topline{
height:67px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border-bottom:1px solid #262522}
.wordmark{
font:700 25px Georgia,serif;
letter-spacing:-1.2px}
.wordmark span{
font:12px Arial;
vertical-align:top;
margin-left:3px}
.tagline{
font-size:14px}
.social-link{
font-size:14px}
.masthead{
font:700 clamp(85px,16.7vw,250px)/1.13 Georgia,serif;
letter-spacing:-.072em;
display:flex;
align-items:center;
justify-content:space-between;
color:var(--signal);
padding-bottom:10px}
.masthead:hover{
color:var(--signal)}
.star{
font-family:Georgia,serif;
font-weight:400;
font-size:.56em;
line-height:1;
letter-spacing:-.02em;
margin-top:.11em}
.navigation{
border-top:1px solid #262522;
border-bottom:1px solid #262522;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:59px;
font-size:14px}
.topline+.navigation{
border-top:0}
.navigation>div{
display:flex;
gap:36px;
align-items:center;
flex-wrap:wrap}
.navigation a{
padding:20px 0}
.navigation a[aria-current]{
color:var(--signal-dark);
text-decoration:underline;
text-underline-offset:7px}
.search-link{
display:flex;
gap:12px;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px}
.feature{
display:grid;
grid-template-columns:1fr 1fr;
min-height:560px;
border-bottom:1px solid #262522}
.feature-copy{
padding:29px 45px 24px 0;
display:flex;
flex-direction:column}
.eyebrow{
text-transform:uppercase;
font-size:12px;
letter-spacing:.1em;
display:flex;
align-items:center;
gap:9px}
.tiny-star{
font-size:21px;
color:var(--signal)}
.issue{
margin-left:auto;
color:#69665e}
.feature-title-group{
margin:auto 0;
padding:40px 0}
.feature-title-group>time{
font-size:13px;
color:#68645e}
.feature h1{
font:400 clamp(46px,5.8vw,83px)/.99 Georgia,serif;
letter-spacing:-.047em;
max-width:560px;
margin:22px 0}
.feature h1 a:hover{
color:var(--signal-dark)}
.feature p{
font:18px/1.65 Georgia,serif;
max-width:420px;
margin:0 0 27px;
color:#59564f}
.read-link{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:40px;
border-bottom:1px solid #22211f;
padding:8px 0;
font-size:14px}
.read-link span{
font-size:22px}
.feature-signoff{
display:flex;
justify-content:space-between;
gap:12px;
font-size:12px;
color:#666159}
.feature-image{
position:relative;
overflow:hidden;
min-height:560px;
margin:24px 0 24px 24px;
background:#e8e3dc}
.feature-image img{
width:100%;
height:100%;
position:absolute;
object-fit:cover;
object-position:50% 44%;
transition:transform .65s ease}
.feature-image:hover img{
transform:scale(1.025)}
.photo-note{
position:absolute;
bottom:20px;
right:20px;
background:#f4f3ef;
padding:10px 13px;
font-size:12px;
letter-spacing:.08em}
.entries-section{
padding:50px 0 60px}
.section-title{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:20px;
margin-bottom:29px}
.section-title h2{
font:400 43px/1.1 Georgia,serif;
letter-spacing:-.035em;
margin:0}
.section-title>a{
font-size:14px}
.section-title>a span{
margin-left:14px}
.entry-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:43px 28px}
.card-photo{
display:block;
aspect-ratio:1.23;
overflow:hidden;
background:#e6e2da}
.card-photo img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease}
.card-photo:hover img{
transform:scale(1.035)}
.entry-card{
min-width:0}
.card-meta{
display:flex;
justify-content:space-between;
gap:12px;
font-size:12px;
color:#69645d;
margin:18px 0 12px}
.entry-card h3{
font:400 31px/1.1 Georgia,serif;
letter-spacing:-.035em;
margin:0 0 11px}
.entry-card p{
font:16px/1.6 Georgia,serif;
color:#625d56;
margin:0}
.archive-band{
display:grid;
grid-template-columns:1fr 1fr;
background:var(--signal);
color:#201f1c;
padding:40px;
margin:0 0 64px;
gap:40px}
.archive-band h2{
font:400 53px/1.04 Georgia,serif;
letter-spacing:-.04em;
margin:22px 0 0}
.year-links{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:0 30px}
.year-links a{
font:32px Georgia,serif;
border-bottom:1px solid rgba(32,31,28,.42);
padding:16px 0;
display:flex;
align-items:center;
justify-content:space-between}
.year-links a:hover{
color:#fff}
.year-links span{
font:22px Arial}
.site-footer{
padding-bottom:25px}
.footer-top{
border-top:1px solid #262522;
padding:32px 0;
display:flex;
gap:28px;
align-items:center}
.footer-logo{
font:700 45px Georgia,serif;
letter-spacing:-2px}
.footer-logo span{
margin-left:7px;
color:var(--signal);
font:33px Georgia}
.footer-top p{
font:italic 19px Georgia,serif;
color:#716c63}
.footer-top>a:last-child{
margin-left:auto;
font-size:14px}
.footer-bottom{
border-top:1px solid #d0ccc4;
padding:22px 0 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
color:#69645d;
font-size:12px}
.footer-bottom>div{
display:flex;
gap:22px}
.skip{
position:absolute;
left:10px;
top:-100px;
padding:15px;
background:#fff;
z-index:20}
.skip:focus{
top:10px}
.text-cover{
height:100%;
background:#e8e2d6;
padding:28px;
display:flex;
flex-direction:column;
justify-content:space-between}
.text-cover span{
font:36px/1.1 Georgia,serif;
letter-spacing:-.03em}
.text-cover i{
font:16px Georgia,serif;
color:#635d52}

@media(min-width:1600px){
.masthead{
font-size:250px}
}
@media(max-width:1000px){
.wrap{
padding-left:28px;
padding-right:28px}
.navigation>div{
gap:25px}
.feature-copy{
padding-right:20px}
.feature-image{
margin-left:10px;
min-height:480px}
.feature{
min-height:530px}
.feature h1{
font-size:62px}
.feature-signoff{
flex-direction:column;
gap:6px}
.entry-grid{
gap:34px 22px}
.entry-card h3{
font-size:28px}
.archive-band h2{
font-size:45px}
.footer-bottom{
flex-wrap:wrap}
}
@media(max-width:650px){
.wrap{
padding-left:20px;
padding-right:20px}
.topline{
height:58px}
.wordmark{
font-size:22px}
.tagline{
display:none}
.masthead{
font-size:17.7vw;
padding:15px 0 18px}
.star{
font-size:.5em}
.navigation{
min-height:57px;
gap:8px}
.navigation>div{
gap:19px}
.navigation a{
font-size:13px;
padding:19px 0}
.search-link{
gap:0;
font-size:0!important}
.search-link svg{
width:18px;
height:18px}
.feature{
display:flex;
flex-direction:column}
.feature-copy{
padding:23px 0}
.feature-title-group{
padding:27px 0 8px}
.feature h1{
font-size:59px;
max-width:350px;
margin:17px 0}
.feature p{
font-size:18px;
margin-bottom:15px}
.feature-signoff{
display:none}
.feature-image{
margin:0 0 24px;
min-height:0;
aspect-ratio:1.1}
.feature-image img{
object-position:50% 40%}
.entries-section{
padding:34px 0 42px}
.section-title h2{
font-size:35px}
.section-title>a{
font-size:12px}
.entry-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:30px 16px}
.card-photo{
aspect-ratio:.84}
.card-meta{
font-size:12px;
margin-top:12px;
flex-wrap:wrap;
gap:5px}
.card-meta>span{
display:none}
.entry-card h3{
font-size:26px}
.entry-card p{
font-size:15px;
line-height:1.5}
.archive-band{
grid-template-columns:1fr;
padding:26px;
gap:22px;
margin-bottom:42px}
.archive-band h2{
font-size:41px}
.year-links a{
font-size:29px}
.footer-top{
gap:12px;
flex-wrap:wrap;
padding:25px 0}
.footer-logo{
font-size:37px}
.footer-top p{
display:none}
.footer-bottom{
gap:18px;
font-size:12px;
align-items:flex-start}
.footer-bottom>div{
flex-wrap:wrap;
gap:13px}
.footer-bottom>span:last-child{
display:none}
.text-cover{
padding:18px}
.text-cover span{
font-size:25px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
transition:none!important;
animation:none!important}
}

.page-heading{
padding:64px 0 43px}
.page-heading h1{
font:400 clamp(54px,7vw,100px)/1.02 Georgia,serif;
letter-spacing:-.055em;
margin:20px 0}
.page-heading p{
font:19px/1.5 Georgia,serif;
color:#625d55;
margin:20px 0 0}
.archive-page{
padding-bottom:70px}
.archive-controls{
padding:26px 0;
border-top:1px solid #272521;
border-bottom:1px solid #272521;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px}
.year-filter{
display:flex;
gap:8px;
flex-wrap:wrap}
.year-filter button{
border:1px solid #c4bfb6;
background:transparent;
padding:9px 12px;
font-size:14px;
cursor:pointer;
min-height:40px}
.year-filter button[aria-pressed=true]{
background:#272521;
color:#fff;
border-color:#272521}
.year-filter button:hover{
border-color:var(--signal-dark)}
.archive-search label{
display:block;
font-size:12px;
margin-bottom:8px}
.archive-search>div{
display:flex;
border-bottom:1px solid #625c54}
.archive-search input{
width:250px;
max-width:100%;
border:0;
background:transparent;
padding:8px 0;
font-size:14px;
outline-offset:1px}
.archive-search button{
border:0;
background:transparent;
font-size:23px;
padding:0 6px;
cursor:pointer}
.results-summary{
font-size:13px;
margin:23px 0;
color:#69645d}
.archive-row{
display:grid;
grid-template-columns:90px 120px 1fr 85px 30px;
gap:28px;
align-items:center;
padding:21px 0;
border-bottom:1px solid #cec9c0}
.archive-photo{
width:90px;
height:78px;
overflow:hidden;
background:#e5e0d7}
.archive-photo img{
width:100%;
height:100%;
object-fit:cover}
.archive-photo .text-cover{
padding:10px}
.archive-photo .text-cover span{
font-size:15px}
.archive-photo .text-cover i{
display:none}
.archive-row time,.row-reading{
font-size:13px;
color:#6b655c}
.archive-row h2{
font:400 31px/1.1 Georgia,serif;
letter-spacing:-.03em;
margin:0}
.row-arrow{
font-size:25px}
.archive-all{
margin-top:35px}
.empty-state{
padding:65px 0;
text-align:center}
.empty-state h2{
font:40px Georgia,serif}
.empty-state button{
border:1px solid #222;
background:transparent;
padding:12px 20px;
cursor:pointer}
.pagination{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:42px 0 0}
.pagination a{
border:1px solid #cbc6bc;
min-width:40px;
padding:10px;
text-align:center;
font-size:14px}
.pagination a[aria-current]{
background:#222;
color:#fff}
.article{
padding-bottom:60px}
.article-heading{
max-width:950px;
padding:48px 0 40px;
margin-left:20%}
.article-meta{
display:flex;
gap:25px;
font-size:13px;
color:#696259;
margin:32px 0 22px}
.article h1{
font:400 clamp(49px,6.2vw,86px)/1.04 Georgia,serif;
letter-spacing:-.048em;
margin:0 0 28px;
max-width:900px;
overflow-wrap:anywhere}
.byline{
font-size:14px;
display:flex;
gap:28px;
align-items:center}
.byline span{
font-size:24px;
color:var(--signal)}
.reading-layout{
display:grid;
grid-template-columns:20% 1fr;
border-top:1px solid #262522;
padding-top:38px}
.reading-aside{
font-size:13px;
padding:12px 30px 0 0}
.category-links{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:20px 0 30px}
.category-links a{
border-bottom:1px solid #bcb5a9;
padding:6px 0;
margin-right:9px}
.reading-aside>a{
font-size:12px}
.reading-content{
max-width:760px;
min-width:0}
.prose{
font:21px/1.75 Georgia,serif;
overflow-wrap:break-word}
.prose p{
margin:0 0 1.5em}
.prose br{
line-height:1.8}
.prose img{
width:auto;
max-width:100%;
max-height:900px;
height:auto;
object-fit:contain;
margin:32px auto}
.prose figure{
margin:32px 0}
.prose figure img{
margin:0 auto}
.prose figcaption{
font:14px/1.6 Arial,sans-serif;
color:#71685e;
text-align:center;
margin-top:12px}
.prose a{
color:var(--signal-dark);
text-decoration:underline;
text-underline-offset:3px}
.prose blockquote{
border-left:2px solid var(--signal);
padding:0 0 0 25px;
margin:28px 0;
font-style:italic}
.prose video{
width:100%;
max-height:800px}
.prose h2{
font-size:34px;
line-height:1.2}
.prose h3{
font-size:28px;
line-height:1.2}
.prose ul,.prose ol{
padding-left:28px}
.prose hr{
border:0;
border-top:1px solid #ccc5bb;
margin:30px 0}
.article-lead{
margin:0 0 40px}
.article-lead img{
width:100%;
max-height:600px;
object-fit:contain;
background:#ece7dd}
.entry-end{
display:flex;
justify-content:center;
align-items:center;
gap:13px;
padding:30px 0 43px}
.entry-end>span{
color:var(--signal);
font-size:27px}
.entry-end p{
font:italic 18px Georgia,serif;
color:#756b5f}
.article-actions{
border-top:1px solid #cec7bc;
padding:20px 0;
display:flex;
gap:25px;
flex-wrap:wrap;
font-size:13px}
.copy-link{
background:transparent;
border:0;
padding:0;
cursor:pointer;
font-size:13px;
color:inherit}
.copy-status{
width:100%;
color:#635b50}
.copy-status:empty{
display:none}
.adjacent{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid #262522;
gap:30px;
padding-top:26px}
.adjacent>a span{
font-size:12px;
color:#70675b;
display:block;
margin-bottom:14px}
.adjacent strong{
font:400 27px/1.2 Georgia,serif;
letter-spacing:-.02em}
.adjacent>a:last-child{
text-align:right}
.about-page{
padding-bottom:80px}
.about-grid{
display:grid;
grid-template-columns:42% 1fr;
gap:80px;
border-top:1px solid #262522;
padding-top:40px}
.about-photo img{
width:100%;
aspect-ratio:.9;
object-fit:cover}
.about-photo>span{
display:block;
font-size:13px;
margin-top:15px}
.about-copy>.eyebrow{
margin:0 0 26px}
.about-copy .prose{
font-size:22px}
.about-copy .read-link{
margin-top:22px}
[hidden]{
display:none!important}

@media(max-width:1000px){
.archive-controls{
align-items:flex-start;
flex-direction:column}
.archive-search{
width:100%}
.archive-search input{
width:100%}
.archive-search>div{
max-width:500px}
.archive-row{
grid-template-columns:75px 100px 1fr 24px;
gap:20px}
.archive-photo{
width:75px;
height:70px}
.row-reading{
display:none}
.article-heading{
margin-left:14%}
.reading-layout{
grid-template-columns:14% 1fr}
.reading-aside{
padding-right:18px}
.reading-aside>.eyebrow{
line-height:1.6}
.about-grid{
gap:40px}
}

@media(max-width:650px){
.navigation>div{
gap:12px;
flex-wrap:nowrap}
.navigation a{
font-size:12px;
white-space:nowrap}
.navigation{
min-height:55px}
.page-heading{
padding:37px 0 29px}
.page-heading h1{
font-size:58px;
margin-top:20px}
.page-heading p{
font-size:18px;
max-width:290px}
.archive-controls{
gap:25px;
padding:22px 0}
.year-filter{
gap:6px}
.year-filter button{
font-size:13px;
padding:8px 10px}
.archive-row{
grid-template-columns:65px 1fr 22px;
gap:0 17px;
padding:17px 0}
.archive-photo{
width:65px;
height:75px;
grid-row:1/3}
.archive-row time{
grid-column:2;
align-self:end;
margin-bottom:7px;
font-size:12px}
.archive-row h2{
grid-column:2;
grid-row:2;
font-size:25px;
align-self:start}
.row-arrow{
grid-column:3;
grid-row:1/3;
font-size:22px}
.article-heading{
margin:0;
padding:31px 0}
.article h1{
font-size:52px}
.article-meta{
margin-top:27px}
.reading-layout{
display:flex;
flex-direction:column;
padding-top:24px}
.reading-aside{
order:2;
margin-top:38px;
padding:20px 0;
border-top:1px solid #ccc5bb}
.category-links{
margin:10px 0 20px}
.reading-aside>a{
font-size:14px}
.prose{
font-size:19px;
line-height:1.75}
.prose img{
margin:22px auto}
.prose figure{
margin:22px 0}
.article-actions{
gap:20px}
.adjacent{
gap:22px}
.adjacent strong{
font-size:23px}
.about-grid{
grid-template-columns:1fr;
gap:35px;
padding-top:25px}
.about-photo{
max-width:440px}
.about-copy .prose{
font-size:21px}
.article-lead{
margin-bottom:28px}
.about-page{
padding-bottom:50px}
}

@media(max-width:360px){
.navigation>div{
gap:8px}
.navigation a{
font-size:11px}
.feature h1{
font-size:51px}
.article h1{
font-size:44px}
}


@media(max-width:650px){
.navigation a{
font-size:14px}
.navigation>div{
gap:18px}
}

@media(max-width:360px){
.navigation>div{
gap:12px}
}


/* Essays and the photo collection extend the journal's typography and ruled layout. */
.essays-page,.gallery-page{
padding-bottom:80px}

.essay-index{
border-top:1px solid #262522}

.essay-index-entry{
display:grid;
grid-template-columns:90px minmax(0,1fr) 120px;
gap:38px;
padding:48px 0 65px;
border-bottom:1px solid #cbc5bc}

.essay-number{
font:italic 38px Georgia,serif;
color:var(--signal-dark);
padding-top:28px}

.essay-index-entry .article-meta{
margin:0 0 20px}

.essay-index-entry h2{
font:400 clamp(42px,5.5vw,74px)/1.08 Georgia,serif;
letter-spacing:-.045em;
margin:0 0 26px}

.essay-preview{
font:24px/1.65 Georgia,serif;
max-width:760px;
color:#655e53;
margin:0 0 25px}

.essay-mark{
font:100px Georgia,serif;
color:var(--signal);
align-self:center;
text-align:right}

.essay-toc{
display:flex;
flex-direction:column;
gap:18px;
margin-top:25px;
font-size:14px;
line-height:1.5;
padding-right:12px}

.essay-prose>blockquote:first-child{
font-size:28px;
line-height:1.55;
border:0;
padding:0 0 30px;
margin:0 0 35px;
border-bottom:1px solid #cbc5bc;
color:#62594c}

.essay-prose>blockquote:first-child p{
margin:0}

.essay-prose h2{
margin:50px 0 23px;
letter-spacing:-.025em;
scroll-margin-top:32px}

.gallery-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:25px;
border-bottom:1px solid #262522;
margin-bottom:32px}

.gallery-heading h1{
margin-bottom:0}

.gallery-heading>p{
font:14px/1.8 Arial,sans-serif;
text-align:right;
color:#675f54;
flex-shrink:0}

.gallery-heading>p span{
display:block;
font-size:12px;
letter-spacing:.07em}

.photo-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}

.gallery-tile{
display:block;
position:relative;
margin:0;
aspect-ratio:4/5;
background:#e9e4db;
overflow:hidden;
cursor:zoom-in}

.gallery-tile img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease}

.gallery-tile:hover img{
transform:scale(1.025)}

.gallery-photo-number{
position:absolute;
bottom:12px;
left:12px;
background:#f4f3efee;
color:#24221e;
font-size:12px;
letter-spacing:.05em;
padding:6px 8px;
opacity:0;
transition:opacity .2s}

.gallery-tile:hover .gallery-photo-number,.gallery-tile:focus-visible .gallery-photo-number{
opacity:1}

.photo-viewer{
width:min(1200px,96vw);
height:min(960px,96dvh);
max-width:96vw;
max-height:96dvh;
border:1px solid #4a463f;
background:#181816;
color:#f4f3ef;
padding:0;
overflow:hidden}

.photo-viewer[open]{
display:grid;
grid-template-rows:auto minmax(0,1fr) auto}

.photo-viewer::backdrop{
background:#111d;
backdrop-filter:blur(7px)}

.viewer-top{
display:flex;
justify-content:space-between;
align-items:center;
padding:17px 24px;
border-bottom:1px solid #48443d;
gap:18px}

.viewer-counter{
font-size:14px;
letter-spacing:.1em;
color:#d0c8bc}

.viewer-close{
border:0;
color:inherit;
background:transparent;
padding:7px 0 7px 15px;
cursor:pointer;
font-size:14px}

.viewer-close span{
font-size:28px;
vertical-align:-2px;
margin-left:12px}

.viewer-stage{
min-height:0;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:22px}

.viewer-image{
height:100%;
width:100%;
min-height:0;
object-fit:contain}

.viewer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:18px 24px;
border-top:1px solid #48443d}

.viewer-caption{
font:18px/1.4 Georgia,serif;
margin:0 0 6px;
max-height:90px;
overflow:auto}

.viewer-caption:empty{
display:none}

.viewer-date{
font-size:12px;
color:#c5bbaa;
margin:0 0 8px}

.viewer-entry{
font-size:14px;
color:var(--signal)}

.viewer-controls{
display:flex;
gap:9px;
flex-shrink:0}

.viewer-controls button{
background:transparent;
border:1px solid #6e665a;
color:inherit;
cursor:pointer;
width:46px;
height:44px;
font-size:25px}

.viewer-controls button:disabled{
opacity:.3;
cursor:default}

.viewer-open{
overflow:hidden}

@media(max-width:1000px){
.navigation>div{
gap:22px}
.photo-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.essay-index-entry{
grid-template-columns:50px 1fr 75px;
gap:22px}
.essay-mark{
font-size:70px}
.essay-aside{
padding-right:20px}
.essay-article .reading-layout{
grid-template-columns:24% 1fr}
.essay-article .article-heading{
margin-left:24%}
}

@media(max-width:760px){
.navigation{
align-items:center}
.navigation>div{
display:grid;
grid-template-columns:repeat(3,max-content);
gap:0 27px;
padding:5px 0}
.navigation a{
font-size:14px;
padding:12px 0}
.search-link{
margin-left:auto}
.navigation .search-link{
font-size:0}
.tagline{
font-size:13px}
.photo-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px}
.gallery-heading{
align-items:flex-start;
flex-direction:column;
gap:0;
margin-bottom:23px}
.gallery-heading>p{
text-align:left;
display:flex;
gap:18px;
align-items:center;
margin:12px 0 0}
.gallery-heading>p span{
display:inline}
.essay-index-entry{
grid-template-columns:28px 1fr;
gap:16px;
padding:30px 0 40px}
.essay-number{
font-size:24px;
padding-top:0}
.essay-index-entry h2{
font-size:45px}
.essay-preview{
font-size:20px}
.essay-mark{
display:none}
.essay-article .article-heading{
margin-left:0}
.essay-article .reading-layout{
display:flex;
flex-direction:column}
.essay-aside{
order:2}
.essay-toc{
gap:14px}
.essay-prose>blockquote:first-child{
font-size:24px}
.essay-prose h2{
font-size:29px}
.essays-page,.gallery-page{
padding-bottom:50px}
.viewer-top,.viewer-bottom{
padding:12px 15px}
.viewer-stage{
padding:12px}
.photo-viewer{
width:100vw;
max-width:100vw;
height:100dvh;
max-height:100dvh;
border:0}
.viewer-caption{
font-size:16px}
.viewer-entry{
font-size:13px}
.viewer-controls{
gap:6px}
.viewer-controls button{
width:43px;
height:43px}
}

@media(prefers-reduced-motion:reduce){
.gallery-tile img,.gallery-photo-number{
transition:none}
}

/*
 * HYCHEBLOG DESIGN SYSTEM
 * Paper, ink, signal orange, editorial type, hairline rules, and numbered detail.
 */
:root {
  --paper: #f6f4ef;
  --paper-deep: #ebe6dc;
  --ink: #201f1c;
  --ink-soft: #625d55;
  --ink-faint: #716b62;
  --signal: #FF5F1F;
  --signal-dark: #B23400;
  --rule: #292824;
  --rule-soft: #cec8be;
  --night: #181816;
  --font-display: "Iowan Old Style", Baskerville, "Times New Roman", Georgia, serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1520px;
  --reading-measure: 42rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: -.008em;
}

::selection { background: var(--signal); color: var(--ink); }
.wrap { max-width: var(--wrap); }

.wordmark,
.masthead,
.feature h1,
.feature p,
.section-title h2,
.entry-card h3,
.entry-card p,
.archive-band h2,
.year-links a,
.footer-logo,
.footer-top p,
.text-cover span,
.text-cover i,
.page-heading h1,
.page-heading p,
.archive-row h2,
.article h1,
.prose,
.adjacent strong,
.about-copy .prose,
.essay-number,
.essay-index-entry h2,
.essay-preview,
.essay-mark,
.viewer-caption {
  font-family: var(--font-display);
}

.site-header { position: relative; z-index: 2; }
.topline { height: 70px; border-color: var(--rule); }
.wordmark { font-size: 26px; letter-spacing: -.055em; }
.tagline { color: var(--ink-soft); letter-spacing: .005em; }
.masthead { color: var(--signal); letter-spacing: -.075em; }
.navigation { border-color: var(--rule); color: #2e2c28; }
.navigation a { position: relative; transition: color .2s ease; }
.navigation a[aria-current] {
  color: var(--signal-dark);
  text-decoration-color: var(--signal-dark);
  text-decoration-thickness: 1px;
}

.feature,
.reading-layout,
.gallery-heading,
.essay-index,
.footer-top { border-color: var(--rule); }

.tiny-star,
.byline span,
.entry-end > span,
.footer-logo span,
.essay-mark { color: var(--signal); }

.feature-title-group > time,
.feature-signoff,
.card-meta,
.archive-row time,
.row-reading,
.article-meta,
.gallery-heading > p { color: var(--ink-faint); }

.feature h1 { letter-spacing: -.052em; text-wrap: balance; }
.feature p { color: var(--ink-soft); line-height: 1.58; }

.feature-image,
.card-photo,
.archive-photo,
.gallery-tile { background: var(--paper-deep); }

.feature-image img,
.card-photo img,
.gallery-tile img {
  transition-duration: .55s;
  transition-timing-function: var(--ease-out);
}

.read-link {
  border-color: var(--ink);
  transition: color .2s ease, border-color .2s ease;
}
.read-link:hover { border-color: var(--signal-dark); color: var(--signal-dark); }
.entry-card h3 { text-wrap: balance; }
.entry-card p { color: var(--ink-soft); }
.archive-band { background: var(--signal); }

.archive-row {
  border-color: var(--rule-soft);
  box-shadow: inset 0 0 0 var(--signal);
  transition: background-color .22s ease, box-shadow .22s ease;
}
.archive-row:hover,
.archive-row:focus-within {
  background: rgba(255, 95, 31, .045);
  box-shadow: inset 4px 0 0 var(--signal);
}
.archive-row h2 a,
.row-arrow { transition: color .2s ease, transform .25s var(--ease-out); }
.archive-row:hover h2 a,
.archive-row:focus-within h2 a { color: var(--signal-dark); }
.archive-row:hover .row-arrow,
.archive-row:focus-within .row-arrow { transform: translate(2px, -2px); }

.page-heading h1,
.article h1,
.essay-index-entry h2 { text-wrap: balance; }
.page-heading p { color: var(--ink-soft); }
.article-heading { padding-top: 56px; padding-bottom: 48px; }

.reading-layout {
  grid-template-columns: minmax(150px, 18%) minmax(0, 1fr);
  column-gap: 2%;
}
.reading-content { width: 100%; max-width: var(--reading-measure); }
.prose { color: #292722; line-height: 1.78; }
.prose p { text-wrap: pretty; }
.prose h2,
.prose h3 {
  font-family: var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.prose blockquote { border-color: var(--signal); color: var(--ink-soft); }
.reading-aside { color: var(--ink-soft); }
.reading-aside > .eyebrow { color: var(--ink); }

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 3px;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.essay-index-entry { border-color: var(--rule-soft); }
.essay-number { color: var(--signal-dark); }
.essay-preview { color: var(--ink-soft); text-wrap: pretty; }
.essay-prose > blockquote:first-child { color: var(--ink-soft); }

.photo-grid { gap: 16px; }
.gallery-photo-number {
  opacity: 1;
  background: rgba(246, 244, 239, .92);
  backdrop-filter: blur(6px);
  transition: color .2s ease, background-color .2s ease, transform .25s var(--ease-out);
}
.gallery-tile:hover .gallery-photo-number,
.gallery-tile:focus-visible .gallery-photo-number {
  background: var(--signal);
  color: var(--ink);
  transform: translate(2px, -2px);
}

.photo-viewer { background: var(--night); }
.viewer-controls button { transition: border-color .2s ease, background-color .2s ease; }
.viewer-controls button:not(:disabled):hover {
  border-color: var(--signal);
  background: var(--signal);
}
.site-footer { color: var(--ink); }

@media (max-width: 1000px) {
  .reading-layout { grid-template-columns: minmax(120px, 18%) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .topline { height: 62px; }
  .navigation > div { column-gap: 24px; }
  .photo-grid { gap: 12px; }
}

@media (max-width: 650px) {
  .article-heading { padding-top: 34px; padding-bottom: 34px; }
  .reading-content { max-width: none; }
  .essay-aside {
    order: 0;
    margin: 0 0 32px;
    padding: 0 0 24px;
    border-top: 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .archive-row:hover,
  .archive-row:focus-within { box-shadow: inset 3px 0 0 var(--signal); }
}