/* ==========================================================================
   Assetree: brand guidelines page
   ========================================================================== */

/* Hero */
.bhero { padding: calc(var(--nav-h) + clamp(70px, 11vw, 150px)) 0 clamp(80px, 9vw, 130px); background: radial-gradient(90% 70% at 85% 30%, rgba(27, 58, 46, .55), transparent 70%), var(--ink); }
.bhero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.bhero__title { font-size: calc(clamp(3.6rem, 10vw, 11rem) * var(--fz)); max-width: 10ch; }
.bhero__lede { margin-top: 36px; }
.bhero__mark { justify-self: center; width: min(100%, 360px); }
.bhero__mark svg { width: 100%; height: auto; overflow: visible; }
.bhero__mark .draw-set path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2s var(--ease-in-out) .5s forwards; }
.bhero__mark .draw-set path:last-child { animation-delay: 1.3s; }
.bhero__mark .draw-set { animation: fadeOut 1s ease 2.7s forwards; }
.bhero__mark .fill-in { opacity: 0; animation: fadeIn 1.2s ease 2.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

/* Section shell */
.bsec { padding: clamp(100px, 11vw, 170px) 0; border-top: 1px solid var(--rule); }
.bsec--tight { padding-top: clamp(80px, 9vw, 130px); }
.bsec__title { margin-bottom: 30px; max-width: 18ch; }
.bsplit { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.bsplit .lede { margin-top: 30px; }

/* Anatomy */
.anatomy { margin-top: 40px; border-bottom: 1px solid var(--rule); }
.anatomy li { padding: 20px 0; border-top: 1px solid var(--rule); color: var(--fg-2); font-size: calc(15.5px * var(--fz)); }
.anatomy strong { display: block; color: var(--fg); font-weight: 500; font-size: calc(18px * var(--fz)); margin-bottom: 2px; }

/* Construction drawing */
.construct svg { width: 100%; height: auto; overflow: visible; }
.construct__grid path { fill: none; stroke: var(--rule); stroke-width: 1; }
.construct__guides path, .construct__guides circle { fill: none; stroke: rgba(200, 169, 107, .5); stroke-width: 1; stroke-dasharray: 4 6; }
.construct__guides circle { stroke: var(--rule-2); }
.construct__pts rect { fill: var(--ink); stroke: var(--gold); stroke-width: 1; }
.construct__notes text { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .2em; fill: var(--fg-2); }
.js .construct [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .construct__guides, .js .construct .construct__fill, .js .construct__pts, .js .construct__notes { opacity: 0; }
.no-motion .construct [pathLength] { stroke-dashoffset: 0; }
.no-motion .construct .construct__fill, .no-motion .construct__pts, .no-motion .construct__notes, .no-motion .construct__guides { opacity: 1; }
.no-motion .construct__lines { opacity: .35; }

/* Lockups */
.lockups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 50px; }
.lockup { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--rule); }
.lockup__art { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 26px); }
.lockup figcaption { padding: 14px 20px; font-size: calc(13px * var(--fz)); color: var(--fg-3); border-top: 1px solid var(--rule); }
.lockup__brand { display: inline-flex; align-items: flex-end; font-family: var(--logo); font-weight: 600; font-size: calc(clamp(24px, 3vw, 40px) * var(--fz)); letter-spacing: calc(.3em * var(--ek)); line-height: 1; text-transform: uppercase; }
.lockup__brand .lockup__mark { width: calc(.87em * var(--ek)); height: calc(.86em * var(--ek)); margin: 0 calc(.2em * var(--ek)) calc(.18em * var(--ek)) 0; flex: none; }
.lockup__word { margin-right: calc(-.3em * var(--ek)); }
.lockup--forest .lockup__brand { font-size: calc(clamp(30px, 4.2vw, 56px) * var(--fz)); }
.lockup__mark--solo { width: clamp(100px, 11vw, 160px); height: clamp(100px, 11vw, 160px); }
.lockup--ink { background: var(--ink); color: var(--bone); }
.lockup--paper { background: var(--paper); color: #111613; }
.lockup--forest { background: var(--forest); color: var(--bone); }
.lockup--brass { background: var(--gold); color: var(--ink); --mark-accent: var(--ink); }
.lockup--brass figcaption { color: rgba(10, 14, 12, .6); border-color: rgba(10, 14, 12, .15); }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--rule); }
.rules b { display: block; font-weight: 500; margin-bottom: 6px; }
.rules span { color: var(--fg-2); font-size: calc(15px * var(--fz)); }

/* Colour */
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 50px; }
.swatch { display: grid; gap: 4px; text-align: left; padding: 0 0 14px; transition: transform .6s var(--ease); }
.swatch:hover { transform: translateY(-6px); }
.swatch__chip { display: block; aspect-ratio: 3 / 4; border-radius: 16px; background: var(--c); border: 1px solid var(--rule-2); margin-bottom: 12px; }
.swatch__name { font-family: var(--serif); font-size: calc(26px * var(--fz)); line-height: 1; }
.swatch__hex { font-family: var(--sans); font-weight: 500; font-size: calc(13px * var(--fz)); color: var(--gold); letter-spacing: calc(.06em * var(--ek)); font-variant-numeric: tabular-nums; }
.ratio { margin-top: 50px; }
.ratio__bar { display: flex; height: 64px; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule-2); }
.ratio__bar span { width: var(--w); background: var(--c); color: var(--t, var(--bone)); display: flex; align-items: flex-end; padding: 10px 12px; font-size: calc(12px * var(--fz)); white-space: nowrap; overflow: hidden; }

/* Typography */
.fonts { margin-top: 50px; border-bottom: 1px solid var(--rule); }
.font { display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--rule); }
.font__aa { font-size: calc(clamp(90px, 12vw, 180px) * var(--fz)); line-height: .8; letter-spacing: calc(-.03em * var(--ek)); }
.font__aa--serif { font-family: var(--serif); }
.font__aa--sans { font-family: var(--sans); font-weight: 500; }
.font__aa--logo { font-family: var(--logo); font-weight: 600; }
.font h3 { font-size: calc(22px * var(--fz)); font-weight: 500; }
.font__use { font-size: calc(14px * var(--fz)); color: var(--fg-3); margin-top: 4px; }
.font__sample { margin-top: 18px; color: var(--fg); }
.font__sample--serif { font-family: var(--serif); font-size: calc(clamp(32px, 4vw, 56px) * var(--fz)); line-height: 1; }
.font__sample--serif em { color: var(--accent); }
.font__sample--sans { font-size: calc(20px * var(--fz)); max-width: 46ch; color: var(--fg-2); }
.font__sample--logo { font-family: var(--logo); font-weight: 600; font-size: calc(clamp(28px, 3.4vw, 44px) * var(--fz)); letter-spacing: calc(.3em * var(--ek)); line-height: 1; }

/* Motion */
.principles-demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.principle { border: 1px solid var(--rule); border-radius: 22px; padding: 18px 18px 28px; background: rgba(238, 233, 223, .015); }
.principle__demo { aspect-ratio: 4 / 3; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden; position: relative; margin-bottom: 22px; }
.principle h3 { font-family: var(--serif); font-weight: 400; font-size: calc(32px * var(--fz)); line-height: 1; padding: 0 6px; }
.principle p { color: var(--fg-2); font-size: calc(15.5px * var(--fz)); margin-top: 10px; padding: 0 6px; }
.demo-draw svg { width: 44%; overflow: visible; }
.demo-draw .draw-set path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLoop 5s var(--ease-in-out) infinite; }
.demo-draw .draw-set path:last-child { animation-delay: .3s; }
.demo-draw .fill-in { opacity: 0; animation: fillLoop 5s ease infinite; }
@keyframes drawLoop { 0% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; opacity: 1; } 55%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fillLoop { 0%, 34% { opacity: 0; } 50%, 86% { opacity: 1; } 100% { opacity: 0; } }
.demo-rise p { font-family: var(--serif); font-size: calc(clamp(34px, 3.4vw, 48px) * var(--fz)); line-height: 1; }
.demo-rise em { color: var(--gold); }
.demo-rise .m { display: inline-block; overflow: hidden; vertical-align: top; padding: calc(.1em * var(--ek)) calc(.05em * var(--ek)) calc(.14em * var(--ek)); margin: calc(-.1em * var(--ek)) calc(-.05em * var(--ek)) calc(-.14em * var(--ek)); }
.demo-rise .m > span { display: inline-block; transform: translateY(115%); animation: riseLoop 4.4s var(--ease) infinite; }
.demo-rise .m:nth-child(2) > span { animation-delay: .09s; }
.demo-rise .m:nth-child(3) > span { animation-delay: .18s; }
@keyframes riseLoop { 0% { transform: translateY(115%); } 30%, 78% { transform: translateY(0); } 100% { transform: translateY(-115%); } }
.demo-tree canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Voice */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.pillar { border-top: 1px solid var(--gold); padding-top: 22px; }
.pillar__word { font-family: var(--serif); font-style: italic; font-size: calc(clamp(44px, 5vw, 72px) * var(--fz)); line-height: 1; color: var(--fg); }
.pillar p:not(.pillar__word) { color: var(--fg-2); margin-top: 16px; max-width: 34ch; }
.taglines { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px; }
.taglines__line { font-family: var(--serif); font-size: calc(clamp(40px, 5vw, 80px) * var(--fz)); line-height: 1; }
.taglines__line em { color: var(--gold); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 150; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--bone); color: var(--ink); padding: 12px 20px; border-radius: 99px; font-size: calc(14px * var(--fz)); font-weight: 500; transition: opacity .4s, transform .6s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .swatches { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px) {
  .bhero__grid, .bsplit, .principles-demo, .pillars, .taglines, .rules { grid-template-columns: 1fr; }
  .bhero__mark { width: 200px; justify-self: start; }
  .lockups { grid-template-columns: 1fr; }
  .font { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .swatches { grid-template-columns: repeat(2, 1fr); }
}