:root{
  --black:#000;
  --ink:#070707;
  --panel:#0d0d0d;
  --silver:#d7d7d7;
  --silver2:#9a9a9a;
  --border:#262626;
  --text:#f1f1f1;
  --muted:#777;
  --danger:#c8a2a2;
  --serif:Baskerville,"Iowan Old Style","Times New Roman",serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

*{
  box-sizing:border-box
}

html{
  background:#000;
  color-scheme:dark;
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font:15px/1.65 var(--sans);
  min-height:100vh;
  overflow-x:hidden
}

a{
  color:inherit;
  text-decoration:none
}

img{
  max-width:100%;
  display:block
}

button,
input,
select,
textarea{
  font:inherit
}

button,
.button{
  cursor:pointer
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto
}


/* ===================================================
   HEADER
   =================================================== */

.site-header{
  height:76px;
  position:sticky;
  top:0;
  z-index:15;
  background:rgba(0,0,0,.94);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:13px;
  font:500 17px/1 var(--serif);
  letter-spacing:.17em;
  white-space:nowrap
}

.brand img,
.logo-slot{
  width:48px;
  height:35px;
  object-fit:contain
}

.brand .logo-slot,
.hero-logo.logo-slot{
  display:grid;
  place-items:center;
  border:1px solid #333;
  color:var(--muted);
  font:8px/1 var(--sans);
  text-align:center
}

.nav{
  display:flex;
  gap:25px;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px
}

.nav a:hover,
.nav a[aria-current=page]{
  color:var(--silver);
  border-bottom:1px solid var(--silver)
}

.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  width:44px;
  height:44px
}


/* ===================================================
   HERO
   =================================================== */

.hero{
  min-height:720px;
  display:grid;
  place-items:center;
  text-align:center;
  border-bottom:1px solid var(--border);
  padding:90px 0
}

.hero-logo{
  width:164px;
  height:118px;
  object-fit:contain;
  margin:0 auto 22px
}

.eyebrow,
.kicker{
  color:var(--silver2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.28em
}

.wordmark{
  font:500 clamp(24px,4vw,42px)/1 var(--serif);
  letter-spacing:.22em;
  margin:0 0 38px
}

.hero h1,
.page-title{
  font:400 clamp(46px,8vw,88px)/.98 var(--serif);
  letter-spacing:-.025em;
  margin:0 auto 26px;
  max-width:890px
}

.hero p{
  color:var(--silver2);
  font-size:17px;
  max-width:660px;
  margin:0 auto 36px
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center
}


/* ===================================================
   BUTTONS
   =================================================== */

.button,
button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--silver2);
  border-radius:2px;
  background:transparent;
  color:var(--silver);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  font-weight:700
}

.button.primary,
button.primary{
  background:var(--silver);
  color:#050505;
  border-color:var(--silver)
}

.button:hover,
button:hover{
  background:#171717
}

.button.primary:hover{
  background:#efefef
}

.button.subtle{
  border-color:var(--border);
  color:var(--silver2)
}


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

.section{
  padding:90px 0;
  border-bottom:1px solid var(--border)
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:34px
}

.section h2,
.panel h2{
  font:400 clamp(28px,4vw,44px)/1.1 var(--serif);
  margin:8px 0
}

.section-copy{
  color:var(--silver2);
  max-width:600px
}


/* ===================================================
   CARDS
   =================================================== */

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.card,
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:3px;
  padding:28px
}

.card{
  display:flex;
  flex-direction:column;
  min-height:310px
}

.badge{
  align-self:flex-start;
  border:1px solid #464646;
  padding:4px 9px;
  color:var(--silver2);
  font-size:9px;
  letter-spacing:.2em
}

.card h3{
  font:400 25px/1.15 var(--serif);
  margin:22px 0 10px
}

.meta{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em
}

.card p{
  color:var(--silver2)
}

.price{
  font:400 25px/1 var(--serif);
  margin-top:auto;
  padding-top:15px
}

.card .button{
  margin-top:20px
}


/* ===================================================
   PAGE HERO
   =================================================== */

.page-hero{
  padding:80px 0 46px;
  border-bottom:1px solid var(--border)
}

.page-title{
  font-size:clamp(44px,7vw,74px);
  margin:8px 0 14px
}

.page-subtitle{
  color:var(--silver2);
  max-width:650px
}


/* ===================================================
   FORMS
   =================================================== */

.form-wrap{
  width:min(820px,calc(100% - 40px));
  margin:54px auto 100px
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:20px
}

.field.full{
  grid-column:1/-1
}

label{
  color:var(--silver);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase
}

input,
select,
textarea{
  width:100%;
  background:#050505;
  border:1px solid #303030;
  border-radius:2px;
  color:var(--text);
  padding:14px;
  min-height:50px;
  outline:none
}

textarea{
  min-height:150px;
  resize:vertical
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--silver2)
}

.hint,
.notice{
  color:var(--muted);
  font-size:12px
}

.checkbox{
  display:flex;
  align-items:flex-start;
  gap:11px;
  text-transform:none;
  letter-spacing:0;
  color:var(--silver2)
}

.checkbox input{
  width:18px;
  min-height:18px;
  margin-top:3px
}

.fee{
  display:flex;
  justify-content:space-between;
  border-block:1px solid var(--border);
  padding:20px 0;
  margin:25px 0;
  color:var(--silver)
}


/* ===================================================
   FILTERS / DASHBOARD
   =================================================== */

.filters{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:12px;
  margin-bottom:28px
}

.tabs{
  display:flex;
  gap:8px;
  margin:20px 0 30px
}

.tab.active{
  background:var(--silver);
  color:#000
}

.dashboard-grid{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:20px
}

.sidebar .button{
  width:100%;
  margin:5px 0
}

.post-row{
  display:grid;
  grid-template-columns:1.5fr repeat(4,.7fr);
  gap:15px;
  align-items:center;
  border-top:1px solid var(--border);
  padding:20px 0
}

.post-row:first-child{
  border-top:0
}

.row-actions{
  display:flex;
  gap:8px
}

.row-actions .button{
  min-height:34px;
  padding:0 10px;
  font-size:9px
}


/* ===================================================
   DETAIL PAGE
   =================================================== */

.detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);
  gap:24px;
  width:100%;
  align-items:start
}

.detail-grid > *{
  min-width:0
}

.detail-main{
  min-width:0
}

.detail-grid .panel{
  min-width:0;
  overflow-wrap:anywhere
}

.detail-copy{
  font-size:17px;
  color:var(--silver2);
  white-space:pre-line;
  overflow-wrap:anywhere;
  word-break:break-word
}

.contact-panel{
  position:sticky;
  top:100px;
  height:max-content;
  min-width:0;
  overflow:hidden
}

.contact-panel p{
  overflow-wrap:anywhere;
  word-break:break-word
}

.contact-panel .button{
  width:100%;
  margin-top:10px;
  white-space:normal;
  text-align:center;
  overflow-wrap:anywhere
}

.report{
  margin-top:50px;
  padding-top:25px;
  border-top:1px solid var(--border)
}

.report .panel{
  margin-top:18px
}


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

.site-footer{
  padding:60px 0 30px
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:30px
}

.footer-grid h4{
  font:400 16px var(--serif);
  letter-spacing:.12em
}

.footer-grid a{
  display:block;
  color:var(--muted);
  margin:7px 0
}

.copyright{
  border-top:1px solid var(--border);
  margin-top:45px;
  padding-top:22px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.1em
}


/* ===================================================
   MODAL
   =================================================== */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.86);
  z-index:30;
  display:grid;
  place-items:center;
  padding:20px
}

.modal[hidden]{
  display:none
}

.modal-card{
  width:min(720px,100%);
  max-height:86vh;
  background:var(--panel);
  border:1px solid #444;
  padding:25px
}

.modal-scroll{
  height:50vh;
  overflow:auto;
  border-block:1px solid var(--border);
  padding:20px 4px;
  margin:20px 0;
  color:var(--silver2)
}


/* ===================================================
   MISC
   =================================================== */

.status{
  padding:4px 8px;
  border:1px solid var(--border);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em
}

.status.active{
  color:var(--silver);
  border-color:#666
}

.center{
  text-align:center
}

.empty{
  padding:60px;
  text-align:center;
  color:var(--muted);
  border:1px solid var(--border)
}

.image-preview{
  aspect-ratio:1;
  background:#090909;
  border:1px solid var(--border);
  object-fit:cover;
  width:150px
}

.toast{
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--silver);
  color:#000;
  padding:14px 20px;
  z-index:40
}

.toast[hidden]{
  display:none
}


/* ===================================================
   TABLET / MOBILE
   =================================================== */

@media(max-width:820px){

  .nav{
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:#050505;
    padding:20px;
    flex-direction:column;
    align-items:stretch
  }

  .nav.open{
    display:flex
  }

  .menu-toggle{
    display:block
  }

  .hero{
    min-height:650px
  }

  .grid{
    grid-template-columns:1fr
  }

  .filters{
    grid-template-columns:1fr 1fr
  }

  .dashboard-grid{
    grid-template-columns:1fr
  }

  .detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    width:100%
  }

  .detail-main,
  .contact-panel{
    width:100%;
    min-width:0
  }

  .contact-panel{
    position:static;
    top:auto
  }

  .detail-grid .page-title{
    font-size:clamp(36px,10vw,58px);
    overflow-wrap:anywhere
  }

  .detail-copy{
    font-size:16px;
    line-height:1.7
  }

  .footer-grid{
    grid-template-columns:1fr
  }

  .post-row{
    grid-template-columns:1fr 1fr
  }

  .post-row>*:first-child{
    grid-column:1/-1
  }

  .form-grid{
    grid-template-columns:1fr
  }

  .field.full{
    grid-column:auto
  }

}


/* ===================================================
   SMALL MOBILE
   =================================================== */

@media(max-width:520px){

  .container,
  .form-wrap{
    width:min(calc(100% - 28px),1180px)
  }

  .site-header{
    height:66px
  }

  .brand{
    font-size:14px;
    letter-spacing:.12em
  }

  .brand img,
  .brand .logo-slot{
    width:39px;
    height:30px
  }

  .nav{
    top:66px
  }

  .hero{
    padding:70px 0
  }

  .hero h1{
    font-size:48px
  }

  .section{
    padding:50px 0
  }

  .actions{
    flex-direction:column
  }

  .actions .button{
    width:100%
  }

  .filters{
    grid-template-columns:1fr
  }

  .card,
  .panel{
    padding:21px
  }

  .page-hero{
    padding:56px 0 34px
  }

  .post-row{
    grid-template-columns:1fr
  }

  .post-row>*:first-child{
    grid-column:auto
  }


  /* -----------------------------------------------
     DETAIL PAGE MOBILE FIXES
     ----------------------------------------------- */

  .detail-grid{
    display:block;
    width:100%;
    max-width:100%;
  }

  .detail-main{
    width:100%;
    max-width:100%;
  }

  .detail-main > .panel{
    width:100%;
    max-width:100%;
    margin:0
  }

  .detail-grid .page-title{
    font-size:38px;
    line-height:1;
    margin-top:16px;
    max-width:100%
  }

  .detail-grid .price{
    font-size:23px;
    margin-top:18px
  }

  .detail-copy{
    width:100%;
    max-width:100%;
    font-size:16px;
    overflow-wrap:anywhere;
    word-break:break-word
  }

  .detail-grid .meta{
    line-height:1.7;
    overflow-wrap:anywhere
  }

  .contact-panel{
    width:100%;
    max-width:100%;
    margin-top:20px;
    position:static
  }

  .contact-panel h2{
    font-size:30px
  }

  .contact-panel .button{
    display:flex;
    width:100%;
    max-width:100%;
    min-height:50px;
    padding:10px 14px;
    white-space:normal;
    word-break:break-word
  }

  .report{
    margin-top:30px;
    padding-top:20px
  }

  .report > .button{
    width:100%
  }

  .report .panel{
    width:100%;
    max-width:100%
  }

  .empty{
    padding:36px 20px
  }

  .toast{
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
    text-align:center
  }

}