/* ====================================================================
   METHOD DOSSIER — interactive classified-folder object  v1
   Open the folder to reveal the spatial-libretto document.
   The four restricted elements stay sealed under redaction bars.
   ==================================================================== */
.methodDossier{
  width:min(640px, 100%);
  margin:0 auto;
  font-family:Inter,system-ui,sans-serif;
}
.mdEyebrow{
  margin:0 0 14px;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#c7a45a;
}

/* --- Stage: the document sits beneath, the cover lifts away --- */
.dossierStage{
  position:relative;
  margin-top:30px;
}

/* ====================  THE DOCUMENT  ==================== */
.dossierDoc{
  position:relative;
  padding:clamp(26px,4vw,40px) clamp(24px,4vw,42px) clamp(22px,3vw,32px);
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(120,90,45,.10) 31px 32px),
    linear-gradient(155deg, #f3e7c8 0%, #e7d6ad 100%);
  border:1px solid rgba(70,46,17,.5);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 60px rgba(120,90,45,.14),
    0 30px 70px rgba(0,0,0,.5);
  color:#2a1f12;
}
.docHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1.5px solid rgba(70,46,17,.4);
}
.docFileNo{
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(42,31,18,.62);
}
.docFileNo strong{ color:rgba(42,31,18,.9); font-weight:700; }
.docClass{
  flex-shrink:0;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:#8d342a;
  border:1.5px solid rgba(141,52,42,.6);
  padding:4px 9px;
  border-radius:2px;
}
.docKicker{
  margin:18px 0 4px;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(42,31,18,.55);
}
.docTitle{
  margin:0 0 16px;
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  line-height: 1.15;
  color:#241a0e;
}
.docStatement{
  margin:0 0 22px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.08rem,1.8vw,1.28rem);
  line-height:1.6;
  color:#33260f;
}
.docStatement em{ font-style:italic; }

.docRule{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(141,52,42,.85);
}
.docRule::after{
  content:"";
  flex:1;
  height:1.5px;
  background:repeating-linear-gradient(90deg, rgba(141,52,42,.5) 0 6px, transparent 6px 11px);
}

/* --- Redaction inventory --- */
.redactionList{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.redactionRow{
  display:grid;
  grid-template-columns:minmax(112px,auto) minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.redLabel{
  font-family:"Cormorant Garamond",serif;
  font-size:1.12rem;
  font-weight:600;
  color:#2a1f12;
  white-space:nowrap;
}
.redactionBar{
  position:relative;
  appearance:none;
  display:block;
  width:100%;
  height:26px;
  border:none;
  border-radius:1px;
  cursor:pointer;
  background:
    repeating-linear-gradient(95deg, #19140d 0 16px, #221b11 16px 30px);
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.redactionBar::before{
  /* faint ghost of "text" under the redaction */
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 22px, transparent 22px 30px);
}
.redactionBar:hover,.redactionBar:focus-visible{
  outline:none;
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(199,164,90,.55);
}
.redactionBar .sealFlash{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:#e7caa0;
  opacity:0;
  pointer-events:none;
}
.redactionBar.is-poked{ animation:redShudder .42s ease; }
.redactionBar.is-poked .sealFlash{ animation:sealFlash 1.5s ease; }
@keyframes redShudder{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-3px);}
  45%{transform:translateX(3px);}
  70%{transform:translateX(-2px);}
}
@keyframes sealFlash{
  0%{opacity:0;}
  14%{opacity:1;}
  72%{opacity:1;}
  100%{opacity:0;}
}

/* --- Access footer --- */
.docAccess{
  padding-top:18px;
  border-top:1.5px solid rgba(70,46,17,.4);
}
.docAccess p{
  margin:0 0 14px;
  font-size:.92rem;
  line-height:1.6;
  color:rgba(42,31,18,.8);
}
.docAccessLink{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px;
  border:1.5px solid rgba(141,52,42,.55);
  border-radius:2px;
  background:rgba(141,52,42,.07);
  color:#7a241c;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  transition:background .18s,transform .18s;
}
.docAccessLink:hover{ background:rgba(141,52,42,.15); transform:translateY(-1px); }
.docAccessLink span{ font-size:.95rem; }

/* --- Reseal control (sits at the end of the document) --- */
.dossierReseal{
  display:block;
  margin:20px auto 0;
  appearance:none;
  border:1px solid rgba(70,46,17,.34);
  background:transparent;
  color:rgba(42,31,18,.6);
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 16px;
  border-radius:2px;
  cursor:pointer;
  opacity:0;
  transition:opacity .35s .3s, color .18s, border-color .18s;
}
.methodDossier.is-open .dossierReseal{ opacity:1; }
.dossierReseal:hover{ color:#7a241c; border-color:rgba(141,52,42,.45); }

/* ====================  THE FOLDER COVER  ==================== */
.dossierCover{
  position:absolute;
  inset:0;
  z-index:4;
  appearance:none;
  cursor:pointer;
  text-align:left;
  border:1px solid rgba(58,38,14,.85);
  border-radius:3px 12px 3px 3px;
  padding:0;
  background:
    radial-gradient(circle at 78% 12%, rgba(255,240,205,.16), transparent 42%),
    repeating-linear-gradient(91deg, rgba(0,0,0,.018) 0 3px, transparent 3px 7px),
    linear-gradient(158deg, #d3ba85 0%, #c0a268 52%, #ab8d56 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,247,222,.4),
    inset 0 -22px 40px rgba(70,46,17,.28),
    0 32px 70px rgba(0,0,0,.55);
  transform-origin:50% 90%;
  transition:transform .72s cubic-bezier(.34,1.16,.5,1), opacity .55s ease .12s;
}
.dossierCover::after{
  /* manila fold line near the spine */
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg, rgba(70,46,17,.32), transparent);
  border-right:1px solid rgba(70,46,17,.22);
}
.methodDossier.is-open .dossierCover{
  transform:translateY(-40px) scale(.97);
  opacity:0;
  pointer-events:none;
}

/* tab — the project label, projects above the folder's top edge */
.coverTab{
  position:absolute;
  top:-23px;left:34px;
  padding:7px 18px 16px;
  background:linear-gradient(165deg, #d3ba85, #b89a63);
  border:1px solid rgba(58,38,14,.85);
  border-bottom:none;
  border-radius:7px 7px 0 0;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#3c2c12;
  box-shadow:0 -3px 10px rgba(0,0,0,.22);
}

.coverInner{
  position:absolute;
  inset:0;
  padding:clamp(30px,5vw,52px) clamp(26px,4vw,40px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.coverKicker{
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(58,38,14,.62);
  margin-bottom:6px;
}
.coverTitle{
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);
  line-height:1.02;
  color:#2c1e0c;
  margin-bottom:10px;
}
.coverNo{
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(58,38,14,.66);
}

/* CONFIDENTIAL stamp */
.coverStamp{
  position:absolute;
  right:clamp(20px,5vw,46px);
  bottom:clamp(34px,7vw,62px);
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:clamp(.92rem,2vw,1.18rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(141,52,42,.82);
  border:2.5px solid rgba(141,52,42,.62);
  border-radius:3px;
  padding:7px 15px;
  transform:rotate(-9deg);
  box-shadow:0 1px 0 rgba(255,255,255,.18);
}

/* string-and-button tie */
.coverTie{
  position:absolute;
  right:clamp(26px,6vw,54px);
  top:clamp(26px,5vw,46px);
  width:30px;height:30px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #5a4222, #2c2010);
  box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,235,190,.25);
}
.coverTie::before,.coverTie::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:2px;height:64px;
  background:linear-gradient(180deg, rgba(58,40,16,.9), rgba(58,40,16,.3));
  transform-origin:top center;
}
.coverTie::before{ transform:translate(-50%,0) rotate(28deg); }
.coverTie::after{ transform:translate(-50%,0) rotate(-150deg); height:48px; }

.coverHint{
  position:absolute;
  left:clamp(26px,4vw,40px);
  bottom:clamp(26px,4vw,40px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:"IBM Plex Sans Condensed",Inter,sans-serif;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:#3c2c12;
}
.coverHint::before{
  content:"";
  width:13px;height:13px;
  border:2px solid #3c2c12;
  border-radius:50%;
  border-top-color:transparent;
  border-right-color:transparent;
}
.dossierCover:hover .coverHint,.dossierCover:focus-visible .coverHint{ color:#7a241c; }
.dossierCover:hover,.dossierCover:focus-visible{ outline:none; }
.dossierCover:hover{ transform:translateY(-3px); }
.methodDossier.is-open .dossierCover:hover{ transform:translateY(-40px) scale(.97); }

/* keep the document from being interactive while sealed */
.methodDossier:not(.is-open) .dossierDoc{ pointer-events:none; }

@media(max-width:560px){
  .redactionRow{ grid-template-columns:1fr; gap:5px; }
  .redLabel{ white-space:normal; }
  .coverStamp{ bottom:auto; top:46%; }
  .docHead{ flex-direction:column; gap:10px; }
}
@media(prefers-reduced-motion:reduce){
  .dossierCover{ transition:opacity .3s; }
  .methodDossier.is-open .dossierCover{ transform:none; }
  .redactionBar.is-poked{ animation:none; }
}


/* Integration polish — Michael Omoke / Dreamers page */
.dreamers-public-page .methodDossier{
  width:min(780px,100%);
}
.dreamers-public-page .sgtSection--methodDossier{
  background:
    radial-gradient(circle at 20% 16%, rgba(214,170,88,.10), transparent 32%),
    radial-gradient(circle at 82% 84%, rgba(111,32,22,.14), transparent 30%),
    #090706;
}
.dreamers-public-page .methodDossier .mdEyebrow{
  color:#d6aa58;
  margin-left:.15rem;
}
.dreamers-public-page .methodDossier .dossierStage{
  filter:drop-shadow(0 34px 88px rgba(0,0,0,.46));
}
.dreamers-public-page .methodDossier .dossierDoc{
  min-height:560px;
}
.dreamers-public-page .methodDossier .docAccessLink{
  min-height:44px;
}
@media(max-width:680px){
  .dreamers-public-page .methodDossier{width:100%;}
  .dreamers-public-page .methodDossier .dossierStage{margin-top:24px;}
  .dreamers-public-page .methodDossier .dossierDoc{min-height:0;}
  .dreamers-public-page .methodDossier .coverInner{padding:2rem 1.3rem;}
  .dreamers-public-page .methodDossier .coverStamp{right:1rem;}
  .dreamers-public-page .methodDossier .docAccessLink{width:100%;justify-content:center;text-align:center;}
}