/* ---------- Fonts: Gilroy (self-hosted from /fonts) ---------- */
@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Light.woff2") format("woff2"),
         url("../fonts/Gilroy-Light.woff") format("woff"),
         url("../fonts/Gilroy-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-ExtraBold.woff2") format("woff2"),
         url("../fonts/Gilroy-ExtraBold.woff") format("woff"),
         url("../fonts/Gilroy-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #596F7D;
    --ink: #F5F87C;
    --muted: #6b7078;
    --gap: clamp(12px, 2vw, 28px);
    --tile-gap: clamp(20px, 1vw, 32px);   /* gap between tiles in the mosaic view */
   --pad: clamp(16px, 4vw, 64px);
    --max: 1440px;

    /* Fonts */
    --font-body: "Gilroy", system-ui, -apple-system, Segoe UI, sans-serif;   /* Gilroy Light, 300 */
    --font-title: "Gilroy", system-ui, -apple-system, Segoe UI, sans-serif;  /* Gilroy ExtraBold, 800 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.3;
}
a {
    color: inherit;
    text-decoration: none;
}

header { font-family: var(--font-body);}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

}
.site-header, .site-footer {
    /*position: sticky;*/
    top: 0;
        padding: clamp(32px, 6vw, 40px) var(--pad) calc(var(--pad) * 1.5);
}
 .site-footer {
    padding-bottom:0;
    text-align:center;
 }
.site-footer img{
    width:400px;
    margin-bottom: -24px;
}
.brand {
    width: 150px;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
}

/* Titles: Gilroy ExtraBold */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: -0.04em;
}
header h1 {
    font-size: clamp(3rem, 6vw, 8rem);
    line-height: 1;
    width:70%;
    margin:64px 0;
}

.container {
    max-width: var(--max);
    margin: auto;
    padding: 0;
}
.container.nav{
    padding-bottom:32px;

}
.container.about{
 padding: clamp(32px, 6vw, 96px) 0 clamp(32px, 8vw, 120px);
}
.button {
    display: inline-block;
    border: 0;
    background: var(--ink);
    color: var(--bg);
      border: 2px solid var(--ink);
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: 1.2rem;
}
.button.secondary {
    display: inline-block;
    border: 0;
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: 1.2rem;
    background: transparent
}

.button.small {
    padding: 9px 18px;
}

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- LAYOUT SWITCH ---------- */
.switch {
    display: inline-flex;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 3px;
    margin-top: 8px;
    align-items: right;
}
.switch button {
    font: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 7px 18px;
    cursor: pointer;
}
.switch button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
}
.switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- GRID (shared) ---------- */
.grid {
    padding: clamp(32px, 6vw, 96px) var(--pad) calc(var(--pad) * 1.5);
}

/* ---------- LAYOUT 1: OFF-GRID ----------
   Layout is applied by position (nth-child), so adding a work
   never needs any CSS changes. The pattern repeats every 6 items. */
.grid[data-layout="offgrid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    row-gap: clamp(40px, 7vw, 120px);
    align-items: start;
}
.grid[data-layout="offgrid"] .frame { border-radius: 20px; }

/* Desktop: 12 columns, staggered widths and vertical offsets */
.grid[data-layout="offgrid"] .work:nth-child(6n+1) { grid-column: 1 / span 5; }
.grid[data-layout="offgrid"] .work:nth-child(6n+2) { grid-column: 7 / span 4; margin-top: 8vw; }
.grid[data-layout="offgrid"] .work:nth-child(6n+3) { grid-column: 3 / span 3; }
.grid[data-layout="offgrid"] .work:nth-child(6n+4) { grid-column: 7 / span 6; }
.grid[data-layout="offgrid"] .work:nth-child(6n+5) { grid-column: 1 / span 4; margin-top: 4vw; }
.grid[data-layout="offgrid"] .work:nth-child(6n+6) { grid-column: 8 / span 4; }

/* Tablet: 6 columns, two overlapping lanes */
@media (max-width: 1023px) {
    .grid[data-layout="offgrid"] { grid-template-columns: repeat(6, 1fr); }
    .grid[data-layout="offgrid"] .work:nth-child(n) { margin-top: 0; }
    .grid[data-layout="offgrid"] .work:nth-child(odd)  { grid-column: 1 / span 4; }
    .grid[data-layout="offgrid"] .work:nth-child(even) { grid-column: 3 / span 4; margin-top: 6vw; }
}

/* Mobile: single column, full width */
@media (max-width: 639px) {
    .grid[data-layout="offgrid"] { grid-template-columns: 1fr; row-gap: 40px; }
    .grid[data-layout="offgrid"] .work:nth-child(n) { margin-top: 0; }
    .grid[data-layout="offgrid"] .work:nth-child(odd)  { grid-column: 1; width: 100%; }
    .grid[data-layout="offgrid"] .work:nth-child(even) { grid-column: 1; width: 100%; justify-self: end; }
}

/* ---------- LAYOUT 2: MOSAIC ----------
   Tight columns of tiles. Every image keeps its own ratio, so the
   columns finish at different heights and the tiles interlock.
   Tiles read down each column. */
.grid[data-layout="mosaic"] {
    display: block;
    column-count: 4;
    column-gap: var(--tile-gap);
}
.grid[data-layout="mosaic"] .work {
    break-inside: avoid;
    margin: 0 0 var(--tile-gap);
}
.grid[data-layout="mosaic"] .frame { border-radius: 16px; }
.grid[data-layout="mosaic"] .work h2 { margin-top: 8px; font-size: 1.2rem; }

/* ---------- ABOUT + CALLS TO ACTION ---------- */
.about {
    text-align: center;
}
.about h2 {
    margin: 0 0 24px;
    font-size: clamp(4rem, 6vw, 8rem);
    line-height: 1;
    text-align: center;
}
.about p {
    text-align: center;
    max-width: 60ch;
    font-size: clamp(1.5rem, 1.4vw, 4rem);
    line-height: 1.5;
    margin-left:auto;
    margin-right:auto;
}
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.cta-row .button { margin-top: 0; }
.cta-row .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
 

/* ---------- WORK ---------- */
.work a { display: block; color: inherit; text-decoration: none;  }

.frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio, 4 / 5);
    background: #3d505c;
}
.frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease;
}
.frame .alt { opacity: 0; }

/* Second version appears on hover or keyboard focus (devices that can hover) */
@media (hover: hover) {
    .work a:hover .alt,
    .work a:focus-visible .alt { opacity: 1; }
}

.work h2 {
    margin: 12px 0 0;
    font-size: 1rem;
    font-weight: 800;
}
.work a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.work a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
    .frame img { transition: none; }
}

@media (max-width: 1023px) {
    .grid[data-layout="mosaic"] { column-count: 3; }

.grid[data-layout="mosaic"] .frame { border-radius: 12px; }
.grid[data-layout="offgrid"] .frame { border-radius: 12px; }
    
}
@media (max-width: 639px) {
    .grid[data-layout="mosaic"] { column-count: 2; }
    .grid[data-layout="mosaic"] .frame { border-radius: 8px; }
    .grid[data-layout="offgrid"] .frame { border-radius: 8px; }


.button, .button.secondary {
    width: 100%;
    text-align: center;
    font-size: 1rem;
}
.logo.about, .button:disabled {
    display:none;
}
header h1 {
    width: 100%;
    margin:32px 0 64px 0;

}
.site-footer img{
    width:200px;
    margin-bottom: -24px;
}
}