@charset "UTF-8";
/* Colecciones: bloque destacado de la portada, cabecera de cada colección y diario tipo blog.
   Franja a todo el ancho con el color de la colección (--season; por defecto el verde tinta), alternando con las demás
   bandas de la portada: el sticker de temporada se pega al final del título, la palabra destacada lleva un subrayado
   a mano y las polaroids se abren en abanico, con el segundo sticker en una esquina. Con colores oscuros, el texto
   y el botón pasan a claros. */
:root{--squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c11-6 21-7 31-2s19 6 29 1 20-7 30-2 15 5 24 1' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ——— Stickers de temporada ——— */
.season-sticker{position:absolute;z-index:3;height:auto;max-width:none;pointer-events:none;object-fit:contain;filter:drop-shadow(0 8px 10px #2a2a1f38);transition:rotate .5s cubic-bezier(.3,1.6,.5,1),scale .5s cubic-bezier(.3,1.6,.5,1)}
.season-sticker.is-outlined{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 10px #2a2a1f38)}
/* El principal va dentro del título, justo después de la última palabra; escala con la letra. */
/* Junto al título, a la altura de sus letras: como mucho 1,2 veces la letra de ancho y 1 de alto, sea ancha o alargada. */
.season-sticker-main{position:relative;display:inline-block;vertical-align:middle;width:auto;max-width:1.2em;max-height:1em;margin:-.25em -.15em -.2em .12em;top:-.06em;rotate:9deg}
.season-sticker-second{width:clamp(84px,9vw,132px);right:0;top:2%;rotate:12deg}
@media(hover:hover) and (pointer:fine){:is(.season-feature,.collection-hero):hover .season-sticker-main{rotate:2deg;scale:1.06}:is(.season-feature,.collection-hero):hover .season-sticker-second{rotate:-5deg;scale:1.05}}

/* ——— Franja de color ——— */
:is(.season-feature,.collection-hero){position:relative;isolation:isolate;background:var(--season,var(--ink));color:var(--season-ink,var(--ink))}
.season-backdrop{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.season-backdrop .season-word{position:absolute;left:max(-.02em,calc((100% - var(--wrap)) / 2 - .06em));bottom:-.2em;font:italic 400 clamp(5rem,13vw,12rem)/1 var(--serif);letter-spacing:-.04em;white-space:nowrap;opacity:.09}
:is(.season-feature,.collection-hero) :is(a,button):focus{outline-color:var(--season-ink,var(--ink))}
.season-feature .primary-link{background:var(--season-button,var(--ink));color:var(--season-button-ink,var(--ivory));border-color:var(--season-button,var(--ink))}
.season-feature .primary-link:hover{background:color-mix(in srgb,var(--season-button,var(--ink)) 85%,var(--season,var(--ink)))}
.season-feature .text-link{border-bottom-color:currentColor}
.season-feature .text-link:hover{color:inherit}
:is(.season-copy h2,.collection-tagline) em{position:relative;z-index:0;white-space:nowrap}
:is(.season-copy h2,.collection-tagline) em::after{content:'';position:absolute;z-index:-1;left:-.04em;right:-.08em;bottom:-.06em;height:.26em;background:var(--season-mark,var(--ivory));-webkit-mask:var(--squiggle) center/100% 100% no-repeat;mask:var(--squiggle) center/100% 100% no-repeat}
.season-stage{position:relative;padding:clamp(24px,3vw,44px) clamp(10px,2vw,28px)}

/* ——— Polaroids ——— */
.season-polaroid{position:relative;display:block;background:var(--ivory);padding:10px 10px 0;box-shadow:0 1px 1px #2a2a1f14,0 18px 28px -14px #2a2a1f80,0 4px 10px -2px #2a2a1f24}
.season-photo{display:block}
/* El marco sigue la proporción de cada ilustración (Photo pone width/height, así que no salta al cargar). */
.season-photo img{width:100%;height:auto;background:var(--ivory)}
.season-caption{display:block;padding:9px 4px 13px;font:italic 400 1.02rem/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.season-polaroid:not(:has(.season-caption)){padding-bottom:10px}

/* ——— Portada · colección destacada ——— */
/* Toca directamente la franja siguiente, como el resto de bandas; los colores sugeridos son oscuros para distinguirse del pistacho y de Miel. */
.season-feature{margin-block:clamp(16px,2vw,32px) 0}
.season-feature+:is(.gallery-wall,.craft-section){margin-top:0;border-top:0}
.season-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(56px,7vw,100px) clamp(64px,7vw,108px)}
.season-copy{position:relative;min-width:0}
.season-copy .eyebrow{margin-bottom:18px}
.season-copy h2{font-size:clamp(3rem,5.2vw,5rem);max-width:12ch}
.season-copy .body-paragraph{font-size:1.0625rem;line-height:1.7;max-width:40ch;margin:26px 0 0}
.season-copy .primary-link{margin-top:34px}
.season-works{position:relative;display:flex;flex-direction:column;min-width:0}
.season-pieces{display:flex;justify-content:center;align-items:center}
.season-piece{position:relative;flex:0 1 34%;min-width:0;margin:0 -1.6%;rotate:var(--rot,0deg);translate:0 var(--lift,0px);transition:rotate .35s ease,translate .35s ease,scale .35s ease}
.season-piece:nth-child(1){--rot:-7deg;--lift:18px}
.season-piece:nth-child(2){--rot:2.5deg;--lift:-12px;flex-basis:38%;z-index:1}
.season-piece:nth-child(3){--rot:8deg;--lift:34px}
.season-pieces[data-count="2"] .season-piece{flex-basis:41%}
.season-pieces[data-count="2"] .season-piece:nth-child(2){--rot:6deg;--lift:30px}
.season-pieces[data-count="1"] .season-piece{flex-basis:min(52%,300px);--rot:-3deg;--lift:0px}
.season-pieces[data-count="1"] .season-piece.is-wide{flex-basis:min(86%,460px)}
.season-open{display:block;width:100%;padding:0;text-align:left}
@media(hover:hover) and (pointer:fine){.season-piece:has(.season-open):hover{--rot:0deg;--lift:-8px;z-index:2;scale:1.03}}
.season-note{position:relative;max-width:320px;margin:24px auto;padding:46px 34px 40px;background:var(--ivory);color:var(--ink);font:italic 400 1.45rem/1.35 var(--serif);letter-spacing:-.02em;text-align:center;rotate:-2.5deg;box-shadow:0 18px 28px -14px #2a2a1f80,0 4px 10px -2px #2a2a1f24}
.season-more{align-self:flex-end;margin-top:22px}

/* ——— Página de la colección ——— */
.collection-hero{margin-bottom:clamp(40px,5vw,72px)}
.collection-hero-inner{display:grid;grid-template-columns:minmax(0,1fr);padding-block:clamp(48px,6vw,88px)}
.collection-hero.has-cover .collection-hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.collection-hero-copy{position:relative;min-width:0;max-width:640px}
.collection-hero h1{font-size:clamp(3.4rem,7vw,6.2rem);margin:0}
.collection-hero .collection-tagline{font:400 clamp(1.5rem,2.4vw,2rem)/1.3 var(--serif);letter-spacing:-.02em;margin:14px 0 0}
.collection-hero .body-paragraph{font-size:1.0625rem;line-height:1.7;max-width:46ch;margin:22px 0 0}
.collection-cover{display:flex;align-items:center;justify-content:center;min-width:0}
.collection-cover .season-polaroid{width:min(84%,340px);rotate:3deg}
.collection-cover:not(:has(.season-polaroid)) .season-sticker-second{position:relative;left:auto;bottom:auto;width:min(56%,220px)}
.collection-works .collection-heading{align-items:flex-end;padding-bottom:28px}
.collection-works .collection-heading h2{font-size:clamp(2.2rem,3.4vw,3.2rem);margin:0}

/* ——— Historia de la colección: un documento maquetado como landing ———
   Cada título grande abre una banda; los fondos alternan (web, papel marfil) salvo que Elisa elija otro.
   El texto va en una columna de lectura; las fotos laterales flotan y asoman al margen en pantallas anchas. */
.collection-hero{margin-bottom:0}
.collection-hero+.collection-works,.story+.collection-works,.story-empty+.collection-works{margin-top:clamp(40px,5vw,72px)}
.collection-footnote{padding-bottom:clamp(40px,5vw,72px)}
.story-draft{margin-block:18px 0;padding:10px 16px;border:1px dashed var(--line);font-size:.875rem;color:var(--muted)}
.story-empty{margin-block:clamp(40px,5vw,72px) 0;padding:40px;border:1px dashed var(--line);text-align:center;color:var(--muted)}
.story-band{--story-pad:clamp(64px,8vw,120px);--column:720px;--breakout:min(var(--wrap),calc(100vw - 112px));position:relative;isolation:isolate;padding-block:var(--story-pad)}
.story-band.tone-soft{background:var(--ivory)}
.story-band.tone-season{--muted:color-mix(in srgb,currentColor 78%,transparent);--line:color-mix(in srgb,currentColor 24%,transparent);background:var(--season,var(--ink));color:var(--season-ink,var(--ink))}
:is(.tone-plain+.tone-plain,.tone-soft+.tone-soft,.tone-season+.tone-season,.collection-hero+.tone-season){padding-top:0}
.story-band :is(a,button):focus{outline-color:currentColor}
.season-sticker-block{top:-46px;width:clamp(86px,9vw,132px)}
.season-sticker-block.side-right{right:max(16px,calc((100% - var(--wrap)) / 2 - 24px));rotate:10deg}
.season-sticker-block.side-left{left:max(16px,calc((100% - var(--wrap)) / 2 - 24px));rotate:-10deg}
.story-heading{max-width:900px;margin:0 auto clamp(28px,3.5vw,48px);text-align:center}
.story-heading .eyebrow{margin-bottom:14px}
.story-heading h2{font-size:clamp(2.4rem,4.6vw,4.2rem);max-width:18ch;margin-inline:auto}
.heading-left .story-heading{max-width:var(--column);text-align:left}
.heading-left .story-heading h2{margin-inline:0}
/* En la historia, el subrayado (U) es el trazo ondulado a mano y la cursiva es solo cursiva.
   En los títulos es un trazo único; en el texto, una onda que sigue las líneas. */
.story-heading h2 u,.collection-works .collection-heading h2 em{position:relative;z-index:0;white-space:nowrap;text-decoration:none;background:none;padding-bottom:0}
.story-heading h2 u::after,.collection-works .collection-heading h2 em::after{content:'';position:absolute;z-index:-1;left:-.04em;right:-.08em;bottom:-.06em;height:.24em;background:var(--season,var(--ink));-webkit-mask:var(--squiggle) center/100% 100% no-repeat;mask:var(--squiggle) center/100% 100% no-repeat}
.tone-season .story-heading h2 u::after{background:var(--season-mark,var(--ivory))}
.story-flow u{text-decoration:none;background:var(--squiggle-line) repeat-x left bottom/4em .34em;padding-bottom:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tone-season .story-flow u{background-image:var(--squiggle-line-mark)}
/* Texto */
.story-flow{display:flow-root;max-width:var(--column);margin-inline:auto;font-size:1.125rem;line-height:1.8}
.story-flow>*{margin:0 0 1.15em}
.story-flow>:last-child{margin-bottom:0}
/* Entradilla: solo en los párrafos a los que Elisa aplica ese estilo. */
.story-flow>p.lead{font:400 clamp(1.3rem,1.9vw,1.55rem)/1.55 var(--serif);letter-spacing:-.01em}
.story-flow h3{font:400 clamp(1.7rem,2.6vw,2.1rem)/1.2 var(--serif);letter-spacing:-.03em;margin:1.6em 0 .5em}
.story-flow h4{font:600 1rem/1.4 var(--sans);letter-spacing:.06em;margin:1.4em 0 .4em}
.story-flow :is(ul,ol){padding-left:1.3em}
.story-flow :is(ul,ol) :is(ul,ol){margin:.25em 0}
.story-flow li{margin:.3em 0}
.story-flow a{text-decoration:underline;text-underline-offset:3px}
.story-flow mark{background:color-mix(in srgb,var(--season,var(--ink)) 30%,transparent);color:inherit;padding:0 .15em}
.story-flow blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:3px solid currentColor;font:italic 400 1.4rem/1.4 var(--serif)}
.story-flow hr{height:auto;border:0;margin:2.2em 0;text-align:center;overflow:visible;clear:both;color:inherit}
.story-flow hr::after{content:'\2731  \2731  \2731';letter-spacing:.9em;color:var(--muted);font-size:.9rem}
.story-flow .align-center{text-align:center}
.story-flow .align-right{text-align:right}
/* Fotos: polaroid, enmarcada o sin marco; siempre completas salvo a pantalla completa. */
.story-figure{margin:2.4em auto;max-width:100%;min-width:0}
.story-frame{display:block}
.story-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:78vh;margin-inline:auto}
.story-figure figcaption{margin-top:14px;font:italic 400 1rem/1.45 var(--serif);color:var(--muted);text-align:center}
.story-figure.pos-centrada{display:table}
.story-figure.is-polaroid{background:var(--ivory);color:var(--ink);padding:12px 12px 0;rotate:var(--tilt,-1.2deg);box-shadow:0 1px 1px #2a2a1f14,0 22px 34px -16px #2a2a1f85,0 4px 10px -2px #2a2a1f24}
.story-figure.is-polaroid figcaption{margin:0;padding:12px 8px 16px;color:var(--ink);font-size:1.05rem}
.story-figure.is-polaroid:not(:has(figcaption)){padding-bottom:12px}
.story-figure.is-marco .story-frame{background:#fffdf5;padding:clamp(14px,2vw,26px);margin:clamp(9px,1vw,12px);box-shadow:0 0 0 clamp(9px,1vw,12px) #34372c,0 26px 36px -14px #2a2a1f85}
.story-figure:is(.pos-izquierda,.pos-derecha){width:min(46%,380px);margin-block:.4em 1.4em}
.story-figure:is(.pos-izquierda,.pos-derecha) img{width:100%;max-height:none}
.story-figure.pos-izquierda{float:left;margin-left:clamp(-160px,calc((var(--column) - 100vw) / 2 + 56px),0px);margin-right:2.4em;--tilt:-2deg}
.story-figure.pos-derecha{float:right;margin-right:clamp(-160px,calc((var(--column) - 100vw) / 2 + 56px),0px);margin-left:2.4em;--tilt:2deg}
.story-figure.pos-ancha{display:block;width:var(--breakout);max-width:none;margin-inline:calc((100% - var(--breakout)) / 2);rotate:none}
.story-figure.pos-ancha img{width:100%;max-height:none}
.story-full{padding:0}
.story-full .story-figure{display:block;width:100%;margin:0;rotate:none}
.story-full .story-figure img{width:100%;max-width:none;max-height:88vh;object-fit:cover}
.story-full figcaption{width:var(--breakout);margin:14px auto 0}
.story-band+.story-full,.story-full+.story-band{margin-top:0}
.story-full+.story-band{padding-top:var(--story-pad)}
/* Collage: dos o más fotos seguidas */
.story-collage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:var(--breakout);margin:2.4em calc((100% - var(--breakout)) / 2);padding-block:12px;clear:both}
.story-collage .story-figure{display:block;width:clamp(170px,29%,380px);margin:14px -1.2%;transition:rotate .3s ease,translate .3s ease,scale .3s ease}
.story-collage .story-figure:nth-child(even){translate:0 20px}
.story-collage .story-figure img{width:100%;max-height:none}
.story-collage:has(>:nth-child(2):last-child) .story-figure{width:min(40%,380px)}
.story-collage:has(>:nth-child(4):last-child) .story-figure{width:clamp(170px,25%,300px)}
@media(hover:hover) and (pointer:fine){.story-collage .story-figure:hover{rotate:0deg;translate:0 -6px;z-index:2;scale:1.03}}
/* Las fotos enmarcadas o sin marco no se montan unas sobre otras: se cuelgan rectas, alineadas por arriba y con su espacio, como en una pared. */
.story-collage .story-figure:not(.is-polaroid){margin:14px 1.6%;rotate:none;translate:none;align-self:flex-start}
/* Cita destacada */
.story-quote .wrap{max-width:980px;text-align:center}
.story-quote-figure{margin:0}
.story-quote blockquote{margin:0}
.story-quote blockquote p{font:italic 400 clamp(2rem,4.2vw,3.6rem)/1.2 var(--serif);letter-spacing:-.03em;margin:0}
.story-quote blockquote p::before{content:'\201C';display:block;font:400 clamp(5rem,9vw,8rem)/.55 var(--serif);opacity:.35}
.story-quote figcaption{margin-top:28px;font:600 .8125rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
/* Editor visual de Directus: lo editable se resalta al pasar por encima. */
[data-directus]{scroll-margin-top:24px}
.collection-works .collection-heading{align-items:flex-end;padding-bottom:28px}
.collection-works .collection-heading .eyebrow{margin-bottom:10px}

/* Menú móvil: el acceso a la colección destacada usa su color. */
.menu-autumn{background:var(--season,var(--ink));color:var(--season-ink,var(--ink))}

@media(max-width:900px){
 .season-inner{grid-template-columns:minmax(0,1fr);gap:24px}
 .season-copy h2{max-width:none}
 .story-figure:is(.pos-izquierda,.pos-derecha){float:none;width:min(100%,420px);margin:2em auto}
}
@media(max-width:700px){
 .season-inner{padding-block:48px 56px}
 .season-copy h2{font-size:clamp(2.6rem,11vw,3.4rem)}
 .season-stage{padding:28px 6px}
 .season-piece{flex-basis:40%}
 .season-piece:nth-child(2){flex-basis:44%}
 .season-polaroid{padding:6px 6px 0}
 .season-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:calc(2.4em + 17px);font-size:.85rem;line-height:1.2;white-space:normal;padding:7px 2px 10px}
 .season-sticker-second{width:72px;top:0}
 .season-more{align-self:stretch;justify-content:space-between}
 .collection-hero-inner{padding-block:40px 48px}
 .collection-hero.has-cover .collection-hero-inner{grid-template-columns:minmax(0,1fr)}
 .collection-hero h1{font-size:clamp(3rem,14vw,4rem)}
 .collection-cover .season-polaroid{width:min(72%,290px)}
 .story-band{--story-pad:60px;--breakout:calc(100vw - 40px)}
 .season-sticker-block{width:78px;top:-36px}
 .story-flow{font-size:1.0625rem}
 .story-collage .story-figure{width:46%;margin-inline:-1%}
}
/* Menú «Colecciones»: desplegable en el escritorio y lista en el menú del móvil. La actual va primero. */
.nav-collections{position:relative;display:flex}
.nav-collections-toggle{display:flex;align-items:center;gap:4px;min-height:44px;padding:10px 0;background:none;border:0;border-bottom:1px solid transparent;color:inherit;font:inherit;white-space:nowrap;cursor:pointer}
.nav-collections-toggle svg{width:15px;height:15px;transition:rotate .2s}
.nav-collections-toggle[aria-expanded=true] svg{rotate:180deg}
.nav-collections-toggle:hover,.nav-collections:has(a[aria-current=page]) .nav-collections-toggle{border-bottom-color:var(--ink)}
.nav-collections-list{position:absolute;z-index:40;top:100%;left:50%;translate:-50% 0;display:grid;gap:2px;width:max-content;min-width:260px;max-width:340px;margin-top:8px;padding:8px;background:var(--ivory);border:1px solid var(--line);box-shadow:0 22px 40px -22px #2a2a1f99}
.nav-collections-list[hidden]{display:none}
.nav-collections-list::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.desktop-nav .nav-collections-list a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 8px;border:0;white-space:normal}
.desktop-nav .nav-collections-list a:hover,.desktop-nav .nav-collections-list a[aria-current=page]{background:var(--paper)}
.collection-mark{display:block;width:40px;height:40px;border-radius:50%;background:var(--season,var(--ink))}
.collection-mark:has(img){background:none;border-radius:0}
.collection-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #2a2a1f40)}
.collection-name{display:grid;justify-items:start;font:400 1.25rem/1.15 var(--serif)}
.collection-name small{margin-bottom:3px;font:600 .625rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.collection-name small.collection-draft{margin:3px 0 0;color:#9a4a33}
.menu-collections{margin:-15px 0 30px}
.menu-collections-title{margin:0 0 4px;font:600 .75rem/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu-collections a{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;min-height:64px;padding:12px 0;border-bottom:1px solid var(--line)}
.menu-collections .collection-mark{width:44px;height:44px}
.menu-collections .collection-name{font-size:1.5rem}
.menu-collections a[aria-current=page] .collection-name{font-style:italic}

/* ——— Fotos en grande (public/fotos.js): historias, «De cerca» y la portada de una colección ——— */
:is(.story .story-figure,.original-closeup .story-figure,.collection-cover .season-polaroid) img{cursor:zoom-in}
:is(.story .story-figure,.original-closeup .story-figure,.collection-cover .season-polaroid) img:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
html.photo-open{overflow:hidden}
dialog.photo-dialog{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;background:none;color:var(--ivory);overflow:hidden}
.photo-dialog::backdrop{background:color-mix(in srgb,color-mix(in srgb,var(--ink) 55%,#000) 90%,transparent)}
.photo-stage{--avail-w:calc(100vw - 192px);--avail-h:calc(100dvh - 188px);display:grid;place-items:center;width:100%;height:100%;padding:64px 96px 76px}
.photo-view{display:grid;justify-items:center;gap:14px;margin:0;max-width:100%;max-height:100%}
/* Siempre del mismo tamaño, cargue la versión que cargue: el que cabe con sus proporciones, sin pasar de su ancho real. */
.photo-view img{display:block;aspect-ratio:var(--ratio,1);width:min(var(--avail-w),calc(var(--avail-h) * var(--ratio,1)),var(--natural-w,1440px));height:auto;max-width:none;max-height:none;object-fit:contain;background:var(--ivory);box-shadow:0 0 0 6px var(--ivory),0 30px 60px -20px #000000b3}
.photo-view figcaption{max-width:60ch;font:italic 400 1.0625rem/1.45 var(--serif);text-align:center;color:var(--ivory)}
.photo-close{position:fixed;top:18px;right:18px;color:var(--ink)}
.photo-nav{position:fixed;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:center;gap:18px;pointer-events:none}
.photo-nav[hidden]{display:none}
.photo-nav button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ivory);color:var(--ink);pointer-events:auto}
.photo-nav button:hover{background:var(--eucalyptus)}
.photo-nav .icon{width:24px;height:24px}
.photo-count{min-width:4.5em;font:600 .875rem/1 var(--sans);letter-spacing:.06em;text-align:center}
@media(min-width:701px){
 .photo-nav{top:0;bottom:0;justify-content:space-between;padding-inline:24px}
 .photo-count{position:fixed;left:0;right:0;bottom:24px}
}
@media(max-width:700px){
 .photo-stage{--avail-w:calc(100vw - 24px);--avail-h:calc(100dvh - 188px);padding:64px 12px 84px}
 .photo-view img{box-shadow:0 0 0 4px var(--ivory),0 20px 40px -16px #000000b3}
 .photo-close{top:12px;right:12px}
}
@media(prefers-reduced-motion:no-preference){
 .photo-dialog[open] .photo-view{animation:photo-in .28s cubic-bezier(.22,1,.36,1)}
 .photo-dialog[open]::backdrop{animation:photo-backdrop-in .25s ease}
}
@keyframes photo-in{from{opacity:0;scale:.94}}
@keyframes photo-backdrop-in{from{opacity:0}}