/* Pictures use the Farm House's quiet frame, optional hints and close view.
   The page is a shade under the site's own light paper, so the painting
   stands on it as a sheet, as it does on the homepage and the section's
   index, without the edge of the sheet looking stark. */
.picture-page { --picture-paper:#f8f7f2; --picture-ink:#373b32; --picture-quiet:#676b5e; --picture-line:#c9cabc; --picture-accent:#58634c; margin:0; color:var(--picture-ink); background:var(--picture-paper); font-family:'EB Garamond',Georgia,serif; -webkit-font-smoothing:antialiased; }
.picture-page *, .picture-index * { box-sizing:border-box; }
.picture-page [hidden] { display:none!important; }
.picture-page button { font:inherit; color:inherit; cursor:pointer; }
.picture-page a { color:inherit; }
.picture-page :is(button,a,summary):focus-visible { outline:2px solid var(--picture-accent); outline-offset:5px; }
.picture-shell { min-height:100svh; display:flex; flex-direction:column; padding:0 36px; }
.picture-masthead { height:88px; max-width:1440px; width:100%; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.picture-brand { font-size:21px; letter-spacing:.02em; text-decoration:none; }
.picture-text-link { border:0; border-bottom:1px solid transparent; background:none; padding:7px 0; font:12px Arial,Helvetica,sans-serif!important; color:var(--picture-quiet); text-decoration:none; }
.picture-text-link:hover { border-bottom-color:currentColor; color:var(--picture-ink); }
.picture-page main { width:100%; flex:1; }
.picture-title { font:400 clamp(30px,4vw,44px)/1.15 'Cormorant Garamond',Georgia,serif; text-align:center; margin:6px 0 10px; }
.picture-intro { font-size:18px; line-height:1.5; text-align:center; margin:0 auto 24px; max-width:620px; }
.picture-intro p { margin:0; }
/* The picture takes the height the window has left once the masthead, the
   title, a two-line introduction, the caption and the link back to all
   pictures are in view: about 322px, and the rest keeps that link off the
   window's lower edge. The caption and the links under it keep to the
   picture's width, so they sit beneath its edges. */
.picture-visit { --picture-width:min(100%,1080px,max(500px,calc((100svh - 350px)*1.5))); }
.picture-frame { position:relative; width:var(--picture-width); margin:auto; isolation:isolate; }
.picture-image { display:block; width:100%; height:auto; border-radius:3px; user-select:none; }
.picture-hotspots { position:absolute; inset:0; }
.picture-hotspot { position:absolute; left:var(--spot-x); top:var(--spot-y); transform:translate(-50%,-50%); width:64px; height:64px; min-width:44px; min-height:44px; border:0; border-radius:50%; background:transparent; padding:0; display:grid; place-items:center; -webkit-tap-highlight-color:transparent; }
/* The places show as faint dots from the first look, on every screen, so a
   reader sees that the picture opens before finding it by chance. */
.picture-hotspot::before { content:''; width:5px; height:5px; background:#fcf9ee; border-radius:50%; box-shadow:0 0 0 1px #252a3280; opacity:.55; transition:opacity .2s; }
.picture-hotspot-label { position:absolute; white-space:nowrap; opacity:0; transition:opacity .2s; padding:6px 9px; background:rgb(244 240 231 / 95%); color:#353c2e; font:11px Arial,Helvetica,sans-serif; border-radius:2px; pointer-events:none; }
.picture-hotspot-number, .picture-choice-number { display:none; }
.picture-hotspot:focus-visible { outline-color:#faf8ed!important; outline-offset:-4px!important; }
/* A label that shows is part of its place: a click on its words opens the
   detail as a click on the dot does. Hidden, it takes no clicks, so the
   place is no larger than it looks. */
.picture-hotspot:focus-visible .picture-hotspot-label, .show-places .picture-hotspot-label { opacity:1; pointer-events:auto; }
.picture-hotspot:focus-visible { z-index:1; }
/* A label sits on its place, unless that covers the thing it names: a thin
   line such as the ring keeps its label beside it. */
.picture-hotspot[data-label-side="right"] .picture-hotspot-label { left:calc(100% - 6px); }
.picture-under { width:var(--picture-width); margin:auto; padding:18px 0 6px; text-align:center; }
.picture-caption { font-size:18px; line-height:1.5; margin:0; }
.picture-controls { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:15px; }
/* Full screen is a reader's choice. Keep the sheet whole and the controls
   outside it; the stage is measured to fit its actual proportions. */
.picture-visit.is-fullscreen { position:fixed; inset:0; z-index:20; width:100%; height:100dvh; display:flex; flex-direction:column; padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background:var(--picture-paper); }
.is-fullscreen .picture-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.is-fullscreen .picture-frame { flex:none; margin:0; }
.is-fullscreen .picture-under { flex:none; width:100%; max-height:40%; margin:0; padding:12px 0 0; overflow:auto; display:flex; flex-direction:column; }
.is-fullscreen .picture-caption, .is-fullscreen .picture-controls > a { display:none; }
.is-fullscreen .picture-controls { order:-1; margin:0; gap:16px; }
.is-fullscreen .picture-controls button { min-height:44px; }
.picture-choices { list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:2px 22px; margin:12px 0 0; padding:0; }
.picture-choices a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; text-decoration:none; }
.picture-ready .picture-choices { display:none; }
.picture-ready .picture-notes { display:none; }
.picture-notes, .picture-about { max-width:760px; margin:28px auto 0; }
.picture-note, .picture-about { border-top:1px solid var(--picture-line); padding:16px 0; }
.picture-note summary, .picture-about summary { cursor:pointer; font-size:17px; color:var(--picture-quiet); list-style:none; display:flex; align-items:center; gap:9px; }
/* The site's own chevron rather than the browser's triangle, as in the
   drawer and on a piece's reading options. */
.picture-note summary::-webkit-details-marker, .picture-about summary::-webkit-details-marker { display:none; }
.picture-note summary::after, .picture-about summary::after { content:''; width:6px; height:6px; flex-shrink:0; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; }
.picture-note[open] > summary::after, .picture-about[open] > summary::after { transform:translateY(1px) rotate(-135deg); }
.picture-note summary:hover, .picture-about summary:hover { color:var(--picture-ink); }
.picture-about { margin-top:26px; }
.picture-about :is(p,li) { font-size:17px; line-height:1.65; }
.picture-about ul { padding-left:20px; }
.picture-about a { text-underline-offset:4px; }
.picture-story { max-width:680px; margin:52px auto 0; padding:36px 0 8px; border-top:1px solid var(--picture-line); }
.picture-story > h2 { margin:0 0 30px; }
.picture-story-part { margin-bottom:30px; }
.picture-story-part p { font-size:20px; line-height:1.7; margin:0 0 14px; }
.picture-story-sources { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.picture-story-sources a { font:11px/1.6 Arial,Helvetica,sans-serif; color:var(--picture-quiet); text-underline-offset:4px; }
.picture-footer { max-width:1440px; width:100%; margin:0 auto; display:flex; justify-content:space-between; gap:20px; padding:22px 0; color:var(--picture-quiet); font:11px Arial,Helvetica,sans-serif; }
.picture-footer a,.picture-footer button { font:inherit; color:inherit; border:0; background:none; padding:4px 0; text-decoration:underline; text-underline-offset:4px; }
.picture-dialog { margin:auto; border:0; padding:0; width:min(840px,calc(100vw - 40px)); max-height:calc(100svh - 50px); background:var(--picture-paper); color:var(--picture-ink); box-shadow:0 20px 100px #14190f60; overflow:auto; }
.picture-dialog::backdrop { background:#151d1bd6; backdrop-filter:blur(4px); }
.picture-detail-layout { display:grid; grid-template-columns:43% 57%; min-height:380px; }
.picture-detail-image { background-position:var(--detail-position,center); background-size:var(--detail-zoom,cover); background-repeat:no-repeat; min-height:280px; }
.picture-detail-text { padding:48px 36px 34px; position:relative; display:flex; flex-direction:column; justify-content:center; }
.picture-close { position:absolute; top:14px; right:15px; width:36px; height:36px; border:0; background:none; font:24px Arial,Helvetica,sans-serif!important; color:var(--picture-quiet); }
.picture-kicker { font:10px Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.16em; color:var(--picture-quiet); margin:0 0 18px; }
.picture-page h2 { font:400 30px/1.15 'Cormorant Garamond',Georgia,serif; margin:0 0 22px; }
.picture-detail-body p { font-size:18px; line-height:1.6; margin:0 0 16px; }
.picture-detail-sources { margin:10px 0 16px; }
.picture-detail-sources a { display:inline-block; font:11px/1.6 Arial,Helvetica,sans-serif; color:var(--picture-quiet); text-underline-offset:4px; }
.picture-return { align-self:flex-start; }
.picture-how { max-width:520px; padding:50px 40px 30px; }
.picture-how p { font-size:18px; line-height:1.6; }
.picture-sr,.picture-skip:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.picture-skip:focus { position:absolute; z-index:10; padding:12px; background:var(--picture-paper); }
.picture-catalogue { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:36px; max-width:960px; margin:36px auto 0; }
.picture-card { display:block; width:min(100%,640px); margin:auto; color:var(--ink); text-decoration:none; text-align:center; }
.picture-card img { display:block; width:100%; height:auto; border-radius:3px; }
.picture-card h2 { margin:20px 0 7px; font-family:'Cormorant Garamond',Georgia,serif; font-size:30px; font-weight:500; color:var(--petrol); }
.picture-card p { margin:0; font-size:18px; color:var(--vizon); }
.picture-card:hover h2 { text-decoration:underline; text-underline-offset:5px; }
@media(hover:hover) { .picture-hotspot:hover { z-index:1; } .picture-hotspot:hover .picture-hotspot-label { opacity:1; pointer-events:auto; } .picture-hotspots:hover .picture-hotspot::before { opacity:.7; } .picture-hotspot:hover::before,.show-places .picture-hotspot::before { opacity:0; } }
@media(hover:none) { .picture-hotspot::before { opacity:.85; } .show-places .picture-hotspot::before { opacity:0; } }
@media(max-width:860px) {
  .picture-hotspot { width:44px; height:44px; }
  .picture-hotspot-label { display:none; }
  .show-places .picture-hotspot-number { position:absolute; display:grid; place-items:center; width:22px; height:22px; border:1px solid #fcf9eeb3; border-radius:50%; background:#353c2e80; color:#fffdf5; font:11px Arial,Helvetica,sans-serif; pointer-events:none; }
  .picture-ready .show-places .picture-choices { display:flex; }
  .show-places .picture-choice-number { display:inline; margin-right:6px; font:11px Arial,Helvetica,sans-serif; }
}
@media(max-width:650px) {
  .picture-visit.is-fullscreen { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .picture-shell { padding:0 17px; }
  .picture-masthead { height:72px; gap:14px; }
  .picture-brand { font-size:18px; }
  .picture-masthead .picture-text-link { font-size:10px!important; max-width:95px; text-align:right; line-height:1.5; }
  .picture-title { margin-top:14px; }
  .picture-intro { font-size:17px; margin:0 auto 22px; max-width:320px; }
  .picture-visit { --picture-width:100%; }
  .picture-caption { font-size:17px; }
  .picture-under { padding-top:22px; }
  .picture-detail-layout { grid-template-columns:1fr; }
  .picture-detail-image { min-height:210px; max-height:230px; }
  .picture-detail-text { padding:32px 27px 28px; }
  .picture-close { background:var(--picture-paper); border-radius:50%; z-index:2; }
  .picture-how { padding:50px 27px 30px; }
  .picture-footer { font-size:10px; }
  .picture-story { margin-top:38px; padding-top:28px; }
  .picture-story-part p { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { .picture-page *, .picture-page *::before, .picture-page *::after { transition:none!important; } }