/* ============================================================
   ADLAN — PORTOFOLIO 2026 · bagian khusus per-halaman
   ============================================================ */

/* ---------- HERO (index) ---------- */
.hero { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.4rem, 5vw, 4rem); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-45);
  border-bottom: 1px solid var(--ink-15);
  padding-bottom: .8rem; margin-bottom: clamp(2rem, 5vw, 3.2rem);
}
.hero-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-family: var(--serif); font-weight: 560;
  font-size: clamp(2.9rem, 9.2vw, 6.4rem);
  line-height: .98; letter-spacing: -.02em;
  margin: 1.1rem 0 1.4rem;
}
.hero h1 em {
  font-style: italic; font-weight: 480; color: var(--sig);
}
.hero h1 .ash {
  font-family: var(--mono); font-size: .3em; vertical-align: super;
  color: var(--ink-45); font-weight: 400;
}
.hero-role {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-70);
  display: flex; flex-wrap: wrap; gap: .4rem 0;
}
.hero-role b { font-weight: 500; color: var(--ink); }
.hero-role .sl { color: var(--sig); margin: 0 .7rem; }
.hero p.lede {
  max-width: 34rem; margin-top: 1.3rem;
  color: var(--ink-70); font-size: 1.05rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* foto polaroid + selotip */
.snap {
  position: relative; background: #fff;
  padding: .8rem .8rem 2.6rem;
  border: 1px solid var(--ink-15);
  box-shadow: 0 18px 44px rgba(28,25,19,.16);
  transform: rotate(2.4deg);
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.snap:hover { transform: rotate(.4deg) scale(1.015); }
.snap img { width: 100%; filter: grayscale(28%) contrast(1.04); }
.snap figcaption {
  position: absolute; bottom: .75rem; left: 1rem; right: 1rem;
  font-family: var(--mono); font-size: .66rem; color: var(--ink-45);
  display: flex; justify-content: space-between; gap: .5rem;
}
.tape {
  position: absolute; width: 96px; height: 26px;
  background: rgba(232, 73, 15, .82);
  top: -13px; left: calc(50% - 48px);
  transform: rotate(-4deg);
  box-shadow: 0 2px 6px rgba(28,25,19,.18);
  opacity: .92;
}
.tape.t2 { left: -26px; top: 34%; transform: rotate(86deg); width: 78px; }

.status-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  border: 1px dashed var(--ink-45); padding: .45rem .8rem;
  margin-top: 1.1rem; color: var(--ink-70);
  background: var(--paper-2);
}
.scroll-hint {
  position: absolute; bottom: 1.2rem; right: var(--edge);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  color: var(--ink-45); writing-mode: vertical-rl;
  display: flex; align-items: center; gap: .6rem;
}
@media (max-width: 880px) { .scroll-hint { display: none; } }

/* ---------- dua kolom tentang (index) ---------- */
.about-cols {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) {
  .about-cols { grid-template-columns: 1fr; }
}

/* ---------- baris sorotan (index) ---------- */
.rows { border-top: var(--rule-thick); }
.row-item {
  display: grid; grid-template-columns: 70px 1.1fr 1.6fr 40px;
  gap: 1.2rem; align-items: baseline;
  padding: 1.5rem .6rem;
  border-bottom: var(--rule);
  text-decoration: none;
  position: relative;
  transition: background .25s, color .25s, padding-left .25s;
}
.row-item .idx {
  font-family: var(--mono); font-size: .78rem; color: var(--sig);
}
.row-item h3 {
  font-family: var(--serif); font-weight: 540;
  font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.01em;
}
.row-item p { color: var(--ink-70); font-size: .95rem; }
.row-item .go {
  font-family: var(--mono); font-size: 1.2rem;
  justify-self: end;
  transition: transform .25s;
}
.row-item:hover {
  background: var(--ink); color: var(--paper);
  padding-left: 1.2rem;
}
.row-item:hover p { color: rgba(244,241,234,.75); }
.row-item:hover .idx { color: var(--sig); }
.row-item:hover .go { transform: translate(4px, -4px); }
@media (max-width: 780px) {
  .row-item { grid-template-columns: 44px 1fr 30px; }
  .row-item p { grid-column: 2 / -1; }
}

/* ---------- kartu data diri (struk) ---------- */
.receipt {
  background: #fbf9f3;
  border: var(--rule);
  box-shadow: 6px 6px 0 var(--ink-08);
  padding: 1.6rem 1.5rem 1.9rem;
  position: relative;
  max-width: 460px;
}
.receipt::before {
  content: "KARTU DATA / 001";
  position: absolute; top: -11px; left: 14px;
  background: var(--sig); color: var(--paper);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  padding: .2rem .6rem;
}
.receipt dl {
  display: grid; gap: .55rem;
  font-family: var(--mono); font-size: .8rem;
}
.receipt .kv { display: flex; align-items: baseline; gap: .5rem; }
.receipt dt { color: var(--ink-45); text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; white-space: nowrap; }
.receipt dd { font-weight: 500; }
.receipt .dots {
  flex: 1; border-bottom: 1.5px dotted var(--ink-45);
  transform: translateY(-4px);
}
.fact-btn {
  margin-top: 1.3rem; width: 100%;
  background: none; border: 1.5px dashed var(--ink-45);
  padding: .7rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70);
  transition: border-color .2s, color .2s, background .2s;
}
.fact-btn:hover { border-color: var(--sig); color: var(--sig); background: rgba(232,73,15,.05); }
#factOut {
  margin-top: .9rem; font-style: italic; font-size: .95rem;
  color: var(--ink-70); min-height: 3.2em;
  border-left: 3px solid var(--sig); padding-left: .8rem;
}

/* ---------- kerangka browser (proyek) ---------- */
.browser {
  border: var(--rule-thick);
  background: #fff;
  box-shadow: 8px 8px 0 rgba(28,25,19,.14);
}
.browser-bar {
  display: flex; align-items: center; gap: .8rem;
  border-bottom: var(--rule-thick);
  padding: .55rem .9rem; background: var(--paper-2);
}
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots i {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--ink); display: block;
}
.browser-bar .dots i:first-child { background: var(--sig); }
.browser-bar .url {
  flex: 1; font-family: var(--mono); font-size: .68rem;
  color: var(--ink-70); background: #fff;
  border: 1px solid var(--ink-15);
  padding: .28rem .7rem; letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 1rem;
}
.browser-bar .url b { color: var(--ok); font-weight: 500; }
.browser .shot { overflow: hidden; position: relative; }
.browser .shot img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  transition: transform .8s cubic-bezier(.19,1,.22,1);
}
.browser:hover .shot img { transform: scale(1.035); }

.project { padding: clamp(2.6rem, 6vw, 4.2rem) 0; border-top: var(--rule); }
.project-grid {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.8rem, 4.5vw, 3.6rem); align-items: center;
}
.project:nth-of-type(even) .project-grid { direction: rtl; }
.project:nth-of-type(even) .project-grid > * { direction: ltr; }
@media (max-width: 900px) {
  .project-grid { grid-template-columns: 1fr; }
  .project:nth-of-type(even) .project-grid { direction: ltr; }
}
.project .p-num {
  font-family: var(--mono); font-size: .74rem; color: var(--sig);
  letter-spacing: .2em;
}
.project h3 {
  font-family: var(--serif); font-weight: 560;
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  letter-spacing: -.015em; line-height: 1.05;
  margin: .5rem 0 .3rem;
}
.project h3 em { font-style: italic; }
.project .p-sub {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-45);
  letter-spacing: .1em; text-transform: uppercase;
}
.project p.desc { margin: 1.1rem 0; color: var(--ink-70); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 1.4rem; }
.chips span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid var(--ink-45);
  padding: .3rem .65rem; background: var(--paper);
  transition: background .2s, color .2s, border-color .2s;
}
.chips span:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plink {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
  border-bottom: 2px solid var(--sig); padding-bottom: .25rem;
  transition: gap .2s, color .2s;
}
.plink:hover { gap: 1rem; color: var(--sig); }

.pstats {
  display: flex; flex-wrap: wrap; gap: 0;
  border: var(--rule-thick); margin-top: 1.4rem;
  background: var(--paper);
}
.pstats > div {
  flex: 1 1 120px; padding: .8rem 1rem;
  border-right: 1px solid var(--ink-15);
}
.pstats > div:last-child { border-right: 0; }
.pstats b { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; display: block; }
.pstats span { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); }

/* ---------- ledger keahlian ---------- */
.skill-row {
  display: grid; grid-template-columns: 54px 1.05fr .9fr 1.5fr;
  gap: 1.4rem; align-items: center;
  padding: 1.5rem .4rem;
  border-bottom: var(--rule);
  transition: background .25s, padding-left .25s;
}
.skill-row:first-of-type { border-top: var(--rule-thick); }
.skill-row:hover { background: var(--paper-2); padding-left: 1rem; }
.skill-row .s-idx { font-family: var(--mono); font-size: .74rem; color: var(--ink-45); }
.skill-row h3 {
  font-family: var(--serif); font-weight: 550;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -.01em;
}
.badge {
  display: inline-block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px dashed var(--sig); color: var(--sig);
  padding: .22rem .55rem; margin-top: .4rem;
  background: rgba(232,73,15,.05);
}
.meter { display: flex; gap: 4px; align-items: center; }
.meter i {
  flex: 1; height: 18px;
  border: 1.5px solid var(--ink);
  background: transparent;
  transform: scaleY(0);
  transition: transform .5s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i) * 60ms + var(--d, 0ms));
}
.skill-row.is-in .meter i { transform: scaleY(1); }
.meter i.f { background: var(--ink); }
.meter i.f.hot { background: var(--sig); }
.meter small {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-45);
  margin-left: .6rem; white-space: nowrap;
}
.skill-row p { color: var(--ink-70); font-size: .93rem; }
@media (max-width: 880px) {
  .skill-row { grid-template-columns: 40px 1fr; }
  .meter { grid-column: 2; }
  .skill-row p { grid-column: 2; }
}

/* blok catatan kasus */
.case-note {
  border: 1.5px dashed var(--ink-45);
  background: var(--paper-2);
  padding: 1.4rem 1.5rem;
  font-family: var(--mono); font-size: .82rem; line-height: 1.8;
  color: var(--ink-70);
  position: relative; margin-top: 2.4rem;
}
.case-note::before {
  content: attr(data-label);
  position: absolute; top: -10px; left: 16px;
  background: var(--paper); padding: 0 .6rem;
  font-size: .64rem; letter-spacing: .2em; color: var(--sig);
  text-transform: uppercase;
}
.case-note b { color: var(--ink); font-weight: 500; }

/* ---------- sertifikat ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: var(--rule-thick); background: #fbf9f3;
  box-shadow: 8px 8px 0 rgba(28,25,19,.12);
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
}
.stat-strip > div {
  padding: 1.6rem 1.4rem; text-align: center;
  border-right: 1px solid var(--ink-15);
}
.stat-strip > div:last-child { border-right: 0; }
.stat-strip b {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
  display: block; color: var(--ink);
}
.stat-strip b i { font-style: normal; color: var(--sig); }
.stat-strip span {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-45);
}
@media (max-width: 680px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: 0; border-bottom: 1px solid var(--ink-15); }
  .stat-strip > div:last-child { border-bottom: 0; }
}

.cert {
  padding: clamp(2.4rem, 6vw, 4rem) 0;
  border-top: var(--rule);
}
.cert-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem;
  margin-bottom: .6rem;
}
.cert-head .c-idx { font-family: var(--mono); font-size: .74rem; color: var(--sig); letter-spacing: .2em; }
.cert-head .c-kind {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; border: 1px solid var(--ink);
  padding: .18rem .55rem;
}
.cert-head .c-kind.hot { background: var(--sig); color: var(--paper); border-color: var(--ink); }
.cert h3 {
  font-family: var(--serif); font-weight: 560;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  letter-spacing: -.015em; line-height: 1.05;
}
.cert h3 em { font-style: italic; color: var(--sig); }
.cert .c-sub { font-family: var(--mono); font-size: .76rem; color: var(--ink-45); margin-top: .4rem; letter-spacing: .06em; }
.cert-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.8rem, 4.5vw, 3.4rem); margin-top: 1.8rem; align-items: start;
}
@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr; } }
.cert p.body { color: var(--ink-70); margin-bottom: 1rem; }
.cert .body-wrap { max-width: 34rem; }

.kv-list { margin: 1.4rem 0; display: grid; gap: .5rem; font-family: var(--mono); font-size: .8rem; }
.kv-list .kv { display: flex; align-items: baseline; gap: .6rem; }
.kv-list dt { color: var(--ink-45); text-transform: uppercase; font-size: .66rem; letter-spacing: .14em; white-space: nowrap; }
.kv-list dd { font-weight: 500; }
.kv-list .dots { flex: 1; border-bottom: 1.5px dotted var(--ink-45); transform: translateY(-4px); min-width: 30px; }
.kv-list dd.hot { color: var(--sig); }

.stamp {
  position: absolute; top: -22px; right: 14px;
  width: 92px; height: 92px; border-radius: 50%;
  border: 3px double var(--sig);
  color: var(--sig); display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.5;
  transform: rotate(11deg);
  background: rgba(244,241,234,.9);
  box-shadow: 0 4px 14px rgba(28,25,19,.12);
  animation: stampIn .6s cubic-bezier(.19,1,.22,1) both;
  animation-delay: 1s;
}
@keyframes stampIn {
  0% { opacity: 0; transform: rotate(11deg) scale(1.7); }
  100% { opacity: 1; transform: rotate(11deg) scale(1); }
}
.cert-frame { position: relative; }

.lightboxable { cursor: zoom-in; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(20,18,13,.86);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  cursor: zoom-out;
}
.lb.open { opacity: 1; visibility: visible; }
.lb img {
  max-width: 100%; max-height: 100%;
  border: 3px solid var(--paper);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.94);
  transition: transform .3s cubic-bezier(.19,1,.22,1);
}
.lb.open img { transform: scale(1); }
.lb .lb-x {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-family: var(--mono); color: var(--paper);
  font-size: .78rem; letter-spacing: .16em;
  border: 1px solid rgba(244,241,234,.5); padding: .4rem .8rem;
}

/* ---------- mixtape hobi ---------- */
.mixtape {
  border: var(--rule-thick); background: #fbf9f3;
  box-shadow: 10px 10px 0 rgba(28,25,19,.12);
  max-width: 760px;
}
.mixtape-head {
  border-bottom: var(--rule-thick);
  padding: 1.3rem 1.6rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem;
}
.mixtape-head h3 {
  font-family: var(--serif); font-style: italic; font-weight: 560;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
}
.mixtape-head .side {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  border: 1.5px solid var(--ink); padding: .3rem .7rem;
}
.track {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 1.05rem 1.6rem;
  border-bottom: 1px solid var(--ink-15);
  transition: background .2s, padding-left .25s;
}
.track:last-child { border-bottom: 0; }
.track:hover { background: var(--paper-2); padding-left: 2.1rem; }
.track .t-no { font-family: var(--mono); font-size: .74rem; color: var(--ink-45); }
.track h4 { font-family: var(--serif); font-weight: 540; font-size: 1.15rem; }
.track p { font-size: .88rem; color: var(--ink-70); margin-top: .1rem; }
.track .t-len { font-family: var(--mono); font-size: .7rem; color: var(--ink-45); }
.track.playing h4::after {
  content: " — lagi diputar"; font-family: var(--mono);
  font-size: .64rem; color: var(--sig); font-weight: 400; letter-spacing: .08em;
}

.quote-block {
  margin-top: clamp(2.4rem, 6vw, 3.6rem);
  max-width: 620px; position: relative;
  padding-left: 1.4rem;
}
.quote-block::before {
  content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem;
  width: 4px; background: var(--sig);
}
.quote-block p {
  font-family: var(--serif); font-style: italic; font-weight: 480;
  font-size: clamp(1.3rem, 3.2vw, 1.8rem); line-height: 1.35;
}
.quote-block cite {
  display: block; margin-top: .8rem; font-family: var(--mono);
  font-style: normal; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-45);
}

/* ---------- kontak ---------- */
.mail-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
  margin: .6rem 0 2.2rem;
}
.mail-line a.addr {
  font-family: var(--serif); font-weight: 540; font-style: italic;
  font-size: clamp(1.5rem, 5.4vw, 3.2rem);
  text-decoration: none; letter-spacing: -.01em;
  border-bottom: 3px solid var(--sig);
  word-break: break-all;
  transition: color .2s;
}
.mail-line a.addr:hover { color: var(--sig); }
.copy-btn {
  background: none; border: var(--rule);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .55rem 1rem;
  transition: background .2s, color .2s;
}
.copy-btn:hover { background: var(--ink); color: var(--paper); }
.copy-btn.done { background: var(--ok); border-color: var(--ok); color: #fff; }

.chan-row {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: 1rem; align-items: center;
  padding: 1.15rem .4rem;
  border-bottom: var(--rule);
  text-decoration: none;
  transition: background .22s, padding-left .22s;
}
.chan-row:first-of-type { border-top: var(--rule-thick); }
.chan-row:hover { background: var(--ink); color: var(--paper); padding-left: 1.1rem; }
.chan-row .c-label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-45);
}
.chan-row:hover .c-label { color: var(--sig); }
.chan-row .c-val { font-weight: 500; }
.chan-row .c-go { font-family: var(--mono); transition: transform .22s; }
.chan-row:hover .c-go { transform: translate(3px, -3px); }
@media (max-width: 640px) {
  .chan-row { grid-template-columns: 1fr auto; }
  .chan-row .c-label { grid-column: 1 / -1; }
}

/* ---------- footer ---------- */
footer {
  background: var(--ink); color: var(--paper);
  margin-top: clamp(3rem, 8vw, 5.5rem);
}
.foot-marquee {
  border-bottom: 1px solid rgba(244,241,234,.2);
  overflow: hidden; white-space: nowrap; padding: 1.1rem 0;
}
.foot-marquee .tape-track {
  font-family: var(--serif); font-style: italic; font-weight: 480;
  font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,241,234,.5);
  animation-duration: 40s;
}
.foot-marquee .tape-track b { color: var(--sig); -webkit-text-stroke: 0; font-weight: 480; }
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem; padding: 3rem 0 2.4rem;
}
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.foot-grid h5 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(244,241,234,.45);
  margin-bottom: 1rem;
}
.foot-grid .fname {
  font-family: var(--serif); font-style: italic; font-weight: 520;
  font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1;
}
.foot-grid p.note { color: rgba(244,241,234,.65); font-size: .92rem; max-width: 26rem; margin-top: .8rem; }
.foot-list { list-style: none; display: grid; gap: .45rem; }
.foot-list a {
  text-decoration: none; color: rgba(244,241,234,.8);
  font-family: var(--mono); font-size: .82rem;
  display: inline-flex; gap: .6rem; align-items: baseline;
  transition: color .2s, gap .2s;
}
.foot-list a i { font-style: normal; font-size: .64rem; color: var(--sig); }
.foot-list a:hover { color: var(--paper); gap: .9rem; }
.foot-base {
  border-top: 1px solid rgba(244,241,234,.2);
  padding: 1.2rem 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: rgba(244,241,234,.5); text-transform: uppercase;
}
.foot-base a { color: inherit; text-decoration: none; }
.foot-base a:hover { color: var(--sig); }