:root {
--cream:   #f1ebde;
--ink:     #181613;
--accent:  #9c2a1c;
--display: 'Instrument Serif', serif;
--mono:    'JetBrains Mono', monospace;
--pad-x:   60px;
--pad-y:   40px;
--gap:     28px;
} *, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--cream);
color: var(--ink);
}
body {
font-family: var(--mono);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
font: inherit;
} .site-wrap {
width: 100%;
min-height: 100vh;
padding: var(--pad-y) var(--pad-x) 56px;
position: relative;
} .site-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
}
.site-identity {
display: flex;
flex-direction: column;
}
.site-name {
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 1.9em;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--ink);
line-height: 1;
}
.site-tagline {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
margin-top: 6px;
letter-spacing: 0.04em;
}
.site-nav {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-family: var(--mono);
font-size: 0.82em;
}
.site-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.site-nav li {
display: flex;
gap: 12px;
align-items: center;
}
.site-nav li .nav-index {
opacity: 0.4;
font-size: 0.65em;
}
.site-nav li a {
text-decoration: none;
color: var(--ink);
display: inline-block;
position: relative;
transition: color 200ms ease;
}
.site-nav li a::after {
content: attr(data-label);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-family: var(--display);
font-style: italic;
font-size: 1.2em;
color: var(--accent);
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: opacity 200ms ease;
}
.site-nav li a:hover {
color: var(--accent);
}
.site-nav li.current-menu-item a,
.site-nav li.current_page_item a {
color: transparent;
}
.site-nav li.current-menu-item a::after,
.site-nav li.current_page_item a::after {
opacity: 1;
} .home-hero {
padding: 120px 0 84px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.home-hero__note {
max-width: 220px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72em;
line-height: 1.55;
opacity: 0.6;
text-align: right;
flex-shrink: 0;
padding-bottom: 4px;
}
.home-hero__headline {
font-family: 'Instrument Serif', serif !important;
font-weight: 400 !important;
font-size: clamp(60px, 8.5vw, 136px) !important;
line-height: 0.92 !important;
letter-spacing: -0.035em;
margin: 0;
text-wrap: balance;
max-width: 11ch;
flex-shrink: 0;
}
.home-hero__headline em {
font-style: italic;
color: var(--accent);
}
.home-hero__headline .accent-punct {
color: var(--accent);
font-style: normal;
} .photo-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--gap);
}
.photo-tile {
position: relative;
text-decoration: none;
color: var(--ink);
display: block;
overflow: hidden;
}
.photo-tile:nth-child(1) { grid-column: span 4; }
.photo-tile:nth-child(2) { grid-column: span 2; }
.photo-tile:nth-child(3) { grid-column: span 2; }
.photo-tile:nth-child(4) { grid-column: span 2; }
.photo-tile:nth-child(5) { grid-column: span 2; }
.photo-tile:nth-child(6) { grid-column: span 6; }
.photo-tile__img-wrap {
width: 100%;
overflow: hidden;
position: relative;
background: #ddd6c8;
}
.photo-tile:nth-child(1) .photo-tile__img-wrap,
.photo-tile:nth-child(2) .photo-tile__img-wrap { height: 460px; }
.photo-tile:nth-child(3) .photo-tile__img-wrap,
.photo-tile:nth-child(4) .photo-tile__img-wrap,
.photo-tile:nth-child(5) .photo-tile__img-wrap { height: 320px; }
.photo-tile:nth-child(6) .photo-tile__img-wrap { height: 380px; }
.photo-tile__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1100ms cubic-bezier(.2,.8,.2,1);
}
.photo-tile__label {
position: absolute;
top: 16px;
left: 16px;
font-family: var(--display);
font-style: italic;
font-size: 2.2em;
color: var(--cream);
opacity: 0;
transition: opacity 500ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
transform: translateY(-6px);
text-shadow: 0 1px 30px rgba(0,0,0,0.4);
line-height: 1;
pointer-events: none;
}
.photo-tile__num {
position: absolute;
bottom: 14px;
right: 16px;
font-family: var(--mono);
font-size: 0.7em;
color: var(--cream);
opacity: 0.7;
letter-spacing: 0.08em;
pointer-events: none;
} .photo-tile:hover .photo-tile__img-wrap img {
transform: scale(1.06);
}
.photo-tile:hover .photo-tile__label {
opacity: 1;
transform: translateY(0);
} .site-footer {
margin-top: 120px;
padding-top: 28px;
border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: baseline;
font-family: var(--mono);
font-size: 0.78em;
}
.site-footer__copy {
opacity: 0.6;
}
.site-footer__tagline {
font-family: var(--display);
font-style: italic;
font-size: 1.6em;
color: var(--accent);
white-space: nowrap;
}
.site-footer__links {
text-align: right;
opacity: 0.6;
}
.site-footer__links a {
text-decoration: none;
color: var(--ink);
transition: color 200ms ease;
}
.site-footer__links a:hover { color: var(--accent); }
.site-footer__links .sep { opacity: 0.4; margin: 0 4px; } .page-hero {
padding: 64px 0 56px;
position: relative;
}
.page-hero__note {
position: absolute;
top: 60px;
right: 0;
max-width: 240px;
font-family: var(--mono);
font-size: 0.72em;
line-height: 1.55;
opacity: 0.6;
text-align: right;
}
.page-hero__kicker {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
margin-bottom: 14px;
letter-spacing: 0.06em;
}
.page-hero__title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 6.2vw, 99px);
line-height: 0.94;
letter-spacing: -0.03em;
margin: 0;
text-wrap: balance;
max-width: 14ch;
}
.page-hero__title em { font-style: italic; }
.page-hero__title .accent { color: var(--accent); }
.page-hero__count {
margin-top: 20px;
font-family: var(--mono);
font-size: 0.78em;
opacity: 0.55;
letter-spacing: 0.04em;
} .cat-strip {
display: flex;
gap: 18px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 0.82em;
margin-bottom: 56px;
padding-bottom: 24px;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
align-items: baseline;
}
.cat-strip a {
text-decoration: none;
color: var(--ink);
display: flex;
gap: 8px;
align-items: center;
transition: color 200ms ease;
}
.cat-strip a:hover,
.cat-strip a.active {
color: var(--accent);
font-style: italic;
font-family: var(--display);
font-size: 1.1em;
}
.cat-strip a .cat-idx { opacity: 0.4; font-size: 0.9em; } .gal-grid {
columns: 3;
column-gap: 28px;
}
.gal-tile {
display: block;
break-inside: avoid;
margin-bottom: 28px;
text-decoration: none;
color: var(--ink);
position: relative;
overflow: hidden;
}
.gal-tile__img-wrap {
width: 100%;
overflow: hidden;
background: #ddd6c8;
position: relative;
}
.gal-tile__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1100ms cubic-bezier(.2,.8,.2,1);
}
.gal-tile:hover .gal-tile__img-wrap img {
transform: scale(1.06);
}
.gal-tile__num {
position: absolute;
bottom: 12px;
right: 14px;
font-family: var(--mono);
font-size: 0.7em;
color: var(--cream);
opacity: 0.8;
letter-spacing: 0.08em;
}
.gal-tile__meta {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.7;
} .pagination {
margin-top: 64px;
display: flex;
justify-content: center;
gap: 24px;
font-family: var(--mono);
font-size: 0.85em;
align-items: baseline;
}
.pagination a,
.pagination span {
text-decoration: none;
color: var(--ink);
}
.pagination .current {
font-family: var(--display);
font-style: italic;
font-size: 1.3em;
color: var(--accent);
}
.pagination .prev,
.pagination .next { opacity: 0.6; } .vid-featured {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 56px;
text-decoration: none;
color: var(--ink);
}
.vid-featured__img-wrap {
position: relative;
width: 100%;
height: 540px;
background: #ddd6c8;
overflow: hidden;
}
.vid-featured__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1200ms cubic-bezier(.2,.8,.2,1);
}
.vid-featured:hover .vid-featured__img-wrap img {
transform: scale(1.03);
}
.vid-play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.vid-play-btn span {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--cream);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-style: italic;
font-size: 1.2em;
color: var(--accent);
box-shadow: 0 6px 30px rgba(0,0,0,0.3);
}
.vid-badge {
position: absolute;
top: 18px;
left: 18px;
font-family: var(--mono);
font-size: 0.72em;
color: var(--cream);
background: rgba(0,0,0,0.4);
padding: 4px 10px;
letter-spacing: 0.06em;
}
.vid-dur {
position: absolute;
bottom: 18px;
right: 18px;
font-family: var(--mono);
font-size: 0.72em;
color: var(--cream);
opacity: 0.85;
}
.vid-featured__meta {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
margin-top: 18px;
align-items: baseline;
}
.vid-featured__title {
margin: 0;
font-family: var(--display);
font-weight: 400;
font-size: 2.6em;
letter-spacing: -0.02em;
font-style: italic;
}
.vid-featured__tag {
font-family: var(--mono);
font-size: 0.78em;
opacity: 0.6;
}
.vid-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
.vid-tile {
display: block;
text-decoration: none;
color: var(--ink);
}
.vid-tile__img-wrap {
position: relative;
width: 100%;
height: 320px;
overflow: hidden;
background: #ddd6c8;
}
.vid-tile__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4);
transition: transform 1100ms cubic-bezier(.2,.8,.2,1), filter 600ms ease;
}
.vid-tile__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.85);
font-family: var(--display);
font-style: italic;
font-size: 2.2em;
color: var(--cream);
opacity: 0;
transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
text-shadow: 0 1px 30px rgba(0,0,0,0.5);
pointer-events: none;
}
.vid-tile:hover .vid-tile__img-wrap img {
transform: scale(1.06);
filter: grayscale(0);
}
.vid-tile:hover .vid-tile__play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.vid-tile__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 14px;
gap: 16px;
}
.vid-tile__title {
margin: 0;
font-family: var(--display);
font-weight: 400;
font-size: 1.6em;
font-style: italic;
letter-spacing: -0.01em;
}
.vid-tile__year {
font-family: var(--mono);
font-size: 0.7em;
opacity: 0.55;
white-space: nowrap;
}
.vid-tile__tag {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
margin-top: 4px;
letter-spacing: 0.04em;
} .tag-filter {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 0.82em;
margin-bottom: 48px;
padding-bottom: 22px;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
align-items: baseline;
}
.tag-filter__label {
opacity: 0.5;
font-size: 0.72em;
}
.tag-filter a {
text-decoration: none;
color: var(--ink);
transition: color 200ms ease;
}
.tag-filter a:hover,
.tag-filter a.active {
color: var(--accent);
font-style: italic;
font-family: var(--display);
font-size: 1.1em;
}
.blog-list { border-top: 1px solid color-mix(in srgb, var(--ink) 33%, transparent); }
.blog-row {
display: grid;
grid-template-columns: 170px 1fr 60px;
gap: 36px;
padding: 32px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
text-decoration: none;
color: var(--ink);
align-items: baseline;
position: relative;
}
.blog-row__date {
font-family: var(--mono);
font-size: 0.78em;
opacity: 0.5;
letter-spacing: 0.04em;
}
.blog-row__title {
margin: 0 0 12px;
font-family: var(--display);
font-weight: 400;
font-size: 2.4em;
letter-spacing: -0.015em;
line-height: 1.05;
transition: color 300ms ease;
}
.blog-row:hover .blog-row__title { color: var(--accent); }
.blog-row__excerpt {
margin: 0 0 14px;
font-family: var(--mono);
font-size: 0.88em;
line-height: 1.55;
opacity: 0.7;
max-width: 60ch;
}
.blog-row__tags {
font-family: var(--mono);
font-size: 0.7em;
opacity: 0.5;
letter-spacing: 0.06em;
display: flex;
gap: 12px;
}
.blog-row__arrow {
font-family: var(--display);
font-style: italic;
font-size: 2em;
color: var(--accent);
text-align: right;
opacity: 0.4;
transition: opacity 300ms ease, transform 400ms ease;
align-self: center;
}
.blog-row:hover .blog-row__arrow {
opacity: 1;
transform: translateX(8px);
} .subscribe-block {
margin-top: 80px;
padding: 48px 0;
border-top: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.subscribe-block__heading {
margin: 0;
font-family: var(--display);
font-weight: 400;
font-style: italic;
font-size: 2.6em;
letter-spacing: -0.02em;
line-height: 1.05;
}
.subscribe-block__heading .accent { color: var(--accent); }
.subscribe-form {
display: flex;
border-bottom: 1px solid var(--ink);
padding-bottom: 6px;
font-size: 0.95em;
}
.subscribe-form input {
flex: 1;
border: none;
background: transparent;
padding: 0;
outline: none;
color: var(--ink);
font-family: var(--mono);
}
.subscribe-form input::placeholder { opacity: 0.45; }
.subscribe-form button {
border: none;
background: transparent;
font-family: var(--display);
font-style: italic;
font-size: 1.2em;
color: var(--accent);
cursor: pointer;
padding: 0 4px;
}
.subscribe-note {
margin-top: 12px;
font-family: var(--mono);
font-size: 0.7em;
opacity: 0.5;
letter-spacing: 0.04em;
} .about-intro {
display: grid;
grid-template-columns: 1fr 380px;
gap: 64px;
margin-bottom: 80px;
align-items: start;
}
.about-intro__text {
font-family: var(--mono);
font-size: 0.95em;
line-height: 1.7;
color: #2a2722;
}
.about-intro__text p { margin: 0 0 20px; }
.about-intro__text p:last-child { margin-bottom: 0; }
.about-portrait {
width: 100%;
overflow: hidden;
background: #ddd6c8;
}
.about-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-portrait-cap {
margin-top: 10px;
font-family: var(--mono);
font-size: 0.7em;
opacity: 0.55;
letter-spacing: 0.04em;
display: flex;
justify-content: space-between;
}
.about-section {
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
padding: 40px 0;
border-top: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
}
.about-section + .about-section {
border-top: none;
}
.about-section__heading {
margin: 0;
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 1.8em;
}
.currently-list {
margin: 0;
padding: 0;
list-style: none;
font-family: var(--mono);
font-size: 0.92em;
line-height: 1.7;
}
.currently-list li {
display: grid;
grid-template-columns: 160px 1fr;
gap: 20px;
padding: 8px 0;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 33%, transparent);
}
.currently-list li:last-child { border-bottom: none; }
.currently-list .k { opacity: 0.55; }
.currently-list .v {
font-style: italic;
font-family: var(--display);
font-size: 1.1em;
}
.clients-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px 32px;
font-family: var(--mono);
font-size: 0.92em;
}
.clients-grid span { opacity: 0.85; }
.tools-list {
font-family: var(--mono);
font-size: 0.92em;
line-height: 1.7;
}
.tools-list .label { opacity: 0.55; }
.about-quote {
padding: 80px 0 40px;
text-align: center;
}
.about-quote blockquote {
margin: 0 auto;
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 2.6em;
line-height: 1.2;
letter-spacing: -0.015em;
max-width: 24ch;
text-wrap: balance;
}
.about-quote .q-mark { color: var(--accent); }
.about-quote .emphasis { color: var(--accent); }
.about-quote .attribution {
margin-top: 18px;
font-family: var(--mono);
font-size: 0.78em;
opacity: 0.55;
letter-spacing: 0.06em;
} .contact-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
margin-bottom: 80px;
align-items: start;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 36px;
}
.form-field label {
display: block;
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.form-field input,
.form-field textarea {
width: 100%;
border: none;
border-bottom: 1px solid var(--ink);
background: transparent;
font-family: var(--display);
font-size: 1.5em;
padding: 4px 0 10px;
outline: none;
color: var(--ink);
font-style: italic;
}
.form-field textarea {
font-family: var(--mono);
font-size: 1em;
resize: vertical;
line-height: 1.55;
}
.form-field input::placeholder,
.form-field textarea::placeholder { opacity: 0.4; }
.chips-label {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
letter-spacing: 0.06em;
margin-bottom: 14px;
display: block;
}
.chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.chip {
font-family: var(--mono);
font-size: 0.85em;
padding: 8px 14px;
border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
color: var(--ink);
cursor: pointer;
transition: border-color 200ms, color 200ms;
background: transparent;
}
.chip:hover,
.chip.active {
border-color: var(--accent);
color: var(--accent);
font-style: italic;
font-family: var(--display);
}
.contact-submit {
align-self: flex-start;
margin-top: 8px;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--cream);
font-family: var(--display);
font-style: italic;
font-size: 1.4em;
padding: 14px 28px;
cursor: pointer;
letter-spacing: -0.01em;
transition: background 200ms, color 200ms;
}
.contact-submit:hover {
background: var(--accent);
border-color: var(--accent);
}
.contact-submit .arrow { color: var(--accent); }
.contact-submit:hover .arrow { color: var(--cream); }
.contact-sidebar {
display: flex;
flex-direction: column;
gap: 40px;
}
.contact-sidebar__label {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.contact-email {
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 2.2em;
color: var(--accent);
text-decoration: none;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--accent);
padding-bottom: 4px;
display: inline-block;
}
.contact-links {
margin: 0;
padding: 0;
list-style: none;
font-family: var(--mono);
font-size: 0.95em;
line-height: 2;
}
.contact-links li {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 33%, transparent);
padding: 4px 0;
}
.contact-links .lk { opacity: 0.55; }
.contact-links a {
text-decoration: none;
color: var(--ink);
transition: color 200ms ease;
}
.contact-links a:hover { color: var(--accent); }
.contact-location {
font-family: var(--display);
font-style: italic;
font-size: 1.6em;
line-height: 1.3;
}
.contact-location-note {
font-family: var(--mono);
font-style: normal;
font-size: 0.85em;
opacity: 0.6;
display: block;
margin-top: 4px;
}
.contact-closer {
padding: 60px 0 20px;
border-top: 1px solid color-mix(in srgb, var(--ink) 33%, transparent);
text-align: center;
}
.contact-closer__text {
font-family: var(--display);
font-style: italic;
font-size: clamp(36px, 4.6vw, 74px);
letter-spacing: -0.02em;
line-height: 1;
color: var(--ink);
}
.contact-closer__text .accent { color: var(--accent); } .entry-wrap {
max-width: 720px;
}
.entry-header {
padding: 64px 0 48px;
}
.entry-header__kicker {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
letter-spacing: 0.06em;
margin-bottom: 14px;
}
.entry-header__title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 4vw, 64px);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0;
}
.entry-content {
font-family: var(--mono);
font-size: 0.95em;
line-height: 1.75;
color: #2a2722;
}
.entry-content p { margin: 0 0 1.5em; }
.entry-content h2, .entry-content h3 {
font-family: var(--display);
font-style: italic;
font-weight: 400;
margin: 2em 0 0.5em;
}
.entry-content blockquote {
border-left: 2px solid var(--accent);
margin-left: 0;
padding-left: 24px;
font-style: italic;
font-family: var(--display);
font-size: 1.4em;
line-height: 1.4;
color: var(--ink);
}
.entry-content a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
} .not-found {
padding: 120px 0 80px;
max-width: 16ch;
}
.not-found__code {
font-family: var(--mono);
font-size: 0.72em;
opacity: 0.55;
letter-spacing: 0.08em;
margin-bottom: 18px;
}
.not-found__heading {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 7vw, 112px);
line-height: 0.92;
letter-spacing: -0.03em;
margin: 0 0 32px;
}
.not-found__heading em { font-style: italic; color: var(--accent); }
.not-found__link {
font-family: var(--mono);
font-size: 0.88em;
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
transition: color 200ms, border-color 200ms;
}
.not-found__link:hover {
color: var(--accent);
border-color: var(--accent);
} .divider-dashed {
border: none;
border-top: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
margin: 0;
}
.opacity-55 { opacity: 0.55; }
.accent-color { color: var(--accent); }
.italic { font-style: italic; }
.display { font-family: var(--display); } @media (max-width: 1100px) {
:root { --pad-x: 40px; }
.photo-grid { grid-template-columns: repeat(4, 1fr); }
.photo-tile:nth-child(1) { grid-column: span 4; }
.photo-tile:nth-child(2) { grid-column: span 2; }
.photo-tile:nth-child(3) { grid-column: span 2; }
.photo-tile:nth-child(4) { grid-column: span 2; }
.photo-tile:nth-child(5) { grid-column: span 2; }
.photo-tile:nth-child(6) { grid-column: span 4; }
.gal-grid { columns: 2; }
.about-intro { grid-template-columns: 1fr; }
.about-intro { grid-template-columns: 1fr 300px; gap: 40px; }
}
@media (max-width: 820px) {
:root { --pad-x: 24px; --pad-y: 24px; --gap: 18px; }
.home-hero__note { display: none; }
.photo-grid { grid-template-columns: repeat(2, 1fr); }
.photo-tile:nth-child(n) { grid-column: span 1; }
.photo-tile:nth-child(1),
.photo-tile:nth-child(6) { grid-column: span 2; }
.photo-tile:nth-child(1) .photo-tile__img-wrap,
.photo-tile:nth-child(2) .photo-tile__img-wrap,
.photo-tile:nth-child(3) .photo-tile__img-wrap,
.photo-tile:nth-child(4) .photo-tile__img-wrap,
.photo-tile:nth-child(5) .photo-tile__img-wrap { height: 260px; }
.photo-tile:nth-child(6) .photo-tile__img-wrap { height: 220px; }
.gal-grid { columns: 2; }
.vid-grid { grid-template-columns: 1fr; }
.blog-row { grid-template-columns: 1fr; gap: 8px; }
.blog-row__date { display: none; }
.blog-row__arrow { display: none; }
.contact-layout { grid-template-columns: 1fr; }
.about-intro { grid-template-columns: 1fr; }
.about-section { grid-template-columns: 1fr; gap: 20px; }
.clients-grid { grid-template-columns: repeat(2, 1fr); }
.subscribe-block { grid-template-columns: 1fr; }
.site-footer { grid-template-columns: 1fr; gap: 12px; }
.site-footer__tagline { text-align: left; }
.site-footer__links { text-align: left; }
.site-nav { display: none; } .mobile-nav-toggle { display: flex; }
}
@media (min-width: 821px) {
.mobile-nav-toggle { display: none; }
.mobile-nav { display: none; }
} .mobile-nav-toggle {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: none;
flex-direction: column;
gap: 5px;
align-items: flex-end;
}
.mobile-nav-toggle span {
display: block;
height: 1px;
background: var(--ink);
transition: width 200ms ease;
}
.mobile-nav-toggle span:nth-child(1) { width: 24px; }
.mobile-nav-toggle span:nth-child(2) { width: 16px; }
.mobile-nav-toggle span:nth-child(3) { width: 20px; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { width: 24px; transform: rotate(45deg) translate(4px, 4px); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: rotate(-45deg) translate(4px, -4px); }
.mobile-nav {
position: fixed;
inset: 0;
background: var(--cream);
z-index: 100;
display: flex;
flex-direction: column;
padding: var(--pad-y) var(--pad-x);
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease;
}
.mobile-nav.is-open {
opacity: 1;
pointer-events: all;
}
.mobile-nav__close {
align-self: flex-end;
background: none;
border: none;
cursor: pointer;
font-family: var(--mono);
font-size: 0.85em;
color: var(--ink);
padding: 0;
margin-bottom: 48px;
}
.mobile-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-nav li { display: flex; align-items: center; gap: 16px; }
.mobile-nav li .nav-index { font-size: 0.65em; opacity: 0.4; }
.mobile-nav li a {
font-family: var(--display);
font-style: italic;
font-size: 2.8em;
text-decoration: none;
color: var(--ink);
line-height: 1.1;
transition: color 200ms ease;
}
.mobile-nav li a:hover,
.mobile-nav li.current-menu-item a { color: var(--accent); } .admin-bar .site-wrap { padding-top: calc(var(--pad-y) + 32px); }