:root{--lc:#7D7062}
.h2 em{color:var(--taupe)}
.sec{padding:110px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:30px;border:1px solid var(--stone);font-size:13.5px;transition:.2s;background:var(--white);white-space:nowrap}
.chips button i{width:8px;height:8px;border-radius:50%;background:var(--k)}
.chips button.on{background:var(--k,var(--ink));border-color:var(--k,var(--ink));color:#fff}
.chips button.on i{background:#fff}
.chips button.y.on{color:var(--ink)}.chips button.y.on i{background:var(--ink)}
.seg{display:inline-flex;padding:4px;border-radius:40px;background:var(--white);border:1px solid var(--stone)}
.seg button{height:34px;padding:0 16px;border-radius:30px;font-size:13px;color:var(--taupe-d)}
.seg button.on{background:var(--ink);color:#fff}
/* tones (photo placeholders) */
.g1{background:radial-gradient(60% 60% at 70% 30%,rgba(255,255,255,.35),transparent 60%),linear-gradient(150deg,#BFE3F4,#53B8EA 55%,#2F6F95)}
.g2{background:radial-gradient(55% 55% at 30% 30%,rgba(255,240,215,.5),transparent 60%),linear-gradient(160deg,#D7C9B6,#A99D90 50%,#5E5348)}
.g3{background:radial-gradient(50% 50% at 40% 35%,rgba(255,236,190,.55),transparent 60%),linear-gradient(150deg,#E9DFC9,#C2B49E 50%,#6E8F6A)}
.g4{background:radial-gradient(60% 60% at 30% 30%,rgba(255,250,230,.5),transparent 60%),linear-gradient(150deg,#F6E3A5,#E9B312 55%,#8F6C0A)}
.g5{background:radial-gradient(60% 60% at 70% 30%,rgba(255,220,225,.35),transparent 60%),linear-gradient(150deg,#D58C9C,#8A1531 55%,#4A0A1A)}
.g6{background:radial-gradient(60% 60% at 30% 30%,rgba(235,255,230,.4),transparent 60%),linear-gradient(150deg,#A8D9A3,#40A54A 55%,#1F5A25)}
.tile{position:relative;overflow:hidden;border-radius:16px;cursor:zoom-in;display:block}
.tile::after{content:"";position:absolute;inset:0;opacity:.2;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tile .bg{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover .bg{transform:scale(1.06)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff;font-size:13px;opacity:0;transform:translateY(8px);transition:.35s;z-index:2}
.tile:hover .cap{opacity:1;transform:none}
.tile .cap b{display:block;font-family:var(--serif);font-weight:400;font-size:18px}
.tile .vid{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;gap:6px;align-items:center;font-size:11px;padding:5px 10px;border-radius:20px;background:rgba(0,0,0,.4);color:#fff}
.tile .lv{position:absolute;right:12px;top:12px;z-index:2;width:10px;height:10px;border-radius:50%;background:var(--k);box-shadow:0 0 0 3px rgba(255,255,255,.7)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:95;background:rgba(20,16,13,.98);display:none;flex-direction:column}
.lb.open{display:flex}
.lb .tp{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;color:#fff;font-size:13px}
.lb .tp b{font-family:var(--serif);font-weight:400;font-size:20px;display:block}
.lb .tp span{opacity:.6}
.lb .tp .x{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:16px}
.lb .st{flex:1;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:10px;padding:0 20px;min-height:0}
.lb .st button{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;justify-self:center}
.lb .st button:hover{background:#fff;color:var(--ink)}
.lb .im{position:relative;height:100%;max-height:calc(100vh - 210px);border-radius:14px;overflow:hidden;animation:lz .35s ease}
@keyframes lz{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.lb .im .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink)}
.lb .im .ph-note{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.lb .th{display:flex;gap:8px;justify-content:center;padding:16px 20px 22px;overflow-x:auto}
.lb .th button{flex:0 0 64px;height:46px;border-radius:8px;opacity:.45;transition:.2s;border:2px solid transparent}
.lb .th button.on{opacity:1;border-color:#fff}
/* ===== DEMO 1 — Masonry ===== */
.m1h{background:var(--white);padding:46px 0 40px;border-bottom:1px solid var(--stone)}
.m1h .g{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:30px}
.m1h h1{font-family:var(--serif);font-weight:300;font-size:clamp(54px,7vw,110px);line-height:.92}
.m1h h1 em{font-style:italic;color:var(--taupe)}
.m1-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:30px 0}
.m1-grid{columns:4;column-gap:14px;padding-bottom:40px}
.m1-grid .tile{break-inside:avoid;margin-bottom:14px}
.more{display:flex;justify-content:center;padding-bottom:110px}
.more button{height:52px;padding:0 30px;border-radius:40px;border:1px solid var(--stone);background:var(--white);font-size:14px}
.more button:hover{background:var(--ink);color:#fff}
/* ===== DEMO 2 — Albums ===== */
.a2h{background:var(--esp);color:var(--cream)}
.a2h .wrap{padding-top:40px;padding-bottom:60px}
.a2h .bc{color:rgba(247,243,238,.6)}
.a2h .g{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:34px}
.a2h h1{font-family:var(--serif);font-weight:300;font-size:clamp(54px,7vw,110px);line-height:.92}
.a2h h1 em{font-style:italic;color:var(--taupe-l)}
.a2h .seg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.a2h .seg button{color:rgba(247,243,238,.7)}
.a2h .seg button.on{background:var(--cream);color:var(--ink)}
.a2-albums{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:50px;padding-bottom:110px}
.alb{cursor:pointer}
.alb .stack{position:relative;aspect-ratio:4/3;margin-bottom:18px}
.alb .stack>span{position:absolute;inset:0;border-radius:18px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.alb .stack>span:nth-child(1){transform:rotate(-4deg) translate(-6px,4px);opacity:.55}
.alb .stack>span:nth-child(2){transform:rotate(3deg) translate(6px,2px);opacity:.75}
.alb .stack>span:nth-child(3){overflow:hidden}
.alb:hover .stack>span:nth-child(1){transform:rotate(-8deg) translate(-18px,6px)}
.alb:hover .stack>span:nth-child(2){transform:rotate(6deg) translate(18px,4px)}
.alb .stack>span.n{position:absolute;inset:auto;right:14px;bottom:14px;height:auto;z-index:3;font-size:12px;padding:5px 11px;border-radius:20px;background:rgba(0,0,0,.45);color:#fff}
.alb small{font-size:12px;color:var(--taupe);display:flex;gap:10px;align-items:center}
.alb small i{width:8px;height:8px;border-radius:50%;background:var(--k)}
.alb h4{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin-top:6px}
.a2-view{padding-top:40px;padding-bottom:110px}
.a2-view .vh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.a2-view h2{font-family:var(--serif);font-weight:300;font-size:52px;line-height:1}
.a2-view .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
.a2-view .grid .tile:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
.back{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--taupe-d);margin-bottom:20px}
.back:hover{color:var(--ink)}
/* ===== DEMO 3 — Campus life ===== */
.c3h{position:relative;height:640px;color:#fff;overflow:hidden}
.c3h .bg{position:absolute;inset:0}
.c3h .bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,16,13,.35),transparent 40%,rgba(20,16,13,.65))}
.c3h .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:60px}
.c3h .bc{position:absolute;top:40px;color:rgba(255,255,255,.8)}
.c3h h1{font-family:var(--serif);font-weight:300;font-size:clamp(60px,9vw,150px);line-height:.88;letter-spacing:-.02em}
.c3h h1 em{font-style:italic}
.c3h .row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:24px}
.c3h .row p{max-width:460px;opacity:.9;line-height:1.6}
.c3h .play{width:74px;height:74px}
.c3-ch{padding:110px 0 30px}
.c3-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(32px,calc((100vw - 1240px)/2 + 32px)) 30px;scroll-padding-inline:max(32px,calc((100vw - 1240px)/2 + 32px));scroll-behavior:smooth}
.c3-strip::-webkit-scrollbar{display:none}
.c3-card{flex:0 0 520px;scroll-snap-align:start;border-radius:26px;overflow:hidden;background:var(--white);display:grid;grid-template-rows:340px auto}
.c3-card .tile{border-radius:0}
.c3-card .tx{padding:26px 28px 30px;border-top:5px solid var(--k)}
.c3-card small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--k2)}
.c3-card h4{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.05;margin:10px 0 10px}
.c3-card p{font-size:14.5px;color:var(--taupe-d);line-height:1.6}
.c3-card .mini{display:flex;gap:6px;margin-top:16px}
.c3-card .mini .tile{flex:1;height:64px;border-radius:10px}
.c3-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.c3-nav .ar{display:flex;gap:8px}
.c3-nav .ar button{width:52px;height:52px;border-radius:50%;border:1px solid var(--stone);background:var(--white)}
.c3-nav .ar button:hover{background:var(--ink);color:#fff}
.c3-tour{background:var(--esp);color:var(--cream)}
.c3-tour .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;padding-top:100px;padding-bottom:100px}
.c3-tour .eyebrow{color:var(--taupe-l)}
.c3-tour .h2 em{color:var(--taupe-l)}
.c3-tour p{color:rgba(247,243,238,.75);line-height:1.7;margin-top:18px}
.c3-map{position:relative;aspect-ratio:16/11;border-radius:24px;overflow:hidden;background:#3A322C}
.c3-map svg{position:absolute;inset:0;width:100%;height:100%}
.c3-map button.hs{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--k);color:#fff;font-size:13px;font-weight:600;box-shadow:0 0 0 6px color-mix(in srgb,var(--k) 30%,transparent);transition:transform .2s}
.c3-map button.hs:hover,.c3-map button.hs.on{transform:translate(-50%,-50%) scale(1.15)}
.c3-map .pop{position:absolute;left:20px;bottom:20px;right:20px;background:var(--white);color:var(--ink);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center}
.c3-map .pop .tile{flex:0 0 90px;height:64px;border-radius:10px}
.c3-map .pop b{font-family:var(--serif);font-weight:400;font-size:20px;display:block}
.c3-map .pop small{font-size:13px;color:var(--taupe)}
.c3-feed{padding:110px 0}
.c3-feed .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:30px}
.c3-feed .grid .tile{aspect-ratio:1;border-radius:10px}
.c3-feed .hd2{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
@media (max-width:1100px){.m1-grid{columns:3}.a2-albums{grid-template-columns:1fr 1fr}.a2-view .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){
  .hd-menu,.hd>.wrap>.hd-cta{display:none}.hd-bgr{display:flex}.hd>.wrap{height:70px}.hd-logo img{height:36px}.ftx-mid .wrap{grid-template-columns:1fr;gap:40px}
  .c3-tour .wrap{grid-template-columns:1fr;gap:40px}
  .c3-feed .grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .wrap{padding:0 20px}html{scroll-padding-top:120px}.sw span,.sw em{display:none}.sw button{padding:0 12px;font-size:12px}.ftx-nav{grid-template-columns:1fr 1fr}.ftx-bot .wrap{flex-direction:column}
  .sec{padding:80px 0}
  .m1-grid{columns:2;column-gap:8px}
  .m1-grid .tile{margin-bottom:8px;border-radius:12px}
  .tile .cap{opacity:1;transform:none;padding:30px 10px 8px;font-size:11px}
  .tile .cap b{font-size:14px}
  .a2-albums{grid-template-columns:1fr}
  .a2-view .grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}
  .a2-view h2{font-size:38px}
  .c3h{height:560px}
  .c3-card{flex-basis:84vw;grid-template-rows:240px auto}
  .c3-card h4{font-size:28px}
  .c3-strip{padding:0 20px 24px;scroll-padding-inline:20px}
  .c3-feed .grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .c3-map .pop .tile{display:none}
  .lb .st{grid-template-columns:44px 1fr 44px;padding:0 6px}
  .lb .st button{width:40px;height:40px;font-size:16px}
  .lb .im{max-height:60vh;height:60vh}
}