/* Tom Men's Art — tommensart.com
   Ein Stylesheet fuer alle Seiten. Schriften liegen lokal unter /fonts,
   damit die Seite ohne externen Abruf auskommt (siehe datenschutz.html). */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #0a0a0a;
    --fg: #f2f0ec;
    --accent: #e0402a;
    --line: rgba(242, 240, 236, .16);
    --measure: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------- Kopfzeile ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(10, 10, 10, .88);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
}

.logo {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.logo span { font-weight: 400; opacity: .7; }

.topnav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
}
.topnav a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; opacity: .8; }
.topnav a:hover { opacity: 1; border-bottom-color: var(--fg); }
.topnav a.is-shop { color: var(--accent); font-weight: 700; opacity: 1; }
.topnav a.is-shop:hover { border-bottom-color: var(--accent); }

/* ---------- Sprachumschalter ---------- */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    letter-spacing: .06em;
    padding-left: 4px;
}
.lang-switch a { opacity: .55; padding: 4px 1px; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-current {
    opacity: 1;
    font-weight: 700;
    border-bottom-color: var(--fg);
    pointer-events: none;
}
.lang-switch .sep { opacity: .3; }
footer .lang-switch { opacity: 1; }

/* ---------- Hero ---------- */
.hero .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 84px;
}

/* Das Bild ist schwarzweiss — der schwarze Anteil laeuft in die Seite aus,
   kein Rahmen, keine Kante. */
.portrait {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 22% center;
}

.name {
    margin: 0 0 6px;
    font-size: clamp(46px, 7.4vw, 94px);
    line-height: .9;
    letter-spacing: -.038em;
    font-weight: 800;
    text-transform: uppercase;
}

.role {
    margin: 0 0 28px;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    max-width: 30ch;
    opacity: .82;
}

.rule {
    width: 64px;
    height: 4px;
    background: var(--accent);
    margin: 0 0 28px;
}

/* ---------- Button ----------
   Grösse ist fluid (clamp), nicht an einen Breakpoint gebunden — sonst
   kollidiert der lange Label-Text mit der Spaltenbreite genau ueber 860px
   und bricht zweizeilig um (gemessen: 862px Fensterbreite, 365.5px Spalte,
   362px noetig — Bruch durch Rundung/Fontmetrik, nicht durch echten
   Platzmangel). Der Farbwisch beim Hover laeuft in einer eigenen
   Stacking-Context (isolation:isolate), damit das ::before keine anderen
   Elemente uebermalt. */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    padding: clamp(14px, 1.8vw, 17px) clamp(18px, 2.6vw, 28px);
    background: var(--fg);
    color: var(--bg);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(12.5px, 1.5vw, 14px);
    letter-spacing: clamp(.09em, .4vw + .02em, .13em);
    text-transform: uppercase;
    border: 2px solid var(--fg);
    transition: color .3s ease, border-color .3s ease, transform .15s ease;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.btn:hover, .btn:focus-visible {
    border-color: var(--accent);
    color: #fff;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }
.btn .arrow { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.btn:hover .arrow { transform: translateX(5px); }

/* ---------- Inhaltsabschnitte ---------- */
section { border-top: 1px solid var(--line); }
section .wrap { padding-top: 78px; padding-bottom: 78px; }
.hero { border-top: 0; }

.sec-head {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
}

h2 {
    margin: 0;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .45;
}

.cv {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 62ch;
}
.cv li {
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.cv li:first-child { border-top: 0; padding-top: 0; }
.cv li b {
    display: block;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 3px;
}

.lead {
    margin: 0 0 30px;
    font-size: clamp(20px, 2.3vw, 27px);
    line-height: 1.35;
    letter-spacing: -.015em;
    font-weight: 500;
    max-width: 22ch;
}

.contact { font-size: 18px; line-height: 1.85; opacity: .82; }
.contact a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- Shop-Band: heller Block als Gegenpol ---------- */
.band { background: var(--fg); color: var(--bg); border-top: 0; }
.band .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 62px;
    padding-bottom: 62px;
}
.band p {
    margin: 0;
    font-size: clamp(21px, 2.6vw, 32px);
    line-height: 1.22;
    letter-spacing: -.022em;
    font-weight: 700;
    max-width: 20ch;
}
.band .btn {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--bg);
}
.band .btn:hover, .band .btn:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- Rechtliche Seiten ---------- */
.page-head .wrap { padding-top: 70px; padding-bottom: 34px; }
.page-title {
    margin: 0;
    font-size: clamp(36px, 5.4vw, 62px);
    line-height: .95;
    letter-spacing: -.035em;
    font-weight: 800;
    text-transform: uppercase;
}

.prose { max-width: 68ch; }
.prose h3 {
    margin: 42px 0 10px;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
}
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; opacity: .86; }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- Fusszeile ---------- */
footer { border-top: 1px solid var(--line); }
footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    justify-content: space-between;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 26px;
    font-size: 13px;
}
.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
footer a { text-decoration: none; opacity: .6; border-bottom: 1px solid transparent; }
footer a:hover { opacity: 1; border-bottom-color: var(--fg); }
.foot-note { opacity: .45; }

/* ---------- Bewegung ----------
   .reveal wird erst versteckt, wenn das Script laeuft (html.has-reveal).
   Ohne JavaScript bleibt alles sichtbar. */
.has-reveal .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
}
.has-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
}

.topbar { transition: border-color .3s ease, background .3s ease; }
.topbar.is-scrolled { border-bottom-color: rgba(242, 240, 236, .3); }

.portrait img { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.portrait:hover img { transform: scale(1.035); }

.cv li {
    transition: padding-left .28s ease, border-color .28s ease;
}
.cv li:hover {
    padding-left: 14px;
    border-top-color: var(--accent);
}
.cv li b { transition: letter-spacing .28s ease; }
.cv li:hover b { letter-spacing: .18em; }

.logo, .contact a, .foot-links a { transition: opacity .2s ease, color .2s ease; }
.logo:hover { color: var(--accent); }
.contact a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
    .hero .wrap {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 30px;
        padding-bottom: 54px;
    }
    .portrait { aspect-ratio: 4 / 3; }
    .portrait img { object-position: 24% 18%; }
    .sec-head { grid-template-columns: 1fr; gap: 18px; }
    section .wrap { padding-top: 54px; padding-bottom: 54px; }
    .band .wrap { padding-top: 46px; padding-bottom: 46px; }
    .page-head .wrap { padding-top: 46px; padding-bottom: 24px; }
    .topnav { gap: 16px; font-size: 12px; }
    .topnav .is-hideable { display: none; }
    /* Der Shop-Link ist auf Franzoesisch dreizeilig ins Logo gelaufen.
       Auf Mobil ersetzt ihn der grosse Button im Hero direkt darunter. */
    .topnav .is-shop { display: none; }
    .topnav a { white-space: nowrap; }
    .btn { padding: 15px 20px; font-size: 12px; letter-spacing: .07em; gap: 10px; }
    footer .wrap { justify-content: flex-start; }
}