/* scifinder-layout.css
   Two-column layout for the SciFinder case study. Loaded only by
   scifinder.html, after case-study.css. Every rule is scoped under
   body.sfp, so nothing here reaches the other case-study pages. Colours
   come from the tokens; the only thing declared here that is not in
   tokens.css is the GT America Condensed face used for the rail and for
   captions.

   Desktop (>=1024px): each section is a two-column row. A sticky rail
   on the left carries the section number, name and subsection links;
   the section's content runs in one column on the right. Below 1024px
   there is no rail: the number and name become a normal heading above
   a single column, and the subsection links are dropped (the "Jump to"
   row in the intro already covers navigation on small screens). */

@font-face{
  font-family:"GT America Condensed";
  src:url("../fonts/gt-america-condensed-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

body.sfp{
  --sfp-rail:clamp(220px,20vw,280px);
  --sfp-gap:clamp(40px,5.56vw,80px);
  /* Side margin of the centred block: 32px at 1024, ~120px at 1440. */
  --sfp-pad:clamp(32px,calc(32px + (100vw - 1024px) * .2115),120px);
  --sfp-rail-font:"GT America Condensed",var(--ui);
  --sfp-wide:1100px;       /* widest the content column may grow */
  --sfp-muted:color-mix(in srgb,var(--ink) 72%,var(--ground));   /* ~5.4:1 on the ground */
  --sfp-text:840px;        /* the reading measure; wide media may pass it */
  --sfp-top:60px;          /* where the pinned rail sits under the viewport top */
}

/* The original section wrap reserved a left lane for the number badge
   and its rail line. This layout has neither, so the wrap goes back to
   plain --step gutters and the grid does the aligning. */
.sfp .case-section > .wrap{
  padding-left:var(--step);
  padding-right:var(--step);
}

/* --- small screens: one column, heading above content --------------- */
.sfp-rail{
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
}
.sfp-rail h2{margin:0;}
.sfp-rail nav{display:none;}
.sfp-num{
  flex:none;
  width:2.5rem;height:2.5rem;
  border-radius:50%;
  background:var(--orange-600);      /* 4.76:1 under the cream numeral */
  color:var(--ground);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display-alt);
  font-size:1.05rem;
  line-height:1;
}
/* Intro rail is only the back link; keep it a plain block. */
.sfp-rail--intro{display:block;margin-bottom:0;}

/* --- desktop: centred two-column row with a pinned rail --------------
   The block is centred with side margins that reach ~120px at 1440, so
   rail + gap + column = 1200 there (280 + 80 + 840). Wider screens let
   the column grow to --sfp-wide for media while text stays at 840. */
@media (min-width:1024px){
  .sfp .sfp-row.wrap{
    max-width:calc(var(--sfp-rail) + var(--sfp-gap) + var(--sfp-wide) + var(--sfp-pad) * 2);
    padding-left:var(--sfp-pad);
    padding-right:var(--sfp-pad);
  }
  .sfp-row{
    display:grid;
    grid-template-columns:var(--sfp-rail) minmax(0,1fr);
    column-gap:var(--sfp-gap);
    align-items:start;
  }
  .sfp-content{max-width:var(--sfp-wide);min-width:0;}

  .sfp-rail{
    display:block;
    position:sticky;
    top:var(--sfp-top);
    margin-bottom:0;
  }
  .sfp-rail--intro{position:static;}

  /* Rail type is deliberately small and quiet: the content carries the
     page, the rail only orients. The number keeps the page's display
     face; the name and links use GT America Condensed Medium (the one
     weight loaded, so no bold is faked for the current link). */
  .sfp-num{
    width:auto;height:auto;
    background:none;
    border-radius:0;
    display:block;
    color:var(--orange-600);    /* 4.76:1 on the cream ground */
    font-size:1.625rem;         /* 26px */
    line-height:1.3;
    margin:0 0 1rem;
  }
  /* The section name stays the <h2> (heading order is unchanged); it is
     just set small here. */
  .sfp-rail h2{
    font-family:var(--sfp-rail-font);
    font-size:.8125rem;         /* 13px */
    font-weight:500;
    letter-spacing:.05em;
    text-transform:uppercase;
    line-height:1.3;
    color:var(--ink);
    margin:0 0 .9rem;
  }

  .sfp-rail nav{display:block;}
  .sfp-rail ul{list-style:none;margin:0;padding:0;}
  /* A rule above every link: it divides the name from the first link
     and each link from the next, and none trails the last. */
  .sfp-rail li{border-top:1px solid var(--rule);}
  .sfp-rail nav a{
    position:relative;
    display:block;
    padding:.6rem 0;
    font-family:var(--sfp-rail-font);
    font-size:.8125rem;         /* 13px */
    font-weight:500;
    letter-spacing:.05em;
    text-transform:uppercase;
    line-height:1.3;
    color:var(--sfp-muted);
    text-decoration:none;
  }
  .sfp-rail nav a:hover{
    color:var(--ink);
    text-decoration:underline;text-underline-offset:.25em;
  }
  /* Current link: darker, plus a small square marker in the margin, so
     it is not colour alone. */
  .sfp-rail nav a[aria-current="true"]{color:var(--ink);}
  .sfp-rail nav a[aria-current="true"]::before{
    content:"";
    position:absolute;
    left:-14px;top:50%;
    width:6px;height:6px;
    margin-top:-3px;
    background:var(--orange-500);   /* graphic mark: 3.4:1 clears the 3:1 bar */
  }

  /* The intro is not a rail + column row: everything in it, back link
     included, sits flush left on the block's left edge. */
  .sfp header .sfp-row{display:block;}
  .sfp header .sfp-rail--intro{margin-bottom:clamp(1.5rem,3vw,2.25rem);}
}

/* --- measure ---------------------------------------------------------
   Text holds to ~840px. Figures, sliders, wireframe canvases, the
   flowchart and the stat band keep case-study.css's own 1100px cap and
   simply fill the column, so they may run wider than the text but share
   its left edge. */
.sfp .case-editorial,
.sfp .case-overview p,
.sfp .case-stats-intro{max-width:var(--sfp-text);}

/* Anchored subsections land level with the pinned rail's top offset.
   site.css already gives the whole page scroll-padding-block:6rem, so
   that amount is subtracted here to land at --sfp-top + 8px rather
   than 6rem further down. */
.sfp .case-subsection{scroll-margin-top:calc(var(--sfp-top) + 8px - 6rem);}
.sfp .case-subsection:focus{outline:none;}   /* programmatic focus target only */

/* --- captions and image labels ---------------------------------------
   These were falling back to the system sans (--ui). They now use the
   same GT America Condensed Medium as the rail. Only that one weight is
   loaded, so the caption's old italic is dropped rather than faked, and
   sizes go up a hair because the condensed face sets smaller. */
.sfp .compare-caption,
.sfp .compare-label,
.sfp .case-artboard-label,
.sfp .case-flowchart-hint,
.sfp .case-lightbox-caption{
  font-family:var(--sfp-rail-font);
  font-weight:500;
  font-style:normal;
  letter-spacing:.03em;
}
.sfp .compare-caption{font-size:1rem;}
.sfp .compare-label{font-size:.9375rem;}
.sfp .case-artboard-label{font-size:.9375rem;}
.sfp .case-flowchart-hint{font-size:.9375rem;}
.sfp .case-lightbox-caption{font-size:1rem;}

/* Back link and the "Jump to" row are UI text that was also on the
   system sans; same face and treatment as the rail. */
.sfp .case-back,
.sfp .case-nav,
.sfp .case-nav-label,
.sfp .case-nav a{
  font-family:var(--sfp-rail-font);
  font-weight:500;
  letter-spacing:.03em;
}
.sfp .case-back a,
.sfp .case-nav a,
.sfp .case-nav-label{font-size:1.0625rem;}

/* --- colour roles ------------------------------------------------------
   Green stays the base (headings, body ink, links, rules). Orange marks
   orientation and results; blue marks interaction and structure, the
   same split the homepage uses. Every pairing below is measured on the
   cream ground or against its fill:
     orange 600 numerals ........ 4.76:1   orange 700 stats ...... 6.61:1
     orange 500 marker (graphic)  3.40:1   cream on inkblue 700 ... 6.22:1
     cream on inkblue 800 ....... 9.04:1                                   */

/* Results: the two big numbers. */
.sfp .case-stat-number{color:var(--orange-700);}

/* Interaction: before/after slider control and its pills. */
.sfp .compare-knob{background:var(--inkblue-700);}
.sfp .compare-label{background:var(--inkblue-800);}

/* Structure: the process flowchart. Same shapes and dash pattern as
   before, recoloured from forest to inkblue; label colours are chosen
   for the new fills (ink on inkblue 100 is 11.6:1). */
.sfp .fc-edge{stroke:var(--inkblue-600);}
.sfp #fc-arrow path{fill:var(--inkblue-600);}   /* the head's green is a fill attribute in the SVG; CSS wins over it */
.sfp .fc-node-terminal{fill:var(--inkblue-800);stroke:var(--inkblue-800);}
.sfp .fc-node-step{fill:var(--inkblue-100);stroke:var(--inkblue-600);}
.sfp .fc-node-ref{fill:var(--inkblue-50);stroke:var(--inkblue-500);}
.sfp .fc-label-sub{fill:var(--inkblue-800);}

@media (prefers-reduced-motion:reduce){
  .sfp-rail nav a{transition:none;}
}