.cert {
  --gold: var(--cert-frame, #B98F2E);
  --ink: var(--print-ink, #132030);
  --body: var(--print-body, #33414E);
  --muted: var(--print-muted, #5C7387);
  --rule: var(--print-rule, #D8DEE6);

  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: min(100%, 1123px);        
  aspect-ratio: 1123 / 794;
  margin-inline: auto;
  padding: 3.4% 5.6%;              
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFDF8 0%, #FDFBF6 46%, #FAF7EF 100%);
  color: var(--body);
  font-family: var(--font-ui, system-ui, sans-serif);
  overflow: hidden;
}


.cert-frame {
  position: absolute;
  inset: 1.7cqw;
  border: 0.17cqw solid var(--gold);
  border-radius: 2px;
  pointer-events: none;
}
.cert-frame::after {
  content: '';
  position: absolute;
  inset: 0.62cqw;
  border: 0.07cqw solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 1px;
}


.cert::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(58deg,
      color-mix(in srgb, var(--gold) 7%, transparent) 0 1px,
      transparent 1px 11px),
    repeating-linear-gradient(-58deg,
      color-mix(in srgb, var(--gold) 5%, transparent) 0 1px,
      transparent 1px 14px);
  opacity: .5;
  pointer-events: none;
}

.cert > *:not(.cert-frame) { position: relative; }


.cert p,
.cert dt,
.cert dd { max-width: none; }


.cert-head { text-align: center; }

.cert-brand {
  font-size: 1.02cqw;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1cqw;
}

.cert-title {
  font-family: var(--font-disp, Georgia, serif);
  font-size: 3.05cqw;
  font-weight: 500;
  line-height: 1.14;
  color: var(--ink);
  margin: 0;
}


.cert-title::after {
  content: '';
  display: block;
  width: 17cqw;
  height: 1px;
  margin: 1.35cqw auto 0;
  background: linear-gradient(90deg,
    transparent, var(--gold) 22%, var(--gold) 78%, transparent);
}

.cert-sub {
  font-size: 1.22cqw;
  color: var(--muted);
  letter-spacing: .06em;
  margin: 1.05cqw 0 0;
}


.cert-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  justify-content: space-evenly;
}


.cert-lead {
  text-align: center;
  font-size: 1.15cqw;
  color: var(--muted);
  margin: 0 0 0.75cqw;
}

.cert-name {
  text-align: center;
  font-family: var(--font-disp, Georgia, serif);
  font-size: 4.9cqw;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cert-name, #8A5A14);
  margin: 0;
  padding-bottom: 1.4cqw;
  border-bottom: 1px solid var(--rule);
  
  overflow-wrap: anywhere;
}


.cert-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 2.1cqw;
  margin: 0;
  padding: 0.6cqw 0;
  text-align: center;
}

.cf { min-width: 0; }
.cf + .cf { border-inline-start: 1px solid var(--rule); }

.cf dt {
  font-size: 1.12cqw;
  color: var(--muted);
  letter-spacing: .05em;
  margin-bottom: 0.5cqw;
}

.cf dd {
  margin: 0;
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: 2.25cqw;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.cf p {
  margin: 0.4cqw 0 0;
  font-size: 1cqw;
  color: var(--muted);
  line-height: 1.45;
}


.cert-claim {
  text-align: center;
  font-size: 1.3cqw;
  color: var(--body);
  margin: 0 auto;
  max-width: 62ch;
}


.cert-disclaimer {
  margin: 1.6cqw auto 0;
  max-width: 78ch;
  padding: 1.05cqw 1.45cqw;
  background: var(--print-note, #FDF6E8);
  border-inline-start: 0.28cqw solid var(--gold);
  border-radius: 2px;
  font-size: 1.15cqw;
  line-height: 1.55;
  color: var(--body);
  text-align: start;
}


.cert-foot {
  padding-top: 1.6cqw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4cqw;
  border-top: 1px solid var(--rule);
}

.cert-date { font-size: 1.08cqw; color: var(--muted); }
.cert-date span { display: block; letter-spacing: .08em; margin-bottom: .25cqw; }
.cert-date b {
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: 1.3cqw;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


.cert-tools { text-align: end; }

.tools-label {
  margin: 0 0 0.8cqw;
  font-size: 1.02cqw;
  letter-spacing: .14em;
  color: var(--muted);
}

.marks {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2.4cqw;
}

.mark { margin: 0; text-align: center; }


.mark img { display: none; }
.mark img[data-ok] {
  display: block;
  height: 2.3cqw;
  width: auto;
  max-width: 11cqw;
  object-fit: contain;
  margin-inline: auto;
  
  filter: grayscale(1);
  opacity: .78;
}


.mark[data-mark="atas"] img[data-ok] {
  max-width: 8.4cqw;
  opacity: .68;
}

.mark-word {
  display: block;
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
  opacity: .82;
  line-height: 1.25;
}
.mark-word[hidden] { display: none; }

.mark figcaption {
  margin-top: 0.42cqw;
  font-size: 1.02cqw;
  color: var(--muted);
}

.cert-trademarks {
  margin: 1.1cqw 0 0;
  font-size: 0.98cqw;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}


.cert-name[contenteditable="true"] {
  outline: none;
  border-bottom-style: dashed;
  cursor: text;
}
.cert-name[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  opacity: .55;
}
.cert-name[contenteditable="true"]:focus-visible {
  border-bottom-color: var(--gold);
}


.cert--pending {
  aspect-ratio: auto;
  display: block;
  padding: var(--sp-6, 32px);
  container-type: normal;
}
.cert--pending h2 {
  font-family: var(--font-disp, serif); color: var(--ink);
  font-size: var(--fs-lg, 1.375rem); margin: 0 0 var(--sp-3, 12px);
}
.cert--pending p { font-size: var(--fs-sm, 1rem); }
.cert--pending ul { padding-inline-start: 1.2em; }
.cert--pending li { margin-bottom: .4em; font-size: var(--fs-sm, 1rem); }


@page { size: A4 landscape; margin: 0; }

@media print {
  .cert {
    width: 100%;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .no-print { display: none !important; }
}


@media screen {
  .cert {
    box-shadow: 0 1px 2px rgb(19 32 48 / .06), 0 12px 34px rgb(19 32 48 / .10);
    border-radius: 3px;
  }
}