/* ============================================================================
   AMILLATI & CO - the content pages (coaching, consulting, community; writing folded in 19 Sep 2026)
   ============================================================================
   HAND-WRITTEN, 10 Sep 2026. site.css is GENERATED from index.html and carries the tokens and
   the nav; this file sits after it and carries only what the content pages add. Never move any
   of this into site.css, and never hand-edit site.css.

   The layout follows Rob's own builder notes in INTAKE/Website Content (10 Sep 2026): quotes at
   display size with hairlines, two EQUAL columns for the two ways in, flowing paragraphs instead
   of lists, a plain post list with no cards, a quiet Substack link that is never a form, a shell
   CTA band. Small type uses --gold-text, never --gold (contrast, see site.css).
   ============================================================================ */

.pg{padding-bottom:0;}
.pg-hero{padding:clamp(40px,7vw,96px) 0 clamp(52px,8vw,96px);border-bottom:1px solid var(--hair);}
.pg-hero h1{margin-bottom:0;max-width:16ch;}
.pg-hero .sub{font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:var(--muted);max-width:44ch;
  margin:22px 0 0;}

.sec{--sec-pad:clamp(56px,8vw,104px);padding:var(--sec-pad) 0;border-bottom:1px solid var(--hair);}
.sec:last-of-type{border-bottom:0;}
.pg.roomy .sec{--sec-pad:clamp(72px,10vw,140px);padding:var(--sec-pad) 0;}
.sec h2{font-size:clamp(30px,3.6vw,48px);font-weight:400;line-height:1.08;letter-spacing:-0.004em;
  margin:0 0 22px;max-width:20ch;}
.sec h2 em,.pg-hero h1 em{font-style:italic;color:var(--gold-text);}

.lead{font-size:20px;line-height:1.7;color:var(--ink);max-width:58ch;margin:0;}
.flow{font-size:20px;line-height:1.7;color:var(--ink);max-width:62ch;margin:0;}
.prose p{font-size:18.5px;line-height:1.78;color:var(--ink);max-width:58ch;margin:0 0 22px;}
.prose p:last-child{margin-bottom:0;}

/* the four quotes: the emotional centre of the coaching page. More room than the word count. */
.quotes{list-style:none;margin:clamp(36px,5vw,60px) 0 0;padding:0;}
.quotes li{font-size:clamp(24px,2.7vw,34px);line-height:1.3;font-style:italic;max-width:24ch;
  padding:clamp(28px,3.6vw,46px) 0;border-top:1px solid var(--hair);}
.quotes li:first-child{border-top:0;padding-top:0;}

/* pull quotes. Hanging indent so the opening quote mark sits in the margin. */
.pull{font-size:clamp(28px,3.2vw,38px);line-height:1.25;margin:clamp(30px,4vw,48px) 0 0;max-width:26ch;}
.pull.hang{text-indent:-0.42em;padding-left:0.42em;}  /* only when the line opens with a quote mark */
.pull.big{font-size:clamp(30px,3.7vw,44px);}
.pull.sm{font-size:clamp(24px,2.8vw,34px);}
.pull:first-child{margin-top:0;}

/* two EQUAL columns. If one is larger the other reads as an upsell (Rob's note). */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:clamp(30px,4vw,48px);}
.col{border-top:1px solid var(--gold);padding-top:22px;}
.col h3{font-size:clamp(24px,2.4vw,30px);font-weight:400;line-height:1.15;margin:0 0 14px;}
.col p{font-size:18px;line-height:1.7;color:var(--ink);margin:0 0 14px;}
.col .practical{font-size:15.5px;line-height:1.65;color:var(--muted);margin:18px 0 24px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text);
  margin:0 0 12px;}
.linkcta{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:6px;
  transition:color .3s var(--ease-body);}
.linkcta:hover,.linkcta:focus-visible{color:var(--gold-text);}

/* fit: two columns, two lines. Not two bulleted lists (Rob's note). */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:clamp(28px,4vw,44px);}
.fit p{font-size:clamp(20px,2vw,24px);line-height:1.45;margin:0;max-width:24ch;}

.aside{border-left:2px solid var(--gold);padding:6px 0 6px clamp(18px,2.5vw,30px);font-size:21px;
  line-height:1.55;font-style:italic;max-width:40ch;margin:clamp(28px,4vw,44px) 0 0;}

/* entries: hairline above each, the first one gold. No logos. */
.entries{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;}
.entries li{border-top:1px solid var(--hair);padding:clamp(22px,3vw,34px) 0;}
.entries li:first-child{border-top-color:var(--gold);}
.entries h3{font-size:clamp(22px,2.2vw,28px);font-weight:400;line-height:1.2;margin:0 0 8px;}
.entries p{font-size:18px;line-height:1.7;color:var(--muted);margin:0;max-width:56ch;}
.entries .site{display:inline-block;margin-top:12px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text);border-bottom:1px solid var(--hair);
  padding-top:6px;}  /* 20 Sep: taller tap target (was 21px), underline unmoved */

/* how I decide: two by two, one line each */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,48px);}
.rules p{border-top:1px solid var(--hair);padding-top:18px;margin:0;font-size:clamp(19px,1.9vw,23px);line-height:1.4;}

/* the post list: title, one line, date, hairline between. No cards, no thumbnails, no read time. */
.posts{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;}
.posts li{display:grid;grid-template-columns:1fr auto;gap:8px clamp(20px,4vw,48px);align-items:baseline;
  border-top:1px solid var(--hair);padding:clamp(18px,2.5vw,28px) 0;}
.posts li:first-child{border-top-color:var(--gold);}
.posts a.t{font-size:clamp(21px,2.2vw,27px);line-height:1.25;border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-body);}
.posts a.t:hover,.posts a.t:focus-visible{border-bottom-color:var(--gold);}
.posts .line{grid-column:1;font-size:17px;line-height:1.5;color:var(--muted);margin:0;}
/* 19 Sep 2026: placement made explicit. With only the date's ROW set, the grid placed it FIRST, in
   column 1, and pushed every title into the narrow right column. That was live on /writing/ since
   10 Sep (measured: title at x=783, date at x=194). Title and line left, date right. */
.posts a.t{grid-column:1;grid-row:1;justify-self:start;}
.posts .line{grid-row:2;}
.posts .date{grid-column:2;grid-row:1/3;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;}

/* held: a visible placeholder, never filled with words Rob has not said */
.held-line{display:inline-block;border:1px dashed var(--gold);border-radius:2px;padding:4px 10px;
  font-size:13px;letter-spacing:.06em;color:var(--gold-text);background:rgba(185,138,46,.05);}
.pg-held{margin-top:clamp(26px,3.5vw,40px);}

/* the CTA band: shell background, centred, full width */
.cta-band{background:var(--shell);text-align:center;padding:clamp(72px,10vw,130px) clamp(22px,5vw,64px);
  margin-top:clamp(56px,8vw,100px);}
.cta-band .eyebrow{margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-text);}
.cta-band h2{font-size:clamp(34px,4.6vw,62px);font-weight:400;line-height:1.05;margin:0 0 22px;}
.cta-band p{font-size:18.5px;line-height:1.7;color:var(--muted);max-width:44ch;margin:0 auto 10px;}
.btn{display:inline-flex;align-items:center;gap:16px;margin-top:28px;font-size:13px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:11px 11px 11px 26px;border-radius:99px;
  border:1px solid var(--hair);background:var(--ground);color:var(--ink);
  transition:border-color .5s var(--ease),background .5s var(--ease);}
.btn .dot{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;background:var(--gold);
  color:var(--ground);font-size:15px;line-height:1;transition:transform .5s var(--ease);}
.btn:hover,.btn:focus-visible{border-color:var(--gold);}
.btn:hover .dot{transform:translateX(3px) translateY(-1px) scale(1.06);}
.cta-band .faint{display:block;margin-top:18px;font-size:12.5px;letter-spacing:.12em;color:var(--faint);}

/* 19 Sep 2026: the writing, folded into /community/ in Rob's structure (/writing/ 301s there).
   The post list above is reused as it was; these three rules add his subject lines, set as a short
   italic stanza, the note under the list, and room above the Substack link. */
.subjects{margin:clamp(28px,4vw,44px) 0 0;font-size:clamp(22px,2.4vw,30px);line-height:1.4;font-style:italic;
  color:var(--ink);max-width:30ch;}
.posts-note{margin:clamp(26px,3.4vw,38px) 0 20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch;}
/* anchors (/coaching/#story from the homepage, /community/#writing) clear the fixed nav */
.sec[id]{scroll-margin-top:calc(var(--nav-h) + 24px);}
/* the footer carries Rob's own footer line under the mark (19 Sep 2026) */
.pg-foot p + p{margin-top:8px;letter-spacing:.1em;}
/* 20 Sep 2026: small footer type at --faint measured 3.6:1 (light) / 3.8:1 (dark); --muted passes */
.pg-foot p{color:var(--muted);}

/* the credential line: one line at the foot, not a badge */
.cred{margin-top:clamp(40px,6vw,64px);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}

/* reveals. Body-scale, plain ease. Reduced motion and print both reset to the END state. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-body),transform .8s var(--ease-body);}
.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .rv{opacity:1 !important;transform:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}
@media print{
  .js .rv{opacity:1 !important;transform:none !important;transition:none !important;}
  .nav,.nav-drawer{display:none;}
  body{padding-top:0;}
}

@media (max-width:760px){
  .cols,.fit,.rules{grid-template-columns:1fr;gap:28px;}
  .fit p{max-width:none;}  /* 20 Sep: one column on phones, so the 24ch desktop measure only squeezed it */
  .posts li{grid-template-columns:1fr;}
  .posts a.t,.posts .line,.posts .date{grid-column:1;grid-row:auto;}
  .pg-hero{padding-top:8px;}
  .pull.hang{text-indent:0;padding-left:0;}
}

/* 20 Sep 2026: Rob's rail. His 18 Sep mockups set every section label in its own left column (the label,
   its number beneath) with the content in a second column: 220px, then a 64px gap. The content stays in
   normal flow so its own spacing is untouched; only the label leaves it. Stacked below 900px with the
   number inline, as in his files. */
.pg .eyebrow.rail em{display:block;margin-top:10px;font-style:normal;color:var(--muted);letter-spacing:.18em;}
@media (min-width:901px){
  .pg .sec{--rail:220px;--rail-gap:64px;position:relative;padding-left:calc(var(--rail) + var(--rail-gap));}
  .pg .sec > .eyebrow.rail{position:absolute;left:0;top:var(--sec-pad);width:var(--rail);margin:0;padding-top:4px;line-height:1.5;}
  .pg .sec > .eyebrow.rail + *{margin-top:0;}
}
@media (max-width:900px){ .pg .eyebrow.rail em{display:inline;margin:0 0 0 10px;} }