/* Consent banner: the live banner's form (position, proportions, shadow, details window and
 * reopening tab), set in the design code's scale (1rem, 0.6667rem) and rhythm (whole and half --lh). */
#cookie-banner,#consent-reopen,#showtime{--lh:1.2rem;--lh-small:.78rem}
@media(min-width:48em){#cookie-banner,#consent-reopen,#showtime{--lh:1.3rem;--lh-small:.845rem}}
#cookie-banner[hidden],#consent-storage-message[hidden],#video-consent[hidden],#video-player[hidden]{display:none!important}
#cookie-banner,#cookie-banner *,#consent-reopen,#video-consent p,#showtime .btn-close{font-family:"EB Garamond 12","Times New Roman",serif}
#cookie-banner,#consent-categories,#consent-reopen{color:#000;background:#fffff8;box-shadow:1px 2px 8px rgba(0,0,0,.35)}

/* A box above the page: 1 unit at the top, 1.5 at the bottom (owner, 2026-10-26). */
/* First layer: a bottom sheet up to 414px, a floating panel up to 62em, then a corner panel. */
#cookie-banner{box-sizing:border-box;position:fixed;z-index:1040;left:0;right:0;bottom:0;margin:0;padding:var(--lh) 1rem calc(var(--lh)*1.5);max-height:calc(100vh - var(--lh));overflow-y:auto;overscroll-behavior:contain;scroll-padding:calc(var(--lh)*.5);text-align:left;container-type:inline-size}
@media(min-width:25.9375em){#cookie-banner{left:1rem;right:1rem;bottom:1rem}}
/* The live banner's widths: 20% of the window from 62em, 15% from 87.5em. */
@media(min-width:62em){#cookie-banner{right:auto;width:20%}}
@media(min-width:87.5em){#cookie-banner{width:15%}}
/* While the details window is open, it is the only consent surface, as on the live site. */
#cookie-banner:has(#consent-categories[open]){visibility:hidden}
#consent-categories{visibility:visible}
#cookie-banner h2{font-size:1rem;font-style:italic;font-weight:400;line-height:var(--lh)!important;margin:0;padding-right:1.5rem}
/* Text keeps the design code's measure (30em of small type is about 73 characters). */
#cookie-banner p{font-size:.6667rem;line-height:var(--lh-small)!important;text-indent:0;margin:calc(var(--lh)*.5) 0 var(--lh)!important;max-width:30em}
#cookie-banner a{color:#000;text-decoration-line:underline;text-decoration-color:#ff4000;text-decoration-thickness:.07em;text-underline-offset:.16em}
#cookie-banner a:hover{text-decoration-thickness:.15em}

/* Equal outline buttons, 1.5 rhythm units high including the border. */
.consent-actions,.consent-dialog-actions{display:flex;gap:calc(var(--lh)*.5)}
.consent-actions>button{flex:1 1 0}
/* Three equal buttons in a row when they fit (about 11.5rem of panel content), otherwise a column. */
@container (max-width:11.49rem){.consent-actions{flex-direction:column}}
.consent-actions button,.consent-dialog-actions button{font:inherit;font-size:.6667rem;line-height:var(--lh)!important;color:#000;background:#fffff8;border:1px solid #000;border-radius:0;padding:calc(var(--lh)*.25 - 1px) .5em;cursor:pointer;white-space:nowrap}
.consent-actions button:hover,.consent-actions button:focus-visible,.consent-dialog-actions button:hover,.consent-dialog-actions button:focus-visible{color:#fffff8;background:#000}
.consent-actions button:active,.consent-dialog-actions button:active{transform:translateY(1px)}
.consent-close{position:absolute;top:calc(var(--lh)*.5);right:.5rem;width:var(--lh);height:var(--lh);padding:0;border:0;background:none;color:#000;font:inherit;font-size:1.5rem;line-height:var(--lh)!important;cursor:pointer}
#cookie-banner :focus-visible,#consent-reopen:focus-visible{outline:1px solid #000;outline-offset:2px}
/* The region takes focus on first view: an inset ring. */
#cookie-banner:focus-visible{outline:1px solid #000;outline-offset:-5px}

/* Details window: centred over a dimmed page, as the live one; paper instead of grey; square corners. */
#consent-categories{box-sizing:border-box;width:calc(100% - 2rem);max-width:42.5rem;max-height:calc(100vh - 2*var(--lh));margin:auto!important;padding:var(--lh) 1rem calc(var(--lh)*1.5);border:0;border-radius:0;overflow-y:auto}
@media(min-width:48em){#consent-categories{padding-left:2.5rem;padding-right:2.5rem}}
#consent-categories::backdrop{background:rgba(17,17,17,.5)}
#consent-categories:focus-visible{outline:1px solid #000;outline-offset:-5px}
.consent-category{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:var(--lh) 0!important}
label.consent-category{cursor:pointer}
.consent-name{display:block;font-size:1rem;font-style:italic;line-height:var(--lh)!important}
.consent-text{display:block;max-width:30em;font-size:.6667rem;line-height:var(--lh-small)!important;margin-top:calc(var(--lh)*.5)!important}
/* The live window's switches, in ink and paper: off is an outline with the knob left, on is filled with the knob right. */
.consent-category input{flex:none;appearance:none;position:relative;box-sizing:border-box;width:2rem;height:1rem;margin:calc((var(--lh) - 1rem)/2) 0 0!important;border:1px solid #000;border-radius:.5rem;background:#fffff8;cursor:pointer}
.consent-category input::before{content:"";position:absolute;top:2px;left:2px;width:calc(1rem - 6px);height:calc(1rem - 6px);border-radius:50%;background:#000}
.consent-category input:checked{background:#000}
.consent-category input:checked::before{left:auto;right:2px;background:#fffff8}
.consent-dialog-actions{flex-wrap:wrap;margin-top:var(--lh)!important}
.consent-dialog-actions button{padding-left:1em;padding-right:1em}
.consent-dialog-actions [data-consent="save"]{margin-left:auto}

/* After a choice: the small tab that reopens the banner, as on the live site. */
#consent-reopen{display:none;position:fixed;z-index:1040;left:1rem;bottom:-5px;margin:0;padding:0 .5rem 5px;border:0;border-radius:0;font-size:.6667rem;line-height:var(--lh)!important;cursor:pointer}
#cookie-banner[data-ready][hidden]+#consent-reopen{display:block}
/* On hover it rises 5px over 200ms, as the live tab. The lower 5px wait below the window, so the box keeps its size and nothing else on the page is laid out again. */
@media(hover:hover){#consent-reopen:hover{transform:translateY(-5px)}}
@media(prefers-reduced-motion:no-preference){#consent-reopen{transition:transform .2s}}

/* Video permission: asked once per visit, in a small window in the cookie settings window's form.
 * Only while the question shows; the playing video keeps its live frame, with square corners. */
#showtime .modal-dialog:has(#video-consent:not([hidden])){max-width:30rem}
#showtime .modal-content{border-radius:0}
#showtime .modal-content:has(#video-consent:not([hidden])){background:#fffff8;border:0;box-shadow:1px 2px 8px rgba(0,0,0,.35)}
#showtime .modal-body:has(#video-consent:not([hidden])){position:relative;padding:0!important}
#showtime .modal-body:has(#video-consent:not([hidden])) .btn-close{box-sizing:border-box;position:absolute;top:calc(var(--lh)*.5);right:.5rem;width:var(--lh);height:var(--lh);padding:0;margin:0!important;background:none;opacity:1;color:#000;font-size:1.5rem;line-height:var(--lh)!important}
#showtime .modal-body:has(#video-consent:not([hidden])) .btn-close::before{content:"\00d7"}
#showtime .btn-close:focus{box-shadow:none}
#showtime .btn-close:focus-visible{outline:1px solid #000;outline-offset:2px}
/* A box: bottom margin larger than the top; sides as the cookie settings window. */
#video-consent{padding:var(--lh) 1rem calc(var(--lh)*1.5);color:#000;background:#fffff8}
@media(min-width:48em){#video-consent{padding-left:2.5rem;padding-right:2.5rem}}
#video-consent p{font-size:1rem;line-height:var(--lh)!important;text-indent:0;margin:0;padding-right:1rem}
#video-consent a{color:#000;text-decoration-line:underline;text-decoration-color:#ff4000;text-decoration-thickness:.07em;text-underline-offset:.16em}
#video-consent a:hover{text-decoration-thickness:.15em}
#video-load{font:inherit;font-size:1rem;line-height:var(--lh)!important;color:#000;background:#fffff8;border:1px solid #000;border-radius:0;padding:calc(var(--lh)*.25 - 1px) 1em;margin-top:var(--lh)!important;cursor:pointer}
#video-load:hover,#video-load:focus-visible{color:#fffff8;background:#000}
#video-load:active{transform:translateY(1px)}
.video-preview:focus-visible,#video-load:focus-visible{outline:1px solid #000;outline-offset:2px}
.video-preview{display:block;padding:0;border:0;background:transparent;width:100%;cursor:pointer}
.video-preview img{display:block;margin:0;width:100%}