/* Shortridge Design Notes — graphite numeral study stage */
:root{
  --canvas:#121314; --surface:#1c1e20; --text:#e8e6e2; --dim:#9aa0a4;
  --accent:#c8703a; --rule:#33383c;
  --display:"Arial Narrow","Helvetica Neue Condensed",Impact,Arial,sans-serif;
  --head:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:16px/1.68 var(--body)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.12;margin:0}

.shell{max-width:1320px;margin:0 auto;padding:0 32px}
.grid{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
/* homepage: left index column by float, so any additional child of main
   simply falls into normal flow rather than depending on a position */
.homemain{display:block}
.homemain::after{content:"";display:block;clear:both}
.homemain>[data-polish-module="project counter/index"]{float:left;clear:left;width:260px}
.homemain>[data-polish-module="flagship project stage"],
.homemain>[data-polish-module="project metadata"],
.homemain>[data-polish-module="selected-work sequence"],
.homemain>[data-polish-module="about/profile panel"],
.homemain>[data-polish-module="archive/contact"]{margin-left:308px}
.homemain>[data-polish-module="minimal stage footer"]{clear:both}

/* corner identity */
.identity{padding:34px 0 26px}
.identity .mark{display:flex;align-items:flex-end;gap:16px}
.identity img{width:38px;height:38px;flex:none}
.wordmark{font-family:var(--display);font-size:54px;letter-spacing:.06em;
  text-transform:uppercase;margin:0;line-height:.92}
.standfirst{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:12px 0 0}

/* numeral rail */
.rail{border-top:1px solid var(--rule);padding-top:14px}
.rail h2{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin:0 0 12px}
.rail ol{list-style:none;margin:0;padding:0}
.railitem{border-bottom:1px solid var(--rule)}
.railitem a{display:flex;gap:12px;padding:9px 0;border:0;align-items:baseline}
.railitem .n{font-family:var(--display);font-size:15px;color:var(--accent);
  letter-spacing:.06em;flex:none;width:24px}
.railitem .t{font-size:13.5px;color:var(--dim);line-height:1.35}
.railitem a:hover .t,.railitem[aria-current="true"] .t{color:var(--text)}
.railitem[aria-current="true"] .t{font-weight:700}

/* registration plate motif */
.plate{position:relative;border:1px solid var(--rule);background:var(--surface);
  padding:14px}
.plate::before,.plate::after,.plate>.tick-b,.plate>.tick-c{content:"";position:absolute;
  width:14px;height:14px;border:0 solid var(--accent);pointer-events:none}
.plate::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.plate::after{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.plate>.tick-b{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.plate>.tick-c{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.plate .numeral{position:absolute;top:-14px;left:14px;font-family:var(--display);
  font-size:40px;line-height:1;color:var(--accent);letter-spacing:.04em;
  background:var(--canvas);padding:0 8px}
.platecap{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:10px 0 0}

/* stage */
.stage{padding-top:16px}
.stage .bignum{font-family:var(--display);font-size:86px;line-height:.9;
  color:var(--accent);letter-spacing:.04em;margin:0 0 10px}
.stage h2,.stagehead{font-size:40px;margin:0 0 14px;max-width:20ch}
.stage p.lede{font-size:18px;max-width:62ch;margin:14px 0 0;color:var(--text)}

/* fact strip */
.factstrip{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin:26px 0 0;background:var(--surface)}
.factstrip div{padding:14px 22px;border-right:1px solid var(--rule);min-width:120px;flex:1 1 auto}
.more{display:inline-block;font-family:var(--display);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent)}
.more:hover{color:var(--text);border-bottom-color:var(--text)}
.factstrip div:last-child{border-right:0}
.factstrip dt,.factstrip .k{font-family:var(--display);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0}
.factstrip dd,.factstrip .v{margin:5px 0 0;font-size:14px;color:var(--text)}

/* alternating sequence */
.seq{margin:0;padding:0;list-style:none}
.seqitem{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding:52px 0;border-top:1px solid var(--rule)}
.seqitem.flip .seqmedia{order:2}
.seqitem h3{font-size:28px;margin:0 0 10px}
.seqitem .sub{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.seqitem p{margin:0;max-width:56ch;color:var(--dim)}
.seqitem .more{display:inline-block;margin-top:16px;font-family:var(--display);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent)}

/* quiet document panel */
.panel{background:var(--surface);border:1px solid var(--rule);padding:40px;
  margin:56px 0 0}
.panel h2{font-size:26px;margin:0 0 18px}
.panel p{max-width:66ch;margin:0 0 16px}
.panel p:last-child{margin-bottom:0}

/* archive block */
.archive{margin:56px 0 0;border-top:1px solid var(--rule);padding-top:24px}
.archive h2{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin:0 0 18px}
.archive ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.archive li{border-bottom:1px solid var(--rule)}
.archive li a{display:flex;gap:14px;padding:11px 0;border:0;align-items:baseline}
.archive li .n{font-family:var(--display);font-size:15px;color:var(--accent);width:24px;flex:none}
.archive .also{margin:22px 0 0;font-size:14px;color:var(--dim)}
.archive .also a{color:var(--text)}

/* footer */
.stagefoot{margin:64px 0 0;border-top:1px solid var(--rule);padding:14px 0 40px;
  display:flex;justify-content:space-between;gap:20px;
  font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* study detail */
.studyhead{padding-top:16px}
.studyhead h1{font-size:40px;margin:20px 0 0;max-width:22ch}
.prose{margin:34px 0 0;max-width:66ch}
.prose h2{font-size:22px;margin:36px 0 14px;color:var(--text)}
.prose p{margin:0 0 18px}
.studynav{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:56px 0 0;border-top:1px solid var(--rule);padding-top:20px}
.studynav a{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;border:0;color:var(--dim)}
.studynav a:hover{color:var(--accent)}
.studynav .idx{color:var(--accent)}

/* index table */
.indexlist{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.indexlist li{border-bottom:1px solid var(--rule)}
.indexlist a{display:grid;grid-template-columns:56px 1fr 240px;gap:20px;
  padding:18px 0;border:0;align-items:baseline}
.indexlist .n{font-family:var(--display);font-size:24px;color:var(--accent)}
.indexlist .t{font-family:var(--head);font-size:20px;font-weight:700}
.indexlist .s{font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.lead{max-width:66ch;margin:20px 0 0;color:var(--dim);font-size:17px}

@media (max-width:1024px){
  .grid{grid-template-columns:200px 1fr;gap:34px}
  .wordmark{font-size:44px}
  .stage .bignum{font-size:68px}
}
@media (max-width:700px){
  .shell{padding:0 18px}
  .grid{display:block}
  .wordmark{font-size:34px}
  .stage .bignum{font-size:46px}
  .stage h2,.stagehead,.studyhead h1{font-size:26px;max-width:none}
  .rail{margin:0 0 26px;border-bottom:1px solid var(--rule);padding-bottom:8px}
  .rail ol{display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;
    -webkit-overflow-scrolling:touch}
  .railitem{border-bottom:0;flex:none}
  .railitem a{display:block;padding:4px 0}
  .railitem .t{display:block;max-width:15ch}
  .seqitem{display:block;padding:34px 0}
  .seqitem.flip .seqmedia{order:0}
  .seqitem .seqtext{margin-top:18px}
  .factstrip{display:block}
  .factstrip div{border-right:0;border-bottom:1px solid var(--rule)}
  .factstrip div:last-child{border-bottom:0}
  .archive ol{grid-template-columns:1fr}
  .homemain>[data-polish-module]{float:none;width:auto;margin-left:0}
  .panel{padding:24px;margin-top:36px}
  .indexlist a{grid-template-columns:44px 1fr;gap:8px 14px}
  .indexlist .s{grid-column:2}
  .plate .numeral{font-size:28px;top:-10px}
  .stagefoot{display:block}
  .stagefoot span{display:block;margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}