/* Deposit Coin site styles */

/* Fonts: Libre Franklin & Newsreader (SIL OFL), latin subset, self-hosted */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{margin:0;background:#FFFFFF;color:#111111;font-family:"Libre Franklin",Helvetica,Arial,sans-serif}
a{color:#111111;text-decoration:none}a:hover{color:#A0261C}
.serif{font-family:"Newsreader",Georgia,serif;font-optical-sizing:auto}
.tab{font-variant-numeric:tabular-nums}
.ov{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:#6E6A63}
.nav a{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.g12{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px}
.reg>span:nth-child(5){text-align:right}.ledgerbg{background-image:linear-gradient(#ECE9E3 1px,transparent 1px);background-size:100% 28px}
.reg{display:grid;grid-template-columns:52px 70px 1.2fr 1.5fr 116px 84px;column-gap:16px;padding:8px 0 7px;border-bottom:1px solid #D9D6CF;font-size:13px;align-items:baseline}
.kv{display:grid;grid-template-columns:150px 1fr;column-gap:16px;padding:7px 0 6px;border-bottom:1px solid #D9D6CF;font-size:13px}
.kv2{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:7px 0 6px;border-bottom:1px solid #D9D6CF;font-size:13px}
.ba{display:grid;grid-template-columns:1fr auto auto;column-gap:20px;padding:8px 0 7px;border-bottom:1px solid #D9D6CF;font-size:13px;align-items:baseline}
@keyframes rowin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.w1,.w2,.w3,.w4,.w5,.w6,.w7{opacity:0;animation:rowin 420ms ease-out forwards}
.w1{animation-delay:300ms}.w2{animation-delay:750ms}.w3{animation-delay:1200ms}.w4{animation-delay:1650ms}.w5{animation-delay:2100ms}.w6{animation-delay:2550ms}.w7{animation-delay:3000ms}
.stage{display:grid;grid-template-columns:32px 1fr;column-gap:14px;padding:12px 0;border-bottom:1px solid #D9D6CF}
.role{display:grid;grid-template-columns:190px 1fr 1fr;column-gap:24px;padding:14px 0;border-bottom:1px solid #D9D6CF;font-size:14px;line-height:1.55}
.node{border:1px solid #111111;padding:12px 16px;display:flex;flex-direction:column;gap:3px;background:#FFFFFF}
.closed{display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;align-items:center;column-gap:0}
.cell{border:1px solid #C9C5BC;padding:10px 12px;font-size:12px;line-height:1.4;color:#6E6A63;background:#FFFFFF}
.ln{height:1px;background:#C9C5BC}
.vln{width:1px;height:22px;background:#111111;margin-left:24px}
@media (prefers-reduced-motion:reduce){.motion{transition:none !important}}
@media (min-width:901px) and (max-width:1280px){.hold4>div{grid-column:span 6 !important}.hold4 h3{min-height:0 !important}}
@media (max-width:900px){.g12{display:flex;flex-direction:column;gap:24px}.nav{flex-wrap:wrap}.g12>*{min-width:0;max-width:100%}.regbox{overflow-x:auto;max-width:100%}.hold4 h3{min-height:0 !important}.cmp{grid-template-columns:1fr 1fr !important;column-gap:16px !important;row-gap:4px}.cmp>span:first-child{grid-column:1 / -1}.cmph>span:first-child{display:none}.regbox>div{min-width:760px}.loop{grid-template-columns:1fr !important;row-gap:12px}.role{grid-template-columns:1fr}.closed{grid-template-columns:1fr}}
/* motion + interaction */
header.site{position:sticky;top:0;z-index:30;background:#FFFFFF;box-shadow:0 0 0 100vmax #FFFFFF;clip-path:inset(0 -100vmax -2px)}
.prog{position:absolute;left:40px;right:40px;bottom:0;height:2px;background:#A0261C;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
a,button{transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease}
a:focus-visible,button:focus-visible{outline:2px solid #A0261C;outline-offset:3px}
.nav nav a{background:linear-gradient(#A0261C,#A0261C) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size 250ms ease,color 150ms ease}
.nav nav a:hover{background-size:100% 1.5px}
a.ov:hover{border-color:#A0261C !important}
#explore a.g12,.cmp,.reg,.role,.kv2{transition:background-color 200ms ease}
#explore a.g12:hover,.cmp:not(.cmph):hover,.tab>.reg:hover,.role:hover,.recon .kv2:hover{background:rgba(17,17,17,0.04)}
.secnav{display:flex;gap:18px}.secnav a{color:#6E6A63}
@media (max-width:900px){header.site{position:relative}.secnav{display:none}}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
@keyframes post{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes confirm{from{color:#6E6A63}to{color:#A0261C}}
@keyframes stamp{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes compress{to{padding-top:8px;padding-bottom:8px}}
@keyframes logo{to{font-size:23px}}
@keyframes act{0%,21%{color:#6E6A63}22%,78%{color:#A0261C}79%,100%{color:#6E6A63}}
.w1,.w2,.w3,.w4,.w5,.w6,.w7{opacity:1;animation:post linear both;animation-timeline:view();animation-range:entry 0% cover 30%;animation-delay:0s}
.cf{animation:confirm linear both;animation-timeline:view();animation-range:cover 15% cover 35%}
.recon .kv2{animation:post linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.recon .eq{animation:post linear both;animation-timeline:view();animation-range:cover 20% cover 35%}
.stamp{display:inline-block;animation:stamp linear both;animation-timeline:view();animation-range:cover 25% cover 40%}
.prog{animation:rule linear both;animation-timeline:scroll(root)}
header.site .nav{animation:compress linear both;animation-timeline:scroll(root);animation-range:0 140px}
header.site .nav>a.serif{animation:logo linear both;animation-timeline:scroll(root);animation-range:0 140px}
.tscope{timeline-scope:--s1,--s2,--s3}
#principle{view-timeline-name:--s1}#system{view-timeline-name:--s2}#ledger{view-timeline-name:--s3}
.secnav a{animation:act linear both}.secnav .s1{animation-timeline:--s1}.secnav .s2{animation-timeline:--s2}.secnav .s3{animation-timeline:--s3}
}}

/* Interactive transfer demo (How it works) */
[data-action]{cursor:pointer}

/* Added in build: headline sizes are inline in the design and not scaled for phones */
@media (max-width:600px){h1.serif{font-size:clamp(38px,10.5vw,74px) !important}h1,h2,h3{overflow-wrap:break-word}}

/* Resources list */
.resrow{display:grid;grid-template-columns:200px 1fr auto;column-gap:24px;align-items:baseline;padding:20px 0 18px;border-bottom:1px solid #D9D6CF}
.resrow:hover .restitle{color:#A0261C}
.resmeta{display:flex;flex-direction:column;gap:6px}
.restitle{font-size:26px;line-height:1.2;font-weight:400}
.resdl{white-space:nowrap;border-bottom:1px solid #111111;padding-bottom:2px;color:#111111}
@media (max-width:900px){.resrow{grid-template-columns:1fr;row-gap:10px}.resdl{justify-self:start}.restitle{font-size:22px}}
