/* ---------- tokens ---------- */
:root{
  --paper:#EEF1EC;
  --paper-alt:#E4E9E2;
  --card:#FBFAF6;
  --ink:#1E2622;
  --ink-soft:#5B655F;
  --navy:#233C55;
  --navy-deep:#182A3B;
  --brass:#A9812E;
  --brass-soft:#CDB374;
  --seal:#7E2A34;
  --line:#D8DED4;
  --radius:3px;
  --brass-rgb:169,129,46;
  --navy-rgb:35,60,85;
  --seal-rgb:126,42,52;
  --ink-soft-rgb:91,101,95;
  --display:'Fraunces', Georgia, serif;
  --body:'Inter', Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;color:var(--ink)}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
button{font-family:var(--body)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--radius);font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.btn-primary{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.08) inset;color:#fff}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(24,42,59,.55)}
.btn-primary:active{transform:translateY(0)}
.btn-primary.btn-light{background:#fff;color:var(--navy-deep)}
.btn-primary.btn-light:hover{background:#eef1ec}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px)}
.btn:focus-visible,.chip:focus-visible,.template-card:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.btn-small{padding:9px 14px;font-size:13px}
.btn-tiny{padding:8px 12px;font-size:12.5px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;cursor:pointer}
.btn-tiny-ghost{background:transparent;color:var(--ink-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* anchor targets should clear the sticky navbar */
#how,#templates,#build{scroll-margin-top:92px}

/* ---------- nav ---------- */
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:20;background:rgba(238,241,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:20px}
.brand-mark{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--navy);flex:none;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
footer .brand-mark{width:28px;height:28px}
.navbar nav{display:flex;gap:34px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.navbar nav a:hover{color:var(--navy)}
.nav-btn{background:var(--navy);color:#fff;border-radius:var(--radius);padding:11px 18px;font-weight:600;font-size:13.5px}
.nav-btn:hover{background:var(--navy-deep)}
.nav-btn-mobile{display:none}

/* hamburger toggle — hidden on desktop, shown once nav collapses */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;margin:0 auto;background:var(--ink);border-radius:2px;transition:transform .18s ease,opacity .18s ease}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{max-width:1220px;margin:auto;padding:80px 6% 90px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-tag{font-size:13.5px;color:var(--seal);font-weight:600;margin-bottom:16px}
.hero h1{font-size:clamp(34px,4.2vw,52px);line-height:1.12;letter-spacing:-.5px;max-width:620px;animation:rise .6s ease both}
.hero-lede{margin-top:20px;font-size:16.5px;line-height:1.7;color:var(--ink-soft);max-width:520px;animation:rise .6s .08s ease both}
.hero-actions{display:flex;gap:12px;margin:30px 0 24px;flex-wrap:wrap;animation:rise .6s .16s ease both}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.hero-trust li{position:relative;padding-left:14px}
.hero-trust li:before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--brass)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.hero-visual{display:flex;justify-content:center}
.hero-stack{position:relative;width:320px}
.hero-stack:before,.hero-stack:after{
  content:"";position:absolute;inset:0;background:var(--card);
  aspect-ratio:210/297;box-shadow:0 20px 44px -24px rgba(24,42,59,.3);
  border-radius:1px;
}
.hero-stack:before{transform:rotate(-5.5deg) translate(-14px,10px);z-index:0}
.hero-stack:after{transform:rotate(3.5deg) translate(10px,6px);z-index:0;background:#fff}
.hero-cover{position:relative;z-index:1;width:320px;box-shadow:0 30px 60px -20px rgba(24,42,59,.35);transform:rotate(1.4deg)}

/* ---------- generic section shells ---------- */
.section-head{max-width:640px;margin:0 auto 50px;text-align:center}
.section-head.left{margin:0 0 44px;text-align:left}
.section-head h2{font-size:clamp(28px,3.2vw,38px);letter-spacing:-.5px}
.section-head p{margin-top:12px;color:var(--ink-soft);line-height:1.7;font-size:15.5px}

.how,.templates,.build{max-width:1220px;margin:auto;padding:90px 6%}
.templates{background:var(--paper-alt);max-width:none;padding-left:max(6%, calc((100% - 1108px)/2));padding-right:max(6%, calc((100% - 1108px)/2))}

/* ---------- how it works: ledger timeline ---------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.timeline:before{content:"";position:absolute;top:16px;left:0;right:0;height:1px;background:var(--line)}
.timeline li{display:flex;flex-direction:column;gap:14px}
.tl-mark{width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid var(--brass-soft);color:var(--brass);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:14px;z-index:1}
.timeline h3{font-size:17px;margin-bottom:6px}
.timeline p{font-size:13.8px;line-height:1.7;color:var(--ink-soft)}

/* ---------- templates gallery ---------- */
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:900px;margin:0 auto}
.template-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.template-card:hover{border-color:var(--brass-soft);transform:translateY(-5px);box-shadow:0 18px 34px -20px rgba(24,42,59,.4)}
.mini-frame{width:100%;aspect-ratio:210/297;overflow:hidden;position:relative;border-radius:2px;background:#fff;margin-bottom:14px;box-shadow:0 6px 18px -8px rgba(24,42,59,.25);transition:box-shadow .18s ease;container-type:inline-size}
.template-card:hover .mini-frame{box-shadow:0 10px 24px -10px rgba(var(--brass-rgb),.4)}
.mini-cover{position:absolute;top:0;left:0;width:793.7008px;height:1122.5197px;transform-origin:top left;transform:scale(var(--mini-scale,.63));will-change:transform}
.template-card h3{font-size:15.5px;margin-bottom:4px}
.template-card p{font-size:12.8px;color:var(--ink-soft);line-height:1.6}

/* ---------- the cover component (used at every scale) ---------- */
.cover-paper{background:#fff;width:100%;aspect-ratio:210/297;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(30,38,34,.05)}
.cover-frame{position:absolute;inset:0;padding:10% 9% 8%;display:flex;flex-direction:column;justify-content:flex-start}

.cover-header{text-align:center}
.cover-logo{width:19%;aspect-ratio:1;border-radius:50%;margin:0 auto 5%;display:grid;place-items:center;overflow:hidden;background:#fafaf8;box-shadow:0 0 0 1px var(--line),0 0 0 4px #fff,0 4px 14px -6px rgba(30,38,34,.35)}
.cover-logo img{width:100%;height:100%;object-fit:cover}
.cover-logo:empty:before{content:"";display:block;width:32%;height:32%;border:1px dashed #c8cfc5;border-radius:50%}
.cover-institution{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.4px;line-height:1.3;text-transform:uppercase}
.cover-department{font-size:10.5px;color:var(--ink-soft);margin-top:6px;letter-spacing:.6px;text-transform:uppercase}
.cover-header-rule{width:30px;height:1px;background:var(--line);margin:12px auto 0}

.cover-middle{text-align:center;margin-top:14%}
.cover-kicker{font-size:11px;font-style:italic;color:var(--ink-soft);margin-bottom:10px;font-family:var(--display);letter-spacing:.3px}
.cover-topic{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.32;color:var(--ink);letter-spacing:-.2px}
.cover-rule{width:64px;height:1px;background:var(--brass);margin:22px auto;position:relative}
.cover-rule:after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;background:inherit;transform:translate(-50%,-50%) rotate(45deg)}
.cover-course{display:inline-flex;flex-direction:column;gap:6px;text-align:left}
.cover-course-row{font-size:11px;color:var(--ink);display:flex;gap:6px}
.cover-course-row span:first-child{color:var(--ink-soft);min-width:82px;font-weight:600;letter-spacing:.2px}

.cover-footer{margin-top:14%}
.cover-parties{display:grid;grid-template-columns:1fr 1fr;gap:5%;border-top:none;padding-top:0}

/* submitted-by / submitted-to: rounded tinted card, header on top,
   a white inset panel holding the rows underneath — same shape on
   every template, only the accent color changes. */
.party{
  --accent:var(--brass);
  --accent-rgb:var(--brass-rgb);
  background:rgba(var(--accent-rgb),.12);
  border:1.5px solid rgba(var(--accent-rgb),.3);
  border-radius:11%/9%;
  padding:7% 6% 6%;
  text-align:center;
}
.party h4{
  font-family:var(--display);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--accent);
  font-weight:700;
  margin:0 0 8%;
}
.party h4:after{content:":"}
.party-rows-wrap{background:#fffdfb;border-radius:9%/16%;padding:9% 8%;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.14),0 3px 10px -6px rgba(20,26,22,.18)}
.party-rows{display:grid;grid-template-columns:max-content 10px minmax(0,1fr);column-gap:5px;row-gap:5px;font-size:8.7px;line-height:1.45;text-align:left;align-items:start}
.party-label{font-weight:700;white-space:nowrap;color:var(--ink)}
.party-colon{color:var(--ink-soft)}
.party-value{color:var(--ink-soft);min-width:0;white-space:normal;word-break:normal;overflow-wrap:normal;line-break:auto}
.cover-date{text-align:center;font-size:9.5px;color:var(--ink-soft);margin-top:14px}
.cover-seal{display:none}

/* classic: centered, brass double rule */
.tpl-classic .cover-frame{border:1px solid var(--line);padding:10% 9% 5%}
.tpl-classic .cover-logo{width:17%;margin-bottom:4%}
.tpl-classic .cover-institution{font-size:41px;line-height:1.15}
.tpl-classic .cover-department{font-size:18px;margin-top:7px}
.tpl-classic .cover-header-rule{width:42px;margin-top:36px}
.tpl-classic .cover-middle{margin-top:1.5%}
.tpl-classic .cover-kicker{font-size:26px;margin-bottom:29px}
.tpl-classic .cover-topic{font-size:52px;line-height:1.15}
.tpl-classic .cover-rule{width:84px;margin:46px auto 69px}
.tpl-classic .cover-rule:after{width:9px;height:9px}
.tpl-classic .cover-course{gap:7px}
.tpl-classic .cover-course-row{font-size:30px;line-height:1.1;gap:8px}
.tpl-classic .cover-course-row span:first-child{min-width:145px}
.tpl-classic .cover-footer{margin-top:1.5%}
.tpl-classic .party{padding:8.5% 6% 6.5%}
.tpl-classic .party h4{font-size:26px;line-height:1.15;margin-bottom:5%}
.tpl-classic .party-rows{column-gap:8px;row-gap:8px;font-size:24px;line-height:1.25}
.tpl-classic .cover-date{font-size:17px;margin-top:24px}
.tpl-classic .cover-frame:before{content:"";position:absolute;inset:4%;border:1px solid #ece4cf;pointer-events:none}
.tpl-classic .cover-course{text-align:center}
.tpl-classic .cover-course-row{justify-content:center}

/* modern: left aligned, navy spine, quiet corporate header band */
.tpl-modern .cover-frame{padding-left:12%;border-left:7px solid var(--navy)}
.tpl-modern .cover-header{text-align:left}
.tpl-modern .cover-header-rule{margin:11px 0 0;background:var(--navy);opacity:.25}
.tpl-modern .cover-logo{margin:0 0 5%;border-radius:8px}
.tpl-modern .cover-middle{text-align:left}
.tpl-modern .cover-topic{font-size:25px}
.tpl-modern .cover-rule{margin:20px 0;background:var(--navy)}
.tpl-modern .party{--accent:var(--navy);--accent-rgb:var(--navy-rgb)}
.tpl-modern .cover-date{text-align:left}

/* minimal: quiet ink-toned card, still rounded to match the others — no ornament */
.tpl-minimal .cover-frame{padding:12% 11% 9%}
.tpl-minimal .cover-logo{box-shadow:none;width:15%}
.tpl-minimal .cover-header-rule{display:none}
.tpl-minimal .cover-institution{font-weight:600;letter-spacing:.8px}
.tpl-minimal .cover-topic{font-size:20px;font-weight:500}
.tpl-minimal .cover-kicker{font-style:normal}
.tpl-minimal .cover-rule{background:var(--ink);width:32px;height:1px}
.tpl-minimal .cover-course{text-align:center}
.tpl-minimal .cover-course-row{justify-content:center}
.tpl-minimal .party{--accent:var(--ink-soft);--accent-rgb:var(--ink-soft-rgb)}

/* ceremonial: gold double frame with laurel-sprig corners, styled after a
   traditional college certificate cover — navy ink, brass gold accents */
.tpl-ceremonial .cover-frame{
  border:2.5px solid var(--brass);
  padding:11% 9% 8%;
}
.tpl-ceremonial .cover-frame:before{
  content:"";position:absolute;inset:3%;border:1px solid var(--brass);opacity:.55;pointer-events:none;
}
.tpl-ceremonial .cover-frame:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMCkiPgogIDxwYXRoIGQ9Ik0gMi4wMCwyLjAwIEwgMi43Miw0LjMxIEwgMy41Myw2LjU4IEwgNC40NCw4LjgxIEwgNS40NCwxMS4wMCBMIDYuNTUsMTMuMTUgTCA3Ljc1LDE1LjI1IEwgOS4wNSwxNy4zMSBMIDEwLjQ0LDE5LjMzIEwgMTEuOTQsMjEuMzEgTCAxMy41MywyMy4yNSBMIDE1LjIyLDI1LjE1IEwgMTcuMDAsMjcuMDAgTCAxOC44OCwyOC44MSBMIDIwLjg2LDMwLjU4IEwgMjIuOTQsMzIuMzEgTCAyNS4xMSwzNC4wMCBMIDI3LjM4LDM1LjY1IEwgMjkuNzUsMzcuMjUgTCAzMi4yMiwzOC44MSBMIDM0Ljc4LDQwLjMzIEwgMzcuNDQsNDEuODEgTCA0MC4xOSw0My4yNSBMIDQzLjA1LDQ0LjY1IEwgNDYuMDAsNDYuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0NEQjM3NCIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuODUiLz4KICA8Y2lyY2xlIGN4PSIxLjUiIGN5PSIxLjUiIHI9IjIuNiIgZmlsbD0iI0E5ODEyRSIvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgMy41NTIsLTIuMzg1IDExLjEsMCBRIDMuNTUyLDIuMzg1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljc5IDkuNjApIHJvdGF0ZSg5OS42MykiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSAzLjkzNjAwMDAwMDAwMDAwMDQsLTIuNjA1IDEyLjMsMCBRIDMuOTM2MDAwMDAwMDAwMDAwNCwyLjYwNSAwLDAgWiIgZmlsbD0iIzIzM0M1NSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44OCAxMy43NCkgcm90YXRlKDI2LjgyKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDQuMzIsLTIuODI1IDEzLjUsMCBRIDQuMzIsMi44MjUgMCwwIFoiIGZpbGw9IiNDREIzNzQiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMzIgMTcuNzIpIHJvdGF0ZSg5MC4wOSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA0LjcwNCwtMy4wNDUgMTQuNywwIFEgNC43MDQsMy4wNDUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjEyIDIxLjU1KSByb3RhdGUoMTcuNTEpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS4wODgsLTMuMjY1IDE1LjksMCBRIDUuMDg4LDMuMjY1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yOCAyNS4yMikgcm90YXRlKDgxLjExKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDUuNDcyLC0zLjQ4NTAwMDAwMDAwMDAwMDMgMTcuMSwwIFEgNS40NzIsMy40ODUwMDAwMDAwMDAwMDAzIDAsMCBaIiBmaWxsPSIjMjMzQzU1IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC44MCAyOC43NCkgcm90YXRlKDguOTUpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS44NTYwMDAwMDAwMDAwMDEsLTMuNzA1IDE4LjMsMCBRIDUuODU2MDAwMDAwMDAwMDAxLDMuNzA1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAzMi4xMSkgcm90YXRlKDczLjAzKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDYuMjQsLTMuOTI1IDE5LjUsMCBRIDYuMjQsMy45MjUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjkyIDM1LjMyKSByb3RhdGUoMS4zOCkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSwtNC4xNDUgMjAuNzAwMDAwMDAwMDAwMDAzLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSw0LjE0NSAwLDAgWiIgZmlsbD0iI0E5ODEyRSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuNTIgMzguMzgpIHJvdGF0ZSg2NS45OSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA3LjAwOCwtNC4zNjUgMjEuOSwwIFEgNy4wMDgsNC4zNjUgMCwwIFoiIGZpbGw9IiMyMzNDNTUiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjQ3IDQxLjI4KSByb3RhdGUoLTUuMTQpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNy4zOTIsLTQuNTg1IDIzLjEsMCBRIDcuMzkyLDQuNTg1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS43OCA0NC4wNCkgcm90YXRlKDU5Ljk3KSIgLz4KICA8L2c+Cjwvc3ZnPg=="),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSwwLDAsMSwxMDAsMCkiPgogIDxwYXRoIGQ9Ik0gMi4wMCwyLjAwIEwgMi43Miw0LjMxIEwgMy41Myw2LjU4IEwgNC40NCw4LjgxIEwgNS40NCwxMS4wMCBMIDYuNTUsMTMuMTUgTCA3Ljc1LDE1LjI1IEwgOS4wNSwxNy4zMSBMIDEwLjQ0LDE5LjMzIEwgMTEuOTQsMjEuMzEgTCAxMy41MywyMy4yNSBMIDE1LjIyLDI1LjE1IEwgMTcuMDAsMjcuMDAgTCAxOC44OCwyOC44MSBMIDIwLjg2LDMwLjU4IEwgMjIuOTQsMzIuMzEgTCAyNS4xMSwzNC4wMCBMIDI3LjM4LDM1LjY1IEwgMjkuNzUsMzcuMjUgTCAzMi4yMiwzOC44MSBMIDM0Ljc4LDQwLjMzIEwgMzcuNDQsNDEuODEgTCA0MC4xOSw0My4yNSBMIDQzLjA1LDQ0LjY1IEwgNDYuMDAsNDYuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0NEQjM3NCIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuODUiLz4KICA8Y2lyY2xlIGN4PSIxLjUiIGN5PSIxLjUiIHI9IjIuNiIgZmlsbD0iI0E5ODEyRSIvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgMy41NTIsLTIuMzg1IDExLjEsMCBRIDMuNTUyLDIuMzg1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljc5IDkuNjApIHJvdGF0ZSg5OS42MykiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSAzLjkzNjAwMDAwMDAwMDAwMDQsLTIuNjA1IDEyLjMsMCBRIDMuOTM2MDAwMDAwMDAwMDAwNCwyLjYwNSAwLDAgWiIgZmlsbD0iIzIzM0M1NSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44OCAxMy43NCkgcm90YXRlKDI2LjgyKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDQuMzIsLTIuODI1IDEzLjUsMCBRIDQuMzIsMi44MjUgMCwwIFoiIGZpbGw9IiNDREIzNzQiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMzIgMTcuNzIpIHJvdGF0ZSg5MC4wOSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA0LjcwNCwtMy4wNDUgMTQuNywwIFEgNC43MDQsMy4wNDUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjEyIDIxLjU1KSByb3RhdGUoMTcuNTEpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS4wODgsLTMuMjY1IDE1LjksMCBRIDUuMDg4LDMuMjY1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yOCAyNS4yMikgcm90YXRlKDgxLjExKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDUuNDcyLC0zLjQ4NTAwMDAwMDAwMDAwMDMgMTcuMSwwIFEgNS40NzIsMy40ODUwMDAwMDAwMDAwMDAzIDAsMCBaIiBmaWxsPSIjMjMzQzU1IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC44MCAyOC43NCkgcm90YXRlKDguOTUpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS44NTYwMDAwMDAwMDAwMDEsLTMuNzA1IDE4LjMsMCBRIDUuODU2MDAwMDAwMDAwMDAxLDMuNzA1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAzMi4xMSkgcm90YXRlKDczLjAzKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDYuMjQsLTMuOTI1IDE5LjUsMCBRIDYuMjQsMy45MjUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjkyIDM1LjMyKSByb3RhdGUoMS4zOCkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSwtNC4xNDUgMjAuNzAwMDAwMDAwMDAwMDAzLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSw0LjE0NSAwLDAgWiIgZmlsbD0iI0E5ODEyRSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuNTIgMzguMzgpIHJvdGF0ZSg2NS45OSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA3LjAwOCwtNC4zNjUgMjEuOSwwIFEgNy4wMDgsNC4zNjUgMCwwIFoiIGZpbGw9IiMyMzNDNTUiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjQ3IDQxLjI4KSByb3RhdGUoLTUuMTQpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNy4zOTIsLTQuNTg1IDIzLjEsMCBRIDcuMzkyLDQuNTg1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS43OCA0NC4wNCkgcm90YXRlKDU5Ljk3KSIgLz4KICA8L2c+Cjwvc3ZnPg=="),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDEwMCkiPgogIDxwYXRoIGQ9Ik0gMi4wMCwyLjAwIEwgMi43Miw0LjMxIEwgMy41Myw2LjU4IEwgNC40NCw4LjgxIEwgNS40NCwxMS4wMCBMIDYuNTUsMTMuMTUgTCA3Ljc1LDE1LjI1IEwgOS4wNSwxNy4zMSBMIDEwLjQ0LDE5LjMzIEwgMTEuOTQsMjEuMzEgTCAxMy41MywyMy4yNSBMIDE1LjIyLDI1LjE1IEwgMTcuMDAsMjcuMDAgTCAxOC44OCwyOC44MSBMIDIwLjg2LDMwLjU4IEwgMjIuOTQsMzIuMzEgTCAyNS4xMSwzNC4wMCBMIDI3LjM4LDM1LjY1IEwgMjkuNzUsMzcuMjUgTCAzMi4yMiwzOC44MSBMIDM0Ljc4LDQwLjMzIEwgMzcuNDQsNDEuODEgTCA0MC4xOSw0My4yNSBMIDQzLjA1LDQ0LjY1IEwgNDYuMDAsNDYuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0NEQjM3NCIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuODUiLz4KICA8Y2lyY2xlIGN4PSIxLjUiIGN5PSIxLjUiIHI9IjIuNiIgZmlsbD0iI0E5ODEyRSIvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgMy41NTIsLTIuMzg1IDExLjEsMCBRIDMuNTUyLDIuMzg1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljc5IDkuNjApIHJvdGF0ZSg5OS42MykiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSAzLjkzNjAwMDAwMDAwMDAwMDQsLTIuNjA1IDEyLjMsMCBRIDMuOTM2MDAwMDAwMDAwMDAwNCwyLjYwNSAwLDAgWiIgZmlsbD0iIzIzM0M1NSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44OCAxMy43NCkgcm90YXRlKDI2LjgyKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDQuMzIsLTIuODI1IDEzLjUsMCBRIDQuMzIsMi44MjUgMCwwIFoiIGZpbGw9IiNDREIzNzQiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMzIgMTcuNzIpIHJvdGF0ZSg5MC4wOSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA0LjcwNCwtMy4wNDUgMTQuNywwIFEgNC43MDQsMy4wNDUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjEyIDIxLjU1KSByb3RhdGUoMTcuNTEpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS4wODgsLTMuMjY1IDE1LjksMCBRIDUuMDg4LDMuMjY1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yOCAyNS4yMikgcm90YXRlKDgxLjExKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDUuNDcyLC0zLjQ4NTAwMDAwMDAwMDAwMDMgMTcuMSwwIFEgNS40NzIsMy40ODUwMDAwMDAwMDAwMDAzIDAsMCBaIiBmaWxsPSIjMjMzQzU1IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC44MCAyOC43NCkgcm90YXRlKDguOTUpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS44NTYwMDAwMDAwMDAwMDEsLTMuNzA1IDE4LjMsMCBRIDUuODU2MDAwMDAwMDAwMDAxLDMuNzA1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAzMi4xMSkgcm90YXRlKDczLjAzKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDYuMjQsLTMuOTI1IDE5LjUsMCBRIDYuMjQsMy45MjUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjkyIDM1LjMyKSByb3RhdGUoMS4zOCkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSwtNC4xNDUgMjAuNzAwMDAwMDAwMDAwMDAzLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSw0LjE0NSAwLDAgWiIgZmlsbD0iI0E5ODEyRSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuNTIgMzguMzgpIHJvdGF0ZSg2NS45OSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA3LjAwOCwtNC4zNjUgMjEuOSwwIFEgNy4wMDgsNC4zNjUgMCwwIFoiIGZpbGw9IiMyMzNDNTUiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjQ3IDQxLjI4KSByb3RhdGUoLTUuMTQpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNy4zOTIsLTQuNTg1IDIzLjEsMCBRIDcuMzkyLDQuNTg1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS43OCA0NC4wNCkgcm90YXRlKDU5Ljk3KSIgLz4KICA8L2c+Cjwvc3ZnPg=="),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSwwLDAsLTEsMTAwLDEwMCkiPgogIDxwYXRoIGQ9Ik0gMi4wMCwyLjAwIEwgMi43Miw0LjMxIEwgMy41Myw2LjU4IEwgNC40NCw4LjgxIEwgNS40NCwxMS4wMCBMIDYuNTUsMTMuMTUgTCA3Ljc1LDE1LjI1IEwgOS4wNSwxNy4zMSBMIDEwLjQ0LDE5LjMzIEwgMTEuOTQsMjEuMzEgTCAxMy41MywyMy4yNSBMIDE1LjIyLDI1LjE1IEwgMTcuMDAsMjcuMDAgTCAxOC44OCwyOC44MSBMIDIwLjg2LDMwLjU4IEwgMjIuOTQsMzIuMzEgTCAyNS4xMSwzNC4wMCBMIDI3LjM4LDM1LjY1IEwgMjkuNzUsMzcuMjUgTCAzMi4yMiwzOC44MSBMIDM0Ljc4LDQwLjMzIEwgMzcuNDQsNDEuODEgTCA0MC4xOSw0My4yNSBMIDQzLjA1LDQ0LjY1IEwgNDYuMDAsNDYuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0NEQjM3NCIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuODUiLz4KICA8Y2lyY2xlIGN4PSIxLjUiIGN5PSIxLjUiIHI9IjIuNiIgZmlsbD0iI0E5ODEyRSIvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgMy41NTIsLTIuMzg1IDExLjEsMCBRIDMuNTUyLDIuMzg1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljc5IDkuNjApIHJvdGF0ZSg5OS42MykiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSAzLjkzNjAwMDAwMDAwMDAwMDQsLTIuNjA1IDEyLjMsMCBRIDMuOTM2MDAwMDAwMDAwMDAwNCwyLjYwNSAwLDAgWiIgZmlsbD0iIzIzM0M1NSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44OCAxMy43NCkgcm90YXRlKDI2LjgyKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDQuMzIsLTIuODI1IDEzLjUsMCBRIDQuMzIsMi44MjUgMCwwIFoiIGZpbGw9IiNDREIzNzQiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMzIgMTcuNzIpIHJvdGF0ZSg5MC4wOSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA0LjcwNCwtMy4wNDUgMTQuNywwIFEgNC43MDQsMy4wNDUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjEyIDIxLjU1KSByb3RhdGUoMTcuNTEpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS4wODgsLTMuMjY1IDE1LjksMCBRIDUuMDg4LDMuMjY1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yOCAyNS4yMikgcm90YXRlKDgxLjExKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDUuNDcyLC0zLjQ4NTAwMDAwMDAwMDAwMDMgMTcuMSwwIFEgNS40NzIsMy40ODUwMDAwMDAwMDAwMDAzIDAsMCBaIiBmaWxsPSIjMjMzQzU1IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC44MCAyOC43NCkgcm90YXRlKDguOTUpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS44NTYwMDAwMDAwMDAwMDEsLTMuNzA1IDE4LjMsMCBRIDUuODU2MDAwMDAwMDAwMDAxLDMuNzA1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAzMi4xMSkgcm90YXRlKDczLjAzKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDYuMjQsLTMuOTI1IDE5LjUsMCBRIDYuMjQsMy45MjUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjkyIDM1LjMyKSByb3RhdGUoMS4zOCkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSwtNC4xNDUgMjAuNzAwMDAwMDAwMDAwMDAzLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSw0LjE0NSAwLDAgWiIgZmlsbD0iI0E5ODEyRSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuNTIgMzguMzgpIHJvdGF0ZSg2NS45OSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA3LjAwOCwtNC4zNjUgMjEuOSwwIFEgNy4wMDgsNC4zNjUgMCwwIFoiIGZpbGw9IiMyMzNDNTUiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjQ3IDQxLjI4KSByb3RhdGUoLTUuMTQpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNy4zOTIsLTQuNTg1IDIzLjEsMCBRIDcuMzkyLDQuNTg1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS43OCA0NC4wNCkgcm90YXRlKDU5Ljk3KSIgLz4KICA8L2c+Cjwvc3ZnPg==");
  background-position: top -2% left -2%, top -2% right -2%, bottom -2% left -2%, bottom -2% right -2%;
  background-size: 26% auto, 26% auto, 26% auto, 26% auto;
}
.tpl-ceremonial .cover-header{position:relative;z-index:1}
.tpl-ceremonial .cover-middle{position:relative;z-index:1}
.tpl-ceremonial .cover-footer{position:relative;z-index:1}
.tpl-ceremonial .cover-logo{
  width:24%;
  box-shadow:0 0 0 1px var(--brass),0 0 0 4px #fff,0 0 0 5px var(--brass-soft),0 6px 16px -6px rgba(24,42,59,.4);
}
.tpl-ceremonial .cover-institution{color:var(--navy-deep);letter-spacing:.8px;font-size:19px}
.tpl-ceremonial .cover-department{color:var(--navy);font-weight:600;letter-spacing:1px}
.tpl-ceremonial .cover-header-rule{width:56%;height:1px;background:var(--brass);margin:14px auto 0;position:relative}
.tpl-ceremonial .cover-header-rule:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--brass);transform:translate(-50%,-50%) rotate(45deg)}
.tpl-ceremonial .cover-kicker{text-transform:uppercase;font-style:normal;font-weight:600;letter-spacing:1.6px;font-size:10.5px;color:var(--brass)}
.tpl-ceremonial .cover-topic{color:var(--navy-deep);font-size:23px}
.tpl-ceremonial .cover-rule{background:var(--brass)}
.tpl-ceremonial .cover-course-row span:first-child{color:var(--brass);text-transform:uppercase;font-size:10px;letter-spacing:.5px}
.tpl-ceremonial .cover-course-row span:last-child{color:var(--navy-deep);font-weight:700}
.tpl-ceremonial .cover-course{text-align:center}
.tpl-ceremonial .cover-course-row{justify-content:center}
.tpl-ceremonial .party{
  --accent:var(--brass);
  --accent-rgb:var(--brass-rgb);
  background:#eef1f6;
  border-radius:16% / 26%;
  border:1px solid var(--brass);
}
.tpl-ceremonial .party h4{color:var(--navy-deep);letter-spacing:.6px}
.tpl-ceremonial .party-rows-wrap{background:#fff;box-shadow:none;border:1px solid rgba(var(--brass-rgb),.35)}
.tpl-ceremonial .party-label{color:var(--navy-deep)}
.tpl-ceremonial .cover-date{color:var(--navy);font-weight:600;letter-spacing:.2px}

/* ---------- builder ---------- */
.build-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.build-form{display:flex;flex-direction:column;gap:26px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 6px;margin:0}
legend{font-family:var(--display);font-size:14px;font-weight:600;padding:0 8px;color:var(--navy)}
.build-form label{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-bottom:14px}
.build-form label span{font-weight:400;color:#8b968f}
.build-form input[type="text"],.build-form input[type="date"]{width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-family:var(--body);color:var(--ink);background:#fff}
.build-form input:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.logo-input{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.logo-input input[type="file"]{font-size:12px;max-width:150px}
.form-foot{display:flex;gap:10px;flex-wrap:wrap}

.build-preview{position:sticky;top:98px}
.preview-toolbar{margin-bottom:16px}
.template-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;font-size:12.8px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.chip:hover{border-color:var(--brass-soft);color:var(--ink)}
.chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.preview-stage{max-width:min(360px,100%);margin:0 auto;box-shadow:0 24px 50px -22px rgba(24,42,59,.4);position:relative;aspect-ratio:210/297;overflow:hidden;container-type:inline-size}
/* The editable preview must render at the SAME physical size as the
   exported file (buildExportNode() in app.js uses a 794px-wide node,
   i.e. 210mm @96dpi) — otherwise the fixed px font-sizes inside
   .cover-* look proportionally different on screen than in the
   downloaded PNG/PDF. So, like .mini-cover above, we lay the cover
   out at its true 210mm width and only visually shrink it with a
   CSS transform to fit the narrow preview card. */
#coverPreview.cover-paper{position:absolute;top:0;left:0;width:793.7008px;height:1122.5197px;transform-origin:top left;transform:scale(var(--preview-scale,.4534));will-change:transform}
.preview-actions{display:flex;gap:12px;margin-top:20px;max-width:min(360px,100%);margin-left:auto;margin-right:auto;flex-wrap:wrap}
.preview-actions .btn{flex:1}
.preview-note{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:10px;min-height:16px}


/* Responsive preview/gallery scaling: the cover is always laid out at the
   same 794x1123px A4 coordinate system used by export, then only scaled
   visually to fit its container. This prevents half-width/blank-area bugs
   caused by mixing mm and container units. */
#coverPreview.cover-paper, .mini-cover{box-sizing:border-box;}

/* ---------- about page ---------- */
.about-hero{max-width:1220px;margin:auto;padding:70px 6% 30px;display:grid;grid-template-columns:.62fr 1.38fr;gap:56px;align-items:center}
.about-portrait{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:linear-gradient(155deg,var(--navy),var(--navy-deep));display:grid;place-items:center;box-shadow:0 0 0 8px var(--card),0 24px 50px -24px rgba(24,42,59,.5)}
.about-portrait img{width:100%;height:100%;object-fit:cover}
.about-portrait span{font-family:var(--display);font-weight:600;font-size:clamp(40px,7vw,64px);color:#fff;letter-spacing:.5px}
.about-eyebrow{font-size:13.5px;color:var(--seal);font-weight:600;margin-bottom:14px}
.about-copy h1{font-size:clamp(30px,3.8vw,44px);line-height:1.15;letter-spacing:-.4px;max-width:640px}
.about-role{margin-top:10px;font-size:15.5px;color:var(--ink-soft);font-weight:500}
.about-bio{margin-top:20px;font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:600px}
.about-bio + .about-bio{margin-top:14px}
.about-socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.social-link{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:30px;border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:600;color:var(--ink);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,background .15s ease}
.social-link svg{width:17px;height:17px;flex:none}
.social-link:hover{transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(24,42,59,.4);border-color:transparent;background:var(--navy);color:#fff}

.about-grid{max-width:1220px;margin:60px auto 0;padding:0 6% 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.about-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.about-card h3{font-size:16px;margin-bottom:10px}
.about-card p{font-size:13.8px;line-height:1.7;color:var(--ink-soft)}

.contact-band{max-width:1220px;margin:70px auto 0;padding:0 6% 90px}
.contact-card{background:var(--paper-alt);border:1px solid var(--line);border-radius:8px;padding:50px 6%;text-align:center}
.contact-card h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.4px}
.contact-card p{margin-top:12px;color:var(--ink-soft);font-size:15px;max-width:460px;margin-left:auto;margin-right:auto}
.contact-card .about-socials{justify-content:center;margin-top:26px}
.contact-card .social-link{background:#fff}

/* ---------- cta / footer ---------- */
.cta{margin:20px auto 100px;max-width:1108px;border-radius:6px;padding:56px 60px;background:var(--navy-deep);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{color:#fff;max-width:600px}
.cta p{color:#c9d3da;margin-top:10px}
footer{border-top:1px solid var(--line);padding:36px 6%;display:flex;align-items:center;justify-content:space-between;color:var(--ink-soft);font-size:12.5px}
footer .brand{color:var(--ink);font-size:16px}
footer small{color:#9aa89f}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hero{gap:44px}
  .cta{margin-left:5%;margin-right:5%}
}
@media(max-width:760px){
  .about-hero{grid-template-columns:1fr;text-align:center;padding-top:52px;gap:28px}
  .about-portrait{width:170px;margin:0 auto}
  .about-copy h1,.about-bio{max-width:520px;margin-left:auto;margin-right:auto}
  .about-socials{justify-content:center}
  .about-grid{grid-template-columns:1fr;margin-top:44px}
  .contact-card{padding:40px 6%}
}
@media(max-width:980px){
  .build-grid{grid-template-columns:1fr;gap:40px}
  .build-preview{position:static}
  .preview-stage,.preview-actions{max-width:min(420px,100%)}
}
@media(max-width:850px){
  .nav-toggle{display:flex}
  .navbar .nav-btn:not(.nav-btn-mobile){display:none}
  .navbar nav{
    position:absolute;top:100%;left:0;right:0;
    display:flex;flex-direction:column;gap:2px;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:10px 6% 18px;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .22s ease,opacity .18s ease;
  }
  .navbar nav a{padding:12px 4px;border-radius:var(--radius)}
  .navbar nav a:hover{background:var(--paper-alt)}
  .nav-btn-mobile{display:inline-flex;margin-top:6px;width:fit-content}
  body.nav-open .navbar nav{max-height:320px;opacity:1}
  .hero{grid-template-columns:1fr;text-align:center;padding-top:52px;padding-bottom:64px}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero h1,.hero-lede{max-width:560px}
  .hero-actions,.hero-trust{justify-content:center}
  .hero-visual{margin-top:8px}
  .how,.templates,.build{padding-top:64px;padding-bottom:64px}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline:before{display:none}
  .template-grid{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .cta{flex-direction:column;text-align:center;margin-left:5%;margin-right:5%;padding:40px}
  .cta .btn{width:100%;max-width:280px}
  footer{flex-direction:column;gap:14px;text-align:center}
}
@media(max-width:600px){
  .section-head p{font-size:14.5px}
  fieldset{padding:16px 16px 4px}
}
/* below tablet width the 2-up thumbnails scale down so far the layout
   reads as a grey smudge — switch to one full-size, legible card at a time */
@media(max-width:700px){
  .template-grid{grid-template-columns:1fr;gap:22px;max-width:380px;margin:0 auto}
  .mini-frame{margin-bottom:16px}
  .template-card{padding:16px}
}
@media(max-width:520px){
  .navbar{padding:0 4%}
  .brand-name{font-size:17px}
  .timeline{grid-template-columns:1fr}
  .hero{padding-left:5%;padding-right:5%}
  .hero-stack{width:240px}
  .hero-cover{width:240px}
  .hero-actions{flex-direction:column;align-self:stretch}
  .hero-actions .btn{width:100%}
  .hero-trust{gap:10px 16px}
  .logo-input{flex-direction:column;align-items:stretch}
  .logo-input input[type="file"]{max-width:100%}
  .form-foot{flex-direction:column}
  .form-foot .btn{width:100%}
  .preview-actions{flex-direction:column}
}
@media(max-width:400px){
  .template-grid{max-width:none}
}

/* ---------- premium cover system ---------- */
.cover-paper{
  --cover-ink:#18222c;
  --cover-muted:#6b7379;
  --cover-accent:#9b7628;
  --cover-accent-soft:#d9c79b;
  background:#fff;
  color:var(--cover-ink);
  isolation:isolate;
}
.cover-frame{overflow:hidden}
.cover-header,.cover-middle,.cover-footer{position:relative;z-index:2}
.cover-institution,.cover-topic,.cover-department,.party-value{overflow-wrap:anywhere;word-break:break-word}
.cover-institution{text-transform:none;max-width:92%;margin-left:auto;margin-right:auto}
.cover-department{max-width:90%;margin-left:auto;margin-right:auto}
.cover-logo{background:#fff}
.cover-logo img{object-fit:contain}
.cover-course-row{align-items:baseline}
.party{border-radius:3px}
.party-rows-wrap{border-radius:2px}
.party-value{min-width:0}
.cover-paper:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 36%, rgba(20,26,22,0) 58%, rgba(20,26,22,.05) 100%);
}
.cover-header,.cover-middle,.cover-footer{z-index:2}
.cover-logo{box-shadow:0 0 0 1px var(--line),0 0 0 4px #fff,0 0 0 5px rgba(0,0,0,.03),0 6px 16px -7px rgba(30,38,34,.4)}


/* Classic — refined academic editorial */
.tpl-classic .cover-frame{
  border:1px solid #c9b98e;
  padding:8.5% 8% 7%;
  background:linear-gradient(180deg,#fff 0%,#fffdf9 100%);
}
.tpl-classic .cover-frame:before{
  inset:2.7%;
  border:1px solid #e5dcc5;
}
.tpl-classic .cover-frame:after{
  content:"";position:absolute;inset:4.1%;border:1px solid rgba(201,185,142,.35);pointer-events:none;
}
.tpl-classic .cover-logo{width:17%;margin-bottom:4%}
.tpl-classic .cover-institution{font-size:19px;letter-spacing:.15px}
.tpl-classic .cover-department{font-size:9.8px;letter-spacing:1.1px}
.tpl-classic .cover-header-rule{width:48px;background:#b99a50;margin-top:13px}
.tpl-classic .cover-middle{margin-top:12.5%}
.tpl-classic .cover-kicker{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-style:normal}
.tpl-classic .cover-topic{font-size:25px;letter-spacing:-.35px}
.tpl-classic .cover-rule{margin:19px auto;width:52px;background:#b99a50}
.tpl-classic .cover-course-row span:first-child{color:#8b7750}
.tpl-classic .cover-footer{margin-top:12.5%}
.tpl-classic .party{--accent:#9b7628;--accent-rgb:155,118,40;background:#fbf8ef;border:1px solid #dfd2b4;padding:6% 5% 5%}
.tpl-classic .party-rows-wrap{background:#fff;border:1px solid #eee6d6;box-shadow:none}
.tpl-classic .cover-date{letter-spacing:.15px}
.tpl-classic .cover-frame{
  background-image:linear-gradient(180deg,#fff 0%,#fffdf9 100%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMCkiPgogIDxwYXRoIGQ9Ik0gMi4wMCwyLjAwIEwgMi43Miw0LjMxIEwgMy41Myw2LjU4IEwgNC40NCw4LjgxIEwgNS40NCwxMS4wMCBMIDYuNTUsMTMuMTUgTCA3Ljc1LDE1LjI1IEwgOS4wNSwxNy4zMSBMIDEwLjQ0LDE5LjMzIEwgMTEuOTQsMjEuMzEgTCAxMy41MywyMy4yNSBMIDE1LjIyLDI1LjE1IEwgMTcuMDAsMjcuMDAgTCAxOC44OCwyOC44MSBMIDIwLjg2LDMwLjU4IEwgMjIuOTQsMzIuMzEgTCAyNS4xMSwzNC4wMCBMIDI3LjM4LDM1LjY1IEwgMjkuNzUsMzcuMjUgTCAzMi4yMiwzOC44MSBMIDM0Ljc4LDQwLjMzIEwgMzcuNDQsNDEuODEgTCA0MC4xOSw0My4yNSBMIDQzLjA1LDQ0LjY1IEwgNDYuMDAsNDYuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0NEQjM3NCIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuODUiLz4KICA8Y2lyY2xlIGN4PSIxLjUiIGN5PSIxLjUiIHI9IjIuNiIgZmlsbD0iI0E5ODEyRSIvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgMy41NTIsLTIuMzg1IDExLjEsMCBRIDMuNTUyLDIuMzg1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljc5IDkuNjApIHJvdGF0ZSg5OS42MykiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSAzLjkzNjAwMDAwMDAwMDAwMDQsLTIuNjA1IDEyLjMsMCBRIDMuOTM2MDAwMDAwMDAwMDAwNCwyLjYwNSAwLDAgWiIgZmlsbD0iIzIzM0M1NSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44OCAxMy43NCkgcm90YXRlKDI2LjgyKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDQuMzIsLTIuODI1IDEzLjUsMCBRIDQuMzIsMi44MjUgMCwwIFoiIGZpbGw9IiNDREIzNzQiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMzIgMTcuNzIpIHJvdGF0ZSg5MC4wOSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA0LjcwNCwtMy4wNDUgMTQuNywwIFEgNC43MDQsMy4wNDUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjEyIDIxLjU1KSByb3RhdGUoMTcuNTEpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS4wODgsLTMuMjY1IDE1LjksMCBRIDUuMDg4LDMuMjY1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yOCAyNS4yMikgcm90YXRlKDgxLjExKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDUuNDcyLC0zLjQ4NTAwMDAwMDAwMDAwMDMgMTcuMSwwIFEgNS40NzIsMy40ODUwMDAwMDAwMDAwMDAzIDAsMCBaIiBmaWxsPSIjMjMzQzU1IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC44MCAyOC43NCkgcm90YXRlKDguOTUpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS44NTYwMDAwMDAwMDAwMDEsLTMuNzA1IDE4LjMsMCBRIDUuODU2MDAwMDAwMDAwMDAxLDMuNzA1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAzMi4xMSkgcm90YXRlKDczLjAzKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDYuMjQsLTMuOTI1IDE5LjUsMCBRIDYuMjQsMy45MjUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjkyIDM1LjMyKSByb3RhdGUoMS4zOCkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSwtNC4xNDUgMjAuNzAwMDAwMDAwMDAwMDAzLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSw0LjE0NSAwLDAgWiIgZmlsbD0iI0E5ODEyRSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuNTIgMzguMzgpIHJvdGF0ZSg2NS45OSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA3LjAwOCwtNC4zNjUgMjEuOSwwIFEgNy4wMDgsNC4zNjUgMCwwIFoiIGZpbGw9IiMyMzNDNTUiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjQ3IDQxLjI4KSByb3RhdGUoLTUuMTQpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNy4zOTIsLTQuNTg1IDIzLjEsMCBRIDcuMzkyLDQuNTg1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS43OCA0NC4wNCkgcm90YXRlKDU5Ljk3KSIgLz4KICA8L2c+Cjwvc3ZnPg=="), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSwwLDAsMSwxMDAsMCkiPgogIDxwYXRoIGQ9Ik0gMi4wMCwyLjAwIEwgMi43Miw0LjMxIEwgMy41Myw2LjU4IEwgNC40NCw4LjgxIEwgNS40NCwxMS4wMCBMIDYuNTUsMTMuMTUgTCA3Ljc1LDE1LjI1IEwgOS4wNSwxNy4zMSBMIDEwLjQ0LDE5LjMzIEwgMTEuOTQsMjEuMzEgTCAxMy41MywyMy4yNSBMIDE1LjIyLDI1LjE1IEwgMTcuMDAsMjcuMDAgTCAxOC44OCwyOC44MSBMIDIwLjg2LDMwLjU4IEwgMjIuOTQsMzIuMzEgTCAyNS4xMSwzNC4wMCBMIDI3LjM4LDM1LjY1IEwgMjkuNzUsMzcuMjUgTCAzMi4yMiwzOC44MSBMIDM0Ljc4LDQwLjMzIEwgMzcuNDQsNDEuODEgTCA0MC4xOSw0My4yNSBMIDQzLjA1LDQ0LjY1IEwgNDYuMDAsNDYuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0NEQjM3NCIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuODUiLz4KICA8Y2lyY2xlIGN4PSIxLjUiIGN5PSIxLjUiIHI9IjIuNiIgZmlsbD0iI0E5ODEyRSIvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgMy41NTIsLTIuMzg1IDExLjEsMCBRIDMuNTUyLDIuMzg1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljc5IDkuNjApIHJvdGF0ZSg5OS42MykiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSAzLjkzNjAwMDAwMDAwMDAwMDQsLTIuNjA1IDEyLjMsMCBRIDMuOTM2MDAwMDAwMDAwMDAwNCwyLjYwNSAwLDAgWiIgZmlsbD0iIzIzM0M1NSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44OCAxMy43NCkgcm90YXRlKDI2LjgyKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDQuMzIsLTIuODI1IDEzLjUsMCBRIDQuMzIsMi44MjUgMCwwIFoiIGZpbGw9IiNDREIzNzQiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMzIgMTcuNzIpIHJvdGF0ZSg5MC4wOSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA0LjcwNCwtMy4wNDUgMTQuNywwIFEgNC43MDQsMy4wNDUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjEyIDIxLjU1KSByb3RhdGUoMTcuNTEpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS4wODgsLTMuMjY1IDE1LjksMCBRIDUuMDg4LDMuMjY1IDAsMCBaIiBmaWxsPSIjQTk4MTJFIiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yOCAyNS4yMikgcm90YXRlKDgxLjExKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDUuNDcyLC0zLjQ4NTAwMDAwMDAwMDAwMDMgMTcuMSwwIFEgNS40NzIsMy40ODUwMDAwMDAwMDAwMDAzIDAsMCBaIiBmaWxsPSIjMjMzQzU1IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC44MCAyOC43NCkgcm90YXRlKDguOTUpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNS44NTYwMDAwMDAwMDAwMDEsLTMuNzA1IDE4LjMsMCBRIDUuODU2MDAwMDAwMDAwMDAxLDMuNzA1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi42OCAzMi4xMSkgcm90YXRlKDczLjAzKSIgLz4KICA8cGF0aCBkPSJNIDAsMCBRIDYuMjQsLTMuOTI1IDE5LjUsMCBRIDYuMjQsMy45MjUgMCwwIFoiIGZpbGw9IiMxODJBM0IiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjkyIDM1LjMyKSByb3RhdGUoMS4zOCkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSwtNC4xNDUgMjAuNzAwMDAwMDAwMDAwMDAzLDAgUSA2LjYyNDAwMDAwMDAwMDAwMSw0LjE0NSAwLDAgWiIgZmlsbD0iI0E5ODEyRSIgb3BhY2l0eT0iMC45NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuNTIgMzguMzgpIHJvdGF0ZSg2NS45OSkiIC8+CiAgPHBhdGggZD0iTSAwLDAgUSA3LjAwOCwtNC4zNjUgMjEuOSwwIFEgNy4wMDgsNC4zNjUgMCwwIFoiIGZpbGw9IiMyMzNDNTUiIG9wYWNpdHk9IjAuOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjQ3IDQxLjI4KSByb3RhdGUoLTUuMTQpIiAvPgogIDxwYXRoIGQ9Ik0gMCwwIFEgNy4zOTIsLTQuNTg1IDIzLjEsMCBRIDcuMzkyLDQuNTg1IDAsMCBaIiBmaWxsPSIjQ0RCMzc0IiBvcGFjaXR5PSIwLjk1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS43OCA0NC4wNCkgcm90YXRlKDU5Ljk3KSIgLz4KICA8L2c+Cjwvc3ZnPg==");
  background-repeat:no-repeat;
  background-position:0 0, top -1.5% left -1.5%, top -1.5% right -1.5%;
  background-size:auto, 17% auto, 17% auto;
}
.tpl-classic .cover-header,.tpl-classic .cover-middle,.tpl-classic .cover-footer{position:relative;z-index:2}


/* Modern — luxury editorial / corporate */
.tpl-modern .cover-frame{
  padding:8.5% 9% 7% 12%;
  border-left:8px solid #203a54;
  background:linear-gradient(135deg,#fff 0%,#fbfcfd 100%);
}
.tpl-modern .cover-frame:after{
  content:"";position:absolute;right:0;top:0;width:30%;height:100%;background:linear-gradient(180deg,rgba(32,58,84,.035),rgba(32,58,84,0));pointer-events:none;
}
.tpl-modern .cover-header{text-align:left}
.tpl-modern .cover-logo{width:15%;margin:0 0 4.5%;border-radius:4px;box-shadow:0 0 0 1px #dfe4e8}
.tpl-modern .cover-institution{margin:0;max-width:88%;font-size:19px;letter-spacing:.1px}
.tpl-modern .cover-department{margin:5px 0 0;max-width:88%;font-size:9.6px;letter-spacing:1px}
.tpl-modern .cover-header-rule{margin:12px 0 0;width:74px;height:2px;background:#203a54;opacity:1}
.tpl-modern .cover-middle{margin-top:18%;text-align:left}
.tpl-modern .cover-kicker{font-style:normal;text-transform:uppercase;letter-spacing:1.7px;font-size:9.5px;font-weight:700;color:#718092}
.tpl-modern .cover-topic{font-size:27px;line-height:1.22;max-width:88%;letter-spacing:-.55px}
.tpl-modern .cover-rule{width:42px;margin:18px 0;background:#203a54}
.tpl-modern .cover-course-row{font-size:10.5px}
.tpl-modern .cover-course-row span:first-child{color:#718092;min-width:80px}
.tpl-modern .cover-footer{margin-top:16%}
.tpl-modern .party{--accent:#203a54;--accent-rgb:32,58,84;background:#f5f7f9;border:1px solid #d9e0e6;padding:6% 5% 5%}
.tpl-modern .party-rows-wrap{background:#fff;border:1px solid #e4e8ec;box-shadow:none}
.tpl-modern .cover-date{text-align:left;color:#718092}
.tpl-modern .cover-frame{border-left:none}
.tpl-modern .cover-frame:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:8px;
  background:linear-gradient(180deg,#2c4d6e 0%,#203a54 55%,#9b7628 100%);
}
.tpl-modern .cover-logo{box-shadow:0 0 0 1px #dfe4e8,0 2px 10px -4px rgba(32,58,84,.35)}


/* Minimal — museum/editorial */
.tpl-minimal .cover-frame{
  padding:10% 10% 7.5%;
  background:#fff;
}
.tpl-minimal .cover-frame:before{
  content:"";position:absolute;left:10%;right:10%;top:8%;bottom:7%;border-top:1px solid #dfe2df;border-bottom:1px solid #dfe2df;pointer-events:none;
}
.tpl-minimal .cover-logo{width:13%;margin-bottom:4%;box-shadow:none;border:0}
.tpl-minimal .cover-institution{font-size:18px;letter-spacing:.3px}
.tpl-minimal .cover-department{font-size:9.5px;letter-spacing:1.25px}
.tpl-minimal .cover-header-rule{display:block;width:22px;background:#1f2925;margin-top:12px}
.tpl-minimal .cover-middle{margin-top:17%}
.tpl-minimal .cover-kicker{font-size:9.5px;text-transform:uppercase;letter-spacing:2px;font-style:normal;color:#7b817d}
.tpl-minimal .cover-topic{font-size:24px;font-weight:500;line-height:1.28;letter-spacing:-.25px}
.tpl-minimal .cover-rule{width:24px;margin:18px auto;background:#1f2925}
.tpl-minimal .cover-course-row{font-size:10px}
.tpl-minimal .cover-course-row span:first-child{min-width:78px;color:#858c87;text-transform:uppercase;font-size:8.5px;letter-spacing:.8px}
.tpl-minimal .cover-footer{margin-top:17%}
.tpl-minimal .party{--accent:#4d5752;--accent-rgb:77,87,82;background:#fafbf9;border:1px solid #dfe3df;padding:6% 5% 5%}
.tpl-minimal .party h4{letter-spacing:1px}
.tpl-minimal .party-rows-wrap{background:#fff;border:1px solid #e7eae7;box-shadow:none}
.tpl-minimal .cover-date{color:#777e79}
.tpl-minimal .cover-paper:before{
  content:"";position:absolute;z-index:1;pointer-events:none;inset:5.5%;
  background-image:
    linear-gradient(#1f2925,#1f2925), linear-gradient(#1f2925,#1f2925),
    linear-gradient(#1f2925,#1f2925), linear-gradient(#1f2925,#1f2925),
    linear-gradient(#1f2925,#1f2925), linear-gradient(#1f2925,#1f2925),
    linear-gradient(#1f2925,#1f2925), linear-gradient(#1f2925,#1f2925);
  background-repeat:no-repeat;
  opacity:.55;
  background-size:1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
}


/* Ceremonial — premium university/certificate */
.tpl-ceremonial .cover-frame{
  border:2px solid #b28a35;
  padding:9.5% 8% 7%;
  background:linear-gradient(180deg,#fffefa 0%,#fff 72%,#fdfbf5 100%);
}
.tpl-ceremonial .cover-frame:before{inset:2.4%;border:1px solid rgba(178,138,53,.62)}
.tpl-ceremonial .cover-logo{width:17%;margin-bottom:4%;box-shadow:0 0 0 1px #d9c58f,0 0 0 4px #fff}
.tpl-ceremonial .cover-institution{font-size:20px;letter-spacing:.15px;color:#1b3044}
.tpl-ceremonial .cover-department{font-size:9.8px;letter-spacing:1.3px;color:#53677a}
.tpl-ceremonial .cover-header-rule{width:62px;background:#b28a35;margin-top:13px}
.tpl-ceremonial .cover-middle{margin-top:14%}
.tpl-ceremonial .cover-kicker{font-size:9.8px;letter-spacing:2px;text-transform:uppercase;font-style:normal;font-weight:600;color:#a07b32}
.tpl-ceremonial .cover-topic{font-size:26px;line-height:1.24;color:#1b3044;letter-spacing:-.35px}
.tpl-ceremonial .cover-rule{width:58px;margin:19px auto;background:#b28a35}
.tpl-ceremonial .cover-course-row{font-size:10.5px}
.tpl-ceremonial .cover-course-row span:first-child{color:#a07b32;min-width:80px}
.tpl-ceremonial .cover-footer{margin-top:13.5%}
.tpl-ceremonial .party{--accent:#8e6c2c;--accent-rgb:142,108,44;background:rgba(178,138,53,.055);border:1px solid rgba(178,138,53,.32);padding:6% 5% 5%}
.tpl-ceremonial .party-rows-wrap{background:#fff;border:1px solid rgba(178,138,53,.2);box-shadow:none}
.tpl-ceremonial .cover-date{color:#53677a}
.tpl-ceremonial .cover-header{position:relative}
.tpl-ceremonial .cover-header:before{
  content:"";position:absolute;top:-4%;left:50%;width:46%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(178,138,53,.16) 0%, rgba(178,138,53,0) 72%);
}
.tpl-ceremonial .cover-logo{position:relative;z-index:1}


/* Export-safe sizing: the export node is an exact A4 pixel canvas. */
.export-a4{width:794px !important;height:1123px !important;aspect-ratio:auto !important;transform:none !important;position:fixed !important;left:-10000px !important;top:0 !important;overflow:hidden !important}
@media (max-width:850px){
  .cover-topic{font-size:22px}
  .tpl-classic .cover-topic{font-size:52px}
  .tpl-classic .cover-institution{font-size:41px}
}

/* ================================================================
   A4 reference sizing — applied consistently to ALL cover templates
   The classic reference screenshot is the typography/spacing target.
   These are A4 pixel values (96dpi) and therefore stay identical in
   the live preview and the 794x1123 export canvas.
   ================================================================ */
.cover-paper .cover-logo{width:17%;}
.cover-paper .cover-institution{font-size:41px;line-height:1.15;letter-spacing:.15px;}
.cover-paper .cover-department{font-size:18px;line-height:1.25;margin-top:7px;letter-spacing:.6px;}
.cover-paper .cover-header-rule{margin-top:13px;}
.cover-paper .cover-middle{margin-top:12.5%;}
.cover-paper .cover-kicker{
  font-size:26px;
  line-height:1.2;
  margin-bottom:29px;
  letter-spacing:.3px;
  text-transform:none;
  font-style:italic;
  font-weight:400;
}
.cover-paper .cover-topic{font-size:52px;line-height:1.15;letter-spacing:-.35px;}
.cover-paper .cover-rule{margin:46px auto 52px;width:84px;}
.cover-paper .cover-course{gap:7px;}
.cover-paper .cover-course-row{font-size:24px;line-height:1.15;gap:7px;}
.cover-paper .cover-course-row span:first-child{min-width:128px;}
.cover-paper .cover-footer{margin-top:1.5%;}
.cover-paper .party{padding:8.5% 6% 6.5%;}
.cover-paper .party h4{font-size:26px;line-height:1.15;margin-bottom:5%;}
.cover-paper .party-rows{column-gap:8px;row-gap:8px;font-size:24px;line-height:1.25;}
.cover-paper .cover-date{font-size:17px;line-height:1.3;margin-top:24px;}

/* Keep each template's personality, but use the same reference scale. */
.tpl-modern .cover-institution,
.tpl-minimal .cover-institution,
.tpl-ceremonial .cover-institution{font-size:41px;}
.tpl-modern .cover-department,
.tpl-minimal .cover-department,
.tpl-ceremonial .cover-department{font-size:18px;}
.tpl-modern .cover-kicker,
.tpl-minimal .cover-kicker,
.tpl-ceremonial .cover-kicker{font-size:26px;line-height:1.2;}
.tpl-modern .cover-topic,
.tpl-minimal .cover-topic,
.tpl-ceremonial .cover-topic{font-size:52px;line-height:1.15;}
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row{font-size:30px;line-height:1.1;}
.tpl-modern .party h4,
.tpl-minimal .party h4,
.tpl-ceremonial .party h4{font-size:26px;line-height:1.15;}
.tpl-modern .party-rows,
.tpl-minimal .party-rows,
.tpl-ceremonial .party-rows{font-size:24px;line-height:1.25;}
.tpl-modern .cover-date,
.tpl-minimal .cover-date,
.tpl-ceremonial .cover-date{font-size:17px;line-height:1.3;}

/* Reference-like logo size/shape on every template. */
.tpl-modern .cover-logo,
.tpl-minimal .cover-logo,
.tpl-ceremonial .cover-logo{width:17%;}

/* Responsive preview: the A4 canvas itself scales; don't reduce typography
   for the reference-sized cover. Long text is handled by fitCoverText(). */
@media (max-width:850px){
  .tpl-classic .cover-topic,
  .tpl-modern .cover-topic,
  .tpl-minimal .cover-topic,
  .tpl-ceremonial .cover-topic{font-size:52px;}
  .tpl-classic .cover-institution,
  .tpl-modern .cover-institution,
  .tpl-minimal .cover-institution,
  .tpl-ceremonial .cover-institution{font-size:41px;}
}

/* ================================================================
   Final balanced A4 typography/layout
   Match the supplied reference cover without overflowing in gallery,
   editor, mobile preview, or exported A4.
   ================================================================ */
.cover-paper .cover-institution{font-size:28px;line-height:1.18;}
.cover-paper .cover-department{font-size:12px;line-height:1.25;margin-top:6px;}
.cover-paper .cover-header-rule{margin-top:12px;}
.cover-paper .cover-middle{margin-top:11%;}
.cover-paper .cover-kicker{font-size:14px;line-height:1.25;margin-bottom:15px;letter-spacing:.25px;}
.cover-paper .cover-topic{font-size:36px;line-height:1.16;letter-spacing:-.25px;max-width:88%;margin-left:auto;margin-right:auto;}
.cover-paper .cover-rule{margin:24px auto 34px;width:62px;}
.cover-paper .cover-course{gap:7px;}
.cover-paper .cover-course-row{font-size:14px;line-height:1.25;gap:7px;}
.cover-paper .cover-course-row span:first-child{min-width:112px;}
.cover-paper .cover-footer{margin-top:3%;}
.cover-paper .cover-parties{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch;}
.cover-paper .party{min-width:0;padding:5.5% 5% 5%;}
.cover-paper .party h4{font-size:15px;line-height:1.15;margin-bottom:6%;white-space:nowrap;}
.cover-paper .party-rows-wrap{padding:7% 7%;min-width:0;}
.cover-paper .party-rows{grid-template-columns:minmax(0,38%) 10px minmax(0,1fr);column-gap:6px;row-gap:7px;font-size:11.5px;line-height:1.35;}
.cover-paper .party-label{white-space:nowrap;}
.cover-paper .party-value{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none;}
.cover-paper .cover-date{font-size:11.5px;line-height:1.3;margin-top:18px;}

/* Keep each design's character while using the same readable A4 scale. */
.tpl-modern .cover-institution,
.tpl-minimal .cover-institution,
.tpl-ceremonial .cover-institution{font-size:28px;}
.tpl-modern .cover-department,
.tpl-minimal .cover-department,
.tpl-ceremonial .cover-department{font-size:12px;}
.tpl-modern .cover-kicker,
.tpl-minimal .cover-kicker,
.tpl-ceremonial .cover-kicker{font-size:14px;line-height:1.25;}
.tpl-modern .cover-topic,
.tpl-minimal .cover-topic,
.tpl-ceremonial .cover-topic{font-size:36px;line-height:1.16;}
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row{font-size:14px;line-height:1.25;}
.tpl-modern .party h4,
.tpl-minimal .party h4,
.tpl-ceremonial .party h4{font-size:15px;line-height:1.15;}
.tpl-modern .party-rows,
.tpl-minimal .party-rows,
.tpl-ceremonial .party-rows{font-size:11.5px;line-height:1.35;}
.tpl-modern .cover-date,
.tpl-minimal .cover-date,
.tpl-ceremonial .cover-date{font-size:11.5px;line-height:1.3;}

/* Gallery cards: never let a long value squeeze into letter-by-letter columns. */
.mini-cover .party-rows{grid-template-columns:minmax(0,38%) 9px minmax(0,1fr);}
.mini-cover .party-value{overflow-wrap:break-word;word-break:normal;hyphens:none;}

/* Mobile: keep the A4 canvas ratio and let the whole cover scale as one unit. */
@media (max-width:850px){
  .cover-paper .cover-institution,
  .tpl-modern .cover-institution,
  .tpl-minimal .cover-institution,
  .tpl-ceremonial .cover-institution{font-size:28px;}
  .cover-paper .cover-topic,
  .tpl-modern .cover-topic,
  .tpl-minimal .cover-topic,
  .tpl-ceremonial .cover-topic{font-size:36px;}
  .cover-paper .cover-parties{gap:14px;}
}

/* ================================================================
   FINAL REFERENCE LOCK
   Keep the same visual scale as the supplied reference cover.
   Only party-column wrapping is corrected: words break at spaces,
   never in the middle of a word.
   ================================================================ */
.cover-paper .cover-institution{font-size:41px;line-height:1.15;letter-spacing:.15px;}
.cover-paper .cover-department{font-size:18px;line-height:1.25;margin-top:7px;}
.cover-paper .cover-header-rule{margin-top:13px;}
.cover-paper .cover-middle{margin-top:12.5%;}
.cover-paper .cover-kicker{font-size:26px;line-height:1.2;margin-bottom:29px;letter-spacing:.3px;text-transform:none;font-style:italic;font-weight:400;}
.cover-paper .cover-topic{font-size:52px;line-height:1.15;letter-spacing:-.35px;max-width:92%;margin-left:auto;margin-right:auto;}
.cover-paper .cover-rule{margin:46px auto 52px;width:84px;}
.cover-paper .cover-course{gap:7px;}
.cover-paper .cover-course-row{font-size:24px;line-height:1.15;gap:7px;}
.cover-paper .cover-course-row span:first-child{min-width:128px;}
.cover-paper .cover-footer{margin-top:1.5%;}
.cover-paper .cover-parties{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch;}
.cover-paper .party{min-width:0;padding:8.5% 6% 6.5%;}
.cover-paper .party h4{font-size:26px;line-height:1.15;margin-bottom:5%;white-space:nowrap;}
.cover-paper .party-rows-wrap{padding:7% 7%;min-width:0;}
/* Wider value column + normal word wrapping. A whole word moves to the next
   line instead of becoming Account-ing / Anut-osh / Sifaat Sak-ib. */
.cover-paper .party-rows{grid-template-columns:max-content 12px minmax(0,1fr);column-gap:8px;row-gap:8px;font-size:18px;line-height:1.3;}
.cover-paper .party-label{white-space:nowrap;}
.cover-paper .party-colon{white-space:nowrap;}
.cover-paper .party-value{min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:none;}
.cover-paper .cover-date{font-size:17px;line-height:1.3;margin-top:24px;}

/* Same reference scale for every template; their ornament/alignment stays unique. */
.tpl-modern .cover-institution,.tpl-minimal .cover-institution,.tpl-ceremonial .cover-institution{font-size:41px;}
.tpl-modern .cover-department,.tpl-minimal .cover-department,.tpl-ceremonial .cover-department{font-size:18px;}
.tpl-modern .cover-kicker,.tpl-minimal .cover-kicker,.tpl-ceremonial .cover-kicker{font-size:26px;line-height:1.2;}
.tpl-modern .cover-topic,.tpl-minimal .cover-topic,.tpl-ceremonial .cover-topic{font-size:52px;line-height:1.15;}
.tpl-modern .cover-course-row,.tpl-minimal .cover-course-row,.tpl-ceremonial .cover-course-row{font-size:24px;line-height:1.15;}
.tpl-modern .party h4,.tpl-minimal .party h4,.tpl-ceremonial .party h4{font-size:26px;line-height:1.15;}
.tpl-modern .party-rows,.tpl-minimal .party-rows,.tpl-ceremonial .party-rows{font-size:18px;line-height:1.3;}
.tpl-modern .cover-date,.tpl-minimal .cover-date,.tpl-ceremonial .cover-date{font-size:17px;line-height:1.3;}

/* Thumbnails use the same A4 coordinate system, so these rules scale down
   together instead of changing typography at small screen sizes. */
.mini-cover .party-rows{grid-template-columns:minmax(0,38%) minmax(9px,8%) minmax(0,54%);}
.mini-cover .party-value{white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:none;}

@media (max-width:850px){
  .cover-paper .cover-institution,.tpl-modern .cover-institution,.tpl-minimal .cover-institution,.tpl-ceremonial .cover-institution{font-size:41px;}
  .cover-paper .cover-topic,.tpl-modern .cover-topic,.tpl-minimal .cover-topic,.tpl-ceremonial .cover-topic{font-size:52px;}
  .cover-paper .cover-parties{gap:18px;}
}

/* Final party-card balance: preserve the reference scale while preventing
   words from breaking in the middle and keeping both submitted columns
   visually equal in height. */
.cover-parties{align-items:stretch}
.cover-parties>.party{height:100%;min-width:0;box-sizing:border-box;display:flex;flex-direction:column}
.party-rows-wrap{flex:1;min-width:0;display:flex;box-sizing:border-box}
.party-rows{
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,34%) minmax(12px,8%) minmax(0,58%);
  align-content:space-between;
  column-gap:0;
  row-gap:0;
}
.party-label{min-width:0;white-space:nowrap}
.party-colon{white-space:nowrap;text-align:center}
.party-value{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}

/* Never let a value be squeezed into one-character columns. If a whole
   word is too long for the value column, reduce only that value's font size
   instead of splitting the word. */
.tpl-classic .party-value{font-size:24px}


/* Final user adjustment: slightly larger course rows and move the
   Submitted By / Submitted To section a little lower on every template. */
.cover-paper .cover-course-row,
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row {
  font-size:20px !important;
}
.cover-paper .cover-footer {
  margin-top:2.8% !important;
}

/* ================================================================
   GALLERY A4 FIT FIX
   The thumbnail is a real 794x1123 A4 canvas. The frame itself must
   always resolve to the full grid-column width before JS calculates
   the visual scale; otherwise percentage widths can collapse to half.
   ================================================================ */
.template-grid{min-width:0;}
.template-card{min-width:0;overflow:hidden;}
.template-card .mini-frame{
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  aspect-ratio:210/297;
  flex:0 0 auto;
  overflow:hidden;
  box-sizing:border-box;
}
.template-card .mini-cover{
  position:absolute;
  left:0;
  top:0;
  width:793.7008px !important;
  height:1122.5197px !important;
  max-width:none !important;
  margin:0 !important;
  transform-origin:top left !important;
}
/* Do not let gallery-only mobile rules resize the A4 canvas itself. */
@media(max-width:850px){
  .template-card .mini-frame{width:100%;min-width:0;}
}


/* Final course layout: match Classic reference on every template.
   Keep the label, colon and value in stable columns; never split a word. */
.cover-paper .cover-course{
  display:flex;
  flex-direction:column;
  gap:7px;
  width:max-content;
  max-width:92%;
  margin-left:auto;
  margin-right:auto;
}
.cover-paper .cover-course-row{
  display:grid;
  grid-template-columns:145px 20px minmax(0,1fr);
  align-items:baseline;
  column-gap:8px;
  font-size:30px;
  line-height:1.1;
  text-align:left;
  min-width:0;
}
.cover-paper .cover-course-row .course-label{
  min-width:0 !important;
  white-space:nowrap;
  font-weight:600;
}
.cover-paper .cover-course-row .course-colon{
  width:20px;
  text-align:center;
  white-space:nowrap;
}
.cover-paper .cover-course-row .course-value{
  min-width:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* The ceremonial center-diamond ornament is shared by every template. */
.cover-paper .cover-rule{
  position:relative;
}
.cover-paper .cover-rule:after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:9px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.cover-paper .cover-rule{color:var(--brass);}
.tpl-modern .cover-rule{color:#203a54;}
.tpl-minimal .cover-rule{color:#1f2925;}
.tpl-ceremonial .cover-rule{color:#b28a35;}

@media (max-width:850px){
  .cover-paper .cover-course-row{
    grid-template-columns:145px 20px minmax(0,1fr);
  }
}


/* User-requested final course adjustment: slightly smaller and closer to the submitted boxes. */
.cover-paper .cover-course-row,
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row {
  font-size:24px !important;
  line-height:1.15 !important;
}
.cover-paper .cover-course-row {
  grid-template-columns:128px 18px minmax(0,1fr) !important;
  column-gap:7px !important;
}
.cover-paper .cover-rule { margin-bottom:52px !important; }


/* Final course row sizing: compact, single-row label + colon + value on every template. */
.cover-paper .cover-course,
.tpl-modern .cover-course,
.tpl-minimal .cover-course,
.tpl-ceremonial .cover-course {
  width:max-content;
  max-width:92%;
  margin-left:auto;
  margin-right:auto;
}
.cover-paper .cover-course-row,
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row {
  display:grid !important;
  grid-template-columns:122px 18px minmax(120px, auto) !important;
  align-items:baseline !important;
  column-gap:6px !important;
  font-size:20px !important;
  line-height:1.2 !important;
  text-align:left !important;
  white-space:normal !important;
}
.cover-paper .cover-course-row .course-label,
.tpl-modern .cover-course-row .course-label,
.tpl-minimal .cover-course-row .course-label,
.tpl-ceremonial .cover-course-row .course-label {
  white-space:nowrap !important;
  min-width:0 !important;
  word-break:keep-all !important;
}
.cover-paper .cover-course-row .course-colon,
.tpl-modern .cover-course-row .course-colon,
.tpl-minimal .cover-course-row .course-colon,
.tpl-ceremonial .cover-course-row .course-colon {
  width:auto !important;
  white-space:nowrap !important;
  text-align:center !important;
}
.cover-paper .cover-course-row .course-value,
.tpl-modern .cover-course-row .course-value,
.tpl-minimal .cover-course-row .course-value,
.tpl-ceremonial .cover-course-row .course-value {
  min-width:0 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}
@media(max-width:850px){
  .cover-paper .cover-course-row,
  .tpl-modern .cover-course-row,
  .tpl-minimal .cover-course-row,
  .tpl-ceremonial .cover-course-row {
    grid-template-columns:122px 18px minmax(100px, auto) !important;
    font-size:18px !important;
  }
}

/* Final user adjustment: move the Submitted By / Submitted To section slightly
   downward on every template while preserving the existing A4 scale. */
.cover-paper .cover-footer,
.tpl-classic .cover-footer,
.tpl-modern .cover-footer,
.tpl-minimal .cover-footer,
.tpl-ceremonial .cover-footer{
  margin-top:3.5% !important;
}


/* Final course-title/code size lock: Minimal + Ceremonial match Classic exactly.
   Keep both label and value readable and on the same row. */
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row {
  font-size:20px !important;
  line-height:1.15 !important;
  gap:7px !important;
}
.tpl-minimal .cover-course-row span:first-child,
.tpl-ceremonial .cover-course-row span:first-child {
  min-width:128px !important;
  font-size:20px !important;
  line-height:1.15 !important;
}
.tpl-minimal .cover-course-row span:last-child,
.tpl-ceremonial .cover-course-row span:last-child {
  font-size:20px !important;
  line-height:1.15 !important;
}
.tpl-minimal .cover-course,
.tpl-ceremonial .cover-course {
  gap:7px !important;
}

/* Final course-row alignment: keep label, colon and value clearly separated
   and readable on every template. The Classic reference size is retained. */
.cover-paper .cover-course{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}
.cover-paper .cover-course-row{
  display:grid;
  grid-template-columns:max-content 22px minmax(0,max-content);
  align-items:baseline;
  justify-content:center;
  column-gap:8px;
  width:100%;
  max-width:92%;
  font-size:24px;
  line-height:1.2;
  text-align:left;
}
.cover-paper .cover-course-row .course-label{
  min-width:0 !important;
  white-space:nowrap;
  font-weight:600;
}
.cover-paper .cover-course-row .course-colon{
  display:block;
  width:22px;
  text-align:center;
  white-space:nowrap;
  font-weight:600;
}
.cover-paper .cover-course-row .course-value{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.tpl-classic .cover-course-row,
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row{
  font-size:24px;
  line-height:1.2;
}
.tpl-classic .cover-course-row .course-label,
.tpl-modern .cover-course-row .course-label,
.tpl-minimal .cover-course-row .course-label,
.tpl-ceremonial .cover-course-row .course-label{
  min-width:0 !important;
}

/* ================================================================
   FINAL COURSE ROW FIX — clear label / colon / value columns
   All four templates use the same readable Classic-style course scale.
   The colon always has its own visible column and never touches the label.
   ================================================================ */
.cover-paper .cover-course,
.tpl-classic .cover-course,
.tpl-modern .cover-course,
.tpl-minimal .cover-course,
.tpl-ceremonial .cover-course{
  width:100% !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
}

.cover-paper .cover-course-row,
.tpl-classic .cover-course-row,
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row{
  width:390px !important;
  max-width:82% !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:125px 26px minmax(0,1fr) !important;
  align-items:baseline !important;
  column-gap:0 !important;
  font-size:20px !important;
  line-height:1.2 !important;
  text-align:left !important;
  white-space:normal !important;
}

.cover-paper .cover-course-row .course-label,
.tpl-classic .cover-course-row .course-label,
.tpl-modern .cover-course-row .course-label,
.tpl-minimal .cover-course-row .course-label,
.tpl-ceremonial .cover-course-row .course-label{
  grid-column:1 !important;
  width:auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  word-break:keep-all !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}

.cover-paper .cover-course-row .course-colon,
.tpl-classic .cover-course-row .course-colon,
.tpl-modern .cover-course-row .course-colon,
.tpl-minimal .cover-course-row .course-colon,
.tpl-ceremonial .cover-course-row .course-colon{
  grid-column:2 !important;
  display:block !important;
  width:26px !important;
  min-width:26px !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}

.cover-paper .cover-course-row .course-value,
.tpl-classic .cover-course-row .course-value,
.tpl-modern .cover-course-row .course-value,
.tpl-minimal .cover-course-row .course-value,
.tpl-ceremonial .cover-course-row .course-value{
  grid-column:3 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  font-size:20px !important;
  line-height:1.2 !important;
}

@media(max-width:850px){
  .cover-paper .cover-course-row,
  .tpl-classic .cover-course-row,
  .tpl-modern .cover-course-row,
  .tpl-minimal .cover-course-row,
  .tpl-ceremonial .cover-course-row{
    width:390px !important;
    max-width:82% !important;
    grid-template-columns:125px 26px minmax(0,1fr) !important;
    font-size:20px !important;
  }
}

/* ================================================================
   USER UPDATE: Compact info forms for Classic, Modern and Minimal
   Slightly smaller cards and typography so names fit more naturally.
   Ceremonial is intentionally unchanged.
   ================================================================ */
.tpl-classic .party,
.tpl-modern .party,
.tpl-minimal .party{
  padding:6.8% 5% 5.2% !important;
}
.tpl-classic .party h4,
.tpl-modern .party h4,
.tpl-minimal .party h4{
  font-size:22px !important;
  margin-bottom:4.5% !important;
}
.tpl-classic .party-rows-wrap,
.tpl-modern .party-rows-wrap,
.tpl-minimal .party-rows-wrap{
  padding:5.5% 5.5% !important;
}
.tpl-classic .party-rows,
.tpl-modern .party-rows,
.tpl-minimal .party-rows{
  grid-template-columns:minmax(0,32%) minmax(11px,7%) minmax(0,61%) !important;
  font-size:16px !important;
  line-height:1.25 !important;
  row-gap:5px !important;
}
.tpl-classic .party-value,
.tpl-modern .party-value,
.tpl-minimal .party-value{
  overflow-wrap:break-word;
  word-break:normal;
}

/* ================================================================
   FINAL COLON VISIBILITY FIX
   The previous label column was narrower than the rendered uppercase
   COURSE TITLE / COURSE CODE text, so the label could visually cover
   the colon. Give the label enough fixed space and keep the colon in
   its own non-overlapping column.
   ================================================================ */
.cover-paper .cover-course-row,
.tpl-classic .cover-course-row,
.tpl-modern .cover-course-row,
.tpl-minimal .cover-course-row,
.tpl-ceremonial .cover-course-row{
  grid-template-columns:160px 30px minmax(0,1fr) !important;
  column-gap:0 !important;
}
.cover-paper .cover-course-row .course-label,
.tpl-classic .cover-course-row .course-label,
.tpl-modern .cover-course-row .course-label,
.tpl-minimal .cover-course-row .course-label,
.tpl-ceremonial .cover-course-row .course-label{
  overflow:hidden !important;
  padding-right:6px !important;
}
.cover-paper .cover-course-row .course-colon,
.tpl-classic .cover-course-row .course-colon,
.tpl-modern .cover-course-row .course-colon,
.tpl-minimal .cover-course-row .course-colon,
.tpl-ceremonial .cover-course-row .course-colon{
  grid-column:2 !important;
  width:30px !important;
  min-width:30px !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
}
@media(max-width:850px){
  .cover-paper .cover-course-row,
  .tpl-classic .cover-course-row,
  .tpl-modern .cover-course-row,
  .tpl-minimal .cover-course-row,
  .tpl-ceremonial .cover-course-row{
    grid-template-columns:160px 30px minmax(0,1fr) !important;
  }
}

/* FINAL CLASSIC TEMPLATE ADJUSTMENT: make the Submitted By/To form area
   slightly taller downward and reduce the entered text size for a cleaner fit. */
.tpl-classic .party-rows-wrap{
  min-height:138px !important;
  padding-bottom:8% !important;
  box-sizing:border-box !important;
}
.tpl-classic .party-rows{
  font-size:14px !important;
  row-gap:6px !important;
}
.tpl-classic .party-value{
  font-size:13px !important;
  line-height:1.2 !important;
}

/* FINAL MINIMAL COURSE LINE FIX: keep label, colon and value in separate columns */
.tpl-minimal .cover-course-row{
  display:grid;
  grid-template-columns:150px 18px minmax(0,1fr);
  column-gap:0;
  align-items:baseline;
  justify-content:center;
}
.tpl-minimal .cover-course-row .course-label{
  min-width:0 !important;
  text-align:right;
  padding-right:8px;
}
.tpl-minimal .cover-course-row .course-colon{
  display:block;
  width:18px;
  text-align:center;
  white-space:nowrap;
}
.tpl-minimal .cover-course-row .course-value{
  min-width:0;
  padding-left:10px;
  text-align:left;
}

/* USER REQUEST: Classic cover keeps its own classic frame/theme, but the
   Submitted By / Submitted To cards use the same visual theme as Minimal. */
.tpl-classic .party{
  --accent:#4d5752 !important;
  --accent-rgb:77,87,82 !important;
  background:#fafbf9 !important;
  border:1px solid #dfe3df !important;
  padding:6% 5% 5% !important;
}
.tpl-classic .party h4{
  color:#4d5752 !important;
  letter-spacing:1px !important;
}
.tpl-classic .party-rows-wrap{
  background:#fff !important;
  border:1px solid #e7eae7 !important;
  box-shadow:none !important;
}
/* Keep the previously requested compact Classic entry text and taller form area. */
.tpl-classic .party-rows-wrap{
  min-height:138px !important;
  padding:5.5% 5.5% 8% !important;
  box-sizing:border-box !important;
}
.tpl-classic .party-rows{
  font-size:14px !important;
  row-gap:6px !important;
}
.tpl-classic .party-value{
  font-size:13px !important;
  line-height:1.2 !important;
}

/* USER CORRECTION: Keep the Classic template's original visual theme.
   Only the previously requested form sizing/typography adjustments remain. */
.tpl-classic .party{
  --accent:#9b7628 !important;
  --accent-rgb:155,118,40 !important;
  background:#fbf8ef !important;
  border:1px solid #dfd2b4 !important;
}
.tpl-classic .party h4{
  color:var(--accent) !important;
  letter-spacing:normal !important;
}
.tpl-classic .party-rows-wrap{
  background:#fff !important;
  border:1px solid #eee6d6 !important;
  box-shadow:none !important;
}

/* FINAL USER REQUEST: Classic keeps its own theme; Submitted By/To form uses Minimal's size/layout. */
.tpl-classic .party{
  padding:6% 5% 5% !important;
}
.tpl-classic .party-rows-wrap{
  padding:5.5% 5.5% !important;
  min-height:0 !important;
}
.tpl-classic .party-rows{
  grid-template-columns:minmax(0,32%) minmax(11px,7%) minmax(0,61%) !important;
  font-size:16px !important;
  line-height:1.25 !important;
  row-gap:5px !important;
}
.tpl-classic .party-value{
  font-size:13px !important;
  line-height:1.2 !important;
}

/* USER UPDATE: move the Classic Submitted By / Submitted To section slightly lower
   while keeping the existing Classic theme and Minimal-sized form layout. */
.tpl-classic .cover-footer{
  transform:translateY(28px) !important;
}