/* main.css
 *
 * Design system for the Junior Economic History Conference site.
 * Platinum ground, Shadow Grey type, oversized condensed display, and the three
 * brights (Coral, Lemon Lime, Sky Aqua) used as fills rather than as text.
 * They are all too light to carry type on Platinum -- Coral only reaches 2.5:1.
 *
 * The banner, navigation, and footer markup is generated by assets/site.js --
 * edit the CONFERENCE object there, not the HTML.
 */

/* Krub ships real bold and italic cuts, unlike Slabo 27px before it, so nothing
 * on the site is synthesised any more. Inter carries the full weight range. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..900&family=Krub:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root{
    /* Palette. The three brights are FILL colors: put Shadow Grey text on them,
     * never the reverse. None of them has enough contrast on Platinum to be
     * used as type (Coral 2.5:1, Sky Aqua 1.8:1, Lemon Lime 1.4:1). */
    --ground:     #edf2ef;  /* Platinum      -- page ground */
    --ink:        #212738;  /* Shadow Grey   -- body copy and display type */
    --coral:      #f97068;  /* Vibrant Coral -- top strip, call to action */
    --lime:       #d1d646;  /* Lemon Lime    -- date badge */
    --aqua:       #57c4e5;  /* Sky Aqua      -- pennant, hairline rules */

    /* Two derived shades. Shadow Grey lightened for secondary text, and Coral
     * darkened so it can be used as type -- 5.1:1 on Platinum, where the
     * palette Coral would only manage 2.5:1. */
    --ink-soft:   #5a6275;
    --coral-deep: #b23d35;

    --rule:       var(--aqua);

    --display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --body: 'Krub', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Ultra had one weight, so the display rules could leave weight alone.
     * Inter needs an explicit heavy weight or the oversized type reads thin. */
    --display-weight: 800;

    --maxw: 1240px;   /* masthead and hero */
    --readw: 860px;   /* body copy and program tables */
    --gutter: 40px;
}

*{
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    vertical-align: baseline;
}

html{ background: var(--ground); }

body{
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
    -webkit-font-smoothing: antialiased;

    /* Column layout so the footer sits at the bottom on short pages
     * (Registration and Directions are only a paragraph long). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

a{ color: var(--coral-deep); text-decoration: none; }
a:hover{ color: var(--ink); }
p a, li a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
i, em{ font-style: italic; }
b, strong{ font-weight: 700; }
sup{ vertical-align: super; font-size: 0.75em; line-height: 0; }
sub{ vertical-align: sub;   font-size: 0.75em; line-height: 0; }


/* ---------------------------------------------------------------- *
 * Top strip: thin coral bar carrying the site navigation
 * ---------------------------------------------------------------- */

.topbar{ background: var(--coral); }

.topbar-inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 10px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 34px;
}

/* No opacity fade here: dimming Shadow Grey on Coral drops it to 4.1:1. */
.topbar a{
    color: var(--ink);
    font-size: 0.83rem;
    letter-spacing: 0.015em;
    white-space: nowrap;
}
.topbar a:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.topbar a.current{ font-weight: 700; }


/* ---------------------------------------------------------------- *
 * Masthead: logo mark, ticket-style call to action, menu toggle
 * ---------------------------------------------------------------- */

.masthead{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 26px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo{
    display: block;
    flex: none;
    color: var(--ink);
    font-family: var(--display);
    font-weight: var(--display-weight);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.logo:hover{ color: var(--coral-deep); }

.masthead-right{ display: flex; align-items: center; gap: 20px; }

.btn-pill{
    display: inline-block;
    background: var(--coral);
    color: var(--ink);
    border-radius: 999px;
    padding: 13px 32px;
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.btn-pill:hover{ background: var(--coral-deep); color: var(--ground); }
/* `p a` underlines body links; a pill used in body copy shouldn't pick that up. */
p a.btn-pill{ text-decoration: none; }

.menu-toggle{
    display: none;   /* only needed once the top strip collapses */
    background: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: var(--ink);
}
.menu-toggle span{
    display: block;
    width: 28px;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
}

.drawer{ display: none; }
.drawer.open{
    display: block;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter) 20px;
}
.drawer a{
    display: block;
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1.5;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
}
.drawer a.current{ color: var(--coral-deep); }


/* ---------------------------------------------------------------- *
 * Hero (home page) and page hero (everywhere else)
 * ---------------------------------------------------------------- */

.hero, .page-hero{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 10px var(--gutter) 0;
}

.hero-title, .page-hero h1{
    font-family: var(--display);
    font-weight: var(--display-weight);
    color: var(--ink);
    text-transform: uppercase;
    /* Inter's caps are taller in the em than Ultra's, so 0.78 had the lines
     * almost touching. Tracked in slightly -- Inter is loose at display sizes. */
    line-height: 0.85;
    letter-spacing: -0.02em;
}

/* Each line is scaled by site.js to fill the container width. */
.hero-line{ display: block; white-space: nowrap; }

.hero-foot{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: 44px;
    padding-bottom: 70px;
}

.hero-tagline{
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    color: var(--ink);
    font-size: clamp(1.7rem, 3.6vw, 3.1rem);
    line-height: 1.0;
}
.hero-city{
    display: block;
    margin-top: 0.7em;
    font-size: 0.42em;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
}

.date-badge{
    flex: none;
    position: relative;
    width: 232px;
    height: 232px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.date-badge .month{ font-size: 1.7rem; letter-spacing: 0.05em; }
.date-badge .days{ font-size: 3.9rem; margin-top: 0.06em; }

/* The little pennant clipped to the badge's upper right, carrying the year. */
.date-badge .pennant{
    position: absolute;
    top: -6px;
    right: -14px;
    background: var(--aqua);
    color: var(--ink);
    padding: 12px 12px 20px;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* Wide photo band under the home hero. Square corners to match the poster
 * blocks above it.
 *
 * The crop is 16:9 rather than a narrower letterbox because the campus photo
 * is a tall subject -- anything wider cuts the spires off the tower. Anchored
 * to the top for the same reason: the foreground lawn is what gets trimmed. */
.hero-banner{
    max-width: var(--maxw);
    margin: 0 auto 3.2em;
    padding: 0 var(--gutter);
}
.hero-banner img{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center top;
}

.page-hero{ padding-bottom: 8px; margin-bottom: 2.6em; }
.page-hero h1{ margin: 0; max-width: none; }
.page-hero .page-meta{
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px solid var(--coral);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}


/* ---------------------------------------------------------------- *
 * Body content
 * ---------------------------------------------------------------- */

/* The readable column shares its left edge with the masthead and hero rather
 * than being centred on its own, so the whole page sits on one grid.
 * On viewports narrower than --maxw this collapses to a plain gutter. */
h2, h3, h4,
p, ul, table{
    max-width: var(--readw);
    margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
    margin-right: var(--gutter);
}

h2, h3, h4{
    font-family: var(--display);
    font-weight: var(--display-weight);
    color: var(--coral-deep);
    text-transform: uppercase;
    line-height: 1.02;
    margin-top: 2em;
    margin-bottom: 0.7em;
    clear: left;
}
h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink); }
h4{ font-size: 1.3rem; }

p, ul{ margin-bottom: 1.4em; }
ul li{ margin-bottom: 0.5em; }


/* ---------------------------------------------------------------- *
 * Program tables
 * ---------------------------------------------------------------- */

/* Tables don't fill their containing block on `width:auto` the way blocks do,
 * so give them 100% and clamp it -- including for the margins on narrow screens. */
table{
    width: 100%;
    max-width: min(var(--readw), calc(100% - 2 * var(--gutter)));
    border-collapse: collapse;
    border-top: 1px solid var(--rule);
}
th, td{ text-align: left; }

/* Sits in the gap between two consecutive talks and stands in for the ten
 * minutes between them, so it carries no time of its own -- the gap is the
 * time. Indented to the title column so it reads down the same edge. */
p.interlude{
    margin-bottom: 0;
    padding: 9px 0 9px 148px;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

td.date{
    width: 148px;
    white-space: nowrap;
    vertical-align: top;
    padding: 20px 22px 20px 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
td.title{
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1.05;
    color: var(--coral-deep);
    vertical-align: top;
    padding: 16px 0 6px;
}
/* Meals and breaks: same size as a talk title, held back by colour alone. */
td.title-special{
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    vertical-align: top;
    padding: 16px 0 6px;
}
td.speaker{ font-style: italic; color: var(--ink-soft); padding: 0 0 6px; }
td.abstract{ padding: 0 0 20px; }
td.abstract img{ display: block; margin: 8px auto 12px; max-width: 100%; }
td.room{
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--ink-soft);
    padding: 14px 0 6px;
}


/* ---------------------------------------------------------------- *
 * Embeds, images, sponsor and flyer grids
 * ---------------------------------------------------------------- */

/* Embeds and figures sit on the same left edge as the readable column. */
iframe.registration, iframe.directions, img.center{
    display: block;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
    margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
    margin-right: var(--gutter);
    width: auto;
}
iframe.registration{ max-width: 700px; height: 1400px; }
iframe.directions{ max-width: var(--readw); height: 420px; }
img.center{ max-width: 640px; }

table.sponsors, table.flyers{ border-top: 0; margin-top: 2em; margin-bottom: 2em; }
td.sponsor, td.flyer{ text-align: center; vertical-align: middle; padding: 0 14px; }
td.sponsor img, td.flyer img{ max-width: 100%; height: auto; }


/* ---------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------- */

.site-footer{ background: var(--ink); color: var(--ground); margin-top: auto; padding-top: 4em; }
.footer-inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 54px var(--gutter);
}
.footer-name{
    font-family: var(--display);
    font-weight: var(--display-weight);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.05;
}
.footer-meta{ margin-top: 10px; font-size: 0.95rem; opacity: 0.85; }
.footer-credit{ margin-top: 26px; font-size: 0.8rem; opacity: 0.65; }
.site-footer a{ color: var(--ground); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--coral); opacity: 1; }


/* ---------------------------------------------------------------- *
 * Narrow screens
 * ---------------------------------------------------------------- */

@media only screen and (max-width: 860px){
    :root{ --gutter: 22px; }
    body{ font-size: 17px; }

    .topbar-inner{ display: none; }
    .menu-toggle{ display: flex; }

    .logo{ font-size: 1.6rem; }
    .btn-pill{ padding: 11px 22px; font-size: 1rem; }

    .hero-foot{ flex-direction: column; align-items: flex-start; gap: 34px; padding-bottom: 48px; }
    .date-badge{ width: 190px; height: 190px; }
    .date-badge .month{ font-size: 1.4rem; }
    .date-badge .days{ font-size: 3.1rem; }

    .hero-banner{ margin-bottom: 2.4em; }

    td.date{ width: auto; display: block; padding: 18px 0 2px; }
    td.title, td.title-special, td.speaker, td.abstract{ display: block; padding-left: 0; }
    td.title{ padding-top: 0; }
    tr{ display: block; }

    /* The time column collapses here, so the interlude loses its indent too. */
    p.interlude{ padding-left: 0; }
}