/* Sai Fine Art — public site. Colours come from admin settings via the :root variables set in the layout. */
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2")}

:root{
  --bg:#0B0D0F;--bg-alt:#15181C;--text:#F5F3EF;--muted:#A8A8A8;--accent:#C6A477;
  --line:rgba(255,255,255,.14);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --site-width:1440px;--container:1360px;--gutter:clamp(20px,4.6vw,64px);
  --card-w:clamp(128px,13.2vw,196px);--card-h:calc(var(--card-w) * 1.46);--card-gap:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:color-mix(in srgb,var(--bg) 72%,#000);color:var(--text);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.005em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:#111;padding:10px 16px;font-weight:600}
.skip:focus{top:12px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.eyebrow{font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--text);opacity:.85}
.rule{display:block;width:26px;height:2px;background:var(--accent);margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:14px;padding:13px 24px;border:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,rgba(0,0,0,.35));color:var(--text);font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:background-color .25s,color .25s}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover{background:var(--accent);color:#14110c}
.btn:hover svg{transform:translateX(4px)}

/* Placeholder shown until a photograph is uploaded in the admin */
.ph{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 0%,rgba(198,164,119,.16),transparent 60%),
  linear-gradient(160deg,#232a33,#0d1014)}

/* Fixed-width site: everything sits in a centred box of --site-width, including full-bleed photographs */
.site-header,main,.site-footer{width:100%;max-width:var(--site-width);margin-inline:auto}
main,.site-footer{background:var(--bg)}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.is-home .site-header{position:absolute;inset:0 0 auto 0;background:linear-gradient(rgba(6,8,10,.62),transparent);border:0}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.brand__mark{color:var(--accent)}
.brand__mark svg{width:56px;height:36px}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font:500 27px/1 var(--serif);letter-spacing:.01em}
.brand__tag{margin-top:6px;font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--text);opacity:.8}
.brand__img{height:48px;width:auto}
.nav ul{display:flex;gap:clamp(18px,3vw,44px)}
.nav a{position:relative;display:block;padding:12px 0;font-size:14px;font-weight:500;opacity:.92}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.tools{display:flex;align-items:center;gap:6px;flex:none}
.tools a,.nav-toggle{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer}
.tools svg{width:24px;height:24px}
.tools a:hover{color:var(--accent)}
.nav-toggle{display:none}
.nav-toggle__close{display:none}

/* ---------- Hero carousel ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;contain:layout paint;min-height:clamp(600px,90vh,880px);background:var(--bg)}
.hero__cards{position:absolute;inset:0}
.hero-card{position:absolute;inset:0;overflow:hidden;opacity:0;background:#10141a}
.hero-card.is-active{opacity:1}
.hero-card picture,.hero-card img,.feature__bg picture,.feature__bg img,.newsletter__bg picture,.newsletter__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-card--contain.is-active img{object-fit:contain}
.hero-card:nth-child(5n+2) .ph{filter:hue-rotate(150deg)}
.hero-card:nth-child(5n+3) .ph{filter:hue-rotate(250deg)}
.hero-card:nth-child(5n+4) .ph{filter:hue-rotate(60deg)}
.hero-card:nth-child(5n+5) .ph{filter:hue-rotate(310deg)}
.hero-card__shade{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;background:
  linear-gradient(90deg,rgba(7,9,11,calc(var(--overlay,.55) * 1.3)) 0%,rgba(7,9,11,var(--overlay,.55)) 38%,rgba(7,9,11,calc(var(--overlay,.55) * .3)) 100%),
  linear-gradient(180deg,rgba(7,9,11,.5) 0%,transparent 24%,transparent 68%,var(--bg) 100%)}
.hero-card.is-active .hero-card__shade{opacity:1}
.hero-card__cap{position:absolute;inset:auto 0 0 0;display:none;flex-direction:column;gap:2px;padding:56px 16px 16px;
  background:linear-gradient(transparent,rgba(5,7,9,.82));transition:opacity .35s}
.hero-card__cap::before{content:"";width:16px;height:2px;background:var(--accent);margin-bottom:8px}
.hero-card__label{font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.hero-card__sub{font-size:12px;color:rgba(255,255,255,.82)}
.hero-card__btn{position:absolute;inset:0;display:none;padding:0;border:0;background:none;cursor:pointer}

/* Once the script has taken over, cards are placed by GSAP */
.hero.is-ready .hero-card{inset:auto;left:0;top:0;opacity:1;will-change:transform,width,height;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hero.is-ready .hero-card__cap{display:flex}
.hero.is-ready .hero-card__btn{display:block}
.hero.is-ready .hero-card.is-active{box-shadow:none}
.hero.is-ready .hero-card.is-active .hero-card__cap{opacity:0}
.hero.is-ready .hero-card.is-active .hero-card__btn{pointer-events:none}
.hero-card__btn:focus-visible{outline-offset:-4px}

.hero__ui{position:relative;z-index:40;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:end;
  min-height:inherit;padding-top:130px;padding-bottom:44px;pointer-events:none}
.hero--single .hero__ui{grid-template-columns:minmax(0,560px)}
.hero__panels{display:grid;pointer-events:auto;padding-bottom:26px}
.hero__panel{grid-area:1/1;align-self:end;visibility:hidden;opacity:0}
.hero__panel.is-active{visibility:visible;opacity:1}
.hero__panel .eyebrow{margin-bottom:18px}
.hero__title{font-size:clamp(2.5rem,4.5vw,4.1rem);text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero__text{margin-top:20px;max-width:30em;font-size:clamp(15px,1.15vw,17px);color:rgba(245,243,239,.9)}
.hero__panel .btn{margin-top:30px}
.hero__side{min-width:0}
.hero__rail{display:flex;gap:var(--card-gap);height:var(--card-h);visibility:hidden}
.hero__slot{flex:none;width:var(--card-w);height:100%}
.hero__controls{display:flex;align-items:center;gap:14px;margin-top:26px;pointer-events:auto}
.round{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,10,12,.28);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.round svg{width:20px;height:20px}
.round:hover{border-color:var(--accent);color:var(--accent)}
.round--plain{border-color:transparent;background:none;width:40px}
.round .i-play,.round[aria-pressed="true"] .i-pause{display:none}
.round[aria-pressed="true"] .i-play{display:block}
.hero__progress{position:relative;flex:1;height:2px;margin-inline:10px;background:rgba(255,255,255,.28)}
.hero__progress span{position:absolute;inset:-1px 0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.hero__count{flex:none;font-size:14px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.hero__count b{font-weight:500;color:var(--text)}

/* ---------- Category strip ---------- */
.strip{background:var(--bg-alt);border-block:1px solid var(--line)}
.strip__list{display:grid;grid-template-columns:repeat(4,1fr)}
.strip__list li{position:relative}
.strip__list li+li::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)}
.strip__list a{display:flex;align-items:center;justify-content:center;gap:18px;padding:30px 16px;transition:color .2s}
.strip__list a:hover .strip__title{color:var(--accent)}
.strip__icon{color:var(--accent);flex:none}
.strip__icon svg{width:44px;height:44px;stroke-width:1.1}
.strip__title{display:block;font:500 22px/1.1 var(--serif);transition:color .2s}
.strip__sub{display:block;margin-top:7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(48px,6vw,84px)}
.section-head{text-align:center;margin-bottom:clamp(26px,3vw,40px)}
.section-head .eyebrow{margin-bottom:12px}
.section-head__title{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,44px);font-size:clamp(2.1rem,3.6vw,3.2rem)}
.section-head__title::before,.section-head__title::after{content:"";flex:0 1 240px;height:1px;background:rgba(255,255,255,.3)}

.card a{display:block}
.card__img{position:relative;display:block;overflow:hidden;aspect-ratio:19/10;background:var(--bg-alt)}
.card__img picture,.card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.card a:hover img{transform:scale(1.045)}
.card__title{display:block;margin-top:16px;padding-inline:14px;font:500 22px/1.2 var(--serif)}
.card__sub,.card__more{display:flex;align-items:center;gap:10px;margin-top:6px;padding-inline:14px;font-size:13px;color:var(--muted)}
.card__sub svg,.card__more svg{width:16px;height:16px;color:var(--accent);transition:transform .25s}
.card a:hover .card__sub svg,.card a:hover .card__more svg{transform:translateX(4px)}
.card__desc{display:block;margin-top:6px;padding-inline:14px;font-size:13px;color:var(--muted)}
.card__more{margin-top:12px;color:var(--accent);font-weight:500}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 18px) / 4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail>li{scroll-snap-align:start}
.rail-progress{position:relative;height:1px;margin-top:30px;background:rgba(255,255,255,.22)}
.rail-progress span{position:absolute;left:0;top:-1px;height:3px;width:9%;background:var(--accent);transition:left .15s linear}

.stories__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card--story .card__img{aspect-ratio:3/1}

/* ---------- Full-width features (prints, about) ---------- */
.feature{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(320px,27vw,440px);background:var(--bg-alt)}
.feature--about{min-height:clamp(280px,21vw,360px)}
.feature__bg{position:absolute;inset:0;z-index:-1}
.feature__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(9,11,13,.72) 62%,rgba(9,11,13,.9) 100%)}
.feature__in{display:flex;justify-content:flex-end}
.feature__body{width:min(100%,400px);padding-block:44px}
.feature__body .eyebrow{margin-bottom:10px}
.feature__body h2{font-size:clamp(2.3rem,3.9vw,3.5rem)}
.feature__body p:not(.eyebrow){margin-top:14px;color:rgba(245,243,239,.88)}
.feature__body .btn{margin-top:24px}

/* ---------- Newsletter ---------- */
.newsletter{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-alt);border-top:1px solid var(--line)}
.newsletter__bg{position:absolute;inset:0;z-index:-1}
.newsletter__bg::after{content:"";position:absolute;inset:0;background:rgba(9,11,13,.62)}
.newsletter__in{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,3vw,48px);padding-block:clamp(40px,4.4vw,64px)}
.newsletter h2{font-size:clamp(2.2rem,3.6vw,3.3rem);white-space:nowrap}
.newsletter__text{padding-left:clamp(20px,3vw,48px);border-left:1px solid rgba(255,255,255,.35);font-size:14px;color:rgba(245,243,239,.9);max-width:34em}
.newsletter__form{display:grid;grid-template-columns:minmax(0,1fr) auto}
.newsletter__form input[type=email]{min-width:0;height:50px;padding:0 16px;border:1px solid rgba(255,255,255,.6);border-right:0;border-radius:0;background:rgba(8,10,12,.55);color:var(--text);font:inherit;font-size:14px}
.newsletter__form input::placeholder{color:rgba(245,243,239,.75)}
.newsletter__form button{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 22px;border:0;background:var(--accent);color:#14110c;font-weight:600;font-size:14px;cursor:pointer}
.newsletter__form button svg{width:18px;height:18px}
.newsletter__form button:hover{filter:brightness(1.08)}
.newsletter__status{grid-column:1/-1;min-height:1.5em;margin-top:8px;font-size:13px;color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);font-size:13px}
.site-footer__top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:26px}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.6vw,38px)}
.site-footer__nav a,.legal a{opacity:.9}
.site-footer a:hover{color:var(--accent);opacity:1}
.social{display:flex;gap:8px}
.social a{display:grid;place-items:center;width:44px;height:44px}
.social svg{width:22px;height:22px}
.site-footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px 26px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.legal{display:flex}
.legal li+li{margin-left:16px;padding-left:16px;border-left:1px solid var(--line)}

/* ---------- Simple message pages ---------- */
.message{padding-block:clamp(90px,14vw,180px);text-align:center}
.message .rule{margin-inline:auto}
.message h1{font-size:clamp(2.4rem,5vw,4rem)}
.message p{margin:18px auto 34px;max-width:36em;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .rail{grid-auto-columns:calc((100% - 18px) / 2.25)}
  .strip__list{grid-template-columns:repeat(2,1fr)}
  .strip__list li:nth-child(odd)::before{display:none}
  .strip__list li:nth-child(n+3){border-top:1px solid var(--line)}
  .strip__list a{justify-content:flex-start;padding-inline:8%}
  .newsletter__in{grid-template-columns:1fr;gap:18px}
  .newsletter__text{padding-left:0;border-left:0}
  .newsletter h2{white-space:normal}
}
@media (max-width:900px){
  .nav-toggle{display:grid}
  .nav{position:absolute;inset:100% 0 auto 0;display:none;background:var(--bg);border-block:1px solid var(--line);padding:8px var(--gutter) 18px}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a[aria-current]{color:var(--accent)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
  .nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}
  .site-header__in{min-height:72px}
  .brand__name{font-size:23px}
  .brand__mark svg{width:46px;height:30px}

  :root{--card-w:clamp(104px,27vw,150px);--card-gap:12px}
  .hero{min-height:clamp(660px,100svh,860px)}
  .hero__ui{grid-template-columns:minmax(0,1fr);gap:26px;align-content:end;padding-top:110px;padding-bottom:28px}
  .hero__panels{padding-bottom:0}
  .hero-card__shade{background:
    linear-gradient(180deg,rgba(7,9,11,.55) 0%,rgba(7,9,11,calc(var(--overlay,.55) * .7)) 30%,rgba(7,9,11,calc(var(--overlay,.55) * 1.35)) 62%,var(--bg) 100%)}
  .hero-card__cap{padding:36px 10px 10px}
  .hero-card__label{font-size:12px}
  .hero-card__sub{font-size:11px}
  .hero__controls{margin-top:18px;gap:10px}
  .round{width:44px;height:44px}

  .feature{display:block;min-height:0}
  .feature__bg{position:relative;z-index:0;aspect-ratio:16/9}
  .feature__bg::after{background:linear-gradient(180deg,transparent 55%,var(--bg-alt))}
  .feature__in{justify-content:flex-start}
  .feature__body{width:100%;padding-block:26px 44px}
  .stories__grid{grid-template-columns:1fr;gap:34px}
  .card--story .card__img{aspect-ratio:16/9}
}
@media (max-width:600px){
  .tools a:not([aria-label="Shopping cart"]){display:none}
  .rail{grid-auto-columns:82%}
  .strip__list a{gap:14px;padding:22px 4%}
  .strip__icon svg{width:34px;height:34px}
  .strip__title{font-size:19px}
  .strip__sub{font-size:9px;letter-spacing:.1em}
  .section-head__title::before,.section-head__title::after{flex-basis:40px}
  .newsletter__form{grid-template-columns:1fr}
  .newsletter__form input[type=email]{border-right:1px solid rgba(255,255,255,.6)}
  .newsletter__form button{justify-content:center;margin-top:10px}
  .site-footer__top{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}