/* =========================================================
   BUILDING G&C
   CLEAN REWRITE — AUGUST 16, 2026

   DESIGN RULE:
   Shared rules control structure only.
   Visual treatments are scoped to the specific moment/month.
   No year-level artwork except the 2023 section overlay that
   intentionally spans both Spring and August.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --black:#121211;
  --charcoal:#1c1c1a;
  --cream:#f6e6cf;
  --paper:#d7d8d5;
  --paper-dark:#c9cbc8;
  --rust:#b85b31;
  --rust-dark:#88411f;
  --ink:#171513;
  --pencil:#5e5a54;
}

@font-face{
  font-family:"GC Doug Notes";
  src:url("../fonts/gc-dougs-notes.woff2?v=20260901") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

.building-page{
  --build-face:"industry-inc-base",Arial,sans-serif;
  --build-detail:"industry-inc-detail","industry-inc-base",Arial,sans-serif;
  --build-stencil:"industry-inc-stencil","industry-inc-base",Arial,sans-serif;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body.building-page{
  margin:0;
  overflow-x:clip;
  color:var(--ink);
  background:#e7e1d6;
}

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

a{color:inherit}


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

.build-hero{
  position:relative;
  min-height:clamp(650px,72vh,860px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:clamp(72px,8vw,120px) 7vw;

  color:var(--cream);

  background-image:url("../images/building-gc/building-gc-hero.jpg?v=20260901");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.build-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(8,8,7,.78) 0%,
      rgba(8,8,7,.62) 25%,
      rgba(8,8,7,.28) 48%,
      rgba(8,8,7,.06) 72%,
      rgba(8,8,7,0) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8,8,7,.28) 0%,
      rgba(8,8,7,0) 42%
    );
}


.build-hero-copy{
  position:relative;
  z-index:2;
  width:min(720px,46vw);
  max-width:720px;
  margin:0;
}

.build-kicker{
  margin:0 0 18px;
  color:var(--cream);
  font:900 11px/1 Arial,sans-serif;
  letter-spacing:3px;
}

.build-title{
  margin:0 0 26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  color:var(--rust);
  font-family:var(--build-stencil);
  font-weight:400;
  line-height:.84;
  letter-spacing:.01em;
  text-transform:uppercase;

  text-shadow:
    3px 3px 0 rgba(0,0,0,.68),
    5px 6px 9px rgba(0,0,0,.32);
}

.build-title-building,
.build-title-gc{
  display:block;
  font-size:clamp(64px,6.8vw,112px);
}

.build-title-gc{
  margin-top:8px;
  letter-spacing:0;
}

.hero-sub{
  max-width:520px;
  margin:0;

  color:var(--cream);
  font-family:"GC Doug Notes",Georgia,serif;
  font-size:clamp(28px,2.8vw,42px);
  font-style:italic;
  font-weight:400;
  line-height:1.05;

  transform:rotate(-1.2deg);
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}


/* =========================================================
   MANIFESTO
   ========================================================= */

.manifesto{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(54px,7vw,110px);

  margin:0;
  padding:
    86px
    max(7vw,calc((100vw - 1400px)/2))
    92px;

  background-color:#d1d0ca;
  background-image:url("../images/building-gc/building-gc-manifesto-concrete.jpg?v=20260901");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.manifesto .kicker{
  color:var(--rust);
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:2.2px;
}

.manifesto h2{
  max-width:500px;
  margin:16px 0 0;

  color:var(--ink);
  font-family:var(--build-detail);
  font-size:clamp(36px,3.7vw,54px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:.015em;
  text-transform:uppercase;
}

.manifesto-copy{
  max-width:690px;
  padding-top:32px;
  font:17px/1.65 Georgia,serif;
}

.manifesto-copy .lead{font-size:23px}

.conversation{
  color:var(--rust-dark);
  font-size:24px;
  font-style:italic;
}


/* =========================================================
   STICKY YEAR NAV
   ========================================================= */


.year-track-base,
.year-track-progress{
  position:absolute;
  inset:0 auto auto 0;
  height:1px;
}


.year-track-progress{
  width:0;
  background:var(--rust);
  transition:width .25s ease;
}

.year-links{
  display:flex;
  justify-content:space-between;
  align-items:start;
  align-self:start;
  padding-top:9px;
}

.year-links a{
  position:relative;

  color:rgba(240,227,207,.58);
  text-decoration:none;
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:1.5px;

  transition:.2s ease;
}

.year-links a::before{
  content:"";
  position:absolute;
  left:50%;
  top:-13px;

  width:5px;
  height:5px;
  border-radius:50%;

  background:#57534d;
  transform:translateX(-50%);
}

.year-links a.is-past{
  color:rgba(240,227,207,.72);
}

.year-links a.is-active{
  color:#C8652C;
}

.year-links a.is-active::before{
  background:#C8652C;
  transform:translateX(-50%) scale(1.45);
}


/* =========================================================
   STORY: SHARED STRUCTURE ONLY
   Warm paper field. No gray/taupe wash.
   ========================================================= */

.story{
  position:relative;
  isolation:isolate;
  background:#e7e1d6;
}

/* A nearly invisible paper tooth. This is texture, not wallpaper. */
.story::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  opacity:.16;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0 1px,
      rgba(90,70,50,.015) 1px 2px,
      transparent 2px 5px
    );

  mix-blend-mode:soft-light;
}

.year-section{
  position:relative;
  width:min(1400px,100%);
  margin:auto;
  padding-left:108px;
  background:transparent;
}

.story-line{
  position:absolute;
  left:65px;
  top:0;
  bottom:0;
  z-index:4;
  pointer-events:none;
}


.moment{
  position:relative;
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
}

.moment::before{
  content:"";
  position:absolute;
  left:-49px;
  top:72px;
  z-index:5;

  width:49px;
  height:1px;

  background:rgba(23,21,19,.28);
}

.moment-date{
  padding:64px 18px 20px 0;

  color:#71695f;
  font:800 8px/1.4 Arial,sans-serif;
  letter-spacing:1.5px;
}

.moment-date strong{
  display:block;
  color:var(--rust);
  font-size:13px;
}

.moment-date em{
  display:block;
  margin-top:5px;

  color:#8a8177;
  font:700 6px Arial,sans-serif;
  letter-spacing:1px;
}

.moment-body{
  position:relative;
  min-width:0;
  z-index:2;
}

.copy h3{
  margin:10px 0 18px;

  color:var(--ink);
  font-family:var(--build-face);
  font-size:clamp(38px,4vw,64px);
  font-weight:400;
  line-height:.98;
  text-transform:uppercase;
}

.copy p{
  max-width:620px;
  font:16px/1.6 Georgia,serif;
}

.eyebrow,
.kicker{
  color:var(--rust);
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:2.2px;
}

.photo{
  margin:0;
  overflow:hidden;
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.doug-note{
  position:absolute;

  color:rgba(58,54,49,.72);
  font:italic 400 20px/1.1 "GC Doug Notes",Arial,sans-serif;

  transform:rotate(-2deg);
}


/* =========================================================
   2023
   Spring = archival / searching
   August = stripped-down decision
   ========================================================= */

.year-2023{
  padding-top:0;
  padding-bottom:35px;
}

/* one intentional 2023-wide decorative overlay */


.year-2023 .moment{
  z-index:1;
}

/* subtle local grid, intentionally confined left */
.year-2023::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  z-index:0;

  width:38%;
  height:100%;

  pointer-events:none;
  opacity:.35;

  background-image:
    linear-gradient(rgba(80,72,62,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,72,62,.05) 1px,transparent 1px);

  background-size:42px 42px;
}


/* SPRING 2023 — major dark chapter */
.moment-inventory{
  position:relative;
  padding-bottom:80px;

  color:#eee7da;
  background:#1b1b19;

  /* Full-width dark chapter without changing the timeline geometry. */
  box-shadow:0 0 0 100vmax #1b1b19;
  clip-path:inset(0 -100vmax);
}

.inventory-layout{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:70px;
  align-items:start;

  padding:30px 5vw 30px 2vw;
}

.inventory-photo-wrap{
  position:relative;
  margin-top:62px;
}

.inventory-photo{
  position:relative;
  height:430px;

  padding:14px 14px 52px;

  background:#eee6d7;

  transform:rotate(-1.1deg);

  box-shadow:
    0 14px 28px rgba(35,30,25,.16),
    0 3px 7px rgba(35,30,25,.08);

  filter:
    grayscale(8%)
    sepia(8%)
    contrast(.97);
}

.inventory-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  box-shadow:inset 0 0 60px rgba(46,37,29,.12);
}

.inventory-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.inventory-copy{
  max-width:650px;
}

.inventory-copy h3{
  max-width:620px;

  color:#eee7da;
  font-size:clamp(38px,4vw,58px);
  line-height:1.03;
  letter-spacing:.012em;
}

.inventory-copy p{
  color:#d4cec3;
}

.inventory-emphasis{
  color:#f0e9dc !important;
  font-size:21px !important;
  font-style:italic;
}

.note-place{
  right:24px;
  bottom:12px;

  color:rgba(54,50,45,.78);
  transform:rotate(-2deg);
}

.inventory-principle{
  margin-top:42px;
  padding-top:24px;

  border-top:1px solid rgba(184,91,49,.32);
}

.inventory-principle span{
  display:block;
  margin-bottom:12px;

  color:#bdb5a8;
  font:italic 15px Georgia,"Times New Roman",serif;
}

.inventory-principle strong{
  position:relative;
  display:inline-block;

  color:var(--rust);
  font-family:var(--build-stencil);
  font-size:clamp(24px,2.2vw,34px);
  font-weight:400;
  letter-spacing:.055em;
}

.inventory-principle strong::after{
  content:"";
  position:absolute;
  left:0;
  right:4%;
  bottom:-8px;

  height:2px;

  background:var(--rust);
  opacity:.75;

  transform:rotate(-.4deg);
}

.moment-inventory .eyebrow,
.moment-inventory .inventory-principle strong,
.moment-inventory .moment-date strong{
  color:var(--rust);
}

.moment-inventory .moment-date span{
  color:#aaa399;
}


/* AUGUST 2023 */
.moment-decision{
  min-height:610px;
  align-items:center;
}

.moment-decision::before{
  top:50%;
}

.moment-decision .moment-date{
  align-self:start;
  position:relative;
  top:72px;

  padding-top:0;
}

.decision-layout{
  position:relative;
  padding:100px 7vw 105px 4vw;
}

.decision-rule{
  width:72px;
  height:2px;
  margin-bottom:40px;

  background:var(--rust);
}

.decision-layout blockquote{
  max-width:1030px;
  margin:0;
}

.decision-layout blockquote span{
  display:block;
  margin-bottom:12px;

  color:#686158;
  font-family:var(--build-face);
  font-size:clamp(34px,3.6vw,55px);
  font-weight:400;
  line-height:1.05;
  text-transform:uppercase;
}

.decision-layout blockquote strong{
  display:block;

  color:#1f1c19;
  font-family:var(--build-face);
  font-size:clamp(54px,6.2vw,96px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-1px;
  text-transform:uppercase;
}

.timeline-story-link{
  display:inline-block;
  margin-top:32px;

  color:var(--rust);
  text-decoration:none;
  text-transform:uppercase;
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:2px;
}

.timeline-story-link span{
  display:inline-block;
  margin:0 8px;
}

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

.note-decision{
  right:10vw;
  bottom:55px;

  color:rgba(96,58,39,.58);
  transform:rotate(-2deg);
}


/* =========================================================
   2024
   September only. No year-level decorative artwork.
   ========================================================= */

.year-2024{
  padding-top:50px;
  padding-bottom:70px;
}

.moment-room{
  min-height:620px;
  padding-bottom:65px;
  overflow:hidden;
}

.room-layout{
  position:relative;
  padding:105px 8vw 100px 5vw;
}

.room-layout .copy{
  position:relative;
  z-index:2;
  max-width:760px;
}

.room-layout h3{
  max-width:760px;
  margin-bottom:34px;

  font-size:clamp(38px,4vw,60px);
  line-height:1.01;
}

.room-layout p{
  max-width:690px;
  font-size:17px;
  line-height:1.48;
}

.room-layout p:nth-of-type(2){
  margin:20px 0;

  color:#24211e;
  font-size:21px;
  font-style:italic;
}

/* September artwork belongs ONLY to September */
.room-art-2024{
  position:absolute;
  right:-3%;
  bottom:-8%;
  z-index:0;

  width:88%;
  height:90%;

  object-fit:contain;
  object-position:right center;

  opacity:.62;
  mix-blend-mode:normal;

  filter:
    grayscale(1)
    contrast(1.55)
    brightness(.68);

  pointer-events:none;
}


/* =========================================================
   2025
   January / February / September are independent.
   No year-level background image.
   ========================================================= */

.year-2025{
  padding-top:70px;
  padding-bottom:70px;
}


/* JANUARY 2025 — deliberately plain */
.moment-search{
  min-height:270px;
}

.quiet-layout{
  padding:65px 5vw;
}

.quiet-layout h3{
  margin:8px 0 12px;

  font-family:var(--build-face);
  font-size:clamp(36px,3.6vw,56px);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}

.quiet-layout p{
  font:16px/1.5 Georgia,serif;
}


/* =========================================================
   FEBRUARY 2025 — SCHOOL / DOUG'S WORKING NOTES
   ========================================================= */

.moment-school{
  position:relative;
  min-height:620px;
  align-items:start;
  overflow:hidden;
}

.moment-school .moment-date{
  align-self:start;
  padding-top:72px;
}

.school-layout{
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,760px) 210px;
  gap:48px;
  align-items:start;

  min-height:620px;
  padding:90px 7vw 100px 5vw;
}

.school-layout .copy{
  position:relative;
  z-index:2;

  width:100%;
  max-width:760px;
}

.school-layout h3{
  max-width:760px;
  margin-bottom:28px;

  font-size:clamp(52px,5.2vw,82px);
  line-height:.96;
}

.school-layout p{
  width:100%;
  max-width:700px;

  font-size:17px;
  line-height:1.5;
}

.school-program{
  margin-top:26px;

  color:var(--rust);

  font-family:var(--build-stencil);
  font-size:clamp(24px,2.4vw,36px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* Doug's actual number glyphs as background marks */

.school-ghost{
  position:absolute;
  z-index:0;

  color:rgba(58,54,49,.11);

  font-family:"GC Doug Notes",Arial,sans-serif;
  font-style:italic;
  font-weight:400;
  line-height:1;

  pointer-events:none;
  user-select:none;
}

.school-ghost-51{
  right:-3%;
  top:-38px;

  color:rgba(58,54,49,.10);
  font-size:clamp(190px,20vw,320px);

  transform:rotate(-6deg);
}

/* Doug's marginal notes */

.school-notes{
  position:relative;
  z-index:3;

  min-height:360px;
}

.school-note-main{
  position:absolute;

  left:-12px;
  top:155px;

  width:250px;

  color:rgba(58,54,49,.70);

  font-size:clamp(21px,1.8vw,28px);
  line-height:1.05;

  transform:rotate(-3deg);
}

.school-note-side{
  position:absolute;

  right:-18px;
  bottom:18px;

  width:220px;

  color:rgba(136,65,31,.54);

  font-size:clamp(15px,1.3vw,20px);
  line-height:1.05;

  transform:rotate(2deg);
}


/* =========================================================
   SEPTEMBER 2025
   TWO BUILDINGS. ONE PLAN.
   ========================================================= */

.moment-buildings{
  min-height:720px;
  overflow:hidden;
}


/* MAIN LAYOUT */

.buildings-story-layout{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:clamp(32px,4vw,70px);
  align-items:center;

  min-height:720px;

  padding:
    78px
    5vw
    90px
    4vw;
}


/* =========================================================
   COPY
   ========================================================= */

.buildings-copy{
  position:relative;
  z-index:3;

  max-width:540px;
}

.buildings-copy .eyebrow{
  display:block;
  margin-bottom:14px;
}

.buildings-copy h3{
  margin:0 0 36px;

  color:var(--ink);

  font-family:var(--build-face);
  font-size:clamp(50px,5vw,80px);
  font-weight:400;
  line-height:.94;

  text-transform:uppercase;
}

.buildings-copy p{
  max-width:480px;

  color:#302c28;

  font:17px/1.55 Georgia,serif;
}

.buildings-emphasis{
  margin:22px 0;

  color:#24211e !important;

  font-size:22px !important;
  font-style:italic;
}


/* NOTEBOOK LINK */

.buildings-copy .timeline-story-link{
  margin-top:28px;
}


/* =========================================================
   PLANNING ART
   ========================================================= */

.buildings-art{
  position:relative;

  min-height:570px;
}

.buildings-art img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;

  pointer-events:none;

  filter:
    saturate(.88)
    contrast(1.03);
}


/* =========================================================
   DOUG HANDWRITING
   ========================================================= */

.buildings-note-one{
  left:7%;
  top:17%;
  z-index:4;

  color:rgba(58,54,49,.76);

  font-size:clamp(19px,1.8vw,27px);

  transform:rotate(-4deg);
}

.buildings-note-two{
  right:1%;
  bottom:12%;
  z-index:4;

  color:rgba(136,65,31,.72);

  font-size:clamp(19px,1.8vw,27px);

  transform:rotate(3deg);
}


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

@media(max-width:800px){

  .moment-buildings{
    min-height:auto;
  }

  .buildings-story-layout{
    grid-template-columns:1fr;
    gap:36px;

    min-height:auto;

    padding:
      55px
      24px
      70px;
  }

  .buildings-copy{
    max-width:none;
  }

  .buildings-art{
    min-height:420px;
  }

  

  .buildings-note-one{
    left:4%;
  }

  .buildings-note-two{
    right:2%;
  }
}


/* =========================================================
   COURSEWORK THREAD
   A parallel academic track to the LEFT of the restaurant line.
   Month-positioned, evidence-driven, deliberately secondary.
   ========================================================= */

.coursework-thread{
  position:absolute;
  left:-285px;
  top:0;
  bottom:0;
  z-index:9;

  width:310px;

  display:grid;
  grid-template-rows:repeat(12, minmax(0,1fr));

  pointer-events:none;
}

/* The academic track is intentionally offset from the main
   restaurant timeline. It should read as annotation, not event. */
.coursework-thread::after{
  content:"";
  position:absolute;
  right:12px;
  top:0;
  bottom:0;

  width:1px;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(91,80,68,.20) 0 3px,
      transparent 3px 9px
    );
}


/* ---------- INTRO ---------- */

.course-thread-intro{
  position:absolute;
  right:32px;
  top:18px;

  width:220px;

  padding-bottom:12px;

  text-align:right;

  border-bottom:1px solid rgba(184,91,49,.30);
}

.course-thread-intro span{
  display:block;

  margin-bottom:5px;

  color:#746b61;

  font:800 7px/1 Arial,sans-serif;
  letter-spacing:1.8px;
}

.course-thread-intro strong{
  display:block;

  color:var(--rust);

  font-family:var(--build-detail);
  font-size:15px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:.075em;

  text-transform:uppercase;
}


/* ---------- MONTH CLUSTERS ---------- */

.course-month{
  position:relative;

  align-self:start;

  width:278px;
  padding:7px 28px 9px 0;

  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  column-gap:10px;

  border-top:1px solid rgba(78,68,58,.12);
}

/* small connector toward the real timeline */
.course-month::after{
  content:"";
  position:absolute;
  right:11px;
  top:-1px;

  width:18px;
  height:1px;

  background:rgba(184,91,49,.38);
}

.course-month-label{
  padding-top:2px;
  text-align:right;
}

.course-month-label span{
  display:block;

  color:#756c62;

  font:900 7px/1 Arial,sans-serif;
  letter-spacing:1.4px;
}

.course-month-label strong{
  display:block;

  margin-top:3px;

  color:var(--rust);

  font:900 10px/1 Arial,sans-serif;
  letter-spacing:.8px;
}


/* ---------- COURSE ITEMS ---------- */

.course-items{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.course-item{
  position:relative;

  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  gap:7px;
  align-items:start;

  min-height:22px;
}

.course-item::before{
  content:"+";

  position:absolute;
  left:-9px;
  top:0;

  color:rgba(184,91,49,.48);

  font:700 8px/1 Arial,sans-serif;
}

.course-code{
  padding-top:1px;

  color:var(--rust);

  font:900 7px/1.15 Arial,sans-serif;
  letter-spacing:.8px;
  text-align:right;
}

/* Deliberately NOT the main headline face.
   Industry Detail reads like a project annotation / technical legend. */
.course-title{
  color:#4a453f;

  font-family:var(--build-detail);
  font-size:10px;
  font-weight:400;
  line-height:1.18;
  letter-spacing:.045em;

  text-transform:uppercase;
}


/* ---------- DOUG NOTES ---------- */

.course-note{
  position:absolute;
  z-index:3;

  width:205px;

  color:rgba(94,70,54,.54);

  font-size:15px;
  line-height:1.05;
}

.course-note-cost{
  right:34px;
  top:72px;

  transform:rotate(-3deg);
}

.course-note-numbers{
  right:28px;
  top:64px;

  color:rgba(136,65,31,.58);

  transform:rotate(2deg);
}


/* ---------- TRUE MONTH PLACEMENT ---------- */
/* CSS grid rows map directly to calendar months. */

.course-jan{grid-row:1}
.course-feb{grid-row:2}

.course-apr{grid-row:4}
.course-may{grid-row:5}

.course-jul{grid-row:7}
.course-aug{grid-row:8}

.course-oct{grid-row:10}
.course-nov{grid-row:11}


/* February 2025 has the introduction sitting above it, so give
   that first academic event a little extra breathing room. */
.coursework-thread-2025 .course-feb{
  margin-top:34px;
}


/* Keep the academic rail outside the cards. */


/* Desktop composition first. Small-screen coursework will be
   designed separately rather than squeezed into the timeline. */
@media(max-width:1180px){
  .coursework-thread{
    display:none;
  }
}


/* =========================================================
   2026
   Test Kitchen + Sept. 1 finale only.
   ========================================================= */

.year-2026{
  padding-top:70px;
  padding-bottom:80px;
}

.moment-ownership{min-height:300px;}
.ownership-layout{max-width:820px;margin:35px 0 70px;padding:52px 5vw;background:rgba(255,255,255,.34);border-top:2px solid var(--rust);}
.ownership-layout h3{margin:9px 0 14px;font-family:var(--build-face);font-size:clamp(36px,3.8vw,58px);font-weight:400;line-height:.96;text-transform:uppercase;}
.ownership-layout p{max-width:650px;margin-bottom:22px;font:17px/1.55 Georgia,serif;}


.moment-test{
  min-height:520px;
}

.moment-test .moment-body{
  margin-top:80px;
  margin-bottom:95px;
}

.test-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;

  color:#1d1b19;
  background:#ded9cf;
}

.test-photo{
  min-height:500px;
}

.test-layout .copy{
  padding:70px 42px;
}

.test-layout a{
  color:var(--rust);
  text-decoration:none;
  font:900 9px Arial,sans-serif;
  letter-spacing:1.6px;
}

.moment-launch{
  position:relative;
  min-height:500px;
  padding-top:0;
  padding-bottom:90px;
}

.moment-launch .moment-date{
  align-self:start;
  padding-top:0;
}

.launch-layout{
  min-height:620px;
  margin-top:0;
  padding:105px 7vw 110px;

  color:var(--cream);
  background:#111;
}

.launch-layout h3{
  margin:18px 0;

  font-family:var(--build-face);
  font-size:clamp(58px,6vw,96px);
  font-weight:400;
  line-height:.92;
  text-transform:uppercase;
}

.launch-layout h3 span{
  color:var(--rust);
}

.launch-layout p{
  color:rgba(242,229,210,.72);
  font:italic 21px Georgia,serif;
}


/* =========================================================
   TODAY + CLOSING
   ========================================================= */

.today-section{
  position:relative;

  width:min(1400px,100%);
  min-height:330px;
  margin:auto;
  padding:80px 8vw 80px 238px;
}

.today-line{
  position:absolute;
  left:173px;
  top:0;

  width:1px;
  height:180px;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(23,21,19,.5) 0 6px,
      transparent 6px 13px
    );

  transform:rotate(4deg);
}

.today-copy{
  max-width:520px;
}

.today-copy p{
  font:italic 17px/1.5 Georgia,serif;
}

.closing{
  min-height:580px;
  display:grid;
  place-content:center;

  padding:80px 7vw;

  text-align:center;

  background:#e7e1d6;
}

.closing>p:first-child{
  max-width:760px;
  margin:0 auto 36px;

  font:22px/1.55 Georgia,serif;
}

.chair{
  margin:0;

  color:var(--rust-dark);
  font:italic clamp(40px,5vw,68px)/1 Georgia,serif;
}

.last{
  margin:12px 0 0;

  font-family:var(--build-face);
  font-size:clamp(34px,4vw,52px);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}


/* =========================================================
   SCROLL FADE
   ========================================================= */

.js .moment .moment-body{
  opacity:.32;
  transform:translateY(15px);

  transition:
    opacity .48s ease,
    transform .48s ease;
}

.js .moment.is-active .moment-body{
  opacity:1;
  transform:none;
}

.js .moment.is-past .moment-body{
  opacity:.70;
  transform:none;
}


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

@media(max-width:900px){

  .build-hero{
    min-height:680px;
    padding:68px 7vw 74px;
    background-position:58% center;
  }

  .build-hero::before{
    background:
      linear-gradient(
        0deg,
        rgba(8,8,7,.88) 0%,
        rgba(8,8,7,.68) 34%,
        rgba(8,8,7,.18) 72%,
        rgba(8,8,7,0) 100%
      );
  }

  .build-hero-copy{
    width:min(92vw,680px);
    max-width:680px;
  }

  .build-title-building,
  .build-title-gc{
    font-size:clamp(58px,10vw,88px);
  }

  .hero-sub{
    font-size:clamp(26px,5vw,36px);
  }
}

@media(max-width:800px){

  html{
    scroll-padding-top:68px;
  }

  .manifesto{
    grid-template-columns:1fr;
    padding:70px 24px;
  }

  .manifesto-copy{
    padding-top:0;
  }

  

  

  .year-nav-label,
  .year-links a{
    font-size:7px;
  }

  .year-section{
    padding-left:44px;
  }

  .story-line{
    left:24px;
  }

  .moment{
    display:block;
  }

  .moment::before{
    left:-20px;
    top:42px;
    width:20px;
  }

  .moment-date,
  .moment-decision .moment-date,
  .moment-school .moment-date{
    position:static;
    padding:28px 20px 14px;
    transform:none;
  }

  .inventory-layout,
  .school-layout,
  .test-layout{
    grid-template-columns:1fr;
  }

  .inventory-layout{
    gap:28px;
    padding:20px 24px 50px;
  }

  .inventory-photo-wrap{
    margin-top:0;
  }

  .inventory-photo,
  .test-photo{
    height:330px;
    min-height:330px;
  }

  .decision-layout{
    padding:70px 24px 90px;
  }

  .note-decision{
    right:24px;
    bottom:42px;
  }

  .room-layout,
  .school-layout,
  .quiet-layout,
  .test-layout .copy{
    padding:42px 24px;
  }

  .room-art-2024{
    right:-22%;
    bottom:-2%;
    width:120%;
    height:80%;
    opacity:.35;
  }


  .launch-layout{
    padding:70px 24px;
  }

  .today-section{
    padding:70px 24px 70px 80px;
  }

  .today-line{
    left:52px;
  }
}

@media(max-width:560px){

  .build-hero{
    min-height:620px;
    padding:58px 22px 60px;
    background-position:62% center;
  }

  .build-kicker{
    font-size:9px;
    letter-spacing:2.4px;
  }

  .build-title{
    margin-bottom:22px;
  }

  .build-title-building,
  .build-title-gc{
    font-size:clamp(48px,14vw,70px);
  }

  .hero-sub{
    max-width:88%;
    font-size:clamp(24px,7vw,32px);
  }
}


@media(min-width:1181px){
  .year-2025,
  .year-2026{
    overflow:visible;
  }
}


/* =========================================================
   2026-09-07 — BUILDING G&C TIMELINE CLEANUP
   Horizontal year nav removed. Vertical story timeline is primary.
   Desktop keeps the coursework rail. Mobile uses expandable coursework.
   ========================================================= */

/* Primary timeline dates and preheadings get enough visual weight. */
.build-kicker,
.manifesto .kicker,
.eyebrow,
.kicker{
  font-size:11px;
  letter-spacing:2.1px;
}

.manifesto .kicker{
  font-size:12px;
}

.moment-date{
  font-size:11px;
  letter-spacing:1.55px;
}

.moment-date strong{
  font-size:19px;
}

.moment-date em{
  font-size:9px;
}

/* Manifesto: one body size, only two emphasis devices. */
.manifesto-copy p{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.62;
}

.manifesto-copy .lead{
  font-size:18px;
}

.conversation{
  color:var(--rust-dark);
  font-size:18px;
  font-style:italic;
  font-weight:700;
}

/* ---------------------------------------------------------
   Desktop coursework rail
   --------------------------------------------------------- */

.coursework-mobile{
  display:none;
}

@media(min-width:1181px){

  .year-section{
    width:min(1700px,100%);
    padding-left:390px;
  }

  .story-line{
    left:347px;
  }

  .coursework-desktop{
    display:grid;
    left:20px;
    width:310px;
  }

  .course-thread-intro{
    right:18px;
    width:245px;
  }

  .course-thread-intro span{
    font-size:8px;
  }

  .course-thread-intro strong{
    font-size:17px;
  }

  .course-month,
  .coursework-thread .course-month{
    width:288px;
  }

  .course-month-label span{
    font-size:9px;
  }

  .course-month-label strong{
    font-size:13px;
  }

  .course-code{
    font-size:8px;
  }

  .course-title{
    font-size:11px;
    line-height:1.2;
  }
}

/* ---------------------------------------------------------
   Mobile/tablet coursework: native click-to-expand timeline
   --------------------------------------------------------- */

@media(max-width:1180px){

  .coursework-desktop{
    display:none !important;
  }

  .coursework-mobile{
    display:block;
    margin:38px 28px 54px;
    border:1px solid rgba(184,91,49,.28);
    border-left:4px solid var(--rust);
    background:rgba(255,255,255,.26);
  }

  .coursework-mobile summary{
    list-style:none;
    cursor:pointer;
    padding:18px 20px;
    display:grid;
    gap:6px;
  }

  .coursework-mobile summary::-webkit-details-marker{
    display:none;
  }

  .coursework-mobile-kicker{
    color:#746b61;
    font:900 9px/1 Arial,sans-serif;
    letter-spacing:1.8px;
  }

  .coursework-mobile-summary{
    position:relative;
    display:block;
    padding-right:30px;
    color:var(--rust);
    font-family:var(--build-detail);
    font-size:18px;
    font-weight:400;
    line-height:1.1;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .coursework-mobile-summary::after{
    content:"+";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-52%);
    font:700 24px/1 Arial,sans-serif;
    color:var(--rust);
  }

  .coursework-mobile[open] .coursework-mobile-summary::after{
    content:"−";
  }

  .coursework-mobile-panel{
    padding:0 18px 20px;
  }

  .coursework-mobile-timeline{
    position:relative;
    display:block;
    padding-left:24px;
  }

  .coursework-mobile-timeline::before{
    content:"";
    position:absolute;
    left:5px;
    top:8px;
    bottom:8px;
    width:2px;
    background:rgba(184,91,49,.48);
  }

  .coursework-mobile-timeline .course-thread-intro{
    position:relative;
    right:auto;
    top:auto;
    width:auto;
    margin:0 0 16px;
    padding:0 0 14px;
    text-align:left;
    border-bottom:1px solid rgba(184,91,49,.22);
  }

  .coursework-mobile-timeline .course-thread-intro span{
    display:none;
  }

  .coursework-mobile-timeline .course-thread-intro strong{
    font-size:18px;
  }

  .coursework-mobile-timeline .course-month{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:auto !important;
    margin:0 0 14px !important;
    padding:10px 12px 10px 14px;
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    gap:10px;
    background:rgba(255,255,255,.24);
    border-top:1px solid rgba(78,68,58,.13);
  }

  .coursework-mobile-timeline .course-month::before{
    content:"";
    position:absolute;
    left:-24px;
    top:15px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--rust);
    box-shadow:0 0 0 4px #e7e1d6;
  }

  .coursework-mobile-timeline .course-month::after{
    display:none;
  }

  .coursework-mobile-timeline .course-month-label{
    text-align:left;
  }

  .coursework-mobile-timeline .course-month-label span{
    font-size:9px;
  }

  .coursework-mobile-timeline .course-month-label strong{
    font-size:14px;
  }

  .coursework-mobile-timeline .course-code{
    font-size:9px;
  }

  .coursework-mobile-timeline .course-title{
    font-size:11px;
    line-height:1.2;
  }
}

@media(max-width:800px){

  .coursework-mobile{
    margin:32px 18px 46px;
  }

  .coursework-mobile summary{
    padding:16px 17px;
  }

  .coursework-mobile-summary{
    font-size:16px;
  }

  .coursework-mobile-panel{
    padding:0 14px 16px;
  }

  .moment-date,
  .moment-decision .moment-date,
  .moment-school .moment-date{
    padding:30px 20px 16px;
  }

  .moment-date{
    font-size:10px;
  }

  .moment-date strong{
    font-size:18px;
  }
}


/* =========================================================
   2026-09-07 — STORY START / COURSEWORK ORDER
   No empty transition band before the first chapter.
   Mobile coursework appears at the END of each year.
   ========================================================= */

.year-2023{
  padding-top:0;
}

.year-2023 > .story-line{
  top:0;
}

@media(max-width:1180px){
  .coursework-mobile{
    margin-top:54px;
  }
}

@media(max-width:800px){
  .coursework-mobile{
    margin-top:44px;
  }
}


/* =========================================================
   MOBILE — NO SCROLL DIMMING
   Long story sections stay fully readable on phones.
   Desktop keeps the active/past scroll treatment.
   ========================================================= */

@media(max-width:800px){

  .js .moment .moment-body,
  .js .moment.is-active .moment-body,
  .js .moment.is-past .moment-body{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .js .moment .moment-body,
  .js .moment.is-active .moment-body,
  .js .moment.is-past .moment-body{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* =========================================================
   NOTEBOOK LINKS — MAKE THE CONNECTION OBVIOUS
   ========================================================= */

.timeline-story-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:30px;
  padding:11px 14px 10px;

  color:var(--rust-dark);
  background:rgba(184,91,49,.07);
  border:1px solid rgba(184,91,49,.38);
  border-left:3px solid var(--rust);

  text-decoration:none;
  text-transform:uppercase;
  font:900 9px/1.2 Arial,sans-serif;
  letter-spacing:1.7px;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.timeline-story-link::before{
  content:"NOTEBOOK";
  display:inline-block;
  padding-right:10px;
  border-right:1px solid rgba(184,91,49,.35);

  color:var(--rust);
  font-size:8px;
  letter-spacing:1.4px;
}

.timeline-story-link:hover{
  color:var(--ink);
  background:rgba(184,91,49,.13);
  border-color:rgba(184,91,49,.62);
  transform:translateY(-1px);
}

.timeline-story-link:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:3px;
}

/* =========================================================
   COURSEWORK / STORY DATE SYNCHRONIZATION
   JS assigns each course month an exact pixel position using
   the dated story moments as calendar anchors.
   ========================================================= */

@media(min-width:1181px){
  .coursework-thread{
    display:block;
  }

  .coursework-thread .course-month{
    position:absolute;
    left:0;
    right:auto;
    width:278px;
    margin-top:0;
  }

  /* Once JS places the months, the original 12-row grid is no longer
     responsible for their vertical position. The rail itself still spans
     the complete year section, so its dotted guide remains intact. */
  .coursework-thread-2025 .course-feb{
    margin-top:0;
  }
}


/* =========================================================
   STICKY YEAR NAV — KEEP THE TIMELINE VISIBLE
   The original track was too faint once the nav became sticky.
   Keep the complete base rail visible behind the year markers.
   ========================================================= */


.year-track-progress{
  z-index:1;
  height:2px;
  background:var(--rust);
}

.year-links{
  position:relative;
  z-index:3;
}

/* Give the markers a small dark center so the rail remains visually
   continuous instead of disappearing behind each dot. */
.year-links a::before{
  box-shadow:0 0 0 3px rgba(18,18,17,.97);
}

/* The bottom border is only a boundary now; it should not compete
   with the actual timeline rail. */


/* =========================================================
   STICKY YEAR NAV — V2
   Put the rail and the year markers in the SAME grid row.
   The previous fix only made the rail stronger; it was still
   living in the row above the year labels, which is why the
   sticky state still looked like the line disappeared.
   ========================================================= */


.year-track-base,
.year-track-progress{
  top:0;
  height:2px;
}


.year-links{
  grid-column:2;
  grid-row:2;
  position:relative;
  z-index:2;

  align-self:start;
  padding-top:10px;
}

.year-links a::before{
  top:-14px;
  width:6px;
  height:6px;
  background:#57534d;
  box-shadow:0 0 0 3px rgba(18,18,17,.97);
}

.year-links a.is-active::before{
  background:#C8652C;
}

/* Keep the sticky bar boundary visually separate from the actual rail. */


@media(max-width:800px){
  

  .year-links{
    grid-column:2;
    grid-row:2;
    padding-top:9px;
  }
}


/* =========================================================
   2026-09-07 — CLEAN BUILD SYSTEM
   The old pencil/drafting/steel progression is retired.
   One static top range. One quiet story rail. Large clean dates.
   Coursework is a separate secondary system.
   ========================================================= */

/* ---------------------------------------------------------
   STATIC 2023–2031 RANGE
   --------------------------------------------------------- */

.build-range{
  background:#e7e1d6;
  border-top:1px solid rgba(184,91,49,.16);
  border-bottom:1px solid rgba(184,91,49,.18);
}

.build-range-inner{
  width:min(1600px,100%);
  margin:0 auto;
  padding:34px 5vw 30px;

  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:38px;
  align-items:center;
}

.build-range-title{
  padding-right:30px;
  border-right:1px solid rgba(72,64,56,.28);
}

.build-range-title span{
  display:block;
  color:var(--rust);
  font-family:var(--build-detail);
  font-size:clamp(24px,1.9vw,32px);
  font-weight:400;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.build-range-title p{
  margin:8px 0 0;
  color:#665e56;
  font:italic 16px/1.2 Georgia,"Times New Roman",serif;
}

.build-range-track{
  position:relative;

  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:0;

  padding-top:8px;
}

.build-range-line{
  position:absolute;
  left:2%;
  right:2%;
  top:11px;
  height:1px;
  background:rgba(72,64,56,.46);
}

.build-range-year{
  position:relative;
  text-align:center;
  padding-top:13px;
}

.build-range-year::before{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5a554f;
  transform:translate(-50%,-50%);
}

.build-range-year b{
  display:block;
  color:#5a554f;
  font:900 14px/1 Arial,sans-serif;
  letter-spacing:1.4px;
}

.build-range-year small{
  display:block;
  margin-top:5px;
  color:#736b63;
  font:800 8px/1.1 Arial,sans-serif;
  letter-spacing:.7px;
}

.build-range-year.is-now::before{
  width:13px;
  height:13px;
  background:var(--rust);
  box-shadow:
    0 0 0 5px #e7e1d6,
    0 0 0 6px rgba(184,91,49,.32);
}

.build-range-year.is-now b,
.build-range-year.is-now small{
  color:var(--rust);
}

.build-range-year.is-now small{
  font-weight:900;
}


/* ---------------------------------------------------------
   STORY — ONE QUIET SOLID RAIL
   --------------------------------------------------------- */

.story{
  background:#e7e1d6;
}

.year-section{
  width:min(1600px,100%);
  margin:0 auto;
  padding-left:340px;
  background:transparent;
}

.story-line{
  position:absolute;
  left:315px;
  top:0;
  bottom:0;
  z-index:2;
  width:1px;

  background:rgba(77,70,63,.34);
  pointer-events:none;
}

/* Kill every old line/tick pseudo-element from the retired system. */


.moment::before{
  display:none !important;
}


/* ---------------------------------------------------------
   LARGE CLEAN STORY DATES
   No boxes. No dots. No connectors.
   --------------------------------------------------------- */

.moment{
  grid-template-columns:150px minmax(0,1fr);
}

.moment-date,
.moment-decision .moment-date,
.moment-school .moment-date,
.moment-launch .moment-date{
  position:relative;
  top:auto;
  align-self:start;

  width:auto;
  margin:0;
  padding:58px 26px 20px 0;

  color:#5e5852;
  background:transparent;

  border:0;
  box-shadow:none;
  transform:none;

  font:900 12px/1.1 Arial,sans-serif;
  letter-spacing:1.5px;
  text-align:left;
}

.moment-date::before,
.moment-date::after{
  display:none !important;
}

.moment-date span{
  display:block;
  color:#625d57;
}

.moment-date strong{
  display:block;
  margin-top:5px;

  color:var(--rust);
  font-size:22px;
  line-height:1;
}

.moment-date em{
  display:block;
  margin-top:6px;
  color:#827970;
  font-size:9px;
}


/* ---------------------------------------------------------
   COURSEWORK — CLEAN, SECONDARY, NO CONNECTOR APPARATUS
   --------------------------------------------------------- */

.coursework-thread{
  left:20px;
  width:270px;
}

.coursework-thread::after{
  display:none !important;
}

.course-thread-intro{
  position:relative;
  right:auto;
  top:auto;
  width:100%;
  padding:0 0 16px;
  text-align:left;
  border-bottom:2px solid rgba(184,91,49,.45);
}

.course-thread-intro span{
  margin-bottom:7px;
  color:#716a62;
  font-size:9px;
}

.course-thread-intro strong{
  color:#2e2925;
  font-size:19px;
  line-height:1.08;
}

.course-month,
.coursework-thread .course-month{
  position:absolute;
  width:100%;
  padding:10px 0 12px;

  grid-template-columns:64px minmax(0,1fr);
  column-gap:12px;

  border-top:1px solid rgba(78,68,58,.10);
}

.course-month::after{
  display:none !important;
}

.course-month-label{
  text-align:left;
}

.course-month-label span{
  color:#69625b;
  font-size:10px;
}

.course-month-label strong{
  color:var(--rust);
  font-size:15px;
}

.course-items{
  gap:9px;
}

.course-item{
  grid-template-columns:48px minmax(0,1fr);
  gap:8px;
}

.course-item::before{
  display:none;
}

.course-code{
  color:var(--rust);
  font-size:9px;
  text-align:left;
}

.course-title{
  color:#4c4741;
  font-size:11px;
  line-height:1.18;
  letter-spacing:.035em;
}

.course-note{
  opacity:.72;
}


/* ---------------------------------------------------------
   MORE AIR IN MAIN STORY
   --------------------------------------------------------- */

.inventory-layout,
.room-layout,
.school-layout,
.buildings-story-layout,
.test-layout .copy,
.launch-layout{
  padding-right:6vw;
}

.moment-search{
  min-height:320px;
}

.quiet-layout{
  padding-top:76px;
  padding-bottom:76px;
}

.moment-room,
.moment-school,
.moment-buildings,
.moment-test,
.moment-launch{
  margin-top:18px;
}


/* ---------------------------------------------------------
   TABLET / MOBILE
   Static top range compresses.
   Coursework remains expandable.
   Main story rail stays clean.
   --------------------------------------------------------- */

@media(max-width:1180px){

  .build-range-inner{
    grid-template-columns:1fr;
    gap:22px;
    padding:28px 24px 26px;
  }

  .build-range-title{
    padding-right:0;
    border-right:0;
  }

  .build-range-track{
    overflow-x:auto;
    grid-template-columns:repeat(9,96px);
    padding-bottom:6px;
  }

  .build-range-line{
    left:48px;
    right:auto;
    width:768px;
  }

  .year-section{
    width:100%;
    padding-left:64px;
  }

  .story-line{
    left:32px;
  }

  .moment{
    display:block;
  }

  .moment-date,
  .moment-decision .moment-date,
  .moment-school .moment-date,
  .moment-launch .moment-date{
    width:auto;
    margin:0;
    padding:30px 20px 12px 0;
  }

  .moment-date strong{
    font-size:22px;
  }

  .coursework-desktop{
    display:none !important;
  }
}

@media(max-width:800px){

  .build-range{
    overflow:hidden;
  }

  .build-range-inner{
    padding:24px 18px 22px;
  }

  .build-range-title span{
    font-size:22px;
  }

  .build-range-title p{
    font-size:14px;
  }

  .build-range-track{
    grid-template-columns:repeat(9,88px);
    padding-bottom:8px;
  }

  .build-range-line{
    left:44px;
    width:704px;
  }

  .build-range-year b{
    font-size:12px;
  }

  .build-range-year small{
    font-size:7px;
  }

  .year-section{
    padding-left:54px;
  }

  .story-line{
    left:27px;
  }

  .moment-date,
  .moment-decision .moment-date,
  .moment-school .moment-date,
  .moment-launch .moment-date{
    padding:28px 18px 12px 0;
  }

  .moment-date span{
    font-size:11px;
  }

  .moment-date strong{
    font-size:21px;
  }

  .coursework-mobile{
    margin-top:42px;
  }
}


/* =========================================================
   2026-09-07 — FINAL CLEAN CHRONOLOGY
   One darker solid rail. No dashed/angled Today line.
   No special black 2023 bleed. No leftover 2023 drafting art.
   Dates use one small rust rule and large month/year typography.
   ========================================================= */

/* The main chronology rail should be visible and deliberate. */
.story-line,
.pencil-line,
.ink-line,
.drafting-line,
.steel-line{
  width:1px !important;
  background:rgba(55,50,45,.56) !important;
  opacity:1 !important;
}

.story-line::after,
.pencil-line::after,
.ink-line::after,
.drafting-line::after,
.steel-line::after{
  display:none !important;
}


/* ---------------------------------------------------------
   DATES
   --------------------------------------------------------- */

.moment-date,
.moment-decision .moment-date,
.moment-school .moment-date,
.moment-launch .moment-date{
  position:relative;
  top:auto;
  align-self:start;

  width:auto;
  margin:0;
  padding:54px 24px 20px 0;

  color:#615b55;
  background:transparent;
  border:0;
  box-shadow:none;

  font:900 12px/1.1 Arial,sans-serif;
  letter-spacing:1.45px;
  text-align:left;
}

/* One small rust rule above every date. */
.moment-date::before{
  content:"";
  display:block !important;
  position:static;

  width:58px;
  height:2px;
  margin:0 0 14px;

  background:var(--rust);
}

.moment-date::after{
  display:none !important;
}

.moment-date span{
  display:block;
  color:#615b55;
}

.moment-date strong{
  display:block;
  margin-top:5px;

  color:var(--rust);
  font-size:23px;
  line-height:1;
}

.moment-date em{
  display:block;
  margin-top:6px;

  color:#857d74;
  font-size:9px;
}


/* ---------------------------------------------------------
   SPRING 2023
   Same paper field as the rest of the chronology.
   --------------------------------------------------------- */

.year-2023{
  padding-top:0;
  padding-bottom:36px;
}

/* Retire the old local drafting grid. */
.year-2023::before{
  display:none !important;
}

/* Retire the old decorative overlay hook. */


/* No more full-width black chapter. */
.moment-inventory{
  position:relative;
  padding-bottom:72px;

  color:var(--ink);
  background:transparent;

  box-shadow:none;
  clip-path:none;
}

.inventory-layout{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:70px;
  align-items:start;

  padding:58px 5vw 62px 2vw;
}

.inventory-photo-wrap{
  margin-top:8px;
}

.inventory-copy h3{
  color:var(--ink);
}

.inventory-copy p{
  color:#302c28;
}

.inventory-emphasis{
  color:#24211e !important;
}

.inventory-principle{
  border-top:1px solid rgba(184,91,49,.38);
}

.inventory-principle span{
  color:#6a625a;
}

.moment-inventory .moment-date span{
  color:#615b55;
}


/* ---------------------------------------------------------
   TODAY
   The solid chronology ends cleanly. No crooked/dashed flourish.
   --------------------------------------------------------- */

.today-section{
  position:relative;

  width:min(1600px,100%);
  min-height:270px;
  margin:auto;

  padding:72px 8vw 72px 340px;
}

.today-line{
  position:absolute;
  left:315px;
  top:0;

  width:1px;
  height:88px;

  background:rgba(55,50,45,.56);
  transform:none;
}

.today-copy{
  max-width:620px;
}

.today-copy .eyebrow{
  font-size:12px;
}

.today-copy p{
  margin-top:8px;
  font-size:18px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media(max-width:1180px){

  .inventory-layout{
    grid-template-columns:1fr;
    gap:30px;
    padding:42px 24px 54px;
  }

  .inventory-photo-wrap{
    margin-top:0;
  }

  .today-section{
    width:100%;
    min-height:230px;
    padding:58px 24px 58px 64px;
  }

  .today-line{
    left:32px;
    height:74px;
  }
}

@media(max-width:800px){

  .moment-date,
  .moment-decision .moment-date,
  .moment-school .moment-date,
  .moment-launch .moment-date{
    padding:28px 18px 12px 0;
  }

  .moment-date::before{
    width:46px;
    margin-bottom:11px;
  }

  .moment-date strong{
    font-size:22px;
  }

  .today-section{
    padding:50px 20px 50px 54px;
  }

  .today-line{
    left:27px;
    height:64px;
  }
}


/* =========================================================
   MOBILE WIDTH LOCK — FINAL
   The clean chronology changed desktop geometry; this block
   explicitly resets all desktop widths/offsets on phones.
   ========================================================= */

@media(max-width:800px){

  html,
  body,
  body.building-page{
    width:100%;
    max-width:100%;
    margin:0;
    overflow-x:clip !important;
  }

  #main-content,
  .build-hero,
  .manifesto,
  .build-range,
  .build-range-inner,
  .story,
  .year-section,
  .moment,
  .moment-body,
  .today-section,
  .closing,
  .site-footer{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* HERO */
  .build-hero{
    min-height:620px;
    padding:58px 22px 60px !important;
    background-position:62% center;
  }

  .build-hero-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .build-kicker,
  .build-title,
  .hero-sub{
    margin-left:0 !important;
    max-width:100% !important;
  }

  .build-title{
    width:100%;
  }

  .build-title-building,
  .build-title-gc{
    font-size:clamp(46px,12.5vw,64px) !important;
    letter-spacing:0 !important;
  }

  .hero-sub{
    width:auto !important;
    max-width:92% !important;
    font-size:clamp(23px,6.6vw,30px) !important;
  }

  /* MANIFESTO */
  .manifesto{
    display:block !important;
    padding:62px 22px 66px !important;
  }

  .manifesto-title,
  .manifesto-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  .manifesto h2{
    max-width:100% !important;
  }

  /* STATIC TOP TIMELINE */
  .build-range{
    overflow:hidden !important;
  }

  .build-range-inner{
    display:block !important;
    padding:24px 18px 22px !important;
  }

  .build-range-title{
    padding:0 0 18px !important;
    border-right:0 !important;
  }

  .build-range-track{
    display:grid !important;
    grid-template-columns:repeat(9,88px) !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }

  .build-range-line{
    left:44px !important;
    right:auto !important;
    width:704px !important;
  }

  /* STORY */
  .year-section{
    padding-left:54px !important;
    padding-right:0 !important;
  }

  .story-line{
    left:27px !important;
  }

  .moment{
    display:block !important;
    min-width:0 !important;
  }

  .moment-body{
    min-width:0 !important;
    width:100% !important;
    overflow:visible !important;
  }

  .moment-date,
  .moment-decision .moment-date,
  .moment-school .moment-date,
  .moment-launch .moment-date{
    width:auto !important;
    margin:0 !important;
    padding:28px 18px 12px 0 !important;
  }

  /* Every complex story layout collapses cleanly. */
  .inventory-layout,
  .school-layout,
  .buildings-story-layout,
  .test-layout{
    grid-template-columns:1fr !important;
  }

  .inventory-layout,
  .decision-layout,
  .room-layout,
  .quiet-layout,
  .school-layout,
  .buildings-story-layout,
  .ownership-layout,
  .test-layout,
  .launch-layout{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .inventory-layout,
  .school-layout,
  .buildings-story-layout{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .ownership-layout{
    margin:30px 0 60px !important;
  }

  .test-layout .copy,
  .launch-layout{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  /* COURSEWORK ACCORDION */
  .coursework-mobile{
    width:auto !important;
    max-width:calc(100% - 36px) !important;
    margin-left:18px !important;
    margin-right:18px !important;
  }

  /* TODAY */
  .today-section{
    padding:50px 20px 50px 54px !important;
  }

  .today-line{
    left:27px !important;
  }

  /* Keep all mobile story content fully visible. */
  .js .moment .moment-body,
  .js .moment.is-active .moment-body,
  .js .moment.is-past .moment-body{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   BUILD RANGE — 2026 RIGHT NOW PULSE
   Slow, restrained outer-ring pulse; no blinking.
   ========================================================= */

.build-range-year.is-now::before{
    top:3px;
    width:13px;
    height:13px;
    background:var(--rust);
    box-shadow:
        0 0 0 5px #e7e1d6,
        0 0 0 6px rgba(184,91,49,.34);
    animation:gc-now-pulse 3.8s ease-out infinite;
}

@keyframes gc-now-pulse{
    0%, 58%, 100%{
        box-shadow:
            0 0 0 5px #e7e1d6,
            0 0 0 6px rgba(184,91,49,.34);
    }
    72%{
        box-shadow:
            0 0 0 5px #e7e1d6,
            0 0 0 11px rgba(184,91,49,.08);
    }
}

@media (prefers-reduced-motion: reduce){
    .build-range-year.is-now::before{
        animation:none;
    }
}





/* THE BUILD — approved distressed Foundry asset */
.build-range-heading-image{
    margin:0;
    line-height:0;
}
.build-range-heading-image img{
    display:block;
    width:min(250px,100%);
    height:auto;
}
@media(max-width:800px){
    .build-range-heading-image img{
        width:min(220px,82vw);
    }
}


/* =========================================================
   BUILDING G&C — PUBLISH CLEANUP
   ========================================================= */

/* THE BUILD wordmark no longer needs a separator beside it. */
.build-range-title{
    border-right:0 !important;
}

/* The date is enough. Remove the leftover small rust dash above entry dates. */
.moment-date::before,
.moment-date::after{
    display:none !important;
    content:none !important;
}


/* =========================================================
   BUILDING G&C — CHRONOLOGY START
   No stray rust bar. Start the story line deliberately with a dot.
   ========================================================= */

/* Remove leftover short rust rule above the first date. */
.moment-date{
    position:relative;
}
.moment-date::before,
.moment-date::after{
    display:none !important;
    content:none !important;
}

/* Any dedicated decorative mini-rule at the first moment is gone. */
.year-section:first-of-type .moment-date + .moment-rule,
.year-section:first-of-type .moment-rule,
.year-2023 .moment-rule{
    display:none !important;
}