@font-face { font-family: "Founders Grotesk"; src: url("fonts/FoundersGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --ink: #181917; --paper: #ffffff; --tint: #eaf3e1; --green: #4b963f; --muted: #6d6f67; --rule: #dedfd9; --gutter: clamp(1.25rem, 5vw, 4.5rem); --measure: 34rem; /* content stops at --page and centres; backgrounds and rules stay full-bleed */ --page: 1280px; --pad: max(var(--gutter), (100% - var(--page)) / 2); /* Mobile: top inset matches the side inset. Desktop keeps its own scale below. */ --pad-top: var(--gutter); font-family: "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; } @media (min-width: 60rem) { :root { font-size: 19px; --pad-top: clamp(2rem, 6vh, 3.25rem); } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--tint); } h1, h2, p, dl, dd, figure { margin: 0; } /* Founders Grotesk ships in one weight here, so nothing may be synthetically bolded. */ h1, h2, h3, strong, b { font-weight: 400; } a { color: inherit; } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } /* ---------- reveal ---------- */ /* Hidden state is gated on .js (set in ) so the page is fully visible without scripts, and never paints visible and then hides. */ .js [data-reveal] { opacity: 0; transform: translateY(10px); } .js [data-reveal-group].is-visible [data-reveal] { opacity: 1; transform: none; transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .contact a, .colophon a, .contact a::after, .colophon a::after { transition: none; } } /* ---------- masthead ---------- */ /* Empty 1fr either side keeps the identity block centred on the page while the language switch sits right; align-items centres the switch against it. */ .masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: var(--pad-top) var(--pad) 0; text-align: center; } .masthead__id { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 0.95rem; } .masthead__logo { display: block; line-height: 0; } .masthead__logo img { display: block; width: clamp(104px, 12vw, 138px); height: auto; } .masthead__logo:hover { opacity: 0.62; } .masthead__tie { font-size: 0.82rem; letter-spacing: 0.005em; color: var(--muted); } .lang { grid-column: 3; justify-self: end; display: flex; gap: 0.55rem; font-size: 0.78rem; line-height: 1; letter-spacing: 0.08em; } .lang [aria-current] { color: var(--ink); } .lang a { color: var(--muted); text-decoration: none; } .lang a:hover { color: var(--ink); } /* ---------- shared ---------- */ /* Links carry a resting hairline; an ink line wipes across it on hover. One fixed origin on the left, so it grows left to right and retreats right to left. scaleX rather than width, so it runs on the compositor and the 1px stays crisp. */ .contact a, .colophon a { position: relative; display: inline-block; text-decoration: none; padding-bottom: 0.14em; border-bottom: 1px solid var(--rule); transition: color 0.3s ease; } .colophon__col a { border-bottom-color: transparent; } .contact a::after, .colophon a::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); } .contact a:hover::after, .contact a:focus-visible::after, .colophon a:hover::after, .colophon a:focus-visible::after { transform: scaleX(1); } .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: end; padding: clamp(3rem, 9vh, 5.5rem) var(--pad) clamp(4.25rem, 12vh, 8.5rem); } .hero h1 { margin: 0 0 2rem; /* Measured in Founders Grotesk at this tracking: the full line is 7.43em, "Gum grows" is 4.20em, "Gum grows on" is 5.28em. 4.8em sits between the last two, so it always breaks to "Gum grows / on trees." — with or without text-wrap: balance, and at every step of the clamp. */ max-width: 4.8em; font-size: clamp(3.2rem, 9.5vw, 7rem); line-height: 0.94; letter-spacing: -0.035em; font-weight: 400; text-wrap: balance; } /* Danish runs longer. Measured the same way: "Tyggegummi" alone is 4.86em and the whole line is 10.91em, so 5.2em gives three lines with no line wider than the first word. */ html[lang="da"] .hero h1 { max-width: 5.2em; } .lede { max-width: var(--measure); font-size: 1.16rem; line-height: 1.42; text-wrap: pretty; } .hero__figure img { display: block; width: clamp(190px, 27vw, 278px); height: auto; mix-blend-mode: multiply; } .hero__figure figcaption { max-width: 17rem; margin-top: 1.4rem; font-size: 0.78rem; line-height: 1.4; color: var(--muted); } .hero__figure cite { font-style: normal; } @media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; } .hero__figure { justify-self: end; text-align: left; } } /* ---------- notes ---------- */ .notes { border-top: 1px solid var(--rule); } .note { display: grid; grid-template-columns: 1fr; gap: 0.5rem 3rem; padding: 2.4rem var(--pad); border-bottom: 1px solid var(--rule); } /* The tint band below is its own edge — a hairline on top of a colour change articulates the same division twice. */ .note:last-child { border-bottom: 0; } .note__title { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; } .note__body { max-width: 33rem; text-wrap: pretty; } @media (min-width: 60rem) { .note { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; padding-block: 3rem; } .note__body { padding-top: 0.2rem; } } /* ---------- pledge ---------- */ .pledge { background: var(--tint); padding: clamp(3rem, 8vh, 4.5rem) var(--pad); } .pledge__list { display: grid; gap: 2.25rem; margin-top: 2.25rem; } .pledge__item dt { font-size: 1.16rem; letter-spacing: -0.015em; margin-bottom: 0.35rem; } .pledge__item dd { margin: 0; max-width: 24rem; font-size: 0.94rem; line-height: 1.45; color: #3f4139; } @media (min-width: 52rem) { .pledge__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } } /* ---------- contact ---------- */ .contact { padding: clamp(4rem, 12vh, 7.5rem) var(--pad); } .contact h2 { max-width: 26rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; text-wrap: pretty; } .contact p { margin-top: 1.5rem; } .contact a { font-size: 1.16rem; } .contact a::after { background: var(--green); } .contact a:hover { color: var(--green); } /* ---------- colophon ---------- */ .colophon { display: grid; gap: 2.75rem; padding: clamp(3rem, 8vh, 4.25rem) var(--pad) 2.75rem; border-top: 1px solid var(--rule); } .colophon__tie { max-width: 32rem; font-size: 1.16rem; line-height: 1.35; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; } .mark { color: var(--ink); } .colophon__cols { display: grid; gap: 2.25rem 3rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding-top: 2.5rem; border-top: 1px solid var(--rule); } .colophon__col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.42rem; font-size: 0.9rem; } .colophon__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 3rem; padding-top: 1.9rem; border-top: 1px solid var(--rule); font-size: 0.78rem; line-height: 1.5; color: var(--muted); } .colophon__entity { font-variant-numeric: tabular-nums; } .colophon__policies { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; padding: 0; } .colophon__policies a:hover { color: var(--ink); }