@font-face { font-family: "Syne"; font-weight: 400; font-display: swap; src: url("assets/fonts/syne-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 500; font-display: swap; src: url("assets/fonts/syne-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Ysabeau"; font-weight: 400; font-display: swap; src: url("assets/fonts/ysabeau-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Ysabeau"; font-weight: 400; font-style: italic; font-display: swap; src: url("assets/fonts/ysabeau-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Ysabeau"; font-weight: 600; font-display: swap; src: url("assets/fonts/ysabeau-latin-600-normal.woff2") format("woff2"); }
/* the live site's colours and sizes, measured 10-30 (page, ink, text, hero, taupe band, lilac, blue, sage, copper) */
:root { --page: #e5e3da; --ink: #1c1c1c; --text: #473f3d; --hero: #6391ae; --taupe: #c4baa9; --lilac: #887891;
        --blue: #6391ae; --sage: #639085; --copper: #b7845c; --white: #f9f9f9; --rule: #5e5e5e; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 18.67px/1.45 "Ysabeau", "Segoe UI", sans-serif; }
a { color: inherit; text-underline-offset: .12em; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 55px; padding-right: 55px; }
.p { margin: 0 0 .6em; } .just { text-align: justify; } .right { text-align: right; }
.small { font-size: 16px; margin: 0 0 .35em; }
ul.sq { list-style: square; margin: .3em 0 .6em; padding-left: 20px; } ul.sq li { margin: .2em 0; }
ul.sq li::marker { color: var(--text); }
.blue { background: #dce8fb; }
#marks:not(:checked) ~ * .blue { background: none; } #marks:not(:checked) ~ * .mark { display: none; }
.mark { font: 600 12px/1 "Segoe UI", sans-serif; padding: 2px 5px; border-radius: 3px; vertical-align: middle; }
.held { background: #f3d9a4; color: #4a3200; } .live { background: #d7d2c6; color: #3a332f; }
.preview-note { background: #f6f4ef; border-bottom: 1px solid #d6d1c6; font-size: 14px; color: var(--text); }
.preview-note div { max-width: 1280px; margin: 0 auto; padding: 6px 16px; } .preview-note label { text-decoration: underline; cursor: pointer; }

header { background: var(--page); height: 56px; display: flex; align-items: stretch; justify-content: space-between; padding: 0 30px; }
.brand { display: flex; align-items: center; gap: 18px; color: var(--ink); text-decoration: none; font-size: 21px; }
.brand img { width: 36px; height: 36px; }
nav { display: flex; gap: 0 26px; align-items: stretch; }
nav a { display: flex; align-items: center; color: var(--ink); text-decoration: none; font-size: 18.67px; border-bottom: 4px solid transparent; padding-top: 4px; }
nav a[aria-current="page"] { border-bottom-color: var(--lilac); }

.banner { height: 284px; background-size: cover; background-position: left center; display: flex; align-items: center; }
.banner .wrap { width: 100%; }
.banner h1 { margin: 0; text-align: right; font: 500 45.33px/1.2 "Syne", sans-serif; color: var(--white); }
.banner h1.dark { color: var(--ink); }
h2, h3, h4 { margin: 0; }
.lilac { color: var(--lilac); } summary.c-blue { color: var(--blue); } .sage { color: var(--sage); } .copper { color: var(--copper); }

.hero { background: var(--hero) url("assets/hero-bg.png?v=eb2cefa5"); height: 485px; }
.hero .wrap { height: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.art { display: flex; align-items: center; gap: 22px; } .art .hex { width: 179px; } .art .word { width: 481px; }
.tags { font: 400 26.67px/1.3 "Syne", sans-serif; color: var(--white); text-align: right; margin-top: 14px; }
.ethos { background: var(--taupe); padding: 52px 0 40px; }
.ethos h3 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; color: var(--sage); margin-bottom: 10px; }
.actions { margin: 14px 0 6px; } .btn { display: inline-block; margin: 0 10px 8px 0; padding: 8px 18px; border-radius: 4px;
  background: var(--ink); color: var(--page); text-decoration: none; font-weight: 600; border: 2px solid var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.who { padding: 34px 0; } .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.cards h4 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; color: var(--copper); margin-bottom: 6px; } .cards p { margin: 0; }

.about { display: grid; grid-template-columns: 177px 1fr; gap: 31px; padding-top: 16px; padding-bottom: 20px; }
.about .photo { width: 177px; } .about { padding-left: 47px; }
.twocol { display: grid; grid-template-columns: 465px 1fr; gap: 37px; padding-top: 18px; padding-bottom: 50px; }
.twocol h3 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; color: var(--copper); margin: 6px 0 8px; }
.intro { padding-top: 22px; padding-bottom: 10px; }

details { border-bottom: 1px solid var(--rule); }
summary { list-style: none; cursor: pointer; font: 400 26.67px/1.3 "Syne", sans-serif; color: var(--lilac); padding: 28px 40px 16px 9px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 18px; top: 38px; width: 10px; height: 10px; border-right: 2px solid #5f6368; border-bottom: 2px solid #5f6368; transform: rotate(45deg); }
details[open] summary::after { transform: rotate(-135deg); top: 44px; }
.acc-body { padding: 18px 9px 26px; }
.acc-body > .p, .acc-body > .small { margin-left: 20px; }
.acc-wrap.band { background: var(--taupe); }

.toc { list-style: none; padding: 0; margin: 12px 0 0; font-size: 16px; } .toc li { margin: 3px 0; }
.toc li.h3 { padding-left: 20px; } .toc a { color: var(--text); }
.rh2 { font: 400 26.67px/1.3 "Syne", sans-serif; padding: 40px 0 18px; }
.entry { padding: 12px 0 30px; } .entry.band { background: var(--taupe); }
.paper { display: grid; grid-template-columns: var(--col) 1fr auto; gap: 31px; }
.paper h3 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; margin: 12px 0 8px; }
.figs { display: flex; flex-direction: column; gap: 10px; } .figs.right { width: 277px; }
.paper { padding-left: 47px; }

.selected { padding-top: 26px; }
.request { display: grid; grid-template-columns: 566px 1fr; gap: 130px; padding-top: 24px; padding-bottom: 20px; }
.email { font: 400 40px/1.2 "Syne", sans-serif; color: var(--blue); margin: 4px 0 0; }
.connect { display: grid; grid-template-columns: 767px 1fr; gap: 40px; padding-top: 22px; padding-bottom: 60px; }
.connect .r { text-align: right; } .connect h2 { font: 400 26.67px/1.3 "Syne", sans-serif; }
.facts { display: grid; grid-template-columns: 13rem 1fr; gap: 8px 22px; margin: 0; } .facts dt { font-weight: 600; } .facts dd { margin: 0; }
footer .wrap { padding-top: 30px; padding-bottom: 30px; } footer hr { border: 0; border-top: 2px solid #cfcac0; margin: 0; }

@media (max-width: 900px) {
  .wrap, .about, .paper { padding-left: 16px; padding-right: 16px; }
  header { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 6px 16px; } nav { flex-wrap: wrap; gap: 4px 16px; }
  nav a { font-size: 16px; padding: 4px 0; }
  .banner { height: 150px; } .banner h1 { font-size: 30px; }
  .hero { height: auto; padding: 28px 0; } .hero .wrap { align-items: stretch; } .art .hex { width: 28%; } .art .word { width: 66%; }
  .tags { font-size: 18px; }
  .about, .twocol, .request, .connect, .paper, .cards { grid-template-columns: 1fr; gap: 16px; }
  .about .photo { width: 140px; } .figs.right { width: auto; } .email { font-size: 28px; } .connect .r { text-align: left; }
  .facts { grid-template-columns: 1fr; }
}

/* v2: a lighter paper than the live #e5e3da, lighter bands, and the live hues darkened to AA for text */
:root { --page: #f3f0e8; --taupe: #e3ddd1; --lilac: #685c6f; --blue: #446478; --sage: #47675f;
        --copper: #7c593e; --accent: var(--lilac); }
nav a[aria-current="page"] { border-bottom-color: var(--accent); }
summary, .rh2, .twocol h3, .sec, .ethos h2, .paper2 h3 { color: var(--accent); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 6px 10px; z-index: 9; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.chips li { font: 400 22px/1 "Syne", sans-serif; color: var(--white); border: 2px solid var(--white); border-radius: 999px; padding: 8px 16px; }
.ethos h2 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; margin-bottom: 10px; }
.lede { font: 400 26px/1.35 "Syne", sans-serif; color: var(--ink); margin: 0 0 .5em; max-width: 46rem; }
.sec { font: 400 26.67px/1.3 "Syne", sans-serif; margin: 44px 0 18px; }
.grid-sec { padding-bottom: 50px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card { background: #fffdf8; border-top: 4px solid var(--accent); padding: 0 0 14px; }
.card .fig { display: flex; align-items: center; justify-content: center; height: 190px; background: #fff; overflow: hidden; }
.card .fig img { max-height: 190px; width: auto; object-fit: contain; }
.card h3 { font: 600 19px/1.3 "Ysabeau", sans-serif; margin: 12px 14px 6px; } .card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { text-decoration: underline; } .card .small { margin: 0 14px; }
.paper2 { padding: 10px 0 34px; border-bottom: 1px solid #d6d1c6; }
.figs2 { display: grid; gap: 14px; margin-bottom: 14px; } .figs2.n2 { grid-template-columns: 1fr 1fr; }
.figs2 img { background: #fff; width: 100%; max-height: 480px; object-fit: contain; }
.paper2 h3 { font: 600 23px/1.3 "Ysabeau", sans-serif; margin: 6px 0 8px; }
.paper2 > .p { max-width: 52rem; }
@media (max-width: 900px) { .figs2.n2 { grid-template-columns: 1fr; } .chips { justify-content: flex-start; }
  .chips li { font-size: 16px; } .lede { font-size: 21px; } }

/* v6: the five cube banners are the navigation; each name sits on a block of its page's AA shade (>= 6:1 for white) */
:root { --page: #f3f0e8; --lilac: #685c6f; --blue: #446478; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 6px 10px; z-index: 9; }
a:focus-visible { outline: 3px solid #1e2830; outline-offset: 3px; }
.mosaic { display: grid; gap: 10px; padding: 10px; grid-template-columns: 1fr 1.3fr 1.3fr 1fr; grid-template-rows: 230px 230px 150px;
  grid-template-areas: "about c c portfolio" "research c c media" "connect connect connect connect"; }
.centre { grid-area: c; background: var(--hero) url("assets/hero-bg.png?v=eb2cefa5"); display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; }
.centre .hex { width: 130px; height: auto; } .centre .word { width: min(400px, 62%); height: auto; }
.tile { display: flex; align-items: flex-end; justify-content: flex-end; padding: 14px; background-size: cover; background-position: left center; text-decoration: none; border-bottom: 0; }
.tile span { background: var(--tone); color: #fff; font: 500 30px/1.1 "Syne", sans-serif; padding: 6px 14px 8px; }
.tile:hover span { text-decoration: underline; }
.t-about { grid-area: about; } .t-portfolio { grid-area: portfolio; } .t-research { grid-area: research; }
.t-media { grid-area: media; } .t-connect { grid-area: connect; }
.ethos6 { padding-top: 34px; } .ethos6 h2 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; color: var(--lilac); margin: 0 0 10px; }
.lede { font: 400 26px/1.35 "Syne", sans-serif; color: var(--ink); margin: 0 0 .5em; max-width: 46rem; }
.strip { list-style: none; margin: 20px 0 50px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.strip a { display: flex; aspect-ratio: 1; background: #fff; border: 1px solid #cfcac0; align-items: center; justify-content: center; overflow: hidden; }
.strip img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto 130px 130px 110px;
    grid-template-areas: "c c" "about portfolio" "research media" "connect connect"; }
  .centre { padding: 24px 16px; } .centre .hex { width: 22%; } .centre .word { width: 66%; }
  .tile span { font-size: 21px; } .lede { font-size: 21px; } .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Consulting-site mock (her 11-03 "The portfolio leads to the fields"): the personal site's field-page rules, scoped
   under .pf and re-coloured to the consulting palette, with the consulting accordion's global details/summary/.paper
   rules undone inside it. Local mock only. */
.pf { --card: #fffdf9; --muted: var(--text); --rule: #d6d1c6; --slate: #446478; --sage: #47675f;
      --edge: var(--accent); padding-top: 18px; padding-bottom: 30px; }
.fieldrow { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 18px; font-size: 17px; }
.fieldrow a { color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.fieldrow a[aria-current="page"], .fieldrow a:hover { border-bottom-color: var(--accent); }

/* portfolio landing: four doors */
.pf .doors { display: grid; gap: 1rem; margin: 0 0 1.8rem; }
@media (min-width: 40rem) { .pf .doors { grid-template-columns: 1fr 1fr; } }
.pf .door { display: block; background: var(--card); border-radius: 12px; padding: 1.2rem 1.3rem; color: var(--text);
            text-decoration: none; border-top: 4px solid var(--accent); box-shadow: 0 6px 18px rgba(40, 30, 20, .08); }
.pf .door h2 { font: 400 24px/1.3 "Syne", sans-serif; color: var(--accent); margin: 0 0 .4rem; }
.pf .door p { margin: 0; }

/* lead: What I do beside a figure */
.pf .lead { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: center; margin: .6rem 0 1rem; }
.pf .lead > div:only-child { grid-column: 1 / -1; }
.pf .lead p { font-size: 1.15rem; margin: 0; }
.pf .lead h2 { font: 400 20px/1.3 "Syne", sans-serif; color: var(--accent); margin: 0 0 .3rem; }
.pf figure { margin: 0; background: #fff; border-radius: 10px; padding: .6rem; box-shadow: 0 6px 18px rgba(40, 30, 20, .08); }
.pf figure img { display: block; width: 100%; height: auto; }
.pf figure a { display: block; cursor: zoom-in; }
.pf figcaption { color: #5a4a3d; font-size: .85rem; margin-top: .4rem; }
@media (max-width: 40rem) { .pf .lead { grid-template-columns: 1fr; } }

/* sections, banded */
.pf .allwork { margin-top: 1.4rem; }
.pf .allwork details { --edge: var(--accent); background: var(--card); color: var(--text); border: 0;
                       border-left: 5px solid var(--edge); border-radius: 10px; margin-bottom: .7rem; padding: .2rem 1.2rem;
                       scroll-margin-top: 1rem; }
.pf .allwork .slate { --edge: var(--slate); } .pf .allwork .lilac { --edge: var(--lilac); }
.pf .allwork .sage { --edge: var(--sage); }
.pf .allwork summary { display: list-item; list-style: disclosure-closed inside; position: static; cursor: pointer;
                       font: inherit; color: inherit; padding: .7rem 0; }
.pf .allwork details[open] > summary { list-style-type: disclosure-open; }
.pf .allwork summary::after { content: none; }
.pf .allwork summary::-webkit-details-marker { display: revert; }
.pf .allwork summary h2 { display: inline; font: 400 22px/1.3 "Syne", sans-serif; color: var(--accent); margin: 0; }
.pf .allwork ul { padding-left: 1.1rem; margin: 0 0 .9rem; }
.pf .allwork h3 { font-size: 1rem; font-weight: 600; margin: .4rem 0; }
.pf .allwork li { margin-bottom: .5rem; }
.pf .allwork li::marker { color: var(--edge); }
.pf .allwork .kind { color: var(--edge, var(--accent)); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
                     text-transform: uppercase; margin: 1.4rem 0 .45rem; padding-left: .2rem; }
.pf .allwork .kind:first-child { margin-top: .4rem; }
.pf .allwork .intro { margin: 0 0 .6rem; padding: 0; }
.pf .allwork details.paper { --edge: inherit; display: block; background: none; border: 0; border-radius: 0; margin: 0;
                             padding: 0; grid-template-columns: none; }
.pf .allwork li:has(> details.paper) { list-style: none; }
.pf .allwork details.paper > summary { list-style: disclosure-closed outside; padding: 0; }
.pf .allwork details.paper[open] > summary { list-style-type: disclosure-open; }
.pf .allwork details.paper > summary::marker { color: var(--edge); }
.pf .allwork .ptitle { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.pf .allwork details.paper[open] .ptitle { text-decoration: none; font-weight: 600; }
.pf .allwork details.paper p { margin: .4rem 0 .3rem; padding-left: .8rem; border-left: 2px solid var(--rule); font-size: .95rem; }
.pf .allwork details.paper .plinks { font-size: .9rem; }
.pf .allwork .pfig { margin: .5rem 0 .6rem .8rem; }
.pf .wip { display: inline-block; color: var(--muted); font-size: .8rem; font-style: italic; padding: 0 .45rem;
           border: 1px solid currentColor; border-radius: .6rem; }

/* the row on every page (wright-565, 567 to 573, 590): logo panel, the cream line, about, portfolio, connect. The
   panel is one field tile wide, so its edge meets the first tile's, and the cream line takes the rest (her 11-04 "make
   the blue DERC tile a little smaller (more cream space)"); never under 300px, which the logo and wordmark need. The
   cream line gave a column to the portfolio tile (wright-590, his mock's 1.4fr) */
.mosaic.slim { grid-template-columns: max(300px, calc((100% - 30px) / 4)) 1.4fr 1fr 1fr 1fr; grid-template-rows: 120px;
  grid-template-areas: none; }
.mosaic.slim > * { grid-area: auto; }
.mosaic.slim .centre { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 10px 24px; }
a.centre { text-decoration: none; border-bottom: 0; }
.centre .brandrow { display: flex; align-items: center; gap: 12px; } .centre .word { width: 150px; }
/* the logo cube nearly the panel's full height, so it reads (her 11-04: "isn't as obvious"; at the tile cubes' size,
   "can it be made bigger?"; a light backing she declined) */
.centre .hex { width: auto; height: 96px; }
/* and at text height in the footer (her 11-04) */
footer .foothex { height: 1.25em; width: auto; vertical-align: -.3em; margin-right: .45em; }
.mosaic.slim .blank { display: flex; align-items: center; padding: 12px 6px; }
.mosaic.slim .blank .line { margin: 0; color: #10181e; font: 500 19px/1.2 "Syne", sans-serif; }
/* one cube with its lines running out, sized by the tile height so the cube keeps its size at any width (her 11-04) */
.mosaic.slim .tile { padding: 10px; background-size: auto 100%; background-position: left center; }
/* connect mirrors about: its cube on the right (her 11-04), so its label goes left, clear of the cube */
.mosaic.slim .tile[href$="connect.html"] { background-position: right center; justify-content: flex-start; }
/* portfolio's cube sits left of centre in its picture, so the label at the bottom right clears it (wright-590) */
.mosaic.slim .tile[href$="index.html"] { background-position: center; }
.tile span { font: 500 20px/1.1 "Syne", sans-serif; padding: 5px 12px 7px; }
.mosaic .tile[aria-current="page"] { box-shadow: inset 0 -8px 0 var(--tone); }
.mosaic .tile[aria-current="page"] span { text-decoration: underline; text-underline-offset: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the landing: the prompt band on the field cards, on the row's edges and gaps (wright-561, 563) */
.fsec { padding: 0 10px; }
.fband { margin: 0; background: #1c1c1c; color: #fff; font: 400 19px/1.3 "Syne", sans-serif; padding: 12px 18px; }
.fcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fcard { display: flex; flex-direction: column; background: var(--g); color: var(--ink); text-decoration: none; border: 0; }
.fcard .body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.fcard h2 { margin: 0; font: 500 23px/1.2 "Syne", sans-serif; color: color-mix(in srgb, var(--t) 70%, black); }   /* WCAG AA 4.5 on each card (Wright's axe run; her "implement the fixes") */
.fcard .dl { margin: 0; font-size: 16px; line-height: 1.4; }
.fcard .go { margin-top: auto; align-self: flex-start; background: var(--t); color: #fff; font: 500 16px/1.2 "Syne", sans-serif; padding: 7px 12px 8px; }
.fcard:hover .go { text-decoration: underline; }
/* the cube lattice as a lace edging (her 11-05, derc_assets.py lace.svg), 140px tall, on each field's tint, placed as
   one sheet across the row so the seams match (her 11-04): column c of n starts c x (its width + the 10px gap) along
   the sheet; cqw is the row's width */
.fcards, nav.fieldtiles { container-type: inline-size; --n: 4; }
.fcard:nth-child(1), .fieldtiles a:nth-child(1) { --c: 0; } .fcard:nth-child(2), .fieldtiles a:nth-child(2) { --c: 1; }
.fcard:nth-child(3), .fieldtiles a:nth-child(3) { --c: 2; } .fcard:nth-child(4), .fieldtiles a:nth-child(4) { --c: 3; }
.fcard .band, .fieldtiles a { background: var(--g) url("assets/lace.svg?v=14b84c04") repeat-x; background-size: auto 140px;
  background-position: calc(-1 * var(--c) * ((100cqw - (var(--n) - 1) * 10px) / var(--n) + 10px)) -12px; }
.fcard .band { display: block; height: 74px; }
/* field pages: the four field tiles flush under the row, on its edges (wright-565 item 3) */
nav.fieldtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 10px 10px; }
.fieldtiles a { display: flex; align-items: flex-end; justify-content: flex-end; height: 64px; padding: 8px; border: 0; text-decoration: none; }
.fieldtiles a span { background: var(--t); color: #fff; font: 500 16px/1.1 "Syne", sans-serif; padding: 4px 10px 6px; }
.fieldtiles a[aria-current="page"] { box-shadow: inset 0 -6px 0 var(--t); }
.fieldtiles a:hover span { text-decoration: underline; }
/* section labels as dark bands; the colour must beat the label's inline colour, which fieldlib writes */
.pf .allwork .kind, .pf .allwork .kind:first-child { background: #1c1c1c; color: #fff !important; font: 400 17px/1.3 "Syne", sans-serif;
  padding: 9px 16px; margin: 22px 0 10px; text-transform: none; letter-spacing: 0; }
.pf details, .pf .allwork details { border-radius: 0; }
/* a list inside a list item (Models and simulation, her 11-08 "i accept the sub-bullet version"): the page's own
   bullet, not the browser's hollow circle, indented under its line, its items closer than the outer list's */
.pf .allwork li > ul { list-style-type: disc; margin: .35rem 0 .45rem; } .pf .allwork li > ul > li { margin-bottom: .3rem; }
footer .foot { margin: 14px 0 0; font-size: 16px; }
/* About: the photo alone on the left; the bio beside it, a sentence to a line on a wide screen, then Services in three
   list columns under the bio (her 11-04 "a lot of blank space", "the text under the image is also "unbalanced"";
   preview C, which her next word worked on). The photo's box is unwrapped (display: contents) so the photo and the bio
   are grid items of their own. The bio left-aligned, as justified text opens wide gaps between words */
.about3 { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "photo bio" "photo svc"; column-gap: 40px;
  row-gap: 22px; align-items: start; padding-top: 22px; }
.about3 > div:first-child { display: contents; }
.about3 > div:last-child { grid-area: svc; }
.about3 ul.sq { columns: 3; column-gap: 32px; } .about3 ul.sq li { break-inside: avoid; }
/* her column breaks, set rather than left to the browser's balancing, which moved Expert witness to the second column
   wherever a longer name wrapped (1100px): Teaching, training, curriculum, and assessment design ends the first column
   and Research support for economic-consulting firms the second, and Expert witness starts the third
   (her 11-08 changes, 4/4/4) */
.about3 ul.sq li:nth-child(5), .about3 ul.sq li:nth-child(9) { break-before: column; }
/* the first item without its top margin, which the second column's first item loses at the break, so both start level */
.about3 ul.sq li:first-child { margin-top: 0; }
.about3 h2 { font: 600 21.33px/1.3 "Ysabeau", sans-serif; color: var(--accent); margin: 6px 0 8px; }   /* as .twocol h3 */
/* the photo with her name and title as its caption, underneath it (her 11-05 at this terminal) */
.about3 .photo-fig { grid-area: photo; width: 220px; margin: 6px 0 0; }
.about3 .photo { display: block; width: 100%; height: auto; margin: 0; }
.about3 figcaption { margin: 10px 0 0; text-wrap: pretty; }
.about3 .just { grid-area: bio; margin: 0; text-align: left; text-wrap: pretty; }
/* Connect in one column, its email block the last row and laid out as a facts row (her item 55, "the email you have":
   Builder's preview, wright-597): the Email me button in the label column, the address and its copy button in the text
   column, no heading. The button is smaller again (her "slightly smaller"), after wright-589's "it looks cartoony" */
.connect { grid-template-columns: 1fr; gap: 8px; }
.erow { display: grid; grid-template-columns: 13rem 1fr; gap: 8px 22px; align-items: center; }
.email-btn { justify-self: start; padding: 6px 13px; background: var(--sage); color: #f3f0e8;
  font: 500 15px/1.2 "Syne", sans-serif; text-decoration: none; border-bottom: 0; }
.email-btn:hover, .email-btn:focus-visible { background: var(--blue); }
.addr { margin: 0; font: 400 18.67px/1.3 "Ysabeau", sans-serif; color: var(--text); white-space: nowrap; }
.copy { margin-left: 8px; padding: 3px 10px; border: 1px solid var(--sage); background: none; color: var(--sage);
  font: 500 14px/1.2 "Syne", sans-serif; cursor: pointer; vertical-align: middle; }
.copy:hover { background: var(--sage); color: #f3f0e8; }
@media (max-width: 900px) {
  .mosaic.slim { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 100px; }
  .centre .hex { height: 84px; }
  .erow { grid-template-columns: 1fr; }
  .about3 { grid-template-columns: 1fr; grid-template-areas: "photo" "bio" "svc"; gap: 16px; }
  .about3 .photo-fig { width: auto; } .about3 .photo { width: 140px; } .about3 ul.sq { columns: 2; }
  .about3 ul.sq li:nth-child(5), .about3 ul.sq li:nth-child(9) { break-before: auto; }
  .mosaic.slim .centre, .mosaic.slim .blank { grid-column: 1 / -1; } .mosaic.slim .blank { padding: 4px 6px; }
  .fcards, nav.fieldtiles { grid-template-columns: 1fr 1fr; --n: 2; }
  .fcard:nth-child(3), .fieldtiles a:nth-child(3) { --c: 0; } .fcard:nth-child(4), .fieldtiles a:nth-child(4) { --c: 1; }}
@media (max-width: 520px) { .fcards { grid-template-columns: 1fr; --n: 1; } .fcard { --c: 0 !important; }
  .addr { white-space: normal; } .about3 ul.sq { columns: 1; }
  /* three tiles in a phone's row: labels smaller, so "portfolio" fits a third of a 360px screen (wright-590) */
  .mosaic.slim .tile { padding: 6px; } .tile span { font-size: 16px; padding: 4px 8px 6px; } }