/* ============================================================
   Accidental Monarchy LLC - ACCMONARCH.HAIR
   HERALDRY theme - style.css
   Throne-Bordeaux throne room, crown-gold court regalia
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --throne:#1B1016;        /* body bg - deep wine velvet throne room */
  --parchment:#EADAD2;     /* parchment-rose text + giant headline */
  --gold:#C9A24B;          /* crown-gold accent */
  --panel:#241522;         /* velvet-panel raised panels */
  --crypt:#120A10;         /* crypt-deep deeper panels */
  --plum:#6E3A5E;          /* heirloom-plum ribbons, dividers */
  --rose-dusk:#C9A8A0;     /* rose-dusk body text */
  --hairline:#33222E;      /* thin separators */
}

html{scroll-behavior:smooth;}

body{
  background-color:var(--throne);
  color:var(--rose-dusk);
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  color:var(--parchment);
  font-weight:normal;
  line-height:1.2;
  letter-spacing:.5px;
}

a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--parchment);}

img{max-width:100%;}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.cover-link{position:absolute;inset:0;opacity:0;}

/* ============================================================
   NAVIGATION  ::  HERALDRY RIBBON
   A centered crest with swallow-tail ribbons either side
   ============================================================ */

.heraldry{display:flex;align-items:flex-start;justify-content:center;gap:0;padding-top:18px;position:relative;z-index:20;flex-wrap:wrap;}

.crest{
  position:relative;
  width:118px;
  height:132px;
  background-color:var(--panel);
  border:2px solid var(--gold);
  border-radius:6px 6px 22px 22px;
  flex:0 0 auto;
  margin:34px 8px 0;
  z-index:5;
}
.crest .shield-glyph{position:absolute;inset:8px;border:1px solid var(--plum);border-radius:4px 4px 14px 14px;display:flex;align-items:center;justify-content:center;}

.crown{display:flex;align-items:flex-end;justify-content:center;height:26px;margin:10px auto 0;}
.crown .spike{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:18px solid var(--gold);margin:0 2px;}
.crown .spike.s{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:13px solid var(--gold);}

.monogram-text{font-size:32px;color:var(--gold);letter-spacing:2px;text-align:center;font-family:Georgia,serif;font-weight:bold;}
.moto-text{font-size:9px;color:var(--rose-dusk);letter-spacing:3px;text-align:center;margin-top:6px;text-transform:uppercase;}

.ribbon{
  position:relative;
  margin-top:30px;
  background-color:var(--plum);
  border:2px solid var(--gold);
  padding:22px 30px 26px;
  min-width:230px;
}
.ribbon.left{border-radius:16px 4px 4px 16px;margin-right:-4px;}
.ribbon.right{border-radius:4px 16px 16px 4px;margin-left:-4px;}
.ribbon .fold{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-top:10px;
}
.ribbon .fold a{
  display:block;
  background-color:var(--crypt);
  border:1px solid var(--gold);
  color:var(--parchment);
  padding:8px 16px;
  border-radius:300px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-family:Georgia,serif;
}
.ribbon .fold a:hover{background-color:var(--gold);color:var(--crypt);}
.ribbon .ribbon-title{
  font-size:10px;color:var(--gold);letter-spacing:4px;text-transform:uppercase;text-align:center;
}
/* swallow tail */
.ribbon.left::after{
  content:"";
  position:absolute;right:-12px;top:26px;
  border-top:14px solid transparent;border-bottom:14px solid transparent;
  border-left:12px solid var(--plum);
}
.ribbon.left::before{
  content:"";
  position:absolute;transform:translateX(0);
}
.ribbon.right::after{
  content:"";
  position:absolute;left:-12px;top:26px;
  border-top:14px solid transparent;border-bottom:14px solid transparent;
  border-right:12px solid var(--plum);
}

.nav-trigger{
  display:none;
  margin:16px auto 0;
  background-color:var(--gold);
  color:var(--throne);
  border:2px solid var(--gold);
  padding:12px 26px;
  border-radius:300px;
  font-family:inherit;
  letter-spacing:3px;
  font-size:15px;
  text-transform:uppercase;
  cursor:pointer;
}
.nav-trigger:hover{background-color:var(--parchment);border-color:var(--parchment);}

@media(min-width:820px){
  .nav-trigger{display:none;}
  .heraldry .ribbon{display:block;}
}

@media(max-width:819px){
  .ribbon.left,.ribbon.right{border-radius:14px;margin:8px 4px;width:100%;}
  .ribbon .fold{justify-content:center;}
  .crest{margin:0 auto;}
  .heraldry{flex-direction:column;align-items:center;}
  .nav-trigger{display:block;order:-1;flex:0 0 auto;}
  .heraldry[data-open="false"] .ribbon{display:none;}
}

/* skip-to-content for reduced native nav clutter */
.nave-row{display:none;}

/* ============================================================
   INTRO BANNER under nav - announcement band
   ============================================================ */

.announce-band{
  background-color:var(--gold);
  color:var(--crypt);
  text-align:center;
  padding:14px 16px;
  margin-top:24px;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.announce-band strong{color:var(--throne);}
.announce-band span{color:var(--crypt);}

/* ============================================================
   HERO :: THRONE HALL
   Symmetric manifesto flanked by fluted columns with sconces
   ============================================================ */

.thronehall{
  position:relative;
  background-color:var(--throne);
  padding:66px 24px 0;
  overflow-x:hidden;
}

.hero-center{flex:1;max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:2;}

/* widening step bands under the throne, CTAs on the middle step */
.hero-steps{display:flex;flex-direction:column;align-items:center;max-width:1200px;margin:34px auto 0;padding:0 12px;}
.step-row{height:22px;border-radius:6px 8px 0 0;}
.step-row.one{background-color:var(--crypt);width:34%;}
.step-row.two{
  background-color:var(--plum);
  width:56%;
  height:auto;
  padding:12px 0;
  border-radius:8px 10px 0 0;
  display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;
}
.step-row.three{background-color:var(--gold);width:78%;height:26px;border-radius:8px;}
.step-row a{display:inline-block;padding:12px 24px;border-radius:300px;font-size:15px;letter-spacing:2px;text-transform:uppercase;background-color:var(--throne);color:var(--gold);border:2px solid var(--gold);}
.step-row a:hover{background-color:var(--throne);color:var(--parchment);border-color:var(--parchment);}

.col-left,.col-right{
  position:absolute;top:0;bottom:0;width:clamp(150px,16vw,240px);
  display:none;
}
@media(min-width:900px){.col-left,.col-right{display:flex;}}

.thronehall .column{display:flex;flex-direction:column;}
.col-left .column{width:clamp(140px,14vw,210px);}
.col-right .column{width:clamp(140px,14vw,210px);margin-left:auto;}
.col-left.pick{left:0;}
.col-right.pick{right:0;}

@media(min-width:900px){
  .thronehall .hero-center{flex:0 0 56%;}
}

/* twin podium */
.twin{display:flex;gap:0;width:100%;height:auto;}
.podium{width:50%; }

/* fluted shaft use small blocks to suggest flutes */
.flutes{display:flex;flex-direction:column;justify-content:flex-start;background-color:var(--panel);border:2px solid var(--hairline);width:64px;margin:0 auto;border-radius:8px 8px 4px 4px;}
.flutes .f{
  height:34px;width:100%;position:relative;border-bottom:1px solid var(--hairline);
}
/* alternating shading gives flute illusion */
.flutes .f:nth-child(odd){background-color:var(--crypt);}

.flute-wrap{width:72px;margin:0 auto;}

.wall-sconce{width:26px;height:34px;margin:0 auto;background-color:var(--crypt);border:1px solid var(--gold);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);}
.lightpool{width:120px;height:0;margin:0 auto;margin-top:-4px; }
.lightpool{
  width:120px;height:34px;
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  background-color:var(--gold);
}
.pennant{width:34px;height:20px;background-color:var(--plum);margin:0 auto;border-radius:0 0 30px 30px;}

.hero-linear{text-align:center;padding:14px 0 6px;}
.crown-banner{color:var(--gold);letter-spacing:1px;}
.hero-linear .kicker{color:var(--gold);letter-spacing:4px;text-transform:uppercase;font-size:14px;display:flex;align-items:center;justify-content:center;gap:14px;}
.hero-linear .kicker::before,.hero-linear .kicker::after{content:"";height:1px;width:70px;background-color:var(--hairline);display:inline-block;}
.hero-linear h1{
  font-size:clamp(40px,7vw,84px);
  margin-top:10px;
  line-height:1;
}
.hero-linear h1 .gold-word{color:var(--gold);}
.hero-sub{
  color:var(--rose-dusk);
  font-size:14px;letter-spacing:5px;text-transform:uppercase;margin-top:16px;
}
.hero-copy{
  max-width:680px;margin:20px auto 0;color:var(--rose-dusk);font-size:16px;
}
.hero-copy b,strong{color:var(--parchment);}

/* ============================================================
   SECTION SHARED
   ============================================================ */
.std-section h2{font-size:34px;color:var(--parchment);}
.flourish{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);}
.flourish::before,.flourish::after{content:"";height:2px;width:90px;background-color:var(--plum);display:inline-block;}

.lozenge{width:10px;height:10px;transform:rotate(45deg);background-color:var(--gold);display:inline-block;}

/* ============================================================
   ROOM PANEL STYLES, note all class selectors
   ============================================================ */

.intro{
  max-width:820px;margin:0 auto;text-align:center;padding:26px 0 8px;color:var(--rose-dusk);
}

.heirloom-list{color:var(--rose-dusk);}

/* 4. services split cards */
.svc-split{list-style:none;display:block;max-width:900px;margin:26px auto;}

.svc-item{background:var(--crypt);padding:28px 26px;margin-bottom:2px;border-top:2px solid var(--plum);}
.svc-item h3{color:var(--gold);font-size:21px;margin-bottom:10px;letter-spacing:2px;text-transform:uppercase;}
.svc-item p{color:var(--rose-dusk);}

/* accordion for intro repeated? small only */

/* ============================================================
   CHRONICLE SCROLL SECTION
   ============================================================ */
.chronicle{
  background-color:var(--panel);
  border-top:2px solid var(--hairline);
  border-bottom:2px solid var(--hairline);
  position:relative;
  padding:54px 0;
}
.chronicle .chronicle-head{text-align:center;margin-bottom:34px;}
.chronicle-head h2{color:var(--parchment);}
.chronicle-head p{color:var(--rose-dusk);max-width:560px;margin:10px auto 0;}

.chronicle-entry{
  display:flex;gap:26px;align-items:flex-start;
  background-color:var(--crypt);
  border:1px solid var(--hairline);
  padding:26px 26px;
  margin-bottom:26px;
}
.medallion{flex:0 0 92px;}
.skin-disc{
  width:78px;height:78px;border-radius:50%;
  background-color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px var(--panel),0 0 0 7px var(--plum);
}
.skin-disc .idx{font-size:34px;color:var(--throne);font-weight:bold;}
.entry-text{flex:1;}
.entry-text h3{color:var(--gold);letter-spacing:1px;font-size:20px;margin-bottom:8px;}
.entry-text p{color:var(--rose-dusk);}

.chronicle-divider{display:flex;align-items:center;color:var(--plum);margin:6px 40px 22px;position:relative;}
.chronicle-divider::before,.chronicle-divider::after{content:"";flex:1;height:1px;background-color:var(--gold);opacity:1}
.crown-glyph{color:var(--gold);margin:0 20px;font-size:14px;}

@media(max-width:700px){
  .chronicle-entry{flex-direction:column;}
  .medallion{margin:0 auto;}
  .entry-text{text-align:center;}
}

/* ============================================================
   SERVICES LIST ON INDEX + SERVICES PAGE
   ============================================================ */
.vassal-row{
  list-style:none;
  max-width:900px;margin:0 auto;
}
.vassal-row li{
  border-left:3px solid var(--gold);
  border-top:1px solid var(--hairline);
  background-color:var(--crypt);
  padding:22px 22px;
}
.vassal-row h3{color:var(--gold);font-size:22px;}
.vassal-row .price-tag{color:var(--parchment);letter-spacing:2px;font-size:15px;}

.readline a{font-size:14px;letter-spacing:2px;text-transform:uppercase;}

/* ============================================================
   LOGO-STRAP / SEASON  - COURT ANNOUNCEMENT STRIP (gold)
   ============================================================ */
.court-announce{
  background-color:var(--gold);
  color:var(--throne);
  position:relative;
  padding:46px 24px;
  text-align:center;
}
.court-announce .kick{color:var(--crypt);letter-spacing:7px;font-size:14px;text-transform:uppercase;}
.court-announce h2{color:var(--throne);font-size:clamp(26px,4vw,44px);}
.court-announce .note{max-width:760px;margin:14px auto 0;color:var(--crypt);font-size:16px;}
.court-announce .note strong{color:var(--throne);}

/* the wax/seal flourish */
.court-emb{display:flex;align-items:center;justify-content:center;gap:22px;}
.court-emb .arm{height:2px;width:120px;background-color:var(--throne);}

/* ============================================================
   FOUR-fold pivot cards (shared small tiles)
   ============================================================ */
.mote-grid{
  list-style:none;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:1100px;margin:26px auto 0;
}
.mote-grid li{
  background-color:var(--panel);
  border:1px solid var(--hairline);
  border-top:3px solid var(--gold);
  padding:24px;
  text-align:center;
}
.mote-grid li .num{color:var(--gold);letter-spacing:3px;font-size:15px;}
.mote-grid li h3{color:var(--parchment);font-size:19px;margin-top:8px;}
.mote-grid li p{color:var(--rose-dusk);font-size:15px;margin-top:8px;}

/* ============================================================
   ABOUT / STUDIO AROUND
   ============================================================ */
.studio-band{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;}
@media(max-width:820px){.studio-band{grid-template-columns:1fr;}}
.studio-band .cap-head{grid-column:1 / -1;text-align:center;margin-bottom:18px;}
.studio-tile{
  background-color:var(--panel);
  border:1px solid var(--hairline);
  border-left:120px solid var(--gold);
  padding:26px 26px 26px 28px;
}
.studio-tile h3,.studio-tile h4{color:var(--gold);}
.studio-tile p{color:var(--rose-dusk);}
.court-numbers dt{color:var(--rose-dusk);font-weight:bold;margin-top:16px;}
.court-numbers dd{margin-left:14px;color:var(--rose-dusk);}

.rule{height:2px;background-color:var(--plum);max-width:1000px;margin:30px auto;}

/* ============================================================
   STEPS & PROCESS
   ============================================================ */
.process-list{list-style:none;max-width:1000px;margin:0 auto;}
.process-list li{
  display:flex;gap:20px;align-items:flex-start;
  border-bottom:1px solid var(--hairline);padding:18px 4px;
}
.process-list li .stepnum{
  color:var(--gold);font-size:34px;font-weight:bold;font-family:Georgia,serif;min-width:56px;
}
.process-list li h4{color:var(--parchment);font-size:18px;}
.process-list li p{color:var(--rose-dusk);}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1100px;margin:0 auto;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.contact-form{
  background-color:var(--panel);
  border:1px solid var(--hairline);
  padding:26px;border-top:4px solid var(--gold);
}
.contact-form label{display:block;color:var(--parchment);margin:14px 0 6px;letter-spacing:1px;font-size:14px;text-transform:uppercase;}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;
  background-color:var(--crypt);
  border:1px solid var(--plum);
  color:var(--parchment);
  padding:11px 12px;
  font-family:inherit;font-size:16px;border-radius:4px;
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:none;border-color:var(--gold);
}
.btn{
  display:inline-block;background-color:var(--gold);color:var(--throne);
  border:none;padding:14px 28px;font-family:inherit;letter-spacing:2px;
  text-transform:uppercase;font-size:15px;cursor:pointer;border-radius:300px;
  margin-top:16px;
}
.btn:hover{background-color:var(--parchment);color:var(--throne);}
.form-note{font-size:14px;color:var(--rose-dusk);margin-top:12px;}

.contact-details dt{color:var(--gold);margin-top:20px;text-transform:uppercase;letter-spacing:1px;font-size:14px;}
.contact-details dd{color:var(--rose-dusk);margin-bottom:6px;}

.faq-q{color:var(--gold);margin-top:22px;font-size:18px;}
.faq-a{color:var(--rose-dusk);margin-top:6px;}
.contact-details .city{color:var(--rose-dusk);font-style:normal;}

/* ============================================================
   FONT OF LEGAL / internal section decoration
   ============================================================ */
.index-tbl{list-style:none;margin:20px 0;}
.index-tbl a{color:var(--gold);letter-spacing:2px;}

/* ============================================================
   SEAL SIGNATURE FOOTER  ::  .sealfoot
   ============================================================ */
.sealfoot{
  position:relative;
  background-color:var(--crypt);
  border-top:2px solid var(--gold);
  margin-top:34px;
  padding:42px 24px 40px;
  text-align:center;
  width:100%;
  z-index:2;
}
.seal-row-a{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;position:relative;z-index:2;}
.seal-tile{
  width:78px;height:78px;
  background-color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  font-size:34px;color:var(--throne);font-weight:bold;font-family:Georgia,serif;
  transform:rotate(2deg);
  box-shadow:0 0 0 8px var(--throne),0 0 0 9px var(--gold);
}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;font-size:14px;color:var(--gold);margin-top:22px;position:relative;z-index:2;}
.foot-links a{letter-spacing:2px;text-transform:uppercase;}
.bottom-line{color:var(--rose-dusk);margin-top:16px;font-size:14px;position:relative;z-index:1;}
.bottom-line span{color:var(--parchment);}

/* invisible watermark (per instruction, hidden) */
.watermark{position:absolute;visibility:hidden;}

/* ============================================================
   SCROLL REVEAL (safe noscript)
   ============================================================ */
.reveal{opacity:1;}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease;}
.js .reveal.in{opacity:1;transform:none;}

/* end */