/* ========================================================= New Media Week — main stylesheet Desktop-first (1512px reference). Mobile fallback at end. ========================================================= */ /* ---------- Tokens --------------------------------------- */ :root { /* Display / brand — heavy headlines, hero, marquee italic. */ --font-display: "GT Mechanik Poly", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* UI / body — semi-monospaced, used for nav, paragraphs, forms. */ --font-sans: "GT Mechanik Semi", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Mono — counters, eyebrows, tiny caps captions. */ --font-mono: "GT Mechanik Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Italic large display ("Adaptive Breathing") uses Poly Oblique. */ --font-serif: var(--font-display); --color-bg: #ffffff; --color-fg: #000000; --color-accent: #F97827; /* official brand orange — only one we use */ --color-line: #000000; --color-muted: #6b6b6b; --rule: 1px; /* Grid: 6 columns of 250px + 12px gutters at 1512px viewport. */ --col-w: 250px; --gutter: 12px; --container-max: 1488px; /* 1512 - 12*2 */ --container-pad: 12px; /* Type scale, desktop */ --fs-hero-display: clamp(96px, 11vw, 180px); --fs-hero-numeral: clamp(360px, 56vw, 900px); --fs-nav: 32px; --fs-nav-large: 40px; --fs-meta: 18px; --fs-tiny: 11px; --fs-body: 16px; --fs-h1: 80px; --fs-h2: 48px; --lh-tight: 0.95; --lh-snug: 1.1; --lh-body: 1.45; } /* ---------- Reset ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; min-height: 100dvh; /* respects mobile chrome bars */ display: flex; flex-direction: column; } .site-header { flex-shrink: 0; } .site-main { flex: 1 0 auto; } /* pushes footer to viewport bottom */ .site-footer { flex-shrink: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; background: #000; color: #fff; padding: 8px 12px; z-index: 1000; } /* ---------- Container ------------------------------------ */ .container { margin-inline: auto; max-width: var(--container-max); padding-inline: var(--container-pad); } .container--default { padding-block: 80px; max-width: 760px; /* comfortable reading width for prose pages */ } .container--default h1, .container--default .entry-title { font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 56px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 32px; } .container--default p { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; margin: 0 0 1.2em; } .container--default p strong { font-weight: 700; } .container--default a { text-decoration: underline; } /* ---------- Site header ---------------------------------- Light grey card sitting on top of the page. Matches MacBook Pro 16" v2 design: pale background, orange logo box on the left, social caps on the right, primary nav on a thin line below. Fixed on desktop so it stays pinned during scroll; layout reserves --nmw-header-h on as padding-top so content doesn't slide under it. */ .site-header { background: #d9d9d9; color: var(--color-fg); position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: padding 0.2s ease-out; } .site-header a { color: inherit; } .site-header > .site-header__row { position: relative; z-index: 1; } body { padding-top: var(--nmw-header-h, 172px); } /* Top of the header is a 2-column grid: orange logo box | grey panel. The orange box is full-height (spans both rows of the panel), the grey panel stacks brand + meta rows. */ .site-header__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; } .site-header__logo { display: inline-flex; align-items: stretch; font-family: var(--font-display); font-weight: 700; line-height: 1; white-space: nowrap; } .site-header__logo:hover { text-decoration: none; } .site-header__logo-mark { position: relative; /* anchor for the absolutely-positioned Lottie SVG */ display: inline-flex; align-items: center; justify-content: center; width: 275px; align-self: stretch; /* fill the full height of brand + meta rows */ background: var(--color-accent); color: var(--color-fg); flex-shrink: 0; overflow: hidden; } /* Take Lottie's out of flow so its natural 1920×960 viewBox doesn't force the box to grow taller than the panel beside it. */ .site-header__logo-mark svg, .site-header__logo-mark canvas, .site-header__logo-still { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; object-fit: contain; } .site-header__panel { background: #d9d9d9; color: var(--color-fg); display: flex; flex-direction: column; } .site-header__panel .site-header__row { padding-inline: 5px; } /* Row scaffolding inside the grey panel */ .site-header__row { display: grid; align-items: center; gap: 0; } /* Row 1 — brand word + theme + social + (mobile) toggle */ .site-header__row--brand { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; min-height: 80px; } .site-header__logo-word { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--color-fg); display: inline-block; } /* Desktop: show text, hide image. Mobile (in the @media block below): swap. */ .site-header__logo-word-text { display: inline; } .site-header__logo-word-img { display: none; } /* Static italic theme name, centred between brand and social */ .site-header__theme { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -0.01em; color: var(--color-fg); text-align: center; white-space: nowrap; justify-self: center; } .site-header__social { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; line-height: 1.5; color: var(--color-fg); } .site-header__social .nav { display: flex; flex-direction: column; } .site-header__toggle { display: none; background: transparent; border: 0; color: var(--color-fg); padding: 8px; cursor: pointer; } .site-header__toggle-bars { display: inline-flex; flex-direction: column; justify-content: space-between; width: 28px; height: 18px; } .site-header__toggle-bars span { height: 2px; background: currentColor; width: 100%; } /* Row 2 — dates + lang */ .site-header__row--meta { grid-template-columns: 1fr auto 1fr; min-height: 38px; border-top: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-fg); } .site-header__row--meta::before { content: ""; } .site-header__dates { text-align: center; } .site-header__lang { text-align: right; } .site-header__lang a:hover { text-decoration: underline; } .site-header__lang strong { font-weight: 900; } /* Row 3 — primary nav. Black bar with white labels, mirroring the permanent bottom nav so the page is visually framed top + bottom. */ .site-header__row--nav { min-height: 56px; display: block; padding-block: 0; background: var(--color-fg); color: #fff; border-top: 0; } .site-header__row--nav .nav { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 56px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.01em; color: #fff; padding-inline: clamp(16px, 2vw, 32px); } .site-header__row--nav .nav li { padding-inline: 0; } .site-header__row--nav .nav li:nth-child(2), .site-header__row--nav .nav li:nth-child(3) { text-align: center; } .site-header__row--nav .nav li:last-child { text-align: right; } .site-header__row--nav .nav a:hover { text-decoration: underline; } /* Inactive nav links (top primary + bottom footer) — labels softened and pointer cursor disabled so they read as "not clickable yet". */ .site-header__row--nav .nav a[href="#"], .site-header__row--nav .nav a[href$="#"], .site-footer__nav .nav a[href="#"], .site-footer__nav .nav a[href$="#"] { color: rgba(255,255,255,0.45); cursor: default; pointer-events: none; } /* Sticky narrow state: when the page scrolls past the header height, the brand row collapses to ~52px and meta/nav rows hide, leaving a compact bar with logo + marquee. */ .site-header { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } /* ---------- Mobile menu (full-screen overlay) ----------- Slides in from the right with a smooth ease-out curve. The curve has a tiny overshoot baked in (cubic-bezier 0.22, 1, 0.36, 1 is "ease out quint" — feels gentle rather than bouncy/kitsch). Children fade up with a subtle stagger so the overlay reads like one motion. */ .mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--color-accent); color: var(--color-fg); overflow-y: auto; padding: 16px var(--container-pad) 32px; display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); visibility: hidden; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.55s; will-change: transform; } .mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } /* Stagger the inner sections so they catch up after the panel arrives. Pure CSS — no JS needed. */ .mobile-menu > * { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-menu.is-open > * { opacity: 1; transform: translateY(0); } .mobile-menu.is-open > *:nth-child(1) { transition-delay: 0.18s; } .mobile-menu.is-open > *:nth-child(2) { transition-delay: 0.24s; } .mobile-menu.is-open > *:nth-child(3) { transition-delay: 0.30s; } .mobile-menu.is-open > *:nth-child(4) { transition-delay: 0.36s; } .mobile-menu.is-open > *:nth-child(5) { transition-delay: 0.42s; } .mobile-menu.is-open > *:nth-child(6) { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu > * { transition: none; transform: none; } .mobile-menu { visibility: hidden; } .mobile-menu.is-open { visibility: visible; } } .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mobile-menu__logo { display: inline-flex; align-items: center; color: var(--color-fg); max-width: calc(100% - 56px); } .mobile-menu__logo:hover { text-decoration: none; } .mobile-menu__logo svg { display: block; width: 100%; height: auto; max-height: 32px; } .mobile-menu__close { background: transparent; border: 0; color: inherit; width: 36px; height: 36px; padding: 4px; cursor: pointer; } .mobile-menu__close svg { width: 100%; height: 100%; } .mobile-menu__dates { margin: -8px 0 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .mobile-menu__lang { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .mobile-menu__lang strong { font-weight: 900; } .mobile-menu__group { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -0.01em; } .mobile-menu__group--social { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .mobile-menu__group .nav { display: flex; flex-direction: column; gap: 6px; } .mobile-menu__group a:hover { text-decoration: underline; } /* Two-column block anchored to the bottom of the mobile menu */ .mobile-menu__bottom { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .mobile-menu__col .nav { display: flex; flex-direction: column; gap: 6px; } .mobile-menu__col a { color: inherit; } .mobile-menu__col a:hover { text-decoration: underline; } /* Lock body scroll while menu is open */ body.is-menu-open { overflow: hidden; } /* ---------- Mobile bar ---------- Above 900px the bar is hidden and the desktop header (orange box + grey panel + black nav) is in charge. Below, the desktop pieces are hidden and a single grey strip is shown with the inline logo SVG and a hamburger toggle. */ .site-header__mobile { display: none; background: #d9d9d9; color: var(--color-fg); padding: 12px 16px; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; } .site-header__mobile-logo { display: block; flex: 1 1 auto; color: var(--color-fg); min-width: 0; } .site-header__mobile-logo svg, .site-header__mobile-logo img { display: block; width: 100%; height: auto; } .site-header__mobile-toggle { background: transparent; border: 0; color: var(--color-fg); padding: 8px; cursor: pointer; flex-shrink: 0; } .site-header__mobile-toggle-bars { display: inline-flex; flex-direction: column; justify-content: space-between; width: 28px; height: 18px; } .site-header__mobile-toggle-bars span { height: 2px; background: currentColor; width: 100%; } /* ---- Mobile header layout ---- Default state: big orange logo box + grey "New Media Week" strip stacked in the page flow (not fixed). Hamburger floats over the orange box. On scroll past the big header, .site-header gets .is-stuck and we swap to the compact grey bar (.site-header__mobile, fixed to viewport). */ @media (max-width: 900px) { .site-header { position: relative; /* not fixed: scrolls with the page */ box-shadow: none; } body { padding-top: 0; } .site-header__mobile { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 60; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .site-header.is-stuck .site-header__mobile { display: flex; } /* Big layout — orange box stacked above grey strip */ .site-header__top { display: flex; flex-direction: column; position: relative; } .site-header__logo { width: 100%; } .site-header__logo-mark { width: 100%; height: auto; aspect-ratio: 16 / 9; align-self: auto; } .site-header__panel { width: 100%; } .site-header__row--brand { grid-template-columns: 1fr; min-height: auto; padding: 6px 12px; } /* On mobile the wordmark becomes a full-width SVG image */ .site-header__logo-word { display: block; width: 100%; font-size: 0; /* hide any leftover whitespace */ } .site-header__logo-word-text { display: none; } .site-header__logo-word-img { display: block; width: 100%; height: auto; } .site-header__theme, .site-header__social { display: none; } .site-header__row--meta { display: none; } .site-header__row--nav { display: none; } /* Hamburger floats over the orange box, top-right */ .site-header__toggle { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 5; background: transparent; color: var(--color-fg); } } /* ---------- Site footer ---------------------------------- */ .site-footer { border-top: var(--rule) solid var(--color-line); background: var(--color-fg); color: var(--color-bg); } /* "Partners" full-bleed black bar — same styling as the News + Newsletter bars so all three section labels look consistent across the home page. */ .site-footer__partners-label { background: #000; color: #fff; padding: 18px var(--container-pad); font-family: var(--font-sans); /* GT Mechanik Semi Trial */ font-weight: 700; font-size: 24px; line-height: 23px; letter-spacing: 0; } /* Sponsor strip — full-bleed image rendered 100% width on a brown band */ .site-footer__sponsors { display: block; width: 100%; background: #77593A; line-height: 0; /* removes the inline-image baseline gap */ } .site-footer__sponsors picture { display: block; width: 100%; } .site-footer__sponsors-img { display: block; width: 100%; height: auto; } .site-footer__partners-cta { line-height: 1.4; /* reset the 0 from .site-footer__sponsors */ margin: 0; padding: 18px var(--container-pad) 24px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: #fff; text-align: center; } .site-footer__partners-cta a { color: #fff; text-decoration: underline; } /* Legal strip — small 4-up links */ .site-footer__legal { background: var(--color-fg); color: #fff; padding: 16px var(--container-pad); border-bottom: 1px solid rgba(255,255,255,0.08); } .site-footer__legal .nav { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; color: rgba(255,255,255,0.85); } .site-footer__legal .nav a:hover { color: #fff; text-decoration: underline; } /* Bottom nav strip — temporarily hidden. To re-enable, swap `display: none` for the original fixed-positioning block below. */ .site-footer__nav { display: none; } /* When re-enabling, also restore: .site-footer__nav { position: fixed; inset: auto 0 0; z-index: 70; background: var(--color-fg); color: #fff; padding-inline: var(--container-pad); } body { padding-bottom: 56px; } @media (max-width: 900px) { body { padding-bottom: 52px; } } */ .site-footer__nav .nav { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 56px; font-family: var(--font-display); font-size: var(--fs-nav); font-weight: 700; letter-spacing: -0.01em; } .site-footer__nav .nav li:nth-child(2) { text-align: center; } .site-footer__nav .nav li:nth-child(3) { text-align: center; } .site-footer__nav .nav li:last-child { text-align: right; } /* ---------- Hero / front page ---------------------------- */ .hero--home { position: relative; background: var(--color-accent); color: var(--color-fg); padding: 0 var(--container-pad); min-height: 720px; height: calc(100svh - 188px); /* sticky header (~140) + nav (44) */ max-height: 880px; overflow: hidden; } .hero__date { position: relative; z-index: 2; padding: 24px 0 0; font-weight: 700; font-size: var(--fs-meta); letter-spacing: 0.02em; } .hero__numeral { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: var(--fs-hero-numeral); font-weight: 900; line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--color-fg); text-stroke: 2px var(--color-fg); pointer-events: none; user-select: none; z-index: 1; } .hero__lockup { position: relative; z-index: 3; padding: 60px 0 120px; } .hero__title { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-display); font-size: var(--fs-hero-display); line-height: 0.92; } .hero__title-row { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .hero__title-row--top { justify-content: flex-start; } .hero__title-row--bottom { justify-content: space-between; } .hero__nmw { font-weight: 900; letter-spacing: -0.04em; } .hero__theme { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 0.95; text-align: right; font-size: 0.85em; } /* Hero image fills the entire section as a background layer; the lockup sits on top via z-index. */ .hero__image { position: absolute; inset: 0; margin: 0; z-index: 1; } .hero__image img, .hero__image-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__image-placeholder { background: rgba(0,0,0,0.15); } /* ---------- Home pull-quote ------------------------------ Frame 13 spec: white background, black uppercase headline. The "read curatorial statement" line below is a much smaller eyebrow. Generous vertical padding keeps the text away from the pinned hero strip when it detaches at the bottom of the second hero. */ .home-quote { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(48px, 7vw, 96px) 15px; background: #ffffff; color: #000000; } @media (max-width: 900px) { .home-quote { padding: 64px 20px; } } .home-quote__text { display: block; width: 100%; max-width: 1485px; margin: 0; font-family: var(--font-sans); /* GT Mechanik Semi */ font-weight: 900; font-size: clamp(28px, 3.8vw, 57px); line-height: 1; /* 100% */ letter-spacing: -0.02em; text-align: center; text-transform: uppercase; color: #000000; text-decoration: none; } .home-quote__text:hover { text-decoration: none; } /* "Read Curatorial Statement" — small eyebrow under the headline, sentence-cased, mono, much smaller than the title above. */ .home-quote__cta { display: block; margin-top: clamp(20px, 2vw, 32px); font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: #000000; transition: color 0.15s; } .home-quote__text:hover .home-quote__cta { color: var(--color-accent); } /* ---------- Open Call layout ----------------------------- Brown ambient page background; the body content sits on a white card that spans the full inner width minus the sidebar gutters. */ .open-call-page { background: #6b4d2e; /* warm brown — frame 8/9 */ color: var(--color-fg); padding: 0; } .open-call { display: grid; grid-template-columns: minmax(0, 200px) 1fr minmax(0, 200px); column-gap: 0; padding: 0; max-width: none; margin: 0; min-height: 70vh; color: #fff; } .open-call__sidebar { padding: 32px clamp(16px, 1.6vw, 24px); } .open-call__sidebar { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 2.2; color: #fff; } .open-call__sidebar a:hover { text-decoration: underline; } .open-call__sidebar .is-current { text-decoration: underline; } /* White card holding the actual narrative — fills the full middle column, text lives in a centred inner wrapper so reading width stays comfortable. */ .open-call__main { background: #fff; color: var(--color-fg); padding: 56px clamp(40px, 6vw, 96px) 72px; width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; } /* Card content is full-width by default; individual narrative blocks opt into a narrower reading width. Wider components (jury, faq, form, regulations) inherit the full inner width of the card. */ .open-call__main > * { margin-inline: auto; } .open-call__main > .open-call__title { max-width: 720px; } .open-call__main > .open-call__deadline { max-width: 720px; } .open-call__main > .open-call__body { max-width: 600px; } .open-call__title { text-align: center; margin-bottom: 8px; } .open-call__title-display, .open-call__title-theme { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; display: block; font-size: clamp(44px, 5.4vw, 72px); } .open-call__deadline { text-align: center; font-weight: 700; font-size: var(--fs-meta); margin: 0 0 64px; } .open-call__body { font-size: var(--fs-body); line-height: 1.5; } .open-call__body p { margin: 0 0 1.2em; } .open-call__body p:last-child { margin-bottom: 0; } .open-call__body strong { font-weight: 800; } .open-call__body ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1.2em; } .open-call__body ol > li { margin-bottom: 0.8em; } .open-call__body ol > li > span { display: block; } .open-call__section-label { display: block; text-align: center; font-size: var(--fs-tiny); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 48px 0 24px; } .open-call__deco { width: 100%; height: 200px; color: var(--color-fg); display: flex; align-items: flex-start; } .open-call__deco--right { justify-content: flex-end; } .open-call__deco svg { width: 80%; height: 100%; color: rgba(255,255,255,0.7); } /* Regulations placeholder section between submission form and jury */ .open-call__regulations { margin: 80px 0 0; padding-top: 32px; border-top: 1px solid rgba(0,0,0,0.16); text-align: center; } .open-call__regulations-title { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 24px; } .open-call__regulations-title a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.15s, color 0.15s; } .open-call__regulations-title a:hover { color: var(--color-accent); border-bottom-color: currentColor; } .open-call__regulations-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; max-width: 600px; margin-inline: auto; } .open-call__regulations-link { display: inline-block; margin-top: 8px; padding: 12px 28px; background: var(--color-fg); color: #fff; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.15s; } .open-call__regulations-link:hover { background: var(--color-accent); color: var(--color-fg); } /* Submission form sits inside the open-call white card and intentionally spans the FULL inner width — the surrounding narrative is capped at 600px, but the form needs every column it can get. */ .open-call__form-anchor { max-width: none !important; width: 100%; margin: 64px 0 0; padding: 32px 0 0; border-top: 1px solid rgba(0,0,0,0.16); } .open-call__form-anchor .submission { max-width: none; width: 100%; margin: 0; padding: 0; background: transparent; box-shadow: none; } /* Form internals (stepper / panels / submit) keep their own paddings, but their container should not impose a narrower reading width here. */ .open-call__form-anchor .submission-form, .open-call__form-anchor .submission-form__panel, .open-call__form-anchor .submission-form__grid { max-width: none; width: 100%; } .open-call__extra { grid-column: 1 / -1; max-width: 720px; margin: 32px auto 0; } /* ---------- Generic content ------------------------------ */ .page-title { font-size: var(--fs-h1); margin-bottom: 32px; letter-spacing: -0.03em; } .post-list__item { padding-block: 24px; border-bottom: var(--rule) solid var(--color-line); } .post-list__item h2 { font-size: var(--fs-h2); margin-bottom: 8px; } /* "Coming soon" placeholder for routes that exist but have no content yet */ .empty-state { text-align: center; padding: 96px 24px; max-width: 640px; margin-inline: auto; } .empty-state__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; } .empty-state__sub { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin: 0; } /* ---------- Editor / WP injected -------------------------- */ .alignwide { max-width: 1280px; margin-inline: auto; } .alignfull { max-width: 100%; } /* ---------- Mobile fallback ---------------- */ @media (max-width: 900px) { body { font-size: 15px; } .site-footer__nav .nav { font-size: 18px; } /* Hero spans the full mobile viewport with the photo as the background. Sits AFTER the desktop .hero--home rule so it actually wins the cascade. */ .hero--home { min-height: 0; height: calc(100svh - 56px - 52px); /* 56 mobile header + 52 fixed footer */ max-height: none; background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero--home .hero__image { display: none; } .hero__lockup { padding: 32px 0 64px; } .hero__title { font-size: clamp(48px, 12vw, 96px); } .hero__numeral { font-size: clamp(280px, 80vw, 600px); } .open-call { grid-template-columns: minmax(0, 1fr); /* min:0 lets sidebar's overflow-x:auto actually clip instead of stretching the grid column wider than the viewport */ padding: 0 var(--container-pad) 32px; } /* Mobile: full white page (no brown surround), side nav becomes a horizontally-scrolling strip across the top with swipe. */ .open-call-page { background: #fff; } .open-call { color: #000; } .open-call__sidebar { display: block; padding: 0; margin-bottom: 24px; background: #fff; min-width: 0; max-width: 100%; overflow: hidden; /* hard guard so items can never push the sidebar (and the page) wider than the viewport; horizontal scroll lives on the inner