/* The Dial, October 2026 redesign.
   Shared tokens, sticky nav, footer, buttons and the framed-print treatment used
   by the homepage, archive, prints and feature pages. Page-specific styles live
   in each page's own <style> block. */

:root {
  --cobalt:#1B3FC9; --navy:#16255E; --midnight:#0E1438; --hero:#123AA8;
  --cream:#FBFAF6; --warm:#F2EBDB; --pale:#C6D2F5; --label:#8EA2E8;
  --muted:#6A7398; --body:#33406B; --gold:#F3EBA6; --hair:#DEDBD1;
  --ease:cubic-bezier(0.2,0.7,0.2,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--navy); font-family:'EB Garamond',Georgia,serif; }
a { color:var(--cobalt); text-decoration:none; }
a:hover { color:var(--navy); }
h1, h2, h3, p, figure { margin:0; }
input::placeholder, textarea::placeholder { color:#8B93B2; }
button { font-family:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.on-light :focus-visible, .dial-light :focus-visible { outline-color:var(--cobalt); }

/* Shared type */
.d-label { font-size:12px; letter-spacing:0.32em; text-transform:uppercase; }
.d-display { font-family:'Cormorant Garamond',serif; font-weight:500; }
.d-display em { font-style:italic; }

/* Buttons */
.d-btn { display:inline-block; background:var(--cobalt); color:var(--cream); font-size:13px; letter-spacing:0.24em; text-transform:uppercase; padding:15px 24px; border:1px solid var(--cobalt); cursor:pointer; text-align:center; }
.d-btn:hover { background:var(--navy); border-color:var(--navy); color:var(--cream); }
.d-btn-outline { background:transparent; color:var(--cobalt); }
.d-btn-outline:hover { background:var(--cobalt); border-color:var(--cobalt); color:var(--cream); }

/* Subscribe note under the email forms */
.dnote { min-height:1.2em; font-size:14px; color:var(--pale); }
.dnote:empty { display:none; }

/* Framed A5 print (148 x 210 mm, 1 : 1.4189): bevelled ridges, a wide white mat and a soft drop shadow.
   Sizes are fractions of the frame width: 8.5% frame band + 11.5% mat each side leaves a 60% wide
   art window, and the frame is 1.2514 times as tall as it is wide so that window is exactly A5.
   Keep the frame at width:100% of its wrapper so the percentage padding stays proportional. */
.dframe { width:100%; aspect-ratio:1 / 1.2514; box-sizing:border-box; padding:8.5%;
  background:linear-gradient(135deg,#FFFFFF 0%,#F4F2ED 50%,#E2DDD2 100%);
  box-shadow:0 2px 3px rgba(0,0,0,0.10), 0 24px 44px rgba(28,26,23,0.22), inset 0 0 0 1px rgba(0,0,0,0.10), inset 2px 2px 0 1px #FFFFFF, inset -2px -2px 0 1px #D6D0C3, inset 0 0 0 6px #F7F5F0, inset 0 0 0 7px rgba(0,0,0,0.08), inset 0 0 0 9px #FFFFFF, inset 0 0 0 10px rgba(0,0,0,0.07), inset 0 0 0 13px #EFECE5, inset 0 0 0 14px rgba(0,0,0,0.09), inset 0 0 0 16px #FFFFFF;
  transition:transform 0.6s var(--ease); }
.dframe-mount { width:100%; height:100%; overflow:hidden; background:#FFFFFF; padding:13.86%; box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,0.12), 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(0,0,0,0.08), inset 0 0 0 2px #E3DFD5, inset 8px 10px 18px rgba(40,34,24,0.26), inset -2px -2px 4px rgba(255,255,255,0.8); }
.dframe-mount img { width:100%; height:100%; object-fit:cover; display:block; box-shadow:1px 2px 4px rgba(0,0,0,0.18); }
a:hover .dframe, button:hover .dframe { transform:translateY(-6px); }

/* Motion keyframes shared by the pages */
@keyframes dial-drift { 0% { transform:scale(1.06) translate3d(0,0,0); } 50% { transform:scale(1.12) translate3d(-1.2%,-1.6%,0); } 100% { transform:scale(1.06) translate3d(0,0,0); } }
@keyframes dial-hover { 0%,100% { transform:scale(1.08) translate3d(0,0,0) rotate(0deg); } 50% { transform:scale(1.08) translate3d(0,-2.2%,0) rotate(-0.6deg); } }
@keyframes dial-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes dial-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

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