/* ============================================================ Thomas Arendt — portfolio site Token system ============================================================ */ :root { --paper: #ECEAE2; --paper-raised: #F4F2EA; --ink: #1C1B17; --mute: #847F70; --line: #D6D2C4; --accent: #2F4538; --accent-soft: #4C6356; --display: "Newsreader", Georgia, serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --gap: clamp(1rem, 2.5vw, 2.25rem); --side: clamp(1.25rem, 5vw, 4rem); --maxw: 1240px; } * { box-sizing: border-box; } button { font: inherit; line-height: inherit; color: inherit; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: 0.005em; } p { margin: 0 0 1em; } ::selection { background: var(--accent); color: var(--paper); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------------------------------------------------------- Language toggling — bilingual content lives side by side, visibility controlled by a class on . ---------------------------------------------------------- */ html.lang-da [data-en] { display: none; } html.lang-en [data-da] { display: none; } html.lang-da [lang="en"] { display: none; } html.lang-en [lang="da"] { display: none; } /* CSS-only fallback default: Danish shows even before/without JS running. display:revert restores each element's natural display (block, inline, list-item, etc.) so this works across h1/p/span/li/dt/dd alike. */ [data-en] { display: none; } html.lang-en [data-en] { display: revert; } [lang="en"] { display: none; } html.lang-en [lang="en"] { display: revert; } /* ---------------------------------------------------------- Layout shell ---------------------------------------------------------- */ .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side); } /* ---------------------------------------------------------- Header / nav ---------------------------------------------------------- */ .site-header { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.1rem, 3vw, 2rem) var(--side) 1.25rem; border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0; } /* Name + subtitle stacked tightly, always together as one unit */ .site-identity { display: flex; flex-direction: column; gap: 0.15rem; } /* Nav sits 50% further from the identity block than the title and subtitle sit from each other — gestalt proximity: two clear groups. */ .site-header .site-nav { margin-top: 0.225rem; } .site-title { font-family: var(--display); font-size: clamp(1.208rem, 2.1vw, 1.47rem); letter-spacing: 0.01em; } .site-subtitle { color: var(--mute); font-family: var(--body); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 2rem); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; } .nav-divider { width: 1px; height: 0.9rem; background: var(--line); display: inline-block; } .site-nav a { position: relative; padding-bottom: 0.3rem; color: var(--mute); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); } /* ---------------------------------------------------------- Social icon row — now sits inline at the end of the main nav, separated by .nav-divider, instead of on the subtitle row. ---------------------------------------------------------- */ .social-row { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; } .social-row a { color: var(--mute); display: inline-flex; width: 1.265rem; height: 1.265rem; } .social-row svg { width: 100%; height: 100%; display: block; } .social-row a:hover { color: var(--ink); } /* ---------------------------------------------------------- Language tab — the signature element. A museum wall-label, fixed to the edge of the viewport. ---------------------------------------------------------- */ .lang-tab { position: fixed; top: 50%; right: 0; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; background: var(--paper-raised); border: 1px solid var(--line); border-right: none; padding: 0.9rem 0.55rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); cursor: pointer; z-index: 50; display: flex; gap: 0.5rem; align-items: center; } .lang-tab:hover { color: var(--ink); } .lang-tab b { font-weight: 600; color: var(--ink); } html.lang-da .lang-tab .mark-da, html.lang-en .lang-tab .mark-en { color: var(--ink); font-weight: 600; } html.lang-da .lang-tab .mark-en, html.lang-en .lang-tab .mark-da { color: var(--mute); font-weight: 400; } /* ---------------------------------------------------------- Footer ---------------------------------------------------------- */ .site-footer { max-width: var(--maxw); margin: 0 auto; padding: 1.75rem var(--side) 2rem; border-top: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 3.5rem); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.5472rem; color: var(--mute); letter-spacing: 0.03em; } .site-footer a:hover { color: var(--ink); } /* ---------------------------------------------------------- Hero (Forside) ---------------------------------------------------------- */ .hero-banner { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--side) clamp(1rem, 2vw, 1.5rem); } .hero-banner-link { display: block; position: relative; } .hero-banner-link img { width: 100%; height: auto; aspect-ratio: 2400 / 1000; display: block; border: 1px solid var(--line); } /* CTA overlaid on the banner, bottom-LEFT, sitting over the light paper area of the collage so the text stays legible. The whole banner links to the works page; this is just the visible label. */ .hero-banner-cta { position: absolute; /* Desktop: sits on the clear white paper, right of and above the brown desk corner, with margin to the collage pieces. Phones override this back to the bottom-left corner for the portrait crop (see ≤700px). */ left: 24%; bottom: 38%; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 0.35rem; /* Soft paper-coloured halo: invisible over the calm light areas, keeps the label crisp where the collage behind it gets busier. */ filter: drop-shadow(0 0 3px rgba(236, 234, 226, 0.95)) drop-shadow(0 0 7px rgba(236, 234, 226, 0.55)); } .hero-banner-link:hover .hero-banner-cta { color: var(--accent); border-color: var(--accent); } /* Banner swaps to the portrait crop on phones; reserve its taller box. */ @media (max-width: 700px) { .hero-banner-link img { aspect-ratio: 1080 / 1350; } /* Portrait crop on phones: put the CTA back in the bottom-left corner (calm light area there) at a smaller size. */ .hero-banner-cta { font-size: 0.75rem; left: 0.7rem; bottom: 0.7rem; } /* The DA/EN switcher is fixed to the right edge, vertically centred. On a short page (the mobile front page) that centre lands on the footer, so reserve clearance on the right so "Helsingør, Danmark" is never hidden. */ .site-footer { padding-right: 2.75rem; } } @media (max-width: 800px) { .site-header .site-nav { margin-top: calc(0.225rem + 20px); } } /* On narrow phones the nav wraps and the social icons drop to their own line. The inline "|" divider then dangles at the end of the links row, so hide it and let the icons sit left-aligned under the nav instead of pushed right. */ @media (max-width: 520px) { .nav-divider { display: none; } .social-row { margin-left: 0; } } /* Front page only — minimise the gap between hero and footer so the footer sits above the fold on typical landscape/desktop screens. Other pages keep their normal breathing room. */ .page-home .site-footer { margin-top: clamp(1rem, 2vw, 1.5rem); padding-top: 1.25rem; } .hero-text h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-style: italic; font-weight: 400; line-height: 1.3; margin-bottom: 1.5rem; } .hero-text p.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--mute); max-width: 32em; } .hero-cta { margin-top: 1.75rem; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 0.35rem; } .hero-cta:hover { color: var(--accent); border-color: var(--accent); } .hero-frame { aspect-ratio: 5 / 4; background: var(--paper-raised); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .hero-frame img { width: 100%; height: 100%; object-fit: cover; } .placeholder-label { position: absolute; bottom: 0.9rem; left: 0.9rem; right: 0.9rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); background: var(--paper); border: 1px dashed var(--line); padding: 0.4rem 0.6rem; } /* ---------------------------------------------------------- Page header (non-home pages) ---------------------------------------------------------- */ .page-head { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) var(--side) clamp(1.25rem, 3vw, 2rem); } .page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); } .page-head p { max-width: 38em; color: var(--mute); margin-top: 1rem; font-size: 1.02rem; } /* ---------------------------------------------------------- Works grid — masonry by column, preserves orientation ---------------------------------------------------------- */ .works-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side) clamp(3rem, 7vw, 5rem); display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; } /* Fallback if JS hasn't run yet / is disabled */ .works-grid > .work-card { flex: 1 1 300px; } .masonry-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); } .work-card { cursor: pointer; border: none; background: none; padding: 0; display: block; width: 100%; text-align: left; } .work-figure { position: relative; background: var(--paper-raised); border: 1px solid var(--line); overflow: hidden; } .work-figure img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .work-card:hover .work-figure img { transform: scale(1.02); } .work-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0.1rem 0; font-size: 0.82rem; } .work-meta .work-title { font-style: italic; font-family: var(--display); font-size: 0.95rem; } .work-meta .work-year { color: var(--mute); white-space: nowrap; } .work-credit { margin: 0.25rem 0.1rem 0; font-size: 0.68rem; color: var(--mute); letter-spacing: 0.03em; } .placeholder-figure { aspect-ratio: var(--ar, 1 / 1); display: flex; align-items: flex-end; position: relative; } .placeholder-figure .placeholder-label { position: static; margin: 0.9rem; } /* ---------------------------------------------------------- Lightbox ---------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; background: rgba(28, 27, 23, 0.92); display: none; align-items: center; justify-content: center; z-index: 100; padding: clamp(1.5rem, 5vw, 4rem); overflow: auto; -webkit-overflow-scrolling: touch; } .lightbox.open { display: flex; } /* Zoomed: align to the top instead of centering, so overflow:auto can actually reach every edge of oversized content. Centering a taller- than-viewport flex child is the classic bug behind "can't scroll to the top" — this avoids it on any screen size or orientation. */ .lightbox.zoom-active { align-items: flex-start; padding-top: clamp(1.5rem, 5vw, 3rem); } .lightbox-inner { max-width: 900px; width: 100%; color: var(--paper); margin: 0 auto; } .lightbox-frame { background: transparent; border: none; max-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lightbox-frame img { max-height: 70vh; width: auto; max-width: 100%; cursor: zoom-in; } /* Click-to-zoom: swap to native resolution. Scrolling happens on the single outer .lightbox container (see .zoom-active above) rather than a nested scroll area, to avoid double-scrollbar conflicts. */ .lightbox-frame.zoomed { max-height: none; max-width: none; justify-content: flex-start; align-items: flex-start; overflow: visible; cursor: zoom-out; } .lightbox-frame.zoomed img { max-height: none; max-width: none; width: auto; height: auto; cursor: zoom-out; } .lightbox-inner.zoomed { max-width: none; } .lightbox-meta { margin-top: 1rem; } /* Title line — shared block, styled per content type to match the typographic role that type of name has elsewhere on the site. */ .lightbox-meta .lm-title { display: block; margin-bottom: 0.5rem; } /* Artwork titles: same italic serif treatment as .work-title / .cv-title */ .lightbox-meta .lm-title.is-work { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--paper); } .lightbox-meta .lm-title.is-work .lm-year { font-style: normal; color: #C9C6BB; } /* Press items: same uppercase label treatment as .press-pub / .eyebrow, adapted to the dark lightbox background */ .lightbox-meta .lm-title.is-press { font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--paper); } .lightbox-meta .lm-details { display: block; color: #C9C6BB; text-align: left; font-size: 0.82rem; line-height: 1.7; max-width: 42em; } .lightbox-meta .lm-description { display: block; color: #C9C6BB; text-align: left; font-size: 0.88rem; line-height: 1.6; max-width: 42em; margin-top: 0.75rem; } .lightbox-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); background: none; border: 1px solid rgba(244, 242, 234, 0.4); color: var(--paper); width: 2.25rem; height: 2.25rem; font-size: 1.1rem; cursor: pointer; } .lightbox-close:hover { border-color: var(--paper); } /* Prev/next — same bordered-button language as .lightbox-close, so every clickable control inside the lightbox reads consistently. */ .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); background: none; border: 1px solid rgba(244, 242, 234, 0.4); color: var(--paper); width: 2.5rem; height: 2.5rem; font-size: 1.3rem; line-height: 1; cursor: pointer; z-index: 101; display: flex; align-items: center; justify-content: center; } .lightbox-nav:hover { border-color: var(--paper); } .lightbox-nav:disabled { opacity: 0.3; cursor: default; } .lightbox-prev { left: clamp(0.5rem, 3vw, 2rem); } .lightbox-next { right: clamp(0.5rem, 3vw, 2rem); } @media (max-width: 640px) { .lightbox-nav { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; } } /* ---------------------------------------------------------- Bio CV sections (exhibitions, projects, awards) ---------------------------------------------------------- */ .cv-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side) clamp(3rem, 7vw, 5rem); display: grid; gap: clamp(2.5rem, 6vw, 4rem); } .cv-section h2 { font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); font-family: var(--body); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; margin-bottom: 1.25rem; } .cv-year-block { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding: 0.75rem 0; } .cv-year-block + .cv-year-block { border-top: 1px solid var(--line); } .cv-yr { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--mute); } .cv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .cv-list li { font-size: 0.92rem; line-height: 1.5; color: var(--mute); } .cv-list li .cv-title { font-style: italic; color: var(--ink); } @media (max-width: 600px) { .cv-year-block { grid-template-columns: 1fr; gap: 0.4rem; } .cv-yr { border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; } } /* ---------------------------------------------------------- Press page ---------------------------------------------------------- */ .press-list { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side) clamp(1.5rem, 3vw, 2.5rem); } .press-item { display: grid; grid-template-columns: 6rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); } .press-item:last-child { border-bottom: 1px solid var(--line); } .press-year { font-family: var(--display); font-style: italic; color: var(--mute); } .press-pub { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 0.35rem; display: block; } .press-headline { font-size: 1.1rem; max-width: 36em; } .press-body { display: flex; gap: 1.25rem; align-items: flex-start; } .press-thumb { width: 84px; flex-shrink: 0; border: 1px solid var(--line); background: var(--paper-raised); cursor: pointer; overflow: hidden; } .press-thumb img { width: 100%; display: block; transition: transform 0.4s ease; } .press-thumb:hover img { transform: scale(1.06); } .press-text { flex: 1; min-width: 0; } /* Extra photo gallery below a press note (e.g. photo reportage) */ .press-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .press-gallery .press-thumb { width: 72px; } .press-note { color: var(--mute); font-size: 0.92rem; margin-top: 0.4rem; max-width: 34em; } .press-note em { font-style: italic; color: var(--ink); } /* ---------------------------------------------------------- Contact page ---------------------------------------------------------- */ .contact-layout { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side) clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } } .contact-block dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-top: 1.5rem; } .contact-block dd { margin: 0.3rem 0 0; font-size: 1.2rem; font-family: var(--display); } /* Social links on the contact page — text links with a small inline icon before each name. Size inherits from body (not the large dd font), so icons stay small and proportional to the text. */ .contact-social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; font-family: var(--display); font-size: 1.2rem; line-height: 1.2; } .contact-social a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); } .contact-social a:hover { color: var(--accent); } .contact-social svg { width: 0.9em; height: 0.9em; flex-shrink: 0; display: block; } .contact-block dd a:hover { color: var(--accent); } .contact-note { font-size: 1.05rem; color: var(--mute); max-width: 32em; margin-top: 0; } /* Nudge the first label's cap-height to sit level with the note's first text line — the uppercase, letter-spaced label otherwise reads slightly low next to the larger body line-height. */ .contact-block dt:first-child { margin-top: 0.15rem; }