/* Palmiera Eat & Meet — public site styles */

@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
    --cream: #e7e0d1;
    --cream-lift: #f0ebe0;
    --paper: #f7f4ee;
    --ink: #010101;
    --indigo: #323886;
    --peri: #6e76b2;
    --terra: #c8856f;
    --brick: #824240;
    --teal: #246a7e;
    --sky: #9bcfe9;
    --green: #83bb8f;
    --yellow: #eae18e;
    --red: #d22d31;
    --mist: #a3b9de;
    --bg: #f8f8f8;
    --fg: var(--ink);
    --muted: color-mix(in oklab, var(--ink) 55%, var(--cream));
    --hairline: color-mix(in oklab, var(--ink) 16%, transparent);
    --accent: var(--terra);
    --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-serif: "Instrument Serif", "Times New Roman", serif;
    --text-xs: clamp(1.152rem, 1.12rem + .1vw, 1.28rem);
    --text-sm: clamp(1.344rem, 1.28rem + .15vw, 1.504rem);
    --text-base: clamp(1.6rem, 1.536rem + .2vw, 1.744rem);
    --text-lg: clamp(1.856rem, 1.68rem + .5vw, 2.24rem);
    --text-xl: clamp(2.4rem, 1.92rem + 1.4vw, 3.52rem);
    --text-2xl: clamp(3.36rem, 2.4rem + 3vw, 5.76rem);
    --text-3xl: clamp(3.84rem, 2.24rem + 3.6vw, 7.2rem);
    --text-hero: clamp(4.64rem, 2.4rem + 5.6vw, 10.24rem);
    --space-1: .4rem;
    --space-2: .8rem;
    --space-3: 1.2rem;
    --space-4: 1.6rem;
    --space-6: 2.4rem;
    --space-8: 3.2rem;
    --space-10: 4rem;
    --space-12: 4.8rem;
    --space-16: 6.4rem;
    --space-20: 8rem;
    --space-24: 9.6rem;
    --space-32: 12.8rem;
    --section-y: clamp(6.4rem, 7vw, 13.6rem);
    --gutter: clamp(1.84rem, 4vw, 5.6rem);
    --maxw: 1560px;
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-xl: clamp(22px, 3vw, 46px);
    --r-block: clamp(28px, 4.2vw, 64px);
    --r-pill: 999px;
    --e-out: cubic-bezier(.16, 1, .3, 1);
    --e-in: cubic-bezier(.4, 0, 1, 1);
    --e-inout: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .18s var(--e-out);
    --t-mid: .32s var(--e-out);
    --t-slow: .62s var(--e-out);
    --shadow-sm: 0 1px 2px rgb(1 1 1 / .06), 0 2px 8px rgb(1 1 1 / .04);
    --shadow-md: 0 2px 6px rgb(1 1 1 / .06), 0 14px 34px -10px rgb(1 1 1 / .14);
    --shadow-lg: 0 8px 24px rgb(1 1 1 / .08), 0 34px 70px -20px rgb(1 1 1 / .22)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

* {
    margin: 0
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 9.6rem
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    min-height: 100vh
}

img,
svg,
video,
picture {
    display: block;
    max-width: 100%
}

img,
video {
    height: auto
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit
}

button {
    background: none;
    border: 0;
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

ul,
ol {
    list-style: none;
    padding: 0
}

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

:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 3px;
    border-radius: 4px
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.skip {
    position: absolute;
    left: 1.6rem;
    top: -6.4rem;
    z-index: 200;
    background: var(--ink);
    color: var(--cream);
    padding: 1.12rem 1.76rem;
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    transition: top var(--t-fast)
}

.skip:focus {
    top: 1.6rem
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.035em;
    text-wrap: balance
}

h3,
h4 {
    line-height: 1.12;
    letter-spacing: -.02em
}

.h-hero {
    font-size: var(--text-hero)
}

.h-1 {
    font-size: var(--text-3xl)
}

.head-line {
    display: block
}

.h-2 {
    font-size: var(--text-2xl)
}

.h-3 {
    font-size: var(--text-xl)
}

.h-4 {
    font-size: var(--text-lg);
    letter-spacing: -.015em
}

.it {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.015em;
    padding-right: .06em
}

.serif {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -.01em
}

.eyebrow {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .6em
}

.eyebrow:before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    opacity: .75
}

.lede {
    font-size: var(--text-lg);
    line-height: 1.45;
    letter-spacing: -.015em;
    max-width: 34ch
}

.prose {
    max-width: 62ch
}

.prose p+p {
    margin-top: 1em
}

.dim {
    color: var(--muted)
}

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum"
}

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter)
}

.fk-section {
    padding-block: var(--section-y)
}

.fk-grid {
    display: grid;
    gap: var(--gutter)
}

.g-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.g-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.g-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.g-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.stack {
    display: flex;
    flex-direction: column
}

.row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap
}

.between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap
}

.head {
    display: grid;
    gap: clamp(1.6rem, 2vw, 3.2rem);
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: clamp(3.2rem, 4vw, 6.4rem)
}

.head>*:last-child {
    justify-self: end
}

@media(max-width:900px) {

    .g-3,
    .g-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .head {
        grid-template-columns: 1fr;
        align-items: start
    }

    .head>*:last-child {
        justify-self: start
    }
}

@media(max-width:620px) {

    .g-2,
    .g-3,
    .g-4 {
        grid-template-columns: 1fr
    }
}

.block {
    border-radius: var(--r-block);
    padding: clamp(2.56rem, 3.4vw, 5.44rem);
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.bleed {
    border-radius: var(--r-block);
    margin-inline: var(--gutter);
    overflow: clip
}

.on-dark {
    color: var(--cream)
}

.bg-cream {
    background: var(--cream)
}

.bg-paper {
    background: var(--paper)
}

.bg-lift {
    background: var(--cream-lift)
}

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

.bg-indigo {
    background: var(--indigo);
    color: var(--cream)
}

.bg-peri {
    background: var(--peri);
    color: var(--cream)
}

.bg-terra {
    background: var(--terra);
    color: var(--cream)
}

.bg-brick {
    background: var(--brick);
    color: var(--cream)
}

.bg-teal {
    background: var(--teal);
    color: var(--cream)
}

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

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

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

.bg-red {
    background: var(--red);
    color: var(--cream)
}

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

.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--cream);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .95em 1.6em;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast)
}

.btn:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--btn-fg);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform .42s var(--e-out)
}

.btn:hover {
    color: var(--btn-bg);
    box-shadow: var(--shadow-md)
}

.btn:hover:after {
    transform: translateY(0)
}

.btn:active {
    transform: scale(.975);
    box-shadow: var(--shadow-sm)
}

.btn .ar {
    transition: transform var(--t-mid)
}

.btn:hover .ar {
    transform: translate(3px)
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border: 1px solid var(--hairline);
    color: var(--ink)
}

.btn--ghost:after {
    background: var(--ink)
}

.btn--ghost:hover {
    color: var(--cream);
    border-color: var(--ink)
}

.btn--light {
    --btn-bg: var(--cream);
    --btn-fg: var(--ink)
}

.btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: var(--cream);
    border: 1px solid color-mix(in oklab, var(--cream) 45%, transparent);
    color: var(--cream)
}

.btn--outline-light:after {
    background: var(--cream)
}

.btn--outline-light:hover {
    color: var(--ink);
    border-color: var(--cream)
}

.btn--lg {
    padding: 1.15em 2em;
    font-size: var(--text-base)
}

.btn--sm {
    padding: .72em 1.15em;
    font-size: var(--text-xs)
}

.ulink {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: var(--text-sm);
    font-weight: 500;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .34s var(--e-out)
}

.ulink:hover {
    background-size: 0% 1px;
    background-position: 100% 100%
}

.ulink .ar {
    transition: transform var(--t-mid)
}

.ulink:hover .ar {
    transform: translate(4px)
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .42em .8em;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    font-size: var(--text-xs);
    line-height: 1;
    white-space: nowrap;
    background: transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast)
}

.tag--solid {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink)
}

button.tag {
    cursor: pointer
}

button.tag:hover {
    border-color: var(--ink)
}

button.tag[aria-pressed=true] {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink)
}

/* —— Liquid Glass navigation —— */
.glass-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none
}

.glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px;
    background: transparent;
    border: 0;
    box-shadow:
        0 10px 36px rgb(1 1 1 / .06),
        0 1px 2px rgb(1 1 1 / .04)
}

.glass__fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden
}

.glass__blur,
.glass__refract,
.glass__tint,
.glass__shine,
.glass__depth {
    position: absolute;
    inset: 0;
    border-radius: inherit
}

.glass__blur {
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4)
}

.glass__refract {
    backdrop-filter: url(#liquid-glass-refract);
    -webkit-backdrop-filter: url(#liquid-glass-refract);
    opacity: .72;
    /* Kırılma kenar/köşelerde; merkezde kaybolur */
    -webkit-mask-image: radial-gradient(ellipse 58% 48% at 50% 48%, transparent 0%, transparent 38%, rgb(0 0 0 / .55) 70%, #000 100%);
    mask-image: radial-gradient(ellipse 58% 48% at 50% 48%, transparent 0%, transparent 38%, rgb(0 0 0 / .55) 70%, #000 100%)
}

.glass__tint {
    background:
        radial-gradient(ellipse 80% 70% at 50% 40%, rgb(255 255 255 / .1), transparent 70%),
        linear-gradient(
            180deg,
            rgb(255 255 255 / .14) 0%,
            rgb(255 255 255 / .04) 45%,
            rgb(255 255 255 / .02) 100%
        )
}

.glass__shine {
    background:
        radial-gradient(120% 70% at 50% -18%, rgb(255 255 255 / .55), transparent 52%),
        linear-gradient(
            180deg,
            rgb(255 255 255 / .42) 0%,
            rgb(255 255 255 / .12) 12%,
            transparent 34%
        );
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    opacity: .9
}

.glass__depth {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .48),
        inset 0 -1.5px 2px rgb(1 1 1 / .08),
        inset 0 0 0 .5px rgb(255 255 255 / .28);
    border: .5px solid rgb(255 255 255 / .28);
    border-bottom-color: rgb(1 1 1 / .06);
    border-top-color: rgb(255 255 255 / .38)
}

.glass__content {
    position: relative;
    z-index: 1;
    isolation: isolate
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass__blur,
    .glass__refract {
        display: none
    }

    .glass__tint {
        background: rgb(248 248 248 / .78);
        mix-blend-mode: normal
    }
}

@supports not ((-webkit-backdrop-filter: url(#liquid-glass-refract)) or (backdrop-filter: url(#liquid-glass-refract))) {
    .glass__refract {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background:
            radial-gradient(ellipse 90% 80% at 8% 20%, rgb(255 255 255 / .16), transparent 42%),
            radial-gradient(ellipse 90% 80% at 92% 80%, rgb(255 255 255 / .12), transparent 42%);
        opacity: .55;
        mix-blend-mode: soft-light
    }
}

.hdr {
    position: fixed;
    inset: 0 0 auto;
    z-index: 90;
    padding:
        clamp(1.4rem, 2vw, 2.2rem)
        clamp(1.4rem, 2.4vw, 2.8rem)
        .4rem;
    transition: transform .42s var(--e-out)
}

.hdr[data-hidden=true] {
    transform: translateY(-130%)
}

.hdr > .wrap {
    width: min(92rem, 100%);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0
}

.hdr__in {
    padding: 0;
    width: 100%
}

.hdr__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.8rem;
    width: 100%;
    padding: .8rem 1.6rem .8rem 1.8rem
}

.hdr[data-scrolled=true] .glass__blur {
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4)
}

.hdr[data-scrolled=true] .glass {
    box-shadow:
        0 14px 40px rgb(1 1 1 / .08),
        0 2px 6px rgb(1 1 1 / .04)
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none
}

.brand__logo {
    display: block;
    height: 48px;
    width: auto;
    filter: brightness(0);
    transition: transform .52s var(--e-out), opacity var(--t-fast)
}

.brand:hover .brand__logo {
    transform: scale(1.03);
    opacity: .92
}

.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin-inline: 0 0 0 auto
}

.nav a {
    position: relative;
    padding: .55em 1em;
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--ink);
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast)
}

.nav a:hover {
    background: rgb(255 255 255 / .28)
}

.nav a[aria-current=page],
.nav a.is-active {
    font-weight: 500;
    background: rgb(255 255 255 / .38);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .55),
        0 1px 2px rgb(1 1 1 / .04)
}

.nav a[aria-current=page]:after,
.nav a.is-active:after {
    display: none
}

.hdr__act {
    display: flex;
    align-items: center;
    gap: .72rem;
    flex: none
}

.hdr__cta {
    flex: none
}

.lang {
    display: inline-flex;
    background: rgb(1 1 1 / .05);
    border-radius: var(--r-pill);
    padding: 3px;
    gap: 2px
}

.lang button {
    padding: .42em .72em;
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--muted);
    transition: background var(--t-fast), color var(--t-fast)
}

.lang button[aria-pressed=true] {
    background: var(--ink);
    color: var(--cream)
}

.burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: .5px solid rgb(255 255 255 / .35);
    background: rgb(255 255 255 / .18);
    place-items: center;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .4)
}

.burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17px;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--t-mid)
}

.burger span:first-child {
    transform: translate(-50%, -50%) translateY(-3px)
}

.burger span:last-child {
    transform: translate(-50%, -50%) translateY(3px)
}

body[data-menu=open] .burger span:first-child {
    transform: translate(-50%, -50%) rotate(45deg)
}

body[data-menu=open] .burger span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg)
}

@media(max-width:1080px) {
    .hdr > .wrap {
        width: 100%;
        max-width: 100%
    }

    .hdr__in {
        width: 100%
    }

    .hdr__content {
        width: 100%;
        padding: .7rem 1.2rem .7rem 1.4rem
    }

    .nav {
        display: none
    }

    .hdr__act {
        margin-left: auto
    }

    .hdr__cta {
        display: none
    }

    .burger {
        display: grid
    }
}

.mmenu {
    position: fixed;
    inset: 0;
    z-index: 88;
    display: grid;
    place-items: start stretch;
    padding:
        calc(clamp(1.12rem, 1.4vw, 1.76rem) + 7.2rem)
        var(--gutter)
        2.4rem;
    visibility: hidden;
    pointer-events: none
}

.mmenu__panel {
    width: min(100%, 52rem);
    margin-inline: auto;
    border-radius: 2.8rem;
    max-height: calc(100dvh - 11rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* opacity kullanma: Safari'de backdrop-filter'ı 1–2sn geciktirir */
    transform: translate3d(0, -8px, 0);
    transition: transform .2s var(--e-out);
    box-shadow:
        0 24px 64px rgb(1 1 1 / .1),
        0 2px 8px rgb(1 1 1 / .04)
}

.mmenu__panel .glass__fx {
    transform: translateZ(0);
    -webkit-transform: translateZ(0)
}

.mmenu__panel .glass__blur {
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    transform: translateZ(0);
    will-change: backdrop-filter
}

/* SVG kırılma filtresi mobilde geciktiriyor; menüde blur yeterli */
.mmenu__panel .glass__refract {
    display: none
}

.mmenu__panel .glass__tint {
    background:
        radial-gradient(ellipse 80% 70% at 50% 40%, rgb(255 255 255 / .22), transparent 70%),
        linear-gradient(
            180deg,
            rgb(255 255 255 / .42) 0%,
            rgb(255 255 255 / .18) 45%,
            rgb(255 255 255 / .12) 100%
        )
}

.mmenu__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1.8rem 1.8rem
}

body[data-menu=open] .mmenu {
    visibility: visible;
    pointer-events: auto
}

body[data-menu=open] .mmenu__panel {
    transform: translate3d(0, 0, 0)
}

body[data-menu=open] {
    overflow: hidden
}

.mmenu a.mlink {
    font-size: clamp(2.6rem, 7vw, 3.8rem);
    letter-spacing: -.04em;
    line-height: 1;
    padding: .42em .55em;
    border-radius: 1.2rem;
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    transition: background var(--t-fast), box-shadow var(--t-fast)
}

.mmenu a.mlink:hover,
.mmenu a.mlink.is-active,
.mmenu a.mlink[aria-current=page] {
    background: rgb(255 255 255 / .32);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45)
}

.mmenu a.mlink span {
    font-size: var(--text-xs);
    color: var(--muted)
}

.fk-card {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--paper);
    transition: transform var(--t-mid), box-shadow var(--t-mid)
}

a.fk-card:hover,
.fk-card--hov:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg)
}

a.fk-card:active {
    transform: translateY(-1px)
}

.fk-media {
    position: relative;
    overflow: hidden;
    background: var(--cream-lift);
    border-radius: var(--r-xl)
}

.fk-media img,
.fk-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--e-out)
}

.fk-media--1 {
    aspect-ratio: 1
}

.fk-media--43 {
    aspect-ratio: 4 / 3
}

.fk-media--34 {
    aspect-ratio: 3 / 4
}

.fk-media--45 {
    aspect-ratio: 4 / 5
}

.fk-media--16 {
    aspect-ratio: 16 / 9
}

a:hover>.fk-media img,
.fk-card:hover .fk-media img,
.fk-media--zoom:hover img {
    transform: scale(1.045)
}

.pcard {
    display: flex;
    flex-direction: column;
    gap: 1.44rem;
    border-radius: var(--r-xl);
    padding: 1.2rem 1.2rem 1.76rem;
    background: var(--paper);
    transform: translate3d(0, 0, 0);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1)
}

.pcard:hover {
    transform: translate3d(0, -8px, 0);
    background: var(--paper);
    box-shadow: none
}

.pcard .fk-media img,
.pcard:hover .fk-media img {
    transform: none !important
}

.pcard .fk-media {
    aspect-ratio: 1;
    background: var(--cream-lift);
    border-radius: calc(var(--r-xl) - 6px)
}

.pcard .fk-media img {
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply
}

.pcard .fk-media--icon {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.pcard .fk-media--icon img {
    padding: 18%;
    mix-blend-mode: normal;
    filter: brightness(0)
}

.fk-price--empty {
    min-height: 1em
}

.pcard__body {
    padding-inline: .64rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    flex: 1
}

.pcard__t {
    font-size: var(--text-lg);
    letter-spacing: -.025em;
    line-height: 1.1;
    font-weight: 500
}

.pcard__o {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--muted)
}

.pcard__notes {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.4
}

.pcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .96rem;
    margin-top: auto;
    padding-top: .48rem
}

.fk-price {
    font-size: var(--text-base);
    font-weight: 500;
    font-variant-numeric: tabular-nums
}

.fk-price small {
    font-size: var(--text-xs);
    color: var(--muted);
    font-weight: 400
}

.fk-price__tl {
    font-weight: 500;
    letter-spacing: -.02em
}

.fk-dot {
    width: .72em;
    height: .72em;
    border-radius: 46% 54% 52% 48%/50% 46% 54% 50%;
    display: inline-block;
    flex: none
}

.blobtag {
    position: absolute;
    top: 1.44rem;
    right: 1.44rem;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 8.64rem;
    height: 8.64rem;
    border-radius: 48% 52% 47% 53%/52% 48%;
    color: #fff;
    font-size: .992rem;
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .64rem;
    transition: transform .52s var(--e-out)
}

.pcard:hover .blobtag {
    transform: rotate(-7deg) scale(1.06)
}

.blobtag em {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.088rem;
    opacity: .92
}

.marq {
    overflow-x: hidden;
    overflow-y: visible;
    display: flex;
    gap: 0;
    -webkit-user-select: none;
    user-select: none;
    padding-block: .35em;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.marq__t {
    display: flex;
    align-items: center;
    gap: clamp(1.92rem, 3vw, 4.8rem);
    flex: none;
    padding-right: clamp(1.92rem, 3vw, 4.8rem);
    animation: marq 34s linear infinite;
    will-change: transform
}

.marq:hover .marq__t {
    animation-play-state: paused
}

.marq--rev .marq__t {
    animation-direction: reverse
}

.marq--fast .marq__t {
    animation-duration: 20s
}

@keyframes marq {
    to {
        transform: translate(-100%)
    }
}

.marq__t>* {
    flex: none
}

.marq-word {
    font-size: clamp(2.72rem, 5.4vw, 7.36rem);
    letter-spacing: -.04em;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
    padding-block: .08em
}

.marq-icon {
    display: block;
    height: clamp(2.4rem, 4.6vw, 6.2rem);
    width: auto;
    flex: none;
    filter: brightness(0);
    object-fit: contain
}

.rv,
.rv-up {
    opacity: 1
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .rv {
        opacity: 0;
        transition: opacity .9s var(--e-out)
    }

    .rv.in {
        opacity: 1
    }

    .rv-up {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .76s var(--e-out), transform .9s var(--e-out)
    }

    .rv-up.in {
        opacity: 1;
        transform: none
    }

    .rv-clip {
        clip-path: inset(100% 0 0 0);
        transition: clip-path 1s var(--e-out)
    }

    .rv-clip.in {
        clip-path: inset(0 0 0 0)
    }

    .rw span.w {
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
        padding-bottom: .22em;
        margin-bottom: -.14em
    }

    .rw span.w>i {
        display: inline-block;
        font-style: inherit;
        transform: translateY(105%);
        transition: transform .9s var(--e-out);
        transition-delay: calc(var(--i, 0) * 55ms)
    }

    .rw.in span.w>i {
        transform: none
    }
}

.rv[data-d="1"],
.rv-up[data-d="1"] {
    transition-delay: 80ms
}

.rv[data-d="2"],
.rv-up[data-d="2"] {
    transition-delay: .16s
}

.rv[data-d="3"],
.rv-up[data-d="3"] {
    transition-delay: .24s
}

.rv[data-d="4"],
.rv-up[data-d="4"] {
    transition-delay: .32s
}

.rv[data-d="5"],
.rv-up[data-d="5"] {
    transition-delay: .4s
}

.ftr {
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--r-block) var(--r-block) 0 0;
    margin-top: clamp(3.2rem, 4vw, 8rem);
    padding-block: clamp(4.8rem, 6vw, 9.6rem) 3.2rem;
    position: relative;
    overflow: hidden
}

.ftr a {
    color: color-mix(in oklab, var(--cream) 78%, transparent);
    transition: color var(--t-fast)
}

.ftr a:hover {
    color: var(--cream)
}

.ftr a.btn--light {
    color: var(--ink)
}

.ftr a.btn--light:hover {
    color: var(--cream)
}

.ftr__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2.56rem, 3vw, 4.8rem)
}

.ftr__grid h3 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: color-mix(in oklab, var(--cream) 55%, transparent);
    margin-bottom: 1.6rem;
    font-weight: 500
}

.ftr__grid li+li {
    margin-top: .8rem
}

.ftr__grid li {
    font-size: var(--text-sm)
}

.ftr__bot {
    margin-top: clamp(4rem, 5vw, 7.2rem);
    padding-top: 2.24rem;
    border-top: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: color-mix(in oklab, var(--cream) 60%, transparent)
}

.ftr__word {
    margin-top: clamp(2.4rem, 3vw, 4.8rem);
    opacity: .28;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(3.2rem, 9.2vw, 9.6rem);
    line-height: .9;
    letter-spacing: -.045em;
    text-align: left;
    color: var(--cream);
    white-space: nowrap
}

@media(max-width:860px) {
    .ftr__grid {
        grid-template-columns: 1fr 1fr
    }
}

.fk-field {
    display: flex;
    flex-direction: column;
    gap: .72rem
}

.fk-field label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 500
}

.fk-field input,
.fk-field select,
.fk-field textarea {
    width: 100%;
    padding: .9em 1.05em;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: color-mix(in oklab, #fff 62%, transparent);
    font-size: var(--text-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast)
}

.fk-field textarea {
    min-height: 12rem;
    resize: vertical
}

.fk-field input:focus,
.fk-field select:focus,
.fk-field textarea:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--indigo) 18%, transparent);
    background: #fff
}

.fk-field input::placeholder,
.fk-field textarea::placeholder {
    color: color-mix(in oklab, var(--ink) 38%, transparent)
}

.career {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(1.6rem, 3.2vw, 3.6rem);
    align-items: start
}

.career__media {
    position: sticky;
    top: clamp(6.4rem, 10vw, 8rem);
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    margin: 0
}

.career__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.career-form {
    max-width: none;
    min-width: 0
}

.career-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.2rem
}

.career-form__full {
    grid-column: 1 / -1
}

.career-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 1.6rem;
    margin-top: 2rem
}

.career-form__note {
    font-size: var(--text-xs);
    max-width: 36ch
}

.career-file {
    position: relative;
    display: grid;
    gap: .7rem
}

.career-file input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2
}

.career-file__btn {
    display: grid;
    gap: .28rem;
    padding: 1.15rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px dashed color-mix(in oklab, var(--ink) 28%, transparent);
    background: color-mix(in oklab, #fff 55%, transparent);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast)
}

.career-file:hover .career-file__btn,
.career-file:focus-within .career-file__btn {
    border-color: var(--ink);
    background: #fff
}

.career-file__title {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: -.01em
}

.career-file__hint,
.career-file__name {
    font-size: var(--text-xs);
    color: var(--muted)
}

.career-file__name.is-set {
    color: var(--ink)
}

@media(max-width:980px) {
    .career {
        grid-template-columns: 1fr
    }

    .career__media {
        position: static;
        max-width: 420px;
        order: -1
    }
}

@media(max-width:700px) {
    .career-form__grid {
        grid-template-columns: 1fr
    }

    .career__media {
        max-width: none
    }
}

.acc {
    border-top: 1px solid var(--hairline)
}

.acc details {
    border-bottom: 1px solid var(--hairline)
}

.acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.84rem 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-lg);
    letter-spacing: -.02em;
    font-weight: 500;
    transition: color var(--t-fast)
}

.acc summary::-webkit-details-marker {
    display: none
}

.acc summary:hover {
    color: var(--terra)
}

.acc summary .pm {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    display: grid;
    place-items: center;
    transition: transform var(--t-mid), background var(--t-fast), color var(--t-fast)
}

.acc details[open] summary .pm {
    transform: rotate(45deg);
    background: var(--ink);
    color: var(--cream)
}

.acc__body {
    padding-bottom: 2.24rem;
    max-width: 62ch;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.6
}

.acc details[open] .acc__body {
    animation: accIn .42s var(--e-out) both
}

@keyframes accIn {
    0% {
        opacity: 0;
        transform: translateY(-6px)
    }
}

.hr {
    border: 0;
    border-top: 1px solid var(--hairline)
}

.stat__n {
    font-size: clamp(3.52rem, 5.4vw, 8rem);
    white-space: nowrap;
    line-height: .9;
    letter-spacing: -.045em;
    font-weight: 400;
    font-variant-numeric: tabular-nums
}

.stat__l {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: .8rem;
    max-width: 20ch
}

.on-dark .stat__l,
.bg-ink .stat__l,
.bg-indigo .stat__l {
    color: color-mix(in oklab, var(--cream) 70%, transparent)
}

.noise {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .4;
    mix-blend-mode: soft-light
}

.toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    left: auto;
    translate: none;
    z-index: 200;
    background: var(--ink);
    color: var(--cream);
    padding: 1rem 1.25rem;
    border-radius: 14px;
    font-size: var(--text-sm);
    font-weight: 550;
    letter-spacing: -.01em;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-mid), transform .42s var(--e-out);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: min(calc(100vw - 2rem), 22rem);
    text-align: left
}

.toast.toast--err {
    background: #b42318;
    color: #fff
}

.toast.show {
    opacity: 1;
    transform: none
}

@media (max-width: 600px) {
    .toast {
        right: .85rem;
        bottom: .85rem;
        left: .85rem;
        max-width: none
    }
}

.prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 100;
    background: var(--terra);
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0)
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    html {
        scroll-behavior: auto
    }
}

.brand__logo {
    height: clamp(42px, 4.6vw, 52px)
}

.cart-pip {
    display: inline-grid;
    place-items: center;
    min-width: 1.35em;
    height: 1.35em;
    padding-inline: .35em;
    border-radius: var(--r-pill);
    background: var(--terra);
    color: var(--cream);
    font-size: 1.04rem;
    font-variant-numeric: tabular-nums;
    line-height: 1
}

.hdr__cart {
    display: inline-flex;
    align-items: center;
    gap: .56rem;
    height: 44px;
    padding-inline: 1.12rem;
    border-radius: var(--r-pill);
    border: .5px solid rgb(255 255 255 / .35);
    background: rgb(255 255 255 / .16);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
    transition: background var(--t-fast), border-color var(--t-fast)
}

.hdr__cart:hover {
    background: rgb(255 255 255 / .28);
    border-color: rgb(255 255 255 / .5)
}

.hdr__cart .cart-pip {
    font-size: 1.12rem;
    font-weight: 500
}

.hdr__cart-ico {
    display: block;
    flex: none
}

.mmenu nav {
    display: flex;
    flex-direction: column
}

.mmenu a.mlink {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 1.44rem
}

.mmenu a.mlink em {
    font-style: normal
}

.mmenu a.mlink span {
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
    margin-top: .55em
}

.mmenu__foot {
    margin-top: auto;
    padding: 2.4rem .55em 0;
    border-top: 1px solid rgb(1 1 1 / .08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem
}

.ftr__mark {
    display: block;
    width: auto;
    height: 5.6rem;
    opacity: .92
}

.ftr__claim {
    font-size: var(--text-xl);
    line-height: 1.1;
    margin-top: 1.92rem;
    max-width: 14ch
}

.hero {
    padding-top: clamp(10.4rem, 11vw, 15.2rem);
    position: relative
}

.hero__grid {
    display: grid;
    gap: clamp(1.6rem, 2.4vw, 3.2rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end
}

.hero h1 {
    font-size: var(--text-hero)
}

.hero__sub {
    display: flex;
    flex-direction: column;
    gap: 2.24rem;
    padding-bottom: clamp(.8rem, 1.5vw, 2.24rem)
}

.hero__strip {
    display: grid;
    gap: clamp(.96rem, 1.2vw, 1.6rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(2.56rem, 3vw, 4.16rem)
}

.hero__strip .fk-media {
    border-radius: var(--r-xl)
}

.hero__strip .fk-media:nth-child(1) {
    aspect-ratio: 4/5
}

.hero__strip .fk-media:nth-child(2) {
    aspect-ratio: 4/5;
    margin-top: clamp(1.28rem, 2vw, 3.84rem)
}

.hero__strip .fk-media:nth-child(3) {
    aspect-ratio: 4/5
}

.hero__strip .fk-media:nth-child(4) {
    aspect-ratio: 4/5;
    margin-top: clamp(1.28rem, 2vw, 3.84rem)
}

@media(max-width:900px) {
    .hero__grid {
        grid-template-columns: 1fr;
        align-items: start
    }

    .hero__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.rot {
    display: inline-grid;
    vertical-align: bottom
}

.rot>span {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(.35em);
    transition: opacity .5s var(--e-out), transform .62s var(--e-out)
}

.rot>span.on {
    opacity: 1;
    transform: none
}

.phead {
    padding-top: clamp(11.2rem, 12vw, 16.8rem);
    padding-bottom: clamp(3.2rem, 4vw, 5.6rem)
}

.phead h1 {
    font-size: var(--text-3xl);
    max-width: 16ch
}

.phead .lede {
    max-width: 46ch;
    margin-top: 1.92rem
}

.phead__row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--gutter);
    align-items: end
}

@media(max-width:900px) {
    .phead__row {
        grid-template-columns: 1fr;
        align-items: start
    }
}

.split {
    display: grid;
    gap: clamp(2.24rem, 4vw, 7.2rem);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.split--wide-l {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr)
}

.split--wide-r {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr)
}

.split__body {
    display: flex;
    flex-direction: column;
    gap: 2.08rem;
    align-items: flex-start
}

@media(max-width:900px) {

    .split,
    .split--wide-l,
    .split--wide-r {
        grid-template-columns: 1fr
    }

    .split__media-first {
        order: -1
    }
}

#hakkimizda {
    scroll-margin-top: 6rem
}

.story-media {
    gap: .9rem
}

.story-media__pair {
    gap: .9rem
}

@media(max-width:900px) {
    .story-media .fk-media--45 {
        aspect-ratio: 16 / 10
    }
}

@media(max-width:620px) {
    .story-media {
        gap: .55rem
    }

    .story-media .fk-media--45 {
        aspect-ratio: 4 / 3;
        border-radius: 14px
    }

    .story-media__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem
    }

    .story-media__pair .fk-media {
        border-radius: 12px
    }
}

.flist {
    display: grid;
    gap: 0
}

.flist__i {
    display: grid;
    grid-template-columns: 5.12rem minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(1.28rem, 2vw, 3.2rem);
    align-items: start;
    padding: clamp(1.92rem, 2.4vw, 3.2rem) 0;
    border-top: 1px solid var(--hairline);
    transition: padding-left var(--t-mid)
}

.flist__i:last-child {
    border-bottom: 1px solid var(--hairline)
}

.flist__i:hover {
    padding-left: .96rem
}

.flist__n {
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: var(--muted);
    padding-top: .5em
}

.flist__t {
    font-size: var(--text-xl);
    letter-spacing: -.03em;
    line-height: 1.05
}

.flist__d {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    max-width: 52ch
}

@media(max-width:760px) {
    .flist__i {
        grid-template-columns: 3.52rem minmax(0, 1fr)
    }

    .flist__d {
        grid-column: 2
    }
}

.on-dark .flist__i,
.bg-ink .flist__i,
.bg-indigo .flist__i,
.bg-teal .flist__i,
.bg-brick .flist__i {
    border-color: color-mix(in oklab, var(--cream) 22%, transparent)
}

.on-dark .flist__d,
.bg-ink .flist__d,
.bg-indigo .flist__d,
.bg-teal .flist__d,
.bg-brick .flist__d,
.on-dark .flist__n,
.bg-ink .flist__n,
.bg-indigo .flist__n,
.bg-teal .flist__n,
.bg-brick .flist__n {
    color: color-mix(in oklab, var(--cream) 72%, transparent)
}

.filters {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    top: 7.36rem;
    z-index: 40;
    padding: 1.12rem 1.44rem;
    margin-bottom: clamp(2.56rem, 3vw, 3.84rem);
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--cream) 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent)
}

.filters__count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--muted);
    padding-right: .64rem
}

@media(max-width:700px) {
    .filters {
        position: static;
        overflow-x: auto;
        flex-wrap: nowrap;
        border-radius: var(--r-lg)
    }

    .filters__count {
        display: none
    }
}

.pgrid {
    display: grid;
    gap: clamp(1.28rem, 1.6vw, 2.24rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr))
}

.pcard {
    position: relative
}

.pcard__link:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit
}

@media(max-width:700px) {
    .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem
    }

    .pcard {
        gap: .7rem;
        padding: .7rem .7rem 1rem;
        border-radius: 14px
    }

    .pcard .fk-media {
        border-radius: 10px
    }

    .pcard .fk-media img {
        padding: 5%
    }

    .pcard__body {
        padding-inline: .15rem;
        gap: .45rem
    }

    .pcard__t {
        font-size: 1rem;
        line-height: 1.2
    }

    .pcard__foot {
        gap: .4rem;
        padding-top: .15rem;
        flex-wrap: wrap
    }

    .pcard__foot .tag {
        padding: .35em .65em;
        font-size: .7rem
    }

    .fk-price {
        font-size: .95rem
    }
}

@media(max-width:420px) {
    .pgrid {
        gap: .55rem
    }

    .pcard {
        gap: .55rem;
        padding: .55rem .55rem .85rem
    }

    .pcard__t {
        font-size: .92rem
    }
}

.empty {
    padding: 6.4rem 0;
    text-align: center;
    color: var(--muted)
}

.pdp {
    display: grid;
    gap: clamp(2.4rem, 4vw, 6.4rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start
}

.pdp__gal {
    display: flex;
    flex-direction: column;
    gap: 1.28rem;
    position: sticky;
    top: 10.4rem
}

.pdp__main {
    border-radius: var(--r-block);
    background: var(--cream-lift);
    aspect-ratio: 1;
    overflow: hidden;
    position: relative
}

.pdp__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9%;
    mix-blend-mode: multiply
}

.pdp__thumbs {
    display: flex;
    gap: .96rem
}

.pdp__thumbs button {
    width: 76px;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--cream-lift);
    border: 1px solid transparent;
    transition: border-color var(--t-fast)
}

.pdp__thumbs button[aria-pressed=true] {
    border-color: var(--ink)
}

.pdp__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply
}

.pdp__body {
    display: flex;
    flex-direction: column;
    gap: 1.84rem;
    padding-top: clamp(0, 2vw, 2.4rem)
}

.pdp h1 {
    font-size: var(--text-2xl)
}

.pdp__price {
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums
}

.spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.44rem 2.24rem;
    margin-top: .64rem
}

.spec div {
    border-top: 1px solid var(--hairline);
    padding-top: .88rem
}

.spec dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted)
}

.spec dd {
    margin: .4rem 0 0;
    font-size: var(--text-sm)
}

.vlist {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap
}

.vlist button {
    padding: .7em 1.1em;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    font-size: var(--text-sm);
    transition: all var(--t-fast);
    background: transparent
}

.vlist button[aria-pressed=true] {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink)
}

@media(max-width:900px) {
    .pdp {
        grid-template-columns: 1fr
    }

    .pdp__gal {
        position: static
    }
}

.loc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.92rem, 3vw, 5.6rem);
    align-items: center;
    padding-block: clamp(3.2rem, 4vw, 6.4rem);
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 11.2rem
}

.loc:nth-child(2n) .loc__media {
    order: 2
}

.loc__media {
    border-radius: var(--r-block);
    overflow: hidden;
    aspect-ratio: 5/4;
    background: var(--cream-lift)
}

.loc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--e-out)
}

.loc:hover .loc__media img {
    transform: scale(1.04)
}

.loc__body {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: flex-start
}

.loc h2 {
    font-size: var(--text-2xl)
}

.loc__meta {
    display: grid;
    gap: .88rem;
    font-size: var(--text-sm);
    width: 100%;
    max-width: 54.4rem
}

.loc__meta div {
    display: flex;
    gap: 1.28rem;
    align-items: baseline;
    padding-block: .72rem;
    border-top: 1px solid var(--hairline)
}

.loc__meta dt {
    flex: none;
    width: 8.8rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted)
}

.loc__meta dd {
    margin: 0
}

.openpill {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: var(--text-xs);
    padding: .4em .8em;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--green) 35%, transparent)
}

.openpill[data-open=false] {
    background: color-mix(in oklab, var(--ink) 8%, transparent);
    color: var(--muted)
}

.openpill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1c7a35;
    display: block
}

.openpill[data-open=false] i {
    background: currentColor;
    opacity: .5
}

.stars {
    color: var(--terra);
    letter-spacing: .08em
}

@media(max-width:860px) {
    .loc {
        grid-template-columns: 1fr
    }

    .loc:nth-child(2n) .loc__media {
        order: -1
    }
}

.citycard {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-radius: var(--r-block);
    overflow: hidden
}

.citycard a {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    display: block
}

.citycard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--e-out), filter .5s;
    filter: grayscale(.15)
}

.citycard a:hover img {
    transform: scale(1.06);
    filter: none
}

.citycard span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.56rem 1.6rem 1.44rem;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    background: linear-gradient(transparent, #01010199)
}

@media(max-width:900px) {
    .citycard {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:520px) {
    .citycard {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.tl {
    display: grid;
    gap: clamp(1.6rem, 2vw, 2.56rem);
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.tl__i {
    display: flex;
    flex-direction: column;
    gap: 1.44rem;
    padding-top: 1.76rem;
    border-top: 2px solid currentColor
}

.tl__y {
    font-size: var(--text-xl);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums
}

.tl__d {
    font-size: var(--text-sm);
    line-height: 1.55;
    opacity: .78
}

.tl__i img {
    border-radius: var(--r-lg);
    margin-top: auto
}

@media(max-width:900px) {
    .tl {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:520px) {
    .tl {
        grid-template-columns: 1fr
    }
}

.award {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    gap: clamp(2.4rem, 4vw, 6.4rem);
    align-items: center
}

.award__badge {
    max-width: 260px;
    margin-inline: auto;
    animation: spinslow 34s linear infinite
}

.award__google {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    justify-self: stretch;
    pointer-events: none;
    user-select: none
}

.award__google-mark {
    display: block;
    width: clamp(64px, 12vw, 96px);
    height: auto
}

@keyframes spinslow {
    to {
        transform: rotate(360deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .award__badge {
        animation: none
    }
}

@media(max-width:820px) {
    .award {
        grid-template-columns: 1fr;
        justify-items: start;
        align-items: start;
        text-align: left
    }

    .award__badge {
        max-width: 180px;
        margin-inline: 0
    }

    .award__google {
        width: auto;
        max-width: none;
        margin: 0;
        justify-self: start;
        justify-content: flex-start
    }

    .award__google-mark {
        width: 72px
    }

    .award .stack {
        width: 100%;
        align-items: flex-start !important
    }
}

.blog-hero {
    padding-top: clamp(10.4rem, 11vw, 15.2rem);
    overflow: visible
}

.blog-hero .h-1,
.blog-hero h1 {
    line-height: 1.12;
    overflow: visible;
    padding-bottom: .08em
}

.blog-hero .h-1+.dim,
.blog-hero h1+.dim {
    margin-top: 1.4rem;
    line-height: 1.7;
    overflow: visible
}

.contact {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 4vw, 4.8rem);
    align-items: stretch
}

.contact__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
    color: var(--muted)
}

.contact__value {
    font-size: clamp(1.45rem, 1.2rem + .6vw, 1.9rem);
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none
}

a.contact__value:hover {
    opacity: .72
}

.contact__map {
    border-radius: var(--r-xl);
    overflow: hidden;
    min-height: clamp(280px, 42vw, 520px);
    background: color-mix(in oklab, var(--ink) 6%, var(--bg))
}

.contact__map iframe {
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
    display: block;
    filter: grayscale(.12) contrast(1.02)
}

@media(max-width:900px) {
    .contact {
        grid-template-columns: 1fr
    }

    .contact__map {
        min-height: 320px;
        order: -1
    }
}

.blog-post {
    padding-top: clamp(10.4rem, 11vw, 15.2rem);
    padding-bottom: clamp(2.4rem, 4vw, 4.8rem)
}

.blog-post__wrap {
    max-width: var(--maxw)
}

.blog-post__back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .4rem;
    margin-bottom: .9rem;
    font-size: var(--text-sm)
}

.blog-post__title {
    margin-top: .9rem;
    margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
    font-size: clamp(2.8rem, 2rem + 2.4vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    max-width: 22ch
}

.blog-post__hero {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-xl);
    margin-bottom: clamp(2rem, 3.2vw, 3.2rem)
}

.blog-post__body {
    max-width: min(88ch, 100%);
    margin-inline: auto;
    font-size: var(--text-base);
    line-height: 1.75;
    text-align: left;
    color: color-mix(in oklab, var(--ink) 88%, transparent)
}

.blog-post__body h2 {
    margin-top: 1.6em;
    margin-bottom: .5em;
    font-size: var(--text-lg);
    letter-spacing: -.02em
}

.blog-post__body p+p {
    margin-top: 1em
}

.jgrid {
    display: grid;
    gap: clamp(1.6rem, 2vw, 2.88rem);
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.jcard {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    height: 100%;
    min-height: 100%
}

.jcard .fk-media {
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    flex: none
}

.jcard__body {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex: 1;
    min-height: 0
}

.jcard h3 {
    font-size: var(--text-lg);
    letter-spacing: -.025em
}

.jcard__meta {
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase
}

.jcard__excerpt {
    font-size: var(--text-sm);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.jcard .ulink {
    margin-top: auto;
    padding-top: .35rem
}

.jcard--lead {
    grid-column: span 3;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.92rem, 3vw, 4.8rem);
    align-items: center
}

.jcard--lead .fk-media {
    aspect-ratio: 16/10
}

.jcard--lead h3 {
    font-size: var(--text-2xl);
    line-height: 1.02
}

@media(max-width:900px) {
    .jgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .jcard--lead {
        grid-column: span 2;
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .jgrid {
        grid-template-columns: 1fr;
        gap: 1.35rem
    }

    .jcard {
        gap: .75rem
    }

    .jcard .fk-media {
        aspect-ratio: 16 / 10;
        border-radius: 14px
    }

    .jcard h3 {
        font-size: 1.15rem;
        line-height: 1.2;
        letter-spacing: -.02em
    }

    .jcard__meta {
        font-size: .72rem
    }

    .jcard__body {
        gap: .4rem
    }

    .jcard__excerpt {
        font-size: .88rem;
        line-height: 1.45;
        -webkit-line-clamp: 2
    }

    .jcard--lead {
        grid-column: span 1;
        gap: .85rem
    }

    .jcard--lead .fk-media {
        aspect-ratio: 16 / 10
    }

    .jcard--lead h3 {
        font-size: 1.35rem
    }
}

.steps {
    display: grid;
    gap: clamp(1.6rem, 2vw, 2.56rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    counter-reset: s
}

.steps__i {
    display: flex;
    flex-direction: column;
    gap: 1.12rem
}

.steps__i:before {
    counter-increment: s;
    content: counter(s, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    letter-spacing: .14em;
    opacity: .6;
    padding-bottom: 1.28rem;
    border-bottom: 1px solid currentColor;
    margin-bottom: .64rem
}

.steps__t {
    font-size: var(--text-lg);
    letter-spacing: -.02em;
    line-height: 1.15
}

.steps__d {
    font-size: var(--text-sm);
    line-height: 1.55;
    opacity: .75
}

@media(max-width:900px) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:520px) {
    .steps {
        grid-template-columns: 1fr
    }
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.92rem, 3vw, 4.8rem)
}

@media(max-width:700px) {
    .stats {
        grid-template-columns: 1fr;
        gap: 3.2rem
    }
}

.vblock {
    position: relative;
    border-radius: var(--r-block);
    overflow: hidden;
    background: var(--ink)
}

.vblock video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.vblock--tall {
    aspect-ratio: 4/5
}

.vblock--wide {
    aspect-ratio: 16/9
}

.vblock--film {
    aspect-ratio: 1920 / 1000;
    background: transparent
}

.vblock--film video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vblock__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4.8rem 2.4rem 2.24rem;
    color: var(--cream);
    font-size: var(--text-sm);
    background: linear-gradient(transparent, #0101018c)
}

.press {
    display: flex;
    align-items: center;
    gap: clamp(2.4rem, 4vw, 5.6rem);
    flex-wrap: wrap;
    justify-content: center;
    opacity: .75
}

.press span {
    font-size: var(--text-sm);
    letter-spacing: .1em;
    text-transform: uppercase
}

.nl {
    display: flex;
    gap: .96rem;
    max-width: 48rem;
    width: 100%
}

.nl input {
    flex: 1;
    padding: .95em 1.2em;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in oklab, var(--cream) 45%, transparent);
    background: color-mix(in oklab, var(--cream) 10%, transparent);
    color: inherit;
    font-size: var(--text-sm)
}

.nl input::placeholder {
    color: color-mix(in oklab, currentColor 55%, transparent)
}

.nl input:focus {
    outline: none;
    border-color: currentColor
}

@media(max-width:520px) {
    .nl {
        flex-direction: column
    }

    .nl .btn {
        width: 100%
    }
}

.fgrid {
    display: grid;
    gap: 1.76rem;
    grid-template-columns: 1fr 1fr
}

.fgrid .full {
    grid-column: 1 / -1
}

@media(max-width:620px) {
    .fgrid {
        grid-template-columns: 1fr
    }
}

.pill-row {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap
}

.blob-deco {
    position: absolute;
    border-radius: 46% 54% 52% 48%/50% 46% 54% 50%;
    pointer-events: none;
    z-index: -1;
    opacity: .85
}

.quote {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 3.4vw, 4.64rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    max-width: 24ch
}

.mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em
}

.imgcap {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: .96rem
}

.on-dark .imgcap {
    color: color-mix(in oklab, var(--cream) 65%, transparent)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.is-bad {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 22%, transparent)
}

.rvwgrid {
    display: grid;
    gap: clamp(1.28rem, 1.4vw, 1.92rem);
    grid-template-columns: repeat(3, 1fr)
}

@media(max-width:1000px) {
    .rvwgrid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:640px) {
    .rvwgrid {
        grid-template-columns: 1fr
    }
}

.rvw {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.44rem;
    padding: clamp(1.84rem, 1.9vw, 2.72rem);
    border-radius: clamp(20px, 2.4vw, 30px);
    background: var(--paper);
    border: 1px solid var(--hairline);
    transition: transform .62s var(--e-out), box-shadow .62s var(--e-out), border-color .32s var(--e-out);
    will-change: transform
}

.rvw:hover {
    border-color: color-mix(in oklab, var(--terra) 55%, transparent);
    box-shadow: 0 22px 48px -30px color-mix(in oklab, var(--ink) 55%, transparent)
}

.rvw__stars {
    color: var(--terra);
    letter-spacing: .18em;
    font-size: 1.376rem
}

.rvw__q {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.62;
    flex: 1
}

.rvw__q:before {
    content: "\201c"
}

.rvw__q:after {
    content: "\201d"
}

.rvw__by {
    display: flex;
    flex-direction: column;
    gap: .288rem
}

.rvw__n {
    font-weight: 600;
    font-size: 1.44rem
}

.rvw__c {
    font-size: 1.184rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .55
}

.crumb {
    display: flex;
    align-items: center;
    gap: .88rem;
    font-size: 1.216rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .62
}

.crumb a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent
}

.crumb a:hover {
    border-bottom-color: currentColor
}

.crumb__now {
    opacity: .75
}

.fk-media--21 {
    aspect-ratio: 21 / 9
}

@media(max-width:700px) {
    .fk-media--21 {
        aspect-ratio: 4 / 3
    }
}

.cafenav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(.96rem, 1.1vw, 1.6rem)
}

@media(max-width:900px) {
    .cafenav {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:560px) {
    .cafenav {
        grid-template-columns: repeat(2, 1fr)
    }
}

.cafenav__i {
    display: flex;
    flex-direction: column;
    gap: .88rem;
    text-decoration: none;
    color: inherit
}

.cafenav__img {
    display: block;
    overflow: hidden;
    border-radius: clamp(16px, 1.8vw, 24px);
    aspect-ratio: 3 / 4;
    background: var(--cream)
}

.cafenav__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--e-out), filter .62s var(--e-out);
    filter: saturate(.88)
}

.cafenav__i:hover .cafenav__img img {
    transform: scale(1.06);
    filter: saturate(1.06)
}

.cafenav__n {
    font-weight: 600;
    font-size: 1.568rem
}

.cafenav__d {
    font-size: 1.248rem;
    opacity: .58;
    line-height: 1.45
}

.rvwgrid--solo {
    grid-template-columns: minmax(0, 62ch)
}

.rvwgrid--solo .rvw {
    padding: clamp(2.56rem, 3vw, 4.16rem);
    background: var(--cream-lift)
}

.rvwgrid--solo .rvw__q {
    font-family: var(--font-serif, inherit);
    font-size: clamp(1.84rem, 1.52rem + .75vw, 2.64rem);
    line-height: 1.42
}

.art {
    --art-w: 68ch
}

.arthead {
    padding: clamp(11.2rem, 12vw, 16.8rem) 0 clamp(2.24rem, 3vw, 3.84rem)
}

.arthead__back {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .13em
}

.ar--l {
    display: inline-block
}

.arthead__h {
    margin-top: 1.6rem;
    max-width: 20ch;
    font-size: clamp(3.2rem, 1.92rem + 3.4vw, 6.56rem);
    line-height: 1.02;
    letter-spacing: -.035em
}

.arthead .lede {
    max-width: 52ch;
    margin-top: 2.08rem
}

.arthead__meta {
    display: flex;
    gap: .96rem;
    align-items: center;
    margin-top: 2.56rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted)
}

.artlead {
    margin: 0 0 clamp(3.2rem, 5vw, 6.4rem)
}

.artlead .fk-media {
    border-radius: var(--r-xl);
    aspect-ratio: 16 / 8.4
}

@media(max-width:700px) {
    .artlead .fk-media {
        aspect-ratio: 4 / 3
    }
}

.artbody {
    max-width: var(--art-w);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.84rem, 2vw, 2.72rem)
}

.art__p {
    font-size: clamp(1.632rem, 1.536rem + .28vw, 1.856rem);
    line-height: 1.72;
    letter-spacing: -.004em
}

.art__p em,
.art__ul em {
    font-style: italic
}

.art__p strong,
.art__ul strong {
    font-weight: 600
}

.art__h {
    margin-top: clamp(2.24rem, 3vw, 4.16rem);
    font-size: clamp(2.16rem, 1.68rem + 1.1vw, 3.12rem);
    line-height: 1.1;
    letter-spacing: -.03em
}

.art__ul {
    display: flex;
    flex-direction: column;
    gap: 1.12rem;
    padding-left: 0;
    list-style: none
}

.art__ul li {
    position: relative;
    padding-left: 2.4rem;
    font-size: clamp(1.6rem, 1.52rem + .22vw, 1.76rem);
    line-height: 1.65
}

.art__ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terra)
}

.art__q {
    margin: clamp(1.28rem, 2vw, 2.56rem) 0;
    padding-left: clamp(1.76rem, 2.4vw, 3.04rem);
    border-left: 2px solid var(--terra)
}

.art__qt {
    font-family: var(--font-serif, inherit);
    font-style: italic;
    font-size: clamp(2rem, 1.6rem + 1.1vw, 2.96rem);
    line-height: 1.32;
    letter-spacing: -.02em
}

.art__q figcaption {
    margin-top: 1.28rem;
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em
}

.art__note {
    background: var(--cream-lift);
    border-radius: var(--r-lg);
    padding: clamp(1.76rem, 2.4vw, 2.72rem) clamp(1.92rem, 2.6vw, 3.04rem)
}

.art__note p {
    font-size: var(--text-sm);
    line-height: 1.65
}

.art__fig {
    margin: clamp(1.6rem, 2.5vw, 3.2rem) 0
}

.art__fig .fk-media {
    border-radius: var(--r-lg);
    aspect-ratio: 16 / 10
}

.art__cap {
    margin-top: 1.28rem;
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.5;
    letter-spacing: .01em
}

.art__recipe {
    display: grid;
    gap: 0;
    margin: clamp(.96rem, 2vw, 2.24rem) 0;
    border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
    border-radius: var(--r-lg);
    overflow: hidden
}

.art__rr {
    display: grid;
    grid-template-columns: minmax(0, 19.2rem) minmax(0, 1fr);
    gap: 1.6rem;
    padding: 1.36rem clamp(1.6rem, 2.4vw, 2.4rem);
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 9%, transparent)
}

.art__rr:last-child {
    border-bottom: 0
}

.art__rr dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    align-self: center
}

.art__rr dd {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    font-weight: 500
}

@media(max-width:620px) {
    .art__rr {
        grid-template-columns: 1fr;
        gap: .4rem
    }
}

.artend {
    margin-top: clamp(4.8rem, 8vw, 10.4rem)
}

.artend .eyebrow {
    margin-bottom: clamp(1.92rem, 2.5vw, 3.2rem)
}

.artend__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media(max-width:900px) {
    .artend__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:600px) {
    .artend__grid {
        grid-template-columns: 1fr
    }
}

.artcta {
    margin: clamp(4.8rem, 7vw, 9.6rem) 0 var(--section-y);
    padding: clamp(2.88rem, 4vw, 5.76rem)
}

.artlead .fk-media {
    background: var(--cream-lift)
}

.artlead .fk-media img.art__hero--fit,
.art__fig .fk-media img.art__hero--fit {
    object-fit: contain;
    padding: clamp(2.56rem, 4vw, 5.44rem);
    background: var(--ink)
}

.artlead .fk-media:has(.art__hero--fit) {
    background: var(--ink)
}

html.ldr-on,
html.ldr-on body {
    overflow: hidden
}

.ldr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    background: var(--cream);
    display: grid;
    place-items: center;
    clip-path: inset(0 0 0 0);
    will-change: clip-path
}

.ldr__c {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ldr__in {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(46px, 13vh, 130px);
    text-align: center;
    z-index: 2;
    padding-inline: var(--gutter)
}

.ldr__mark {
    display: block;
    width: clamp(54px, 6.5vw, 88px);
    height: auto;
    margin: 0 auto;
    opacity: 0;
    animation: ldrUp .9s var(--e-out) .14s forwards
}

.ldr__claim {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.84rem, 1.44rem + 1vw, 3.04rem);
    line-height: 1.2;
    margin: 0;
    opacity: 0;
    transform: translateY(14px)
}

.ldr.is-mark .ldr__claim {
    opacity: 1;
    transform: none;
    transition: opacity .62s ease-out, transform .8s var(--e-out)
}

.ldr__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    padding-inline: var(--gutter);
    font-size: 1.056rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--ink) 58%, transparent);
    font-variant-numeric: tabular-nums
}

.ldr__stage.is-new {
    animation: ldrStage .42s var(--e-out)
}

.ldr__temp {
    color: var(--brick)
}

@keyframes ldrStage {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ldr:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    background: var(--paper);
    opacity: 0;
    pointer-events: none
}

.ldr.is-crack:after {
    animation: ldrFlash .26s ease-out
}

@keyframes ldrFlash {
    0% {
        opacity: .34
    }

    to {
        opacity: 0
    }
}

.ldr__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: color-mix(in oklab, var(--ink) 12%, transparent);
    z-index: 3
}

.ldr__bar i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--ink);
    transition: width .26s linear
}

@keyframes ldrUp {
    0% {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ldr.is-out {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s cubic-bezier(.76, 0, .24, 1)
}

.ldr.is-out .ldr__in {
    opacity: 0;
    transform: translateY(56px);
    transition: opacity .46s ease-out, transform .9s cubic-bezier(.76, 0, .24, 1)
}

.ldr.is-out .ldr__meta {
    opacity: 0;
    transition: opacity .26s
}

.ldr.is-out .ldr__bar {
    opacity: 0;
    transition: opacity .3s
}

.curtain {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 290;
    background: var(--cream);
    clip-path: inset(100% 0 0 0);
    pointer-events: none
}

.curtain.is-in {
    clip-path: inset(0 0 0 0);
    transition: clip-path .46s cubic-bezier(.76, 0, .24, 1)
}

.curtain span {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: clamp(38px, 4vw, 54px);
    opacity: 0
}

.curtain.is-in span {
    opacity: 1;
    transition: opacity .3s .2s
}

/* Scroll / view timeline animasyonları yalnızca masaüstü (fine pointer) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .zs {
            transform-origin: 50% 0;
            animation: zsPass linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%
        }

        @keyframes zsPass {
            0% {
                transform: scale(.93);
                opacity: .55
            }

            24% {
                transform: scale(1);
                opacity: 1
            }

            66% {
                transform: scale(1);
                opacity: 1
            }

            to {
                transform: scale(.87) translateY(-2vh);
                opacity: .28
            }
        }

        .hero__grid {
            animation: heroOut linear both;
            animation-timeline: scroll(root);
            animation-range: 0 82vh
        }

        @keyframes heroOut {
            0% {
                opacity: 1;
                transform: none
            }

            to {
                opacity: 0;
                transform: translateY(-9vh) scale(.95)
            }
        }

        .hero__strip {
            animation: stripOpen linear both;
            animation-timeline: scroll(root);
            animation-range: 0 90vh
        }

        @keyframes stripOpen {
            0% {
                transform: translateY(0)
            }

            to {
                transform: translateY(-3.5vh)
            }
        }

        .ftr__word {
            animation: wordRise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 100%
        }

        @keyframes wordRise {
            0% {
                transform: translateY(28%);
                opacity: .25
            }

            to {
                transform: none;
                opacity: 1
            }
        }
    }

    .marq {
        transform: skewY(calc(var(--vel, 0) * -.09deg));
        transition: transform .24s var(--e-out)
    }
}

.rail {
    position: relative
}

.rail__vp {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center
}

.rail__box {
    width: 100%;
    display: grid;
    gap: clamp(1.6rem, 2vw, 3.04rem)
}

.rail__box h2 {
    font-size: clamp(2.72rem, 1.6rem + 2.1vw, 4.96rem);
    line-height: 1.02
}

.rail__box .eyebrow {
    margin-bottom: 1.12rem
}

.rail__head {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(1.6rem, 3vw, 4.16rem);
    align-items: end
}

.rail__win {
    overflow: hidden;
    margin-inline: calc(clamp(2.56rem, 3.4vw, 5.44rem)*-1);
    padding-inline: clamp(2.56rem, 3.4vw, 5.44rem)
}

.rail__track {
    display: flex;
    gap: clamp(1.12rem, 1.4vw, 2.24rem);
    will-change: transform
}

.rail__card {
    position: relative;
    flex: 0 0 auto;
    height: min(44vh, 370px);
    width: auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-xl);
    overflow: hidden;
    display: block;
    color: var(--cream);
    background: color-mix(in oklab, var(--ink) 70%, var(--indigo))
}

.rail__card img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--e-out), filter .5s;
    filter: grayscale(.12) brightness(.92)
}

.rail__card:hover img,
.rail__card:focus-visible img {
    transform: scale(1.05);
    filter: none
}

.rail__card:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #010101b8, #01010100 58%)
}

.rail__cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: clamp(1.36rem, 1.4vw, 2.08rem);
    display: grid;
    gap: .48rem
}

.rail__n {
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7
}

.rail__t {
    font-size: clamp(1.84rem, 1.44rem + .7vw, 2.72rem);
    line-height: 1.05;
    font-weight: 500
}

.rail__m {
    font-size: var(--text-xs);
    opacity: .82;
    display: flex;
    align-items: center;
    gap: .72rem;
    flex-wrap: wrap
}

.rail__live {
    display: inline-flex;
    align-items: center;
    gap: .512rem
}

.rail__live b {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 color-mix(in oklab, var(--green) 70%, transparent);
    animation: pulseDot 2.2s ease-out infinite
}

.rail__live.is-shut b {
    background: color-mix(in oklab, var(--cream) 55%, transparent);
    animation: none
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 color-mix(in oklab, var(--green) 60%, transparent)
    }

    70% {
        box-shadow: 0 0 0 7px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

.rail__foot {
    display: flex;
    align-items: center;
    gap: clamp(1.44rem, 2vw, 2.88rem);
    justify-content: space-between
}

.rail__prog {
    flex: 1;
    height: 2px;
    background: color-mix(in oklab, var(--cream) 26%, transparent);
    border-radius: 2px;
    overflow: hidden
}

.rail__prog i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--cream);
    transform: scaleX(0);
    transform-origin: 0 50%
}

.rail__hint {
    font-size: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .72;
    white-space: nowrap
}

@media(max-width:1000px) {
    .rail {
        height: auto !important
    }

    .rail__vp {
        position: static;
        height: auto
    }

    .rail__box {
        max-height: none
    }

    .rail__head {
        grid-template-columns: 1fr;
        align-items: start
    }

    .rail__win {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    .rail__win::-webkit-scrollbar {
        display: none
    }

    .rail__track {
        transform: none !important;
        padding-right: clamp(2.56rem, 3.4vw, 5.44rem)
    }

    .rail__card {
        height: auto;
        width: min(62vw, 300px);
        aspect-ratio: 3 / 4;
        scroll-snap-align: start
    }

    .rail__prog {
        display: none
    }
}

.beanfield {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s var(--e-out)
}

.beanfield.in {
    opacity: 1
}

.block>.split,
.block>.head,
.block>.wrap {
    position: relative;
    z-index: 1
}

@media(hover:hover)and (prefers-reduced-motion:no-preference) {
    .btn--lg {
        transition: transform .38s var(--e-out), background-size .34s var(--e-out), color .24s
    }
}

@media(prefers-reduced-motion:reduce) {

    .ldr,
    .curtain {
        display: none
    }

    .rail {
        height: auto !important
    }

    .rail__vp {
        position: static;
        height: auto
    }

    .rail__win {
        overflow-x: auto
    }

    .rail__track {
        transform: none !important
    }

    .beanfield {
        display: none
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .spin {
            animation: spinScroll linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%
        }

        @keyframes spinScroll {
            0% {
                rotate: -28deg
            }

            to {
                rotate: 28deg
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .rw span.w>i {
        transform: perspective(720px) rotateX(62deg) translateY(104%);
        transform-origin: 50% 100%;
        transition: transform 1.08s var(--e-out), opacity .62s linear;
        transition-delay: calc(var(--i, 0) * 58ms);
        opacity: .15
    }

    .rw.in span.w>i {
        transform: none;
        opacity: 1
    }

    @media (hover: hover) and (pointer: fine) {
        .rvw,
        .rail__card,
        .cafenav__i,
        .tiltwrap {
            transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translate3d(0, var(--tz, 0px), 0);
            transition: transform .7s var(--e-out);
            transform-style: preserve-3d
        }

        .is-tilting {
            transition: transform .12s linear
        }

        .rvw.is-tilting,
        .tiltwrap.is-tilting {
            --tz: -4px
        }

        .tiltwrap:after,
        .rvw:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none;
            border-radius: inherit;
            opacity: 0;
            transition: opacity .42s var(--e-out);
            background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .26), transparent 62%)
        }

        .rvw,
        .tiltwrap {
            position: relative
        }

        .tiltwrap.is-tilting:after,
        .rvw.is-tilting:after {
            opacity: 1
        }

        .lamp {
            position: relative;
            isolation: isolate
        }

        .lamp>* {
            position: relative;
            z-index: 1
        }

        .lamp:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: var(--lamp, 0);
            transition: opacity .7s var(--e-out);
            background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--terra) 42%, transparent), transparent 68%);
            mix-blend-mode: screen
        }
    }

    .prog {
        height: 3px;
        background: linear-gradient(90deg, var(--brick) 0%, var(--terra) 42%, var(--yellow) 78%, var(--terra) 100%);
        box-shadow: 0 0 18px -2px color-mix(in oklab, var(--terra) 70%, transparent)
    }

    .prog:after {
        content: "";
        position: absolute;
        right: -3px;
        top: -2.5px;
        width: 8px;
        height: 8px;
        border-radius: 50%/62% 62% 38% 38%;
        background: var(--brick);
        box-shadow: 0 0 12px color-mix(in oklab, var(--terra) 80%, transparent)
    }

    .curtain {
        clip-path: ellipse(150% 100% at 50% 210%);
        background: var(--cream)
    }

    .curtain.is-in {
        clip-path: ellipse(150% 100% at 50% 50%);
        transition: clip-path .62s cubic-bezier(.62, 0, .2, 1)
    }

    .curtain__crema {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, color-mix(in oklab, var(--terra) 88%, var(--cream)) 0%, var(--cream) 46%);
        clip-path: ellipse(150% 100% at 50% 190%);
        opacity: .9
    }

    .curtain.is-in .curtain__crema {
        clip-path: ellipse(150% 100% at 50% 34%);
        transition: clip-path .56s cubic-bezier(.62, 0, .2, 1)
    }

    .curtain span {
        z-index: 2
    }

    .burst {
        position: fixed;
        z-index: 300;
        pointer-events: none;
        width: 9px;
        height: 12px;
        border-radius: 50%/60% 60% 40% 40%;
        animation: burstFly var(--dur, .9s) cubic-bezier(.2, .7, .3, 1) forwards
    }

    @keyframes burstFly {
        0% {
            transform: translateZ(0) rotate(0) scale(.5);
            opacity: 0
        }

        12% {
            opacity: 1
        }

        to {
            transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--dr)) scale(1);
            opacity: 0
        }
    }

    .hero__strip .fk-media {
        transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
        transition: transform .9s var(--e-out)
    }

    .btn {
        transition: transform .38s var(--e-out), box-shadow .38s var(--e-out), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast)
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -18px color-mix(in oklab, var(--ink) 80%, transparent)
    }

    .btn:active {
        transform: translateY(0) scale(.985)
    }
}

@media(prefers-reduced-motion:reduce) {

    .lamp:before,
    .prog:after,
    .burst {
        display: none
    }
}

/* Touch / mobile: hover, lamp, scroll ve giriş animasyonları kapalı (yalnızca web) */
@media (hover: none), (pointer: coarse) {
    .lamp {
        --lamp: 0 !important;
    }

    .lamp:before,
    .rvw:after,
    .tiltwrap:after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
    }

    .pcard:hover,
    a.fk-card:hover,
    .fk-card--hov:hover,
    .rvw:hover,
    .rail__card:hover,
    .jcard:hover {
        transform: none;
        box-shadow: none;
    }

    a:hover > .fk-media img,
    .fk-card:hover .fk-media img,
    .fk-media--zoom:hover img,
    .rail__card:hover img {
        transform: none;
    }

    .zs,
    .hero__grid,
    .hero__strip,
    .ftr__word,
    .spin {
        animation: none !important;
        transform: none;
    }

    .zs,
    .hero__grid {
        opacity: 1;
    }

    .rv,
    .rv-up,
    .rv-clip,
    .rw,
    .rw span.w > i {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }

    .marq {
        transform: none !important;
    }
}