:root {
  --ip-ground: #F8E8DF;
  --ip-ink: #232323;
  --ip-join: #239A88;
  --ip-support: #DED7D3;
  --ip-paper: #FFFFFF;
  color-scheme: light;
  font-family: 'Snippet', Georgia, serif;
  color: var(--ip-ink);
  background: var(--ip-ground);
  font-synthesis: none;
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 21px; line-height: 1.65; }
a { color: var(--ip-ink); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--ip-ink); outline-offset: 6px; }
::selection { color: var(--ip-ink); background: var(--ip-support); }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-weight: 400; }
h1, h2 { font-family: 'Lilita One', Georgia, serif; }
h1 { line-height: 1.04; text-wrap: balance; }
h2 { margin: 0 0 30px; font-size: clamp(34px, 3.3vw, 48px); line-height: 1.1; text-wrap: balance; }
h3 { margin: 38px 0 16px; font-size: 29px; line-height: 1.2; }
.ip-skip { position: absolute; top: 12px; left: 22px; padding: 8px 16px; background: var(--ip-paper); z-index: 5; transform: translateY(-160%); }
.ip-skip:focus { transform: none; }
.ip-bounds { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }

/* The signature crosses the broad seam. The three links hang from short stitches. */
.ip-signature { height: 148px; position: relative; isolation: isolate; }
.ip-signature::before { content: ''; position: absolute; z-index: -1; top: 78px; left: 0; width: 72%; height: 14px; background: var(--ip-join); }
.ip-signature::after { content: ''; position: absolute; z-index: -1; top: 78px; right: 0; width: 26%; height: 14px; background: var(--ip-support); }
.ip-name { position: absolute; top: 43px; left: 0; font: 46px/1.1 'Lilita One', Georgia, serif; text-decoration: none; }
.ip-name:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ip-name span { display: inline; }
.ip-topic-stitches { position: absolute; right: 0; top: 103px; display: flex; gap: 42px; font-size: 18px; }
.ip-topic-stitches a { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; text-decoration: none; }
.ip-topic-stitches a::before { content: ''; position: absolute; width: 5px; height: 24px; background: var(--ip-ink); left: 7px; top: -28px; }
.ip-topic-stitches a:hover, .ip-topic-stitches a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 3px; }
[data-lucide] { display: inline-block; flex-shrink: 0; width: 19px; height: 19px; vertical-align: middle; }

/* A photograph fills the canvas; a peach length with a stepped edge holds every word. */
.ip-home-opening { position: relative; isolation: isolate; background: var(--ip-support); }
.ip-joined-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; margin: 0; }
.ip-joined-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 55%; }
.ip-hero-layout { min-height: 690px; display: flex; justify-content: flex-end; }
.ip-title-fabric {
  position: relative;
  display: flex;
  align-items: center;
  width: 54%;
  padding: 50px max(56px, calc((100% - 1280px) / 2)) 76px 78px;
  color: var(--ip-ink);
  background: var(--ip-ground);
  clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48%, 48px 48%);
}
.ip-title-fabric::before { content: ''; position: absolute; top: 0; right: 58px; width: 12px; height: 32px; background: var(--ip-join); }
.ip-fabric-copy { width: 100%; max-width: 680px; }
.ip-home-opening h1 { margin: 0; font-size: clamp(48px, 4.65vw, 76px); }
.ip-home-lead { margin: 28px 0 0; max-width: 580px; font-size: 24px; line-height: 1.5; }
.ip-hero-seam { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(to right, var(--ip-join) 0 70%, transparent 70% 73%, var(--ip-support) 73%); transform-origin: left; animation: ip-seam-settle 760ms cubic-bezier(.22, .7, .25, 1) both; }
@keyframes ip-seam-settle { from { transform: scaleX(.82); } to { transform: scaleX(1); } }

/* Inner photographs have their own joined silhouette and an offset teal hem. */
.ip-inner-opening { padding-block: 26px 78px; }
.ip-with-photograph { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5%; align-items: center; }
.ip-inner-copy { min-width: 0; }
.ip-way-home { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 25px; min-height: 36px; font-size: 18px; text-decoration: none; }
.ip-way-home:hover { text-decoration: underline; }
.ip-way-home svg { transition: transform 160ms ease; }
.ip-way-home:hover svg { transform: translateX(-3px); }
.ip-inner-opening h1 { max-width: 1000px; font-size: clamp(46px, 4.6vw, 68px); margin: 0 0 28px; }
.ip-inner-lead { max-width: 750px; font-size: 24px; line-height: 1.5; }
.ip-photo-band { position: relative; width: 100%; height: 370px; margin: 42px 0 28px; isolation: isolate; }
.ip-photo-band::before { content: ''; position: absolute; z-index: -1; inset: 22px 0 -22px 32px; background: var(--ip-join); border-radius: 20px 20px 0 20px; }
.ip-photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 55%; mask: url('joined-window.svg') center / 100% 100% no-repeat; -webkit-mask: url('joined-window.svg') center / 100% 100% no-repeat; }

/* The complete lengths follow one another. Only their edges share the gutter. */
.ip-reading-join { padding-bottom: 108px; position: relative; }
.ip-home-opening + .ip-reading-join { margin-top: -42px; }
.ip-prose-length { padding: 64px 72px 70px; position: relative; }
.ip-prose-length > * { max-width: 720px; }
.ip-first-length { width: 81%; background: var(--ip-paper); box-shadow: 14px 16px 0 var(--ip-support); }
.ip-first-length::before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 13px; background: var(--ip-join); }
.ip-first-length::after { content: ''; position: absolute; width: 116%; height: 18px; bottom: -18px; left: 0; background: linear-gradient(to right, var(--ip-join) 0 74%, transparent 74% 79%, var(--ip-support) 79%); }
.ip-joining-passage { width: 370px; max-width: 38%; margin: 84px 3% 88px auto; padding-left: 26px; border-left: 10px solid var(--ip-join); font-size: 21px; line-height: 1.6; position: relative; }
.ip-joining-passage::before { content: ''; position: absolute; top: -24px; left: -68px; width: 112px; height: 12px; background: var(--ip-join); }
.ip-joining-passage h2 { font-family: 'Snippet', Georgia, serif; font-size: 33px; line-height: 1.15; text-wrap: pretty; }
.ip-second-length { width: 76%; margin-left: auto; background: var(--ip-support); }
.ip-second-length::before { content: ''; position: absolute; right: 0; top: -18px; width: 78%; height: 18px; background: linear-gradient(to right, var(--ip-join) 0 72%, transparent 72% 77%, var(--ip-paper) 77%); }
.ip-second-length > h2 { margin-left: -106px; padding: 22px 0 22px 34px; background: var(--ip-support); }
.ip-owner-end { margin-top: 80px; padding: 52px 0 0; border-top: 20px solid var(--ip-join); }
.ip-owner-end h2 { max-width: 950px; }
.ip-owner-end p { max-width: 900px; margin-left: 13%; font-size: 24px; line-height: 1.55; }
.ip-owner-end p:first-of-type { font-size: clamp(25px, 2.1vw, 32px); line-height: 1.45; }
.ip-comparison-wrap { margin: 36px 0 4px; }
.ip-comparison-wrap table { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 1.45; }
.ip-comparison-wrap caption { text-align: left; font-family: 'Lilita One', Georgia, serif; font-size: 28px; line-height: 1.15; margin-bottom: 22px; }
.ip-comparison-wrap th, .ip-comparison-wrap td { text-align: left; vertical-align: top; padding: 17px 14px 17px 0; border-bottom: 3px solid var(--ip-support); }
.ip-comparison-wrap thead th { font-weight: 400; border-bottom-color: var(--ip-join); }
.ip-comparison-wrap tbody th { min-width: 100px; font-weight: 400; }
.ip-source-entries { margin: 38px 0 0; }
.ip-source-entries dt { padding-top: 25px; border-top: 6px solid var(--ip-join); margin-top: 30px; font-size: 25px; line-height: 1.25; }
.ip-source-entries dt:first-child { margin-top: 0; }
.ip-source-entries dd { margin: 12px 0 0; font-size: 20px; line-height: 1.5; }
.ip-source-byline { display: block; margin-top: 8px; font-size: 18px; }
.ip-correspondence { margin: 0 0 28px; }
.ip-correspondence dt { margin-bottom: 12px; font-size: 25px; line-height: 1.2; }
.ip-correspondence dd { margin: 0; }

/* The last broad field is saturated teal, with ink text rather than white text. */
.ip-bottom-join { background: var(--ip-join); padding: 62px 0 34px; border-top: 16px solid var(--ip-paper); }
.ip-footer-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 42px 100px; }
.ip-footer-line { max-width: 440px; font-size: 25px; line-height: 1.45; }
.ip-reading-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-content: start; font-size: 20px; }
.ip-reading-directory a { text-decoration: none; width: fit-content; min-height: 32px; }
.ip-reading-directory a:hover { text-decoration: underline; }
.ip-rights { grid-column: 1 / -1; margin-top: 8px; padding-top: 24px; border-top: 3px solid var(--ip-ink); font-size: 17px; }
.ip-missing-opening { padding-block: 65px 120px; max-width: 900px; }
.ip-missing-opening h1 { font-size: clamp(48px, 6vw, 76px); margin: 0 0 35px; }
.ip-missing-opening p { max-width: 650px; }

@media (min-width: 1600px) {
  .ip-title-fabric { padding-right: calc((100% - 1280px) / 2); }
}

@media (max-width: 1000px) {
  .ip-bounds { width: calc(100% - 64px); }
  .ip-name { font-size: 39px; top: 44px; }
  .ip-topic-stitches { gap: 30px; }
  .ip-topic-stitches a { gap: 6px; }
  .ip-title-fabric { width: 59%; padding: 42px 32px 70px 62px; }
  .ip-home-opening h1 { font-size: 54px; }
  .ip-home-lead { font-size: 22px; }
  .ip-hero-layout { min-height: 660px; }
  .ip-with-photograph { grid-template-columns: 1.3fr 1fr; gap: 4%; }
  .ip-inner-opening h1 { font-size: 48px; }
  .ip-inner-lead { font-size: 22px; }
  .ip-photo-band { height: 330px; }
  .ip-prose-length { padding: 48px; }
  .ip-first-length { width: 86%; }
  .ip-second-length { width: 84%; }
  .ip-second-length > h2 { margin-left: -72px; padding-left: 24px; }
  .ip-joining-passage { max-width: 48%; }
  .ip-footer-inner { gap: 35px; }
  .ip-footer-line { font-size: 23px; }
}

@media (max-width: 600px) {
  body { font-size: 19px; line-height: 1.65; }
  .ip-bounds { width: calc(100% - 44px); }
  .ip-signature { width: calc(100% - 40px); height: 166px; }
  .ip-signature::before, .ip-signature::after { top: 93px; height: 12px; }
  .ip-signature::before { width: 63%; }
  .ip-signature::after { width: 30%; }
  .ip-name { top: 38px; width: 190px; left: calc(50% - 95px); font-size: 32px; line-height: .99; text-align: center; }
  .ip-name span { display: block; }
  .ip-topic-stitches { position: static; display: block; font-size: 16px; line-height: 1.15; }
  .ip-topic-stitches a { position: absolute; max-width: 72px; min-height: 34px; gap: 4px; }
  .ip-topic-stitches [data-lucide] { width: 13px; height: 13px; }
  .ip-topic-stitches a::before { height: 24px; width: 4px; top: auto; left: 8px; }
  .ip-topic-stitches .ip-appetite-stitch { left: 0; top: 38px; }
  .ip-appetite-stitch::before { bottom: -25px; }
  .ip-topic-stitches .ip-fat-stitch { left: 0; top: 120px; }
  .ip-fat-stitch::before { bottom: 30px; }
  .ip-topic-stitches .ip-compare-stitch { right: 0; top: 77px; }
  .ip-compare-stitch::before { bottom: -22px; }
  .ip-hero-layout { min-height: 720px; display: block; padding: 22px 0 230px; }
  .ip-title-fabric { width: calc(100% - 22px); margin-left: 22px; padding: 30px 26px 42px 24px; clip-path: polygon(0 0, 100% 0, 100% 100%, 36px 100%, 36px calc(100% - 18px), 0 calc(100% - 18px)); }
  .ip-title-fabric::before { right: 26px; width: 9px; height: 18px; }
  .ip-home-opening h1 { font-size: clamp(35px, 10.5vw, 48px); line-height: 1.04; text-wrap: pretty; }
  .ip-home-lead { font-size: 20px; line-height: 1.5; margin-top: 22px; }
  .ip-joined-photo img { object-position: 24% 70%; }
  .ip-hero-seam { height: 18px; }
  .ip-home-opening + .ip-reading-join { margin-top: -28px; }
  .ip-inner-opening { display: block; padding-block: 8px 56px; }
  .ip-way-home { font-size: 17px; margin-bottom: 20px; }
  .ip-inner-opening h1 { font-size: 42px; line-height: 1.06; margin-bottom: 25px; }
  .ip-inner-lead { font-size: 21px; line-height: 1.5; }
  .ip-photo-band { width: calc(100% - 12px); height: 190px; margin: 28px 0 0 auto; }
  .ip-photo-band::before { inset: 12px 0 -12px 18px; }
  .ip-prose-length { padding: 33px 24px 38px; }
  .ip-prose-length > * { max-width: 100%; }
  .ip-first-length { width: calc(100% - 12px); box-shadow: 10px 12px 0 var(--ip-support); }
  .ip-first-length::before { width: 36px; height: 10px; }
  .ip-first-length::after { width: calc(100% + 12px); height: 14px; bottom: -14px; }
  .ip-joining-passage { width: 84%; max-width: 285px; padding-left: 19px; border-left-width: 8px; margin: 66px 0 58px auto; font-size: 19px; }
  .ip-joining-passage::before { left: -39px; width: 76px; height: 10px; top: -20px; }
  .ip-joining-passage h2 { font-size: 29px; }
  .ip-second-length { width: calc(100% - 12px); }
  .ip-second-length::before { height: 14px; top: -14px; }
  .ip-second-length > h2 { margin-left: 0; padding: 0; }
  h2 { font-size: 34px; margin-bottom: 23px; }
  h3 { font-size: 27px; margin-top: 31px; }
  .ip-owner-end { margin-top: 48px; padding-top: 32px; border-top-width: 14px; }
  .ip-owner-end p { font-size: 21px; margin-left: 0; }
  .ip-owner-end p:first-of-type { font-size: 24px; }
  .ip-reading-join { padding-bottom: 64px; }
  .ip-comparison-wrap table, .ip-comparison-wrap tbody { display: block; }
  .ip-comparison-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ip-comparison-wrap tr { display: block; margin-bottom: 26px; padding-bottom: 8px; border-bottom: 5px solid var(--ip-join); }
  .ip-comparison-wrap tbody th { display: block; font-size: 25px; padding-top: 0; border: 0; }
  .ip-comparison-wrap td { display: block; padding: 7px 0; border: 0; font-size: 19px; }
  .ip-comparison-wrap td::before { content: attr(data-label) ': '; display: block; font-size: 17px; }
  .ip-source-entries dt { font-size: 24px; }
  .ip-source-entries dd { font-size: 19px; }
  .ip-bottom-join { padding: 38px 0 28px; border-top-width: 12px; }
  .ip-footer-inner { display: block; }
  .ip-footer-line { font-size: 23px; margin-bottom: 32px; }
  .ip-reading-directory { gap: 14px 18px; font-size: 18px; }
  .ip-rights { margin-top: 34px; }
  .ip-missing-opening { padding: 30px 0 70px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}