:root{

  --ink:#0B0D0C;
  --ink-2:#14181A;
  --paper:#E9E4D4;
  --paper-dim:#C9C3B1;
  --line:#3A3F3B;
  --gold:#BE9A44;
  --gold-dim:#8A7238;
  --green:#4E7D5A;
  --red:#9C4B3E;

  --serif:'Spectral', Georgia, serif;
  --sans:'Archivo', -apple-system, sans-serif;

}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  margin:0;

  background:var(--ink);

  color:var(--paper);

  font-family:var(--sans);

  -webkit-font-smoothing:antialiased;

}

::selection{
  background:var(--gold);
  color:var(--ink);
}

.wrap{
  max-width:820px;
  margin:0 auto;
  padding:0 28px;
}


/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead{

  padding:56px 0 40px;

  border-bottom:1px solid var(--line);

}

.masthead-top{

  display:flex;
  justify-content:space-between;
  align-items:baseline;

  font-size:13px;
  letter-spacing:.04em;
  color:var(--paper-dim);

  margin-bottom:34px;

  flex-wrap:wrap;
  gap:8px;

}

.masthead-top strong{
  color:var(--gold);
  font-weight:600;
}

h1.title{

  font-family:var(--serif);

  font-weight:500;

  font-size:clamp(30px,5vw,44px);

  margin:0 0 6px;

  letter-spacing:.01em;

}


/* ============================================================
   SPOUSE
   ============================================================ */

.spouse-name{

  font-family:var(--serif);

  font-weight:400;

  font-size:clamp(20px,3vw,26px);

  color:var(--paper-dim);

  margin:-2px 0 8px;

  letter-spacing:.01em;

  line-height:1.2;

}


/* ============================================================
   OWNER META
   ============================================================ */

.owner-title{

  font-size:14px;

  color:var(--gold);

  margin:2px 0 10px;

}

.subtitle{

  color:var(--paper-dim);

  font-size:15px;

  max-width:46ch;

  line-height:1.5;

  margin:0;

}

.bio{

  color:var(--paper-dim);

  font-size:14.5px;

  line-height:1.7;

  max-width:60ch;

}


/* ============================================================
   NET WORTH
   ============================================================ */

.figure-block{

  padding:52px 0 44px;

  border-bottom:1px solid var(--line);

}

.figure-label{

  font-size:13px;

  color:var(--paper-dim);

  margin-bottom:10px;

}

.figure{

  font-family:var(--serif);

  font-weight:500;

  font-size:clamp(56px,11vw,108px);

  line-height:.95;

  color:var(--paper);

  letter-spacing:-.01em;

  display:flex;

  align-items:flex-end;

  gap:14px;

  flex-wrap:wrap;

}

.figure .delta{

  font-family:var(--sans);

  font-size:clamp(15px,2.2vw,19px);

  font-weight:600;

  padding:6px 12px;

  border-radius:3px;

  margin-bottom:14px;

}

.delta.up{

  color:#DCE9DE;

  background:rgba(78,125,90,.35);

}

.delta.down{

  color:#F1DAD5;

  background:rgba(156,75,62,.35);

}

.figure-note{

  margin-top:14px;

  color:var(--paper-dim);

  font-size:13.5px;

  line-height:1.6;

  max-width:56ch;

}


/* ============================================================
   SECTIONS
   ============================================================ */

.section{

  padding:44px 0;

  border-bottom:1px solid var(--line);

}

.section:last-of-type{

  border-bottom:none;

}

.section-head{

  display:flex;

  justify-content:space-between;

  align-items:baseline;

  margin-bottom:22px;

  gap:16px;

  flex-wrap:wrap;

}

.section-head h2{

  font-family:var(--serif);

  font-weight:500;

  font-size:22px;

  margin:0;

}

.section-head .total{

  font-family:var(--serif);

  color:var(--gold);

  font-size:19px;

}


/* ============================================================
   LEDGER
   ============================================================ */

.ledger-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:16px 0;

  border-top:1px solid var(--line);

  gap:16px;

}

.ledger-row:first-child{

  border-top:none;

}

.ledger-name{

  font-size:16px;

}

.ledger-name .sub{

  display:block;

  color:var(--paper-dim);

  font-size:13px;

  margin-top:2px;

}

.ledger-value{

  font-family:var(--serif);

  font-size:19px;

  white-space:nowrap;

}


/* ============================================================
   BITCOIN
   ============================================================ */

.btc-panel{

  background:var(--ink-2);

  border:1px solid var(--line);

  padding:26px;

}

.btc-top{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:16px;

  flex-wrap:wrap;

  margin-bottom:6px;

}

.btc-price{

  font-family:var(--serif);

  font-size:clamp(28px,5vw,38px);

}

.btc-change{

  font-size:14px;

  font-weight:600;

  padding:3px 9px;

  border-radius:3px;

}

.btc-sub{

  color:var(--paper-dim);

  font-size:13px;

  margin-bottom:18px;

}

canvas#sparkline{

  width:100%;

  height:120px;

  display:block;

}

.btc-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

  gap:18px;

  margin-top:22px;

  padding-top:20px;

  border-top:1px solid var(--line);

}

.btc-grid div .k{

  font-size:12.5px;

  color:var(--paper-dim);

  margin-bottom:5px;

}

.btc-grid div .v{

  font-family:var(--serif);

  font-size:18px;

}

.live-dot{

  display:inline-block;

  width:7px;

  height:7px;

  border-radius:50%;

  background:var(--green);

  margin-right:6px;

  animation:pulse 2s infinite;

}

@keyframes pulse{

  0%,100%{
    opacity:1;
  }

  50%{
    opacity:.35;
  }

}


/* ============================================================
   REAL ESTATE / VEHICLES
   ============================================================ */

.asset-row{

  display:flex;

  gap:20px;

  align-items:center;

  padding:20px 0;

  border-top:1px solid var(--line);

}

.asset-row:first-child{

  border-top:none;

}

.asset-icon{

  flex:0 0 auto;

  width:76px;

  height:76px;

}

.asset-icon svg{

  width:100%;

  height:100%;

}

.asset-info{

  flex:1 1 auto;

  min-width:0;

}

.asset-info .name{

  font-size:16.5px;

}

.asset-info .loc{

  color:var(--paper-dim);

  font-size:13px;

  margin-top:3px;

}

.asset-value{

  font-family:var(--serif);

  font-size:18px;

  text-align:right;

  white-space:nowrap;

}


/* ============================================================
   ACCOUNT TRANSACTION HISTORY
   ============================================================ */


/* Transaction table */

.transaction-table{

  width:100%;

  border-top:1px solid var(--line);

}


.transaction-header,
.transaction-row{

  display:grid;

  grid-template-columns:
    105px
    1.5fr
    1.2fr
    90px
    130px;

  gap:16px;

  align-items:center;

}


/* Header */

.transaction-header{

  padding:12px 0;

  color:var(--paper-dim);

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:.05em;

}


/* Transaction row */

.transaction-row{

  padding:16px 0;

  border-top:1px solid var(--line);

  font-size:13px;

}


.transaction-date{

  color:var(--paper-dim);

  white-space:nowrap;

}


.transaction-description{

  min-width:0;

}


.transaction-description strong{

  display:block;

  font-weight:500;

  color:var(--paper);

}


.transaction-description span{

  display:none;

  color:var(--paper-dim);

  font-size:11px;

  margin-top:3px;

}


.transaction-account{

  color:var(--paper-dim);

  font-size:12px;

}


.transaction-type{

  font-size:11px;

  font-weight:600;

}


.transaction-type.credit{

  color:#CFE3D3;

}


.transaction-type.debit{

  color:#F1DAD5;

}


.transaction-amount{

  font-family:var(--serif);

  font-size:17px;

  text-align:right;

  white-space:nowrap;

}


.transaction-amount.credit{

  color:#CFE3D3;

}


.transaction-amount.debit{

  color:#F1DAD5;

}


/* ============================================================
   PHOTO
   ============================================================ */

.photo-upload{

  position:relative;

  width:72px;

  height:72px;

  margin-bottom:16px;

  cursor:pointer;

}

.owner-photo{

  width:72px;

  height:72px;

  border-radius:50%;

  object-fit:cover;

  border:1px solid var(--line);

  display:none;

}

.photo-placeholder{

  width:72px;

  height:72px;

  border-radius:50%;

  border:1px dashed var(--line);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:12px;

  color:var(--paper-dim);

  text-align:center;

}

.photo-edit-badge{

  position:absolute;

  bottom:-4px;

  left:50%;

  transform:translateX(-50%);

  background:var(--gold);

  color:var(--ink);

  font-size:10px;

  font-weight:600;

  letter-spacing:.02em;

  padding:2px 8px;

  border-radius:10px;

  opacity:0;

  transition:opacity .15s ease;

  white-space:nowrap;

}

.photo-upload:hover .photo-edit-badge{

  opacity:1;

}


/* ============================================================
   EDITABLE NAME
   ============================================================ */

.title[contenteditable="true"]{

  outline:none;

  border-bottom:1px dashed transparent;

  transition:border-color .15s ease;

}

.title[contenteditable="true"]:hover,

.title[contenteditable="true"]:focus{

  border-bottom-color:var(--gold-dim);

}

.edit-hint{

  font-size:11.5px;

  color:var(--paper-dim);

  opacity:.6;

  margin-top:2px;

}


/* ============================================================
   FOOTER
   ============================================================ */

footer{

  padding:36px 0 60px;

  color:var(--paper-dim);

  font-size:12.5px;

  line-height:1.7;

}

footer a{

  color:var(--gold);

  text-decoration:none;

}


/* ============================================================
   PASSWORD GATE
   ============================================================ */

#gateOverlay{

  display:none;

  position:fixed;

  inset:0;

  background:var(--ink);

  align-items:center;

  justify-content:center;

  z-index:100;

  padding:24px;

}

.gate-box{

  max-width:340px;

  width:100%;

  text-align:center;

}

.gate-box .label{

  font-size:13px;

  letter-spacing:.04em;

  color:var(--paper-dim);

  margin-bottom:18px;

}

.gate-box input{

  width:100%;

  background:var(--ink-2);

  border:1px solid var(--line);

  color:var(--paper);

  font-family:var(--sans);

  font-size:16px;

  padding:12px 14px;

  margin-bottom:14px;

}

.gate-box input:focus{

  outline:1px solid var(--gold);

}

.gate-box button{

  width:100%;

  background:var(--gold);

  border:none;

  color:var(--ink);

  font-family:var(--sans);

  font-weight:600;

  font-size:15px;

  padding:12px 14px;

  cursor:pointer;

}

.gate-box button:hover{

  background:var(--gold-dim);

}

.gate-error{

  display:none;

  color:#F1DAD5;

  font-size:13px;

  margin-top:12px;

}


/* ============================================================
   TOP NAVIGATION
   ============================================================ */

.topnav{

  border-bottom:1px solid var(--line);

  background:var(--ink);

  position:sticky;

  top:0;

  z-index:10;

}

.topnav-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:14px 28px;

}

.topnav-home{

  font-family:var(--serif);

  color:var(--gold);

  text-decoration:none;

  font-size:15px;

}

.topnav-right{

  display:flex;

  align-items:center;

  gap:14px;

}

.topnav-name{

  color:var(--paper-dim);

  font-size:13px;

}

.topnav-signout{

  background:transparent;

  border:1px solid var(--line);

  color:var(--paper);

  font-family:var(--sans);

  font-size:13px;

  padding:6px 12px;

  cursor:pointer;

  border-radius:3px;

}

.topnav-signout:hover{

  border-color:var(--gold);

  color:var(--gold);

}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width:640px){

  .wrap{

    padding:0 18px;

  }

  .masthead{

    padding:36px 0 28px;

  }

  .masthead-top{

    font-size:11.5px;

  }

  .figure-block{

    padding:36px 0 32px;

  }

  .section{

    padding:32px 0;

  }

  .section-head{

    flex-direction:column;

    align-items:flex-start;

    gap:4px;

  }

  .section-head .total{

    font-size:17px;

  }

  .btc-panel{

    padding:18px;

  }

  .btc-top{

    flex-direction:column;

  }

  .btc-grid{

    grid-template-columns:repeat(2,1fr);

    gap:16px 12px;

  }

  .asset-row{

    flex-wrap:wrap;

  }

  .asset-value{

    margin-left:auto;

  }

  .gate-box{

    max-width:280px;

  }


  /* Transaction history */

  .transaction-header{

    display:none;

  }

  .transaction-row{

    grid-template-columns:1fr auto;

    gap:5px 12px;

    padding:16px 0;

  }

  .transaction-date{

    grid-column:1;

    grid-row:1;

    font-size:11px;

  }

  .transaction-amount{

    grid-column:2;

    grid-row:1 / span 2;

    align-self:center;

  }

  .transaction-description{

    grid-column:1;

    grid-row:2;

  }

  .transaction-description span{

    display:block;

  }

  .transaction-account{

    display:none;

  }

  .transaction-type{

    grid-column:1;

    grid-row:3;

  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width:520px){

  .asset-row{

    gap:14px;

  }

  .asset-icon{

    width:56px;

    height:56px;

  }

  .asset-value{

    font-size:16px;

  }

  .topnav-inner{

    padding:12px 18px;

  }

  .topnav-name{

    display:none;

  }

}


/* ============================================================
   RESPONSIVE — EXTRA SMALL
   ============================================================ */

@media (max-width:400px){

  .masthead-top{

    flex-direction:column;

    align-items:flex-start;

    gap:2px;

  }

  .btc-grid{

    grid-template-columns:1fr 1fr;

  }

  .figure{

    gap:8px;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){

  .live-dot{

    animation:none;

  }

  *{

    scroll-behavior:auto !important;

  }

}/* =========================================================
   OWNERSHIP OF RIGHTS & PROPERTIES
   ========================================================= */

.ownership-section{
  position:relative;
}

.ownership-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  padding:30px;
  margin-top:22px;
}

.ownership-intro{
  max-width:820px;
  margin-bottom:30px;
}

.ownership-label,
.contract-label{
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.ownership-intro p,
.ownership-contract p{
  margin:0;
  color:var(--paper-dim);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
}

.ownership-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 0 30px;
}

.ownership-stat{
  padding:22px 20px;
  border-right:1px solid var(--line);
}

.ownership-stat:last-child{
  border-right:0;
}

.ownership-stat span{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:9px;
}

.ownership-stat strong{
  display:block;
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  color:var(--paper);
}

.ownership-stat.outstanding strong{
  color:#F1DAD5;
}

.ownership-progress-block{
  margin-bottom:30px;
}

.ownership-progress-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:12px;
}

.ownership-progress-heading span{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}

.ownership-progress-heading strong{
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
  color:var(--paper);
}

.ownership-percent{
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  color:var(--paper-dim);
}

.ownership-progress{
  width:100%;
  height:7px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.ownership-progress-fill{
  height:100%;
  background:#C9B99A;
  transition:width .6s ease;
}

.ownership-contract{
  border-left:2px solid rgba(201,185,154,.55);
  padding:4px 0 4px 22px;
  margin-bottom:30px;
}

.ownership-contract p + p{
  margin-top:15px;
}

.ownership-contract strong{
  color:var(--paper);
  font-weight:600;
}

.ownership-status-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  padding-top:22px;
  gap:30px;
}

.ownership-status-row span{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}

.ownership-status-row strong{
  display:block;
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
  color:var(--paper);
}

.ownership-status-row .status-progress{
  color:#D9CBAF;
}


/* =========================================================
   MOBILE — OWNERSHIP
   ========================================================= */

@media (max-width:640px){

  .ownership-card{
    padding:20px;
  }

  .ownership-summary{
    grid-template-columns:1fr;
  }

  .ownership-stat{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:18px 0;
  }

  .ownership-stat:last-child{
    border-bottom:0;
  }

  .ownership-stat strong{
    font-size:25px;
  }

  .ownership-progress-heading{
    align-items:flex-start;
  }

  .ownership-percent{
    padding-top:2px;
  }

  .ownership-contract{
    padding-left:16px;
  }

  .ownership-intro p,
  .ownership-contract p{
    font-size:16px;
  }

  .ownership-status-row{
    grid-template-columns:1fr;
    gap:20px;
  }

}