/* ===========================  THEME + BASE  =========================== */
.tg-guides{
  --cream:#FBEDE1;
  --card:#FFFFFF;
  --espresso:#37210F;
  --brown:#5A4332;
  --muted:#A18A77;
  --terra:#C2611C;
  --terra-d:#9C4C12;
  --terra-soft:#F3DFCB;
  --gold:#F2A93B;
  --gold-dim:#E6D2BC;
  --line:#EEDFCE;

  position:relative;
  isolation:isolate;
  font-family:'Outfit', system-ui, sans-serif;
  color:var(--brown);
  -webkit-font-smoothing:antialiased;
  background:
     radial-gradient(1200px 520px at 12% -8%, #FCEFE3 0%, rgba(252,239,227,0) 60%),
     radial-gradient(900px 520px at 102% 112%, #F6E0CC 0%, rgba(246,224,204,0) 55%),
     var(--cream);
  padding:clamp(48px,7vw,108px) clamp(16px,5vw,64px);
  overflow:hidden;
}
.tg-guides *{ box-sizing:border-box; }
.tg-inner{ max-width:1180px; margin:0 auto; }

/* ===========================  HEADER  =========================== */
.tg-head{ text-align:center; margin-bottom:clamp(34px,4.5vw,58px); }
.tg-eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--terra);
}
.tg-eyebrow::before, .tg-eyebrow::after{
  content:""; display:inline-block; width:26px; height:2px; vertical-align:middle;
  background:var(--terra); opacity:.5; margin:0 12px;
}
.tg-title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600; color:var(--espresso);
  font-size:clamp(30px,5vw,52px); line-height:1.05; letter-spacing:-.015em;
  margin:.34em 0 .1em;
}
.tg-title em{ font-style:italic; color:var(--terra); }
.tg-sub{ font-size:clamp(14px,1.6vw,17px); color:var(--muted); max-width:560px; margin:0 auto; }

/* ===========================  STAGE + ARROWS  =========================== */
.tg-stage{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.6vw,22px); }
.tg-nav{
  width:54px; height:54px; flex:none; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--espresso);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:0 12px 26px -14px rgba(80,45,20,.45);
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tg-nav svg{ width:22px; height:22px; }
.tg-nav:hover{
  background:var(--terra); color:#fff; border-color:var(--terra);
  transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(194,97,28,.6);
}
.tg-nav:active{ transform:translateY(0) scale(.96); }
.tg-nav-sm{ display:none; }

/* ===========================  CARD  =========================== */
.tg-card{
  flex:1; max-width:1040px; background:var(--card);
  border:1px solid #fff; border-radius:30px; overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 34px 64px -30px rgba(80,45,20,.4),
    0 10px 24px -14px rgba(80,45,20,.14);
  animation:tgCardIn .9s cubic-bezier(.16,.84,.24,1) both;
}
.tg-card::before{                                  /* premium accent ribbon */
  content:""; display:block; height:5px;
  background:linear-gradient(90deg, var(--gold), var(--terra) 45%, var(--terra-d));
}
@keyframes tgCardIn{ from{opacity:0; transform:translateY(28px) scale(.985);} to{opacity:1; transform:none;} }

.tg-card-body{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(22px,3vw,52px); padding:clamp(18px,2.4vw,40px);
  transition:opacity .42s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.16,.84,.24,1);
}
.tg-card-body.tg-fade{ opacity:0; transform:translateY(14px) scale(.995); }

/* ===========================  GALLERY  =========================== */
.tg-gallery{ position:relative; align-self:start; width:100%; }
.tg-gallery::before{
  content:""; position:absolute; inset:auto -14px -18px 26%;
  height:55%; border-radius:30px; background:var(--terra);
  filter:blur(48px); opacity:.16; z-index:0;
}
.tg-photo-main{
  position:relative; z-index:1; border-radius:22px; overflow:hidden;
  aspect-ratio:4/5; background:var(--terra-soft); cursor:zoom-in;
  box-shadow:0 22px 46px -22px rgba(80,45,20,.55);
}
.tg-photo-main img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.16,.84,.24,1), opacity .35s ease;
}
.tg-photo-main:hover img{ transform:scale(1.05); }
.tg-photo-main .scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,11,4,.22) 0%, rgba(20,11,4,0) 26%, rgba(20,11,4,0) 56%, rgba(20,11,4,.5) 100%);
}
.tg-exp-badge{
  position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:7px;
  background:rgba(45,26,12,.74); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:8px 13px; border-radius:999px;
}
.tg-exp-badge svg{ width:14px; height:14px; }
.tg-photo-count{
  position:absolute; bottom:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:rgba(45,26,12,.58); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px;
}
.tg-photo-count svg{ width:14px; height:14px; }
.tg-view-pill{
  position:absolute; bottom:14px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  background:rgba(255,255,255,.94); color:var(--espresso); border:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:999px;
  white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.45);
  transition:background .2s ease, box-shadow .2s ease;
}
.tg-view-pill svg{ width:16px; height:16px; }
.tg-view-pill:hover{ transform:translateY(-2px); background:#fff; }

/* --- gallery caption row --- */
.tg-gallery-head{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  margin:18px 2px 12px !important;
  width:100% !important;
}
.tg-gallery-head .lbl{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--espresso);
  justify-self:start;
}
.tg-gallery-head .lbl svg{ width:15px; height:15px; color:var(--terra); }
.tg-viewall{
  background:none; border:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  color:var(--terra-d); display:inline-flex; align-items:center; gap:5px; padding:0;
  justify-self:end; white-space:nowrap;
}
.tg-viewall svg{ width:14px; height:14px; transition:transform .2s ease; }
.tg-viewall:hover svg{ transform:translateX(3px); }

/* --- BIGGER thumbnails --- */
.tg-thumbs{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fill, minmax(94px,1fr)); gap:12px; }
.tg-thumb{
  position:relative; aspect-ratio:4/3; border-radius:15px; overflow:hidden; cursor:pointer;
  padding:0; border:2px solid #fff; background:var(--terra-soft);
  box-shadow:0 12px 24px -16px rgba(80,45,20,.55);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tg-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.16,.84,.24,1); }
.tg-thumb:hover{ transform:translateY(-3px); box-shadow:0 18px 30px -16px rgba(80,45,20,.55); border-color:var(--terra-soft); }
.tg-thumb:hover img{ transform:scale(1.13); }
.tg-thumb:focus-visible{ outline:3px solid var(--terra); outline-offset:2px; }
/* always-visible little magnifier so it reads as tappable (esp. on touch) */
.tg-thumb .corner{
  position:absolute; bottom:7px; right:7px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.85); color:var(--espresso); display:grid; place-items:center;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.4); transition:opacity .2s ease;
}
.tg-thumb .corner svg{ width:14px; height:14px; }
/* hover veil on desktop */
.tg-thumb .veil{
  position:absolute; inset:0; opacity:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(45,26,12,0) 35%, rgba(45,26,12,.55));
  transition:opacity .25s ease;
}
.tg-thumb .veil .mg{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--espresso);
  display:grid; place-items:center; transform:scale(.78); transition:transform .25s ease;
}
.tg-thumb .veil .mg svg{ width:20px; height:20px; }
.tg-thumb:hover .veil{ opacity:1; }
.tg-thumb:hover .veil .mg{ transform:scale(1); }
.tg-thumb:hover .corner{ opacity:0; }
/* “+N more” tile */
.tg-thumb .more{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:rgba(35,20,9,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  font-family:'Fraunces',serif; font-size:22px; font-weight:600;
}

/* ===========================  INFO COLUMN  =========================== */
.tg-info{ min-width:0; }
.tg-info > *{ animation:tgRise .7s ease both; }
.tg-info > *:nth-child(1){ animation-delay:.10s; }
.tg-info > *:nth-child(2){ animation-delay:.16s; }
.tg-info > *:nth-child(3){ animation-delay:.22s; }
.tg-info > *:nth-child(4){ animation-delay:.28s; }
.tg-info > *:nth-child(5){ animation-delay:.34s; }
.tg-info > *:nth-child(6){ animation-delay:.40s; }
.tg-info > *:nth-child(7){ animation-delay:.46s; }
@keyframes tgRise{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

.tg-index{ display:block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); }
.tg-index strong{ color:var(--espresso); }
.tg-name{
  font-family:'Fraunces', Georgia, serif; font-weight:600;
  font-size:clamp(30px,4.2vw,46px); line-height:1.02; letter-spacing:-.015em;
  color:var(--espresso); margin:.22em 0 .1em;
}
.tg-role{ font-size:clamp(14px,1.5vw,16.5px); font-weight:500; color:var(--brown); }

.tg-rate{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.tg-stars{ font-size:18px; letter-spacing:2px; line-height:1; }
.tg-badge{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--terra-d); background:var(--terra-soft); padding:6px 13px; border-radius:999px; }

.tg-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.tg-stat{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,#fff,#FCF4EC);
  border:1px solid var(--line); border-radius:16px; padding:13px 15px;
}
.tg-stat .ic{ width:38px; height:38px; flex:none; border-radius:11px; background:var(--terra-soft); color:var(--terra-d); display:grid; place-items:center; }
.tg-stat .ic svg{ width:20px; height:20px; }
.tg-stat .k{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.tg-stat .v{ display:block; font-size:15px; font-weight:600; color:var(--espresso); margin-top:2px; }

.tg-block{ margin-top:24px; }
.tg-h{ display:flex; align-items:center; gap:12px; margin:0 0 13px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tg-h::after{ content:""; flex:1; height:1px; background:var(--line); }

.tg-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.tg-chip{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:9px 14px; font-size:14px; font-weight:500; color:var(--brown);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.tg-chip svg{ width:17px; height:17px; color:var(--terra); }
.tg-chip:hover{ border-color:var(--terra); background:var(--terra-soft); transform:translateY(-1px); }

.tg-about{ font-size:15px; line-height:1.72; color:var(--brown); margin:0; }

.tg-exlist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 24px; }
.tg-exlist li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--brown); }
.tg-exlist .ck{ width:20px; height:20px; flex:none; margin-top:1px; border-radius:6px; background:var(--terra-soft); color:var(--terra-d); display:grid; place-items:center; }
.tg-exlist .ck svg{ width:13px; height:13px; }

/* ===========================  CONTROLS / DOTS  =========================== */
.tg-controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:clamp(26px,3vw,38px); }
.tg-dots{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:340px; }
.tg-dot{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:#E3CDB8; cursor:pointer; transition:width .3s ease, background .3s ease, border-radius .3s ease; }
.tg-dot.is-active{ width:28px; border-radius:6px; background:var(--terra); }

/* ===========================  VIEWER (LIGHTBOX)  =========================== */
.tg-lightbox{
  position:fixed; inset:0; z-index:9999; display:none; flex-direction:column;
  background:rgba(26,15,6,.93); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.tg-lightbox.is-open{ display:flex; animation:tgFadeIn .25s ease; }
@keyframes tgFadeIn{ from{opacity:0;} to{opacity:1;} }

.tg-lb-top{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; color:#fff;
}
.tg-lb-name{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; letter-spacing:.01em; }
.tg-lb-count{ font-size:13px; font-weight:600; color:rgba(255,255,255,.72); letter-spacing:.04em; }
.tg-lb-close{
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; transition:background .2s ease, transform .2s ease;
}
.tg-lb-close:hover{ background:rgba(255,255,255,.28); transform:rotate(90deg); }
.tg-lb-close svg{ width:22px; height:22px; }

.tg-lb-stage{ flex:1; display:flex; align-items:center; justify-content:center; gap:14px; padding:6px 18px; min-height:0; }
.tg-lb-fig{ position:relative; display:flex; align-items:center; justify-content:center; max-width:min(1020px,90vw); max-height:100%; }
.tg-lb-fig img{
  max-width:100%; max-height:70vh; object-fit:contain; border-radius:14px;
  box-shadow:0 30px 80px -22px rgba(0,0,0,.7); animation:tgImgIn .4s cubic-bezier(.16,.84,.24,1);
}
@keyframes tgImgIn{ from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;} }
.tg-lb-nav{
  flex:none; width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; transition:background .2s ease, transform .2s ease;
}
.tg-lb-nav:hover{ background:rgba(255,255,255,.3); transform:scale(1.06); }
.tg-lb-nav svg{ width:24px; height:24px; }

.tg-lb-strip{
  flex:none; display:flex; gap:10px; justify-content:flex-start; overflow-x:auto;
  padding:14px clamp(16px,4vw,40px) 24px; scroll-behavior:smooth; scrollbar-width:thin;
}
.tg-lb-strip::-webkit-scrollbar{ height:6px; }
.tg-lb-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:6px; }
.tg-lb-strip{ margin:0 auto; max-width:1020px; }
.tg-lb-thumb{
  flex:none; width:84px; height:60px; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; opacity:.5; padding:0; transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.tg-lb-thumb img{ width:100%; height:100%; object-fit:cover; }
.tg-lb-thumb:hover{ opacity:.85; transform:translateY(-2px); }
.tg-lb-thumb.is-active{ opacity:1; border-color:#fff; }

/* ===========================  RESPONSIVE  =========================== */
@media (max-width:880px){
  .tg-card-body{ grid-template-columns:1fr; gap:26px; }
  .tg-side{ display:none; }
  .tg-nav-sm{ display:grid; width:50px; height:50px; }
  .tg-exlist{ grid-template-columns:1fr; }
  .tg-gallery{ max-width:460px; margin:0 auto; }
  .tg-thumbs{ grid-template-columns:repeat(auto-fill, minmax(86px,1fr)); }
}
@media (max-width:600px){
  .tg-lb-nav{ display:none; }     /* use swipe + filmstrip on small screens */
  .tg-lb-fig img{ max-height:60vh; }
}
@media (max-width:520px){
  .tg-stats{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .tg-card, .tg-info > *, .tg-lb-fig img{ animation:none !important; }
  .tg-card-body{ transition:opacity .2s ease; }
  .tg-card-body.tg-fade{ transform:none; }
}