/* mohanraj.net: page styles, moved out of index.php in v3.0 */
:root {
--red: #D0021B;
--black: #111111;
--white: #ffffff;
--gray: #888888;
--light: #f4f4f4;
--border: #e0e0e0;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { overflow-x: hidden; }
body {
background: var(--white);
color: var(--black);
font-family: 'Inter', sans-serif;
font-weight: 300;
line-height: 1.6;
overflow-x: hidden;
}
h1,h2,h3,h4 {
font-family: 'EB Garamond', Georgia, serif;
font-weight: 400;
line-height: 1.15;
}
.mono {
font-family: 'Inter', monospace;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray);
}
.red { color: var(--red); }
a { color: inherit; text-decoration: none; }
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: var(--white);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
padding: 0 3rem; height: 60px;
}
.nav-logo img {
height: 36px; width: 36px;
object-fit: cover; border-radius: 3px;
}
.nav-links {
display: flex; gap: 1.9rem; list-style: none; margin: 0 2rem 0 auto;
}
.nav-links a {
font-size: 0.92rem; letter-spacing: 0.01em;
color: var(--black); transition: color 0.2s;
}
.nav-links a:hover { color: var(--red); }
.nav-cta {
font-size: 0.85rem; letter-spacing: 0.04em; white-space: nowrap;
background: var(--red); color: var(--white);
padding: 0.55rem 1.3rem; transition: background 0.2s;
}
.nav-cta:hover { background: var(--black); }
section { padding: 100px 0; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 3rem; }
#hero {
min-height: 100vh;
display: grid; grid-template-columns: 1fr 1fr;
margin-top: 60px; padding: 0;
}
.hero-text {
display: flex; flex-direction: column; justify-content: center;
padding: 6rem 5rem 6rem 3rem;
border-right: 1px solid var(--border);
}
.hero-eyebrow {
font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gray); margin-bottom: 2.5rem;
display: flex; align-items: center; gap: 1rem;
}
.hero-eyebrow::before {
content: ''; display: block;
width: 30px; height: 1px; background: var(--red);
}
.hero-h1 {
font-size: clamp(3.5rem, 5vw, 5.5rem);
line-height: 1.05; margin-bottom: 2rem;
}
.hero-h1 em { font-style: italic; color: var(--red); }
.hero-sub {
font-size: 1rem; line-height: 1.8; color: #555;
max-width: 380px; margin-bottom: 3.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn {
display: inline-block; padding: 0.75rem 1.8rem;
font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
transition: all 0.2s; cursor: pointer; border: none; font-family: 'Inter', sans-serif;
}
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--red); }
.btn-outline { border: 1px solid var(--border); color: var(--black); background: transparent; }
.btn-outline:hover { border-color: var(--black); }
.hero-image {
position: relative; overflow: hidden;
background: var(--light);
}
.hero-image img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
}
.hero-caption {
position: absolute; bottom: 0; left: 0; right: 0;
background: var(--white); border-top: 1px solid var(--border);
padding: 0.9rem 1.5rem;
display: flex; justify-content: space-between; align-items: center;
}
.hero-caption span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.camel-badge {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--red);
}
.camel-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.divider {
width: 100%; height: 1px; background: var(--border);
}
.section-label {
font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gray); margin-bottom: 1.5rem;
display: flex; align-items: center; gap: 1rem;
}
.section-label .num { color: var(--red); }
.stats-bar {
background: var(--black); color: var(--white);
padding: 3rem;
display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat-item {
padding: 0 3rem; border-left: 1px solid rgba(255,255,255,0.1);
text-align: center;
}
.stat-item:first-child { border-left: none; }
.stat-n {
font-family: 'EB Garamond', serif;
font-size: 3.5rem; line-height: 1; color: var(--white);
margin-bottom: 0.5rem;
}
.stat-n span { color: var(--red); }
.stat-l {
font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.about-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: start;
}
.about-portrait {
position: sticky; top: 100px; min-width: 0;
}
.about-portrait img {
width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top;
}
.portrait-tag {
margin-top: 1rem; padding: 0.8rem;
border: 1px solid var(--border);
display: flex; align-items: center; gap: 0.8rem;
}
.portrait-tag img { height: 24px !important; width: 24px !important; max-width: 24px !important; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.portrait-tag span {
font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray);
}
.about-body h2 {
font-size: clamp(2.2rem, 3.5vw, 3.5rem); margin-bottom: 2rem;
}
.about-body p {
font-size: 1.05rem; line-height: 1.85; color: #444; margin-bottom: 1.5rem;
}
.about-body strong { font-weight: 500; color: var(--black); }
.about-links {
margin-top: 2.5rem; display: flex; flex-direction: column;
border-top: 1px solid var(--border);
}
.about-link-item {
display: flex; justify-content: space-between; align-items: center;
padding: 1rem 0; border-bottom: 1px solid var(--border);
text-decoration: none; color: var(--black);
transition: color 0.2s;
}
.about-link-item:hover { color: var(--red); }
.about-link-item span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.about-link-item .arrow { font-size: 0.9rem; }
#gallery { background: var(--white); }
.gallery-intro {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 4rem;
}
.gallery-intro h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.ig-note {
text-align: right; max-width: 260px;
}
.ig-note p {
font-size: 0.8rem; color: var(--gray); line-height: 1.6; margin-bottom: 0.8rem;
}
.ig-link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--red); border-bottom: 1px solid var(--red); padding-bottom: 2px;
}
.ig-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-bottom: 3rem;
}
.ig-cell {
aspect-ratio: 1;
position: relative; overflow: hidden;
background: var(--light);
cursor: pointer;
}
.ig-cell img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.4s ease;
}
.ig-cell:hover img { transform: scale(1.04); }
.ig-cell-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.5);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 0.3rem;
opacity: 0; transition: opacity 0.3s;
}
.ig-cell:hover .ig-cell-overlay { opacity: 1; }
.ig-cell-overlay span {
font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--white);
}
.ig-embed-note {
padding: 2rem; background: var(--light); border: 1px solid var(--border);
text-align: center;
}
.ig-embed-note p {
font-size: 0.8rem; color: var(--gray); line-height: 1.7;
}
.selected-works { margin-top: 4rem; }
.selected-works-heading { margin-bottom: 1.5rem; }
.selected-works-heading h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin-bottom: 0.4rem; }
.selected-works-heading p { color: var(--gray); font-size: 0.9rem; line-height: 1.7; }
.selected-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.selected-work-card { min-width: 0; border: 1px solid var(--border); background: var(--white); }
.selected-work-image { position: relative; aspect-ratio: 4 / 3; background: var(--light); overflow: hidden; }
.selected-work-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.selected-work-caption { padding: 1rem 1.1rem 1.2rem; }
.selected-work-caption h4 { font-size: 1rem; font-weight: 500; margin-bottom: 0.4rem; }
.selected-work-caption p { color: var(--gray); font-size: 0.78rem; line-height: 1.55; }
.selected-work-status { display: block; margin-top: 0.65rem; color: var(--gray); font-size: 0.65rem; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; }
.selected-work-status.available { color: var(--red); }
.ig-embed-note a { color: var(--red); border-bottom: 1px solid var(--red); }
#ig-feed {
min-height: 300px;
}
.ig-placeholder {
aspect-ratio: 1;
background: var(--light);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 0.6rem;
border: 1px solid var(--border);
}
.ig-placeholder .ig-icon { font-size: 2rem; opacity: 0.2; }
.ig-placeholder p { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
#exhibitions { background: var(--light); }
.ex-list { border-top: 1px solid var(--border); }
.ex-row {
display: grid; grid-template-columns: 100px 1fr auto;
gap: 3rem; align-items: center;
padding: 1.6rem 0; border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.ex-row:hover { background: rgba(208,2,27,0.02); }
.ex-year { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.ex-name { font-family: 'EB Garamond', serif; font-size: 1.3rem; font-style: italic; }
.ex-venue { font-size: 0.75rem; color: var(--gray); margin-top: 0.2rem; }
.ex-tag {
font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
padding: 0.3rem 0.8rem; border: 1px solid var(--border); color: var(--gray);
white-space: nowrap;
}
.ex-tag.intl, .ex-tag.live { border-color: var(--red); color: var(--red); }
.event-card-featured { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.event-card-featured .event-posters { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); align-content:start; }
.event-card-featured .event-posters img { display:block; width:100%; height:auto; background:var(--light); }
.event-card blockquote { font-family:'EB Garamond',serif; font-style:italic; font-size:1.15rem; line-height:1.6; margin:1.1rem 0; padding-left:1rem; border-left:2px solid var(--red); }
@media (max-width:900px){ .event-card-featured { grid-template-columns:1fr; } }
.event-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:0 0 4rem; }
.event-card { background:var(--white); border:1px solid var(--border); }
.event-poster { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; background:var(--light); }
.event-card-body { padding:1.5rem; }
.event-date { color:var(--red); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.65rem; }
.event-card h3 { font-family:'EB Garamond',serif; font-size:1.65rem; font-weight:400; margin-bottom:.45rem; }
.event-place { color:var(--gray); font-size:.78rem; margin-bottom:.9rem; }
.event-card p { color:var(--gray); font-size:.88rem; line-height:1.7; }
.event-detail-image { display:block; width:100%; max-height:340px; object-fit:cover; margin-top:1.15rem; }
.event-photo-pair { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.15rem; }
.event-photo-pair img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.workshop-section { background:var(--black); color:var(--white); padding:clamp(3rem,7vw,7rem) 3rem; }
.workshop-grid { max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.workshop-image { width:100%; display:block; max-height:680px; object-fit:cover; object-position:center; }
.workshop-section h2 { font-size:clamp(2.5rem,5vw,4.5rem); margin:1rem 0; }
.workshop-section p { max-width:34rem; color:rgba(255,255,255,.72); line-height:1.8; margin-bottom:1.5rem; }
.workshop-section .section-label { color:rgba(255,255,255,.55); }
.workshop-section .btn-shop { background:var(--white); color:var(--red); }
.workshop-grid { align-items:start; }
.ws-list { list-style:none; margin:0 0 2.25rem; padding:0; border-top:1px solid rgba(255,255,255,.18); }
.ws-item { display:grid; grid-template-columns:9.5rem 1fr auto; gap:1.5rem; padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,.18); align-items:baseline; }
.ws-date { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); line-height:1.6; }
.ws-date span { display:block; color:rgba(255,255,255,.5); letter-spacing:.1em; }
.ws-body h3 { font-family:'EB Garamond', Georgia, serif; font-weight:400; font-size:1.7rem; line-height:1.1; margin:0 0 .35rem; color:var(--white); }
.workshop-section .ws-body p { margin:0; font-size:.9rem; line-height:1.6; }
.ws-price { font-family:'EB Garamond', Georgia, serif; font-size:1.4rem; color:var(--white); white-space:nowrap; }
.ws-next h3, .ws-next .ws-date { color:rgba(255,255,255,.55); }
.ws-free .ws-body a { color:var(--white); text-decoration:underline; text-underline-offset:3px; font-size:.82rem; letter-spacing:.06em; }
.ws-free .ws-body p + p { margin-top:.6rem; }
.ws-free .ws-price { font-family:'Inter', sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.workshop-section p.ws-note { font-size:.78rem; margin:1rem 0 0; color:rgba(255,255,255,.5); }
@media (max-width:600px) {
  .ws-item { grid-template-columns:1fr auto; gap:.5rem 1rem; }
  .ws-date { grid-column:1 / -1; }
}
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error { padding:.8rem 1rem; border-left:3px solid var(--red); background:#fff0f0; color:var(--black); font-size:.85rem; }
.ach-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
background: var(--border); margin-top: 4rem;
}
.ach-cell {
background: var(--white); padding: 2.5rem;
}
.ach-cell .ach-marker {
width: 8px; height: 8px; border-radius: 50%; background: var(--red);
margin-bottom: 1.5rem;
}
.ach-cell h4 {
font-size: 1.1rem; margin-bottom: 0.6rem;
}
.ach-cell p { font-size: 0.85rem; color: var(--gray); line-height: 1.7; }
#photography { background: var(--white); }
.photo-intro {
display: grid; grid-template-columns: 1fr 1fr; gap: 8rem;
margin-bottom: 4rem; align-items: end;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: auto auto;
gap: 2px;
}
.photo-cell {
background: var(--light); overflow: hidden; position: relative;
}
.photo-cell.tall { grid-row: span 2; }
.photo-cell-inner {
width: 100%; aspect-ratio: 1; background: var(--light);
display: flex; align-items: center; justify-content: center;
color: var(--gray); font-size: 0.65rem; letter-spacing: 0.15em;
text-transform: uppercase; flex-direction: column; gap: 0.5rem;
}
.photo-cell.tall .photo-cell-inner { aspect-ratio: unset; height: 100%; }
.flickr-cta {
margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between;
padding: 1.5rem 2rem; border: 1px solid var(--border);
}
.flickr-cta span { font-size: 0.8rem; color: var(--gray); }
#blog { background: var(--light); }
.blog-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem;
max-width: 1000px; margin-inline: auto;
}
.blog-card {
background: var(--white); border: 1px solid var(--border);
display: flex; flex-direction: column; min-width: 0;
}
.blog-card-img {
width: 100%; height: 240px; overflow: hidden; background: var(--light);
}
.blog-card-img img { display:block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.blog-tag {
font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--red); margin-bottom: 1rem;
}
.blog-card-body h3 {
font-size: 1.5rem; line-height: 1.25; margin-bottom: 1rem;
}
.blog-card-body p {
font-size: 0.9rem; color: var(--gray); line-height: 1.75;
flex: 1; margin-bottom: 1.5rem;
}
.blog-read {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--black); border-bottom: 1px solid var(--black);
padding-bottom: 2px; transition: color 0.2s;
}
.blog-read:hover { color: var(--red); border-color: var(--red); }
.blog-footer {
margin-top: 3rem; padding: 1.5rem 2rem; background: var(--white);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.blog-footer p { font-size: 0.8rem; color: var(--gray); }
#camel {
background: var(--black); color: var(--white);
padding: 80px 0;
}
.camel-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center;
}
.camel-text .mono { color: rgba(255,255,255,0.35); margin-bottom: 2rem; }
.camel-text h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); color: var(--white); margin-bottom: 1.5rem; }
.camel-text p { font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.8; margin-bottom: 2rem; }
.btn-camel {
display: inline-block; padding: 0.85rem 2rem;
font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
background: var(--red); color: var(--white); transition: background 0.2s;
}
.btn-camel:hover { background: rgba(255,255,255,0.1); }
.camel-profile {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
padding: 3rem;
}
.camel-profile-top {
display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem;
padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.camel-avatar {
width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.camel-avatar img { width:100%; height:100%; object-fit:cover; object-position: center top; }
.camel-name { font-family: 'EB Garamond', serif; font-size: 1.3rem; color: var(--white); }
.camel-role { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-top: 0.3rem; }
.camel-stats-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.camel-stat { text-align: center; }
.camel-stat-n { font-family: 'EB Garamond', serif; font-size: 2.5rem; color: var(--white); }
.camel-stat-l { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-top: 0.2rem; }
#design { background: var(--white); }
.roles-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--border); border: 1px solid var(--border);
margin-top: 4rem;
}
.role-card {
background: var(--white); padding: 2.5rem 2rem;
}
.role-co { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.role-title { font-family: 'EB Garamond', serif; font-size: 1.35rem; margin-bottom: 0.4rem; }
.role-period { font-size: 0.7rem; color: var(--gray); margin-bottom: 1.2rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.7rem; background: var(--light); color: var(--gray); }
#shop {
background: var(--white); color: var(--black);
padding: 100px 0; text-align: center; border-top: 1px solid var(--border);
}
#shop .container { max-width: 640px; }
.shop-eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 1.5rem; }
#shop h2 { font-size: clamp(2.5rem, 4vw, 4rem); color: var(--black); margin-bottom: 1.5rem; }
#shop p { font-size: 1rem; color: #555; margin-bottom: 3rem; line-height: 1.8; }
.btn-shop {
display: inline-block; padding: 1rem 2.5rem;
font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
background: var(--white); color: var(--red); transition: background 0.2s;
}
.btn-shop:hover { background: var(--black); color: var(--white); }
#shop .btn-shop { background: var(--white); color: var(--black); border: 1px solid var(--black); }
#shop .btn-shop:hover { background: var(--black); color: var(--white); }
#contact { background: var(--white); }
.contact-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8rem;
}
#contact h2 { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 2rem; }
#contact p { font-size: 1rem; color: var(--gray); line-height: 1.8; margin-bottom: 3rem; }
.contact-links { display: flex; flex-direction: column; }
.c-link {
display: flex; justify-content: space-between; align-items: center;
padding: 1rem 0; border-bottom: 1px solid var(--border);
text-decoration: none; color: var(--black); transition: color 0.15s;
}
.c-link:first-child { border-top: 1px solid var(--border); }
.c-link:hover { color: var(--red); }
.c-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); }
.c-value { font-size: 0.9rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.f-field { display: flex; flex-direction: column; gap: 0.4rem; }
.f-label { font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); }
.f-field input, .f-field textarea, .f-field select {
border: 1px solid var(--border); padding: 0.8rem;
font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--black);
background: var(--white); outline: none; transition: border-color 0.2s;
border-radius: 0; -webkit-appearance: none;
}
.f-field input:focus, .f-field textarea:focus { border-color: var(--black); }
.f-field textarea { height: 130px; resize: none; }
.btn-send {
align-self: flex-start; padding: 0.85rem 2rem;
background: var(--black); color: var(--white);
font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
border: none; cursor: pointer; font-family: 'Inter', sans-serif;
transition: background 0.2s;
}
.btn-send:hover { background: var(--red); }
footer {
background: var(--black); color: rgba(255,255,255,0.3);
padding: 2rem 3rem;
display: flex; align-items: center; justify-content: space-between;
border-top: 3px solid var(--red);
}
.footer-left { display: flex; align-items: center; gap: 1rem; }
.footer-left img { height: 28px; width: 28px; object-fit: cover; border-radius: 2px; }
.footer-name { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.footer-copy { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.3); transition: color 0.2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.ph-grid {
columns: 4;
column-gap: 3px;
margin-bottom: 3px;
}
.ph-card {
break-inside: avoid;
margin-bottom: 3px;
overflow: hidden;
background: var(--light);
display: block;
}
.ph-card a {
display: block;
overflow: hidden;
}
.ph-card img {
width: 100%;
display: block;
transition: transform 0.4s ease, filter 0.4s ease;
filter: grayscale(8%);
}
.ph-card:hover img {
transform: scale(1.04);
filter: grayscale(0%);
}
html, body {
overflow-x: hidden;
max-width: 100%;
}
img { max-width: 100%; }
@media (max-width: 768px) {
nav {
padding: 0 1.2rem;
flex-wrap: wrap;
}
.nav-links {
display: none; 
}
#hero {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-text {
padding: 5rem 1.5rem 3rem;
border-right: none;
border-bottom: 1px solid var(--border);
}
.hero-h1 { font-size: 3rem; }
.hero-image { min-height: 60vw; }
.stats-bar {
grid-template-columns: 1fr 1fr;
padding: 2rem 1.5rem;
gap: 0;
}
.stat-item {
padding: 1.5rem 1rem;
border-left: none;
border-top: 1px solid rgba(255,255,255,0.1);
}
.stat-item:nth-child(odd) { border-left: none; }
.stat-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.1); }
.stat-item:nth-child(1), .stat-item:nth-child(2) { border-top: none; }
.stat-n { font-size: 2.5rem; }
.container { padding: 0 1.5rem; }
section { padding: 60px 0; }
#about .about-grid {
display: flex !important;
flex-direction: column !important;
grid-template-columns: unset !important;
gap: 0 !important;
width: 100% !important;
}
#about .about-portrait {
position: static !important;
order: 2;
width: 100% !important;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
#about .about-portrait img {
width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: unset !important;
object-fit: cover;
object-position: center;
}
.portrait-tag { margin-top: 0.8rem; }
#about .about-body {
order: 1;
width: 100% !important;
}
#about .about-body h2 {
font-size: 2rem;
line-height: 1.2;
}
#about .about-body p {
font-size: 0.95rem;
line-height: 1.75;
}
.gallery-intro {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.ig-note { text-align: left; max-width: 100%; }
.selected-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.selected-work-caption { padding: 0.85rem; }
.ex-row {
grid-template-columns: 1fr;
gap: 0.4rem;
padding: 1.2rem 0;
}
.ex-year { margin-bottom: 0.2rem; }
.ex-tag { justify-self: start; margin-top: 0.4rem; }
.ach-grid {
grid-template-columns: 1fr;
}
#photography .photo-intro {
display: flex !important;
flex-direction: column !important;
grid-template-columns: unset !important;
gap: 2rem !important;
width: 100% !important;
}
#photography .photo-intro > div {
width: 100% !important;
min-width: 0 !important;
}
.ph-grid {
columns: 2;
}
.flickr-cta {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
padding: 1.2rem;
}
.blog-footer {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.camel-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
.camel-profile { padding: 2rem; }
.roles-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
footer {
flex-direction: column;
gap: 1rem;
padding: 2rem 1.5rem;
text-align: center;
}
.footer-left { justify-content: center; }
.footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}
@media (max-width: 480px) {
.hero-h1 { font-size: 2.4rem; }
.ph-grid { columns: 2; }
.stats-bar { grid-template-columns: 1fr 1fr; }
.camel-stats-row { grid-template-columns: 1fr 1fr; }
.hero-actions { flex-direction: column; }
.btn { text-align: center; }
.selected-work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .event-grid,.workshop-grid { grid-template-columns:1fr; }
  .workshop-section { padding:3rem 1.5rem; }
  .event-card-body { padding:1.2rem; }
}
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap:2rem; }
  .blog-card-img { height:clamp(190px, 34vw, 260px); }
}

/* Content visibility — skip rendering off-screen sections */
#photography, #blog, #camel, #design, #shop, #contact {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
/* Smooth image rendering */
img {
  image-rendering: auto;
}
/* ── 2027 calendar (added 12 Nov 2026) ── */
#calendar { background:var(--white); border-bottom:1px solid var(--border); }
.cal-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:4.5rem; align-items:center; }
.cal-figure img { display:block; width:100%; height:auto; background:var(--light); }
.cal-figure figcaption { margin-top:.7rem; font-size:.72rem; line-height:1.6; color:var(--gray); }
.cal-body h2 { font-size:clamp(2.5rem,4vw,4rem); margin-bottom:1.5rem; }
.cal-lede { max-width:34rem; font-size:1rem; line-height:1.8; color:#555; margin-bottom:2rem; }
.cal-prices { list-style:none; max-width:34rem; border-top:1px solid var(--border); margin-bottom:2rem; }
.cal-prices li { display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding:1.05rem 0; border-bottom:1px solid var(--border); }
.cal-item { font-family:'EB Garamond', Georgia, serif; font-size:1.35rem; line-height:1.2; }
.cal-item small { display:block; margin-top:.25rem; font-family:'Inter', sans-serif; font-size:.75rem; color:var(--gray); }
.cal-price { font-family:'EB Garamond', Georgia, serif; font-size:1.4rem; white-space:nowrap; }
#calendar .btn-shop { background:var(--red); color:var(--white); }
#calendar .btn-shop:hover { background:var(--black); }
.cal-ship { max-width:34rem; margin-top:1.4rem; font-size:.88rem; line-height:1.7; }
.cal-ship b { font-weight:400; color:var(--red); }
.cal-note { max-width:34rem; margin-top:.6rem; font-size:.78rem; line-height:1.7; color:var(--gray); }
.cal-note a { text-decoration:underline; text-underline-offset:3px; }
.cal-note a:hover { color:var(--red); }
/* Blue Sky Saturday: registration closed */
.ws-full .ws-price { color:rgba(255,255,255,.55); }
.workshop-section p.ws-note a { color:var(--white); text-decoration:underline; text-underline-offset:3px; }
/* Exhibitions: intro line, gallery photo, press row, media playlist */
.ex-intro { max-width:34rem; margin:0 0 3rem; font-size:.95rem; line-height:1.7; color:var(--gray); }
.event-lead { grid-column:1 / -1; border-bottom:1px solid var(--border); }
.event-lead img { display:block; width:100%; height:auto; background:var(--light); }
.event-lead figcaption { padding:.8rem 1.5rem; font-size:.75rem; line-height:1.6; color:var(--gray); }
.press { margin-top:1.75rem; }
.press h4 { font-family:'EB Garamond', Georgia, serif; font-size:1.25rem; font-weight:400; margin-bottom:.2rem; }
.event-card p.press-note { font-size:.78rem; margin-bottom:.9rem; }
.press-list { list-style:none; border-top:1px solid var(--border); }
.press-list a { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:1rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--border); transition:color .2s; }
.press-list a:hover { color:var(--red); }
.press-thumb { display:block; width:44px; height:44px; object-fit:cover; background:var(--light); }
.press-play { display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--black); }
.press-play::before { content:''; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--white); margin-left:2px; }
.press-src { display:block; font-family:'EB Garamond', Georgia, serif; font-size:1.15rem; line-height:1.2; }
.press-meta { display:block; margin-top:.15rem; font-size:.75rem; line-height:1.5; color:var(--gray); }
.press-go { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); white-space:nowrap; }
.media-block { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:3rem; align-items:center; margin:0 0 4rem; padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.media-text h3 { font-size:clamp(1.6rem,2.5vw,2.2rem); margin-bottom:.6rem; }
.media-text p { max-width:26rem; margin-bottom:1.2rem; font-size:.9rem; line-height:1.7; color:var(--gray); }
.media-player { position:relative; aspect-ratio:16 / 9; background:var(--black); }
.media-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.media-load { position:absolute; inset:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:1.5rem; background:transparent; border:0; color:var(--white); font-family:'Inter', sans-serif; font-weight:300; cursor:pointer; transition:background .2s; }
.media-load:hover, .media-load:focus-visible { background:var(--red); }
.media-load:focus-visible { outline:2px solid var(--white); outline-offset:-6px; }
.media-play { display:flex; align-items:center; justify-content:center; width:58px; height:58px; margin-bottom:.6rem; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.media-play::before { content:''; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--white); margin-left:4px; }
.media-title { font-family:'EB Garamond', Georgia, serif; font-size:1.5rem; line-height:1.2; }
.media-sub { font-size:.72rem; color:rgba(255,255,255,.6); }
@media (max-width:1180px) and (min-width:769px) { .nav-links { gap:1.5rem; } }
@media (max-width:900px) { .media-block { grid-template-columns:1fr; gap:1.5rem; } }
@media (max-width:768px) {
  .cal-grid { grid-template-columns:1fr; gap:2rem; }
  .event-lead figcaption { padding:.7rem 1.2rem; }
}
/* ── Redesign 11 Nov 2026: compact hero, readable nav ── */
#hero { min-height:0; display:block; margin-top:60px; padding:0; }
.hero-main { max-width:1280px; margin:0 auto; padding:3rem 3rem 2.75rem; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:4rem; align-items:center; }
.hero-bio { display:grid; grid-template-columns:280px minmax(0,1fr); grid-template-areas:"photo head" "photo rest"; column-gap:2.5rem; align-content:center; }
.hero-photo { grid-area:photo; margin:0; }
.hero-photo img { display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:center top; background:var(--light); }
.hero-photo figcaption { margin-top:.6rem; font-size:.75rem; line-height:1.5; color:#555; }
.hero-head { grid-area:head; align-self:end; }
.hero-rest { grid-area:rest; align-self:start; }
.hero-eyebrow { margin-bottom:1.1rem; }
.hero-h1 { font-size:clamp(2.4rem,3.5vw,3.5rem); line-height:1.08; margin-bottom:1.25rem; }
.hero-h1 .l { display:block; }
.hero-sub { max-width:30rem; margin-bottom:1.75rem; font-size:.98rem; line-height:1.7; }
.hero-ws { background:var(--black); color:var(--white); padding:1.9rem 2rem; }
.hw-title { font-family:'EB Garamond', Georgia, serif; font-size:1.6rem; line-height:1.2; margin-bottom:1.1rem; }
.hw-list { list-style:none; margin:0 0 1rem; padding:0; border-top:1px solid rgba(255,255,255,.2); }
.hw-list li { display:grid; grid-template-columns:5.2rem minmax(0,1fr) auto; gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.2); }
.hw-date { font-size:.85rem; color:rgba(255,255,255,.75); }
.hw-name { font-family:'EB Garamond', Georgia, serif; font-size:1.4rem; line-height:1.2; }
.hw-price { font-family:'EB Garamond', Georgia, serif; font-size:1.25rem; white-space:nowrap; }
.hw-meta { font-size:.8rem; line-height:1.6; color:rgba(255,255,255,.72); margin:0 0 1.25rem; }
.hw-btn { display:block; text-align:center; padding:.9rem 1rem; background:var(--white); color:var(--red); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; transition:background .2s, color .2s; }
.hw-btn:hover, .hw-btn:focus-visible { background:var(--red); color:var(--white); }
.hw-cal { display:flex; justify-content:space-between; gap:1rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.2); font-size:.85rem; color:rgba(255,255,255,.8); transition:color .2s; }
.hw-cal:hover { color:var(--white); }
.hero-stats { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.hero-stats-in { max-width:1280px; margin:0 auto; padding:0 3rem; display:grid; grid-template-columns:repeat(4,1fr); }
.hs-item { display:flex; align-items:baseline; justify-content:center; gap:.7rem; padding:1.1rem .75rem; border-left:1px solid var(--border); }
.hs-item:first-child { border-left:0; justify-content:flex-start; }
.hs-n { font-family:'EB Garamond', Georgia, serif; font-size:1.9rem; line-height:1; }
.hs-n span { color:var(--red); }
.hs-l { font-size:.85rem; color:#555; }
#shop p.shop-alt { font-size:.85rem; margin:1.25rem 0 0; color:#555; }
#shop p.shop-alt a { color:var(--black); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1050px) { .nav-more { display:none; } }
@media (max-width:980px) {
  .hero-main { grid-template-columns:minmax(0,1fr); gap:2rem; padding:2.5rem 2rem 2rem; }
  .hero-ws { max-width:none; }
  .hero-stats-in { padding:0 2rem; }
}
@media (max-width:640px) {
  .hero-main { padding:1.5rem 1.25rem 1.75rem; gap:1.5rem; }
  .hero-bio { grid-template-columns:104px minmax(0,1fr); grid-template-areas:"photo head" "rest rest"; column-gap:1.1rem; row-gap:1.1rem; }
  .hero-photo figcaption { display:none; }
  .hero-head { align-self:center; }
  .hero-eyebrow { margin-bottom:.7rem; }
  .hero-h1 { font-size:1.95rem; margin-bottom:0; }
  .hero-h1 .l { display:inline; }
  .hero-sub { margin-bottom:1.25rem; font-size:.95rem; }
  .hero-actions { flex-direction:row; gap:.6rem; }
  .hero-actions .btn { flex:1; padding:.8rem .5rem; }
  .hero-ws { max-width:none; padding:1.5rem 1.25rem; }
  .hero-stats-in { grid-template-columns:1fr 1fr; padding:0 1.25rem; }
  .hs-item, .hs-item:first-child { justify-content:flex-start; padding:.85rem .5rem; border-left:0; border-top:1px solid var(--border); }
  .hs-item:nth-child(-n+2) { border-top:0; }
  .hs-item:nth-child(even) { border-left:1px solid var(--border); padding-left:1rem; }
  .hs-n { font-size:1.6rem; }
}