/* Saēna 2.0 — Reading House
A deliberate second layer: visual intensity for orientation, calm for reading. */
:root{
--read-measure:44rem;
--read-size:18.5px;
--read-leading:2.16;
--quiet-line:color-mix(in srgb,var(--line) 68%,transparent);
}
/* ---------- Global rhythm / accessibility ---------- */
::selection{background:var(--pomegranate-clay,#A66770);color:#fff}
:focus-visible{outline:2px solid var(--pomegranate-clay,#A66770);outline-offset:4px}
h1,h2,h3,h4{ text-wrap:balance }
p,li{ text-wrap:pretty }
.prose h2,.prose h3,.prose h4{scroll-margin-top:150px}
/* ---------- Opening page: make the house breathe ---------- */
.hero-home{
min-height:520px!important;
grid-template-columns:minmax(0,1.34fr) minmax(320px,.66fr)!important;
}
.hero-copy{padding:62px 56px 44px!important}
.hero-home h1{
font-size:clamp(40px,4.45vw,67px)!important;
max-width:760px!important;
margin:25px 0 27px!important;
}
.hero-home .hero-copy>p{
max-width:620px!important;
font-size:clamp(18px,1.45vw,24px)!important;
line-height:1.95!important;
}
.hero-aside{padding:46px 38px!important}
.hero-aside blockquote{font-size:clamp(21px,1.9vw,28px)!important;line-height:1.95!important}
/* ---------- Newest content: lighter furniture around the approved cards ---------- */
.latest-block .section-heading{padding-top:54px!important}
.section-heading h2{font-size:clamp(32px,3vw,44px)!important}
.entry-card{box-shadow:inset 0 0 0 0 transparent;transition:background .22s ease,box-shadow .22s ease}
.entry-card:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--card-panel,var(--ink)) 44%,transparent)}
.entry-copy p{color:color-mix(in srgb,var(--ink) 78%,var(--paper))!important}
/* ---------- The seven rooms become a sequence of folios, not seven posters ---------- */
.rooms{position:relative;background:var(--paper)}
.rooms::before{
content:'';position:absolute;right:26px;top:0;bottom:0;width:1px;
background:linear-gradient(transparent,var(--line) 5%,var(--line) 95%,transparent);
pointer-events:none;z-index:4
}
.room{
grid-template-columns:270px 132px minmax(0,1fr) 64px!important;
min-height:350px!important;
background:color-mix(in srgb,var(--room-pigment,var(--paper)) 8%,var(--paper))!important;
}
.room>aside{padding:31px 28px 30px 42px!important}
.room>aside h2{font-size:clamp(28px,1.95vw,35px)!important;max-width:230px!important}
.room>aside p{font-size:16px!important;line-height:1.9!important;color:color-mix(in srgb,var(--ink) 74%,var(--paper))}
.room-art{background:color-mix(in srgb,var(--room-pigment) 88%,var(--paper))!important}
.room-art .room-word{font-size:58px!important;opacity:.92}
.room-body{padding:34px 42px!important;display:flex;align-items:center}
.room-feature.text-only{width:100%;max-width:820px}
.rooms .room-feature.text-only>strong{font-size:clamp(29px,2.2vw,39px)!important;line-height:1.26!important}
.rooms .room-feature.text-only>span:not(.title-line){
max-width:62ch!important;font-size:14px!important;line-height:1.95!important;
color:color-mix(in srgb,var(--ink) 76%,var(--paper))
}
.room-go{font-size:10px!important;background:color-mix(in srgb,var(--room-pigment) 4%,transparent)}
.room:nth-child(even) .room-body{background:rgba(255,255,255,.10)}
/* ---------- Archive: catalogue, not a ribbon that runs away ---------- */
.archive-page{background:var(--paper)}
.archive-hero{padding-top:54px!important;padding-bottom:42px!important}
.archive-hero h1{font-size:clamp(46px,5vw,78px)!important}
.archive-hero>p{font-size:18px!important;line-height:1.9!important}
.archive-index .category-ribbon{
display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible!important;
border-bottom:1px solid var(--line);background:transparent!important
}
.archive-index .category-ribbon a,.archive-index .category-ribbon>span{
min-width:0!important;padding:14px 16px!important;border-bottom:1px solid var(--quiet-line);
font-size:10px!important;align-items:baseline
}
.archive-index .category-ribbon strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- Single page: a real reading environment ---------- */
.single-hero{
max-width:1120px!important;
grid-template-columns:minmax(0,1fr) 145px!important;
column-gap:36px!important;
padding:58px 34px 34px!important;
}
.single-hero h1{
font-size:clamp(39px,3.65vw,58px)!important;
line-height:1.2!important;margin:22px 0 24px!important;max-width:880px!important
}
.single-hero h1 .title-secondary{font-size:.48em!important;line-height:1.62!important;max-width:760px!important}
.single-deck{font-size:18px!important;line-height:1.95!important;max-width:760px!important;color:color-mix(in srgb,var(--ink) 78%,var(--paper))!important}
.single-kicker{align-items:center;row-gap:7px!important}
.single-kicker .read-time{margin-right:auto;color:var(--muted);font-family:Mashin,Sahel,sans-serif}
.single-section-sign{min-height:250px!important;padding:13px 12px!important}
.single-section-sign strong{font-size:43px!important}
.single-ornament{opacity:.72}
.single-layout{
grid-template-columns:150px minmax(0,var(--read-measure))!important;
gap:54px!important;max-width:1040px!important;padding:28px 28px 110px!important;
align-items:start!important
}
.prose{
width:100%!important;max-width:var(--read-measure)!important;
font-size:calc(var(--read-size) * var(--reader-scale))!important;
line-height:var(--read-leading)!important;
letter-spacing:0!important;
text-align:justify!important;text-align-last:right!important;text-justify:inter-word!important;
font-kerning:normal;font-variant-ligatures:common-ligatures;
}
.prose p{margin:0 0 1.38em!important}
.prose p+p{margin-top:.08em!important}
.prose h2{font-size:2.05em!important;margin:2.15em 0 .65em!important;line-height:1.45!important}
.prose h3{font-size:1.55em!important;margin:1.9em 0 .55em!important;line-height:1.5!important}
.prose blockquote{
margin:2.2em -32px!important;padding:18px 28px!important;font-size:1.2em!important;line-height:1.95!important;
background:color-mix(in srgb,var(--single-accent) 5%,transparent)
}
.prose img{margin:2.2em auto!important}
.prose hr{border:0;border-top:1px solid var(--line);margin:3em auto;width:18%}
.single-tools{
top:136px!important;gap:9px!important;padding-top:12px!important;color:var(--muted)
}
.single-tools>a,.single-tools>button,.reading-controls button{
min-height:34px;border:0!important;border-bottom:1px solid var(--quiet-line)!important;
background:transparent!important;color:inherit!important;text-align:right!important;padding:6px 2px!important
}
.reading-controls{display:grid;grid-template-columns:1fr 34px 34px;gap:4px;margin-bottom:5px}
.reading-controls button{font-size:10px!important;text-align:center!important}
.reading-controls button:first-child{text-align:right!important}
.reading-controls button[aria-pressed="true"]{color:var(--ink)!important;border-bottom-color:var(--single-accent)!important}
.toc{margin-top:12px!important;gap:5px!important}
.toc a{font-size:9.5px;line-height:1.65;padding:4px 9px 4px 0!important}
/* Focus mode: the work, not the chrome. */
body.reading-focus .site-header,
body.reading-focus .site-footer,
body.reading-focus .single-section-sign,
body.reading-focus .single-ornament,
body.reading-focus .single-end{display:none!important}
body.reading-focus{background:#F6F2EA!important}
body.reading-focus .reading-progress{height:2px!important}
body.reading-focus .single-hero{
display:block!important;max-width:var(--read-measure)!important;padding:52px 24px 18px!important
}
body.reading-focus .single-hero h1{max-width:var(--read-measure)!important}
body.reading-focus .single-layout{
grid-template-columns:1fr!important;max-width:calc(var(--read-measure) + 48px)!important;padding:12px 24px 90px!important
}
body.reading-focus .single-tools{
position:fixed!important;z-index:90;top:14px!important;left:14px!important;width:auto!important;
padding:5px 8px!important;border:1px solid var(--line)!important;background:rgba(246,242,234,.94)!important;
backdrop-filter:blur(10px);display:block!important
}
body.reading-focus .single-tools>a,body.reading-focus .single-tools>[data-copy],body.reading-focus .single-tools .toc{display:none!important}
body.reading-focus .reading-controls{margin:0!important}
/* ---------- Footer: calm conclusion ---------- */
.site-footer{min-height:190px!important;padding-top:44px!important;padding-bottom:44px!important;overflow:hidden}
.site-footer::before{opacity:.045!important}
.site-footer::after{opacity:.055!important}
@media(max-width:1120px){
.room{grid-template-columns:230px 110px minmax(0,1fr) 54px!important}
.room-body{padding:30px!important}
.archive-index .category-ribbon{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.single-layout{grid-template-columns:125px minmax(0,var(--read-measure))!important;gap:36px!important}
}
@media(max-width:760px){
.hero-home{grid-template-columns:1fr!important;min-height:0!important}
.hero-copy{padding:38px 20px 34px!important}
.hero-aside{padding:28px 20px!important;min-height:210px}
.hero-home h1{font-size:36px!important}
.rooms::before{display:none}
.room{display:grid!important;grid-template-columns:82px minmax(0,1fr)!important;grid-template-areas:'art aside' 'art body' 'go go'!important;min-height:0!important}
.room>aside{grid-area:aside;padding:24px 18px 12px!important}
.room-art{grid-area:art;min-height:240px}
.room-body{grid-area:body;padding:10px 18px 26px!important}
.room-go{grid-area:go;writing-mode:horizontal-tb!important;min-height:42px;border-top:1px solid var(--line);border-right:0!important}
.room-art .room-word{font-size:42px!important}
.archive-index .category-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.single-hero{display:block!important;padding:40px 18px 18px!important}
.single-hero h1{font-size:36px!important}
.single-deck{font-size:16px!important}
.single-section-sign{margin:28px -18px 0!important;min-height:86px!important}
.single-layout{grid-template-columns:1fr!important;gap:12px!important;padding:18px 18px 75px!important}
.single-tools{position:static!important;display:grid;grid-template-columns:1fr auto auto;gap:8px!important;border-top:0!important}
.reading-controls{grid-column:1/-1;max-width:230px}
.toc{grid-column:1/-1}
.prose{font-size:17px!important;line-height:2.08!important}
.prose blockquote{margin:2em 0!important;padding:15px 18px!important}
body.reading-focus .single-tools{display:block!important}
.archive-index .category-ribbon a:nth-child(n){box-shadow:none!important}
}
@media(max-width:480px){
.archive-index .category-ribbon{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}
}
/* ========================================================================
Saēna 2.1 — disappearing reading masthead + Simorgh manuscript plate
The full masthead is an orientation device. It leaves the viewport while
the reader moves forward, and returns only on a deliberate upward gesture.
======================================================================== */
.site-header{
transform:translateY(0);
transition:transform .34s cubic-bezier(.22,.72,.22,1),box-shadow .35s ease!important;
will-change:transform;
}
.site-header.is-hidden{
transform:translateY(calc(-100% - 8px))!important;
box-shadow:none!important;
pointer-events:none;
}
.site-header.is-hidden .section-strip{pointer-events:none}
/* A manuscript fragment inside the identity cell: image, not logo. */
.header-index{gap:10px!important}
.simorgh-plate{
position:relative;display:block;width:46px;height:58px;flex:0 0 auto;
padding:2px;overflow:hidden;background:#F6F2EA;
border:1px solid color-mix(in srgb,var(--header-accent) 48%,var(--line));
box-shadow:0 0 0 3px color-mix(in srgb,var(--paper2) 88%,transparent);
transition:width .28s ease,height .28s ease,border-color .22s ease;
}
.simorgh-plate::after{
content:'';position:absolute;right:4px;left:4px;bottom:3px;height:1px;
background:var(--header-accent);opacity:.72;pointer-events:none
}
.simorgh-plate img{
display:block;width:100%;height:100%;object-fit:cover;object-position:50% 43%;
filter:saturate(.68) contrast(.94) sepia(.06);opacity:.9;
transition:filter .25s ease,opacity .25s ease,transform .45s cubic-bezier(.22,.72,.22,1)
}
.header-index:hover .simorgh-plate{border-color:var(--header-accent)}
.header-index:hover .simorgh-plate img{filter:saturate(.94) contrast(.98);opacity:1;transform:scale(1.025)}
.site-header.is-scrolled .simorgh-plate{width:35px;height:43px}
/* The progress line survives after the masthead disappears, preserving place. */
.reading-progress{z-index:120!important}
@media(max-width:1120px){
.simorgh-plate{width:38px;height:48px}
.header-index{gap:7px!important}
}
@media(max-width:760px){
.simorgh-plate{display:none!important}
}
@media(prefers-reduced-motion:reduce){
.site-header{transition:none!important}
.simorgh-plate,.simorgh-plate img{transition:none!important}
}
/* ================================================================
Saena 2.2 — Persian-native prose openings and continuous lists
================================================================ */
/* Persian and Arabic scripts join within the word. A Latin drop-cap treatment
breaks that connection and damages legibility, so never enlarge first-letter. */
.single-tone-essay .prose p:first-of-type::first-letter,
.single-page .prose p:first-of-type::first-letter,
.prose p:first-of-type::first-letter{
float:none!important;
font:inherit!important;
font-family:inherit!important;
font-size:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
color:inherit!important;
padding:0!important;
margin:0!important;
}
/* Opening sign: an editorial mark in the margin, independent from the first
Persian character. It identifies the beginning without touching the word. */
.single-page .prose{position:relative!important}
.single-page .prose::before{
content:'آغاز';
position:absolute;
inset-inline-end:calc(100% + 20px);
top:.35rem;
width:28px;
padding-top:27px;
font:400 12px/1.15 Mashin,Sahel,sans-serif;
color:color-mix(in srgb,var(--single-accent,var(--brick)) 74%,var(--muted));
writing-mode:vertical-rl;
text-orientation:mixed;
letter-spacing:.04em;
opacity:.72;
pointer-events:none;
}
.single-page .prose::after{
content:'';
position:absolute;
inset-inline-end:calc(100% + 25px);
top:.05rem;
width:1px;
height:18px;
background:var(--single-accent,var(--brick));
opacity:.55;
pointer-events:none;
}
/* Numbered prose is one continuous text, not a stack of cards. Numbers are
hanging marginalia; no horizontal rules interrupt the reading current. */
.prose .saena-numbered-list,
.wp-content .saena-numbered-list,
.prose ol:not(.saena-numbered-list),
.wp-content ol:not(.saena-numbered-list){
list-style:none!important;
padding:0!important;
margin:1.35em 0 1.7em!important;
border:0!important;
background:none!important;
}
.prose .saena-numbered-list>li,
.wp-content .saena-numbered-list>li,
.prose ol:not(.saena-numbered-list)>li,
.wp-content ol:not(.saena-numbered-list)>li{
display:grid!important;
grid-template-columns:34px minmax(0,1fr)!important;
gap:12px!important;
align-items:start!important;
margin:0 0 .9em!important;
padding:0!important;
border:0!important;
background:none!important;
position:relative!important;
text-align:initial!important;
text-align-last:auto!important;
}
.prose .saena-numbered-list>li::before,
.wp-content .saena-numbered-list>li::before,
.prose ol:not(.saena-numbered-list)>li::before,
.wp-content ol:not(.saena-numbered-list)>li::before{
display:block!important;
font:400 21px/1.35 Mashin,Sahel,sans-serif!important;
color:var(--single-accent,var(--brick))!important;
text-align:right!important;
text-align-last:right!important;
padding:.18em 0 0!important;
opacity:.72!important;
}
.prose .saena-numbered-list>li::after,
.wp-content .saena-numbered-list>li::after,
.prose ol:not(.saena-numbered-list)>li::after,
.wp-content ol:not(.saena-numbered-list)>li::after{
content:none!important;
display:none!important;
}
.saena-list-body{
min-width:0!important;
text-align:justify!important;
text-align-last:right!important;
text-justify:inter-word!important;
}
.saena-list-body p{margin:0!important}
.prose ol:not(.saena-numbered-list)>li>*,
.wp-content ol:not(.saena-numbered-list)>li>*{grid-column:2!important}
/* Keep a little more air between long numbered answers without drawing a line. */
.prose .saena-numbered-list>li + li,
.wp-content .saena-numbered-list>li + li,
.prose ol:not(.saena-numbered-list)>li + li,
.wp-content ol:not(.saena-numbered-list)>li + li{margin-top:.34em!important}
/* Focus mode is intentionally even quieter. */
body.reading-focus .single-page .prose::before,
body.reading-focus .single-page .prose::after{opacity:.42}
@media(max-width:900px){
.single-page .prose::before{
inset-inline-end:auto;
right:auto;
left:auto;
top:auto;
position:relative;
display:inline-block;
width:auto;
padding:0 0 0 22px;
margin:0 0 1.15em;
writing-mode:horizontal-tb;
font-size:11px;
}
.single-page .prose::after{
position:absolute;
inset-inline-end:auto;
right:0;
top:.28rem;
width:14px;
height:1px;
}
}
@media(max-width:700px){
.prose .saena-numbered-list>li,
.wp-content .saena-numbered-list>li,
.prose ol:not(.saena-numbered-list)>li,
.wp-content ol:not(.saena-numbered-list)>li{
grid-template-columns:28px minmax(0,1fr)!important;
gap:9px!important;
margin-bottom:.8em!important;
}
.prose .saena-numbered-list>li::before,
.wp-content .saena-numbered-list>li::before,
.prose ol:not(.saena-numbered-list)>li::before,
.wp-content ol:not(.saena-numbered-list)>li::before{font-size:18px!important}
}
/* ================================================================
Saena 2.3 — clean Persian opening + prose-aligned separator
================================================================ */
/* No opening ornament at all. Persian prose begins directly with the text. */
.single-page .prose::before,
.single-page .prose::after{
content:none!important;
display:none!important;
}
/* The old separator belonged to the broad hero frame and therefore extended
far beyond the reading measure. Remove it there. */
.single-page .single-hero{
border-bottom:0!important;
}
/* Put the separator where it conceptually belongs: on the reading column.
Its width is therefore exactly the prose width, with equal visual margins
at both ends of the text measure. */
.single-page .single-layout .prose{
border-top:1px solid color-mix(in srgb,var(--single-accent,var(--brick)) 28%,var(--line))!important;
padding-top:26px!important;
}
body.reading-focus .single-page .single-layout .prose{
padding-top:24px!important;
}
@media(max-width:900px){
.single-page .single-layout .prose{
padding-top:20px!important;
}
}
/* ================================================================
Saena 2.4 — literary title page / quiet colophon
The single opening is informational without becoming a dashboard.
================================================================ */
/* Remove the former boxed section object and ornamental panel completely. */
.single-page .single-section-sign,
.single-page .single-ornament{display:none!important}
/* The title page becomes one reading-oriented column. */
.single-page .single-hero{
display:block!important;
max-width:980px!important;
padding:62px 34px 38px!important;
margin-inline:auto!important;
}
/* A colophon, not a card: one continuous editorial line. */
.single-page .single-colophon{
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:8px 0!important;
width:min(100%,820px)!important;
margin:0 0 26px auto!important;
padding:0!important;
color:var(--muted)!important;
font:400 10.5px/1.8 Sahel,Tahoma,sans-serif!important;
}
.single-page .single-colophon>*{
display:inline-flex!important;
align-items:center!important;
white-space:nowrap;
}
.single-page .single-colophon>*+*::before{
content:'·';
display:inline-block;
margin:0 11px;
color:color-mix(in srgb,var(--single-accent) 58%,var(--muted));
}
.single-page .single-colophon .single-room{
color:var(--ink)!important;
font-weight:500!important;
}
.single-page .single-colophon .single-room i{
width:18px;height:2px;
background:var(--single-accent);
margin-left:8px;
opacity:.82;
flex:0 0 auto;
}
.single-page .single-colophon a{
border:0!important;
text-decoration:none!important;
}
.single-page .single-colophon a:hover{color:var(--ink)!important}
.single-page .single-colophon .read-time{
margin:0!important;
font:400 10.5px/1.8 Mashin,Sahel,sans-serif!important;
color:var(--muted)!important;
}
/* Title and deck own the page. */
.single-page .single-hero h1{
max-width:900px!important;
margin:0 0 22px!important;
}
.single-page .single-hero h1::after{display:none!important}
.single-page .single-deck{
max-width:760px!important;
margin:0!important;
}
/* One short book-like rule closes the title page; no box around it. */
.single-page .single-title-rule{
width:72px;
height:2px;
margin:30px 0 0 auto;
background:var(--single-accent);
opacity:.62;
}
/* The prose separator starts at the same visual register as the title page. */
.single-page .single-layout{
padding-top:20px!important;
}
/* Focus mode keeps the same quiet hierarchy. */
body.reading-focus .single-page .single-hero{
max-width:var(--read-measure)!important;
padding:48px 24px 18px!important;
}
body.reading-focus .single-page .single-colophon{
margin-bottom:20px!important;
}
body.reading-focus .single-page .single-title-rule{
margin-top:24px!important;
}
@media(max-width:700px){
.single-page .single-hero{padding:38px 18px 24px!important}
.single-page .single-colophon{
margin-bottom:20px!important;
font-size:9.5px!important;
}
.single-page .single-colophon>*+*::before{margin:0 7px}
.single-page .single-colophon .single-room i{width:13px;margin-left:6px}
.single-page .single-title-rule{width:48px;margin-top:22px}
}
/* ========================================================================
Saena 2.5 — Counterpoint title spread
A contemporary editorial spread: title on the right, deck and typographic
echo on the left, joined by one quiet pigment axis. No cards or boxes.
======================================================================== */
.single-page .single-hero.single-hero-counterpoint{
display:block!important;
max-width:1240px!important;
margin-inline:auto!important;
padding:52px 34px 48px!important;
}
/* Metadata is balanced across the full opening instead of accumulating right. */
.single-page .single-hero-counterpoint .single-colophon{
width:100%!important;
max-width:none!important;
display:flex!important;
direction:ltr!important;
justify-content:space-between!important;
align-items:center!important;
gap:24px!important;
margin:0 0 30px!important;
padding:0 0 13px!important;
border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;
font:400 10px/1.7 Sahel,Tahoma,sans-serif!important;
}
.single-page .single-hero-counterpoint .colophon-group{
display:flex!important;
direction:rtl!important;
align-items:center!important;
gap:0!important;
min-width:0;
color:var(--muted)!important;
}
.single-page .single-hero-counterpoint .colophon-group>*{
display:inline-flex!important;
align-items:center!important;
white-space:nowrap;
}
.single-page .single-hero-counterpoint .colophon-group>*+*::before{
content:'·';
margin:0 10px;
color:color-mix(in srgb,var(--single-accent) 62%,var(--muted));
}
.single-page .single-hero-counterpoint .single-room{
color:var(--ink)!important;
}
.single-page .single-hero-counterpoint .single-room i{
width:16px!important;height:2px!important;margin-left:7px!important;
background:var(--single-accent)!important;opacity:.78!important;
}
/* The opening behaves like an open spread: counter-field left, title right. */
.single-page .single-hero-spread{
display:grid!important;
grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)!important;
gap:clamp(44px,6vw,96px)!important;
align-items:stretch!important;
min-height:390px;
direction:ltr!important;
position:relative;
}
.single-page .single-title-main{
grid-column:2;
direction:rtl!important;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
padding:22px 0 24px 42px;
position:relative;
}
/* A book-fold axis rather than a containing box. */
.single-page .single-title-main::before{
content:'';
position:absolute;
left:-1px;top:0;bottom:0;
width:1px;
background:color-mix(in srgb,var(--ink) 13%,transparent);
}
.single-page .single-title-main::after{
content:'';
position:absolute;
left:-2px;top:31%;
width:3px;height:78px;
background:var(--single-accent);
opacity:.66;
}
.single-page .single-title-main h1{
font-size:clamp(43px,4.15vw,64px)!important;
line-height:1.18!important;
max-width:790px!important;
margin:0!important;
text-wrap:balance!important;
}
.single-page .single-title-main h1 .title-secondary{
max-width:82%!important;
font-size:.49em!important;
line-height:1.64!important;
margin-top:.18em!important;
}
.single-page .single-title-main .single-title-rule{
width:54px!important;height:2px!important;
margin:30px 0 0 auto!important;
background:var(--single-accent)!important;
opacity:.62!important;
}
/* Left counterweight: deck + low-contrast type echo, never another card. */
.single-page .single-counterpoint{
grid-column:1;
direction:rtl!important;
position:relative;
min-height:390px;
overflow:hidden;
padding:34px 34px 32px 0;
display:flex;
flex-direction:column;
justify-content:flex-end;
isolation:isolate;
}
.single-page .counterpoint-art{
position:absolute;inset:0;
overflow:hidden;
pointer-events:none;
z-index:-1;
}
.single-page .counter-glyph{
position:absolute;
left:-.08em;top:50%;
transform:translateY(-55%);
font:400 clamp(155px,17vw,255px)/.8 XB,serif;
color:var(--single-accent);
opacity:.075;
white-space:nowrap;
}
.single-page .counter-word{
position:absolute;
top:18px;right:0;
font:400 16px/1.6 Mashin,monospace;
color:color-mix(in srgb,var(--single-accent) 70%,var(--muted));
opacity:.72;
}
.single-page .counterpoint-art i{
position:absolute;
top:53px;right:0;
width:44px;height:1px;
background:var(--single-accent);
opacity:.48;
}
.single-page .single-counterpoint .single-deck{
position:relative;
z-index:1;
width:min(100%,410px)!important;
margin:0!important;
font:400 clamp(17px,1.25vw,21px)/2.04 Mashin,monospace!important;
color:color-mix(in srgb,var(--ink) 82%,var(--paper))!important;
text-align:justify!important;
text-align-last:right!important;
}
.single-page .counter-motif{
position:relative;z-index:1;
display:block;
margin-top:22px;
color:var(--muted);
font:400 9px/1.75 Sahel,Tahoma,sans-serif;
letter-spacing:.01em;
}
/* Pull the reading body under the visual center of the spread. */
.single-page .single-layout{
margin-top:8px!important;
padding-top:24px!important;
}
/* Focus mode returns to a pure reading title; the counter-field steps away. */
body.reading-focus .single-page .single-hero-counterpoint{
max-width:var(--read-measure)!important;
padding:46px 24px 16px!important;
}
body.reading-focus .single-page .single-hero-spread{
display:block!important;
min-height:0!important;
}
body.reading-focus .single-page .single-counterpoint{display:none!important}
body.reading-focus .single-page .single-title-main{
padding:0!important;
}
body.reading-focus .single-page .single-title-main::before,
body.reading-focus .single-page .single-title-main::after{display:none!important}
body.reading-focus .single-page .single-title-main h1{
max-width:var(--read-measure)!important;
}
body.reading-focus .single-page .single-hero-counterpoint .single-colophon{
margin-bottom:22px!important;
}
@media(max-width:900px){
.single-page .single-hero.single-hero-counterpoint{padding:42px 24px 34px!important}
.single-page .single-hero-spread{
grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr)!important;
gap:38px!important;
min-height:340px;
}
.single-page .single-title-main{padding-left:30px}
.single-page .single-counterpoint{min-height:340px;padding-right:20px}
.single-page .single-title-main h1{font-size:clamp(40px,5.3vw,56px)!important}
.single-page .single-counterpoint .single-deck{font-size:17px!important}
}
@media(max-width:700px){
.single-page .single-hero.single-hero-counterpoint{padding:34px 18px 26px!important}
.single-page .single-hero-counterpoint .single-colophon{
align-items:flex-start!important;
gap:8px!important;
margin-bottom:24px!important;
padding-bottom:10px!important;
}
.single-page .single-hero-counterpoint .colophon-group{
display:block!important;
font-size:9px!important;
}
.single-page .single-hero-counterpoint .colophon-group>*{display:inline-flex!important}
.single-page .single-hero-spread{
display:flex!important;
flex-direction:column!important;
gap:18px!important;
min-height:0!important;
direction:rtl!important;
}
.single-page .single-title-main{
order:1;
padding:0!important;
}
.single-page .single-title-main::before,
.single-page .single-title-main::after{display:none!important}
.single-page .single-title-main h1{
font-size:37px!important;
max-width:none!important;
}
.single-page .single-title-main h1 .title-secondary{max-width:100%!important}
.single-page .single-title-main .single-title-rule{width:42px!important;margin-top:19px!important}
.single-page .single-counterpoint{
order:2;
min-height:0!important;
padding:0!important;
overflow:visible!important;
}
.single-page .counterpoint-art,
.single-page .counter-motif{display:none!important}
.single-page .single-counterpoint .single-deck{
width:100%!important;
font-size:16px!important;
line-height:2!important;
}
}
/* ========================================================================
Saena 2.6 — Woven title prelude
Dense editorial opening: deck / typographic spine / title.
No artificial minimum height and no unearned blank field.
======================================================================== */
.single-page .single-hero.single-hero-weave{
display:block!important;
max-width:1180px!important;
margin-inline:auto!important;
padding:34px 28px 26px!important;
}
.single-page .single-hero-weave .single-colophon{
width:100%!important;
display:flex!important;
direction:ltr!important;
justify-content:space-between!important;
align-items:center!important;
gap:20px!important;
margin:0 0 22px!important;
padding:0 0 11px!important;
border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;
font:400 10px/1.65 Sahel,Tahoma,sans-serif!important;
color:var(--muted)!important;
}
.single-page .single-hero-weave .colophon-group{
display:flex!important;
direction:rtl!important;
align-items:center!important;
gap:0!important;
min-width:0;
}
.single-page .single-hero-weave .colophon-group>*{
display:inline-flex!important;
align-items:center!important;
white-space:nowrap;
}
.single-page .single-hero-weave .colophon-group>*+*::before{
content:'·';
margin:0 9px;
color:color-mix(in srgb,var(--single-accent) 65%,var(--muted));
}
.single-page .single-weave{
display:grid!important;
grid-template-columns:minmax(240px,.74fr) 86px minmax(0,1.36fr)!important;
gap:clamp(20px,3vw,42px)!important;
align-items:stretch!important;
direction:ltr!important;
position:relative;
}
.single-page .single-deck-field{
grid-column:1;
direction:rtl!important;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:20px 0 10px;
min-width:0;
}
.single-page .single-deck-field .single-deck{
width:100%!important;
max-width:390px!important;
margin:0!important;
font:400 clamp(16px,1.05vw,19px)/2.02 Mashin,monospace!important;
color:color-mix(in srgb,var(--ink) 84%,var(--paper))!important;
text-align:justify!important;
text-align-last:right!important;
}
.single-page .weave-motif{
display:block;
margin-top:15px;
color:var(--muted);
font:400 9px/1.7 Sahel,Tahoma,sans-serif;
}
.single-page .single-spine{
grid-column:2;
direction:rtl!important;
position:relative;
overflow:hidden;
min-height:220px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
padding:13px 6px 12px;
background:color-mix(in srgb,var(--single-accent) 11%,var(--paper));
border-inline:1px solid color-mix(in srgb,var(--single-accent) 22%,transparent);
isolation:isolate;
}
.single-page .single-spine::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to bottom,transparent 0 47%,color-mix(in srgb,var(--single-accent) 12%,transparent) 47% 47.6%,transparent 47.6% 100%);
pointer-events:none;
}
.single-page .spine-no{
position:relative;z-index:2;
font:400 9px/1 Sahel,Tahoma,sans-serif;
color:color-mix(in srgb,var(--single-accent) 70%,var(--muted));
}
.single-page .spine-glyph{
position:relative;z-index:1;
display:block;
max-width:100%;
font:400 clamp(58px,6vw,86px)/.85 XB,serif;
color:var(--single-accent);
opacity:.86;
white-space:nowrap;
transform:translateY(-2px);
}
.single-page .single-spine i{
position:relative;z-index:2;
display:block;
width:24px;height:2px;
background:var(--single-accent);
opacity:.64;
}
.single-page .single-title-field{
grid-column:3;
direction:rtl!important;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
padding:18px 0 18px;
}
.single-page .single-room-label{
display:block;
width:max-content;
max-width:100%;
margin:0 0 12px auto;
color:color-mix(in srgb,var(--single-accent) 76%,var(--ink));
font:400 12px/1.5 Mashin,monospace;
}
.single-page .single-title-field h1{
font-size:clamp(42px,4vw,60px)!important;
line-height:1.2!important;
max-width:760px!important;
margin:0!important;
text-wrap:balance!important;
}
.single-page .single-title-field h1 .title-secondary{
max-width:84%!important;
font-size:.48em!important;
line-height:1.66!important;
margin-top:.15em!important;
}
.single-page .single-title-field .single-title-rule{
width:46px!important;
height:2px!important;
margin:23px 0 0 auto!important;
background:var(--single-accent)!important;
opacity:.62!important;
}
.single-page .single-layout{
margin-top:4px!important;
padding-top:18px!important;
}
/* Retire every visual trace of the previous counterpoint composition. */
.single-page .single-hero-weave .single-hero-spread,
.single-page .single-hero-weave .single-counterpoint,
.single-page .single-hero-weave .counterpoint-art{display:none!important}
body.reading-focus .single-page .single-hero-weave{
max-width:var(--read-measure)!important;
padding:42px 24px 14px!important;
}
body.reading-focus .single-page .single-weave{
display:block!important;
}
body.reading-focus .single-page .single-deck-field,
body.reading-focus .single-page .single-spine,
body.reading-focus .single-page .single-room-label{display:none!important}
body.reading-focus .single-page .single-title-field{
padding:0!important;
}
body.reading-focus .single-page .single-title-field h1{
max-width:var(--read-measure)!important;
}
@media(max-width:900px){
.single-page .single-hero.single-hero-weave{padding:32px 24px 24px!important}
.single-page .single-weave{
grid-template-columns:minmax(210px,.68fr) 70px minmax(0,1.32fr)!important;
gap:22px!important;
}
.single-page .single-spine{min-height:200px}
.single-page .single-title-field h1{font-size:clamp(38px,5vw,52px)!important}
.single-page .single-deck-field .single-deck{font-size:16px!important}
}
@media(max-width:700px){
.single-page .single-hero.single-hero-weave{padding:28px 18px 22px!important}
.single-page .single-hero-weave .single-colophon{
align-items:flex-start!important;
gap:7px!important;
margin-bottom:18px!important;
padding-bottom:9px!important;
font-size:9px!important;
}
.single-page .single-weave{
display:grid!important;
grid-template-columns:1fr!important;
gap:14px!important;
direction:rtl!important;
}
.single-page .single-title-field{grid-column:1!important;grid-row:1!important;padding:0!important}
.single-page .single-title-field h1{font-size:36px!important;max-width:none!important}
.single-page .single-title-field h1 .title-secondary{max-width:100%!important}
.single-page .single-title-field .single-title-rule{margin-top:17px!important;width:40px!important}
.single-page .single-spine{
grid-column:1!important;grid-row:2!important;
min-height:0!important;height:38px!important;
padding:5px 10px!important;
flex-direction:row!important;
justify-content:space-between!important;
border-inline:0!important;
border-block:1px solid color-mix(in srgb,var(--single-accent) 20%,transparent)!important;
}
.single-page .spine-glyph{font-size:30px!important;line-height:1!important}
.single-page .single-spine i{width:28px!important}
.single-page .single-deck-field{grid-column:1!important;grid-row:3!important;padding:0!important}
.single-page .single-deck-field .single-deck{max-width:none!important;font-size:16px!important;line-height:2!important}
}
/* v2.7 — semantic Persian word-art ========================================
Persian display ornament must preserve joined words and meaning. The old
isolated-letter / monogram treatment is retired in favor of two meaningful
title words stacked as intact Persian forms. */
.entry-body{
grid-template-columns:minmax(0,1fr) 138px!important;
}
.entry-art{
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:22px 10px 30px!important;
}
.entry-art::before{right:50%!important;opacity:.45}
.entry-art::after{left:18px!important;right:18px!important;opacity:.32}
.entry-art .title-word-stack{
position:relative!important;
z-index:2!important;
width:100%!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:9px!important;
direction:rtl!important;
color:var(--card-hot,var(--card-accent,var(--brick)))!important;
transform:none!important;
}
.entry-art .title-word{
display:block!important;
max-width:100%!important;
white-space:nowrap!important;
text-align:center!important;
font-family:XB,serif!important;
font-weight:400!important;
line-height:1.08!important;
letter-spacing:0!important;
opacity:.94!important;
}
.entry-art .title-word.word-sm{font-size:35px!important}
.entry-art .title-word.word-md{font-size:31px!important}
.entry-art .title-word.word-lg{font-size:27px!important}
.entry-art .title-word.word-xl{font-size:23px!important}
.entry-art .title-word+ .title-word{
color:color-mix(in srgb,var(--card-hot,var(--card-accent,var(--brick))) 76%,var(--card-ink,var(--ink)))!important;
}
.entry-art-label{
bottom:9px!important;
font-size:7px!important;
opacity:.72!important;
}
.entry-card:hover .entry-art .title-word-stack{transform:none!important}
.entry-card:hover .entry-art .title-word{opacity:1!important}
.single-page .single-weave{
grid-template-columns:minmax(240px,.72fr) 126px minmax(0,1.36fr)!important;
gap:clamp(20px,2.7vw,38px)!important;
}
.single-page .single-spine{
padding:13px 8px 12px!important;
}
.single-page .single-spine .title-word-stack{
position:relative!important;
z-index:2!important;
width:100%!important;
flex:1 1 auto!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
direction:rtl!important;
color:var(--single-accent)!important;
}
.single-page .single-spine .title-word{
display:block!important;
max-width:100%!important;
white-space:nowrap!important;
text-align:center!important;
font-family:XB,serif!important;
font-weight:400!important;
line-height:1.06!important;
letter-spacing:0!important;
}
.single-page .single-spine .title-word.word-sm{font-size:37px!important}
.single-page .single-spine .title-word.word-md{font-size:32px!important}
.single-page .single-spine .title-word.word-lg{font-size:28px!important}
.single-page .single-spine .title-word.word-xl{font-size:23px!important}
.single-page .single-spine .title-word+ .title-word{opacity:.72!important}
.single-page .single-spine::after{
content:'';
position:absolute;
left:14px;right:14px;top:50%;height:1px;
background:color-mix(in srgb,var(--single-accent) 18%,transparent);
pointer-events:none;
}
/* Remove the old isolated-glyph selectors if stale cached markup appears. */
.entry-glyph,.spine-glyph{display:none!important}
@media(max-width:1120px){
.entry-body{grid-template-columns:minmax(0,1fr) 126px!important}
.single-page .single-weave{grid-template-columns:minmax(210px,.68fr) 108px minmax(0,1.32fr)!important}
.single-page .single-spine .title-word.word-sm{font-size:32px!important}
.single-page .single-spine .title-word.word-md{font-size:28px!important}
.single-page .single-spine .title-word.word-lg{font-size:24px!important}
.single-page .single-spine .title-word.word-xl{font-size:20px!important}
}
@media(max-width:700px){
.entry-body{grid-template-columns:minmax(0,1fr) 112px!important}
.entry-art .title-word.word-sm{font-size:30px!important}
.entry-art .title-word.word-md{font-size:27px!important}
.entry-art .title-word.word-lg{font-size:23px!important}
.entry-art .title-word.word-xl{font-size:20px!important}
.single-page .single-spine .title-word-stack{
flex-direction:row!important;
justify-content:center!important;
gap:10px!important;
}
.single-page .single-spine .title-word{
font-size:20px!important;
}
.single-page .single-spine .title-word+ .title-word::before{
content:'·';
margin-left:10px;
opacity:.45;
}
.single-page .single-spine::after{display:none!important}
}
/* ========================================================================
Saēna 2.8 — literal book-spine typography
Preserve the first two title words exactly as written, append an ellipsis,
and rotate the complete joined Persian phrase as one unit.
======================================================================== */
.entry-art{
position:relative!important;
overflow:hidden!important;
}
.entry-art .title-spine-phrase{
position:absolute!important;
z-index:3!important;
left:50%!important;
top:50%!important;
width:max-content!important;
max-width:none!important;
display:block!important;
white-space:nowrap!important;
direction:rtl!important;
unicode-bidi:isolate!important;
text-align:right!important;
font-family:XB,serif!important;
font-weight:400!important;
line-height:1!important;
letter-spacing:0!important;
color:var(--card-hot,var(--card-accent,var(--brick)))!important;
opacity:.96!important;
transform:translate(-50%,-50%) rotate(-90deg)!important;
transform-origin:center center!important;
transition:opacity .22s ease!important;
}
.entry-art .title-spine-phrase.spine-sm{font-size:31px!important}
.entry-art .title-spine-phrase.spine-md{font-size:27px!important}
.entry-art .title-spine-phrase.spine-lg{font-size:23px!important}
.entry-art .title-spine-phrase.spine-xl{font-size:20px!important}
.entry-card:hover .entry-art .title-spine-phrase{
transform:translate(-50%,-50%) rotate(-90deg)!important;
opacity:1!important;
}
.entry-art-label{
left:50%!important;
right:auto!important;
transform:translateX(-50%)!important;
width:max-content!important;
max-width:calc(100% - 12px)!important;
white-space:nowrap!important;
}
.single-page .single-spine{
position:relative!important;
overflow:hidden!important;
}
.single-page .single-spine .title-spine-phrase{
position:absolute!important;
z-index:3!important;
left:50%!important;
top:50%!important;
width:max-content!important;
max-width:none!important;
display:block!important;
white-space:nowrap!important;
direction:rtl!important;
unicode-bidi:isolate!important;
text-align:right!important;
font-family:XB,serif!important;
font-weight:400!important;
line-height:1!important;
letter-spacing:0!important;
color:var(--single-accent)!important;
opacity:.93!important;
transform:translate(-50%,-50%) rotate(-90deg)!important;
transform-origin:center center!important;
}
.single-page .single-spine .title-spine-phrase.spine-sm{font-size:34px!important}
.single-page .single-spine .title-spine-phrase.spine-md{font-size:30px!important}
.single-page .single-spine .title-spine-phrase.spine-lg{font-size:26px!important}
.single-page .single-spine .title-spine-phrase.spine-xl{font-size:22px!important}
.entry-art .title-word,
.single-page .single-spine .title-word{display:none!important}
@media(max-width:700px){
.entry-body{
grid-template-columns:minmax(0,1fr) 86px!important;
}
.entry-art .title-spine-phrase.spine-sm{font-size:27px!important}
.entry-art .title-spine-phrase.spine-md{font-size:24px!important}
.entry-art .title-spine-phrase.spine-lg{font-size:21px!important}
.entry-art .title-spine-phrase.spine-xl{font-size:18px!important}
.single-page .single-weave{
display:grid!important;
grid-template-columns:58px minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
column-gap:16px!important;
row-gap:16px!important;
direction:ltr!important;
}
.single-page .single-title-field{
grid-column:2!important;
grid-row:1!important;
direction:rtl!important;
}
.single-page .single-deck-field{
grid-column:2!important;
grid-row:2!important;
direction:rtl!important;
}
.single-page .single-spine{
grid-column:1!important;
grid-row:1 / span 2!important;
width:58px!important;
height:auto!important;
min-height:178px!important;
padding:9px 5px!important;
flex-direction:column!important;
border-block:0!important;
border-inline:1px solid color-mix(in srgb,var(--single-accent) 20%,transparent)!important;
}
.single-page .single-spine .title-spine-phrase.spine-sm{font-size:25px!important}
.single-page .single-spine .title-spine-phrase.spine-md{font-size:22px!important}
.single-page .single-spine .title-spine-phrase.spine-lg{font-size:19px!important}
.single-page .single-spine .title-spine-phrase.spine-xl{font-size:17px!important}
.single-page .single-spine i{
width:22px!important;
height:2px!important;
}
}
@media(max-width:440px){
.single-page .single-weave{
grid-template-columns:50px minmax(0,1fr)!important;
column-gap:12px!important;
}
.single-page .single-spine{
width:50px!important;
min-height:164px!important;
}
.single-page .single-spine .title-spine-phrase{
font-size:18px!important;
}
}
/* ========================================================================
Saēna 2.11 — True Balanced Persian Columns
Short multicolumn regions let the browser fragment paragraphs and lists
naturally. No block-pair geometry, no stranded white rectangles.
======================================================================== */
.reading-controls{
display:grid!important;
grid-template-columns:1fr!important;
gap:5px!important;
max-width:none!important;
}
.reading-focus-btn{width:100%!important}
.reading-layout-switch,.reading-size-switch{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:4px!important;
}
.reading-layout-switch button,.reading-size-switch button{
min-height:31px!important;
text-align:center!important;
border-bottom:1px solid var(--quiet-line)!important;
}
.reading-layout-switch button[aria-pressed="true"]{
color:var(--ink)!important;
border-bottom-color:var(--single-accent)!important;
background:color-mix(in srgb,var(--single-accent) 5%,transparent)!important;
}
.reading-layout-switch button:disabled{opacity:.32!important;cursor:default!important}
body.reading-two-column .single-layout{
grid-template-columns:132px minmax(0,1120px)!important;
gap:44px!important;
max-width:1328px!important;
padding-inline:32px!important;
}
body.reading-two-column .single-page .single-layout .prose,
body.reading-two-column .prose{
display:block!important;
width:100%!important;
max-width:1120px!important;
font-size:calc(var(--read-size) * var(--reader-scale) * .75)!important;
line-height:1.94!important;
direction:rtl!important;
}
/* A reading-columns region is a short "spread". Unlike a CSS grid, its text
can actually continue from the right column into the left, even inside one
long paragraph or list item. */
body.reading-two-column .reading-columns{
display:block!important;
width:100%!important;
margin:0 0 clamp(28px,3vw,44px)!important;
padding:0!important;
direction:rtl!important;
column-count:2!important;
column-gap:clamp(54px,5vw,78px)!important;
column-fill:balance!important;
column-rule:1px solid color-mix(in srgb,var(--ink) 9%,transparent)!important;
font:inherit!important;
color:inherit!important;
orphans:3;
widows:3;
}
/* One coherent text system inside both columns. */
body.reading-two-column .reading-columns > *{
max-width:none!important;
margin:0 0 1em!important;
padding-top:0!important;
padding-bottom:0!important;
font-size:1em!important;
line-height:1.94!important;
color:inherit!important;
text-align:justify!important;
text-align-last:right!important;
break-inside:auto!important;
}
body.reading-two-column .reading-columns > *:last-child{margin-bottom:0!important}
body.reading-two-column .reading-columns p,
body.reading-two-column .reading-columns div{
font-family:Sahel,Tahoma,sans-serif!important;
font-size:1em!important;
line-height:1.94!important;
letter-spacing:normal!important;
}
body.reading-two-column .reading-columns p span,
body.reading-two-column .reading-columns p font,
body.reading-two-column .reading-columns div span,
body.reading-two-column .reading-columns div font{
font-family:inherit!important;
font-size:inherit!important;
line-height:inherit!important;
letter-spacing:normal!important;
color:inherit!important;
}
/* Numbered prose remains part of the column current. It is not promoted to a
full-page object. The number becomes a quiet hanging marker appropriate to
the smaller two-column type size. */
body.reading-two-column .reading-columns .saena-numbered-list,
body.reading-two-column .reading-columns ol,
body.reading-two-column .reading-columns ul{
display:block!important;
width:auto!important;
margin:.65em 0 1em!important;
padding:0!important;
border:0!important;
background:none!important;
break-inside:auto!important;
}
body.reading-two-column .reading-columns .saena-numbered-list>li,
body.reading-two-column .reading-columns ol>li{
display:block!important;
position:relative!important;
grid-template-columns:none!important;
margin:0 0 .72em!important;
padding:0 2.15em 0 0!important;
border:0!important;
background:none!important;
break-inside:auto!important;
text-align:justify!important;
text-align-last:right!important;
}
body.reading-two-column .reading-columns .saena-numbered-list>li::before,
body.reading-two-column .reading-columns ol>li::before{
content:attr(data-no)!important;
position:absolute!important;
inset-inline-start:auto!important;
right:0!important;
top:.18em!important;
width:1.55em!important;
padding:0!important;
font:400 14px/1.5 Mashin,Sahel,sans-serif!important;
color:var(--single-accent,var(--brick))!important;
opacity:.68!important;
text-align:right!important;
}
body.reading-two-column .reading-columns .saena-numbered-list>li::after,
body.reading-two-column .reading-columns ol>li::after{
content:none!important;
display:none!important;
}
body.reading-two-column .reading-columns .saena-list-body{
display:block!important;
min-width:0!important;
text-align:justify!important;
text-align-last:right!important;
}
body.reading-two-column .reading-columns .saena-list-body p{
margin:0!important;
font:inherit!important;
}
body.reading-two-column .reading-columns ul{
list-style:disc!important;
padding-inline-start:1.25em!important;
}
body.reading-two-column .reading-columns ul>li{
margin:0 0 .58em!important;
padding:0!important;
break-inside:auto!important;
}
/* Wide structural interruptions. These are the only things allowed to escape
the two-column current. */
body.reading-two-column .prose > .reading-wide{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:clamp(30px,3.5vw,50px) auto!important;
padding:0!important;
direction:rtl!important;
clear:both!important;
}
body.reading-two-column .prose > h2.reading-wide,
body.reading-two-column .prose > h3.reading-wide,
body.reading-two-column .prose > h4.reading-wide{
width:min(100%,920px)!important;
margin-inline:auto!important;
text-align:right!important;
}
body.reading-two-column .prose > blockquote.reading-wide{
width:min(100%,880px)!important;
margin-inline:auto!important;
}
body.reading-two-column .prose > table.reading-wide,
body.reading-two-column .prose > pre.reading-wide{
width:min(100%,1000px)!important;
margin-inline:auto!important;
}
/* Source section separators are full-width but quiet and compact. */
body.reading-two-column .prose > hr.reading-wide{
width:min(100%,720px)!important;
margin:24px auto!important;
border:0!important;
border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;
}
/* Images, SoundCloud, video and other media sit in the centre of the complete
reading field, never in one column. */
body.reading-two-column .prose > .reading-media-wide{
width:100%!important;
max-width:1120px!important;
margin:clamp(34px,4vw,62px) auto!important;
text-align:center!important;
}
body.reading-two-column .reading-media-wide img,
body.reading-two-column .reading-media-wide video,
body.reading-two-column .reading-media-wide audio,
body.reading-two-column .reading-media-wide object,
body.reading-two-column .reading-media-wide embed{
display:block!important;
width:auto!important;
max-width:min(100%,1000px)!important;
height:auto!important;
margin-inline:auto!important;
}
body.reading-two-column .reading-media-wide audio{
width:min(100%,760px)!important;
}
body.reading-two-column .reading-media-wide iframe{
display:block!important;
width:min(100%,1000px)!important;
max-width:100%!important;
margin-inline:auto!important;
}
body.reading-two-column .reading-media-wide figure,
body.reading-two-column figure.reading-media-wide{
margin-inline:auto!important;
}
body.reading-two-column .reading-media-wide figcaption,
body.reading-two-column .reading-media-wide .wp-caption-text{
max-width:820px!important;
margin:.75em auto 0!important;
text-align:center!important;
}
/* Focus mode uses the same architecture, just without surrounding furniture. */
body.reading-focus.reading-two-column .single-layout{
grid-template-columns:1fr!important;
max-width:1180px!important;
padding-inline:30px!important;
}
body.reading-focus.reading-two-column .prose{
max-width:1080px!important;
margin-inline:auto!important;
}
/* Two columns are intentionally disabled on narrow screens. */
@media(max-width:919px){
body.reading-two-column .single-layout{
grid-template-columns:1fr!important;
max-width:calc(var(--read-measure) + 48px)!important;
}
body.reading-two-column .prose{
display:block!important;
max-width:var(--read-measure)!important;
font-size:calc(var(--read-size) * var(--reader-scale))!important;
line-height:var(--read-leading)!important;
}
body.reading-two-column .reading-columns{
column-count:auto!important;
column-rule:0!important;
margin:0!important;
}
}
/* ========================================================================
Saēna 2.12 — exact season titles / book-spine landing
The title before "|" is the poetic title and belongs to the right spine.
The title after "|" is the informative title and belongs to the left.
No invented section description is used in the landing rows.
======================================================================== */
.rooms{
position:relative!important;
background:var(--paper)!important;
}
.rooms::before{display:none!important}
.rooms .room{
--season-spine-width:138px;
display:grid!important;
grid-template-columns:220px minmax(0,1fr) var(--season-spine-width)!important;
grid-template-areas:"info body spine"!important;
direction:ltr!important;
min-height:340px!important;
border-top:1px solid var(--line)!important;
background:color-mix(in srgb,var(--room-pigment,var(--paper)) 7%,var(--paper))!important;
}
.rooms .room-info{
grid-area:info!important;
direction:rtl!important;
min-width:0!important;
padding:31px 28px 30px!important;
display:flex!important;
flex-direction:column!important;
justify-content:space-between!important;
align-items:flex-start!important;
border-inline:0!important;
border-right:1px solid var(--quiet-line)!important;
background:color-mix(in srgb,var(--paper2) 56%,transparent)!important;
}
.rooms .room-info .room-folio{
font:400 10px/1.6 Sahel,Tahoma,sans-serif!important;
color:var(--muted)!important;
}
.rooms .room-info .room-informative{
width:100%!important;
max-width:none!important;
margin:auto 0!important;
font:400 clamp(31px,2.35vw,43px)/1.35 XB,serif!important;
color:var(--ink)!important;
text-align:right!important;
text-wrap:balance!important;
}
.rooms .room-enter{
font:400 10px/1.6 Sahel,Tahoma,sans-serif!important;
color:var(--muted)!important;
padding-bottom:3px!important;
border-bottom:1px solid color-mix(in srgb,var(--room-pigment) 62%,var(--line))!important;
}
.rooms .room-body{
grid-area:body!important;
direction:rtl!important;
min-width:0!important;
padding:34px 44px!important;
display:flex!important;
align-items:center!important;
border:0!important;
background:transparent!important;
}
.rooms .room:nth-child(even) .room-body{
background:color-mix(in srgb,#fff 7%,transparent)!important;
}
.rooms .room-feature.text-only{
width:100%!important;
max-width:860px!important;
margin-inline:auto!important;
}
.rooms .room-feature.text-only>strong{
font-size:clamp(29px,2.15vw,39px)!important;
line-height:1.32!important;
}
.rooms .room-feature.text-only>span:not(.title-line){
max-width:64ch!important;
font-size:14px!important;
line-height:1.95!important;
}
.rooms .room-feature:not(.text-only){
width:100%!important;
grid-template-columns:minmax(210px,.78fr) minmax(0,1fr)!important;
}
.rooms .room-feature-copy{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
gap:12px!important;
}
/* True right-hand book spine. The full poetic title is kept intact and the
whole Persian phrase is rotated as one joined unit. */
.rooms .room-season-spine{
grid-area:spine!important;
direction:rtl!important;
position:relative!important;
min-width:0!important;
overflow:hidden!important;
display:block!important;
border-left:1px solid color-mix(in srgb,var(--room-pigment) 32%,var(--line))!important;
background:color-mix(in srgb,var(--room-pigment) 88%,var(--paper))!important;
color:var(--room-ink,var(--ink))!important;
}
.rooms .room-season-spine span{
position:absolute!important;
left:50%!important;
top:50%!important;
display:block!important;
width:max-content!important;
max-width:none!important;
white-space:nowrap!important;
transform:translate(-50%,-50%) rotate(-90deg)!important;
transform-origin:center center!important;
direction:rtl!important;
unicode-bidi:isolate!important;
text-align:right!important;
font-family:XB,serif!important;
font-weight:400!important;
line-height:1!important;
letter-spacing:0!important;
text-wrap:nowrap!important;
}
.rooms .room-season-spine.season-spine-sm span{font-size:41px!important}
.rooms .room-season-spine.season-spine-md span{font-size:36px!important}
.rooms .room-season-spine.season-spine-lg span{font-size:31px!important}
.rooms .room-season-spine.season-spine-xl span{font-size:27px!important}
.rooms .room-season-spine.season-spine-xxl span{font-size:23px!important}
.rooms .room-season-spine i{
position:absolute!important;
left:50%!important;
bottom:24px!important;
width:34px!important;
height:2px!important;
transform:translateX(-50%)!important;
background:currentColor!important;
opacity:.56!important;
}
.rooms .room-season-spine:hover span{opacity:.78!important}
.rooms .room-season-spine:hover i{width:54px!important}
/* Retire the old custom word/motif block and the separate vertical go rail on
the landing page; their semantic job is now handled by the exact two titles. */
.rooms .room-art,
.rooms .room-go{display:none!important}
/* Preserve the approved material palette on the new spines. */
.rooms .room-voice{--room-pigment:#7D8463;--room-ink:#1D2017}
.rooms .room-photos{--room-pigment:#405864;--room-ink:#F2EDE5}
.rooms .room-essay{--room-pigment:#966E78;--room-ink:#261A1E}
.rooms .room-inside{--room-pigment:#5B716C;--room-ink:#F1ECE4}
.rooms .room-translations{--room-pigment:#C3AE75;--room-ink:#292318}
.rooms .room-poems{--room-pigment:#857080;--room-ink:#F3EEE7}
.rooms .room-songs{--room-pigment:#505B70;--room-ink:#F2EEE8}
@media(max-width:1120px){
.rooms .room{
--season-spine-width:116px;
grid-template-columns:190px minmax(0,1fr) var(--season-spine-width)!important;
min-height:320px!important;
}
.rooms .room-info{padding:27px 22px!important}
.rooms .room-info .room-informative{font-size:clamp(28px,3vw,36px)!important}
.rooms .room-body{padding:30px!important}
.rooms .room-season-spine.season-spine-sm span{font-size:35px!important}
.rooms .room-season-spine.season-spine-md span{font-size:31px!important}
.rooms .room-season-spine.season-spine-lg span{font-size:27px!important}
.rooms .room-season-spine.season-spine-xl span{font-size:23px!important}
.rooms .room-season-spine.season-spine-xxl span{font-size:20px!important}
}
@media(max-width:760px){
.rooms .room{
--season-spine-width:76px;
grid-template-columns:minmax(0,1fr) var(--season-spine-width)!important;
grid-template-areas:
"info spine"
"body spine"!important;
min-height:0!important;
}
.rooms .room-info{
grid-area:info!important;
padding:22px 18px 12px!important;
border-right:0!important;
border-bottom:0!important;
}
.rooms .room-info .room-informative{
margin:16px 0 10px!important;
font-size:30px!important;
}
.rooms .room-enter{display:none!important}
.rooms .room-body{
grid-area:body!important;
padding:12px 18px 27px!important;
}
.rooms .room-season-spine{
grid-area:spine!important;
min-height:260px!important;
border-left:0!important;
border-right:1px solid var(--quiet-line)!important;
}
.rooms .room-season-spine span{font-size:23px!important}
.rooms .room-season-spine.season-spine-xl span,
.rooms .room-season-spine.season-spine-xxl span{font-size:19px!important}
.rooms .room-season-spine i{bottom:18px!important;width:24px!important}
}
/* ========================================================================
Saēna 3.0 — Photographic publishing layer
یک رود و چند تصویر / Photostream
دفترچهها / Photosets
کتاب / Notebook
======================================================================== */
.photo-public-page{
--photo-night:#20282d;
--photo-night-2:#405864;
--photo-warm:#e0a579;
--photo-paper:#eeeae2;
--photo-ink:#18191b;
max-width:var(--max);
margin:0 auto 70px;
border-inline:1px solid var(--line);
background:var(--paper);
}
.photo-hub-hero{
min-height:310px;
padding:58px clamp(24px,4vw,60px) 48px;
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
gap:clamp(42px,7vw,110px);
align-items:end;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,transparent 0 68%,color-mix(in srgb,#405864 8%,transparent) 68% 100%),
var(--paper);
}
.photo-hub-hero h1{
margin:10px 0 0;
max-width:820px;
font:400 clamp(56px,7vw,104px)/1.02 XB,serif;
text-wrap:balance;
}
.photo-hub-hero h1 .title-secondary{
margin-top:.22em;
font:400 .38em/1.6 Mashin,Sahel,sans-serif;
}
.photo-hub-hero>div>small{
display:block;
margin-top:14px;
font:400 10px/1.3 Sahel,sans-serif;
letter-spacing:.12em;
color:var(--muted);
}
.photo-hub-hero>p{
margin:0;
max-width:44ch;
font:400 clamp(18px,1.5vw,23px)/2 Mashin,Sahel,sans-serif;
text-align:justify;
text-align-last:right;
}
.photo-hub-main{
background:
linear-gradient(90deg,color-mix(in srgb,#405864 8%,transparent),transparent 37%),
var(--paper);
}
/* Three-part navigation: not tabs in a SaaS sense, but three editorial doors. */
.photo-system-nav{
position:sticky;
top:0;
z-index:22;
display:grid;
grid-template-columns:repeat(3,1fr);
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--paper) 92%,transparent);
backdrop-filter:blur(14px);
}
.site-header:not(.is-hidden) + .scrim + .drawer + .photo-system-nav{top:0}
.photo-system-nav a{
position:relative;
min-height:92px;
padding:19px clamp(18px,2.3vw,34px);
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
border-left:1px solid var(--line);
overflow:hidden;
}
.photo-system-nav a:first-child{border-left:0}
.photo-system-nav strong{font:400 clamp(24px,2.1vw,34px)/1.25 XB,serif}
.photo-system-nav small{font:400 9px/1.4 Sahel,sans-serif;letter-spacing:.12em;color:var(--muted)}
.photo-system-nav i{
position:absolute;
right:0;bottom:0;width:0;height:3px;
background:#405864;transition:width .28s ease;
}
.photo-system-nav a:nth-child(2) i{background:#966e78}
.photo-system-nav a:nth-child(3) i{background:#b39a61}
.photo-system-nav a:hover i,.photo-system-nav a.active i{width:100%}
.photo-system-nav a.active{background:color-mix(in srgb,#405864 5%,var(--paper))}
.photo-home-section{padding:54px clamp(20px,4vw,58px) 72px;border-bottom:1px solid var(--line)}
.photo-home-section>header{
display:flex;align-items:end;justify-content:space-between;gap:24px;
margin-bottom:30px;padding-bottom:15px;border-bottom:1px solid var(--quiet-line);
}
.photo-home-section>header span{display:block;font:400 9px/1 Sahel,sans-serif;letter-spacing:.12em;color:var(--muted)}
.photo-home-section>header h2{margin:5px 0 0;font:400 clamp(34px,4vw,56px)/1.15 XB,serif}
.photo-home-section>header>a{font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px}
.photo-count-line{
padding:18px clamp(20px,4vw,58px);
display:flex;align-items:center;gap:16px;
font:400 10px/1 Sahel,sans-serif;color:var(--muted);
}
.photo-count-line i{height:1px;flex:1;background:var(--quiet-line)}
/* The river is dense but not a masonry plugin: CSS grid makes each image a
different current in one chronological surface. */
.photo-river{
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-rows:72px;
grid-auto-flow:dense;
gap:8px;
}
.photo-river-full{padding:0 clamp(10px,2vw,26px) 70px}
.river-photo{position:relative;overflow:hidden;background:#d6d1c8;min-height:220px}
.river-photo.river-wide{grid-column:span 8;grid-row:span 5}
.river-photo.river-landscape{grid-column:span 6;grid-row:span 5}
.river-photo.river-square{grid-column:span 4;grid-row:span 5}
.river-photo.river-portrait{grid-column:span 4;grid-row:span 7}
.river-photo.river-pos-4,.river-photo.river-pos-8{grid-column:span 5}
.river-photo>a{position:absolute;inset:0;display:block}
.river-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.river-photo-meta{
position:absolute;inset:auto 0 0;
padding:52px 14px 12px;
background:linear-gradient(transparent,rgba(17,19,20,.76));
color:#f4efe7;opacity:0;transform:translateY(8px);transition:.28s ease;
}
.river-photo-meta b{display:block;font:400 17px/1.45 XB,serif}
.river-photo-meta small{display:block;margin-top:3px;font:400 9px/1.5 Sahel,sans-serif;opacity:.8}
.river-photo:hover img{transform:scale(1.018);filter:saturate(.9) contrast(1.03)}
.river-photo:hover .river-photo-meta{opacity:1;transform:none}
/* Photosets: cover + reading information + a literal vertical spine. */
.photoset-library{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.photoset-card{
min-height:360px;
display:grid;
grid-template-columns:minmax(250px,.78fr) minmax(330px,1.2fr) 108px;
grid-template-areas:"copy cover spine";
direction:ltr;
border-bottom:1px solid var(--line);
}
.photoset-card:nth-child(even){background:color-mix(in srgb,#405864 4%,var(--paper))}
.photoset-cover{grid-area:cover;position:relative;min-height:360px;overflow:hidden;background:#d2ccc2}
.photoset-cover img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.photoset-cover:hover img{transform:scale(1.02)}
.photoset-count{
position:absolute;left:12px;bottom:12px;padding:5px 8px;
background:rgba(17,19,20,.76);color:#fff;font:400 9px/1 Sahel,sans-serif;
}
.photoset-copy{
grid-area:copy;direction:rtl;
padding:38px clamp(24px,3vw,46px);
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.photoset-copy h2{margin:12px 0;font:400 clamp(32px,3vw,48px)/1.3 XB,serif}
.photoset-copy h2 .title-secondary{font:.48em/1.8 Mashin,Sahel,sans-serif}
.photoset-copy p{margin:0 0 18px;max-width:38ch;font-size:14px;line-height:1.95;text-align:justify;text-align-last:right}
.photoset-spine{
grid-area:spine;position:relative;overflow:hidden;
background:#405864;color:#f2ede5;border-left:1px solid rgba(0,0,0,.12);
}
.photoset-card:nth-child(3n+2) .photoset-spine{background:#966e78;color:#f6efe8}
.photoset-card:nth-child(3n+3) .photoset-spine{background:#7d8463;color:#171a13}
.photoset-spine span{
position:absolute;left:50%;top:50%;width:max-content;max-width:none;white-space:nowrap;
transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;
direction:rtl;font:400 29px/1 XB,serif;
}
.photoset-spine.season-spine-xl span,.photoset-spine.season-spine-xxl span{font-size:23px}
.photoset-spine i{position:absolute;left:50%;bottom:25px;width:30px;height:2px;transform:translateX(-50%);background:currentColor;opacity:.55}
/* Notebooks look like objects with page depth rather than generic cards. */
.notebook-library{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;
padding:36px clamp(20px,4vw,58px) 72px;
}
.notebook-card{min-width:0}
.notebook-object{
position:relative;
display:grid;grid-template-columns:44px 1fr;grid-template-areas:"edge cover";
min-height:430px;margin:0 12px 18px 0;
box-shadow:9px 10px 0 #d0c7b9,18px 20px 0 #e1d9cd;
background:#405864;color:#f3eee7;
}
.notebook-edge{
grid-area:edge;writing-mode:vertical-rl;transform:rotate(180deg);
display:flex;justify-content:space-between;align-items:center;padding:16px 10px;
background:#26343b;border-left:1px solid rgba(255,255,255,.15);
font:400 10px/1 Sahel,sans-serif;
}
.notebook-edge b{font:400 24px/1 XB,serif}
.notebook-cover{grid-area:cover;position:relative;overflow:hidden}
.notebook-cover>img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.04)}
.notebook-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(17,19,20,.78))}
.notebook-title{position:absolute;z-index:2;right:30px;left:30px;bottom:28px}
.notebook-title small{display:block;font:400 9px/1 Sahel,sans-serif;letter-spacing:.14em;opacity:.78}
.notebook-title strong{display:block;margin-top:8px;font:400 clamp(34px,3.3vw,52px)/1.25 XB,serif}
.notebook-contact{
position:absolute;z-index:3;left:12px;top:12px;display:flex;gap:3px;width:34%;
}
.notebook-contact img{width:33.333%;aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(255,255,255,.5)}
.notebook-copy{padding:7px 12px 0}
.notebook-copy p{max-width:55ch;margin:7px 0 10px;line-height:1.9;text-align:justify;text-align-last:right}
/* Photoset reading: image/text folios share one 12-column page. */
.photoset-page{max-width:var(--max);margin:auto;border-inline:1px solid var(--line);background:var(--paper)}
.photoset-hero{
display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);
min-height:520px;border-bottom:1px solid var(--line);
}
.photoset-hero-copy{
padding:54px clamp(28px,4vw,60px);
display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
}
.photo-kicker{font:400 11px/1.5 Sahel,sans-serif;color:var(--muted)}
.photo-kicker small{margin-right:8px;letter-spacing:.12em}
.photoset-hero h1{margin:18px 0;font:400 clamp(54px,6vw,90px)/1.05 XB,serif}
.photoset-hero h1 .title-secondary{font:.42em/1.65 Mashin,Sahel,sans-serif}
.photo-meta-line{display:flex;gap:12px;flex-wrap:wrap;font:400 10px/1.5 Sahel,sans-serif;color:var(--muted)}
.photoset-hero-copy>p{margin:22px 0 0;max-width:38ch;font:400 19px/2 Mashin,Sahel,sans-serif;text-align:justify;text-align-last:right}
.photoset-hero-image{position:relative;overflow:hidden;background:#242c31}
.photoset-hero-image img{width:100%;height:100%;object-fit:cover}
.photoset-story{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 14px;
padding:70px clamp(20px,4vw,62px) 100px;
align-items:start;
}
.photoset-photo{margin:0;grid-column:2 / 12}
.photoset-photo.set-layout-full{grid-column:1 / -1}
.photoset-photo.set-layout-wide,.photoset-photo.set-layout-landscape{grid-column:2 / 12}
.photoset-photo.set-layout-portrait{grid-column:4 / 10}
.photoset-photo.set-layout-pair,.photoset-photo.set-layout-square{grid-column:span 6}
.photoset-photo a{display:block;background:#d8d1c6}
.photoset-photo img{display:block;width:100%;max-height:88vh;object-fit:contain}
.photoset-photo figcaption{
display:flex;justify-content:space-between;gap:20px;margin-top:8px;
font:400 9px/1.5 Sahel,sans-serif;color:var(--muted)
}
.photoset-text{grid-column:4 / 10;padding:18px 0 28px}
.photoset-text p{margin:0;font-size:21px;line-height:2.1;text-align:justify;text-align-last:right}
.photo-end{display:flex;justify-content:space-between;gap:22px;padding:26px clamp(20px,4vw,62px);border-top:1px solid var(--line);font-size:11px}
/* Notebook as a sequence of chapters. */
.notebook-page{max-width:var(--max);margin:auto;border-inline:1px solid var(--line);background:var(--paper)}
.notebook-hero{
min-height:420px;padding:58px clamp(24px,5vw,72px);
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;
background:linear-gradient(90deg,color-mix(in srgb,#b39a61 13%,var(--paper)),var(--paper));
border-bottom:1px solid var(--line);
}
.notebook-hero h1{margin:16px 0;font:400 clamp(58px,7vw,100px)/1 XB,serif}
.notebook-intro strong{display:block;font:400 23px/1.8 Mashin,Sahel,sans-serif}
.notebook-intro p{margin:20px 0 0;line-height:2;text-align:justify;text-align-last:right}
.notebook-chapters{padding:42px clamp(20px,4vw,62px) 90px}
.notebook-chapter{
display:grid;grid-template-columns:90px minmax(320px,1fr) minmax(260px,.72fr);
grid-template-areas:"spine image copy";direction:ltr;
min-height:340px;border-bottom:1px solid var(--line);
}
.chapter-spine{grid-area:spine;position:relative;overflow:hidden;background:#405864;color:#f4efe8}
.chapter-spine:nth-child(1){display:block}
.chapter-spine small{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:9px}
.chapter-spine span{
position:absolute;left:50%;top:50%;width:max-content;max-width:none;white-space:nowrap;
transform:translate(-50%,-50%) rotate(-90deg);font:400 24px/1 XB,serif;direction:rtl;
}
.chapter-image{grid-area:image;min-height:340px;overflow:hidden;background:#d6d0c6}
.chapter-image img{width:100%;height:100%;object-fit:cover}
.chapter-copy{grid-area:copy;direction:rtl;padding:38px;display:flex;flex-direction:column;justify-content:center}
.chapter-copy h2{font:400 clamp(31px,3vw,46px)/1.35 XB,serif;margin:0 0 12px}
.chapter-copy p{font-size:14px;line-height:1.9;text-align:justify;text-align-last:right}
.chapter-copy>span{font-size:9px;color:var(--muted)}
/* Embeds inside prose: they are visual interludes, not column content. */
.saena-photo-embed{
width:min(1120px,calc(100vw - 56px))!important;
max-width:none!important;
margin:3.2em 50%!important;
transform:translateX(50%)!important;
padding:0!important;
border-block:1px solid var(--line)!important;
background:color-mix(in srgb,#405864 4%,var(--paper))!important;
}
.saena-photo-embed>header{
padding:12px 4px 11px;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:baseline;
font-size:10px;color:var(--muted)
}
.saena-photo-embed>header>a{font:400 24px/1.4 XB,serif;color:var(--ink)}
.photo-embed-media{display:grid;gap:5px}
.embed-sequence .photo-embed-media{
grid-auto-flow:column;grid-auto-columns:minmax(260px,42%);overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
direction:rtl;scrollbar-width:thin;
}
.embed-sequence .photo-embed-media a{scroll-snap-align:start;min-height:340px}
.embed-lighttable .photo-embed-media{grid-template-columns:repeat(4,1fr)}
.embed-diptych .photo-embed-media{grid-template-columns:1fr 1fr}
.embed-notebook .photo-embed-media{grid-template-columns:repeat(3,1fr)}
.photo-embed-media a{display:block;overflow:hidden;background:#d3cdc3}
.photo-embed-media img{width:100%;height:100%;min-height:260px;max-height:560px;object-fit:cover}
/* Full-screen image viewer */
body.photo-viewer-open{overflow:hidden}
.photo-viewer{
position:fixed;inset:0;z-index:120;background:rgba(16,17,18,.96);color:#f3eee7;
opacity:0;visibility:hidden;transition:opacity .2s ease;display:flex;flex-direction:column;
}
.photo-viewer.open{opacity:1;visibility:visible}
.photo-viewer-top{height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);font-size:10px}
.photo-viewer-top button{border:0;background:none;color:inherit;font-size:30px;cursor:pointer}
.photo-viewer-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:22px 70px 30px}
.photo-viewer-stage figure{margin:0;max-width:min(1450px,92vw);max-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center}
.photo-viewer-stage img{max-width:100%;max-height:calc(100vh - 155px);object-fit:contain}
.photo-viewer-stage figcaption{min-height:24px;margin-top:8px;font-size:10px;opacity:.78}
.photo-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:none;color:#fff;font-size:50px;opacity:.55;cursor:pointer}
.photo-viewer-nav:hover{opacity:1}.photo-viewer-nav.prev{left:18px}.photo-viewer-nav.next{right:18px}
/* Empty states remain editorial, not dashboard-like. */
.photo-empty{
grid-column:1/-1;min-height:180px;padding:36px;
display:flex;flex-direction:column;justify-content:center;gap:8px;
border:1px solid var(--line);background:color-mix(in srgb,#405864 4%,var(--paper));
}
.photo-empty strong{font:400 29px/1.4 XB,serif}.photo-empty span{font-size:11px;color:var(--muted)}
/* ---------- Studio ---------- */
.photo-studio-body .admin-header{position:sticky;top:0;z-index:50;background:rgba(213,206,193,.94);backdrop-filter:blur(12px)}
.photo-admin-triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.photo-admin-triad>div{background:var(--paper);padding:22px}
.photo-admin-triad strong{display:block;font:400 26px/1.3 XB,serif}
.photo-admin-triad small{font-size:9px;color:var(--muted);letter-spacing:.1em}
.photo-admin-triad p{font-size:12px;line-height:1.8}
.admin-secondary.link{display:inline-block;border-bottom:1px solid var(--line);padding-bottom:3px}
.admin-section-heading{margin:38px 0 15px;padding-top:25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:end}
.admin-section-heading span{font-size:9px;color:var(--muted)}.admin-section-heading h2{margin:4px 0 0;font:400 34px/1.3 XB,serif}
.admin-section-heading>small{max-width:42ch;color:var(--muted)}
.photo-image-editor{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.photo-image-editor article{display:grid!important;grid-template-columns:210px 1fr!important;align-items:start!important}
.admin-image-preview{position:relative}.admin-image-preview img{height:260px!important}.admin-image-preview .drag{position:absolute;left:7px;bottom:7px;padding:5px 7px;background:rgba(20,20,18,.72);color:#fff}
.admin-image-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px}
.admin-image-controls label{font-size:10px}.admin-image-controls label:nth-last-child(-n+3){grid-column:1/-1}
.inline-check{display:flex!important;flex-direction:row!important;align-items:center;gap:7px!important}
.embed-cheatsheet{margin:28px 0 0;padding:18px;border:1px dashed var(--line);display:grid;gap:8px;background:rgba(255,255,255,.18)}
.embed-cheatsheet>span{font-size:10px;color:var(--muted)}.embed-cheatsheet code{direction:ltr;text-align:left;padding:9px;background:var(--paper2);font-size:11px;user-select:all}
.notebook-set-picker{display:flex;flex-direction:column;gap:5px}
.notebook-set-picker article{display:grid;grid-template-columns:100px 1fr 30px;gap:15px;align-items:center;padding:8px;background:var(--paper2);border:1px solid transparent}
.notebook-set-picker article.selected{border-color:#b39a61;background:color-mix(in srgb,#b39a61 10%,var(--paper))}
.notebook-set-picker img{width:100px;height:72px;object-fit:cover}
.notebook-set-picker label{font:400 18px/1.4 XB,serif}.notebook-set-picker small{display:block;font-size:9px;color:var(--muted)}
.notebook-set-picker .drag{cursor:grab;text-align:center}
.photo-admin-list article,.notebook-admin-list article{min-height:175px}
/* Desktop to mobile */
@media(max-width:1050px){
.photo-river{grid-auto-rows:62px}
.photoset-card{grid-template-columns:minmax(220px,.85fr) minmax(280px,1.15fr) 86px}
.photoset-spine span{font-size:23px}
.notebook-library{grid-template-columns:1fr}
.notebook-chapter{grid-template-columns:74px 1fr;grid-template-areas:"spine image" "spine copy"}
.chapter-copy{padding:24px 28px}
.photo-image-editor{grid-template-columns:1fr!important}
}
@media(max-width:760px){
.photo-public-page{border-inline:0}
.photo-hub-hero{min-height:0;grid-template-columns:1fr;gap:24px;padding:40px 18px 30px}
.photo-hub-hero h1{font-size:54px}
.photo-hub-hero>p{font-size:18px}
.photo-system-nav{position:relative;grid-template-columns:1fr}
.photo-system-nav a{min-height:68px;border-left:0;border-bottom:1px solid var(--line);padding:14px 18px}
.photo-system-nav strong{font-size:25px}
.photo-home-section{padding:38px 12px 55px}
.photo-home-section>header{align-items:start}
.photo-home-section>header h2{font-size:38px}
.photo-river{grid-template-columns:repeat(2,1fr);grid-auto-rows:155px;gap:4px}
.river-photo,.river-photo.river-wide,.river-photo.river-landscape,.river-photo.river-square,.river-photo.river-portrait,.river-photo.river-pos-4,.river-photo.river-pos-8{grid-column:span 1;grid-row:span 1;min-height:0}
.river-photo:nth-child(5n+1){grid-column:1/-1;grid-row:span 2}
.river-photo-meta{opacity:1;transform:none;padding:35px 9px 8px}
.river-photo-meta b{font-size:13px}
.photoset-card{display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"cover spine" "copy spine";min-height:0}
.photoset-cover{min-height:270px}
.photoset-copy{padding:22px 18px}
.photoset-copy h2{font-size:34px}
.photoset-spine span{font-size:20px!important}
.notebook-library{padding:20px 12px 55px}
.notebook-object{min-height:360px;margin-right:5px;box-shadow:5px 7px 0 #d0c7b9,10px 14px 0 #e1d9cd}
.notebook-title strong{font-size:38px}
.photoset-hero{grid-template-columns:1fr;min-height:0}
.photoset-hero-copy{padding:38px 18px 28px}
.photoset-hero h1{font-size:55px}
.photoset-hero-image{min-height:380px}
.photoset-story{grid-template-columns:1fr;padding:38px 12px 65px;gap:30px}
.photoset-photo,.photoset-photo.set-layout-full,.photoset-photo.set-layout-wide,.photoset-photo.set-layout-landscape,.photoset-photo.set-layout-portrait,.photoset-photo.set-layout-pair,.photoset-photo.set-layout-square,.photoset-text{grid-column:1!important}
.photoset-text{padding:0 8px}.photoset-text p{font-size:18px}
.notebook-hero{grid-template-columns:1fr;gap:28px;min-height:0;padding:40px 18px}
.notebook-hero h1{font-size:58px}
.notebook-chapters{padding:20px 12px 60px}
.notebook-chapter{grid-template-columns:56px 1fr;min-height:0}
.chapter-spine span{font-size:19px}.chapter-image{min-height:260px}
.chapter-copy{padding:20px 18px}
.saena-photo-embed{width:calc(100vw - 24px)!important;margin:2.4em 50%!important}
.saena-photo-embed>header{grid-template-columns:1fr}.saena-photo-embed>header small{display:none}
.embed-sequence .photo-embed-media{grid-auto-columns:82%}
.embed-lighttable .photo-embed-media{grid-template-columns:1fr 1fr}
.photo-viewer-stage{padding:16px 36px 24px}.photo-viewer-nav{font-size:36px}
.photo-admin-triad{grid-template-columns:1fr}
.photo-image-editor article{grid-template-columns:1fr!important}
.admin-image-preview img{height:240px!important}
.admin-image-controls{grid-template-columns:1fr}
.admin-image-controls label{grid-column:1!important}
}
/* Embed centering and two-column compatibility */
.saena-photo-embed{
position:relative!important;
left:50%!important;
right:auto!important;
margin:3.2em 0!important;
transform:translateX(-50%)!important;
}
body.reading-two-column .saena-photo-embed.reading-media-wide{
width:min(1120px,100%)!important;
max-width:1120px!important;
left:auto!important;
transform:none!important;
margin:clamp(34px,4vw,62px) auto!important;
}
body.reading-two-column .saena-photo-embed.reading-media-wide .photo-embed-media img,
.saena-photo-embed .photo-embed-media img{
width:100%!important;
height:100%!important;
max-width:none!important;
margin:0!important;
object-fit:cover!important;
}
@media(max-width:760px){
.saena-photo-embed{
width:calc(100vw - 24px)!important;
left:50%!important;
transform:translateX(-50%)!important;
}
}
/* ========================================================================
Saēna 3.1 — Ordered Photostream
Opening row: two equal wide rectangles.
Every following row: three equal 3:2 rectangles.
No masonry, no random spans, no variable heights.
======================================================================== */
.photo-river,
.photo-river-full{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
grid-auto-flow:row!important;
grid-auto-rows:auto!important;
gap:8px!important;
}
/* Every stream photograph shares one editorial crop. */
.photo-river .river-photo,
.photo-river-full .river-photo,
.photo-river .river-photo.river-wide,
.photo-river .river-photo.river-landscape,
.photo-river .river-photo.river-square,
.photo-river .river-photo.river-portrait,
.photo-river .river-photo[class*="river-pos-"]{
grid-column:span 2!important;
grid-row:auto!important;
min-height:0!important;
aspect-ratio:3 / 2!important;
}
/* Only the opening row is emphasized: two photographs, 50% each. */
.photo-river .river-photo:nth-child(1),
.photo-river .river-photo:nth-child(2),
.photo-river-full .river-photo:nth-child(1),
.photo-river-full .river-photo:nth-child(2){
grid-column:span 3!important;
aspect-ratio:3 / 2!important;
}
/* The image always fills the same rectangle. */
.photo-river .river-photo>a,
.photo-river-full .river-photo>a{
position:absolute!important;
inset:0!important;
}
.photo-river .river-photo img,
.photo-river-full .river-photo img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
/* Tablet: keep the opening pair, then two equal photographs per row. */
@media(max-width:980px) and (min-width:621px){
.photo-river,
.photo-river-full{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:6px!important;
}
.photo-river .river-photo,
.photo-river-full .river-photo,
.photo-river .river-photo[class*="river-pos-"],
.photo-river-full .river-photo[class*="river-pos-"]{
grid-column:span 1!important;
aspect-ratio:3 / 2!important;
}
}
/* Mobile: one calm, full-width photographic stream. */
@media(max-width:620px){
.photo-river,
.photo-river-full{
grid-template-columns:1fr!important;
gap:5px!important;
}
.photo-river .river-photo,
.photo-river-full .river-photo,
.photo-river .river-photo:nth-child(1),
.photo-river .river-photo:nth-child(2),
.photo-river-full .river-photo:nth-child(1),
.photo-river-full .river-photo:nth-child(2),
.photo-river .river-photo[class*="river-pos-"],
.photo-river-full .river-photo[class*="river-pos-"]{
grid-column:1!important;
grid-row:auto!important;
aspect-ratio:3 / 2!important;
min-height:0!important;
}
}
/* ========================================================================
Saēna 3.2 — cleaner identity cell
Simorgh manuscript plate is the sole emblem; the old compass/registration
symbol is removed from the masthead.
======================================================================== */
.header-index{
justify-content:center!important;
gap:13px!important;
padding-inline:20px!important;
}
.header-index-copy{
flex:0 1 auto!important;
text-align:right!important;
}
.header-index-copy b{
letter-spacing:.17em!important;
}
.simorgh-plate{
width:48px!important;
height:60px!important;
}
.site-header.is-scrolled .simorgh-plate{
width:36px!important;
height:45px!important;
}
/* Defensive: old cached markup should not show the removed symbol. */
.header-register{
display:none!important;
}
@media(max-width:1120px){
.header-index{
gap:9px!important;
padding-inline:12px!important;
}
.simorgh-plate{
width:40px!important;
height:50px!important;
}
}
/* Saēna 3.4 — justified homepage dedication */
.hero-aside blockquote{
text-align:justify!important;
text-align-last:right!important;
}
/* Saēna 3.5 — homepage text hierarchy
The memorial paragraph now lives in the main hero copy and remains justified. */
.hero-home .hero-copy>p{
text-align:justify!important;
text-align-last:right!important;
}
/* ========================================================================
Saēna 3.7 — impressionist atmosphere, applied in the final override layer
The painting is deliberately buried beneath warm paper; it should be felt
before it is noticed.
======================================================================== */
:root{
--imp-sky:#AFCBD9;
--imp-water:#789EAF;
--imp-deep:#557889;
--imp-warm:#B98768;
--imp-sand:#D8C7A8;
--imp-ink:#29363B;
}
/* Actual masthead: the previous version was overridden before reaching this
final stylesheet. This rule intentionally wins. */
.site-header{
background:
linear-gradient(90deg,
rgba(238,233,225,.90) 0%,
rgba(241,237,229,.84) 34%,
rgba(235,233,226,.88) 72%,
rgba(238,233,225,.92) 100%),
url('../images/impression-water.jpg') center 43% / cover no-repeat!important;
backdrop-filter:blur(12px) saturate(.78)!important;
}
.site-header::after{
content:''!important;
position:absolute!important;
z-index:-1!important;
inset:0!important;
background:
linear-gradient(110deg,rgba(175,203,217,.07),transparent 34%,rgba(185,135,104,.045) 62%,rgba(85,120,137,.055))!important;
border-bottom:1px solid var(--line)!important;
opacity:1!important;
pointer-events:none!important;
}
.site-header::before{
background:linear-gradient(90deg,
var(--imp-deep) 0 16%,
var(--imp-sky) 16% 35%,
var(--imp-warm) 35% 49%,
#ECE5D8 49% 63%,
var(--imp-water) 63% 82%,
var(--imp-sand) 82% 100%)!important;
opacity:.82!important;
}
.header-inner{background:transparent!important}
.section-strip{
background:rgba(246,242,234,.88)!important;
backdrop-filter:blur(10px) saturate(.78)!important;
}
/* Landing title field: a barely-visible echo of the same painting. */
.hero-home .hero-copy{
position:relative!important;
isolation:isolate!important;
background:
linear-gradient(90deg,
rgba(238,234,226,.965),
rgba(238,234,226,.925) 52%,
rgba(238,234,226,.88)),
url('../images/impression-water.jpg') 52% 48% / cover no-repeat!important;
}
.hero-home .hero-copy::after{
content:'';
position:absolute;
z-index:-1;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 72% 24%,rgba(110,158,180,.095),transparent 26%),
radial-gradient(circle at 18% 78%,rgba(190,132,91,.055),transparent 23%);
}
/* Impressionist colour is a tint, never a poster effect. */
.brand strong,
.hero-home h1,
.archive-hero h1,
.single-title-field h1,
.single-hero h1,
.photoset-hero h1,
.album-header h1,
.section-heading h2,
.photo-home-section>header h2,
.photo-hub-hero h1,
.notebook-hero h1{
color:color-mix(in srgb,var(--ink) 88%,var(--imp-deep) 12%)!important;
text-shadow:0 1px 0 rgba(255,255,255,.38),0 0 24px rgba(85,120,137,.04)!important;
}
.brand::before{
background:linear-gradient(to bottom,var(--imp-deep),var(--imp-water) 44%,var(--imp-warm))!important;
opacity:.74!important;
}
.eyebrow,.folio,.entry-meta,.header-index-copy small,.menu-toggle-copy small{
color:color-mix(in srgb,var(--muted) 79%,var(--imp-deep) 21%)!important;
}
.hero-actions a,.read-more{
border-color:color-mix(in srgb,var(--imp-deep) 44%,var(--imp-warm) 56%)!important;
}
.score-link::before{
opacity:.86!important;
}
.score-link:hover,.score-link.active{
background:color-mix(in srgb,var(--score-color) 9%,rgba(246,242,234,.88))!important;
}
/* The city passage is now the dedication panel. Because it is much longer,
give it a quieter book-page scale while keeping the panel itself intact. */
.hero-aside blockquote{
font-size:clamp(17px,1.38vw,22px)!important;
line-height:2.05!important;
text-align:justify!important;
text-align-last:right!important;
}
.hero-aside{
background:color-mix(in srgb,var(--olive2) 86%,var(--imp-water) 14%)!important;
}
.hero-aside::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:url('../images/impression-water.jpg') center / cover no-repeat;
opacity:.045;
mix-blend-mode:screen;
}
.hero-aside>*{position:relative;z-index:1}
/* The memorial text under the title keeps the literary body treatment. */
.hero-home .hero-copy>p{
max-width:680px!important;
color:color-mix(in srgb,var(--ink) 91%,var(--imp-deep) 9%)!important;
text-align:justify!important;
text-align-last:right!important;
}
@media(max-width:650px){
.site-header{
background:
linear-gradient(rgba(238,233,225,.89),rgba(238,233,225,.93)),
url('../images/impression-water.jpg') center / cover no-repeat!important;
}
.hero-home .hero-copy{
background:
linear-gradient(rgba(238,234,226,.94),rgba(238,234,226,.91)),
url('../images/impression-water.jpg') 42% center / cover no-repeat!important;
}
.hero-aside blockquote{font-size:17px!important;line-height:2!important}
}
/* ========================================================================
Saēna 3.8 — one site title only
The landing no longer carries a second title. Its memorial note becomes a
calm introductory block beneath the chapter eyebrow.
======================================================================== */
.hero-home .hero-copy{
justify-content:center!important;
gap:28px!important;
}
.hero-home .hero-copy>.eyebrow{
margin:0!important;
}
.hero-home .hero-copy>p{
margin:0!important;
}
.hero-home .hero-actions{
margin-top:5px!important;
}
@media(max-width:650px){
.hero-home .hero-copy{gap:20px!important}
}
/* Saēna 3.9 — quieter latest-section heading */
.latest-block .section-heading h2{
font-size:clamp(24px,2.25vw,34px)!important;
line-height:1.65!important;
max-width:760px!important;
text-wrap:balance!important;
}
@media(max-width:650px){
.latest-block .section-heading h2{
font-size:24px!important;
line-height:1.7!important;
}
}
/* ========================================================================
Saēna 3.10 — Monet in the upper masthead only
The larger lower impressionist field continues to use impression-water.jpg.
======================================================================== */
.site-header{
background:
linear-gradient(90deg,
rgba(238,233,225,.91) 0%,
rgba(241,237,229,.84) 34%,
rgba(235,233,226,.87) 72%,
rgba(238,233,225,.92) 100%),
url('../images/monet-impression-sunrise.jpg') 61% 31% / cover no-repeat!important;
}
/* A slight blue-grey veil keeps Monet present but quiet beneath the masthead. */
.site-header::after{
background:
linear-gradient(105deg,
rgba(175,197,205,.075),
transparent 34%,
rgba(201,140,103,.045) 59%,
rgba(84,112,126,.07))!important;
}
/* On narrow screens keep the orange sun / harbour zone in the crop. */
@media(max-width:650px){
.site-header{
background:
linear-gradient(rgba(238,233,225,.89),rgba(238,233,225,.93)),
url('../images/monet-impression-sunrise.jpg') 61% 31% / cover no-repeat!important;
}
}
/* ========================================================================
Saēna 3.12 — clean two-column field + restrained media
No divider/rule may cross the reading columns.
Any media interruption is centered and never wider than 50% of the prose.
======================================================================== */
/* Columns are separated by air only. */
body.reading-two-column .reading-columns{
column-rule:none!important;
column-rule-width:0!important;
border:0!important;
box-shadow:none!important;
}
/* Section-specific article decorations must not enter the two-column text flow. */
body.reading-two-column .single-tone-essay .prose,
body.reading-two-column .single-tone-translations .prose,
body.reading-two-column .single-page .prose{
border-right:0!important;
border-left:0!important;
box-shadow:none!important;
}
/* Keep the original two-column reading width; remove only decorative inset. */
body.reading-two-column .single-tone-essay .prose,
body.reading-two-column .single-tone-translations .prose{
padding-right:0!important;
padding-left:0!important;
}
/* Media interruptions: maximum half of the complete text field.
At the 1120px reading measure this means a hard ceiling of 560px. */
body.reading-two-column .prose > .reading-media-wide,
body.reading-two-column .prose > figure.reading-media-wide,
body.reading-two-column .prose > .saena-photo-embed.reading-media-wide{
width:50%!important;
max-width:560px!important;
min-width:0!important;
margin:clamp(30px,3.5vw,52px) auto!important;
left:auto!important;
right:auto!important;
transform:none!important;
text-align:center!important;
}
/* Nothing inside the media container may escape that 50% envelope. */
body.reading-two-column .reading-media-wide figure,
body.reading-two-column figure.reading-media-wide,
body.reading-two-column .reading-media-wide .wp-caption,
body.reading-two-column .reading-media-wide .wp-block-image,
body.reading-two-column .reading-media-wide .wp-block-video,
body.reading-two-column .reading-media-wide .wp-block-embed,
body.reading-two-column .reading-media-wide .wp-video,
body.reading-two-column .reading-media-wide .wp-audio,
body.reading-two-column .reading-media-wide .gallery,
body.reading-two-column .reading-media-wide .wp-block-gallery{
width:100%!important;
max-width:100%!important;
margin-inline:auto!important;
}
/* Images keep their natural ratio and are never enlarged beyond the envelope. */
body.reading-two-column .reading-media-wide img{
display:block!important;
width:auto!important;
max-width:100%!important;
height:auto!important;
max-height:72vh!important;
margin-inline:auto!important;
object-fit:contain!important;
}
/* Video / iframe players use the available half-width but never exceed it. */
body.reading-two-column .reading-media-wide video,
body.reading-two-column .reading-media-wide iframe,
body.reading-two-column .reading-media-wide object,
body.reading-two-column .reading-media-wide embed{
display:block!important;
width:100%!important;
max-width:100%!important;
margin-inline:auto!important;
}
/* Audio follows the same visual measure. */
body.reading-two-column .reading-media-wide audio{
display:block!important;
width:100%!important;
max-width:100%!important;
margin-inline:auto!important;
}
/* Embedded Saēna photo sequences obey the same ceiling. */
body.reading-two-column .saena-photo-embed.reading-media-wide{
width:50%!important;
max-width:560px!important;
margin:clamp(30px,3.5vw,52px) auto!important;
}
body.reading-two-column .saena-photo-embed.reading-media-wide .photo-embed-media{
width:100%!important;
max-width:100%!important;
}
/* Captions stay with the centered media rather than spanning the prose. */
body.reading-two-column .reading-media-wide figcaption,
body.reading-two-column .reading-media-wide .wp-caption-text{
width:100%!important;
max-width:100%!important;
margin:.7em auto 0!important;
text-align:center!important;
}
/* On narrower two-column-capable screens the same 50% rule is preserved. */
@media(max-width:1050px) and (min-width:920px){
body.reading-two-column .prose > .reading-media-wide,
body.reading-two-column .prose > figure.reading-media-wide,
body.reading-two-column .prose > .saena-photo-embed.reading-media-wide{
width:50%!important;
max-width:50%!important;
}
}
/* ========================================================================
Saēna 3.13 — remove the last two-column vertical frame
The Inside theme draws a decorative rectangle on .single-layout::before.
In two-column reading that frame crosses the text field, so it must vanish.
======================================================================== */
body.reading-two-column .single-tone-inside .single-layout::before,
body.reading-two-column .single-tone-inside .single-layout::after,
body.reading-two-column .single-page .single-layout::before,
body.reading-two-column .single-page .single-layout::after{
content:none!important;
display:none!important;
border:0!important;
background:none!important;
box-shadow:none!important;
}
/* Defensive cleanup: no generated decoration may sit over the two-column text. */
body.reading-two-column .reading-columns::before,
body.reading-two-column .reading-columns::after,
body.reading-two-column .prose::before,
body.reading-two-column .prose::after{
content:none!important;
display:none!important;
}
\n\n/* Saēna 3.14 — fixed WordPress category mappings */\n.admin-fixed-mapping{margin-top:8px;padding:10px 12px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper2) 82%,transparent);display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-fixed-mapping span{font-size:9px;color:var(--muted)}.admin-fixed-mapping code{direction:ltr;font-size:11px;user-select:all}\n
/* ========================================================================
Saēna 4.2 — Songs as a Persian streaming room
======================================================================== */
.section-context-songs{
--songs-night:#242936;
--songs-indigo:#505B70;
--songs-indigo-2:#65728A;
--songs-clay:#C98B70;
--songs-paper:#EEEAE2;
--songs-line:rgba(242,237,229,.16);
}
.section-context-songs .section-hero-songs{
border-bottom:0!important;
}
.section-context-songs .section-hero-songs::after{
content:'';
position:absolute;
inset:auto 0 0;
height:1px;
background:linear-gradient(90deg,transparent,var(--songs-clay),transparent);
opacity:.55;
}
.songs-platform{
max-width:var(--max);
margin:0 auto;
border-inline:1px solid var(--line);
background:var(--paper);
}
.songs-platform-head{
min-height:150px;
padding:28px clamp(22px,4vw,58px);
display:flex;
align-items:end;
justify-content:space-between;
gap:30px;
border-bottom:1px solid var(--line);
background:
linear-gradient(110deg,color-mix(in srgb,var(--songs-indigo) 8%,var(--paper)),transparent 60%),
var(--paper);
}
.songs-platform-head>div:first-child>span,
.songs-queue-head span{
display:block;
font:400 10px/1.5 Sahel,Tahoma,sans-serif;
color:var(--muted);
}
.songs-platform-head h2{
margin:7px 0 0;
font:400 clamp(36px,4.4vw,66px)/1.18 XB,serif;
}
.songs-platform-count{
min-width:165px;
text-align:left;
}
.songs-platform-count strong{
display:block;
font:400 48px/.9 XB,serif;
color:var(--songs-indigo);
}
.songs-platform-count span{
font-size:10px;
color:var(--muted);
}
.songs-stage{
display:grid;
grid-template-columns:minmax(0,1.48fr) minmax(280px,.52fr);
background:var(--songs-night);
color:#F3EEE7;
min-height:520px;
}
.songs-player-shell{
position:relative;
align-self:center;
width:100%;
aspect-ratio:16 / 9;
background:#11141a;
overflow:hidden;
border-left:1px solid var(--songs-line);
}
.songs-player-shell::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
z-index:2;
}
.songs-player-shell iframe{
display:block;
width:100%;
height:100%;
border:0;
}
.songs-now{
position:relative;
padding:48px clamp(26px,3vw,45px) 38px;
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
}
.songs-now::before{
content:'آواز';
position:absolute;
left:-.08em;
top:.08em;
font:400 clamp(100px,12vw,190px)/.85 XB,serif;
color:rgba(255,255,255,.025);
pointer-events:none;
}
.songs-now-kicker{
font-size:9px;
color:color-mix(in srgb,#fff 52%,var(--songs-clay));
}
.songs-now>b{
margin-top:22px;
font:400 13px/1 Sahel,sans-serif;
color:var(--songs-clay);
}
.songs-now h3{
margin:14px 0 26px;
font:400 clamp(31px,3vw,46px)/1.38 XB,serif;
color:#F5F0E9;
}
.songs-now-actions{
display:flex;
flex-wrap:wrap;
gap:16px;
}
.songs-now-actions a{
font-size:10px;
padding-bottom:3px;
border-bottom:1px solid rgba(255,255,255,.32);
}
.songs-now-actions a:first-child{
color:#F1D7CA;
border-bottom-color:var(--songs-clay);
}
.songs-meter{
margin-top:42px;
height:38px;
display:flex;
align-items:end;
gap:5px;
opacity:.55;
}
.songs-meter i{
width:4px;
background:var(--songs-clay);
animation:songsMeter 1.9s ease-in-out infinite alternate;
}
.songs-meter i:nth-child(1){height:18%}
.songs-meter i:nth-child(2){height:55%;animation-delay:.16s}
.songs-meter i:nth-child(3){height:88%;animation-delay:.31s}
.songs-meter i:nth-child(4){height:38%;animation-delay:.48s}
.songs-meter i:nth-child(5){height:72%;animation-delay:.24s}
.songs-meter i:nth-child(6){height:29%;animation-delay:.58s}
.songs-meter i:nth-child(7){height:62%;animation-delay:.4s}
.songs-meter i:nth-child(8){height:42%;animation-delay:.68s}
@keyframes songsMeter{to{transform:scaleY(.42);opacity:.58}}
@media(prefers-reduced-motion:reduce){.songs-meter i{animation:none}}
.songs-queue{
padding:50px clamp(18px,3.4vw,52px) 58px;
}
.songs-queue-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:24px;
padding-bottom:17px;
border-bottom:1px solid var(--line);
}
.songs-queue-head h3{
margin:5px 0 0;
font:400 clamp(32px,3vw,47px)/1.25 XB,serif;
}
.songs-queue-head>span{
text-align:left;
white-space:nowrap;
}
.songs-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:var(--line);
border-bottom:1px solid var(--line);
}
.song-card{
min-width:0;
background:var(--paper);
transition:background .2s ease,box-shadow .2s ease;
}
.song-card.active{
background:color-mix(in srgb,var(--songs-indigo) 8%,var(--paper));
box-shadow:inset 0 -3px 0 var(--songs-clay);
}
.song-thumb{
position:relative;
display:block;
width:100%;
aspect-ratio:16 / 9;
padding:0;
border:0;
overflow:hidden;
background:#252b37;
color:#fff;
}
.song-thumb img{
width:100%;
height:100%;
object-fit:cover;
filter:saturate(.72) contrast(1.04);
transition:transform .42s ease,filter .3s ease;
}
.song-card:hover .song-thumb img,
.song-card.active .song-thumb img{
transform:scale(1.018);
filter:saturate(.95) contrast(1.03);
}
.song-thumb::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 52%,rgba(15,18,24,.64));
pointer-events:none;
}
.song-play-mark{
position:absolute;
z-index:2;
left:50%;
top:50%;
width:52px;
height:52px;
transform:translate(-50%,-50%);
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.7);
border-radius:50%;
background:rgba(24,29,38,.42);
backdrop-filter:blur(5px);
font-size:16px;
padding-left:2px;
transition:.22s ease;
}
.song-card:hover .song-play-mark,
.song-card.active .song-play-mark{
background:var(--songs-clay);
border-color:var(--songs-clay);
transform:translate(-50%,-50%) scale(1.06);
}
.song-index{
position:absolute;
z-index:2;
right:11px;
bottom:9px;
font:400 11px/1 Sahel,sans-serif;
}
.song-playlist-art{
display:grid;
width:100%;
height:100%;
place-items:center;
font:400 86px/1 Georgia,serif;
color:rgba(255,255,255,.55);
background:
radial-gradient(circle at 70% 30%,rgba(201,139,112,.34),transparent 28%),
linear-gradient(135deg,#505B70,#252A37);
}
.song-card-copy{
min-height:145px;
padding:20px 19px 18px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:18px;
}
.song-card-copy h4{
margin:0;
font:400 clamp(22px,2vw,29px)/1.5 XB,serif;
}
.song-card-copy h4 button,
.song-card-copy>div button{
border:0;
padding:0;
background:none;
color:inherit;
text-align:right;
cursor:pointer;
}
.song-card-copy>div{
display:flex;
justify-content:space-between;
gap:16px;
color:var(--muted);
font-size:10px;
}
.song-card-copy>div button,
.song-card-copy>div a{
padding-bottom:2px;
border-bottom:1px solid var(--line);
}
.song-card.active .song-card-copy>div button{
color:var(--songs-indigo);
border-bottom-color:var(--songs-clay);
}
.songs-pager{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:24px;
padding:23px clamp(18px,3.4vw,52px) 30px;
border-top:1px solid var(--line);
font-size:11px;
}
.songs-pager>div:last-child{text-align:left}
.songs-pager>span{
color:var(--muted);
font-size:10px;
}
.songs-pager a{
display:inline-block;
padding-bottom:3px;
border-bottom:1px solid var(--songs-indigo);
}
.songs-empty{
padding:70px clamp(22px,4vw,58px);
border-top:1px solid var(--line);
}
.songs-empty strong{
display:block;
font:400 34px/1.4 XB,serif;
}
.songs-empty p{
max-width:650px;
color:var(--muted);
}
/* The generic WordPress prose treatment must never leak into the streaming room. */
.tone-songs .songs-platform iframe{max-width:none!important}
.tone-songs .songs-platform button{font-family:Sahel,Tahoma,sans-serif}
.tone-songs .songs-platform h2,
.tone-songs .songs-platform h3,
.tone-songs .songs-platform h4{font-family:XB,serif}
@media(max-width:1050px){
.songs-stage{grid-template-columns:1fr}
.songs-player-shell{border-left:0;border-bottom:1px solid var(--songs-line)}
.songs-now{min-height:300px}
.songs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
.songs-platform{border-inline:0}
.songs-platform-head{
min-height:0;
padding:27px 17px 22px;
align-items:start;
}
.songs-platform-head h2{font-size:37px}
.songs-platform-count{min-width:auto}
.songs-platform-count strong{font-size:36px}
.songs-platform-count span{display:none}
.songs-now{min-height:260px;padding:30px 18px 26px}
.songs-now h3{font-size:32px}
.songs-meter{margin-top:28px}
.songs-queue{padding:34px 10px 42px}
.songs-queue-head{padding-inline:7px}
.songs-grid{grid-template-columns:1fr;gap:1px}
.song-card-copy{min-height:125px;padding:17px 15px}
.song-card-copy h4{font-size:25px}
.songs-pager{
grid-template-columns:1fr 1fr;
padding-inline:16px;
}
.songs-pager>span{
grid-column:1/-1;
grid-row:1;
text-align:center;
}
.songs-pager>div{grid-row:2}
}
/* ========================================================================
Saēna 4.3 — Songs are for listening: no rendered video titles
======================================================================== */
.songs-platform-head{
min-height:auto!important;
padding:15px clamp(22px,4vw,58px)!important;
align-items:center!important;
}
.songs-platform-label{
font:400 10px/1.5 Sahel,Tahoma,sans-serif;
color:var(--muted);
}
.songs-platform-count{
display:flex!important;
align-items:baseline!important;
gap:9px!important;
min-width:0!important;
}
.songs-platform-count strong{
font-size:31px!important;
}
.songs-platform-count span{
font-size:9px!important;
}
/* One centered player. No title/sidebar competes with it. */
.songs-stage{
display:block!important;
min-height:0!important;
padding:clamp(24px,3.5vw,54px)!important;
background:var(--songs-night)!important;
}
.songs-player-wrap{
width:min(100%,1080px);
margin:0 auto;
}
.songs-player-shell{
width:100%!important;
max-width:1080px!important;
margin:0 auto!important;
border:1px solid rgba(255,255,255,.08)!important;
}
.songs-player-utility{
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:12px 2px 0;
color:rgba(243,238,231,.64);
font:400 10px/1.5 Sahel,Tahoma,sans-serif;
}
.songs-player-utility b{
color:var(--songs-clay);
font-weight:400;
}
.songs-player-utility>div{
display:flex;
gap:18px;
}
.songs-player-utility a{
padding-bottom:2px;
border-bottom:1px solid rgba(255,255,255,.2);
}
.songs-player-utility a:first-child{
color:#F1D7CA;
border-bottom-color:var(--songs-clay);
}
/* Cards are visual listening controls: thumbnail + actions only. */
.song-card{
background:var(--paper)!important;
}
.song-card-actions{
min-height:50px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:11px 13px 12px;
color:var(--muted);
font:400 10px/1.4 Sahel,Tahoma,sans-serif;
}
.song-card-actions button{
border:0;
padding:0 0 2px;
background:none;
color:inherit;
border-bottom:1px solid var(--line);
cursor:pointer;
}
.song-card-actions a{
padding-bottom:2px;
border-bottom:1px solid var(--line);
}
.song-card.active .song-card-actions button{
color:var(--songs-indigo);
border-bottom-color:var(--songs-clay);
}
/* Old title-bearing structures are deliberately suppressed if stale markup is cached. */
.songs-now,
.song-card-copy,
[data-songs-title]{
display:none!important;
}
@media(max-width:650px){
.songs-platform-head{
padding:12px 16px!important;
}
.songs-platform-count strong{font-size:26px!important}
.songs-stage{
padding:14px 10px 17px!important;
}
.songs-player-utility{
padding-inline:2px;
gap:12px;
}
.song-card-actions{
min-height:48px;
}
}
/* ========================================================================
Saēna 4.4 — YouTube availability gate
======================================================================== */
.songs-player-shell{
position:relative;
}
.songs-player-shell iframe:not([src]){
visibility:hidden;
}
.songs-player-check{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:14px;
background:
radial-gradient(circle at 62% 42%,rgba(105,78,121,.22),transparent 28%),
#181A20;
color:rgba(245,240,233,.72);
z-index:3;
font:400 10px/1.7 Sahel,Tahoma,sans-serif;
}
.songs-player-check[hidden]{display:none!important}
.songs-player-check span{
width:26px;
height:26px;
border:1px solid rgba(255,255,255,.22);
border-top-color:var(--songs-clay);
border-radius:50%;
animation:songsAvailabilitySpin .8s linear infinite;
}
@keyframes songsAvailabilitySpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.songs-player-check span{animation:none}}
.song-card.is-pending,
.song-card.is-unavailable,
.song-card[hidden]{
display:none!important;
}
.songs-availability-note{
padding:11px 2px 13px;
color:var(--muted);
font:400 9px/1.7 Sahel,Tahoma,sans-serif;
}
.songs-availability-note[hidden]{display:none!important}
/* ========================================================================
Saēna 4.5 — continuous Songs playback + optional list repeat
======================================================================== */
.songs-player-controls{
display:flex!important;
align-items:center;
flex-wrap:wrap;
justify-content:flex-end;
gap:15px!important;
}
.songs-continuous{
position:relative;
padding-right:12px;
color:rgba(243,238,231,.56);
white-space:nowrap;
}
.songs-continuous::before{
content:'';
position:absolute;
right:0;
top:50%;
width:5px;
height:5px;
margin-top:-2.5px;
border-radius:50%;
background:var(--songs-clay);
box-shadow:0 0 0 3px rgba(201,139,112,.11);
}
.songs-repeat{
display:inline-flex;
align-items:center;
gap:6px;
border:0;
border-bottom:1px solid rgba(255,255,255,.2);
padding:0 0 2px;
background:none;
color:rgba(243,238,231,.64);
font:400 10px/1.5 Sahel,Tahoma,sans-serif;
cursor:pointer;
}
.songs-repeat b{
color:rgba(243,238,231,.46);
font-weight:400;
}
.songs-repeat.active{
color:#F1D7CA;
border-bottom-color:var(--songs-clay);
}
.songs-repeat.active b{
color:var(--songs-clay);
}
.songs-player-check span[hidden]{
display:none!important;
}
@media(max-width:650px){
.songs-player-utility{
align-items:flex-start!important;
flex-direction:column;
}
.songs-player-controls{
width:100%;
justify-content:flex-start;
gap:12px!important;
}
}
/* Saēna 4.9 — playlist resolved by YouTube's own player */
.songs-platform[data-native-playlist] .songs-platform-count strong:empty::before{
content:'…';
}
.songs-player-check b{
text-align:center;
max-width:260px;
}
/* ========================================================================
Saēna 5.1 — mobile reading refinement
The desktop grid remains intact; phones become a calmer single-hand edition.
======================================================================== */
.footer-identity small{
display:block;
margin-top:6px;
color:var(--muted);
font:400 9px/1.5 Sahel,Tahoma,sans-serif;
direction:rtl;
}
@media(max-width:760px){
html,body{max-width:100%;overflow-x:hidden}
body{
font-size:15px!important;
-webkit-text-size-adjust:100%;
text-rendering:optimizeLegibility;
}
/* Masthead: compact, readable, thumb-friendly. */
.site-header{backdrop-filter:blur(18px) saturate(.9)}
.header-inner{
height:60px!important;
min-height:60px!important;
padding:3px 10px 0!important;
grid-template-columns:42px minmax(0,1fr) 48px!important;
gap:4px!important;
}
.site-header.is-scrolled .header-inner{height:54px!important;min-height:54px!important}
.brand{padding:0 8px!important}
.brand::before{right:2px!important;top:10px!important;bottom:10px!important}
.brand strong{
font-size:clamp(20px,6.1vw,24px)!important;
line-height:1.05!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.header-index{min-width:0!important}
.simorgh-plate{display:block!important;width:31px!important;height:38px!important;padding:1px!important}
.header-index-copy{display:none!important}
.menu-toggle{padding:0 5px!important}
.menu-toggle-mark{width:25px!important;height:30px!important}
/* Eight chapters remain one horizontal score, not a stack. */
.section-strip{padding:0!important;overscroll-behavior-inline:contain}
.section-strip-inner{
display:flex!important;
min-width:max-content!important;
scroll-snap-type:x proximity;
border-inline:0!important;
}
.score-link{
flex:0 0 108px!important;
width:108px!important;
height:47px!important;
padding:6px 7px!important;
grid-template-columns:20px minmax(0,1fr)!important;
scroll-snap-align:start;
}
.score-title{font-size:10px!important;line-height:1.35!important}
.score-no{font-size:11px!important}
.score-link.active{background:color-mix(in srgb,var(--score-color) 11%,var(--paper2))!important}
/* Drawer occupies the phone as an intentional reading index. */
.drawer{width:100vw!important;padding:18px 16px 28px!important}
.drawer-top-note{display:none!important}
.drawer-heading{margin-top:26px!important}
.drawer-grid{grid-template-columns:1fr!important;gap:1px!important}
.drawer .drawer-grid .menu-room{
min-height:118px!important;
padding:15px 14px!important;
}
.menu-room-title{font-size:27px!important;max-width:80%!important}
.menu-room>b{font-size:82px!important}
/* Home: less poster, more intimate first page. */
.hero-home{border-inline:0!important}
.hero-copy{padding:30px 17px 28px!important;gap:23px!important}
.hero-home .hero-copy>p{
font-size:17px!important;
line-height:2.02!important;
max-width:none!important;
text-align:justify!important;
text-align-last:right!important;
}
.eyebrow{font-size:9px!important;line-height:1.65!important}
.hero-actions{gap:18px!important;flex-wrap:wrap}
.hero-actions a{font-size:10px!important}
.hero-aside{padding:27px 18px 30px!important;min-height:0!important}
.hero-aside blockquote{
font-size:18px!important;
line-height:2.12!important;
text-align:justify!important;
text-align-last:right!important;
}
.section-heading{
grid-template-columns:1fr auto!important;
padding:34px 16px 16px!important;
gap:16px!important;
}
.latest-block .section-heading h2{
font-size:22px!important;
line-height:1.75!important;
max-width:none!important;
}
.section-heading>a{font-size:9px!important;white-space:nowrap}
/* Cards: no desktop residue, predictable images and spacing. */
.entry-grid{border-inline:0!important}
.entry-card,.entry-card:nth-child(4n+1),.archive-grid .entry-card{
grid-column:auto!important;
border-left:0!important;
min-height:0!important;
}
.entry-link,.entry-card:nth-child(4n+1) .entry-link{display:block!important}
.entry-card figure,.entry-card:nth-child(4n+1) figure{height:210px!important}
.entry-folio{padding:10px 15px!important;font-size:9px!important}
.entry-copy{padding:18px 16px 23px!important}
.entry-copy h2{font-size:27px!important;line-height:1.5!important;margin:10px 0 7px!important}
.entry-copy p{font-size:13px!important;line-height:1.9!important}
/* Rooms: narrower spine and stronger information hierarchy. */
.room{
grid-template-columns:62px minmax(0,1fr)!important;
grid-template-areas:'art aside' 'art body' 'go go'!important;
}
.room-art{min-height:205px!important}
.room-art .room-word{font-size:34px!important}
.room>aside{padding:20px 15px 9px!important}
.room>aside h2{font-size:26px!important;line-height:1.45!important}
.room-body{padding:8px 15px 23px!important}
.rooms .room-feature.text-only>strong{font-size:28px!important;line-height:1.35!important}
.rooms .room-feature.text-only>span:not(.title-line){font-size:12px!important;line-height:1.9!important}
.room-go{min-height:38px!important;padding:9px 15px!important;font-size:9px!important}
/* Archive/search/category pages. */
.archive-page{border-inline:0!important}
.archive-hero{
padding:36px 17px 28px!important;
gap:22px!important;
}
.archive-hero h1{font-size:43px!important;line-height:1.15!important;margin-top:17px!important}
.archive-hero>p{font-size:16px!important;line-height:1.95!important}
.archive-search{margin-top:0!important}
.archive-search input{font-size:16px!important}
.archive-search button{padding:9px 13px!important;font-size:10px!important}
.archive-index .category-ribbon{
grid-template-columns:1fr 1fr!important;
}
.archive-index .category-ribbon a{
padding:11px 12px!important;
font-size:9px!important;
}
.pager{padding:22px 16px!important;font-size:10px!important}
/* Single reading pages: prioritize prose over controls and ornament. */
.single-page .single-hero.single-hero-weave{padding:24px 16px 18px!important}
.single-page .single-hero-weave .single-colophon{
flex-direction:column!important;
align-items:stretch!important;
gap:5px!important;
}
.single-page .single-hero-weave .colophon-group{
flex-wrap:wrap!important;
row-gap:3px!important;
}
.single-page .single-title-field h1{
font-size:34px!important;
line-height:1.25!important;
}
.single-page .single-spine{
height:32px!important;
min-height:32px!important;
padding:4px 8px!important;
}
.single-page .single-spine .title-spine-phrase{
transform:none!important;
writing-mode:horizontal-tb!important;
max-width:72%!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
font-size:15px!important;
}
.single-page .single-deck-field .single-deck{
font-size:15px!important;
line-height:2!important;
}
.single-layout{padding:13px 16px 66px!important}
.single-tools{
display:flex!important;
flex-direction:column!important;
gap:8px!important;
padding:0 0 14px!important;
}
.reading-controls{
display:grid!important;
width:100%!important;
max-width:none!important;
grid-template-columns:1.4fr 1fr 1fr!important;
gap:1px!important;
border:1px solid var(--quiet-line);
}
.reading-controls button{
min-height:40px!important;
border-bottom:0!important;
border-left:1px solid var(--quiet-line)!important;
}
.reading-controls button:last-child{border-left:0!important}
.single-tools>[data-copy],.single-tools>a{
min-height:35px!important;
padding:6px 0!important;
}
.toc{margin-top:3px!important}
.prose{
font-size:16.5px!important;
line-height:2.08!important;
text-align:justify!important;
text-align-last:right!important;
overflow-wrap:anywhere;
}
.prose h2{font-size:29px!important;margin:1.9em 0 .55em!important}
.prose h3{font-size:24px!important}
.prose blockquote{font-size:18px!important;line-height:2!important}
.prose img,.prose video,.prose iframe{
max-width:100%!important;
height:auto;
}
.single-end{padding:20px 16px!important;gap:14px!important;font-size:9px!important}
/* Songs: player edge-to-edge inside a controlled paper margin. */
.songs-platform-head{padding:10px 14px!important}
.songs-platform-label{font-size:9px!important}
.songs-platform-count strong{font-size:25px!important}
.songs-stage{padding:10px 8px 14px!important}
.songs-player-shell{border-inline:0!important}
.songs-player-utility{font-size:9px!important;padding:10px 3px 0!important}
.songs-player-controls{gap:10px!important}
.songs-queue{padding:28px 8px 36px!important}
.songs-queue-head h3{font-size:31px!important}
.song-card-actions{padding:10px 11px!important}
.songs-pager{padding:18px 10px 24px!important}
/* Photography: navigation becomes a horizontal editorial rail. */
.photo-system-nav{
display:flex!important;
grid-template-columns:none!important;
overflow-x:auto!important;
scroll-snap-type:x proximity;
scrollbar-width:none;
}
.photo-system-nav::-webkit-scrollbar{display:none}
.photo-system-nav a{
flex:0 0 165px!important;
min-height:60px!important;
padding:10px 12px!important;
border-left:1px solid var(--line)!important;
border-bottom:1px solid var(--line)!important;
scroll-snap-align:start;
}
.photo-system-nav strong{font-size:21px!important}
.photoset-hero-copy{padding:30px 16px 23px!important}
.photoset-hero h1{font-size:43px!important}
.photoset-hero-image{min-height:290px!important}
.notebook-hero{padding:31px 16px!important}
.notebook-hero h1{font-size:45px!important}
.photo-river{grid-auto-rows:130px!important}
.photoset-cover{min-height:225px!important}
/* Footer: compact but complete identity. */
.site-footer{
margin-top:20px!important;
padding:28px 16px!important;
min-height:0!important;
gap:20px!important;
}
.site-footer strong{font-size:23px!important}
.site-footer nav{margin-top:16px!important;gap:14px!important}
}
@media(max-width:390px){
.brand strong{font-size:19px!important}
.score-link{flex-basis:101px!important;width:101px!important}
.archive-index .category-ribbon{grid-template-columns:1fr!important}
.single-page .single-title-field h1{font-size:31px!important}
.hero-home .hero-copy>p{font-size:16px!important}
}
/* ========================================================================
Saēna 5.2 — clean mobile masthead
The eight-chapter horizontal score is desktop/tablet navigation only.
Phones use the dedicated «فهرست» drawer instead.
======================================================================== */
@media(max-width:760px){
.site-header .section-strip{
display:none!important;
}
.site-header{
border-bottom:1px solid var(--line)!important;
}
.header-inner{
border-bottom:0!important;
}
/* With the chapter rail removed, the header should occupy only its own height. */
body{
--mobile-header-height:60px;
}
.site-header.is-scrolled .header-inner{
min-height:54px!important;
height:54px!important;
}
}
/* ========================================================================
Saēna 5.3 — calmer mobile typography for the eight-season showcase
Horizontal showcase titles use the content face (Sahel), 25% smaller.
The vertical poetic spine deliberately keeps its contrasting display face.
======================================================================== */
@media(max-width:760px){
.rooms .room-info .room-informative{
font-family:Sahel,Tahoma,sans-serif!important;
font-size:22.5px!important;
font-weight:400!important;
line-height:1.62!important;
letter-spacing:0!important;
text-wrap:balance!important;
}
.rooms .room-feature.text-only>strong,
.rooms .room-feature-copy>strong{
font-family:Sahel,Tahoma,sans-serif!important;
font-size:21px!important;
font-weight:400!important;
line-height:1.72!important;
letter-spacing:0!important;
text-wrap:balance!important;
}
/* Any title-line spans created by the title formatter must inherit Sahel;
older display-font rules elsewhere in the cascade should not leak back in. */
.rooms .room-info .room-informative .title-line,
.rooms .room-feature.text-only>strong .title-line,
.rooms .room-feature-copy>strong .title-line,
.rooms .room-info .room-informative .title-primary,
.rooms .room-info .room-informative .title-secondary,
.rooms .room-feature.text-only>strong .title-primary,
.rooms .room-feature.text-only>strong .title-secondary,
.rooms .room-feature-copy>strong .title-primary,
.rooms .room-feature-copy>strong .title-secondary{
font-family:Sahel,Tahoma,sans-serif!important;
font-size:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
}
@media(max-width:390px){
.rooms .room-info .room-informative{
font-size:21px!important;
}
.rooms .room-feature.text-only>strong,
.rooms .room-feature-copy>strong{
font-size:19.5px!important;
}
}
/* ========================================================================
Saēna 5.4 — Gallery rich text + explicit Photoset → Notebook relation
======================================================================== */
.gallery-rich-text{font-family:Sahel,Tahoma,sans-serif;line-height:2.05}.gallery-rich-text p{margin:.1em 0 1.05em}.gallery-rich-text p:last-child{margin-bottom:0}.gallery-rich-text ul,.gallery-rich-text ol{margin:1em 0;padding-inline-start:1.8em}.gallery-rich-text li{margin:.28em 0}.gallery-rich-text blockquote{margin:1.35em 0;padding:.55em 1.25em;border-inline-start:3px solid currentColor;opacity:.92}.gallery-rich-text h2,.gallery-rich-text h3,.gallery-rich-text h4{margin:1.4em 0 .5em}.gallery-rich-text a{border-bottom:1px solid currentColor}.photoset-blurb{font-size:17px}.notebook-blurb{font-size:20px;font-weight:500}.notebook-intro-text{margin-top:14px}.photoset-text.gallery-rich-text{font-size:18px;line-height:2.08}.photoset-text.gallery-rich-text>p:first-child{margin-top:0}
.editor-field{display:flex;flex-direction:column;gap:7px}.editor-field-label{display:flex;justify-content:space-between;align-items:end;gap:20px}.editor-field-label>span{font-size:13px}.editor-field-label small{max-width:62ch;text-align:left}.rich-editor{border:1px solid var(--line);background:rgba(255,255,255,.28)}.rich-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:7px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper2) 76%,transparent);position:sticky;top:68px;z-index:12}.rich-tool-group{display:flex;align-items:center;border:1px solid color-mix(in srgb,var(--line) 75%,transparent)}.rich-tool-group button{min-width:34px;height:31px;padding:3px 8px;border:0;border-left:1px solid color-mix(in srgb,var(--line) 62%,transparent);background:transparent;color:var(--ink);font:400 10px/1 Sahel,Tahoma,sans-serif}.rich-tool-group button:last-child{border-left:0}.rich-tool-group button:hover,.rich-tool-group button.active{background:var(--night);color:#fff}.rich-source-group{margin-right:auto}.rich-visual,.rich-source{width:100%;min-height:180px;padding:17px 18px;border:0!important;outline:0;background:rgba(255,255,255,.14)!important;color:var(--ink);font:400 15px/2 Sahel,Tahoma,sans-serif;resize:vertical}.rich-visual{overflow:auto}.rich-visual:focus{box-shadow:inset 0 0 0 1px var(--night)}.rich-visual p{margin:.1em 0 1em}.rich-visual ul,.rich-visual ol{padding-inline-start:1.9em}.rich-visual blockquote{margin:1em 0;padding:.45em 1em;border-inline-start:3px solid var(--plum);background:color-mix(in srgb,var(--plum) 6%,transparent)}.rich-source{display:none;min-height:220px;direction:ltr;text-align:left;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;line-height:1.65}.rich-editor.source-mode .rich-visual{display:none}.rich-editor.source-mode .rich-source{display:block}.editor-form select[name="parent_notebook_id"]+small{line-height:1.65}.parent-notebook-note{display:inline-block;margin-inline-start:8px;color:var(--plum);font-style:normal}
@media(max-width:760px){.rich-toolbar{top:60px;gap:4px}.rich-tool-group{flex-wrap:wrap}.rich-tool-group button{min-width:31px;padding:3px 6px}.rich-source-group{margin-right:0}.editor-field-label{display:block}.editor-field-label small{display:block;margin-top:3px;text-align:right}.rich-visual,.rich-source{min-height:210px;padding:14px;font-size:15px}.photoset-blurb{font-size:15px}.photoset-text.gallery-rich-text{font-size:17px}}
/* ========================================================================
Saēna 5.5 — Photoset as album + authored photographic narrative
======================================================================== */
.photoset-album-page .photo-system-nav{border-bottom:1px solid var(--line)}
.photoset-titleband{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
gap:clamp(30px,5vw,80px);
align-items:end;
padding:clamp(36px,5vw,72px) clamp(28px,5vw,74px) 34px;
border-bottom:1px solid var(--line);
background:
linear-gradient(115deg,color-mix(in srgb,var(--verdigris) 5%,var(--paper)),transparent 58%),
var(--paper);
}
.photoset-titleband h1{
margin:14px 0 15px;
font:400 clamp(46px,5vw,76px)/1.08 XB,serif;
}
.photoset-titleband .photoset-blurb{
max-width:43ch;
align-self:end;
font-size:16px;
line-height:2.05;
}
.photoset-album{
display:grid;
direction:rtl;
grid-template-columns:132px minmax(0,1fr);
gap:18px;
padding:24px clamp(24px,4vw,58px) 34px;
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--night) 96%,#fff);
}
.photoset-album-thumbs{
grid-column:1;
height:560px;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
display:flex;
flex-direction:column;
gap:8px;
padding-left:4px;
}
.photoset-album-thumb{
position:relative;
flex:0 0 86px;
width:100%;
padding:0;
border:1px solid rgba(255,255,255,.13);
background:#171a1f;
overflow:hidden;
cursor:pointer;
opacity:.66;
transition:opacity .18s ease,border-color .18s ease,transform .18s ease;
}
.photoset-album-thumb img{
display:block;
width:100%;
height:100%;
object-fit:cover;
filter:saturate(.7) contrast(1.04);
}
.photoset-album-thumb span{
position:absolute;
right:6px;
bottom:5px;
min-width:22px;
padding:3px 5px;
background:rgba(16,17,20,.7);
color:#fff;
font:400 9px/1 Sahel,Tahoma,sans-serif;
}
.photoset-album-thumb:hover,
.photoset-album-thumb.active{
opacity:1;
border-color:var(--clay,#b98768);
transform:translateX(-2px);
}
.photoset-album-stage{
grid-column:2;
min-width:0;
display:flex;
flex-direction:column;
}
.photoset-album-preview{
position:relative;
display:block;
width:100%;
height:560px;
overflow:hidden;
background:#11151a;
border:1px solid rgba(255,255,255,.1);
}
.photoset-album-preview img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:opacity .15s ease,transform .4s ease;
}
.photoset-album-preview:hover img{transform:scale(1.008)}
.photoset-preview-open{
position:absolute;
left:16px;
bottom:14px;
padding:7px 10px;
background:rgba(15,18,22,.7);
backdrop-filter:blur(6px);
color:#f2eee7;
border:1px solid rgba(255,255,255,.18);
font:400 9px/1.4 Sahel,Tahoma,sans-serif;
}
.photoset-album-caption{
min-height:48px;
padding:11px 2px 0;
display:flex;
align-items:start;
gap:20px;
color:rgba(241,238,232,.68);
font:400 10px/1.75 Sahel,Tahoma,sans-serif;
}
.photoset-album-caption b{
flex:0 0 auto;
color:var(--clay,#b98768);
font-weight:400;
}
.photoset-album-caption span{max-width:72ch}
.photoset-narrative-head{
max-width:860px;
margin:0 auto;
padding:58px 24px 0;
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:17px;
color:var(--muted);
font:400 9px/1 Sahel,Tahoma,sans-serif;
}
.photoset-narrative-head i{height:1px;background:var(--line)}
.photoset-article{
max-width:920px;
margin:0 auto;
padding:32px 30px 86px;
font-size:18px;
line-height:2.12;
}
.photoset-article>p,
.photoset-article>ul,
.photoset-article>ol,
.photoset-article>blockquote,
.photoset-article>h2,
.photoset-article>h3,
.photoset-article>h4,
.photoset-article>div:not(.photoset-inline-photo){
max-width:68ch;
margin-inline:auto;
}
.photoset-article>p{text-align:justify;text-align-last:right}
.photoset-inline-photo{
margin:clamp(38px,6vw,72px) auto;
}
.photoset-inline-photo.set-layout-full{width:min(1120px,calc(100vw - 40px));max-width:none;margin-left:50%;transform:translateX(-50%)}
.photoset-inline-photo.set-layout-wide,
.photoset-inline-photo.set-layout-landscape{width:100%}
.photoset-inline-photo.set-layout-portrait{width:min(62%,560px)}
.photoset-inline-photo.set-layout-pair,
.photoset-inline-photo.set-layout-square{width:min(54%,500px)}
.photoset-inline-photo>a{
display:block;
background:#d8d1c6;
overflow:hidden;
}
.photoset-inline-photo img{
display:block;
width:100%;
max-height:78vh;
object-fit:contain;
margin:auto;
}
.photoset-inline-photo figcaption{
display:flex;
justify-content:space-between;
gap:20px;
padding-top:8px;
color:var(--muted);
font:400 9px/1.7 Sahel,Tahoma,sans-serif;
}
/* Dedicated full-image page. */
.photo-full-page{
max-width:var(--max);
margin:auto;
border-inline:1px solid var(--line);
background:var(--paper);
}
.photo-full-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:30px;
padding:30px clamp(22px,4vw,58px) 22px;
border-bottom:1px solid var(--line);
}
.photo-full-head h1{
margin:7px 0 0;
font:400 clamp(32px,4vw,56px)/1.2 XB,serif;
}
.photo-full-head p{
max-width:60ch;
margin:8px 0 0;
color:var(--muted);
font-size:12px;
line-height:1.8;
}
.photo-full-head>a{font-size:10px;white-space:nowrap}
.photo-full-stage{
margin:0;
padding:clamp(18px,3vw,42px);
min-height:70vh;
display:grid;
place-items:center;
background:#11151a;
}
.photo-full-stage img{
display:block;
max-width:100%;
width:auto;
height:auto;
max-height:calc(100vh - 190px);
object-fit:contain;
}
.photo-full-nav{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:20px;
align-items:center;
padding:18px clamp(22px,4vw,58px) 24px;
border-top:1px solid var(--line);
font-size:10px;
}
.photo-full-nav>div:last-child{text-align:left}
.photo-original-link{color:var(--muted)}
/* Studio: image insertion palette and semantic placeholders. */
.rich-photo-group button{color:var(--plum)!important}
.rich-photo-picker{
padding:10px;
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--plum) 5%,var(--paper));
}
.rich-photo-picker[hidden]{display:none!important}
.rich-photo-picker-head{
display:flex;
justify-content:space-between;
gap:20px;
padding:2px 2px 9px;
font-size:10px;
}
.rich-photo-picker-head small{color:var(--muted)}
.rich-photo-picker-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
gap:6px;
max-height:260px;
overflow:auto;
}
.rich-photo-picker-grid button{
position:relative;
height:76px;
padding:0;
border:1px solid var(--line);
background:#ddd5ca;
overflow:hidden;
cursor:pointer;
}
.rich-photo-picker-grid img{width:100%;height:100%;object-fit:cover}
.rich-photo-picker-grid span{
position:absolute;
right:4px;bottom:4px;
padding:2px 5px;
background:rgba(16,17,20,.72);
color:#fff;
font-size:8px;
}
.rich-photo-token{
position:relative;
display:grid;
grid-template-columns:120px minmax(0,1fr) 28px;
gap:12px;
align-items:center;
margin:17px 0!important;
padding:9px!important;
border:1px solid color-mix(in srgb,var(--plum) 48%,var(--line));
background:color-mix(in srgb,var(--plum) 6%,#fff);
user-select:none;
}
.rich-photo-token-image{
position:relative;
height:78px;
overflow:hidden;
background:#d7d0c5;
}
.rich-photo-token-image img{width:100%;height:100%;object-fit:cover}
.rich-photo-token-image span{
position:absolute;right:5px;bottom:5px;
padding:2px 5px;background:rgba(0,0,0,.6);color:#fff;font-size:8px;
}
.rich-photo-token figcaption{display:flex;flex-direction:column;gap:4px;font-size:10px;line-height:1.55}
.rich-photo-token figcaption b{font-weight:500;color:var(--plum)}
.rich-photo-token figcaption span{color:var(--muted)}
.rich-photo-token>[data-rich-photo-remove]{
width:26px;height:26px;border:0;background:transparent;color:var(--red);font-size:20px;cursor:pointer;
}
.admin-insert-story-photo{
grid-column:1/-1;
min-height:33px;
border:1px solid color-mix(in srgb,var(--plum) 50%,var(--line));
background:color-mix(in srgb,var(--plum) 5%,transparent);
color:var(--plum);
font:400 9px/1 Sahel,Tahoma,sans-serif;
cursor:pointer;
}
/* The HTML source intentionally displays semantic photo placeholders:
*/
.rich-source{tab-size:2}
@media(max-width:900px){
.photoset-titleband{grid-template-columns:1fr;gap:18px}
.photoset-album{grid-template-columns:106px minmax(0,1fr);gap:12px;padding-inline:14px}
.photoset-album-thumbs,.photoset-album-preview{height:470px}
}
@media(max-width:760px){
.photoset-titleband{
padding:28px 16px 22px!important;
grid-template-columns:1fr!important;
}
.photoset-titleband h1{font-size:40px!important}
.photoset-titleband .photoset-blurb{font-size:15px!important;max-width:none}
.photoset-album{
display:flex;
flex-direction:column;
padding:10px 0 19px;
gap:9px;
}
.photoset-album-stage{order:1;padding:0 10px}
.photoset-album-preview{
height:min(67vw,360px);
min-height:245px;
}
.photoset-album-caption{padding:9px 3px 0}
.photoset-album-thumbs{
order:2;
width:100%;
height:auto;
padding:0 10px 3px;
flex-direction:row;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
scroll-snap-type:x proximity;
}
.photoset-album-thumbs::-webkit-scrollbar{display:none}
.photoset-album-thumb{
flex:0 0 92px;
width:92px;
height:70px;
scroll-snap-align:start;
}
.photoset-album-thumb:hover,.photoset-album-thumb.active{transform:none}
.photoset-narrative-head{padding:38px 16px 0}
.photoset-article{padding:24px 16px 62px;font-size:17px;line-height:2.08}
.photoset-inline-photo.set-layout-full,
.photoset-inline-photo.set-layout-wide,
.photoset-inline-photo.set-layout-landscape,
.photoset-inline-photo.set-layout-portrait,
.photoset-inline-photo.set-layout-pair,
.photoset-inline-photo.set-layout-square{
width:100%!important;
max-width:100%!important;
margin-left:auto!important;
transform:none!important;
}
.photoset-inline-photo img{max-height:72vh}
.photo-full-head{display:block;padding:22px 16px 18px}
.photo-full-head h1{font-size:34px}
.photo-full-head>a{display:inline-block;margin-top:17px}
.photo-full-stage{padding:10px;min-height:62vh}
.photo-full-stage img{max-height:calc(100vh - 150px)}
.photo-full-nav{grid-template-columns:1fr 1fr;padding:15px 12px 21px}
.photo-original-link{grid-column:1/-1;grid-row:1;text-align:center}
.photo-full-nav>div{grid-row:2}
.rich-photo-picker-head{display:block}
.rich-photo-picker-head small{display:block;margin-top:4px}
.rich-photo-picker-grid{grid-template-columns:repeat(3,1fr)}
.rich-photo-token{grid-template-columns:84px minmax(0,1fr) 26px}
.rich-photo-token-image{height:64px}
}
/* ========================================================================
Saēna 5.6 — Photoset preview should fit the photograph, not crop it
======================================================================== */
.photoset-album-preview{
display:grid!important;
place-items:center!important;
background:
linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
#263740!important;
}
.photoset-album-preview img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
transform:none!important;
}
.photoset-album-preview:hover img{
transform:none!important;
}
/* Keep the preview a controlled editorial frame rather than a full image page. */
@media(min-width:901px){
.photoset-album-preview{
height:560px!important;
max-height:68vh!important;
}
}
@media(max-width:900px){
.photoset-album-preview{
height:470px!important;
max-height:62vh!important;
}
}
@media(max-width:760px){
.photoset-album-preview{
height:min(72vw,360px)!important;
min-height:230px!important;
max-height:none!important;
}
}
/* ========================================================================
Saēna 5.7 — absolute natural-ratio preview fit
Whole photograph always visible, centered, transparent canvas.
======================================================================== */
.photoset-album-preview{
position:relative!important;
display:block!important;
overflow:hidden!important;
background:transparent!important;
}
.photoset-album-preview img[data-album-preview]{
position:absolute!important;
top:50%!important;
left:50%!important;
right:auto!important;
bottom:auto!important;
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
max-width:100%!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
inset:auto!important;
top:50%!important;
left:50%!important;
object-fit:initial!important;
object-position:initial!important;
transform:translate(-50%,-50%)!important;
transform-origin:center center!important;
background:transparent!important;
}
.photoset-album-preview:hover img[data-album-preview]{
transform:translate(-50%,-50%)!important;
}
/* Nothing behind the fitted image: the album frame itself stays transparent. */
.photoset-album-stage,
.photoset-album-preview{
background-color:transparent!important;
background-image:none!important;
}
@media(min-width:901px){
.photoset-album-preview{
height:560px!important;
max-height:68vh!important;
}
}
@media(max-width:900px){
.photoset-album-preview{
height:470px!important;
max-height:62vh!important;
}
}
@media(max-width:760px){
.photoset-album-preview{
height:min(72vw,360px)!important;
min-height:230px!important;
max-height:none!important;
}
}
/* ========================================================================
Saēna 5.8 — landing Photoset preview uses the same whole-image rule
======================================================================== */
/* The Photos room on the homepage is an album preview, not a crop. */
.rooms .room[data-room="photos"] .room-feature:not(.text-only){
align-items:center!important;
}
.rooms .room[data-room="photos"] .room-feature:not(.text-only)>img{
display:block!important;
position:static!important;
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
max-width:100%!important;
max-height:260px!important;
margin:auto!important;
padding:0!important;
object-fit:initial!important;
object-position:initial!important;
transform:none!important;
background:transparent!important;
filter:none!important;
justify-self:center!important;
align-self:center!important;
}
.rooms .room[data-room="photos"] .room-feature:not(.text-only):hover>img{
transform:none!important;
}
/* The rich Photoset summary must render as actual HTML, including
. */
.rooms .room[data-room="photos"] .room-feature-summary{
max-width:64ch!important;
font-family:Sahel,Tahoma,sans-serif!important;
font-size:14px!important;
line-height:1.95!important;
color:inherit;
}
.rooms .room[data-room="photos"] .room-feature-summary p{
margin:0 0 .75em!important;
}
.rooms .room[data-room="photos"] .room-feature-summary p:last-child{
margin-bottom:0!important;
}
.rooms .room[data-room="photos"] .room-feature-summary br{
display:block;
content:"";
}
@media(max-width:760px){
.rooms .room[data-room="photos"] .room-feature:not(.text-only)>img{
max-width:100%!important;
max-height:220px!important;
margin:0 auto 18px!important;
}
.rooms .room[data-room="photos"] .room-feature-summary{
font-size:12px!important;
line-height:1.95!important;
}
}
/* ========================================================================
Saēna 5.9 — fixed three-column gallery navigation on phones
No horizontal rail / scrolling: Photostream, Photosets, Notebook always fit.
======================================================================== */
@media(max-width:760px){
.photo-system-nav{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:visible!important;
overflow-x:hidden!important;
overflow-y:visible!important;
scroll-snap-type:none!important;
scrollbar-width:none!important;
border-inline:0!important;
}
.photo-system-nav::-webkit-scrollbar{
display:none!important;
}
.photo-system-nav a{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
flex:none!important;
min-height:64px!important;
padding:8px 4px 7px!important;
margin:0!important;
text-align:center!important;
overflow:hidden!important;
scroll-snap-align:none!important;
border-left:1px solid var(--line)!important;
border-bottom:1px solid var(--line)!important;
}
.photo-system-nav a:first-child{
border-right:0!important;
}
.photo-system-nav strong{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
font-family:Sahel,Tahoma,sans-serif!important;
font-size:clamp(13px,3.45vw,16px)!important;
font-weight:400!important;
line-height:1.42!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
text-align:center!important;
}
.photo-system-nav small{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:3px 0 0!important;
padding:0!important;
font-size:6.5px!important;
line-height:1.15!important;
letter-spacing:.12em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:clip!important;
text-align:center!important;
}
}
@media(max-width:390px){
.photo-system-nav a{
min-height:60px!important;
padding-inline:2px!important;
}
.photo-system-nav strong{
font-size:12.5px!important;
line-height:1.38!important;
}
.photo-system-nav small{
font-size:6px!important;
letter-spacing:.08em!important;
}
}