/* by: claude. The rest of the site in the homepage's look (human, 2026-10-29). Linked after reading-plate.css
   on services, methodology, fix, the sample report, the legal pages, About and the 404, so it only overrides. */
main.reading.wide{max-width:1180px}
#main .reading-plate{--tile:rgba(8,8,7,.55);--edge:rgba(242,243,237,.1);--warm:rgba(238,164,67,.35)}
#main .reading-plate h1 em{font-style:normal;color:var(--amber);text-shadow:0 0 28px rgba(238,164,67,.35)}
#main .reading-plate h2{font-size:clamp(24px,2.6vw,36px);line-height:1.14}
#main .reading-plate :is(.lead,.intro){font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--cream)}
#main .reading-plate .quiet{color:var(--dim)}
#main .reading-plate :is(b,strong,dt){color:var(--cream)}

/* a tile: the darker charcoal with a thin edge, as the blog cards */
#main .reading-plate :is(.service-item,.assessment-three article,.method-proxies article,.sample-actions article,
  .sample-ledger>section>article,.card,.about-chapter,.measure){background:var(--tile);border:1px solid var(--edge);
  border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.3)}

/* jump links as chips */
#main .reading-plate :is(.service-jump,.method-jump){display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px;border:0;padding:0}
#main .reading-plate :is(.service-jump,.method-jump) a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;
  border:1px solid var(--edge);border-radius:999px;background:var(--tile);color:var(--cream);text-decoration:none;font-size:14px;
  transition:border-color .18s ease,color .18s ease}
#main .reading-plate :is(.service-jump,.method-jump) a:hover{border-color:var(--amber);color:var(--amber)}

/* questions that open: a row on the glass with an amber chevron */
#main .reading-plate details{background:var(--tile);border:1px solid var(--edge);border-radius:12px;padding:0 22px;margin:10px 0;
  transition:border-color .2s ease}
#main .reading-plate details[open]{border-color:var(--warm)}
#main .reading-plate summary{list-style:none;cursor:pointer;position:relative;padding:16px 36px 16px 0;font-size:17px;font-weight:600;
  line-height:1.4;color:var(--cream)}
#main .reading-plate summary::-webkit-details-marker{display:none}
#main .reading-plate summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:translateY(-75%) rotate(45deg);transition:transform .25s ease}
#main .reading-plate details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
#main .reading-plate details>:last-child{padding-bottom:18px}
#main .reading-plate details p{color:var(--dim)}

/* the closing call: amber light pooled behind the panel */
#main .reading-plate .assessment-final{border:1px solid var(--warm);border-top:3px solid var(--amber);border-radius:18px;
  background:radial-gradient(ellipse 70% 120% at 0% 0%,rgba(238,164,67,.16),transparent 60%),rgba(8,8,7,.7);
  box-shadow:0 0 60px rgba(238,164,67,.12),0 24px 60px rgba(0,0,0,.4)}

/* services: each service a card, the scene in an amber-edged frame */
.services-plate #main .service-item{padding:28px;gap:36px;margin-top:28px;border-top:1px solid var(--edge)}
.services-plate #main .service-item img{border-radius:12px;border:1px solid rgba(238,164,67,.22);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.services-plate #main .service-item dt{color:var(--amber);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.services-plate #main .service-item dd{color:var(--cream)}
.services-plate #main .service-scope{border-left-color:var(--amber);color:var(--dim)}

/* methodology: the three steps and the proxies as tiles, the weights table on its own panel */
#main .reading-plate .assessment-three article{padding:24px;border-top:2px solid var(--amber)}
#main .reading-plate .assessment-three article span{color:var(--amber);font-weight:700}
#main .reading-plate .method-proxies article{padding:24px}
#main .reading-plate .method-factors table{background:var(--tile);border:1px solid var(--edge);border-radius:12px;overflow:hidden}
#main .reading-plate .method-factors :is(td,th){padding:12px 16px}
#main .reading-plate .assessment-limit{border-left:3px solid var(--amber);padding-left:16px;color:var(--cream)}

/* fix: the request form on a lit card, fields on charcoal with an amber focus */
.fix-plate #main .card{padding:28px}
.fix-plate #main #scope-request{border-color:var(--warm);box-shadow:0 0 60px rgba(238,164,67,.1),0 24px 60px rgba(0,0,0,.4)}
.fix-plate #main #scope-form :is(input,select,textarea){background:rgba(12,11,10,.9);border:1px solid rgba(242,243,237,.22);
  border-radius:8px;color:var(--cream);transition:border-color .18s ease,box-shadow .18s ease}
.fix-plate #main #scope-form :is(input,select,textarea):focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(238,164,67,.2);outline:none}
.fix-plate #main .outcome-row>span{color:var(--amber)}
.fix-plate #main .website-preview{border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
/* the sample plumber's site keeps its own light palette, and the amber buttons keep their dark words */
.fix-plate #main .website-preview :is(b,span:not(.preview-button)){color:inherit}
.fix-plate #main .website-preview h3{color:#153b38}
.fix-plate #main .website-preview p{color:#294b43}
.fix-plate #main a.scope-link{color:#111820}
.fix-plate #main a.site-preview-link{color:#173d3e}
/* the form's next button before the fields are filled: charcoal with readable words, not faded amber */
.fix-plate #main .scope-link:disabled{opacity:1;background:#2a2622;border-color:#5a5248;color:#d8d2c6;box-shadow:none}

/* the sample report: findings as sheets, every check a tile, the verdict word in amber when it needs work */
.sample-report-plate #main .sample-actions article{padding:26px 28px;margin-top:18px;border-left:3px solid var(--amber)}
.sample-report-plate #main .sample-ledger>section:last-of-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sample-report-plate #main .sample-ledger>section:last-of-type>:is(h2,p){grid-column:1/-1}
.sample-report-plate #main .sample-ledger>section:last-of-type>article{padding:20px 22px;margin:0}
.sample-report-plate #main .sample-ledger>section:last-of-type>article h3{font-size:17px;margin:0 0 6px}
.sample-report-plate #main .verdict{color:var(--dim);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sample-report-plate #main .verdict:has(a){color:var(--amber);font-weight:700}

/* legal pages, About and the 404 stay calm: the reading plate alone, with tiles where the page already has them */
#main .reading-plate .measure{padding:32px}
.about-plate #main .about-chapter{padding:32px;margin-top:28px}
.about-plate #main .owner-portrait{border-radius:14px;border:1px solid rgba(238,164,67,.22)}
.notfound-plate #main .reading-plate{min-height:52vh}

/* one scroll moment per page (2026-10-29), driven by the scroll itself, no script. Browsers without
   scroll timelines and visitors who ask for less motion see every part in its final place. */
.services-plate #main .service-item figure{overflow:hidden;border-radius:12px}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  /* services: each card rises onto the glass, and its scene drifts slowly inside its frame */
  .services-plate #main .service-item{animation:card-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .services-plate #main .service-item img{animation:scene-drift linear both;animation-timeline:view();animation-range:cover}
  /* methodology: the three steps rise in turn and their amber rules draw across */
  .methodology-plate #main .assessment-three article{animation:card-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .methodology-plate #main .assessment-three article:nth-child(2){animation-range:entry 10% entry 90%}
  .methodology-plate #main .assessment-three article:nth-child(3){animation-range:entry 20% entry 100%}
  .methodology-plate #main .assessment-three article{border-top:1px solid var(--edge)}
  .methodology-plate #main .assessment-three article::before{content:"";display:block;height:2px;margin:-24px -24px 22px;border-radius:16px 16px 0 0;
    background:var(--amber);box-shadow:0 0 10px rgba(238,164,67,.6);transform-origin:0 50%;
    animation:rule-draw linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
  /* the sample report: each work item lifts off the plate like a sheet of paper */
  .sample-report-plate #main .sample-actions article{transform-origin:50% 100%;animation:sheet-lift linear both;
    animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes card-rise{from{opacity:0;transform:translateY(64px) scale(.97)}}
  @keyframes scene-drift{from{transform:scale(1.1) translateY(-14px)}to{transform:scale(1.02) translateY(14px)}}
  @keyframes rule-draw{from{transform:scaleX(0)}}
  @keyframes sheet-lift{from{opacity:0;transform:perspective(900px) rotateX(14deg) translateY(48px)}}}}

@media (max-width:700px){
  #main .reading-plate :is(.service-item,.card,.about-chapter,.measure){padding:20px}
  .sample-report-plate #main .sample-ledger>section:last-of-type{grid-template-columns:1fr}
  #main .reading-plate details{padding:0 16px}
}