/* JRJ / Editorial Swiss grid. Edit tokens here to tune the whole site. */
:root {
  --ink:#171717;
  --muted:#666;
  --line:#d5d5d0;
  --paper:#fff;
  --panel:#f4f4f0;
  --max:1440px;
  --gap:clamp(20px,3vw,48px);
  --section:clamp(72px,9vw,144px)
}


* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:120px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased
}

img {
  display:block;
  max-width:100%;
  height:auto
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-weight:400
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:6px
}

.wrap {
  width:min(92%,var(--max));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:16px;
  transform:translateY(-200%);
  left:16px;
  background:#111;
  color:#fff;
  padding:12px;
  z-index:200
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  position:sticky;
  top:0;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);
  z-index:30
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:112px
}

.brand {
  display:block;
  width:190px;
  flex-shrink:0
}

.brand img {
  width:100%;
  max-height:84px;
  object-fit:contain;
  object-position:left center
}

.header-inner nav {
  display:flex;
  gap:clamp(20px,4vw,64px)
}

.header-inner nav a {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.09em;
  padding:12px 0
}

.header-inner nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}

.eyebrow,.label {
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.6
}

.hero {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  padding-block:64px 80px;
  align-items:center
}

.hero-copy {
  grid-column:1/7;
  padding-block:32px
}

.hero h1 {
  font-size:clamp(42px,5.2vw,76px);
  line-height:1.06;
  letter-spacing:-.065em;
  margin-top:44px
}

.muted {
  color:#74746e
}

.hero-description {
  font-size:17px;
  max-width:36ch;
  margin-top:28px;
  color:var(--muted)
}

.hero-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:36px
}

.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:0;
  border-bottom:1px solid var(--ink);
  background:none;
  padding:8px 0;
  font-size:13px;
  text-align:left
}

.text-link:hover {
  color:var(--muted)
}

.hero-note {
  font-size:10px;
  letter-spacing:.045em;
  color:var(--muted);
  margin-top:64px
}

.hero-note span {
  margin-inline:12px
}

.hero-image {
  grid-column:7/13
}

.image-link {
  display:block;
  position:relative;
  background:var(--panel);
  overflow:hidden
}

.image-link img {
  width:100%;
  height:auto
}

.hero-image .image-link img {
  max-height:650px;
  object-fit:contain
}

.image-open {
  position:absolute;
  right:12px;
  bottom:12px;
  background:#fff;
  color:#111;
  padding:8px 12px;
  font-size:11px;
  opacity:0;
  transition:opacity .15s
}

.image-link:hover .image-open,.image-link:focus-visible .image-open {
  opacity:1
}

.hero-image figcaption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:12px;
  font-size:11px;
  color:var(--muted)
}

.section {
  border-top:1px solid var(--line);
  padding-block:var(--section)
}

.section-heading {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  margin-bottom:64px
}

.section-heading>.eyebrow {
  grid-column:1/4;
  padding-top:8px
}

.section-heading>div {
  grid-column:5/13
}

h2 {
  font-size:clamp(34px,4.5vw,64px);
  letter-spacing:-.055em;
  line-height:1.08
}

.section-intro {
  max-width:46ch;
  margin-top:24px;
  font-size:16px;
  color:var(--muted)
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:72px var(--gap);
  align-items:start
}

.project-large {
  grid-column:1/8
}

.project-small {
  grid-column:9/13;
  margin-top:112px
}

.project-wide {
  grid-column:1/8
}

.project-aside {
  grid-column:9/13;
  align-self:center
}

.project-caption {
  display:flex;
  gap:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-top:16px
}

.project-number {
  font-size:11px;
  color:var(--muted);
  padding-top:3px
}

.project-caption h3 {
  font-size:16px;
  line-height:1.4
}

.project-caption p {
  font-size:12px;
  color:var(--muted);
  margin-top:4px
}

.installed-image {
  padding:clamp(16px,3vw,48px)
}

.installed-image img {
  max-height:700px;
  object-fit:contain
}

.aside-title {
  font-size:clamp(28px,3vw,44px);
  letter-spacing:-.05em;
  line-height:1.1;
  margin-block:24px
}

.project-aside>p:not(.eyebrow):not(.aside-title) {
  font-size:15px;
  color:var(--muted)
}

.project-aside .text-link {
  margin-top:24px
}

.about-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap)
}

.about-brand {
  grid-column:1/4;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:8px
}

.about-brand img {
  width:150px
}

.about-copy {
  grid-column:5/12
}

.large-copy {
  font-size:clamp(23px,2.7vw,36px);
  line-height:1.3;
  letter-spacing:-.025em
}

.about-copy>p+p {
  margin-top:24px;
  color:var(--muted);
  max-width:55ch
}

.services {
  list-style:none;
  margin:40px 0 24px;
  padding:0
}

.services li {
  border-top:1px solid var(--line);
  padding:16px 0;
  font-size:16px
}

.services li:last-child {
  border-bottom:1px solid var(--line)
}

.services span {
  font-size:11px;
  color:var(--muted);
  display:inline-block;
  width:48px
}

.social-panel {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding:40px;
  background:var(--panel)
}

.social-handle {
  font-size:clamp(22px,3vw,38px);
  letter-spacing:-.04em
}

.social-panel p+p {
  font-size:14px;
  color:var(--muted);
  margin-top:8px
}

.button {
  display:inline-flex;
  gap:28px;
  align-items:center;
  border:1px solid var(--ink);
  padding:14px 20px;
  font-size:13px;
  white-space:nowrap
}

.button:hover {
  background:var(--ink);
  color:white
}

.embed-controls {
  margin-top:24px
}

.fine-print {
  font-size:11px;
  color:var(--muted);
  margin-top:12px
}

.embed-controls .text-link {
  font-size:12px
}

#instagram-preview {
  margin-top:32px
}

#instagram-embed {
  margin-top:16px;
  max-width:540px
}

#instagram-embed iframe {
  max-width:100%!important
}

#instagram-embed blockquote {
  margin:0
}

.contact-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px var(--gap);
  margin-left:calc((100% + var(--gap))*4/12)
}

.contact-grid>div {
  border-top:1px solid var(--line);
  padding-top:16px
}

.contact-grid .label {
  color:var(--muted);
  margin-bottom:12px
}

.contact-grid a,.contact-grid>div>p:not(.label) {
  font-size:clamp(15px,1.5vw,20px);
  overflow-wrap:anywhere
}

.contact-grid a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.footer {
  border-top:1px solid var(--line);
  padding-block:28px 40px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:11px
}

.footer p:nth-child(2) {
  color:var(--muted)
}

dialog {
  border:0;
  padding:0;
  background:#111;
  color:white;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0
}

dialog::backdrop {
  background:rgba(0,0,0,.92)
}

.lightbox-inner {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 24px 24px;
  gap:12px
}

.lightbox-inner img {
  max-height:calc(100dvh - 170px);
  max-width:95vw;
  width:auto;
  object-fit:contain
}

.lightbox-close {
  position:absolute;
  right:24px;
  top:16px
}

.lightbox-inner button {
  border:1px solid #777;
  background:none;
  color:white;
  padding:8px 16px;
  font-size:12px
}

.lightbox-navigation {
  display:flex;
  gap:16px
}

.lightbox-inner p {
  font-size:12px
}

body.lightbox-open {
  overflow:hidden
}

[hidden] {
  display:none!important
}


@media(min-width:1600px) {
  .hero h1 {
  font-size:80px
}


}


@media(max-width:1000px) {
  .hero h1 {
  font-size:clamp(38px,5.2vw,56px)
}

.hero-note {
  margin-top:40px
}

.project-small {
  grid-column:8/13
}

.project-aside {
  grid-column:8/13
}

.contact-grid {
  margin-left:0
}

.social-panel {
  padding:28px
}


}


@media(max-width:800px) {
  html {
  scroll-padding-top:100px
}

.header-inner {
  min-height:88px
}

.brand {
  width:145px
}

.brand img {
  max-height:66px
}

.hero {
  grid-template-columns:1fr;
  padding-block:40px 64px;
  gap:32px
}

.hero-copy,.hero-image {
  grid-column:auto
}

.hero-copy {
  padding:0
}

.hero h1 {
  font-size:clamp(44px,8vw,68px);
  margin-top:28px
}

.hero-note {
  margin-top:28px
}

.hero-image .image-link img {
  max-height:640px
}

.section-heading {
  grid-template-columns:1fr;
  gap:20px;
  margin-bottom:40px
}

.section-heading>.eyebrow,.section-heading>div {
  grid-column:auto
}

.project-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px 24px
}

.project-large {
  grid-column:1/3
}

.project-small {
  grid-column:1/2;
  margin-top:0
}

.project-wide {
  grid-column:2/3
}

.project-aside {
  grid-column:1/3;
  max-width:48ch
}

.installed-image {
  padding:0
}

.about-grid {
  grid-template-columns:1fr;
  gap:40px
}

.about-brand {
  grid-column:auto;
  justify-content:flex-start
}

.about-brand img {
  width:90px
}

.about-copy {
  grid-column:auto
}

.social-panel {
  flex-direction:column;
  align-items:flex-start
}

.image-open {
  opacity:1
}

.footer {
  flex-wrap:wrap
}

.footer p:nth-child(2) {
  display:none
}


}


@media(max-width:480px) {
  .header-inner {
  gap:12px
}

.brand {
  width:122px
}

.header-inner nav {
  gap:16px
}

.header-inner nav a {
  font-size:10px;
  letter-spacing:.02em
}

.hero h1 {
  font-size:42px
}

.hero-description {
  font-size:15px
}

.hero-links {
  gap:16px
}

.hero-links .text-link {
  font-size:12px
}

.hero-note {
  font-size:9px
}

.project-grid {
  grid-template-columns:1fr
}

.project-large,.project-small,.project-wide,.project-aside {
  grid-column:auto
}

.contact-grid {
  grid-template-columns:1fr;
  gap:28px
}

.social-panel {
  padding:24px
}

.social-handle {
  font-size:26px
}


}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

* {
  transition:none!important
}


}


@media print {
  .site-header {
  position:static
}

button,.embed-controls,dialog {
  display:none
}

.section {
  padding-block:32px
}

.hero {
  padding-block:24px
}

.project {
  break-inside:avoid
}

.image-open {
  display:none
}


}