/* Bar Franco — "Ora" shared chrome: masthead, Index takeover, phone dock, footer.
   Page layouts carry their own inline styles and <style> block (the design spec);
   this file holds only what every Ora page shares. */
[hidden]{display:none!important}

/* masthead nav: underline draws in from the left */
.m-nl{position:relative;transition:color 220ms cubic-bezier(.25,.1,.25,1)}
.m-nl::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:currentColor;transition:right 320ms cubic-bezier(.25,.1,.25,1)}
.m-nl:hover{color:#AF0F00;text-decoration:none}.m-nl:hover::after{right:0}
.m-tc:hover{color:#AF0F00}
.g-ask{transition:color 220ms cubic-bezier(.25,.1,.25,1)}
.g-ask:hover{color:#AF0F00;text-decoration:none}
.g-ask:active{opacity:.6}
.g-ask:focus-visible,.m-nl:focus-visible,.m-tc:focus-visible,[data-ora]:focus-visible{outline:2px solid #F00000;outline-offset:2px}
[data-ora-masthead]{transition:height 420ms cubic-bezier(.25,.1,.25,1)}
@media (max-width:1199.98px){.m-plan{display:none!important}}
@media (max-width:899.98px){.m-nav{display:none!important}.m-menu{display:inline-block!important}}
@media (max-width:639.98px){.m-book{display:none!important}.m-dock{display:grid!important}}

/* phones: full-bleed photo boxes take the full width up front (the design sized them to their
   content, which is 0 until a lazy photo arrives, so the page shifted as photos loaded) */
@media (max-width:899.98px){.g-grid > .g-bleed{justify-self:stretch!important}}

/* footer */
.f-dog{height:24px!important;width:auto!important;max-width:none!important}
@media (max-width:639.98px){.f-spacer{display:block!important}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* phones: the "In this issue" contents panel is a desktop device; on a phone it pushed the page a screen down */
@media (max-width:899.98px){.g-index:not(.g-hero-ask){display:none!important}}