/* 2026-10-13 THE PORTFOLIO PAGE (was "Work"; James: "work isnt the right word … its a portfolio of the tools i built
   essentially and i want it to also show the websites ive built"). The About pattern on top (small title, big statement,
   dashed rule), then two groups: TOOLS, four cards in a 2x2 on the left (the paper figures), and WEBSITES, one card on
   the right (jamesmcwilliamspe.com). On desktop the groups take the height that is left under the head, so the page is
   one screen; the figures are cover-fitted from the top. The case-study panels (open on click) keep their layout. */
.cases .term-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);align-items:start;padding:clamp(22px,3vh,40px) 0 0;border-bottom:0}
/* 2026-10-13 (James: "portfolio page heading does not look the same position as services and about"): the title row sits in
   the same centred 1320 px column the About and Services pages use (.wrap), so "Portfolio." and its lead line up with
   theirs; the dashed rule and everything under it stay page-wide */
.cases .term-title{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);padding-bottom:0;width:100%;max-width:1320px;margin-inline:auto;padding-top:.25em}   /* .25em of the base size = the 4 px the other pages' heads carry */
.work.page-sec{border-top:0}   /* firm.css's dashed rule under the bar: the other pages have none, and it put the title 1 px low */
.cases .term-title h2{grid-column:1/5;margin:0;padding-top:0;font-size:clamp(20px,1.5vw,24px);line-height:1.15;letter-spacing:-.018em;color:var(--plate)}
.work-lead{grid-column:5/13;margin:0;max-width:34ch;color:var(--film);font:500 clamp(22px,2vw,30px)/1.22 var(--sans);letter-spacing:-.016em;text-wrap:balance}
.cases .term-head::after{content:"";grid-column:1/-1;height:0;margin-top:clamp(18px,2.4vh,30px);border-top:1px dashed var(--dash)}
.c-hint{display:none}
/* the two groups */
.pf-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);padding-top:clamp(14px,2vh,24px)}
.pf-tools{grid-column:1/9;display:flex;flex-direction:column;min-height:0}
.pf-sites{grid-column:9/13;display:flex;flex-direction:column;min-height:0}
.pf-h{margin:0;padding:0 0 10px;font:600 clamp(16px,1.2vw,18px)/1.2 var(--sans);letter-spacing:-.01em;color:var(--plate)}
.c-grid{flex:1 1 auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:18px clamp(16px,1.6vw,28px);padding:0}
.c-grid li{display:flex;min-height:0}
.c-item,.site-card{display:flex;flex-direction:column;width:100%;min-height:0;color:inherit;text-decoration:none;border-radius:6px;outline:none}
.site-card{flex:1 1 auto}
.site-card .c-shot img{object-position:center}
.c-shot{flex:1 1 auto;min-height:0;aspect-ratio:auto;border:1px solid var(--hair);border-radius:10px;background:var(--paper-hi,#fff);box-shadow:0 18px 36px -28px rgba(15,27,39,.45);overflow:hidden;transition:box-shadow .25s var(--ease)}
.c-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;filter:none;transition:transform .9s var(--out)}
.c-item:is(:hover,:focus-visible) .c-shot,.site-card:is(:hover,:focus-visible) .c-shot{border-color:var(--hair);box-shadow:0 24px 44px -28px rgba(15,27,39,.55)}
.c-item:is(:hover,:focus-visible) .c-shot img,.site-card:is(:hover,:focus-visible) .c-shot img{transform:scale(1.015)}
.c-n{flex:none;margin-top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.c-item:is(:hover,:focus-visible) .c-n,.site-card:is(:hover,:focus-visible) .c-n{color:var(--muted)}
.c-name{flex:none;margin-top:5px;font:600 clamp(15px,1.1vw,17px)/1.25 var(--sans);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.c-item .c-sum,.c-item .c-cmd{display:none}
.site-card .c-sum{flex:none;-webkit-line-clamp:3;margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
.site-card .c-cmd{flex:none;display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.site-card:is(:hover,:focus-visible) .c-ar{color:var(--gold);transform:translateX(4px)}
.site-card:focus-visible .c-shot{outline:2px solid var(--film);outline-offset:3px}
.write .write-meta{font:400 13px/1.5 var(--sans);color:var(--muted)}
.c-scan{display:none}
/* the open study's screen: the paper frame, not the dark slab */
.work .screen,.c-panel .screen{border:1px solid var(--hair);border-radius:10px;background:var(--paper-hi,#fff);box-shadow:0 18px 36px -28px rgba(15,27,39,.45)}
.c-panel .scan{display:none}

/* ── desktop: one screen; the groups take the height under the head */
@media (min-width:901px){
  html,body{height:100%}
  body{display:flex;flex-direction:column;min-height:100svh}
  #main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .work.page-sec,main>.work.page-sec{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding-top:0;padding-bottom:clamp(14px,2vh,24px)}
  .cases.term{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .c-face{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .pf-body{flex:1 1 auto;min-height:0}
  .foot{flex:none;padding-block:16px 18px}
}

/* ── phones: one column at reading sizes, the figures at 16:9 */
@media (max-width:900px){
  .cases .term-head,.cases .term-title{padding:0}   /* 2026-10-13: was 36px on top of main>.page-sec's 40, which put the title 37 px under the other pages' */
  .cases .term-title h2{grid-column:1/-1;padding-top:0;font-size:20px;line-height:1.2;color:var(--muted);letter-spacing:-.01em}
  .work-lead{grid-column:1/-1;margin-top:10px;font-size:26px;line-height:1.28;letter-spacing:-.018em;max-width:22ch}
  .cases .term-head::after{margin-top:26px}
  .pf-body{padding-top:22px;row-gap:34px}
  .pf-tools,.pf-sites{grid-column:1/-1}
  .c-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:26px;padding:0}
  .c-shot{flex:none;aspect-ratio:16/9}
  .site-card .c-shot{aspect-ratio:4/3}
  .c-item .c-sum{display:-webkit-box;-webkit-line-clamp:3;margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
  .c-item .c-cmd{display:inline-flex;align-items:center;gap:9px;padding-top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  .c-name{font-size:17px}
}

/* ── 2026-10-13 THE TOOLS ORBIT (James: "put the tools on an orbital carousel to consolidate space"): on desktop the
   four cards sit on a tilted ring in the Tools column; the front card's name and summary read in the caption under it,
   with the arrows. The ring takes the column's height. Under 900 px (and reduced motion) the list stays a list. */
.orb-cap{display:none}
@media (min-width:901px){
  .c-grid.is-live{position:relative;display:block;flex:1 1 auto;min-height:0;perspective:1600px;perspective-origin:50% 40%;transform-style:preserve-3d;overflow:visible;outline:none;cursor:grab;touch-action:pan-y}
  .c-grid.is-live.is-drag{cursor:grabbing}
  .c-grid.is-live li{position:absolute;left:50%;top:50%;width:min(66%,calc((var(--orb-h,400px) - 24px) * 1.7778));aspect-ratio:16/9;margin:0;transform-style:preserve-3d;transition:none;will-change:transform;translate:-50% -52%}
  .c-grid.is-live li .c-item{height:100%}
  .c-grid.is-live li .c-shot{height:100%;flex:none;aspect-ratio:auto}
  .c-grid.is-live li .c-shot::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:var(--veil,0);pointer-events:none;transition:opacity .2s}
  .c-grid.is-live li .c-n,.c-grid.is-live li .c-name{display:none}
  .c-grid.is-live li.is-back{visibility:hidden}
  .c-grid.is-live li.is-front .c-shot{box-shadow:0 30px 60px -30px rgba(15,27,39,.55)}
  .c-grid.is-live:focus-visible li.is-front .c-shot{outline:2px solid var(--film);outline-offset:3px}
  .c-grid.is-live~.orb-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px;align-items:end;flex:none;padding-top:14px}
  .orb-txt{display:flex;flex-direction:column;min-width:0}
  .orb-txt .c-n{margin-top:0}
  .orb-txt .c-name{margin-top:5px}
  .orb-txt .c-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:5px;max-width:60ch;font-size:14px;line-height:1.5;color:var(--muted)}
  .orb-txt .c-cmd{display:inline-flex;align-items:center;gap:9px;margin-top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  .orb-txt .c-cmd:hover .c-ar{color:var(--gold);transform:translateX(4px)}
  .orb-nav{display:flex;gap:8px}
  .orb-btn{width:44px;min-height:44px;padding:0;justify-content:center;font-size:18px}
  .c-grid.is-live li.is-front .c-item .c-shot{box-shadow:0 30px 60px -30px rgba(15,27,39,.55)}
}

/* ── 2026-10-13 THE CHOOSER (option 2): the page opens on two doors; a face replaces them when chosen. The tools face is
   the orbit at full width; the websites face is a grid of site cards (one so far). */
.pf-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);padding-top:clamp(14px,2vh,24px);flex:1 1 auto;min-height:0}
.pf-door{display:flex;flex-direction:column;min-height:0;color:inherit;text-decoration:none;border-radius:6px;outline:none}
.pf-fig{position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--hair);border-radius:10px;background:var(--paper-hi,#fff);box-shadow:0 18px 36px -28px rgba(15,27,39,.45);transition:box-shadow .25s var(--ease)}
.pf-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .9s var(--out)}
.pf-fig-tools{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:6px;background:var(--paper)}
.pf-fig-tools img{min-height:0;border-radius:6px;border:1px solid var(--hair-2)}
.pf-door:is(:hover,:focus-visible) .pf-fig{box-shadow:0 24px 44px -28px rgba(15,27,39,.55)}
.pf-door:is(:hover,:focus-visible) .pf-fig img{transform:scale(1.015)}
.pf-door:focus-visible .pf-fig{outline:2px solid var(--film);outline-offset:3px}
.pf-door .c-n{margin-top:12px}
.pf-door .c-name{margin-top:5px;font-size:clamp(18px,1.4vw,22px)}
.pf-door .c-sum{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pf-door .c-cmd{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pf-door:is(:hover,:focus-visible) .c-ar{color:var(--gold);transform:translateX(4px)}
.pf-back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-8px 8px -8px -8px;border-radius:6px;color:var(--steel);font-size:18px;text-decoration:none;transition:background .18s var(--ease)}
.pf-back:hover{background:rgba(15,27,39,.06)}
/* the faces: none shown until chosen. (.term has margin-inline:auto from the base sheet, which cancels the flex stretch
   and let it shrink to its content in a face state: pinned to the full width.) */
.cases.term{width:100%;align-self:stretch}
[data-cases]:not([data-pf-face="tools"]) .pf-tools,[data-cases]:not([data-pf-face="websites"]) .pf-sites{display:none}
[data-cases][data-pf-face="tools"] .pf-choose,[data-cases][data-pf-face="websites"] .pf-choose{display:none}
[data-cases][data-pf-face="tools"] .pf-tools,[data-cases][data-pf-face="websites"] .pf-sites{grid-column:1/-1}
/* the websites face: site cards in a row, each sized by the height that is left (the figure keeps 4:3) */
[data-pf-face="websites"] .pf-sites{flex-direction:column}
[data-pf-face="websites"] .pf-sites .sites-row{flex:1 1 auto;min-height:0;display:flex;gap:clamp(20px,2.4vw,40px);align-items:stretch}
[data-pf-face="websites"] .pf-sites .site-card{flex:0 1 auto;min-height:0;max-width:none;align-items:flex-start}
[data-pf-face="websites"] .pf-sites .site-card .c-shot{flex:1 1 auto;min-height:0;width:auto;max-width:100%;aspect-ratio:4/3;align-self:flex-start}
[data-pf-face="websites"] .pf-sites .site-card .c-sum{max-width:52ch}
@media (min-width:901px){
  [data-cases][data-pf-face="tools"] .c-grid.is-live li{width:min(50%,calc((var(--orb-h,400px) - 16px) * 1.7778));translate:-50% -50%}
  [data-cases][data-pf-face="tools"] .orb-txt .c-sum{max-width:70ch}
}
@media (max-width:900px){
  .pf-choose{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:22px}
  .pf-fig{flex:none;aspect-ratio:16/9}
  [data-pf-face="websites"] .pf-sites .sites-row{display:block}
  [data-pf-face="websites"] .pf-sites .site-card .c-shot{width:100%;flex:none}
}