/*
Theme Name: Sham Tlili — Living Forms
Theme URI: https://example.com/
Author: Custom theme for Sham Tlili
Description: An artistic, research-first WordPress theme with Research, Outreach, and Around Marseille sections.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sham-tlili
*/

:root{
  --st-bg:#f4f0e8;
  --st-paper:#fbfaf7;
  --st-ink:#171918;
  --st-muted:#636a66;
  --st-line:rgba(23,25,24,.15);
  --st-accent:#2b625a;
  --st-accent-2:#b56f48;
  --st-max:1180px;
  --st-radius:24px;
  --st-shadow:0 22px 60px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--st-bg);
  color:var(--st-ink);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto}
main{min-height:70vh}
::selection{background:rgba(43,98,90,.20)}

h1,h2,h3,h4{
  font-family:Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.02em;
  margin-top:0;
}
h1{font-size:clamp(3.2rem,8vw,7.4rem)}
h2{font-size:clamp(2.3rem,4.5vw,4.8rem)}
h3{font-size:clamp(1.55rem,2.5vw,2.4rem)}
p{margin:0 0 1.2rem}
small,.st-kicker{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:700}

.st-shell{width:min(calc(100% - 40px), var(--st-max));margin-inline:auto}
.st-narrow{width:min(calc(100% - 40px), 850px);margin-inline:auto}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  padding:18px 0;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  color:white;
}
body:not(.home) .site-header{background:rgba(20,22,21,.72);backdrop-filter:blur(14px)}
.site-header.scrolled{background:rgba(20,22,21,.88);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.08);padding:10px 0}
.st-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-branding a{text-decoration:none;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.menu-toggle{display:none;border:0;background:none;color:inherit;font-size:1.5rem;cursor:pointer}

.primary-nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.primary-nav li{position:relative}
.primary-nav a{text-decoration:none;font-size:.88rem;font-weight:650;letter-spacing:.04em}
.primary-nav .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:-18px;
  min-width:270px;
  padding:18px;
  margin-top:14px;
  background:rgba(23,25,24,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:var(--st-shadow);
  gap:0;
}
.primary-nav .sub-menu .sub-menu{left:100%;top:-18px;margin-left:8px;margin-top:0}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{display:block}
.primary-nav .sub-menu li{margin:0}
.primary-nav .sub-menu a{display:block;padding:8px 10px;white-space:nowrap;color:white}
.primary-nav .sub-menu a:hover{background:rgba(255,255,255,.07);border-radius:8px}

.wp-block-cover.st-hero{
  min-height:88vh;
  margin:0;
  padding:120px 24px 70px;
  overflow:hidden;
}
.wp-block-cover.st-hero .wp-block-cover__background{opacity:.46 !important}
.wp-block-cover.st-hero .wp-block-cover__inner-container{width:min(100%, var(--st-max));margin:auto}
.st-hero-copy{max-width:900px}
.st-hero-copy p{font-size:clamp(1.05rem,2vw,1.45rem);max-width:720px;color:rgba(255,255,255,.90)}
.st-hero .st-kicker{color:rgba(255,255,255,.74);margin-bottom:18px}

.st-section{padding:110px 0}
.st-section.st-tight{padding:70px 0}
.st-intro{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.45;max-width:900px;color:#303431}
.st-muted{color:var(--st-muted)}
.st-rule{border:0;border-top:1px solid var(--st-line);margin:55px 0}

.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.st-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.st-card{
  position:relative;
  min-height:380px;
  border-radius:var(--st-radius);
  overflow:hidden;
  box-shadow:var(--st-shadow);
  background:#222;
}
.st-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.76))}
.st-card-content{position:absolute;z-index:2;inset:auto 26px 24px 26px;color:#fff}
.st-card-content p{color:rgba(255,255,255,.82);font-size:.96rem}
.st-card a.st-card-link{position:absolute;inset:0;z-index:3;text-indent:-9999px}
.st-card:hover img{transform:scale(1.035)}
.st-card img{transition:transform .65s cubic-bezier(.2,.7,.2,1)}

.st-soft-card{
  background:var(--st-paper);
  border:1px solid var(--st-line);
  border-radius:20px;
  padding:32px;
}
.st-soft-card h3{margin-bottom:10px}

.st-quote{
  padding:55px 0;
  font-family:Iowan Old Style, Palatino, Georgia, serif;
  font-size:clamp(1.8rem,3.5vw,3.5rem);
  line-height:1.24;
  max-width:1000px;
}

.st-timeline{position:relative;margin-top:35px}
.st-timeline::before{content:"";position:absolute;left:17px;top:4px;bottom:4px;width:1px;background:var(--st-line)}
.st-time-item{position:relative;padding-left:62px;margin-bottom:42px}
.st-time-item::before{content:"";position:absolute;left:10px;top:.6em;width:15px;height:15px;border-radius:50%;background:var(--st-bg);border:2px solid var(--st-accent)}
.st-time-item .year{font-weight:750;font-size:.77rem;letter-spacing:.12em;color:var(--st-accent);text-transform:uppercase}

.st-button, .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px !important;
  padding:12px 20px !important;
  text-decoration:none;
  background:var(--st-ink) !important;
  color:white !important;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.04em;
}
.st-button.alt{background:transparent !important;color:var(--st-ink)!important;border:1px solid var(--st-line)}

.st-page-content > *:not(.alignfull):not(.alignwide):not(.wp-block-cover){
  width:min(calc(100% - 40px), var(--st-max));
  margin-left:auto;
  margin-right:auto;
}
.st-page-content > .wp-block-group.alignfull{padding-left:20px;padding-right:20px}
.alignwide{width:min(calc(100% - 40px), 1380px);margin-left:auto!important;margin-right:auto!important}
.alignfull{width:100%;margin-left:0!important;margin-right:0!important}

.st-post-list{display:grid;gap:20px;margin-top:45px}
.st-post{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:28px;
  padding:24px;
  border:1px solid var(--st-line);
  background:var(--st-paper);
  border-radius:20px;
}
.st-post-thumb{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#ddd}
.st-post-thumb img{width:100%;height:100%;object-fit:cover}
.st-post h2{font-size:2rem;margin-bottom:8px}
.st-meta{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--st-muted);margin-bottom:10px}
.st-empty{padding:35px;border:1px dashed var(--st-line);border-radius:18px;color:var(--st-muted);background:rgba(255,255,255,.35)}

.single-article{width:min(calc(100% - 40px), 900px);margin:0 auto;padding:150px 0 100px}
.single-article .entry-title{font-size:clamp(2.8rem,6vw,5.5rem)}
.single-article .entry-content img{border-radius:16px}

.site-footer{padding:60px 0 45px;border-top:1px solid var(--st-line);margin-top:80px}
.st-footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}
.site-footer p{margin:0;color:var(--st-muted);font-size:.9rem}
.site-footer a{text-decoration:none;border-bottom:1px solid var(--st-line)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 900px){
  body{font-size:17px}
  .menu-toggle{display:block}
  .primary-nav{
    display:none;
    position:absolute;
    top:64px;left:20px;right:20px;
    background:rgba(23,25,24,.97);
    padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.1)
  }
  .primary-nav.open{display:block}
  .primary-nav ul{display:block}
  .primary-nav li{margin:2px 0}
  .primary-nav a{display:block;padding:9px}
  .primary-nav .sub-menu,.primary-nav .sub-menu .sub-menu{
    display:block;position:static;background:transparent;border:0;box-shadow:none;
    padding:0 0 0 16px;margin:0;min-width:0;
  }
  .st-grid,.st-grid-2{grid-template-columns:1fr}
  .st-card{min-height:330px}
  .st-post{grid-template-columns:1fr}
  .st-post-thumb{max-width:340px}
  .st-footer-inner{display:block}
  .st-footer-inner > *+*{margin-top:24px}
}