/* =========================================================
OTHERwise Research — Design System
Scandinavian-minimalist, editorial, photo-forward.
Fonts (Fraunces, Inter) are loaded via in each page's
, not @import — @import is render-blocking because the
browser can't discover/fetch it until it parses this file up
to that line, adding a serial round-trip before text renders.
========================================================= */
:root{
--ink: #15140f;
--ink-70: rgba(21,20,15,.72);
--ink-55: rgba(21,20,15,.62);
--paper: #f5f1e7;
--paper-dim: #eae4d4;
--panel: #fbf9f2;
--white: #ffffff;
--yellow: #f6ce3e;
--yellow-deep: #dfae15;
--yellow-soft: #fae9ad;
--line: rgba(21,20,15,.15);
--line-soft: rgba(21,20,15,.09);
--line-strong: rgba(21,20,15,.5);
--muted: #6b6555;
--serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--container: 1340px;
--pad: clamp(22px, 5vw, 64px);
--section-pad: clamp(64px, 9vw, 140px);
--gap: clamp(20px, 3vw, 40px);
--radius: 3px;
--ease: cubic-bezier(.16,.8,.24,1);
}
/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }
::selection{ background: var(--yellow); color: var(--ink); }
.container{
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad);
}
section{ padding-block: var(--section-pad); }
.section-tight{ padding-block: clamp(48px, 6vw, 88px); }
.hairline{ border: none; border-top: 1px solid var(--line); margin: 0; }
.rule-top{ border-top: 1px solid var(--line); }
.rule-bottom{ border-bottom: 1px solid var(--line); }
/* ---------- Typography ---------- */
.eyebrow{
display: inline-flex;
align-items: center;
gap: .55em;
font-family: var(--sans);
font-size: .74rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-55);
}
.eyebrow::before{
content: "";
width: 7px; height: 7px;
background: var(--yellow);
border-radius: 1px;
flex: none;
}
.eyebrow.on-dark{ color: rgba(245,241,231,.6); }
.display-1{
font-family: var(--serif);
font-weight: 440;
font-size: clamp(2.6rem, 5.4vw, 5rem);
line-height: 1.04;
letter-spacing: -.01em;
}
.display-2{
font-family: var(--serif);
font-weight: 420;
font-size: clamp(2.1rem, 3.6vw, 3.4rem);
line-height: 1.08;
letter-spacing: -.01em;
}
.display-3{
font-family: var(--serif);
font-weight: 420;
font-size: clamp(1.5rem, 2.2vw, 2.1rem);
line-height: 1.18;
}
.italic{ font-style: italic; }
.lede{
font-family: var(--sans);
font-size: clamp(1.05rem, 1.4vw, 1.28rem);
line-height: 1.55;
color: var(--ink-70);
font-weight: 400;
max-width: 46ch;
text-align: justify;
text-align-last: left;
hyphens: auto;
}
p.body, .prose p{
font-size: 1rem;
color: var(--ink-70);
max-width: 62ch;
text-align: justify;
text-align-last: left;
hyphens: auto;
}
.prose p + p{ margin-top: 1.1em; }
.small{ font-size: .875rem; color: var(--ink-55); text-align: justify; text-align-last: left; hyphens: auto; }
.mono-num{
font-family: var(--serif);
font-variant-numeric: oldstyle-nums;
}
/* ---------- Layout helpers ---------- */
.grid{ display: grid; gap: var(--gap); }
.g-2{ grid-template-columns: repeat(2, 1fr); }
.g-3{ grid-template-columns: repeat(3, 1fr); }
.g-4{ grid-template-columns: repeat(4, 1fr); }
.g-12{ grid-template-columns: repeat(12, 1fr); }
@media (max-width: 900px){
.g-3, .g-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
.g-2, .g-3, .g-4{ grid-template-columns: 1fr; }
}
.split{
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
gap: clamp(32px, 6vw, 96px);
align-items: start;
}
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }
.split-40-60{ grid-template-columns: 2fr 3fr; }
.split-60-40{ grid-template-columns: 3fr 2fr; }
@media (max-width: 860px){ .split-40-60, .split-60-40{ grid-template-columns: 1fr; } }
.stack{ display:flex; flex-direction:column; }
.gap-xs{ gap:.5rem; } .gap-s{ gap:1rem; } .gap-m{ gap:1.75rem; } .gap-l{ gap:3rem; }
.numeral{
font-family: var(--serif);
font-weight: 340;
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
color: var(--ink-55);
}
/* ---------- Buttons & links ---------- */
.btn{
display: inline-flex;
align-items: center;
gap: .6em;
padding: .95em 1.6em;
font-family: var(--sans);
font-size: .8rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
border: 1px solid var(--ink);
border-radius: var(--radius);
background: transparent;
transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
white-space: nowrap;
}
.btn svg{ width: 14px; height: 14px; transition: transform .28s var(--ease); flex: none; }
.btn:hover svg{ transform: translateX(3px); }
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-on-dark{ border-color: rgba(245,241,231,.5); color: var(--paper); }
.btn-on-dark:hover{ background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.text-link{
position: relative;
display: inline-block;
font-weight: 500;
padding-bottom: .15em;
background-image: linear-gradient(var(--ink), var(--ink));
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 1px;
transition: background-size .35s var(--ease), color .35s var(--ease);
}
.text-link:hover{ color: var(--yellow-deep); background-image: linear-gradient(var(--yellow-deep), var(--yellow-deep)); }
.text-link.on-dark{ background-image: linear-gradient(var(--paper), var(--paper)); }
/* ---------- Header ---------- */
.site-header{
position: sticky;
top: 0;
z-index: 100;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
border-bottom-color: var(--line);
}
.site-header .container{
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 18px;
}
.brand{ display:flex; align-items:center; }
.brand img{ height: 44px; width: auto; }
@media (max-width: 480px){ .brand img{ height: 38px; } }
.main-nav{ display:flex; align-items:center; gap: clamp(20px,2.6vw,40px); }
.main-nav a:not(.btn){
font-size: .78rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-70);
position: relative;
padding-block: 4px;
}
.main-nav a:not(.btn)::after{
content:"";
position:absolute; left:0; right:100%; bottom:0;
height:1px; background: var(--ink);
transition: right .3s var(--ease);
}
.main-nav a:not(.btn):hover{ color: var(--ink); }
.main-nav a:not(.btn):hover::after{ right:0; }
.main-nav a.is-active{ color: var(--ink); }
.main-nav a.is-active::after{ right:0; background: var(--yellow-deep); height:2px; }
.nav-toggle{
display:none;
width: 40px; height: 40px;
align-items:center; justify-content:center;
background:none; border:none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
content:""; display:block; width:22px; height:1.5px; background: var(--ink);
position:relative; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
@media (max-width: 880px){
.main-nav{
position: fixed; inset: 0; top: 68px;
background: var(--paper);
flex-direction: column;
align-items: flex-start;
padding: 40px var(--pad);
gap: 26px;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.main-nav a:not(.btn){ font-size: 1.5rem; font-family: var(--serif); font-weight: 420; text-transform:none; letter-spacing: 0; }
body.nav-open .main-nav{ opacity:1; transform:none; pointer-events:auto; }
.nav-toggle{ display:flex; }
body.nav-open .nav-toggle span{ background: transparent; }
body.nav-open .nav-toggle span::before{ transform: rotate(45deg); top:0; }
body.nav-open .nav-toggle span::after{ transform: rotate(-45deg); top:0; }
}
/* ---------- Photo slot ---------- */
.photo-slot{
position: relative;
background:
repeating-linear-gradient(135deg, rgba(21,20,15,.045) 0 1px, transparent 1px 13px),
var(--paper-dim);
border: 1px solid var(--line);
overflow: hidden;
display:flex;
align-items:center;
justify-content:center;
width: 100%;
}
.photo-slot img{
width:100%; height:100%; object-fit:cover;
filter: grayscale(1) contrast(1.02);
transition: filter 1.1s var(--ease), transform 1.6s var(--ease);
}
.photo-slot.in-view img{ filter: grayscale(.4); }
.photo-slot:hover img{ filter: grayscale(0); transform: scale(1.035); }
.photo-slot .corner{ position:absolute; width:16px; height:16px; opacity:.45; }
.photo-slot .corner.tl{ top:10px; left:10px; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.photo-slot .corner.tr{ top:10px; right:10px; border-top:1px solid var(--ink); border-right:1px solid var(--ink); }
.photo-slot .corner.bl{ bottom:10px; left:10px; border-bottom:1px solid var(--ink); border-left:1px solid var(--ink); }
.photo-slot .corner.br{ bottom:10px; right:10px; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); }
.photo-slot .slot-label{
text-align:center;
padding: 0 14%;
color: var(--ink-55);
}
.photo-slot .slot-label svg{ width:22px; height:22px; margin:0 auto 10px; opacity:.55; }
.photo-slot .slot-label .k{
display:block;
font-size: .68rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-55);
}
.photo-slot .slot-label .d{
display:block;
margin-top: 5px;
font-family: var(--serif);
font-style: italic;
font-size: .92rem;
color: var(--ink-70);
}
.ar-1-1{ aspect-ratio: 1/1; }
.ar-4-5{ aspect-ratio: 4/5; }
.ar-3-4{ aspect-ratio: 3/4; }
.ar-16-10{ aspect-ratio: 16/10; }
.ar-16-9{ aspect-ratio: 16/9; }
.ar-21-9{ aspect-ratio: 21/9; }
.ar-9-16{ aspect-ratio: 9/16; }
/* ---------- Buttons row / CTA ---------- */
.cta-row{ display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }
/* ---------- Stats strip ---------- */
.stats{
display:grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.stats .stat{
padding: clamp(24px,3vw,40px) clamp(16px,2vw,28px);
border-left: 1px solid var(--line);
}
.stats .stat:first-child{ border-left:none; }
.stat .n{
font-family: var(--serif);
font-weight: 420;
font-size: clamp(2rem, 3.4vw, 3.1rem);
letter-spacing: -.01em;
}
.stat .l{
margin-top: .5rem;
font-size: .78rem;
color: var(--ink-55);
letter-spacing: .03em;
}
@media (max-width: 760px){
.stats{ grid-template-columns: repeat(2,1fr); }
.stats .stat:nth-child(2n+1){ border-left:none; }
.stats .stat:nth-child(-n+2){ border-top:none; }
.stats .stat{ border-top: 1px solid var(--line); }
}
/* ---------- Cards / numbered list ---------- */
.numbered-card{
border-top: 1px solid var(--line);
padding-top: 1.6rem;
position: relative;
}
.numbered-card .numeral{ display:block; margin-bottom: .9rem; }
.numbered-card h3{ font-family: var(--serif); font-weight: 440; font-size: 1.28rem; margin-bottom: .55rem; }
.numbered-card p{ color: var(--ink-70); font-size: .96rem; max-width: 40ch; text-align: justify; text-align-last: left; hyphens: auto; }
.band-dark .numbered-card{ border-color: rgba(245,241,231,.18); }
.band-dark .numbered-card h3{ color: var(--paper); }
.band-dark .numbered-card p{ color: rgba(245,241,231,.68); }
.band-dark .numbered-card .numeral{ color: rgba(245,241,231,.55); }
/* ---------- Meter (single ratio against a limit) ---------- */
.meter{ max-width: 34ch; }
.meter .meter-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; }
.meter .meter-label{ font-size:.78rem; letter-spacing:.02em; color: var(--ink-55); }
.meter .meter-value{ font-family:var(--serif); font-weight:440; font-size:1.15rem; font-variant-numeric: oldstyle-nums; flex:none; }
.meter .meter-track{ height:8px; background: var(--paper-dim); border:1px solid var(--line); position:relative; overflow:hidden; }
.meter .meter-fill{ position:absolute; inset:0; width:0; background: var(--yellow); border-radius: 0 2px 2px 0; transition: width 1.2s var(--ease); }
.band-dark .meter-label{ color: rgba(245,241,231,.55); }
.band-dark .meter-value{ color: var(--paper); }
.band-dark .meter-track{ background: rgba(245,241,231,.12); border-color: rgba(245,241,231,.22); }
/* ---------- Timeline (connected milestones) ---------- */
.timeline-row{ position:relative; padding-top:1.6rem; border-top:1px solid var(--line); }
.timeline-row:not(:last-child)::before{ content:""; position:absolute; left:4px; top:2.4rem; bottom:-1.8rem; width:1px; background:var(--line); }
.timeline-row .numeral{ position:relative; display:inline-flex; align-items:center; gap:.6rem; }
.timeline-row .numeral::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--yellow-deep); flex:none; position:relative; z-index:1; }
/* ---------- Chart bars (magnitude comparison, one hue) ---------- */
.chart-bars{ display:flex; flex-direction:column; gap:16px; }
.chart-bar-row{ display:grid; grid-template-columns: minmax(120px,180px) 1fr 2.5rem; align-items:center; gap:16px; }
.chart-bar-row .lbl{ font-size:.82rem; color: var(--ink-70); }
.chart-bar-row .track{ height:22px; background: var(--paper-dim); border:1px solid var(--line); position:relative; overflow:hidden; }
.chart-bar-row .fill{ position:absolute; inset:0; width:0; background: var(--ink); border-radius: 0 3px 3px 0; transition: width 1s var(--ease); }
.chart-bar-row .val{ font-family:var(--serif); font-weight:440; font-size:1rem; font-variant-numeric: oldstyle-nums; text-align:right; }
@media (max-width: 560px){
.chart-bar-row{ grid-template-columns: 1fr; gap:.4rem; }
.chart-bar-row .val{ text-align:left; }
}
/* Principles grid */
.principle{
border-top: 1px solid var(--line);
padding: 1.8rem 0;
transition: padding-left .35s var(--ease);
}
.principle:hover{ padding-left: 10px; }
.principle .row{ display:flex; align-items:baseline; gap: 1.1rem; }
.principle .numeral{ min-width: 2.2em; }
.principle h3{ font-family: var(--serif); font-weight: 440; font-size: 1.3rem; }
.principle p{ margin-top:.5rem; margin-left: calc(2.2em + 1.1rem); color: var(--ink-70); max-width: 56ch; font-size:.96rem; text-align: justify; text-align-last: left; hyphens: auto; }
@media (max-width: 620px){
.principle p{ margin-left: 0; margin-top:.7rem; }
}
/* ---------- Index list (projects / roles) ---------- */
.index-list .index-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 2rem;
padding: 1.5rem 0;
border-top: 1px solid var(--line);
transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.index-list .index-row:last-child{ border-bottom: 1px solid var(--line); }
.index-list .index-row:hover{ background: var(--paper-dim); padding-left: 14px; padding-right: 14px; margin-inline: -14px; }
.index-row .tag{
display:inline-block;
font-size: .68rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-55);
margin-bottom: .4rem;
}
.index-row h3{ font-family: var(--serif); font-weight: 420; font-size: 1.18rem; line-height: 1.35; max-width: 52ch; }
.index-row .meta{
flex: none;
text-align: right;
font-size: .85rem;
color: var(--ink-55);
max-width: 220px;
padding-top: 2px;
}
/* ---------- Quote / testimonial ---------- */
.quote-block{ max-width: 74ch; }
.quote-block .mark{ font-family: var(--serif); font-size: 3.4rem; color: #96700f; line-height:1; display:block; margin-bottom: .2rem; }
.quote-block blockquote{
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.2rem, 2vw, 1.7rem);
line-height: 1.42;
color: var(--ink);
text-align: justify;
text-align-last: left;
hyphens: auto;
}
.quote-block cite{
display:block;
margin-top: 1.4rem;
font-style: normal;
font-size: .85rem;
color: var(--ink-55);
}
.quote-block cite b{ color: var(--ink); font-weight:600; }
/* ---------- Wordmark partner list ---------- */
.wordmarks{
display:flex; flex-wrap:wrap;
border-top:1px solid var(--line); border-left: 1px solid var(--line);
}
.wordmarks span{
flex: 1 1 200px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1.5rem 1.2rem;
font-family: var(--serif);
font-size: 1.05rem;
color: var(--ink-70);
display:flex; align-items:center;
transition: background .3s var(--ease), color .3s var(--ease);
}
.wordmarks span:hover{ background: var(--ink); color: var(--paper); }
/* ---------- Team grid ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } }
.team-card .photo-slot{ margin-bottom: 1rem; }
.team-card h3{ font-family: var(--serif); font-weight: 480; font-size: 1.08rem; }
.team-card .role{ font-size: .82rem; color: var(--ink-55); margin-top: .2rem; }
.team-card a.mail{ font-size: .8rem; margin-top: .5rem; display:inline-block; color: var(--ink-55); }
.team-card a.mail:hover{ color: var(--ink); }
.team-list{ columns: 3; column-gap: var(--gap); }
@media (max-width: 900px){ .team-list{ columns: 2; } }
@media (max-width: 560px){ .team-list{ columns: 1; } }
.team-list li{ break-inside: avoid; padding: .7rem 0; border-top: 1px solid var(--line-soft); }
.team-list .nm{ font-size: .95rem; font-weight: 500; }
.team-list .rl{ display:block; font-size: .78rem; color: var(--ink-55); margin-top:.15rem; }
/* ---------- Offices ---------- */
.offices{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
@media (max-width: 900px){ .offices{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .offices{ grid-template-columns: 1fr; } }
.office{ border-top: 1px solid var(--line); padding-top: 1.4rem; }
.office .coord{ font-family: var(--serif); font-style:italic; font-size: .82rem; color: var(--ink-55); }
.office h3{ font-family: var(--serif); font-size: 1.2rem; font-weight: 460; margin-top:.35rem; }
.office p{ font-size: .88rem; color: var(--ink-70); margin-top:.5rem; text-align: justify; text-align-last: left; hyphens: auto; }
.office .reg{ font-size: .76rem; color: var(--ink-55); margin-top:.6rem; }
/* ---------- SDG bars ---------- */
.sdg-bars{ display:flex; flex-direction:column; gap: 10px; }
.sdg-bar-row{ display:grid; grid-template-columns: 90px 1fr 56px; align-items:center; gap: 14px; }
.sdg-bar-row .idx{ font-size:.78rem; color: var(--ink-55); }
.sdg-bar-row .track{ height: 10px; background: var(--paper-dim); border:1px solid var(--line); position:relative; overflow:hidden; }
.sdg-bar-row .fill{ position:absolute; inset:0; width:0; background: var(--yellow); transition: width 1.1s var(--ease); }
.sdg-bar-row .pct{ font-size:.82rem; color: var(--ink-70); text-align:right; font-variant-numeric: tabular-nums; }
/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap: .5rem; margin-bottom: 1.7rem; }
.field label{ font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color: var(--ink-55); }
.field input, .field textarea, .field select{
border: none;
border-bottom: 1px solid var(--line-strong);
background: transparent;
padding: .6em .1em;
font-size: 1rem;
color: var(--ink);
transition: border-color .25s var(--ease);
}
.field select{ appearance: none; -webkit-appearance:none; background-image: url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position: right 4px center; background-size: 10px 7px; padding-right: 1.4em; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--ink); }
.field textarea{ resize: vertical; min-height: 110px; }
.radio-group{ display:flex; flex-wrap:wrap; gap: .9rem 1.6rem; }
.radio-opt{ display:flex; align-items:center; gap:.55rem; font-size:.92rem; color: var(--ink-70); }
.radio-opt input{ accent-color: var(--ink); width:15px; height:15px; }
.check-row{ display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color: var(--ink-55); margin: 1.6rem 0; }
.check-row input{ accent-color: var(--ink); width:16px; height:16px; margin-top:2px; flex:none; }
.form-note{ font-size:.78rem; color: var(--ink-55); border:1px dashed var(--line); padding: .9rem 1rem; }
/* ---------- Job listing ---------- */
.job{ border-top: 1px solid var(--line); padding: 2rem 0; }
.job:last-child{ border-bottom: 1px solid var(--line); }
.job-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: .6rem 1.5rem; }
.job h3{ font-family: var(--serif); font-size: 1.5rem; font-weight: 440; }
.job .loc{ font-size:.8rem; color: var(--ink-55); letter-spacing:.02em; }
.job p{ margin-top: .9rem; color: var(--ink-70); max-width: 66ch; font-size: .96rem; text-align: justify; text-align-last: left; hyphens: auto; }
.job .btn{ margin-top: 1.2rem; }
/* ---------- Field note (Our Way page) ---------- */
.field-note{ border: 1px solid var(--line); background: var(--panel); padding: clamp(24px,3vw,40px); }
.field-note .who{ margin-top: 1.4rem; font-size:.82rem; color: var(--ink-55); }
.field-note .who::before{ content:"— "; }
.field-note p{ font-family: var(--serif); font-size: 1.05rem; line-height:1.6; color: var(--ink); text-align: justify; text-align-last: left; hyphens: auto; }
.field-note p + p{ margin-top: 1em; }
/* ---------- Dark band ---------- */
.band-dark{ background: var(--ink); color: var(--paper); }
.band-dark .display-2, .band-dark .display-1, .band-dark .display-3{ color: var(--paper); }
.band-dark p{ color: rgba(245,241,231,.72); }
.band-dark .hairline, .band-dark .rule-top, .band-dark .rule-bottom{ border-color: rgba(245,241,231,.18); }
.band-dark p{ text-align: justify; text-align-last: left; hyphens: auto; }
/* CTA band */
.cta-band{ padding-block: clamp(64px,9vw,120px); }
.cta-band .inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap: 2rem; }
.cta-band .display-2{ max-width: 18ch; }
/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: var(--paper); position:relative; overflow:hidden; }
.footer-cta{
position:relative; z-index:1;
padding-block: clamp(64px,9vw,128px);
border-bottom: 1px solid rgba(245,241,231,.15);
}
.footer-cta .display-1{ max-width: 19ch; color: var(--paper); }
.footer-cta .cta-row{ margin-top: clamp(28px,4vw,44px); }
/* Asymmetric brand + oversized nav */
.footer-main{
position:relative; z-index:1;
padding-block: clamp(48px,7vw,88px);
display:grid;
grid-template-columns: 1fr 1.35fr;
gap: clamp(32px,6vw,80px);
border-bottom: 1px solid rgba(245,241,231,.15);
}
@media (max-width: 760px){ .footer-main{ grid-template-columns: 1fr; } }
.footer-brand img{ height: 34px; }
.footer-brand p{ margin-top: 1.2rem; color: rgba(245,241,231,.65); max-width: 32ch; font-size: .92rem; text-align: justify; text-align-last: left; hyphens: auto; }
.footer-brand .reg-note{ margin-top: clamp(24px,4vw,44px); font-size:.74rem; line-height:1.7; color: rgba(245,241,231,.55); text-align: justify; text-align-last: left; }
.footer-nav-big{ display:flex; flex-direction:column; }
.footer-nav-big a{
display:flex; align-items:baseline; gap:1.1rem;
padding-block: .8rem;
border-top:1px solid rgba(245,241,231,.15);
font-family: var(--serif); font-weight:420;
font-size: clamp(1.3rem,2.6vw,1.9rem);
color: var(--paper);
transition: padding-left .35s var(--ease), color .35s var(--ease);
}
.footer-nav-big a:last-child{ border-bottom:1px solid rgba(245,241,231,.15); }
.footer-nav-big a .n{ font-family: var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.06em; color: rgba(245,241,231,.55); flex:none; }
.footer-nav-big a:hover{ padding-left:16px; color: var(--yellow); }
/* World clocks */
.footer-clocks{
position:relative; z-index:1;
display:flex; flex-wrap:wrap;
border-bottom: 1px solid rgba(245,241,231,.15);
}
.footer-clocks .clock{
flex:1 1 220px;
padding: clamp(20px,3vw,32px) clamp(20px,2.4vw,28px);
border-right: 1px solid rgba(245,241,231,.15);
text-align:center;
}
.footer-clocks .clock:last-child{ border-right:none; }
.footer-clocks .top-row{ display:flex; align-items:center; justify-content:center; gap:.5rem; }
.footer-clocks .tz-dot{ width:6px; height:6px; border-radius:50%; border:1px solid var(--yellow-deep); flex:none; transition: background .3s var(--ease); }
.footer-clocks .tz-dot.is-day{ background: var(--yellow); }
.footer-clocks .city{ font-size:.92rem; font-weight:600; color: var(--paper); }
.footer-clocks .country{ display:block; margin-top:.3rem; font-size:.76rem; color: rgba(245,241,231,.55); }
.footer-clocks .time{ display:block; margin-top: clamp(10px,1.4vw,16px); font-family: var(--serif); font-size: clamp(1.3rem,2vw,1.7rem); color: var(--yellow); font-variant-numeric: tabular-nums; }
.footer-clocks .reg{ display:block; margin-top:.55rem; font-size:.68rem; color: rgba(245,241,231,.55); }
@media (max-width: 760px){
.footer-clocks .clock{ flex:1 1 50%; border-right:1px solid rgba(245,241,231,.15); border-bottom:1px solid rgba(245,241,231,.15); }
.footer-clocks .clock:nth-child(2n){ border-right:none; }
}
.footer-bottom{
position:relative; z-index:1;
border-top: 1px solid rgba(245,241,231,.15);
padding-block: 22px;
display:flex; flex-wrap:wrap; justify-content:space-between; gap: 1rem;
font-size: .78rem;
color: rgba(245,241,231,.55);
}
.footer-bottom .legal{ display:flex; flex-wrap:wrap; gap: 1.2rem; }
.footer-bottom a:hover{ color: var(--yellow); }
/* ---------- Page hero ---------- */
.page-hero{ padding-top: clamp(56px,8vw,110px); padding-bottom: clamp(48px,6vw,88px); }
.page-hero .display-1{ max-width: 16ch; margin-top: 1.1rem; }
.page-hero .lede{ margin-top: 1.6rem; }
/* ---------- Reveal ---------- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 70ms); }
/* ---------- Skip link ---------- */
.skip-link{
position:absolute; left: -999px; top: auto;
background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 1000;
}
.skip-link:focus{ left: 12px; top: 12px; }
/* ---------- Misc ---------- */
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-xl{ margin-top: clamp(40px,6vw,72px); }
.max-w-prose{ max-width: 62ch; }
.divider-space{ height: 1px; background: var(--line); margin-block: var(--section-pad); }
/* =========================================================
Signature interactions — cursor, brand ring, reveals, marquee
========================================================= */
/* Smooth cross-page transitions (progressive enhancement) */
@view-transition{ navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){
animation-duration: .5s;
animation-timing-function: cubic-bezier(.16,.8,.24,1);
}
/* ---- Custom cursor (fine pointer only; JS-gated) ---- */
.cursor-dot, .cursor-ring{
position: fixed; top:0; left:0; z-index: 2000;
pointer-events: none;
opacity: 0;
will-change: transform;
}
.cursor-dot{
width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
border-radius:50%;
background: #fff;
mix-blend-mode: difference;
transition: opacity .3s var(--ease);
}
.cursor-ring{
width:32px; height:32px; margin:-16px 0 0 -16px;
border-radius:50%;
border:1px solid #fff;
mix-blend-mode: difference;
transition: opacity .3s var(--ease), width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring{ opacity: 1; }
body.cursor-ready.cursor-hover .cursor-ring{
width:60px; height:60px; margin:-30px 0 0 -30px;
background: var(--yellow);
border-color: var(--yellow);
mix-blend-mode: normal;
}
body.cursor-ready.cursor-hover .cursor-dot{ opacity:0; }
@media (hover:none), (pointer:coarse){
.cursor-dot, .cursor-ring{ display:none !important; }
}
body.cursor-ready{ cursor:none; }
body.cursor-ready a, body.cursor-ready button{ cursor:none; }
body.cursor-ready input, body.cursor-ready textarea, body.cursor-ready select, body.cursor-ready label{ cursor:auto; }
/* ---- Oversized brand ring (compositional graphic) ---- */
.brand-ring{
position:absolute;
pointer-events:none;
z-index:0;
opacity:.6;
}
.brand-ring svg{ width:100%; height:100%; display:block; }
.brand-ring circle{ fill:none; stroke: var(--yellow-deep); stroke-width: 1; }
.brand-ring .draw{
stroke-dasharray: 1070;
stroke-dashoffset: 1070;
transition: stroke-dashoffset 2s var(--ease);
}
.brand-ring.is-drawn .draw{ stroke-dashoffset: 0; }
.brand-ring.spin svg{ animation: spin-slow 100s linear infinite; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.brand-ring--tr{ top:-14%; right:-12%; width:min(50vw,600px); height:min(50vw,600px); }
.brand-ring--bl{ bottom:-18%; left:-10%; width:min(44vw,540px); height:min(44vw,540px); }
.brand-ring--footer{ top:-22%; right:-10%; width:min(42vw,520px); height:min(42vw,520px); opacity:.3; }
.brand-ring--subtle{ opacity:.28; }
.brand-ring--tl{ top:-14%; left:-12%; width:min(38vw,460px); height:min(38vw,460px); }
.brand-ring--br{ bottom:-16%; right:-10%; width:min(36vw,440px); height:min(36vw,440px); }
.page-hero{ position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:1; }
.ring-host{ position:relative; overflow:hidden; }
.ring-host > .container{ position:relative; z-index:1; }
/* ---- Word rise-reveal ---- */
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; }
.split-word .w{
display:inline-block;
transform: translateY(112%);
transition: transform .95s var(--ease);
transition-delay: calc(var(--wi,0) * 40ms);
}
[data-split].is-visible .split-word .w{ transform: translateY(0); }
/* ---- Marquee (partner wordmarks) ---- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.marquee .track{
display:flex; align-items:center; width:max-content;
animation: marquee 34s linear infinite;
}
.marquee:hover .track{ animation-play-state: paused; }
.marquee .track span{
padding: 1.6rem 2.4rem;
font-family: var(--serif);
font-size: 1.05rem;
color: var(--ink-70);
white-space: nowrap;
border-right: 1px solid var(--line);
transition: color .3s var(--ease);
}
.marquee .track span:hover{ color: var(--yellow-deep); }
@keyframes marquee{ to{ transform: translateX(-50%); } }
/* ---- Scroll progress ring ---- */
.progress-ring{
position: fixed;
right: clamp(16px,3vw,32px);
bottom: clamp(16px,3vw,32px);
z-index: 90;
width: 52px; height:52px;
display:block;
opacity: 0;
transform: translateY(8px);
transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.progress-ring.is-active{ opacity:1; transform:none; }
.progress-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
.progress-ring .bg{ fill: var(--paper); stroke:none; }
.progress-ring .track{ stroke: var(--line); stroke-width:2; fill:none; }
.progress-ring .bar{ stroke: var(--yellow-deep); stroke-width:2; fill:none; stroke-linecap:round; }
.progress-ring .arrow{ stroke:var(--ink); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; transform-origin: 26px 26px; transform: rotate(90deg); }
/* ---- Sticky numeral list (Our Principles) ---- */
.numeral-list{ display:grid; grid-template-columns: 140px 1fr; gap: clamp(24px,4vw,56px); align-items:start; }
.numeral-list .sticky-side{ position: sticky; top: 130px; }
.numeral-list .big-numeral{
font-family: var(--serif);
font-weight: 340;
font-size: clamp(3rem,6vw,5.5rem);
color: var(--ink);
line-height:1;
}
.numeral-list .big-numeral .of{ display:block; font-family: var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55); margin-top:.8rem; }
@media (max-width: 760px){
.numeral-list{ grid-template-columns: 1fr; }
.numeral-list .sticky-side{ position:static; display:flex; align-items:baseline; gap:.6rem; }
.numeral-list .big-numeral{ font-size: 1.6rem; }
.numeral-list .big-numeral .of{ display:inline; margin:0 0 0 .4rem; }
}
/* ---- Hero slideshow ---- */
.hero-slideshow{ position:relative; overflow:hidden; }
.hero-slideshow .photo-slot{
position:absolute; inset:0;
opacity:0;
transition: opacity 1.4s var(--ease);
}
.hero-slideshow .photo-slot.is-active{ opacity:1; position:relative; z-index:1; }
.hero-slideshow .dots{
position:absolute; z-index:2; bottom:8px; left:50%; transform:translateX(-50%);
display:flex;
}
.hero-slideshow .dot{
width:24px; height:24px; padding:0; border:none; background:transparent;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.hero-slideshow .dot::before{
content:""; width:7px; height:7px; border-radius:50%;
background: rgba(21,20,15,.5);
transition: background .3s var(--ease), transform .3s var(--ease);
}
.hero-slideshow .dot.is-active::before{ background: #96700f; transform: scale(1.4); }
.hero-slideshow .slideshow-pause{
position:absolute; z-index:2; bottom:6px; right:10px;
width:28px; height:28px; padding:0; border:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background: rgba(21,20,15,.55);
color: var(--paper);
cursor:pointer;
}
.hero-slideshow .slideshow-pause svg{ width:12px; height:12px; }
.hero-slideshow .slideshow-pause:hover{ background: rgba(21,20,15,.75); }
@media (prefers-reduced-motion: reduce){
.hero-slideshow .photo-slot{ transition:none; }
}
/* ---- World map ---- */
.world-map{
position:relative;
border:1px solid var(--line);
background: var(--paper-dim);
overflow:hidden;
}
.world-map svg{ width:100%; height:100%; display:block; }
.world-map .graticule{ stroke: var(--line-soft); stroke-width:1; fill:none; }
.world-map .landmass{ fill: rgba(21,20,15,.05); }
.world-map .link{
stroke: var(--ink-55); stroke-width:1; fill:none; stroke-dasharray: 3 4;
}
.world-map .marker-dot{ fill: var(--yellow-deep); stroke: var(--ink); stroke-width:1.2; }
.world-map .marker-dot.region{ fill: var(--ink); stroke: var(--paper); stroke-width:1.5; }
.world-map .pulse{
fill: none; stroke: var(--yellow-deep); stroke-width:1.2;
transform-origin: center;
transform-box: fill-box;
animation: mapPulse 2.6s ease-out infinite;
}
@keyframes mapPulse{
0%{ transform: scale(1); opacity:.8; }
100%{ transform: scale(3.4); opacity:0; }
}
.world-map .marker-label{
font-family: var(--sans); font-size:11px; font-weight:600; fill: var(--ink);
}
.world-map .marker-sub{
font-family: var(--sans); font-size:9px; fill: var(--ink-55);
}
.world-map-wrap .legend{ display:flex; flex-wrap:wrap; gap: 1.4rem 2rem; margin-top:1.4rem; }
.world-map-wrap .legend-item{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--ink-70); }
.world-map-wrap .legend-dot{ width:9px; height:9px; border-radius:50%; background:var(--yellow-deep); border:1px solid var(--ink); flex:none; }
.world-map-wrap .legend-dot.region{ background:var(--ink); border-color:var(--paper); box-shadow: 0 0 0 1px var(--ink-55); }
@media (prefers-reduced-motion: reduce){
.world-map .pulse{ animation:none; opacity:0; }
}
/* ---- SDG tile grid ---- */
.sdg-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:3px; }
@media (max-width: 820px){ .sdg-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width: 520px){ .sdg-grid{ grid-template-columns: repeat(3,1fr); } }
.sdg-tile{
aspect-ratio: 1/1;
display:flex; flex-direction:column; justify-content:space-between;
padding: .65rem;
color:#fff;
transition: transform .35s var(--ease), filter .35s var(--ease);
}
.sdg-tile:hover{ transform: scale(.95); filter: brightness(1.08); }
.sdg-tile .num{ font-family: var(--serif); font-size:1.3rem; font-weight:500; line-height:1; }
.sdg-tile .name{ font-family: var(--sans); font-size:.62rem; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:.01em; }
@media (prefers-reduced-motion: reduce){
.cursor-dot, .cursor-ring, .progress-ring{ display:none !important; }
.brand-ring{ display:none !important; }
.marquee .track{ animation: none !important; }
.marquee .track .dup{ display:none !important; }
.split-word .w{ transition: none !important; transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
.photo-slot img{ transition:none !important; filter: grayscale(.4) !important; }
}
@media (hover:none){
.photo-slot:hover img{ filter: grayscale(.4); transform:none; }
.photo-slot.in-view img{ filter: grayscale(0); }
}