/* ─────────────────────────────────────────────────────────────────────
   SECTION
   Layout of each numbered editorial section.

   DOM structure:
     <section class="section">
       <div class="container">
         <header class="section-header">
           <p class="eyebrow">§01</p>    ← INSIDE the two rules
           <h2>Skills</h2>               ← INSIDE the two rules
         </header>
         [section content]
       </div>
     </section>

   Visual output:
     ──────────────────────────────  ← .section-header border-top
     §01                              ← eyebrow (between rules)
     SKILLS.                          ← h2 (between rules)
     ──────────────────────────────  ← .section-header border-bottom
     [content]
───────────────────────────────────────────────────────────────────── */

.section {
  padding: var(--s-9) 0;
  position: relative;
  background: var(--paper);
}
.section--recess { background: var(--paper-2); }

/* The two rules and the box. Both eyebrow + h2 live INSIDE this. */
.section-header {
  margin-bottom: var(--s-7);
  padding: var(--s-5) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

/* Eyebrow — small mono label. Sits above the title, inside the bordered box. */
.section-header .eyebrow {
  margin: 0 0 var(--s-3);
  color: var(--ink-2);
}

/* Title — large mono caps. No border here; the parent .section-header owns the rules. */
.section-header h2 {
  font-family: var(--font-mono);
  font-size: clamp(var(--t-32), 5vw, var(--t-44));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: 0;
  overflow-wrap: break-word;
}
.section-header h2::after {
  content: '.';
  color: var(--mark);
  margin-left: 2px;
}

.section-intro,
.project-section-intro {
  max-width: 62ch;
  margin: var(--s-4) 0 0;
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: var(--t-18);
  line-height: 1.45;
}

/* Legacy divider element — hidden. */
.section-divider { display: none; }

.section-subheading {
  font-family: var(--font-serif);
  font-size: var(--t-18);
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 var(--s-6) 0;
  line-height: 1.5;
  text-align: left;
}

/* Project filter row — mono, square, no pill radius. */
.projects-filter {
  display: flex;
  gap: 0;
  margin-bottom: var(--s-6);
  border: 1px solid var(--ink);
  width: max-content;
}
.btn-filter {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-right: 1px solid var(--ink);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-step), color var(--dur-1) var(--ease-step);
}
.btn-filter:last-child { border-right: 0; }
.btn-filter:hover { background: var(--ink); color: var(--paper); }
.btn-filter.active { background: var(--ink); color: var(--paper); }

/* Contact — single-column flow. Brief intro on top, methods as a wide
   3-column equal-grid strip below. No empty space, no awkward right-anchored
   icon list with a half-empty left column. */
.contact-container {
  display: block;
}
.contact-info {
  display: block;
  margin-bottom: var(--s-6);
  max-width: none;
}
.contact-info h3 {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
.contact-info p {
  font-family: var(--font-serif);
  font-size: var(--t-18);
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
  line-height: 1.45;
}

/* Methods strip — 3 equal columns, each a large mono cell with icon + handle.
   Reads as a control panel of channels rather than an asymmetric icon list. */
.contact-methods {
  display: grid;
  grid-template-columns: minmax(230px, 1.55fr) repeat(3, minmax(145px, 1fr));
  gap: 0;
  border: 1px solid var(--ink);
}
.contact-method-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-right: 1px solid var(--ink);
  font-family: var(--font-mono);
  color: var(--ink);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  background: var(--paper);
  min-height: 160px;
  transition: background var(--dur-1) var(--ease-step), color var(--dur-1) var(--ease-step);
}
.contact-method-link:last-child { border-right: 0; }
.contact-method-link:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.contact-method-link i {
  font-size: var(--t-32);
  color: var(--ink);
  transition: color var(--dur-1) var(--ease-step);
}
.contact-method-link:hover i { color: var(--mark); }
.contact-method-link span {
  font-family: var(--font-mono);
  font-size: var(--t-14);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  word-break: normal;
  align-self: stretch;
}
.contact-method-link::after {
  content: '▸ OPEN';
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: 0.10em;
  color: var(--ink-2);
  align-self: flex-end;
  transition: color var(--dur-1) var(--ease-step), transform var(--dur-2) var(--ease-snap);
}
.contact-method-link:hover::after { color: var(--mark); transform: translateX(4px); }

@media (max-width: 900px) {
  .section { padding: var(--s-8) 0 var(--s-7); }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-method-link { border-right: 0; border-bottom: 1px solid var(--ink); min-height: 120px; }
  .contact-method-link:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .section { padding: var(--s-7) 0 var(--s-6); }
  .section-header { margin-bottom: var(--s-5); padding: var(--s-4) 0; }
  .projects-filter {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--s-4);
    margin-bottom: var(--s-5);
  }
  .contact-method-link span { word-break: break-word; }
}