/* hero: a title page with a specimen sheet for a frontispiece */
.hero{padding-block:40px 56px}
.hero .sc{margin-bottom:18px}
.hero__intro{margin-top:24px;max-width:34em;font-size:1.1875rem}
.hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.specimen{margin:48px 0 0}
.mount{background:var(--sheet);padding:9px;border:1px solid var(--rule);box-shadow:0 1px 0 rgba(74,52,20,.07),0 22px 40px -28px rgba(74,52,20,.5)}
.specimen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.specimen__grid a{display:block;position:relative}
.specimen__grid svg{width:100%;aspect-ratio:1;height:auto}
.specimen__grid a:focus-visible{outline-offset:2px;z-index:1}
figcaption.sc{margin-top:12px}

/* sections */
.section{padding-block:64px}
.section--ruled{border-top:1px solid var(--ink)}
.section__head{display:grid;gap:14px;margin-bottom:40px}
.section__head .note{max-width:24em}

/* featured works: six catalogue plates. This is the plain, stacked layout (short screens,
   reduced motion). The sliding version further down only adds to it.
   --enter rests at 1, so without JavaScript everything sits in its final place. */
.featured__head{padding-bottom:40px}
.featured__head .section__head{margin-bottom:0}
.anchor{display:block;height:0}
.scene{position:relative;isolation:isolate;overflow:hidden;overflow:clip;--enter:1;--cover:0;--dir:1;
  background-color:var(--page);background-image:var(--grain);color:var(--ink)}
.scene--flip{--dir:-1}
/* each plate lends its page a paper and an ink; links, small caps and focus rings follow the tokens */
.scene--guard{--page:#0F1E36;--ink:#F6EFE0;--ink-2:#BFD0E6;--lapis:#35C47C;--accent:#35C47C}
.scene--weather{--page:#27446B;--ink:#F6EFE0;--ink-2:#BCD5DD;--lapis:#EDB651;--accent:#E8A63A}
.scene--measure{--page:#F2E4BC;--ink:#1D2130;--ink-2:#4A4639;--lapis:#A5312B;--accent:#A5312B}
.scene--swan{--page:#1F4D43;--ink:#F6EFE0;--ink-2:#CFE0D3;--lapis:#EDB651;--accent:#E8A63A}
.scene--parvaz{--page:#E8A63A;--ink:#1E2A5E;--ink-2:#1E2A5E;--lapis:#1E2A5E;--accent:#1E2A5E}
.scene--mail{--page:#1D2130;--ink:#F6EFE0;--ink-2:#DFCFAE;--lapis:#EDB651;--accent:#C07F14}
.scene--therapy{--page:#EBB9A3;--ink:#1D2130;--ink-2:#4A3A33;--lapis:#1D2130;--accent:#9B4A38}
.scene__inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px;padding-block:48px 52px}
.scene__art{margin:0;min-width:0;min-height:0}
.plate svg{width:100%;height:auto;aspect-ratio:1}
.scene__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.scene__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;width:100%;margin-bottom:auto}
.scene__no{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;color:var(--accent);white-space:nowrap}
.scene__dots{flex:1;min-width:16px;border-bottom:2px dotted currentColor;opacity:.4;transform:translateY(-4px)}
.scene__title{font-size:clamp(2.5rem,11vw,3.4rem);line-height:1.02;letter-spacing:-.012em;margin:14px 0 10px;text-wrap:balance}
.scene__desc{max-width:30em;font-size:1.0625rem;line-height:1.5}
.work__link,.work__get{display:inline-flex;align-items:center;min-height:48px;margin-top:4px;font-weight:520;text-decoration-color:var(--accent)}
.scene .work__link:hover,.scene .work__get:hover{text-decoration-thickness:2px}
.work__get{display:flex;width:max-content;margin-top:0}
/* SwanReady has more to say than the others: a line under its title, and two ways on */
.scene__lead{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.3;color:var(--ink-2);margin:-2px 0 8px}
.scene__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:8px}
.scene__links .work__link{margin-top:0}
.scene__cta{padding-inline:18px;background:var(--accent);color:#1D2130}
.scene__cta:hover{background:var(--ink);color:#1D2130}
.work__link--quiet{color:var(--ink-2);font-weight:460;font-size:1rem}

/* the plates move a little as their page arrives (values are SVG user units; --enter is inherited through <use>) */
.e-sun{transform:translate(calc((1 - var(--enter,1)) * -64px),calc((1 - var(--enter,1)) * 84px))}
.e-rule-v,.e-rule-h{transform-box:fill-box;transform-origin:50% 50%}
.e-rule-v{transform:scaleY(calc(.06 + var(--enter,1) * .94))}
.e-rule-h{transform:scaleX(calc(.06 + var(--enter,1) * .94))}
.e-swan{transform:translateX(calc((1 - var(--enter,1)) * -120px))}
.e-bird{transform:translate(calc((1 - var(--enter,1)) * -120px),calc((1 - var(--enter,1)) * 157px))}
.e-letter{transform:translateY(calc((1 - var(--enter,1)) * 62px))}
.e-a{transform:translateX(calc((1 - var(--enter,1)) * -64px))}
.e-b{transform:translateX(calc((1 - var(--enter,1)) * 64px))}
.e-lens{transform:translateX(calc((1 - var(--enter,1)) * 128px))}

/* index */
.index__group{padding-top:26px;margin-top:36px;border-top:1px solid var(--ink)}
.index__group:first-of-type{margin-top:0}
.index__group h3{font-family:var(--sc);font-weight:560;font-size:1.0625rem;letter-spacing:.085em;color:var(--ink);margin-bottom:6px}
.index__list{list-style:none;margin:0;padding:0}
.index__list li{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;padding:13px 0 12px;border-bottom:1px solid var(--rule)}
.index__list li:last-child{border-bottom:0}
.index__name{font-family:var(--serif);font-size:1.4rem;line-height:1.2}
.index__desc{grid-column:1/-1;grid-row:2;color:var(--ink-2);font-size:1.0625rem;line-height:1.45;margin-top:2px}
.index__link,.index__get{font-size:1rem;font-weight:500;display:inline-flex;align-items:center;min-height:32px}
.index__get{grid-column:2;grid-row:3;justify-self:end}

/* services */
.services{margin:0}
.services>div{padding:22px 0 24px;border-top:1px solid var(--rule)}
.services>div:first-child{border-top:1px solid var(--ink)}
.services dt{font-family:var(--serif);font-size:1.9rem;line-height:1.15;margin-bottom:8px}
.services dd{margin:0;max-width:32em}

/* letter */
.about h2{margin-bottom:28px}
.letter{font-family:var(--serif);font-size:1.34rem;line-height:1.55;max-width:31em}
.letter p+p{margin-top:1em}
.letter p:first-child::first-letter{float:left;font-size:4.55em;line-height:.74;padding:.09em .09em 0 0;color:var(--lapis)}
.signature{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:var(--lapis)}
.margin-notes{display:grid;gap:4px;margin-top:36px;padding-top:18px;border-top:1px solid var(--rule)}

/* contact and colophon: the back endpaper */
.back{background-color:var(--lapis);color:var(--on-lapis);margin-top:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%23F6EFE0' stroke-opacity='.06' stroke-width='1'><rect x='14' y='14' width='28' height='28'/><rect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/></g></svg>")}
.back--foot{margin-top:0}
.back :focus-visible{outline-color:var(--saffron)}
.contact{padding-block:72px 64px}
.contact .sc{color:var(--saffron-text);margin-bottom:14px}
.contact h2{font-size:clamp(3rem,13vw,6.5rem);line-height:.98}
.contact__lead{margin-top:20px;max-width:26em;font-size:1.1875rem;color:var(--on-lapis)}
.contact__mail{display:inline-block;margin-top:30px;font-family:var(--serif);font-size:clamp(2rem,8.6vw,3.6rem);line-height:1.1;color:var(--on-lapis);
  text-decoration-color:var(--saffron);text-decoration-thickness:2px;text-underline-offset:.16em}
.contact__mail:hover{color:var(--saffron-text)}
.contact__more{margin-top:22px;display:grid;gap:2px;color:var(--on-lapis-2)}
.contact__more a{color:var(--on-lapis);display:inline-flex;align-items:center;min-height:44px}
.colophon{border-top:1px solid rgba(246,239,224,.35);padding-block:26px 40px;display:grid;gap:10px;font-size:1rem;color:var(--on-lapis-2)}
.colophon .wordmark{color:var(--on-lapis)}
.colophon .wordmark i{color:var(--saffron)}