/* =============================================================
   PATFOLIO — Light Editorial Photography Portfolio
   Weiß · viel Weißraum · Kanten durch Bilder · edel & lesbar
   ============================================================= */

:root {
    --bg:        #f6f4ef;   /* warm paper white */
    --paper:     #ffffff;
    --ink:       #1a1916;
    --ink-dim:   #6a655c;
    --ink-faint: #a39d92;
    --line:      rgba(26, 25, 22, 0.12);
    --accent:    #9c6b43;   /* muted warm terracotta */

    --serif: "Fraunces", "Times New Roman", serif;
    --sans:  "Inter", system-ui, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* generous horizontal gutter for text content */
    --pad: clamp(22px, 6vw, 120px);
    --max: 1560px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--bg); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.shell { width: 100%; }

/* inner content width with breathing room */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* full-bleed: edges defined by the image itself */
.full { width: 100%; }

/* ---------- shared type ---------- */
.eyebrow {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .26em;
    text-transform: uppercase; color: var(--ink-dim);
    display: inline-flex; align-items: center; gap: .8em;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--ink-faint); display: inline-block; }

.display { font-family: var(--serif); font-weight: 340; line-height: 0.98; letter-spacing: -0.018em; font-optical-sizing: auto; }
.display em { font-style: italic; font-weight: 300; color: var(--accent); }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay: .08s }
.reveal[data-delay="2"]{ transition-delay: .16s }
.reveal[data-delay="3"]{ transition-delay: .24s }
.reveal[data-delay="4"]{ transition-delay: .32s }
.no-js .reveal { opacity: 1; transform: none; }

.mask { display: block; overflow: hidden; }
.mask > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease); }
.in .mask > span, .mask.in > span { transform: none; }
.no-js .mask > span { transform: none; }

/* =============================================================
   NAV
   ============================================================= */
.nav {
    --nav-ink: #fff;
    --nav-dim: rgba(255, 255, 255, 0.74);
    position: fixed; z-index: 100;
    top: clamp(14px, 2.2vw, 26px);
    left: 50%; transform: translateX(-50%);
    width: auto; max-width: calc(100% - 24px);
    display: flex; align-items: center; gap: clamp(28px, 5vw, 64px);
    padding: clamp(12px, 1.3vw, 16px) clamp(22px, 2.2vw, 32px);
    color: var(--nav-ink);
    background: rgba(20, 18, 16, 0.32);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
    transition: background .5s var(--ease), color .4s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.scrolled {
    --nav-ink: var(--ink);
    --nav-dim: var(--ink-dim);
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(26, 25, 22, 0.08);
    box-shadow: 0 10px 34px rgba(26, 25, 22, 0.1);
}
.nav__logo { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; letter-spacing: .01em; color: var(--nav-ink); }
.nav__logo sup { font-size: .5em; color: var(--accent); }
.nav__menu { display: flex; gap: 2.6rem; list-style: none; }
.nav__menu a { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-dim); position: relative; transition: color .3s; }
.nav__menu a:hover { color: var(--nav-ink); }
.nav__menu a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent); transition:width .45s var(--ease); }
.nav__menu a:hover::after { width: 100%; }
@media (max-width: 820px){ .nav__menu { display:none; } }

/* =============================================================
   HERO  (large full-bleed image, transparent blurred nav on top)
   ============================================================= */
.hero { position: relative; height: clamp(640px, 100svh, 1120px); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18,16,14,.34) 0%, rgba(18,16,14,0) 30%, rgba(18,16,14,.05) 52%, rgba(18,16,14,.74) 100%);
}

.hero__overlay {
    position: absolute; inset: 0; z-index: 2; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: clamp(30px, 5vh, 64px);
}
.hero__overlay .eyebrow { color: rgba(255,255,255,.84); }
.hero__overlay .eyebrow::before { background: rgba(255,255,255,.55); }
.hero__kicker { display: block; margin-bottom: clamp(20px, 3.5vh, 40px); }

.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(26px, 5vw, 90px); flex-wrap: wrap; }
.hero__title { font-size: clamp(3rem, 12vw, 12rem); color: #fff; }
.hero__title em { color: var(--accent); }
.hero__lead { max-width: 32ch; font-size: clamp(1rem, 1.3vw, 1.2rem); color: rgba(255,255,255,.84); line-height: 1.55; }
.hero__lead .eyebrow { display: flex; margin-bottom: 1rem; }

.hero__foot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    margin-top: clamp(34px, 6vh, 64px); padding-top: 1.3rem;
    border-top: 1px solid rgba(255,255,255,.22);
    font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.hero__scroll { display: inline-flex; align-items: center; gap: .9em; }
.hero__scroll i { width: 46px; height: 1px; background: rgba(255,255,255,.4); display: inline-block; position: relative; overflow: hidden; }
.hero__scroll i::after { content:""; position:absolute; inset:0; left:-46px; background: var(--accent); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateX(0)} 55%,100%{transform:translateX(92px)} }

/* =============================================================
   SECTIONS
   ============================================================= */
section { position: relative; }
.section-pad { padding-block: clamp(110px, 20vh, 300px); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom: clamp(56px, 10vh, 130px); flex-wrap: wrap; }
.section-head h2 { font-size: clamp(2.4rem, 7vw, 6rem); margin-top: 1rem; }
.section-no { font-family: var(--mono); font-size:.72rem; letter-spacing:.18em; color: var(--ink-faint); }

/* ---------- STATEMENT ---------- */
.statement { padding-block: clamp(120px, 22vh, 320px); }
.statement p { font-family: var(--serif); font-weight: 320; font-size: clamp(1.7rem, 4.6vw, 4rem); line-height: 1.22; letter-spacing:-.012em; max-width: 20ch; }
.statement em { font-style: italic; color: var(--accent); }
.statement .muted { color: var(--ink-faint); }

/* ---------- MARQUEE ---------- */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: clamp(26px,4.5vh,56px); overflow:hidden; white-space:nowrap; }
.marquee__track { display:inline-flex; gap: 2.8rem; will-change: transform; animation: scrollx 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--serif); font-style: italic; font-weight:300; font-size: clamp(1.6rem,4.4vw,3.4rem); color: var(--ink); display:inline-flex; align-items:center; gap:2.8rem; }
.marquee__track span::after { content:"—"; font-style: normal; color: var(--accent); }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- WORKS (clean, captions below image) ---------- */
.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 7vw, 140px) clamp(24px, 4vw, 70px); }
.work { display:block; }
.work__frame { overflow:hidden; background: #e9e6df; }
.work img { width:100%; height:100%; object-fit:cover; transition: transform 1.3s var(--ease); }
.work:hover img { transform: scale(1.04); }
.work__cap { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); margin-top: 1.2rem; }
.work__cap h3 { font-family: var(--serif); font-weight:400; font-size: clamp(1.3rem,2.2vw,2rem); line-height:1.1; }
.work__cap p { font-family: var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-dim); margin-top:.45em; }
.work__cap em { font-family: var(--mono); font-style:normal; font-size:.7rem; color: var(--ink-faint); letter-spacing:.08em; white-space:nowrap; }

.work--a { grid-column: 1 / 8; }
.work--b { grid-column: 9 / 13; align-self: end; }
.work--c { grid-column: 1 / 5; }
.work--d { grid-column: 6 / 13; }
.work--e { grid-column: 1 / 7; }
.work--f { grid-column: 8 / 13; align-self:end; }
@media (max-width: 800px){
    .works { grid-template-columns: 1fr; gap: clamp(40px,9vw,80px); }
    .work--a,.work--b,.work--c,.work--d,.work--e,.work--f { grid-column: 1 / -1; }
}

/* ---------- ABOUT ---------- */
.about { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 7vw, 130px); align-items: center; }
.about__media { overflow:hidden; aspect-ratio: 4/5; background:#e9e6df; }
.about__media img { width:100%; height:100%; object-fit:cover; }
.about__body h2 { font-family: var(--serif); font-weight:340; font-size: clamp(1.9rem,4.4vw,3.4rem); line-height:1.12; margin: 1.4rem 0; letter-spacing:-.01em; }
.about__body p { color: var(--ink-dim); font-size: 1.05rem; max-width: 48ch; }
.about__body p + p { margin-top: 1.2rem; }
.sign { font-family: var(--serif); font-style:italic; font-size: 2rem; color: var(--accent); margin-top: 1.8rem; }
.stats { display:flex; gap: clamp(30px,5vw,72px); margin-top: 2.8rem; border-top:1px solid var(--line); padding-top: 1.8rem; flex-wrap: wrap;}
.stats div b { font-family: var(--serif); font-weight:400; font-size: clamp(2.2rem,4.5vw,3.4rem); display:block; line-height:1; }
.stats div span { font-family: var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); margin-top:.6em; display:block; }
@media (max-width: 860px){ .about { grid-template-columns: 1fr; } .about__media{ max-width: 480px; } }

/* ---------- SERVICES ---------- */
.svc { border-top: 1px solid var(--line); }
.svc__item { display:grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,4vw,60px); align-items:center; padding-block: clamp(28px,4.4vw,52px); border-bottom:1px solid var(--line); position:relative; transition: padding-left .5s var(--ease); }
.svc__item .no { font-family: var(--mono); font-size:.74rem; color: var(--ink-faint); }
.svc__item h3 { font-family: var(--serif); font-weight:340; font-size: clamp(1.7rem,5vw,3.4rem); line-height:1; transition: color .4s; }
.svc__item p { font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-dim); text-align:right; max-width: 24ch; }
.svc__item:hover { padding-left: clamp(12px,1.6vw,26px); }
.svc__item:hover h3 { color: var(--accent); }
@media (max-width: 720px){ .svc__item { grid-template-columns: auto 1fr; } .svc__item p { display:none; } }

/* ---------- CTA / CONTACT ---------- */
.cta { text-align:center; padding-block: clamp(120px,22vh,300px); }
.cta .eyebrow { justify-content:center; }
.cta h2 { font-size: clamp(3rem, 12vw, 12rem); margin: 1.2rem 0 1.8rem; }
.cta__mail { display:inline-flex; align-items:center; gap:.8rem; font-family: var(--mono); font-size: clamp(.92rem,2vw,1.2rem); letter-spacing:.04em; border-bottom:1px solid var(--ink); padding-bottom:.55rem; transition: gap .4s var(--ease), border-color .4s, color .4s; }
.cta__mail:hover { gap: 1.7rem; border-color: var(--accent); color: var(--accent); }
.cta__mail svg { width: 1.1em; height:1.1em; }

/* ---------- FOOTER ---------- */
.foot { border-top:1px solid var(--line); padding-block: clamp(48px,7vh,80px); display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; flex-wrap:wrap; }
.foot__brand { font-family: var(--serif); font-size: clamp(2.6rem,8vw,6rem); line-height:.9; font-weight:350; }
.foot__brand span { color: var(--accent); }
.foot__cols { display:flex; gap: clamp(34px,6vw,90px); flex-wrap:wrap; }
.foot__col span { display:block; font-family: var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:1rem; }
.foot__col a { display:block; font-size:.95rem; color: var(--ink-dim); padding:.25rem 0; transition: color .3s; }
.foot__col a:hover { color: var(--ink); }
.foot__legal { width:100%; display:flex; justify-content:space-between; font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; color: var(--ink-faint); border-top:1px solid var(--line); padding-top:1.6rem; margin-top:1.2rem; flex-wrap:wrap; gap:1rem; }

@media (prefers-reduced-motion: reduce){
    *{ animation: none !important; scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; }
    .mask > span { transform:none; }
}