/* =========================================================================
   airhacks.university — Architect-Grade Java with LLMs
   Palette inherited from airhacks.live (orange #F07102, cyan #3EB0D8),
   recomposed for the in-person edition: orange-led, perforated rules,
   indexed agenda. No JS, no dependencies. Baseline 2025.
   ========================================================================= */

:root {
    /* --- airhacks brand palette ------------------------------------------ */
    --brand-orange:      #F07102;
    --brand-orange-deep: #c25a00;
    --brand-cyan:        #3EB0D8;
    --brand-cyan-deep:   #2a8aab;

    --ink:        #2b2b2b;
    --ink-soft:   #525252;
    --paper:      #ffffff;
    --paper-warm: #fbf6ee;
    --rule:       #e6dfd2;
    --rule-strong:#bdb4a3;

    --shadow-soft: 0 1px 0 rgba(0,0,0,.04),
                   0 14px 36px -20px rgba(0,0,0,.18);

    /* --- typography ------------------------------------------------------ */
    --serif: Georgia, "Iowan Old Style", "Hoefler Text", "Times New Roman", serif;
    --sans:  "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
    --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --measure: 64ch;
    --gutter:  clamp(1.25rem, 4vw, 3rem);
    --frame:   1080px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #14110d;
        --paper-warm:   #1c1813;
        --ink:          #f3ede2;
        --ink-soft:     #c4baa8;
        --rule:         #2a2520;
        --rule-strong:  #44392f;
        --brand-orange:      #ff8a2a;
        --brand-orange-deep: #ffa75a;
        --brand-cyan:        #62c8e8;
        --brand-cyan-deep:   #9adcef;
        color-scheme: dark;
    }
}

/* =========================================================================
   RESET
   ========================================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--sans);
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    min-block-size: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Boarding-pass header: orange runway over cyan strip, fixed to top */
    background-image:
        linear-gradient(
            180deg,
            var(--brand-orange) 0,
            var(--brand-orange) 6px,
            var(--brand-cyan)   6px,
            var(--brand-cyan)   10px,
            transparent         10px
        );
    background-repeat: no-repeat;
    background-size: 100% 10px;
    background-attachment: fixed;
}

::selection {
    background: var(--brand-orange);
    color: var(--paper);
}

/* =========================================================================
   SKIP LINK
   ========================================================================= */

.skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    background: var(--ink);
    color: var(--paper);
    padding: 0.55rem 1rem;
    text-decoration: none;
    z-index: 100;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.skip-link:focus-visible {
    inset-block-start: 1.25rem;
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
}

/* =========================================================================
   PAGE FRAME
   ========================================================================= */

body > .masthead,
body > main,
body > footer {
    max-inline-size: var(--frame);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* =========================================================================
   MASTHEAD  —  site-level brand banner
   ========================================================================= */

.masthead {
    padding-block: clamp(1.1rem, 2vw, 1.6rem);
    border-block-end: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wordmark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 0.6vw + 1rem, 1.4rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    transition: color 200ms ease;
}

.wordmark__lede {
    color: var(--brand-orange);
}

.wordmark__dot {
    color: var(--brand-cyan);
    font-style: normal;
    margin-inline: 0.04em;
    transform: translateY(-0.05em);
}

.wordmark__tail {
    color: var(--ink);
}

.wordmark:hover .wordmark__tail,
.wordmark:focus-visible .wordmark__tail {
    color: var(--brand-orange);
}

@media (prefers-color-scheme: dark) {
    .wordmark__tail { color: var(--ink); }
}

/* =========================================================================
   EVENT HEADER  /  H1
   ========================================================================= */

.event-head {
    padding-block-start: clamp(3rem, 7vw, 6rem);
    padding-block-end:   clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    border-block-end: 1px dashed var(--rule-strong);
}

/* Twin brand bars — orange + cyan, airhacks family signal */
.event-head::before {
    content: "";
    display: block;
    inline-size: clamp(80px, 14vw, 140px);
    block-size: 6px;
    background:
        linear-gradient(90deg,
            var(--brand-orange) 0 50%,
            var(--brand-cyan)   50% 100%);
    margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
}

h1 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.75rem, 8vw + 0.25rem, 6.75rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--brand-cyan);
    max-inline-size: 16ch;
    text-wrap: balance;
    text-shadow:
        2px 2px 0 var(--paper),
        3px 3px 0 var(--brand-orange);
}

@media (prefers-color-scheme: dark) {
    h1 {
        text-shadow:
            2px 2px 0 var(--paper),
            3px 3px 0 var(--brand-orange-deep);
    }
}

@media (prefers-reduced-motion: reduce) {
    h1 { text-shadow: 1px 1px 0 var(--brand-orange); }
}

/* --- Kicker (eyebrow above h1) -------------------------------------------- */

.kicker {
    font-family: var(--mono);
    font-size: clamp(0.72rem, 0.3vw + 0.65rem, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-orange);
    margin-block-end: clamp(0.9rem, 1.8vw, 1.4rem);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
}

.kicker::before {
    content: "";
    inline-size: 1.8em;
    block-size: 2px;
    background: var(--brand-orange);
    flex-shrink: 0;
}

/* --- Tagline --------------------------------------------------------------- */

.tagline {
    margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 0.8vw + 1rem, 1.6rem);
    line-height: 1.35;
    color: var(--ink-soft);
    max-inline-size: 38ch;
    text-wrap: balance;
}

.tagline::first-letter {
    color: var(--brand-orange);
}

/* --- Aphorism (pull-quote between header and agenda) ---------------------- */

.aphorism {
    margin-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
    padding-block: clamp(0.75rem, 1.5vw, 1.25rem);
}

.aphorism > * {
    max-inline-size: 56ch;
}

.aphorism blockquote {
    position: relative;
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
    border-inline-start: 3px solid var(--brand-orange);
}

.aphorism blockquote::before {
    content: "“";
    position: absolute;
    inset-inline-start: clamp(0.4rem, 1vw, 0.9rem);
    inset-block-start: -0.35em;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
    line-height: 1;
    color: var(--brand-cyan);
    pointer-events: none;
}

.aphorism blockquote p {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 1.4vw + 1rem, 2rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}

.aphorism .attribution {
    margin-block-start: clamp(0.9rem, 1.5vw, 1.4rem);
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.aphorism cite {
    font-style: normal;
    color: var(--brand-cyan);
    font-weight: 700;
}

.aphorism .attribution a {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid currentColor;
    transition: color 200ms ease;
}

.aphorism .attribution a:hover,
.aphorism .attribution a:focus-visible {
    color: var(--brand-orange);
}

/* --- Event dossier (date · time · location) -------------------------------- */

.dossier {
    margin-block-start: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-block: clamp(1.25rem, 2vw, 1.75rem);
    border-block-start: 1px solid var(--rule);
    border-block-end: 1px solid var(--rule);
}

@media (min-width: 640px) {
    .dossier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 3rem);
    }
}

@media (min-width: 960px) {
    .dossier {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 clamp(1.5rem, 3vw, 2.5rem);
    }
}

.dossier > div {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-inline-size: 0;
}

.dossier dt {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-cyan);
}

.dossier dd {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 0.7vw + 1rem, 1.55rem);
    line-height: 1.2;
    color: var(--ink);
    font-style: italic;
    font-weight: 400;
    text-wrap: balance;
}

.dossier time {
    font-style: italic;
}

.dossier small {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-orange);
    margin-inline-start: 0.5em;
    vertical-align: 0.18em;
}

.dossier .includes {
    display: block;
    margin-block-start: 0.4rem;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--brand-cyan);
    letter-spacing: 0;
    text-transform: none;
}

/* --- Notice (scarcity / limited-seating callout) -------------------------- */

.notice {
    margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.55rem 0.9rem 0.55rem 0.75rem;
    background: var(--paper-warm);
    border-inline-start: 3px solid var(--brand-orange);
    font-family: var(--mono);
    font-size: clamp(0.7rem, 0.25vw + 0.66rem, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
}

.notice::before {
    content: "";
    inline-size: 0.55rem;
    block-size: 0.55rem;
    background: var(--brand-orange);
    border-radius: 50%;
    flex-shrink: 0;
    animation: notice-pulse 2.4s ease-in-out infinite;
}

@keyframes notice-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.78); }
}

@media (prefers-reduced-motion: reduce) {
    .notice::before { animation: none; }
}

/* Schema.org meta tags should remain invisible even if surfaced */
meta,
[hidden] {
    display: none;
}

/* =========================================================================
   MAIN  /  SECTION  /  H2
   ========================================================================= */

main {
    padding-block-end: clamp(3rem, 6vw, 5.5rem);
}

article > section {
    padding-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
    container-type: inline-size;
}

main h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.5rem, 1.8vw + 1rem, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-block-end: clamp(2rem, 4vw, 3rem);
    padding-block-end: 0.6rem;
    border-block-end: 3px solid var(--brand-orange);
    display: inline-block;
}

/* --- Prose (Format section, future text blocks) --------------------------- */

article section p {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 0.45vw + 1rem, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-inline-size: var(--measure);
}

article section p + p {
    margin-block-start: clamp(0.9rem, 1.5vw, 1.25rem);
}

article section p strong {
    color: var(--ink);
    font-weight: 600;
}

article section p em {
    font-style: italic;
    color: var(--brand-orange);
}

/* --- Register CTA --------------------------------------------------------- */

.register p {
    margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.95rem 1.55rem;
    background: var(--brand-orange);
    color: var(--paper);
    font-family: var(--mono);
    font-size: clamp(0.8rem, 0.25vw + 0.76rem, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--brand-orange);
    box-shadow: 4px 4px 0 var(--brand-cyan);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 220ms ease,
                background 220ms ease;
    will-change: transform;
}

.cta:hover,
.cta:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--brand-cyan);
}

.cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--brand-cyan);
}

.cta__arrow {
    display: inline-block;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}

.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow {
    transform: translateX(4px);
}

@media (prefers-color-scheme: dark) {
    .cta {
        color: #14110d;
    }
}

/* =========================================================================
   AGENDA LIST  —  decimal-leading-zero counters
   ========================================================================= */

main ul {
    list-style: none;
    counter-reset: agenda;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    border-block-start: 1px solid var(--rule);
}

@container (min-width: 720px) {
    main ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

main li {
    counter-increment: agenda;
    position: relative;
    padding-block: 1rem;
    padding-inline-start: 3.75rem;
    padding-inline-end: 0.25rem;
    border-block-end: 1px solid var(--rule);
    font-size: clamp(1rem, 0.3vw + 0.95rem, 1.1rem);
    line-height: 1.5;
    color: var(--ink);
    transition: background-color 220ms ease,
                padding-inline-start 220ms ease,
                color 220ms ease;
}

main li::before {
    content: counter(agenda, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brand-orange);
    line-height: 1.55;
    padding-block-start: 0.05rem;
}

main li::after {
    content: "";
    position: absolute;
    inset-inline-start: 2.6rem;
    inset-block-start: 1.4rem;
    inline-size: 0.6rem;
    block-size: 1px;
    background: var(--brand-cyan);
}

main li:hover {
    background: var(--paper-warm);
    padding-inline-start: 4rem;
    color: var(--ink);
}

main li:hover::before {
    color: var(--brand-orange-deep);
}

/* =========================================================================
   FOOTER  /  ADDRESS  —  rendered as a registration stamp
   ========================================================================= */

body > footer {
    padding-block: clamp(3rem, 5vw, 4.5rem);
    margin-block-start: clamp(2rem, 4vw, 3rem);
    border-block-start: 1px dashed var(--rule-strong);
}

footer address {
    font-style: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.footer-stamp {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: inline-block;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--brand-cyan);
    box-shadow: 3px 3px 0 var(--brand-orange);
    background: var(--paper);
}

.byline {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.1rem);
    color: var(--ink-soft);
}

.byline a {
    color: var(--ink);
    text-decoration: none;
    border-block-end: 2px solid var(--brand-cyan);
    padding-block-end: 1px;
    transition: color 200ms ease, border-color 200ms ease;
}

.byline a:hover,
.byline a:focus-visible {
    color: var(--brand-orange);
    border-block-end-color: var(--brand-orange);
}

/* =========================================================================
   FOCUS  &  MOTION
   ========================================================================= */

:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
    body {
        background: var(--paper);
        color: #000;
    }
    h1 { color: #000; text-shadow: none; }
    main li:hover { background: transparent; padding-inline-start: 3.75rem; }
    .skip-link { display: none; }
}