/* opheliapastrana.com/fotos/f/ · página de una foto. Fondo oscuro de sala. */
html, body{ background:var(--stage); }
body{ color:var(--on-stage); min-height:100dvh; display:flex; flex-direction:column; }
.bar{ background:var(--bar-bg-stage); border-bottom-color:var(--rule-dk); color:var(--on-stage); }
.mark-sec{ color:var(--mute-dk); }
/* this page is the stage: its signal marks and lines keep one red in both modes. The mark's heart, the slash before
   the section's name, the line under the current section in the bar, and the underline of a link in a paragraph */
.mark-heart{ fill:var(--signal-mark-on-stage); }
.mark-sec::before{ color:var(--signal-mark-on-stage); }
.nav a[aria-current="page"]{ border-bottom-color:var(--signal-mark-on-stage); }
p a:not(.btn){ text-decoration-color:var(--signal-mark-on-stage); }
.nav a:hover{ border-bottom-color:var(--signal-on-dark); }
.nav-cta{ background:var(--signal-fill); color:var(--on-signal-fill); }
.nav-cta:hover{ background:var(--on-stage); color:var(--on-stage-inverse); }
main{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:0; max-width:var(--wrap); margin:0 auto; width:100%; }
.pic{ padding:clamp(1rem,3vw,2.5rem) clamp(1.25rem,4vw,2.5rem); display:grid; align-content:start; }
.pic img{ display:block; max-width:100%; height:auto; max-height:86dvh; width:auto; margin:0 auto; box-shadow:0 20px 60px var(--photo-shadow); }
.pic .nav{ display:flex; justify-content:space-between; margin-top:1rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
.pic .nav a{ text-decoration:none; color:var(--mute-dk); }
.pic .nav a:hover{ color:var(--on-stage); }
aside{ border-left:1px solid var(--rule-dk); padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,2.5vw,1.8rem); display:flex; flex-direction:column; gap:1.4rem; }
aside .eyebrow{ color:var(--signal-on-dark); margin:0; }
aside h1{ font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:-.02em; line-height:1.05; margin:0; }
.alt{ margin:0; color:var(--mute-dk); font-size:.94rem; line-height:1.5; }
.copy{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; background:transparent; color:var(--on-stage); border:1px solid var(--rule-dk); padding:.5rem .7rem; cursor:pointer; font-weight:500; align-self:flex-start; }
.copy:hover{ border-color:var(--on-stage); } .copy.ok{ background:var(--on-stage); color:var(--on-stage-inverse); border-color:var(--on-stage); }
.spec{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dk); }
.spec li{ display:grid; grid-template-columns:92px 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--rule-dk); font-size:.9rem; align-items:center; }
.spec .k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-dk); }
.dl{ display:flex; flex-direction:column; gap:.5rem; }
.dl .btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:.45rem; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  padding:.85rem 1rem; background:var(--signal-fill); color:var(--on-signal-fill); border:2px solid var(--signal-fill); text-decoration:none; }
.dl .btn:hover{ background:var(--on-stage); color:var(--on-stage-inverse); border-color:var(--on-stage); }
.dl .btn-ghost{ background:transparent; color:var(--on-stage); border-color:var(--rule-dk); }
.dl .btn small{ font-family:var(--mono); font-weight:400; font-size:.6rem; letter-spacing:.08em; opacity:.8; }
/* on the solid signal button the small print keeps the button's own white at full strength: at opacity .8 it measured
   3.66:1 on the red (6-C). No colour is set, so on hover it follows the button to ink. */
.dl .btn:not(.btn-ghost) small{ opacity:1; }
.back{ margin-top:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-dk); display:flex; flex-direction:column; gap:.5rem; }
.back a{ color:var(--on-stage); text-decoration:none; border-bottom:2px solid var(--signal-mark-on-stage); align-self:flex-start; }
.back a:hover{ color:var(--signal-on-dark); }
.uso-nota{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-dk); line-height:1.7; }
@media (max-width:820px){ main{ grid-template-columns:1fr; } aside{ border-left:none; border-top:1px solid var(--rule-dk); } .pic img{ max-height:70dvh; } }