/* Ellamin Studio — portfolio-first presentation layer */
:root { --rail: 248px; --folio-pad: clamp(22px, 3.2vw, 54px); }

@media (min-width: 901px) {
  body:not(.not-found) > main, body > .site-footer { margin-left: var(--rail); }
  .site-header {
    inset: 0 auto 0 0; width: var(--rail); height: 100svh; padding: 30px 25px 24px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    color: var(--ink); background: #fff; border-right: 1px solid rgba(10,10,10,.15);
    mix-blend-mode: normal; transform: none !important;
  }
  .site-header::before { content: "Photography / Videography\A UK · Available to travel"; order: 1; white-space: pre; margin: 18px 2px 52px; font-size: 8px; font-weight: 750; line-height: 1.8; letter-spacing: .13em; text-transform: uppercase; }
  .site-header::after { content: "Available for commissions"; order: 3; margin-top: auto; padding: 9px 10px; color: #111; background: var(--accent); border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
  .site-header.is-scrolled { padding: 30px 25px 24px; background: #fff; border-bottom: 0; backdrop-filter: none; }
  .brand-logo-header { order: 0; width: 100%; height: 102px; margin: 0; }
  .brand-logo-header img { width: 270px; }
  .site-nav { order: 2; flex-direction: column; gap: 2px; align-items: stretch; color: var(--ink); }
  .site-nav > a { padding: 10px 2px; font-size: 10px; }
  .site-nav > a:not(.nav-enquire)::after { right: auto; bottom: 8px; width: 26px; }
  .site-nav .nav-enquire { margin-top: 24px; padding: 12px 11px; justify-content: space-between; }
  .scroll-progress { left: var(--rail); }
}

.folio-hero { position: relative; min-height: 100svh; overflow: hidden; color: #fff; background: #111; }
.folio-hero-media, .folio-hero-shade { position: absolute; inset: 0; }
.folio-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; animation: folio-hero-in 1.5s cubic-bezier(.2,.7,.1,1) both; }
.folio-hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 68%), linear-gradient(0deg,rgba(0,0,0,.45),transparent 42%); }
.folio-hero-copy { position: absolute; z-index: 2; inset: auto var(--folio-pad) clamp(76px,9vh,115px); max-width: 920px; }
.folio-hero-copy > p { margin: 0 0 22px; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.folio-hero-copy h1 { margin: 0; font-family: var(--display); font-size: clamp(64px,8.2vw,144px); font-weight: 900; letter-spacing: -.075em; line-height: .76; text-transform: uppercase; }
.folio-hero-copy h1 em { color: var(--accent); font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; text-transform: none; }
.folio-hero-copy > div { display: flex; gap: 38px; align-items: end; margin-top: 38px; }
.folio-hero-copy > div > p { max-width: 480px; margin: 0; font: 400 clamp(18px,1.55vw,25px)/1.18 var(--serif); }
.folio-outline-link { display: flex; gap: 28px; align-items: center; padding: 12px 15px; border: 1px solid rgba(255,255,255,.75); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; transition: .25s ease; }
.folio-outline-link:hover { color: #111; background: var(--accent); border-color: var(--accent); }
.folio-hero-index { position: absolute; z-index: 2; inset: auto var(--folio-pad) 22px; display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.45); font-size: 8px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
@keyframes folio-hero-in { from { opacity: .2; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }

.folio-intro { display: grid; grid-template-columns: .42fr 1.55fr .65fr; gap: clamp(25px,4vw,74px); align-items: start; padding: clamp(85px,10vw,160px) var(--folio-pad); border-bottom: 1px solid var(--line); }
.folio-intro h2 { margin: 0; font: 900 clamp(50px,6.7vw,116px)/.84 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.folio-intro h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; text-transform: none; }
.folio-intro > p:last-child { margin: 5px 0 0; font: 400 clamp(18px,1.5vw,24px)/1.2 var(--serif); }

.folio-gallery-section { padding: 0 0 clamp(80px,9vw,145px); }
.folio-filters { top: 0; margin: 0; padding: 20px var(--folio-pad); border-top: 0; background: rgba(255,255,255,.95); }
.folio-wall { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-flow: dense; gap: 3px; padding: 3px; background: #fff; }
.folio-tile { min-width: 0; }
.folio-tile:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.folio-tile:nth-child(7n+4) { grid-column: span 2; }
.folio-tile button { position: relative; display: block; width: 100%; height: 100%; min-height: 26vw; padding: 0; overflow: hidden; border: 0; color: #fff; background: #111; cursor: zoom-in; text-align: left; }
.folio-tile:nth-child(7n+1) button { min-height: 52.3vw; }
.folio-tile:nth-child(7n+4) button { min-height: 32vw; }
.folio-tile img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: grayscale(1); transition: filter .45s ease, transform .85s cubic-bezier(.2,.7,.1,1); }
.folio-tile.is-contain img { object-fit: contain; background: #050505; }
.folio-tile button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.7),transparent 48%); opacity: .55; transition: opacity .35s ease; }
.folio-tile button > span { position: absolute; z-index: 2; right: 15px; bottom: 14px; left: 15px; display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; align-items: end; opacity: 0; transform: translateY(8px); transition: .35s ease; }
.folio-tile b { font: 400 clamp(20px,2vw,33px)/1 var(--serif); letter-spacing: -.04em; }
.folio-tile small { grid-column: 1; font-size: 7px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.folio-tile i { grid-column: 2; grid-row: 1 / span 2; font-size: 9px; font-style: normal; }
.folio-tile button:hover img, .folio-tile button:focus-visible img { filter: grayscale(0); transform: scale(1.035); }
.folio-tile button:hover > span, .folio-tile button:focus-visible > span { opacity: 1; transform: none; }
.folio-tile button:hover::after { opacity: 1; }
.folio-gallery-foot { display: flex; justify-content: space-between; gap: 25px; align-items: center; margin: 28px var(--folio-pad) 0; padding-top: 17px; border-top: 1px solid var(--ink); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.folio-gallery-foot a { display: flex; gap: 25px; align-items: center; }
.folio-gallery-foot i { font-size: 17px; font-style: normal; }

.folio-split { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px,7vw,110px); padding: clamp(85px,10vw,155px) var(--folio-pad); background: #f3f1ec; }
.folio-split-copy { align-self: center; }
.folio-split-copy h2 { margin: 25px 0 34px; font: 900 clamp(52px,6.4vw,104px)/.82 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.folio-split-copy h2 em { font-family: var(--serif); font-weight: 400; text-transform: none; }
.folio-split-copy > p:nth-of-type(2) { max-width: 390px; margin: 0 0 35px; font: 400 clamp(18px,1.5vw,24px)/1.2 var(--serif); }
.folio-story .image-window { aspect-ratio: 4/3; }
.folio-story img { filter: grayscale(1); transition: .5s ease; }
.folio-story:hover img { filter: grayscale(0); transform: scale(1.025); }
.folio-story > p { display: flex; justify-content: space-between; margin: 12px 0 18px; padding-top: 9px; border-top: 1px solid var(--ink); font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.folio-story h3 { max-width: 720px; margin: 0; font: 400 clamp(30px,3.6vw,58px)/.95 var(--serif); letter-spacing: -.045em; }

.folio-contact { padding: clamp(85px,10vw,150px) var(--folio-pad); color: #fff; background: #090909; }
.folio-contact p { margin: 0 0 34px; font: 400 clamp(20px,2vw,31px)/1 var(--serif); }
.folio-contact a { display: flex; justify-content: space-between; align-items: end; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.4); font: 900 clamp(53px,7.5vw,126px)/.78 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.folio-contact span { color: var(--accent); font-size: .4em; }
.folio-footer { padding-top: 45px; }
.folio-footer .footer-top { display: none; }

/* Bring the archive page closer to the compact reference layout. */
body[data-page="work"] .page-hero { padding-top: clamp(105px,11vw,165px); padding-bottom: clamp(60px,7vw,100px); }
body[data-page="work"] .page-title { font-size: clamp(66px,10vw,150px); }
body[data-page="work"] .portfolio-section { padding-right: 3px; padding-left: 3px; }
body[data-page="work"] .portfolio-section .filters { padding-right: var(--folio-pad); padding-left: var(--folio-pad); }
body[data-page="work"] .portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
body[data-page="work"] .portfolio-grid .project-card { grid-column: auto !important; margin: 0 !important; background: #fff; }
body[data-page="work"] .portfolio-grid .project-image img { aspect-ratio: 4/5 !important; }
body[data-page="work"] .portfolio-grid .project-card:nth-child(5n+1) { grid-column: span 2 !important; }
body[data-page="work"] .portfolio-grid .project-card:nth-child(5n+1) .project-image img { aspect-ratio: 8/5 !important; }
body[data-page="work"] .portfolio-grid .project-meta { padding: 12px 12px 25px; }

@media (max-width: 1100px) and (min-width: 901px) {
  :root { --rail: 218px; }
  .site-header { padding-right: 20px; padding-left: 20px; }
  .folio-wall { grid-template-columns: repeat(3,1fr); }
  .folio-tile button { min-height: 34vw; }
  .folio-tile:nth-child(7n+1) button { min-height: 68.3vw; }
  .folio-intro { grid-template-columns: 1fr 2fr; }
  .folio-intro > p:last-child { grid-column: 2; }
}

@media (max-width: 900px) {
  .site-header { color: var(--ink); background: rgba(255,255,255,.96); mix-blend-mode: normal; border-bottom: 1px solid rgba(10,10,10,.14); }
  .site-header.is-hidden { transform: none; }
  .site-nav { color: var(--ink); background: #fff; }
  .site-nav::after { content: "UK · Available for commissions"; margin-top: 30px; padding: 10px 13px; background: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .folio-hero { min-height: 92svh; }
  .folio-hero-copy h1 { font-size: clamp(60px,13vw,112px); }
  .folio-intro { grid-template-columns: 1fr 2fr; }
  .folio-intro > p:last-child { grid-column: 2; }
  .folio-wall { grid-template-columns: repeat(3,1fr); }
  .folio-tile button { min-height: 34vw; }
  .folio-tile:nth-child(7n+1) button { min-height: 68.4vw; }
  .folio-split { grid-template-columns: 1fr; }
  body[data-page="work"] .portfolio-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  .folio-hero { min-height: 86svh; }
  .folio-hero-media img { object-position: 58% center; }
  .folio-hero-shade { background: linear-gradient(0deg,rgba(0,0,0,.76),rgba(0,0,0,.04) 75%); }
  .folio-hero-copy { right: 20px; bottom: 67px; left: 20px; }
  .folio-hero-copy > p { margin-bottom: 14px; }
  .folio-hero-copy h1 { font-size: clamp(48px,14.4vw,82px); }
  .folio-hero-copy > div { display: block; margin-top: 25px; }
  .folio-hero-copy > div > p { font-size: 17px; }
  .folio-outline-link { width: fit-content; margin-top: 22px; }
  .folio-hero-index { right: 20px; bottom: 15px; left: 20px; }
  .folio-hero-index span:last-child { display: none; }
  .folio-intro { grid-template-columns: 1fr; padding-top: 68px; padding-bottom: 68px; }
  .folio-intro h2 { font-size: 47px; }
  .folio-intro > p:last-child { grid-column: auto; }
  .folio-filters { padding-right: 20px; padding-left: 20px; }
  .folio-wall { grid-template-columns: repeat(2,1fr); }
  .folio-tile:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .folio-tile:nth-child(5n+1) { grid-column: span 2; }
  .folio-tile button, .folio-tile:nth-child(n) button { min-height: 66vw; }
  .folio-tile:nth-child(5n+1) button { min-height: 78vw; }
  .folio-tile img { filter: none; }
  .folio-tile button > span { opacity: 1; transform: none; }
  .folio-gallery-foot { align-items: flex-start; flex-direction: column; margin-right: 20px; margin-left: 20px; }
  .folio-split { padding: 75px 20px; }
  .folio-contact { padding-right: 20px; padding-left: 20px; }
  .folio-contact a { font-size: 47px; }
  body[data-page="work"] .portfolio-grid { grid-template-columns: 1fr; }
  body[data-page="work"] .portfolio-grid .project-card:nth-child(n) { grid-column: auto !important; }
  body[data-page="work"] .portfolio-grid .project-card:nth-child(n) .project-image img { aspect-ratio: 4/5 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-hero-media img { animation: none; }
  .folio-tile img { transition: none; }
}