:root{
  --base:#1B1B1B;
  --deep:#101010;
  --text:#F3F3F0;
  --paper-text:#181918;
  --paper-muted:rgba(24,25,24,.62);
  --max:1120px;
  --paper-max:1220px;
  --header-h:78px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--base)}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 26%,rgba(17,132,122,.12),transparent 32%),
    radial-gradient(circle at 78% 60%,rgba(20,150,137,.09),transparent 36%),
    radial-gradient(circle at 48% 88%,rgba(10,94,87,.055),transparent 44%),
    var(--base);
  background-attachment:fixed;
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
  position:relative;
}
/* Ambient teal is applied directly to the page background so it stays visible. */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:#fff;color:#111}
.container{width:min(var(--max),calc(100% - 56px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:999;padding:10px 14px;background:#fff;color:#111;border-radius:8px}.skip-link:focus{top:16px}

/* Header mirrors the locked pages. */
.site-header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(28px,calc((100vw - var(--max))/2));
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
}
.site-header.scrolled{background:rgba(27,27,27,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{width:188px;line-height:0}.brand img{width:100%;height:auto;filter:brightness(0) invert(1)}
.site-nav{display:flex;align-items:center;gap:30px;font-size:13px;color:rgba(255,255,255,.82)}
.site-nav a{transition:opacity .2s ease}.site-nav a:hover{opacity:.62}.site-nav .active{color:#fff}
.nav-cta{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 17px;color:#fff!important}
.menu-toggle{display:none;background:none;border:0;color:white;width:42px;height:42px;position:relative;cursor:pointer}
.menu-toggle span{position:absolute;left:9px;right:9px;height:1px;background:white;transition:.25s ease}
.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

.project-page{padding:calc(var(--header-h) + 74px) 28px 110px}
.project-paper{
  width:min(var(--paper-max),100%);
  margin:0 auto;
  color:var(--paper-text);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.20);
  background:
    linear-gradient(145deg,rgba(241,247,243,.87),rgba(217,229,224,.78));
  box-shadow:
    0 45px 100px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.56);
  backdrop-filter:blur(26px) saturate(118%);
  -webkit-backdrop-filter:blur(26px) saturate(118%);
  padding:26px;
  overflow:hidden;
}
.paper-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:4px 8px 22px;
  color:rgba(24,25,24,.50);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.back-link{color:rgba(24,25,24,.72);transition:opacity .2s ease}.back-link:hover{opacity:.55}

.project-cover{margin:0}
.media-placeholder{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 26% 30%,rgba(27,121,109,.30),transparent 26%),
    radial-gradient(circle at 75% 66%,rgba(32,88,82,.20),transparent 31%),
    linear-gradient(145deg,#27443e,#17221f 55%,#0f1513);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.media-placeholder::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 20%,rgba(255,255,255,.055) 42%,transparent 60%);
  pointer-events:none;
}
.cover-placeholder{aspect-ratio:16/9;border-radius:24px;display:flex;align-items:flex-end;padding:36px}
.placeholder-mark{position:relative;z-index:1;color:white;display:flex;flex-direction:column;gap:7px}
.placeholder-mark small{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.placeholder-mark strong{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4.2vw,58px);font-weight:400;letter-spacing:-.045em;line-height:.96}
.placeholder-mark span{font-size:11px;color:rgba(255,255,255,.44);letter-spacing:.04em}
.placeholder-mark.compact{padding:22px}.placeholder-mark.compact span{font-size:10px}

.eyebrow{margin:0 0 14px;text-transform:uppercase;letter-spacing:.19em;font-size:10px;font-weight:700;color:rgba(24,25,24,.50)}
.eyebrow.dark{color:rgba(24,25,24,.47)}

.project-heading{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:80px;
  padding:76px 54px 74px;
  align-items:end;
}
.heading-copy h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(64px,7.2vw,104px);
  font-weight:400;line-height:.87;letter-spacing:-.064em;margin:0;
}
.heading-intro{padding-bottom:7px}
.heading-intro p{margin:0;color:var(--paper-muted);font-size:16px;line-height:1.68}

.project-overview{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:90px;
  padding:86px 54px;
  border-top:1px solid rgba(24,25,24,.12);
}
.overview-copy h2,.editorial-note h2,.project-end h2{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  letter-spacing:-.052em;margin:0;
}
.overview-copy h2{font-size:clamp(48px,5.2vw,74px);line-height:.95;max-width:740px}
.overview-copy>p:last-child{margin:27px 0 0;max-width:700px;color:var(--paper-muted);font-size:15px;line-height:1.7}
.project-facts{margin:6px 0 0;border-top:1px solid rgba(24,25,24,.14)}
.project-facts>div{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid rgba(24,25,24,.12)}
.project-facts dt{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:rgba(24,25,24,.42)}
.project-facts dd{margin:0;font-size:13px;color:rgba(24,25,24,.74)}

.media-block{padding:24px 0 76px}
.section-label{display:flex;align-items:center;gap:16px;padding:0 54px 18px;color:rgba(24,25,24,.43);font-size:9px;text-transform:uppercase;letter-spacing:.15em}
.section-label span{width:24px;height:24px;border:1px solid rgba(24,25,24,.18);border-radius:50%;display:grid;place-items:center;font-size:8px}
.section-label p{margin:0}
.video-placeholder{aspect-ratio:16/9;border-radius:22px;display:flex;align-items:center;justify-content:center;margin:0}
.fake-play{
  position:relative;z-index:2;
  width:72px;height:72px;border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  color:white;
  padding-left:5px;
  cursor:default;
}
.media-caption{position:absolute;z-index:2;left:30px;bottom:28px;color:white;display:flex;flex-direction:column;gap:5px}
.media-caption strong{font-size:13px;font-weight:600}.media-caption span{font-size:10px;color:rgba(255,255,255,.50)}

.editorial-note{
  margin:20px 28px 94px;
  padding:72px 54px;
  border-radius:24px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.42);
}
.note-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:start}
.editorial-note h2{font-size:clamp(45px,4.8vw,68px);line-height:.96}
.note-grid>div p{margin:0 0 18px;color:var(--paper-muted);font-size:15px;line-height:1.7}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.image-placeholder{aspect-ratio:4/3;border-radius:20px;display:flex;align-items:flex-end}
.image-placeholder.alt{
  background:
    radial-gradient(circle at 72% 30%,rgba(40,126,112,.28),transparent 28%),
    radial-gradient(circle at 22% 74%,rgba(47,82,77,.20),transparent 30%),
    linear-gradient(145deg,#223a35,#111a18 55%,#0d1110);
}
.last-media{padding-bottom:36px}
.wide-placeholder{aspect-ratio:2/1;border-radius:22px;display:flex;align-items:flex-end;padding:32px}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.strip-placeholder{
  aspect-ratio:4/3;border-radius:16px;display:grid;place-items:center;
  color:rgba(255,255,255,.38);font-size:9px;text-transform:uppercase;letter-spacing:.15em;
}
.strip-placeholder:nth-child(2){
  background:radial-gradient(circle at 70% 35%,rgba(47,117,106,.27),transparent 28%),linear-gradient(145deg,#243a35,#101715);
}
.strip-placeholder:nth-child(3){
  background:radial-gradient(circle at 36% 68%,rgba(37,96,87,.25),transparent 30%),linear-gradient(145deg,#26332f,#111715);
}

.project-end{
  display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;
  margin:42px 0 0;padding:86px 54px 62px;border-top:1px solid rgba(24,25,24,.12);
}
.project-end h2{font-size:clamp(48px,5.4vw,76px);line-height:.92}
.end-actions{display:flex;align-items:center;gap:24px;padding-bottom:6px}
.end-actions>a:first-child{font-size:12px;color:rgba(24,25,24,.63);border-bottom:1px solid rgba(24,25,24,.28);padding-bottom:4px}
.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border-radius:999px;background:#171817;color:#fff;font-size:12px;font-weight:700;transition:transform .2s ease}
.button:hover{transform:translateY(-2px)}

.site-footer{background:#101010;border-top:1px solid rgba(255,255,255,.07);padding:34px 0;color:rgba(255,255,255,.52);font-size:12px}
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.footer-grid>div:last-child{text-align:right}.footer-links{display:flex;gap:26px}.footer-links a:hover{color:white}

@media(max-width:960px){
  :root{--header-h:70px}
  .container{width:min(100% - 36px,var(--max))}
  .brand{width:158px}
  .menu-toggle{display:block;z-index:102}
  .site-nav{
    position:fixed;top:0;right:0;width:min(340px,86vw);height:100vh;padding:110px 34px 40px;
    background:rgba(17,17,17,.96);backdrop-filter:blur(18px);
    display:flex;flex-direction:column;align-items:flex-start;gap:26px;
    transform:translateX(105%);transition:transform .3s ease;z-index:101;font-size:16px
  }
  .site-nav.open{transform:none}.nav-cta{margin-top:10px}
  .project-page{padding:calc(var(--header-h) + 46px) 18px 80px}
  .project-paper{border-radius:26px;padding:20px}
  .cover-placeholder{border-radius:20px}
  .project-heading{grid-template-columns:1fr;gap:30px;padding:58px 32px}
  .heading-intro{max-width:680px}
  .project-overview{grid-template-columns:1fr;gap:48px;padding:66px 32px}
  .project-facts{max-width:520px}
  .section-label{padding-inline:32px}
  .editorial-note{margin-inline:0;padding:58px 32px}
  .note-grid{grid-template-columns:1fr;gap:28px}
  .project-end{grid-template-columns:1fr;gap:30px;padding:66px 32px 48px}
  .end-actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr;text-align:center}.footer-grid>div:last-child{text-align:center}.footer-links{justify-content:center}
}
@media(max-width:640px){
  .comic-gallery{grid-template-columns:1fr;gap:12px}.comic-page{border-radius:14px}
  .site-header{padding-inline:18px}.brand{width:140px}
  .project-page{padding:calc(var(--header-h) + 30px) 10px 60px}
  .project-paper{padding:12px;border-radius:22px}
  .paper-topbar{padding:8px 5px 16px;font-size:8px}.paper-topbar>span{display:none}
  .cover-placeholder{border-radius:16px;padding:20px}
  .placeholder-mark strong{font-size:34px}
  .project-heading{padding:46px 12px 48px}.heading-copy h1{font-size:clamp(54px,15vw,72px)}.heading-intro p{font-size:15px}
  .project-overview{padding:54px 12px;gap:38px}.overview-copy h2{font-size:clamp(42px,12vw,56px)}.overview-copy>p:last-child{font-size:14px}
  .section-label{padding:0 12px 14px}
  .video-placeholder{border-radius:16px}.fake-play{width:58px;height:58px}.media-caption{left:18px;bottom:16px}.media-caption span{display:none}
  .editorial-note{margin:10px 0 70px;padding:46px 18px;border-radius:18px}.editorial-note h2{font-size:clamp(40px,11.5vw,52px)}
  .two-up{grid-template-columns:1fr;gap:14px}.image-placeholder{border-radius:16px}
  .wide-placeholder{aspect-ratio:4/3;border-radius:16px;padding:20px}.strip-grid{grid-template-columns:1fr;gap:12px}.strip-placeholder{border-radius:14px}
  .project-end{padding:54px 12px 38px}.project-end h2{font-size:clamp(43px,12vw,58px)}.end-actions{align-items:flex-start;flex-direction:column;gap:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important}
}


/* =========================================================
   PROJECT TEMPLATE VARIATIONS — V1.2
   Shared additions only. Existing project-page styling above
   remains the visual base.
   ========================================================= */
.three-up{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.three-up .image-placeholder{aspect-ratio:4/3}
.image-placeholder.third{background:radial-gradient(circle at 38% 28%,rgba(49,128,114,.26),transparent 30%),linear-gradient(145deg,#213c36,#111917 58%,#0b100f)}
.secondary-video .video-placeholder{background:radial-gradient(circle at 72% 32%,rgba(30,130,116,.25),transparent 28%),radial-gradient(circle at 24% 74%,rgba(22,84,76,.19),transparent 31%),linear-gradient(145deg,#1d3933,#121b19 58%,#0d1211)}
.tertiary-video .video-placeholder{background:radial-gradient(circle at 34% 30%,rgba(48,114,104,.24),transparent 26%),radial-gradient(circle at 78% 68%,rgba(18,109,98,.21),transparent 34%),linear-gradient(145deg,#243c37,#111816 58%,#0b100f)}
.asym-gallery{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
.tall-placeholder{min-height:100%;aspect-ratio:3/4;border-radius:20px;display:flex;align-items:flex-end}
.asym-stack{display:grid;grid-template-rows:1fr 1fr;gap:22px}
.asym-stack .image-placeholder{aspect-ratio:auto;min-height:0}

/* Illustration family */
.art-hero{aspect-ratio:3/2;border-radius:22px;display:flex;align-items:flex-end;padding:32px}
.art-mosaic{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:18px;min-height:720px}
.art-mosaic-large{grid-row:1 / 3;border-radius:22px;display:flex;align-items:flex-end}
.art-mosaic-small{border-radius:20px;display:flex;align-items:flex-end}
.art-mosaic-small.alt{background:radial-gradient(circle at 70% 35%,rgba(42,126,112,.25),transparent 28%),linear-gradient(145deg,#243a35,#111816)}
.art-landscape{aspect-ratio:2/1;border-radius:22px;display:flex;align-items:flex-end;padding:32px}

/* Minimal illustration template: intentionally blank artwork fields. */
.template-minimal .paper-topbar{padding-bottom:10px}
.minimal-title{padding:84px 54px 68px}
.minimal-title h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(64px,7.2vw,104px);font-weight:400;line-height:.87;letter-spacing:-.064em}
.minimal-gallery{display:grid;gap:22px;padding:0 0 44px}
.blank-art{min-height:320px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(208,222,216,.46));border:1px solid rgba(24,25,24,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.44)}
.blank-art-hero{min-height:620px;border-radius:24px}
.blank-art-wide{min-height:440px}
.blank-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.blank-art-grid.three{grid-template-columns:repeat(3,1fr)}
.blank-art-portrait{min-height:660px}

/* Comic family: clean page-first gallery. All art slots are locked to A4 portrait ratio. */
.template-comic .paper-topbar{padding-bottom:10px}
.comic-title{padding-bottom:54px}
.comic-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:0 0 44px}
.comic-page{aspect-ratio:210/297;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(208,222,216,.46));border:1px solid rgba(24,25,24,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.44)}

/* Storyboard family */
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.board-panel{aspect-ratio:16/9;border-radius:16px;display:grid;place-items:center;color:rgba(255,255,255,.38);font-size:9px;text-transform:uppercase;letter-spacing:.15em}
.board-panel:nth-child(even){background:radial-gradient(circle at 72% 38%,rgba(41,118,106,.22),transparent 27%),linear-gradient(145deg,#223832,#111715)}
.story-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.story-feature{aspect-ratio:16/10;border-radius:20px;display:flex;align-items:flex-end}
.story-feature.alt{background:radial-gradient(circle at 68% 31%,rgba(35,123,109,.24),transparent 29%),linear-gradient(145deg,#243c36,#101715)}
.story-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.story-strip-panel{aspect-ratio:16/9;border-radius:12px;display:grid;place-items:center;color:rgba(255,255,255,.35);font-size:9px;letter-spacing:.15em}
.story-strip-panel:nth-child(3n+2){background:radial-gradient(circle at 65% 35%,rgba(37,117,104,.23),transparent 28%),linear-gradient(145deg,#243a35,#101715)}
.story-strip-panel:nth-child(3n){background:radial-gradient(circle at 35% 70%,rgba(35,98,89,.23),transparent 29%),linear-gradient(145deg,#263630,#111715)}

@media(max-width:960px){
  .three-up{grid-template-columns:1fr 1fr}.three-up>div:last-child{grid-column:1 / -1;aspect-ratio:2/1}
  .asym-gallery{grid-template-columns:1fr}.tall-placeholder{aspect-ratio:4/3}.asym-stack{grid-template-columns:1fr 1fr;grid-template-rows:none}.asym-stack .image-placeholder{aspect-ratio:4/3}
  .art-mosaic{min-height:600px}
  .minimal-title{padding:64px 32px 54px}
  .blank-art-hero{min-height:500px}.blank-art-portrait{min-height:520px}
  .board-grid{grid-template-columns:repeat(2,1fr)}
  .story-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .three-up{grid-template-columns:1fr;gap:14px}.three-up>div:last-child{grid-column:auto;aspect-ratio:4/3}
  .asym-stack{grid-template-columns:1fr;gap:14px}.asym-gallery{gap:14px}
  .art-hero,.art-landscape{aspect-ratio:4/3;border-radius:16px;padding:20px}
  .art-mosaic{grid-template-columns:1fr;grid-template-rows:none;min-height:0;gap:14px}.art-mosaic-large{grid-row:auto;aspect-ratio:4/3;border-radius:16px}.art-mosaic-small{aspect-ratio:4/3;border-radius:16px}
  .minimal-title{padding:48px 12px 42px}.minimal-title h1{font-size:clamp(54px,15vw,72px)}
  .minimal-gallery{gap:12px}.blank-art,.blank-art-hero,.blank-art-wide,.blank-art-portrait{min-height:0;aspect-ratio:4/3;border-radius:14px}.blank-art-portrait{aspect-ratio:3/4}.blank-art-grid,.blank-art-grid.three{grid-template-columns:1fr;gap:12px}
  .board-grid{grid-template-columns:1fr;gap:12px}.board-panel{border-radius:14px}
  .story-feature-grid{grid-template-columns:1fr;gap:14px}.story-feature{border-radius:16px}
  .story-strip{grid-template-columns:1fr;gap:10px}.story-strip-panel{border-radius:12px}
}


/* =========================================================
   LOCKED MEDIA SYSTEM — V1.3
   Every project image/video slot keeps its designed frame.
   Replace ONLY the src value in the HTML.
   Any source resolution is cropped automatically to fill.
   ========================================================= */
.locked-frame{
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
}
.locked-frame::after{display:none !important}
.locked-media,
.locked-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.locked-media{
  object-fit:cover;
  object-position:center;
}
.locked-video{
  background:transparent;
}

/* Slots that previously relied on grid height/min-height now
   receive explicit ratios too, so source dimensions never
   influence the layout. */
.asym-stack .image-placeholder{aspect-ratio:16/9;min-height:0}
.art-mosaic{min-height:0;align-items:start}
.art-mosaic-large{aspect-ratio:1/1}
.art-mosaic-small{aspect-ratio:4/3}
.blank-art{min-height:0;aspect-ratio:4/3}
.blank-art-hero{min-height:0;aspect-ratio:3/2}
.blank-art-wide{min-height:0;aspect-ratio:2/1}
.blank-art-portrait{min-height:0;aspect-ratio:3/4}

/* =========================================================
   LOCKED MEDIA CLEANUP
   Removes the old placeholder frame seam from real artwork.
   ========================================================= */
.locked-frame{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:transparent !important;
}
.locked-frame::after{display:none !important;}
.locked-media{
  border:0 !important;
  outline:0 !important;
}

/* =========================================================
   COMIC TEMPLATE SAFETY LOCK
   Keeps Cross Joseph as 2 columns x 4 rows on desktop and
   one column on mobile, with A4 portrait page proportions.
   ========================================================= */
.template-comic .comic-gallery{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
  padding:0 0 44px !important;
}
.template-comic .comic-page{
  position:relative !important;
  width:100% !important;
  aspect-ratio:210 / 297 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:20px !important;
}
.template-comic .comic-page > .locked-media{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
@media(max-width:640px){
  .template-comic .comic-gallery{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .template-comic .comic-page{
    border-radius:14px !important;
  }
}

/* =========================================================
   PROJECT IMAGE LIGHTBOX
   ========================================================= */
.locked-media,
.cartoon-portrait-image{cursor:zoom-in;}
body.lightbox-open{overflow:hidden;}
.project-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:rgba(7,9,8,.76);
  backdrop-filter:blur(16px) saturate(.78);
  -webkit-backdrop-filter:blur(16px) saturate(.78);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.project-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.project-lightbox__frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:min(94vw,1800px);
  max-height:92vh;
  padding:8px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(241,247,243,.94),rgba(217,229,224,.90));
  box-shadow:0 36px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.68);
  transform:scale(.975);
  transition:transform .22s ease;
}
.project-lightbox.is-open .project-lightbox__frame{transform:scale(1);}
.project-lightbox__image{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(94vw - 16px);
  max-height:calc(92vh - 16px);
  object-fit:contain;
  border-radius:11px;
  cursor:default;
}
.project-lightbox__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(20,22,21,.72);
  color:#fff;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .18s ease,transform .18s ease;
}
.project-lightbox__close:hover{background:rgba(20,22,21,.92);transform:scale(1.04);}
@media(max-width:640px){
  .project-lightbox{padding:16px;}
  .project-lightbox__frame{max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:5px;border-radius:14px;}
  .project-lightbox__image{max-width:calc(100vw - 42px);max-height:calc(100vh - 42px);border-radius:9px;}
  .project-lightbox__close{top:10px;right:10px;width:36px;height:36px;}
}
@media(prefers-reduced-motion:reduce){
  .project-lightbox,
  .project-lightbox__frame{transition:none;}
}