/* ============================================================
   CONCEPT NOTE

   A project dossier built from the site's paper, type, and ruled structure.
   ============================================================ */

.concept-note{
  position: relative;
  z-index: 1;
  font-family: var(--sans);
}

.concept-hero{
  padding: clamp(34px, 5vw, 74px) clamp(24px, 4vw, 56px) clamp(54px, 8vw, 108px);
  border-bottom: 1px solid var(--line);
}

.concept-back{
  display: inline-block;
  margin-bottom: clamp(34px, 5vw, 66px);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.concept-back:hover{ color: var(--green); }

.concept-type{
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.4;
}

.concept-hero h1{
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(52px, 7vw, 94px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.concept-subtitle{
  max-width: 74ch;
  margin: 28px 0 0;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  text-wrap: pretty;
}

.concept-authors{
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.concept-opening{
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 9vw, 136px);
  align-items: center;
  padding: clamp(66px, 9vw, 126px) clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.concept-opening__sketch{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
}

.concept-opening__sketch img{
  display: block;
  width: min(100%, 430px);
  height: auto;
}

.concept-opening__copy p{
  max-width: 70ch;
  margin: 0 0 26px;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.67;
  text-wrap: pretty;
}

.concept-opening__copy p:last-child{ margin-bottom: 0; }

.concept-opening__copy strong{ font-weight: 680; }

.concept-opening__copy .concept-opening__callout{
  max-width: 29ch;
  margin: 0 0 clamp(34px, 4vw, 54px);
  font-family: var(--display);
  font-size: clamp(29px, 3vw, 43px);
  font-weight: 400;
  line-height: 1.18;
}

.concept-section{
  scroll-margin-top: calc(102px + 10 * var(--u));
  padding: clamp(70px, 9vw, 132px) clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.concept-section > h2{
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.concept-section sup a,
.concept-notes sup{
  color: var(--green);
  font: 600 12px/1 var(--sans);
  text-decoration: none;
}

.concept-section--who{
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(300px, 1fr);
  gap: clamp(40px, 8vw, 124px);
  align-items: start;
}

.concept-section__copy{
  max-width: 780px;
}

.concept-section__copy > p{
  max-width: 67ch;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.66;
  text-wrap: pretty;
}

.concept-section__copy > p + p{ margin-top: 24px; }

.concept-timeline-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--green);
  font-size: 15px;
  line-height: 1.5;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.concept-timeline-link:hover{ color: var(--ink); }

.concept-timeline-link:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.concept-section--map{
  background-color: rgba(250, 248, 243, .68);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
}

.logic-hint{
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.logic-sheet{
  border: 1px solid var(--line);
  background: var(--card);
}

.logic-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
}

.logic-rail{
  min-width: 0;
  padding: 26px 20px;
}

.logic-rail--inputs{ border-right: 1px solid var(--line); }
.logic-rail--outputs{ border-left: 1px solid var(--line); }

.logic-label{
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.logic-label sup{ margin-left: 3px; }

.logic-disclosure{
  position: relative;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 120px;
}

.logic-disclosure:last-child{ border-bottom: 1px solid var(--line-soft); }

.logic-disclosure summary{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  min-height: 108px;
  padding: 16px 4px;
  list-style: none;
  cursor: pointer;
  transition: background-color .16s ease;
}

.logic-disclosure summary::-webkit-details-marker{ display: none; }

.logic-disclosure summary:hover,
.logic-disclosure[open] summary{ background: var(--green-soft); }

.logic-disclosure summary:focus-visible{
  position: relative;
  z-index: 1;
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.logic-sketch{
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.logic-node__title{
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 1.85vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.logic-node__description{
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
  text-wrap: pretty;
}

.logic-chevron{
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.logic-disclosure[open] .logic-chevron{
  margin-top: 4px;
  transform: rotate(225deg);
}

.logic-detail{
  padding: 4px 16px 20px;
  background: var(--green-soft);
}

.logic-detail p{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.logic-core{
  position: relative;
  align-self: center;
  margin: 36px 24px;
  padding: clamp(20px, 2vw, 32px);
  border: 1px solid var(--line);
  background-color: var(--paper-strong);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
}

.logic-core::before,
.logic-core::after{
  content: '';
  position: absolute;
  top: 50%;
  width: 25px;
  border-top: 1px solid var(--line);
}

.logic-core::before{ right: 100%; }
.logic-core::after{ left: 100%; }

.logic-core p{
  margin: 0;
  font-family: var(--display);
  font-size: clamp(23px, 2vw, 29px);
  line-height: 1.3;
  text-wrap: pretty;
}

.concept-section--timeline{
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(300px, 1fr);
  gap: clamp(40px, 8vw, 124px);
  align-items: start;
}

.timeline-ledger{
  border-top: 1px solid var(--line);
}

.timeline-ledger p{
  margin: 0;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.58;
}

.timeline-ledger strong{
  display: block;
  margin-bottom: 4px;
  font-weight: 650;
}

.concept-notes{
  padding: clamp(42px, 6vw, 76px) clamp(24px, 4vw, 56px);
}

.concept-notes p{
  max-width: 76ch;
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1100px){
  .logic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .logic-core{
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 24px;
  }

  .logic-core p{
    max-width: 62ch;
    font-size: 26px;
  }

  .logic-core::before,
  .logic-core::after{ display: none; }

  .logic-rail{ border-top: 1px solid var(--line); }
  .logic-rail--inputs{ border-right: 0; }
  .logic-node__title{ font-size: 26px; }
}

@media (max-width: 980px){
  .concept-section--who,
  .concept-section--timeline{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .concept-hero h1{ max-width: 14ch; }
  .concept-opening{ gap: 40px; }
}

@media (max-width: 760px){
  .concept-hero{ padding: 28px 20px 52px; }
  .concept-back{ margin-bottom: 34px; }

  .concept-hero h1{
    max-width: 12ch;
    font-size: clamp(44px, 13.5vw, 62px);
    line-height: 1;
  }

  .concept-opening,
  .concept-section{ padding: 62px 20px; }

  .concept-opening{
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .concept-opening__sketch img{ width: min(76vw, 340px); }

  .concept-opening__copy p{
    font-size: 17px;
    line-height: 1.65;
  }

  .concept-section{ scroll-margin-top: 122px; }
  .logic-grid{ grid-template-columns: minmax(0, 1fr); }
  .logic-core{ margin: 20px; }
  .logic-core p{ font-size: 24px; }
  .logic-rail{ padding: 24px 16px; }
  .logic-rail--outputs{ border-left: 0; }
  .logic-disclosure summary{ gap: 14px; }
  .logic-node__title{ font-size: 26px; }
  .concept-section--timeline{ gap: 24px; }
  .concept-notes{ padding: 38px 20px 48px; }
}

@media (max-width: 420px){
  .concept-hero h1{ font-size: 43px; }
  .logic-core{ margin: 16px; padding: 20px; }
  .logic-disclosure summary{ grid-template-columns: 52px minmax(0, 1fr) 12px; gap: 10px; }
  .logic-sketch{ width: 52px; height: 52px; }
  .logic-node__title{ font-size: 24px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .logic-disclosure summary{ transition: none; }
}

@media print{
  .logic-grid{ display: block; }
  .logic-rail{ border: 0; }
  .logic-core{ margin: 20px 0; }
  .logic-core::before,
  .logic-core::after,
  .logic-chevron,
  .logic-hint{ display: none; }
  .logic-disclosure::details-content{ content-visibility: visible; }
  .logic-disclosure .logic-detail{ display: block; }
  .logic-disclosure{ break-inside: avoid; }
}