@font-face {font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-ExtraLight.woff2") format("woff2"); font-style: normal; font-weight: 200; font-display: swap;}
@font-face {font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap;}
@font-face {font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap;}
:root {
  --white: #fff;
  --black: #000;
  --text: #222;
  --muted: #999;
  --border: #ddd;
  --accent: #00B8D9;
}
*, *::before, *::after {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;height: 100%;}
body {background-color:var(--white) ; color: var(--text); font-family: "IBM Plex Sans", ui-sans-serif, sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-variant-ligatures: normal;font-optical-sizing: auto; }
img {max-width: 100%; border: 0;}
main {margin:0 auto; max-width: 1200px; padding: 0 20px;}
article {margin:0 auto; padding:0 10px; margin-bottom: 100px;}
footer {width: 100%;padding:70px 30px 50px 30px;display: grid; grid-template-columns: repeat(3, 1fr);column-gap: 30px;
  background: linear-gradient(120deg, rgba(0, 184, 217, .3) 25%, rgba(0, 184, 217, .2) 100%);}
footer div a {white-space: nowrap; display: block; margin-bottom: 10px;font-size:.9rem;margin:10px 0 0 0; }
footer p {font-size:.9rem;}
footer a.button {margin-top: 3px;}
footer div:nth-of-type(3) {justify-self: end; text-align: right;}
footer div:nth-of-type(2) {text-align: center;}
figcaption {font-size: .85rem; margin-top: 10px; color: var(--muted);}
h1,h2,h3,h4,h5,h6 {line-height: 1em; font-weight: 200;}
h1 {font-size: 5rem; line-height: .8em; margin-bottom: 30px;}
h2 {font-size: 3rem; margin-bottom: 20px;}
h3 {font-size: 1.6rem; margin-bottom: 20px;}
h4 {font-size: 1.4rem; line-height:1.3em; margin: 30px 0 10px 0; max-width:800px; }
h5 {font-size: 1.4rem; line-height:1.3em; margin: 30px 0 10px 0; text-transform:uppercase; font-weight:400; }
h6 {font-size: 1rem; line-height:1.3em; margin: 0 0 20px 0; text-transform:uppercase; font-weight:400; color:var(--accent); }
p,li {margin:10px 0 30px 0; font-size:1.1rem; line-height: 1.65rem;text-wrap: pretty; max-width:800px; }
ul,ol {margin:20px 0 30px 20px;}
a {color: var(--black); text-decoration: none;transition: all 0.25s ease-out;}
a:hover {color: var(--accent);}
p a {text-decoration: underline;}
time {font-size: 1rem; line-height:.7em; display: inline-block;}
time, small {font-family: "IBM Plex Mono", monospace; color: var(--muted);}
blockquote {margin: 70px auto 20px auto;font-size: 4rem;text-align: center;letter-spacing: -0.03em;text-wrap: pretty;max-width: 1100px;position: relative;padding-top: 60px;line-height: 1.05;}
blockquote::before {content: "";display: block;width: 160px;height: 1px;background: var(--muted);margin: 0 auto 50px auto;}
blockquote span::before,
blockquote span::after {font-size: .7em;opacity: .25;vertical-align: .4em;}
blockquote span::before {content: "“";margin-right: .08em;}
blockquote span::after {content: "”";margin-left: .08em;}
cite {font-style: normal;text-align: center;width: 100%;display: block;padding-bottom: 140px;margin-top: 30px;font-size: .8rem;letter-spacing: .15em;text-transform: uppercase;opacity: .6;}
button, .button {color:var(--white);background-color: var(--accent);border:1px solid var(--accent); display: inline-block; border-radius: 20px; padding: 7px 20px; font-size: .9rem; appearance: none;-webkit-appearance: none;line-height: 1.3;cursor: pointer;font: inherit;}
button::after, .button::after {content: " →";transition: transform 0.2s ease;display: inline-block;margin-left: 6px;}
button:hover, .button:hover {color:var(--white); background-color: var(--black); border:1px solid var(--black);}
button:hover::after, .button:hover::after {transform: translateX(3px);}
form {padding:20px;}
select, input {font-size: 1rem; padding:5px;border-radius: 6px; border:1px solid var(--white); width: 330px; height:36px; display: block; margin-bottom: 10px;}
input[type="radio"] {height: 25px;}
input:focus, textarea:focus {outline: none;border-color: var(--accent);box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.25);}
fieldset {display: block; border: none; margin:20px 0;}
label,legend {display: inline-block; font-weight: 500; margin-bottom: 10px;}
legend {color: var(--black);}
textarea { width: 100%;  max-width: 600px;  height: 150px;resize: vertical;border:1px solid var(--white);border-radius: 6px;font-size: 1rem;}
table {margin:70px auto; border-collapse: collapse;}
td,th {font-size: 1.6rem; font-family: "IBM Plex Mono", monospace; padding:20px; border: 1px solid var(--border);}
th {text-align: right; font-weight: normal;}
.site-header {position: fixed; top: 0; left: 0; width: 100%; z-index: 20;  box-shadow: 0 1px 2px rgba(0, 0, 0, .1); background-color: var(--white); }
.site-brand img {display: block; width: 94px;height: 65px;}
.site-nav {display: flex;justify-content: space-between;align-items: flex-start;padding: 18px 30px 9px 30px;}
.site-menu {display: flex;gap: 2rem;list-style: none;margin: 15px 0 0 0;padding: 0;}
.site-menu a {font-size: 0.9rem;}
.hero {position: relative; min-height: 90vh; display: flex; align-items: flex-end; background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--white); margin-top: 88px; animation: heroReveal 1.8s ease-out forwards;}
.hero2 {margin:0 30px 50px 30px;position: relative; min-height: 70vh; display: flex; align-items: flex-end; background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--white);}
.hero::before,.hero2::before {content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, .5) 30%,rgba(0, 0, 0, 0) 100%);}
.hero-content {position: relative; z-index: 1; width: 100%;  padding: 4rem 2rem; opacity: 0; transform: translateY(30px); animation: textReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; container-type: inline-size;}
.hero-content h1 {font-size: clamp(2rem, 10cqw, 7rem);margin: 10px 0 30px;letter-spacing: -0.03em;}
.hero-content p {margin:0 0 0 10px; padding-left: 0px; line-height: 1.5rem;}
.hero-content time {color: var(--muted); }
.hero-content time:after {content: "| "; color: var(--muted); }
.photo-stories {max-width: 1500px;padding: 0 100px;}
.photo-stories figure { margin:70px 0; }
.photo-stories .threecolumn {padding: 0; margin-top: 0;}
.meta {display: grid;grid-template-columns: 1fr 1fr 1fr;width: 100%;padding:15px 30px;border: 1px solid var(--border);border-radius: 20px;gap: 1rem;}
.meta p {font-family: "IBM Plex Mono", monospace; font-size: .9rem;}
.meta > div:nth-child(1){text-align: left;}
.meta > div:nth-child(2){text-align: center;}
.meta > div:nth-child(3){text-align: right;}
.meta p{margin: 0;}
.meta a {color:var(--accent);text-decoration: none;}
.meta a:hover{color:var(--black);text-decoration: underline;}
.meta2 {margin: 10px 0;padding: 0 10px;}
.meta2 small {font-size: 1rem; line-height: 2rem;}
.meta2 small::before {content: "|"; color: var(--muted); padding: 0 5px;}
.intro {margin: 150px 0 60px 0; padding: 0 30px;}
.twocolumn {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px; margin: 0 auto 70px auto;}
.twocolumn-pt {display: grid;grid-template-columns: 1fr 2fr;gap: 30px; margin: 0 auto 70px auto;}
.twocolumn-pt img {height: 100%;width: auto;display: block;}
.twocolumn-at {display: grid; grid-template-columns: repeat(2, 1fr);column-gap: 30px; margin: 70px auto; max-width: 1180px;}
.twocolumn-at div p:first-of-type {font-size: 1.8rem; line-height: 1.2em; margin: 30px 0;}
.twocolumn-at figure {margin:0;}
.threecolumn {display: grid; grid-template-columns: repeat(3, 1fr);column-gap: 30px; margin: 130px auto; max-width: 100%; padding: 0 30px;}
.highlight {padding: 15px; background: rgba(0, 184, 217, 0.1); background: linear-gradient(120deg, rgba(0, 184, 217, .3) 25%, rgba(0, 184, 217, .2) 100%);}
.twocolumn-at.highlight {padding: 30px;}
.video-wrapper {width: 100%;aspect-ratio: 16 / 9;margin: 70px auto;}
.video-wrapper video {width: 100%;height: 100%;object-fit: contain;display: block;}
.video-wrapper iframe {width: 100%;height: 100%;display: block;border: 0;}
.video-wrapper-pt {width: min(90vw, 420px);aspect-ratio: 9 / 16;}
.video-wrapper-pt video {width: 100%;height: 100%;object-fit: contain; display: block;}
.photo-story-list {padding:30px;}
.story-filters {font-family: "IBM Plex Mono", monospace; font-size:.8rem; display: flex;flex-wrap: wrap;gap: 0.75rem;padding:30px;}
.story-filters button:first-of-type {color:var(--black); padding-left: 0; border: none;}
.story-filters button:first-of-type:hover {background-color: transparent;}
.filter-button.active {background: var(--black);color: var(--white);}
.filter-off {background-color: var(--white);}
.story-card {position: relative;overflow: hidden; transition: opacity 0.35s ease;}
.story-card::before {content: "";position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0, 184, 217, .3) 25%, rgba(0, 184, 217, .2) 100%);
  opacity: 0; transition: opacity 0.35s ease;  pointer-events: none; z-index: 1;}
.story-card:hover::before {opacity: 1;}
.story-card h2 {font-size: 1.8rem; font-weight: 400; letter-spacing:-0.02em; margin:0; padding: 0 10px;}
.story-card p {font-size: .95rem; line-height: 1.5em; padding: 0 10px;}
.story-card a { position: relative; z-index: 2; display: block; color: inherit; text-decoration: none;}
.story-card a:hover {color: inherit;}
.story-card.is-hiding {opacity: 0;}
.story-card.is-showing {opacity: 0;}

@media (max-width:800px) {
h1 {font-size: 3rem;}
p,li {font-size: 1rem;}
footer {display: block;  grid-template-columns: none;  column-gap: 0;}
footer div a {margin: 20px 0;}
footer div:nth-of-type(2), footer div:nth-of-type(3) {text-align: left;}
blockquote {margin: 50px auto 10px auto;padding-top: 40px;font-size: clamp(2rem, 9vw, 3rem);line-height: 1.08;max-width: 92%;text-wrap: balance;}
blockquote::before {width: 100px;margin: 0 auto 35px auto;}
blockquote span::before,
blockquote span::after {font-size: .75em;vertical-align: .3em;}
blockquote span::before {margin-right: .04em;}
blockquote span::after {margin-left: .04em;}
blockquote cite {margin-top: 20px;padding-bottom: 90px;font-size: .7rem;letter-spacing: .12em;line-height: 1.4;}
.site-brand img {display: block;width: 64px;height: 50px;}
.site-header {position: relative;top: auto;left: auto;box-shadow: unset;}
.site-nav {display: flex;align-items: center;justify-content: space-between;padding: 5px 16px;}
.site-menu {margin: 0;display: flex;gap: 10px;}
.site-menu a {font-size: 0.8rem;position: relative;top: 10px;}
.twocolumn, .twocolumn-pt, .twocolumn-at,.threecolumn {display: block;  grid-template-columns: none;column-gap: collapse; margin: 0; padding: 0;}
.twocolumn-at {margin-bottom: 30px;}
.twocolumn-at div p:first-of-type {font-size: 1.5rem;}
.photo-stories div {margin: 20px 0;}
.photo-stories figure {margin: 20px 0;}
.photo-stories figcaption {margin:5px 0 10px 0;}
.intro {padding: 0 10px;}
.threecolumn div {margin-bottom: 20px;}
.hero {margin-top: 0; min-height: 70vh;}
.hero2 {margin:0 15px 50px 15px;position: relative; min-height: 70vh; display: flex; align-items: flex-end; background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--white);}
.hero-content {padding:0 1rem 10px 1rem;}
.hero-content h6 {margin: 0; font-weight: 600;}
.hero-content h1 {margin:10px 0;}
time, .hero-content p {font-size: .9rem;}
.hero-content time {color: var(--muted); font-size: .85rem; line-height:.7em; display: inline-block;}
.meta {padding:5px 7px;border-radius: 5px;}
.meta p {font-size: .8rem; line-height: 1.3rem;}
.intro {margin: 50px 0 0 0;}
.photo-story-list {padding:0 15px;}
.story-filters {padding:0 15px 30px 15px;}
.photo-stories {padding: 0 15px;}
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: scale(1.04);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}