/* NEXUS FAMILY FRAME V2 - EDITION ARABO-ANDALOUSE */
:root{
  --bg:#041227;--bg2:#081a34;--navy:#06162e;
  --panel:#0c203d;--panel2:#123151;
  --line:rgba(230,183,101,.2);
  --gold:#f0bc69;--gold2:#ffdc97;
  --cream:#fff5e8;--muted:#bdc9db;
  --turquoise:#4cbdb3;
}
body{
  background:
    radial-gradient(circle at 48% 3%,rgba(23,63,81,.36),transparent 39%),
    linear-gradient(160deg,#06172f,#031020 70%);
  color:var(--cream);
}
.sidebar{
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(160deg,#062446,#051428 65%,#061c39);
  border-right:1px solid #c79b5a85;
  box-shadow:3px 0 22px #0004;
}
.sidebar::before{
  content:"";position:absolute;inset:-40px -30px;z-index:-1;
  background:url('/images/zellige.svg') repeat;
  background-size:94px 94px;opacity:.17;pointer-events:none;
}
.sidebar::after{
  content:"";position:absolute;inset:45% 6px 2%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at bottom,#12626939,transparent 65%);
}
.sidebar-brand{padding-bottom:24px}
.brand-mark{
  height:93px;width:105px;border:0;border-radius:0;transform:none;
  position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;
  background:#09274b;
  clip-path:polygon(0 100%,0 42%,8% 30%,20% 25%,26% 12%,40% 12%,50% 0,60% 12%,74% 12%,80% 25%,92% 30%,100% 42%,100% 100%);
  box-shadow:none;
}
.brand-mark::before{content:"";position:absolute;inset:5px;background:#e1b26d;
  clip-path:polygon(0 100%,0 42%,8% 30%,20% 25%,26% 12%,40% 12%,50% 0,60% 12%,74% 12%,80% 25%,92% 30%,100% 42%,100% 100%);
}
.brand-mark::after{
  content:"";position:absolute;inset:8px;background:#08254a;
  clip-path:polygon(0 100%,0 42%,8% 30%,20% 25%,26% 12%,40% 12%,50% 0,60% 12%,74% 12%,80% 25%,92% 30%,100% 42%,100% 100%);
}
.brand-mark>span{position:relative;z-index:1;transform:none;font-size:53px;margin-top:6px}
.brand-mark small{z-index:2;bottom:13px;left:46px;transform:none;color:#ffe3af}
.brand-name b{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:38px;letter-spacing:2px;text-shadow:0 1px 12px #d69e434d}
.brand-name span{font-family:Georgia,serif;color:#f0cc8b;font-size:19px}
.sidebar-brand p{color:#e0d3bd}
.sidebar nav{gap:6px}
.nav-item{font-family:Georgia,serif;font-size:15px;letter-spacing:.05px;border-radius:11px;min-height:46px;color:#e5edf6}
.nav-item.active{background:linear-gradient(115deg,#f8d895,#d9a34f);border-color:#f8dfa8;box-shadow:0 0 20px #b9834433;color:#061b34}
.nav-item.active .nav-icon{color:#062745}
.nav-item:not(.active):hover{background:#193953aa;border-color:#ae8a59}
.nav-icon{color:#f9d596;font-family:system-ui}
.sidebar-lower::before{content:"";display:block;height:42px;margin:0 10px 5px;background:url('/images/ornate.svg') center/contain no-repeat;opacity:.85}
.sidebar-lower{border-top:1px solid #b9874866}
.side-bottom{color:#ebdec7}
.header{background:linear-gradient(100deg,#061b35ee,#06223bce);border-bottom:1px solid #aa824b60}
.search-wrap{background:#0b294a9e;border-color:#53718a}
.search-wrap:focus-within{border-color:#e4bb78}
.icon-btn{background:#102746;border-color:#96774c}
.profile .avatar{background:linear-gradient(140deg,#f3d08e,#b17c35);border-color:#f8db9d}
.primary{background:linear-gradient(100deg,#ffe3ac,#dca14b);color:#09203b;box-shadow:0 7px 23px #bd823333}
.primary:hover{background:linear-gradient(100deg,#ffebc6,#f0b85e)}
.content{position:relative}
.content::before{content:"";position:absolute;z-index:-1;inset:0;
  background:url('/images/zellige.svg') top center/132px repeat;opacity:.026;pointer-events:none}
.welcome-line small,.section-heading small,.page-title small{color:#e8b976}
.welcome-line h1,.section-heading h2,.page-title h1{
  font-family:Georgia,"Times New Roman",serif;font-weight:500
}
.welcome-line h1{font-size:clamp(27px,2.6vw,36px)}
.welcome-line p{color:#e3d9ca}
.today{border:1px solid #c29550;background:#071e3b;color:#f4cf8d;font-family:Georgia,serif;font-size:14px}
.hero-layout{grid-template-columns:minmax(0,3.5fr) minmax(228px,.94fr);gap:12px}
.hero,.day-card{
  border:1px solid #dab273;
  box-shadow:inset 0 0 0 3px #0c274699,0 6px 22px #020a1c55;
  border-radius:15px
}
.hero{min-height:405px}
.hero::before{
  content:"";position:absolute;z-index:1;pointer-events:none;inset:0;
  background:url('/images/arch.svg') left center/auto 100% no-repeat;
  opacity:.94;
}
.hero::after{
  content:"";position:absolute;pointer-events:none;z-index:2;
  top:0;left:0;bottom:0;width:38%;
  background:url('/images/zellige.svg') repeat;
  background-size:80px 80px;opacity:.13;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
}
.hero .hero-overlay{
  background:linear-gradient(90deg,#031327e8 1%,#06182ab8 25%,transparent 65%),linear-gradient(0deg,#07162d8c,transparent 54%)
}
.hero-content{left:24px;bottom:25px;z-index:3;max-width:73%}
.hero-pill{border:0;border-bottom:1px solid #d8a65990;background:transparent;border-radius:0;padding:5px 0;color:#f9d495;font-family:Georgia,serif}
.hero h2{font-family:Georgia,serif;font-weight:500;font-size:clamp(32px,3.15vw,46px);line-height:1.07;letter-spacing:-1px;max-width:540px}
.hero h2 span{color:#f8cf86}
.hero p{font-family:Georgia,serif;font-size:16px;color:#faebd9}
.hero-play{border:1px solid #f7c981;color:#ffdfa6;background:#10294cbd}
.hero-arrows{z-index:4}
.hero-arrows button,.viewer-arrow{border:1px solid #f3c67b;background:#06172dc9}
.day-card{min-height:405px;background:#061a35}
.day-card::before{
  position:absolute;z-index:2;pointer-events:none;content:"";inset:0;
  border:7px solid transparent;border-image:linear-gradient(125deg,#b6863b99,#ffe3ad20) 1;
  opacity:.7
}
.day-card::after{
  position:absolute;z-index:1;pointer-events:none;content:"";top:0;left:0;right:0;height:100px;
  background:url('/images/zellige.svg') repeat;opacity:.16
}
.day-card .day-shade{background:linear-gradient(0deg,#041329fa 1%,#07142e4e 75%)}
.day-text{z-index:3}
.day-text h3{font-family:Georgia,serif;font-weight:500}
.day-text span{color:#f0bf73}
.day-text p{color:#e9c999}
.section-heading{position:relative}
.section-heading h2{font-size:27px;display:flex;align-items:center;gap:10px}
.section-heading h2::before{content:"❖";font-family:serif;font-size:23px;color:var(--gold)}
.section-heading::after{
  content:"";position:absolute;bottom:-9px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,#c99652aa,transparent)
}
.text-button{color:#f2c781}
.albums-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.album-card{
  height:224px;border:1.5px solid #cca05f;border-radius:12px;
  box-shadow:inset 0 0 0 2px #1534545e,0 5px 19px #0003
}
.album-card::before{content:"";position:absolute;z-index:2;inset:5px;pointer-events:none;
  border:1px solid #f3c98255;border-radius:8px}
.album-gradient{background:linear-gradient(0deg,#051932f7,#07172a08 88%)}
.album-info{z-index:3}
.album-icon{color:#ffd28a}
.album-info b{font-family:Georgia,serif;font-size:17px}
.album-info small{color:#d9deec}
.photo-tile{border-color:#98794e;border-radius:10px}
.photo-tile:hover{border-color:#ffe3a4}
.feature-grid button{border-color:#94713f;background:linear-gradient(120deg,#0b2444,#07182f);border-radius:10px;position:relative;overflow:hidden}
.feature-grid button::before{content:"";background:url('/images/zellige.svg') repeat;background-size:70px;position:absolute;inset:0;opacity:.08;pointer-events:none}
.feature-grid button>*{position:relative}
.feature-grid .feature-emoji{color:#f6bd6d}
.feature-grid b{font-family:Georgia,serif;font-size:16px;font-weight:500}
.page-title h1{color:#ffedce}
.large-albums{grid-template-columns:repeat(3,minmax(0,1fr))}
.modal{border:1px solid #d4a55e;background:linear-gradient(155deg,#102b4c,#05172d)}
.login{
  background:radial-gradient(circle at 20% 40%,#123857,transparent 70%),#06162d
}
.login-shade{background:linear-gradient(90deg,#07172f 2%,#07213bf2 41%,#07152756 100%)}
.login-card{
  border:1px solid #d4aa67;border-radius:10px;
  background:
    linear-gradient(#081f39de,#07162cef),
    url('/images/zellige.svg') repeat;
  box-shadow:0 25px 90px #0008,0 0 0 7px #ddaa5640
}
.login-card::before{
  content:"";position:absolute;pointer-events:none;inset:8px;
  border:1px solid #dfb87566;border-radius:4px
}
.login-kicker{font-family:Georgia,serif;font-size:14px;letter-spacing:2px}
.login-card h1{font-family:Georgia,serif;font-weight:500;font-size:38px}
.login-logo{font-family:Georgia,serif}
.login-card label{color:#f7dfb5}
.login-card p{color:#e1d4c3}
.viewer{background:#031021f7}
.viewer-top b{font-family:Georgia,serif;color:#f4c780}
.mobile-tabs{background:linear-gradient(90deg,#05172e,#082848)}
.mobile-tabs button.active{color:#ffdc94}
@media (max-width:1230px){
 .hero{min-height:347px}.day-card{min-height:347px}
 .album-card{height:188px}
}
@media (max-width:850px){
 .brand-mark{width:54px;height:54px;overflow:hidden}
 .brand-mark>span{font-size:30px}
 .brand-mark small{display:none}
 .hero-layout{grid-template-columns:1fr}
 .day-card{display:none}
 .albums-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .large-albums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
 .welcome-line h1{font-size:29px}
 .hero{min-height:351px}
 .hero::before{background-size:auto 85%;background-position:-80px center}
 .hero::after{width:63%}
 .hero .hero-overlay{background:linear-gradient(90deg,#051428d4,#07132720 95%),linear-gradient(0deg,#07162dc9,transparent 64%)}
 .hero h2{font-size:30px}
 .hero p{font-size:13px}
 .hero-content{max-width:83%;left:20px}
 .hero-pill{font-size:9px}
 .album-card{height:185px}
 .album-info b{font-size:15px}
 .section-heading h2{font-size:23px}
 .login-card h1{font-size:32px}
}
/* Arabesque finishing touches */
@media(min-width:1240px){
  .albums-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
  .album-card{height:205px}
  .large-albums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .large-albums .album-card{height:285px}
}
@media(min-width:850px) and (max-width:1239px){
  .albums-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .large-albums{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.day-date{
  position:absolute;z-index:4;top:0;left:13%;right:13%;
  color:#f4c67c;background:#07172fe6;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 13px 12px;border:1px solid #ca9d58;
  border-top:0;border-radius:0 0 42% 42%;
  box-shadow:0 4px 20px #0007
}
.day-date b{font-family:Georgia,serif;font-weight:400;font-size:13px;white-space:nowrap}
.day-date span{font-size:22px}
@media(max-width:600px){
 .albums-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .large-albums{grid-template-columns:repeat(2,minmax(0,1fr))}
}