@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #efefef;
    color: #4f2927;
}

.container {
    display: grid;
    grid-template-columns: repeat(12, 52.67px);
    grid-template-rows: repeat(12, 52.67px);
    width: 800px;
    height: 800px;
    padding: 30px 18px;
    margin: 100px auto 25px;
    grid-gap: 12px;
    /*background-color: #fff;*/
    box-sizing: border-box;
    overflow: hidden;
    font-size: 9pt;
    background-color: #fcf9ef;
}

#info {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #333;
    width: 800px;
    margin: 0 auto 100px auto;
}

.black-type {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 80pt;
    letter-spacing: 0.06em;
}

#a {
    grid-column: 1 / 13;
    grid-row: 1;
    transform: translateX(38px) translateY(-14px);
}

#blue-type {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #00aeef;
    grid-column: 4 / 13;
    grid-row: 2;
    font-size: 34pt;
    transform: translateX(4px) translateY(20px);
    font-variant: small-caps;
}

#c {
    grid-column: 4 / 13;
    grid-row: 3 / 4;
    transform: translateX(4px) translateY(-4px);
}

#d1 {
    grid-column: 4 / 4;
    grid-row: 5;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    transform: translateX(4px) translateY(-28px);
    font-size: 13pt;
}

#d2 {
    grid-column: 5 / 13;
    grid-row: 5;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    transform: translateX(18px) translateY(-28px);
    font-size: 13pt;
}

#e1 {
    grid-column: 1 / 5;
    grid-row: 5;
    text-align: end;
    transform: translateX(18px) translateY(16px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    line-height: 14px;
}

#e2 {
    grid-column: 5 / 13;
    grid-row: 5;
    /*text-align: end;*/
    transform: translateX(18px) translateY(16px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    line-height: 14px;
}

.smallcaps {
    font-variant: small-caps;
    font-size: 10pt;
}

#f1 {
    grid-column: 1 / 5;
    grid-row: 6;
    text-align: end;
    transform: translateX(18px) translateY(4px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    line-height: 14px;
}

#f2 {
    grid-column: 5 / 13;
    grid-row: 6;
    /*text-align: end;*/
    transform: translateX(18px) translateY(4px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    line-height: 14px;
}

#g {
    grid-column: 1 / 5;
    grid-row: 7;
    text-align: end;
    transform: translateX(18px) translateY(-12px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    font-variant: small-caps;
}

#h {
    grid-column: 1 / 4;
    grid-row: 7 / 10;
    /*text-align: end;*/
    transform: translateX(70px) translateY(22px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    /*line-height: 9.6pt;*/
    line-height: 16px;
}

#i {
    grid-column: 4 / 5;
    grid-row: 7 / 10;
    text-align: end;
    transform: translateX(18px) translateY(22px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    /*line-height: 9.6pt;*/
    line-height: 16px;
}

#j {
    grid-column: 5 / 6;
    grid-row: 7 / 10;
    /*text-align: end;*/
    transform: translateX(18px) translateY(22px);
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 9pt;
    /*line-height: 9.6pt;*/
    line-height: 16px;
}

#k {
    grid-column: 1 / 6;
    grid-row: 11 / 13;
    font-size: 7pt;
    opacity: 0.6;
    align-content: end;
    font-family: "minion-pro-condensed-subhead", serif;
    font-weight: 400;
    font-style: normal;
    /*line-height: 7.2pt;*/
    transform: translateX(70px) translateY(-22px);
    line-height: 11px;
}

#l1 {
    grid-column: 8 / 12;
    grid-row: 7 / 12;
    transform: translateY(22px);
    line-height: 16px;
    text-align: justify;
    text-align-last: left;
    font-variant: small-caps;
    font-family: "minion-pro-condensed-display", serif;
    font-weight: 400;
    font-style: normal;
}

#l2 {
    grid-column: 8 / 12;
    grid-row: 12 / 13;
    transform: translateY(18px);
    line-height: 13px;
    text-align: justify;
    text-align-last: left;
    font-variant: small-caps;
    font-family: "minion-pro-condensed-display", serif;
    font-weight: 400;
    font-style: normal;
}

/*Below was Claude.ai-------------------------------------------------------*/
/* Circle cutout for text flow */
.circle-cutout {
    float: left;
    width: 60px;
    height: 60px;
    shape-outside: circle(60px at 0 0);
    clip-path: circle(60px at 0 0);
    background: #fcf9ef;
    margin-right: 5px;
}
/*Claude.ai ends here ------------------------------------------------------*/

#m {
    grid-column: 6 / 9;
    grid-row: 10;
    transform: translateX(26px) translateY(-26px);
    font-variant: small-caps;
}