/* The IOTA subsite shell: one bar and one palette for every page under IOTA.
   Loaded last on each page, so it re-colours the shared variables those pages already use to the W(e)ave style
   (tan on dark grey, one saffron highlight; EB Garamond for statements, Montserrat in tracked capitals for labels).
   The header itself is built by /iota/shell.js: the breadcrumb at the left (the universal nav), three plain items at the right. Saffron is kept for the work in motion, so the bar's current marks are bone. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@500;600&family=Bricolage+Grotesque:opsz,wght@12..96,400..600&display=swap');
@import url('/iota/shell-bar.css');

:root{
  --iota-top:59px;                        /* height of the fixed bar; shell.js measures and sets it */
  --w-char:#1B1C1E; --w-deep:#131416; --w-raise:#232325; --w-sand:#C6B29A; --w-pale:#E4D9C8; --w-tan:#A68F74;
  --w-bone:#ECE7DF; --w-mist:#A9A49B; --w-dim:#7C776F; --w-saff:#F0A83A; --w-hair:rgba(198,178,154,.2);
  /* the variables the IOTA pages share, re-pointed */
  --bg:var(--w-char); --card:rgba(38,38,40,.72); --card-2:#2A2A2C; --card-solid:#232325;
  --line:rgba(198,178,154,.14); --line-2:rgba(198,178,154,.28);
  --g20:var(--w-bone); --g40:var(--w-mist); --g60:var(--w-dim); --white:#F4F0E9;
  --green:var(--w-sand); --cyan:var(--w-sand); --sky:var(--w-pale); --rose:var(--w-tan); --amber:#D9B98A; --pink:#B89C80;
  --grot:'EB Garamond',Georgia,serif; --inter:'EB Garamond',Georgia,serif;
  /* the papers' light ground becomes bone */
  --paper:#ECE7DF; --paper-ink:#1F2022; --paper-soft:#6E675D; --paper-rule:#D3CABB; --serif:'EB Garamond',Georgia,serif;
}
html{scroll-padding-top:calc(var(--iota-top) + 16px)}
body.iota-shell{padding-top:calc(var(--iota-top) + 28px);background-color:var(--w-char);font-size-adjust:.47}
body.iota-shell.iota-flush{padding-top:var(--iota-top)}
body.iota-shell ::selection{background:var(--w-saff);color:var(--w-char)}

/* the pages' own breadcrumbs give way to the shared one */
body.iota-shell .top .brand, body.iota-shell > header > .brand{display:none}
body.iota-shell .top{justify-content:flex-end}
/* labels and small capitals are Montserrat */
body.iota-shell .kick, body.iota-shell .eyebrow, body.iota-shell .top, body.iota-shell .open, body.iota-shell .updated{font-family:Montserrat,sans-serif;font-weight:500;letter-spacing:.22em;font-size-adjust:none}
body.iota-shell h1, body.iota-shell h2, body.iota-shell h3{font-family:'EB Garamond',Georgia,serif;font-weight:400;letter-spacing:-.008em}
body.iota-shell h1 em, body.iota-shell h2 em{font-style:italic}
/* anything that sticks to the top of the window sticks under the bars */
body.iota-shell .shnav{top:var(--iota-top)}

/* ---------- shared pieces for pages written for the shell (the home page, the atlas) ---------- */
.w-page{max-width:1240px;margin:0 auto;padding:0 40px 120px;color:var(--w-bone);font:400 19px/1.55 'EB Garamond',Georgia,serif;font-size-adjust:none}
.w-cap{font:500 10.5px/1.7 Montserrat,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--w-sand)}
.w-page h1{overflow-wrap:break-word;font-size:clamp(34px,5vw,68px);line-height:1.05;margin:18px 0 0;max-width:16em}
.w-page h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin:8px 0 18px}
.w-page h3{font-size:25px;line-height:1.2;margin:0}
.w-page p{color:var(--w-mist);max-width:44em}
.w-page p b, .w-page p strong{color:var(--w-bone);font-weight:400}
.w-rule{width:24px;height:1px;background:var(--w-sand);margin:28px 0}
.w-sec{border-top:1px solid var(--w-hair);padding:56px 0 20px;margin-top:56px}
.w-grid{display:grid;gap:30px 26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:26px}
.w-card{display:flex;flex-direction:column}
.w-card .pic{display:block;aspect-ratio:16/10;background:var(--w-deep);outline:1px solid var(--w-hair);overflow:hidden}
.w-card .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.w-card a.pic:hover img{transform:scale(1.025)}
.w-card .cap2{margin:16px 0 6px}
.w-card p{font-size:17px;margin:8px 0 0}
.w-card>.w-btn{margin-top:auto}.w-card>p:last-of-type{margin-bottom:18px}.w-card .fig{margin-bottom:18px}
.w-btn{display:inline-block;align-self:flex-start;margin-top:18px;font:600 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--w-bone);border:1px solid var(--w-sand);padding:14px 20px;text-decoration:none;transition:background .2s,color .2s}
.w-btn:hover{background:var(--w-sand);color:var(--w-char)}
.w-btn.go{background:var(--w-bone);border-color:var(--w-bone);color:var(--w-char)}
.w-btn.go:hover{background:var(--w-sand);border-color:var(--w-sand)}
.w-btn.off{border-style:dashed;color:var(--w-dim);border-color:var(--w-dim);pointer-events:none}
.w-tag{font:600 9px/1 Montserrat,sans-serif;letter-spacing:.3em;text-transform:uppercase;padding:5px 7px;white-space:nowrap}
.w-tag.canon{background:var(--w-bone);color:var(--w-char)}.w-tag.kept{background:var(--w-sand);color:var(--w-char)}.w-tag.left{outline:1px solid var(--w-hair);color:var(--w-mist)}
@media (max-width:760px){.w-page{padding:0 16px 90px;font-size:18px}.w-grid{grid-template-columns:minmax(0,1fr)}.w-btn{letter-spacing:.2em;padding:13px 16px}}