/* -------------------------------------------------------------------------
   Contact us.

   Per-page stylesheet, same convention as assignment.css / writer.css. This
   page does NOT sit inside .article-container, so the specificity trap that
   caught the assignment notice twice does not apply here -- but everything is
   still scoped under .osc-contact rather than styling bare elements, because
   custom.css and tw-output.css both reach into this document.

   No preloader on this page, so the body overflow has to be released here.
   custom.css sets `body { overflow: hidden }` and every page with a preloader
   releases it from onload; without this the page cannot be scrolled.
   ------------------------------------------------------------------------- */

:root {
    --contact-ink: #16181a;
    --contact-muted: #5f646b;
    --contact-rule: #d9d8d2;
    --contact-paper: #fffef8;
    --contact-blue: #164f8b;
    --contact-blue-bright: #2f7fd4;
    --contact-green: #2f6b4d;
    --contact-ui: Arial, Helvetica, sans-serif;
    --contact-serif: Georgia, 'Times New Roman', serif;
}

.osc-contact-body {
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FFFFF7;
}
.osc-contact-body .header { top: 0; }

.osc-contact { background: #FFFFF7; }
.osc-contact .contact-wrap {
    max-width: 54rem;
    margin: 0 auto;
    font-family: var(--contact-serif);
    color: var(--contact-ink);
    line-height: 1.6;
}

/* -- masthead ------------------------------------------------------------- */

.osc-contact .contact-head { margin-bottom: 26px; }
.osc-contact .contact-eyebrow {
    margin: 0 0 6px;
    font-family: var(--contact-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--contact-muted);
}
.osc-contact .contact-title {
    margin: 0 0 10px;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* The rule draws itself once, left to right, on arrival. A small piece of
   motion that says the page is being served rather than remembered. Scale on a
   transform, so it composites and never triggers layout. */
.osc-contact .contact-rule {
    height: 3px;
    margin: 0 0 14px;
    background: var(--contact-rule);
    overflow: hidden;
}
.osc-contact .contact-rule span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--contact-blue), var(--contact-blue-bright));
    transform: scaleX(0);
    transform-origin: left center;
    animation: contact-rule-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}
@keyframes contact-rule-draw { to { transform: scaleX(1); } }

.osc-contact .contact-lede {
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.55;
    max-width: 40rem;
}

/* -- cards ---------------------------------------------------------------- */

.osc-contact .contact-card {
    position: relative;
    overflow: hidden;                    /* keeps the shimmer inside */
    padding: 22px 24px;
    margin: 0 0 18px;
    background: var(--contact-paper);
    border: 1px solid var(--contact-rule);
    border-radius: 3px;
    /* Each card rises in, staggered. Decoration only: the animation runs
       forwards to a resting state, so if it never runs the card is still
       exactly where it belongs and fully legible. Nothing on this page waits
       on an animation -- a lesson this codebase has now learned twice. */
    opacity: 0;
    transform: translateY(10px);
    animation: contact-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.osc-contact .contact-card--phone { animation-delay: 180ms; }
.osc-contact .contact-grid .contact-card:nth-child(1) { animation-delay: 300ms; }
.osc-contact .contact-grid .contact-card:nth-child(2) { animation-delay: 380ms; }
.osc-contact .contact-card--quiet { animation-delay: 460ms; background: transparent; }
@keyframes contact-rise { to { opacity: 1; transform: none; } }

/* The telephone card carries the weight: it is the fastest way to reach a
   newsroom and the one people hesitate over. */
.osc-contact .contact-card--phone {
    border-left: 6px solid var(--contact-blue);
    background: linear-gradient(180deg, #f7fafd 0%, var(--contact-paper) 60%);
}

/* The shimmer. Sweeps once every seven seconds rather than continuously -- a
   continuous sweep reads as a loading bar, something waiting on data, which is
   the wrong signal for a page that is finished and sitting there. */
.contact-shimmer {
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-160%);
    animation: contact-shimmer 7s cubic-bezier(0.35, 0, 0.2, 1) 1.4s infinite;
}
@keyframes contact-shimmer {
    0%   { transform: translateX(-160%); }
    26%  { transform: translateX(360%); }
    100% { transform: translateX(360%); }
}

.osc-contact .contact-card-label {
    margin: 0 0 8px;
    font-family: var(--contact-ui);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--contact-muted);
}

.osc-contact .contact-phone {
    display: inline-block;
    margin: 0 0 8px;
    font-family: var(--contact-ui);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--contact-blue);
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
}
.osc-contact .contact-phone:hover { color: var(--contact-blue-bright); transform: translateY(-1px); }

.osc-contact .contact-email {
    display: inline-block;
    margin: 0 0 8px;
    font-family: var(--contact-ui);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--contact-blue);
    text-decoration: none;
    word-break: break-word;
    border-bottom: 2px solid transparent;
    transition: border-color .18s ease, color .18s ease;
}
.osc-contact .contact-email:hover { color: var(--contact-blue-bright); border-bottom-color: var(--contact-blue-bright); }

.osc-contact .contact-card-note {
    margin: 0 0 .6em;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--contact-muted);
}
.osc-contact .contact-card-note:last-child { margin-bottom: 0; }
.osc-contact .contact-card-note a { color: var(--contact-blue); }
.osc-contact .contact-card-strong { margin: 0 0 .5em; font-size: 1.15rem; font-weight: 700; }

/* -- the switchboard tree ------------------------------------------------- */

.osc-contact .contact-tree { list-style: none; margin: 16px 0 14px; padding: 0; }
.contact-tree-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    border-top: 1px solid #e7e6e0;
}
.contact-tree-item:first-child { border-top: 0; }

/* A keypad key rather than a bullet. It is what the caller is about to press,
   so it should look like the thing they press. */
.contact-key {
    flex: 0 0 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--contact-ui);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--contact-blue);
    border-radius: 5px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
    transition: transform .12s ease, background .12s ease;
}
.contact-tree-item:hover .contact-key { transform: translateY(-1px); background: var(--contact-blue-bright); }

.contact-tree-text { min-width: 0; }
.contact-tree-name { display: block; font-weight: 700; font-size: 1.02rem; }
.contact-tree-what { display: block; font-size: .9rem; line-height: 1.5; color: var(--contact-muted); }

.osc-contact .contact-card-foot {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #e7e6e0;
    font-size: .9rem;
    color: var(--contact-muted);
}

/* -- layout --------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-grid .contact-card { margin-bottom: 0; }

.osc-contact .contact-list { margin: 0; padding-left: 1.15em; }
.osc-contact .contact-list li { margin-bottom: .55em; font-size: 1rem; line-height: 1.55; }
.osc-contact .contact-list a { color: var(--contact-blue); }

.osc-contact .contact-foot {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--contact-rule);
    font-family: var(--contact-ui);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--contact-muted);
}

@media (max-width: 48rem) {
    .contact-grid { grid-template-columns: 1fr; }
    .osc-contact .contact-grid .contact-card { margin-bottom: 18px; }
    .osc-contact .contact-title { font-size: 2.25rem; }
    .osc-contact .contact-phone { font-size: 2rem; }
}

/* Nobody asked for the movement, so anybody who has asked for less gets none.
   Every card is placed at its resting state immediately -- the animations were
   only ever decoration, and none of them gate anything. */
@media (prefers-reduced-motion: reduce) {
    .osc-contact .contact-card { opacity: 1; transform: none; animation: none; }
    .osc-contact .contact-rule span { transform: scaleX(1); animation: none; }
    .contact-shimmer { animation: none; opacity: 0; }
    .osc-contact .contact-phone:hover,
    .contact-tree-item:hover .contact-key { transform: none; }
}

@media print {
    .header, .nav, nav, footer, #marquee, .osc-ticker, .osc-weather-ticker { display: none !important; }
    .contact-shimmer { display: none; }
    .osc-contact .contact-card { opacity: 1; transform: none; animation: none; break-inside: avoid; }
    .osc-contact .contact-rule span { transform: scaleX(1); animation: none; }
}