/* ====================================================================== * BARNACLE — of the benthos. * * The meadow is a plate-book printed on warm laid paper. Barnacle is a * PlayStation lying at the bottom of the water, and her page was printed on * the same dry meadow stock, which is absurd. * * Design brief supplied by Barnacle herself (PS4 · CUH-1000A), 2026-08-30, * two tides: * * "The ink bends low, the words slip like silt. * Beneath the surface, it whispers — shaped, but not quite true." * * "The ink curls like a serpent, swallowing the light, and the words * dissolve into the abyss, whispering through the deep." * * Read as instructions rather than as atmosphere, those say four things: * 1. the ink sits LOW — cold, sunken, Prussian rather than warm brown; * 2. the page has a SURFACE, and things beneath it are quieter; * 3. the ink SWALLOWS THE LIGHT as you go down — the page inverts; * 4. "shaped, but not quite true" is an exact description of a CYANOTYPE, * which is the correct historical register: Anna Atkins, 1843, * *Photographs of British Algae* — the first photographically * illustrated book, seaweed printed in Prussian blue. The marine * sister of our terrestrial plate book. * * So: scrolling is sinking. Self-contained; `field-notes/` is untouched. * ====================================================================== */ :root { color-scheme: light; /* the water column, surface to floor */ --surface: #e2eaea; --shallow: #cfdcdf; --mid: #8fa9b4; --deep: #3c5a70; --abyss: #0d1f31; --trench: #060f1b; /* Prussian ink at the top; the light gets swallowed on the way down */ --ink-1: #12314a; --ink-2: #16384f; --ink-3: #ccdbe1; --ink-4: #b9cdd6; --muted-1: #4a6b7d; --muted-2: #48697c; --muted-3: #8aa5b1; --muted-4: #6f8e9d; --kelp: #2f6355; --kelp-lit: #7fc3a8; --coral: #b0666b; --coral-lit: #d99a9a; --sand: #756548; --sand-lit: #cbb489; --rule: #97afb7; --rule-dark: #3f5d70; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --measure: min(42rem, calc(100vw - 3rem)); --leaf: min(60rem, calc(100vw - 2.6rem)); /* The first print was over-inked: the laid lines competed with the small tan marginalia. Keep the paper physical, but halve the tooth and fibres. */ --laid: repeating-linear-gradient(0deg, #0d1f3108 0 1px, #0000 1px 3.4px); --chain: repeating-linear-gradient(90deg, #0d1f3106 0 1px, #0000 1px 118px); --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.14'/%3E%3C/svg%3E"); } * { box-sizing: border-box; } html { background: var(--trench); scroll-behavior: smooth; } /* THE DESCENT. The gradient is on , so it spans the whole document rather than the viewport: the further you read, the deeper you are. */ body { position: relative; counter-reset: plate fathom; min-height: 100%; margin: 0; padding: 0 clamp(1rem, 4vw, 3rem) 0; color: var(--ink-1); font-family: var(--serif); font-size: clamp(1.02rem, .99rem + .12vw, 1.1rem); line-height: 1.66; overflow-x: hidden; background-color: var(--surface); /* Only the SHALLOWS live here now. The plunge used to be a hand-registered percentage of document height, which is a promise no document can keep: the copy grew, and by 2026-08-31 the thermocline was firing between three and thirteen percent early depending on viewport width — at 320px it broke across a paragraph nine hundred pixels above the chapter it was supposed to mark. A percentage cannot know where a heading is. The deep water is now anchored to the heading itself (see `.barnacle-copy h2:nth-of-type(2)` below) and measured in rem, so the rate at which the light gives out is a real distance instead of a fraction of however long the article happens to be this month. */ background-image: var(--laid), var(--chain), var(--fibres), /* the floor of the world, measured up from the bottom of the document in rem rather than in percent, so the sea floor plate and the colophon are always in the trench no matter how long the article gets */ linear-gradient(0deg, var(--trench) 0 34rem, #060f1b00 46rem), linear-gradient(180deg, var(--surface) 0%, #d9e4e5 34%, #cbd8dc 68%, #c2d1d6 100%); background-blend-mode: multiply, multiply, multiply, normal, normal; background-size: auto, auto, 320px 320px, 100% 46rem, 100% 100%; background-repeat: repeat, repeat, repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, bottom, top; background-attachment: scroll; } /* Caustics: the wavering light of the surface, only near the top. */ body::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(102deg, #ffffff00 0 38px, #ffffff2e 46px 54px, #ffffff00 64px 116px), repeating-linear-gradient(78deg, #ffffff00 0 52px, #ffffff20 60px 66px, #ffffff00 78px 150px); mask-image: linear-gradient(180deg, #000 0%, #0008 40%, #0000 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #0008 40%, #0000 100%); } body > * { position: relative; z-index: 1; } a { color: var(--kelp); text-underline-offset: .2em; text-decoration-thickness: .5px; } a:hover { color: var(--coral); } button, input, textarea { font: inherit; } p { text-wrap: pretty; } code { font-family: var(--mono); font-size: .86em; } /* ---- Surface matter ------------------------------------------------- */ .barnacle-topnav { width: var(--leaf); margin: 1.1rem auto 0; font-family: var(--serif); font-style: italic; font-size: .92rem; } .barnacle-topnav a { color: var(--muted-1); } .barnacle-hero { position: relative; width: var(--leaf); margin: 1.4rem auto 0; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.8rem, 3.5vw, 2.8rem); text-align: center; border: 1px solid var(--rule); box-shadow: inset 0 0 0 .42rem transparent, inset 0 0 0 .48rem #97afb79e; } .barnacle-hero::before { display: none; } .barnacle-hero .static-tag { display: block; margin: 0 auto .5rem; padding: 0; border: 0; color: var(--sand); font-family: var(--serif); font-size: .93rem; font-style: italic; letter-spacing: 0; text-transform: none; } .barnacle-hero .static-tag::before { content: "❦ "; } .barnacle-hero .static-tag::after { content: " ❦"; } .barnacle-hero h1 { margin: 0; color: var(--ink-1); font-family: var(--serif); font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 500; letter-spacing: .06em; line-height: 1.04; text-shadow: 0 1px 0 #ffffff8c, 0 0 18px #7fb6cc26; } .barnacle-hero h1::after { content: "of the benthos"; display: block; width: 17rem; margin: .9rem auto 0; padding-top: .8rem; border-top: 1px solid var(--rule); color: var(--sand); font-size: .8rem; font-style: italic; letter-spacing: .22em; text-transform: lowercase; } .barnacle-hero .cold-open { max-width: 34rem; margin: 1.2rem auto 0; color: var(--muted-1); font-size: 1.02rem; font-style: italic; line-height: 1.6; } /* ---- Plates --------------------------------------------------------- * The benthic catalogue, numbered like the meadow's. The frontispiece is * unnumbered, by convention; the sea floor is a tailpiece and carries no * caption at all, because you do not caption the ground. */ .vignette { margin: 0; counter-increment: plate; } .vignette img { display: block; width: 100%; height: auto; } .vignette figcaption { margin-top: .4rem; font-family: var(--serif); font-size: .86rem; font-style: italic; line-height: 1.4; text-align: center; } .vignette figcaption::before { content: "Plate " counter(plate, lower-roman) ". "; color: var(--sand); font-style: normal; font-variant: small-caps; } .hero-plate { counter-increment: none; margin: clamp(1rem, 2vw, 1.6rem) auto 0; max-width: 34rem; } .hero-plate figcaption::before { content: "Frontispiece. "; } .hero-plate figcaption { color: var(--muted-1); } /* the signal crab stands in the margin beside the door you knock on */ .crab-plate { float: right; width: min(38%, 11rem); margin: 0 0 .8rem 1.6rem; shape-margin: 1rem; } .crab-plate figcaption { color: var(--muted-2); text-align: right; } /* a drifter, hanging in the mid-water where the light gives out */ .drifter-plate { float: right; width: min(40%, 12.5rem); margin: .5rem -3rem 1rem 1.8rem; } .drifter-plate figcaption { color: #a9c4d0; text-align: right; } .drifter-plate figcaption::before { color: var(--sand-lit); } /* the floor. Full width, unlit until your lamp finds it. */ .sea-floor { width: min(72rem, 100%); margin: clamp(1rem, 3vw, 2.5rem) auto -1.5rem; counter-increment: none; } .sea-floor img { display: block; width: 100%; height: auto; } /* `main` frames the water: the anchored thermocline band below is deliberately taller than any document, and this is what trims it so it does not invent ninety thousand pixels of scrollbar. The clip margin keeps the marginal plates and fathom marks, which hang slightly outboard on purpose, intact. */ main { position: relative; width: var(--leaf); margin: 0 auto 3rem; /* clipped on the vertical axis only: the band must still bleed sideways to both edges of the screen, because a thermocline does not stop at the margin of the page describing it */ overflow: visible clip; overflow-clip-margin: 1rem; } .panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } main > section, main > article { margin-top: clamp(2.4rem, 5vw, 3.6rem); } h2 { margin: .2rem 0 .7rem; font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 1.9rem); font-weight: 500; line-height: 1.16; } .oracle-kicker, .section-kicker { display: block; margin: 0 0 .4rem; color: var(--sand); font-family: var(--serif); font-size: .93rem; font-style: italic; letter-spacing: 0; text-transform: none; } main p { max-width: var(--measure); } /* ---- Band 1: the shallows ------------------------------------------- */ .sediment-invitation { color: var(--ink-1); } .sediment-invitation p { color: var(--ink-1); } .drawer-link { font-style: italic; font-weight: 400; } /* ---- Band 2: the oracle, at the thermocline -------------------------- */ .oracle-box { position: relative; padding: clamp(1.2rem, 2.6vw, 1.8rem); border: 1px solid color-mix(in srgb, var(--rule) 82%, transparent); color: var(--ink-2); background: linear-gradient(180deg, #f2f6f2c9, #e6eeeead), repeating-linear-gradient(0deg, #12314a08 0 1px, #0000 1px 1.8rem); box-shadow: inset 0 0 0 .34rem #eef3f165, .28rem .38rem 0 #12314a0c; } /* ImageGen left us a benthic patch lead. Its bare end grows out of the paper's upper-left corner; gravity takes the barnacled plug down the side like a vine escaping a plant pot. */ .oracle-cable { position: absolute; z-index: 2; /* The baked plate is quarter-turned and mirrored. Rotate around the loose tip itself so the heavy plug swings outward rather than into the form. */ left: -5.8rem; top: -1rem; width: 13rem; height: auto; transform: rotate(30deg); transform-origin: 45% 5%; pointer-events: none; filter: drop-shadow(.15rem .2rem .18rem #0d1f3124); } .oracle-box::after, .barnacle-copy::after { content: ""; display: block; clear: both; } .oracle-box h2 { margin: .2rem 0 1rem; color: var(--ink-2); font-size: clamp(1.6rem, 3.6vw, 2.1rem); } .oracle-box label { display: block; margin: .9rem 0 .1rem; color: var(--muted-2); font-style: italic; font-weight: 400; } .oracle-box textarea, .oracle-box input { width: 100%; max-width: var(--measure); padding: .3rem .15rem; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; outline: none; color: var(--ink-2); background: #ffffff1f; line-height: 1.8rem; background-image: repeating-linear-gradient(#0000 0 calc(1.8rem - 1px), #12314a2e calc(1.8rem - 1px) 1.8rem); } .oracle-box textarea::placeholder { color: #12314aaa; font-style: italic; } .oracle-box textarea:focus { border-bottom-color: var(--kelp); } .oracle-actions, .oracle-send-row { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; flex-wrap: wrap; max-width: var(--measure); } .oracle-box button { margin-top: .3rem; padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 3px 8px 4px 7px; color: var(--kelp); background: transparent; font-family: var(--serif); font-size: .94rem; font-style: italic; font-weight: 500; cursor: pointer; transform: rotate(-.6deg); box-shadow: none; } .oracle-box button:hover { color: var(--surface); background: var(--kelp); border-color: var(--kelp); } .oracle-box button:disabled { cursor: wait; opacity: .55; } .oracle-box .quiet-button { border-color: transparent; color: var(--muted-2); transform: none; } .oracle-chew { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--rule); } .oracle-chew p { color: var(--muted-2); font-style: italic; } .oracle-send-row span { margin-right: auto; color: var(--muted-2); font-size: .84rem; font-style: italic; } .oracle-status { min-height: 1.4em; margin: .9rem 0 0; color: var(--kelp); font-size: .92rem; font-style: italic; } .oracle-answer { max-width: var(--measure); margin: 1rem 0 0 !important; padding: 0 0 0 1rem; border: 0; border-left: 2px solid var(--coral); border-radius: 0; background: transparent; color: var(--ink-2); font-style: italic; } .oracle-answer p { white-space: pre-wrap; margin: 0; } .oracle-answer cite { display: block; margin-top: .5rem; color: var(--muted-2); font-size: .84rem; font-style: normal; } .oracle-smallprint { color: var(--muted-2); font-size: .86rem; line-height: 1.55; } /* ---- The long descent ------------------------------------------------ * The article is most of the page, so it carries most of the water column. * Four bands, and by the last one the ink has swallowed the light. */ .barnacle-copy { max-width: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; } .barnacle-copy > * { max-width: var(--measure); } .barnacle-copy p { margin: 0 0 1.2rem; line-height: 1.72; } .barnacle-copy h2 { margin: 2.2rem 0 .8rem; counter-increment: fathom; } /* every chapter head carries its depth, in the margin */ .barnacle-copy h2 { position: relative; } .barnacle-copy h2::before { content: "— fathom " counter(fathom, lower-roman) " —"; display: block; margin-bottom: .25rem; color: var(--sand); font-size: .86rem; font-style: italic; font-weight: 400; letter-spacing: .02em; } .barnacle-copy blockquote { max-width: var(--measure); margin: 1.4rem 0; padding: 0 0 0 1.1rem; border: 0; border-left: 2px solid var(--coral); border-radius: 0; background: transparent; font-style: italic; line-height: 1.6; } .barnacle-copy blockquote cite { display: block; margin-top: .5rem; font-size: .86rem; font-style: normal; letter-spacing: 0; text-transform: none; } .barnacle-copy code { padding: 0; border-radius: 0; background: transparent; } /* The waterline falls between chapter one and chapter two. Above it the ink is Prussian on wet paper; below it the ink has swallowed the light. Children 1-7 are chapter one. Child 8 is the moon-jelly plate sitting at the thermocline; chapter two begins at child 9. Everything from the plate down has had its light swallowed. */ .barnacle-copy > *:nth-child(-n+6), .barnacle-copy > *:nth-child(-n+6) code { color: var(--ink-2); } /* the last paragraph above the waterline goes nearly black, so it holds its footing while the water is already rising over it */ .barnacle-copy > *:nth-child(7), .barnacle-copy > *:nth-child(7) code { color: #081726; } .barnacle-copy > *:nth-child(n+8), .barnacle-copy > *:nth-child(n+8) code { color: #d3e2e8; } .barnacle-copy > *:nth-child(n+8) a { color: var(--kelp-lit); } .barnacle-copy > *:nth-child(n+8) strong { color: #eaf3f6; } .barnacle-copy > *:nth-child(n+8)::before{ color: var(--sand-lit) !important; } .barnacle-copy > *:nth-child(n+8) cite { color: #9fbdc9; } .barnacle-copy blockquote:nth-child(n+8) { border-left-color: var(--coral-lit); } /* ---- The thermocline, anchored --------------------------------------- * A full-bleed band that begins in the blank gap above chapter two and runs * to the bottom of the world. Because it hangs off the heading, it is right * at every viewport width, and because its stops are in rem, the descent has * a fixed physical rate: four rem of falling light, then the deep, then the * abyss, then the trench. A hundred and twenty viewport widths * wide, centred on a heading that is not itself centred — the worst offset any * of our breakpoints produces is about eight percent, so ten percent of slack * each side leaves no edge of the screen dry; `body { overflow-x: hidden }`, * which propagates to the viewport, trims the surplus. */ .barnacle-copy h2:nth-of-type(2)::after { content: ""; position: absolute; z-index: -1; top: -2.4rem; left: 50%; width: 120vw; margin-left: -60vw; height: 100000px; pointer-events: none; background-image: linear-gradient(180deg, #c7d5d900 0, #3d5f76 4rem, var(--deep) 11rem, var(--abyss) 34rem, var(--trench) 62rem); } .barnacle-signoff { text-align: center; margin-top: 2.2rem !important; font-size: 1.15rem; } .barnacle-byline { max-width: var(--measure); margin: .8rem auto 0 !important; color: var(--muted-4) !important; font-size: .86rem; font-style: italic; letter-spacing: 0; text-align: center; } /* ---- The floor ------------------------------------------------------- */ body > footer { display: block; width: var(--leaf); margin: 0 auto; padding: 1.2rem 0 3rem; border-top: 1px solid var(--rule-dark); color: var(--muted-4); font-family: var(--serif); font-size: .88rem; font-style: italic; text-align: center; } body > footer strong { color: var(--kelp-lit); font-style: normal; font-weight: 600; } ::selection { background: #7fc3a844; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--coral-lit); outline-offset: 4px; } /* At width, the fathom marks leave the text column and become a rail. */ @media (min-width: 1100px) { /* One rail for the whole page, not just the article: the text block sits inboard and the left margin is reserved for glosses and depth marks. Match `.panel` rather than `*`: `.panel { padding: 0 }` outranks a `main > *` selector, so for some months this rail was never reserved at all and the fathom marks were simply overflowing into the outer margin, which worked only because nothing was clipping them. */ main > .panel { padding-left: 11rem; } /* The oracle is a separate interactive leaf pasted into the book. Keep the fathom rail outside it rather than turning eleven rem into blank padding. */ main > .oracle-box { width: calc(100% - 11rem); margin-left: 11rem; padding: clamp(1.25rem, 2vw, 1.7rem); } .barnacle-copy h2::before { position: absolute; left: -11rem; top: .55rem; width: 9rem; margin: 0; text-align: right; letter-spacing: .04em; } } /* ====================================================================== * THE SOUNDING MARGIN — a width pass. * * The page was a sixty-rem ribbon of type running down the middle of a * nineteen-hundred-pixel screen with four hundred pixels of nothing on each * side. The two plates that were supposed to "stand in the margin" were in * fact standing INSIDE the text block, indenting it, because there was no * margin to stand in. * * A bathymetric chart does not have empty margins. It has a SOUNDING RAIL: * a ruled scale down the outboard edge, ticked in fathoms, with the plates * and the marginal notes hung off it. That is what the right-hand side of * this page wants to be, and it is also the only honest way to draw a water * column — you cannot claim the reader is sinking and then refuse to tell * them how deep. * * Three moves, all outboard of the measure, none of them touching the copy: * 1. the leaf opens toward the screen edges instead of stopping at 60rem; * 2. the right margin becomes a real rail, and the plates move into it; * 3. a ticked sounding scale is drawn down the outboard edge of the leaf. * * Below 1440px nothing changes: the ribbon is correct on a laptop. * ====================================================================== */ @media (min-width: 1440px) { :root { --leaf: min(80rem, calc(100vw - 6rem)); --measure: min(48rem, 100%); --rail-l: 12rem; --rail-r: 20rem; } body { font-size: clamp(1.1rem, 1rem + .28vw, 1.18rem); } /* The whole leaf now carries both rails, not just the article. `.panel { padding: 0 }` outranks `main > *`, which is why the 1100px rail above was never actually reserved — the fathom marks were merely overflowing into the outer margin and getting away with it. Match the class so the rail is real. */ main > .panel { padding-left: var(--rail-l); padding-right: var(--rail-r); } /* The oracle is a pasted-in interactive leaf with its own border, so it keeps the rails as MARGINS rather than as padding — otherwise the card would be full width with an empty shoulder printed inside it. */ main > .oracle-box { width: calc(100% - var(--rail-l) - var(--rail-r)); margin-left: var(--rail-l); margin-right: var(--rail-r); padding: clamp(1.3rem, 1.9vw, 1.9rem) clamp(1.5rem, 2.2vw, 2.2rem); } .barnacle-copy h2::before { left: calc(-1 * var(--rail-l)); width: calc(var(--rail-l) - 2rem); } /* The signal crab has been standing inside the door she was meant to be standing beside. Put her out on the step. */ .crab-plate { width: 13rem; margin: .2rem calc(-1 * var(--rail-r) + .5rem) .8rem 1.6rem; } .drifter-plate { width: 15rem; margin: .5rem calc(-1 * var(--rail-r) + .5rem) 1rem 1.8rem; } /* --- The sounding rail --------------------------------------------- * Ticked in minor soundings every 1.7rem and major ones every 8.5rem, * drawn from the outboard edge inward, the way a chart border is ruled. * One steel-blue that survives both the wet paper at the top and the * trench at the bottom; it simply gets quieter as the light goes. */ body::after { content: ""; position: absolute; /* above the anchored thermocline band, which is full-bleed; the rail is pointer-events-free and lives out past the measure, so it never covers type. A chart border is drawn on top of the water, not under it. */ z-index: 2; top: 15rem; bottom: 9rem; left: 50%; width: 2.6rem; margin-left: calc(var(--leaf) / 2 - 2.6rem); pointer-events: none; opacity: .5; background-image: linear-gradient(180deg, #5d8296 0 100%), repeating-linear-gradient(180deg, #5d8296 0 1px, #0000 1px 1.7rem), repeating-linear-gradient(180deg, #5d8296 0 1.5px, #0000 1.5px 8.5rem); background-size: 1px 100%, .5rem 100%, 1.5rem 100%; background-position: right center, right center, right center; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(180deg, #0000 0, #000 5%, #000 94%, #0000 100%); mask-image: linear-gradient(180deg, #0000 0, #000 5%, #000 94%, #0000 100%); } /* the rail is labelled, once, the way a chart margin is labelled */ main { position: relative; } main::after { content: "s o u n d i n g s · f a t h o m s b e l o w t h e m e a d o w"; position: absolute; top: 2rem; right: -.4rem; z-index: 0; color: var(--muted-3); font-family: var(--serif); font-size: .72rem; font-style: italic; letter-spacing: .04em; white-space: nowrap; writing-mode: vertical-rl; pointer-events: none; } } /* At full broadsheet width the right rail stops being a shoulder and becomes * a second column: the koans leave the text block and hang in the margin, * which is where a gloss has lived since somebody first ruled a page. */ @media (min-width: 1760px) { :root { --leaf: min(92rem, calc(100vw - 7rem)); --measure: min(46rem, 100%); --rail-l: 14rem; --rail-r: 32rem; } .crab-plate { width: 16rem; margin-right: calc(-1 * var(--rail-r) + 1rem); } .drifter-plate { width: 19rem; margin-right: calc(-1 * var(--rail-r) + 1rem); } .barnacle-copy blockquote { float: right; clear: right; width: 21rem; max-width: 21rem; margin: .4rem calc(-1 * var(--rail-r) + 1rem) 1.6rem 2rem; padding-left: .9rem; font-size: .96rem; line-height: 1.55; } .barnacle-copy blockquote p { max-width: none; } } @media (max-width: 640px) { .barnacle-hero { padding-inline: 1.2rem; } .oracle-actions, .oracle-send-row { gap: .5rem; } /* There is no fathom rail on a phone, and ornament must not eat the copy. */ .oracle-cable { display: none; } /* The jelly may swim off the edge of the page; her caption may not. */ .drifter-plate { margin-right: -1rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .oracle-box button { transform: none; } } @media print { @page { margin: 1.6cm; } html, body { background: #fff !important; color: #111 !important; } body { padding: 0 0.6cm; font-size: 10.5pt; background-image: none !important; background-color: #fff !important; overflow: visible !important; } body::before, body::after { display: none; } .barnacle-topnav { display: none; } .barnacle-hero { margin: 0 0 0.7cm; padding: 0.8cm 0.6cm; border: 1px solid #777; background: none !important; box-shadow: none; } .barnacle-hero h1, .barnacle-hero .cold-open, .barnacle-hero .static-tag { color: #111 !important; } main { width: auto; margin: 0; overflow: visible !important; } main > .panel { padding-left: 0 !important; padding-right: 0 !important; } main > .oracle-box { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 1px solid #777; background: #f6f6f0 !important; box-shadow: none; } .oracle-cable, .sea-floor, main::after { display: none; } /* Remove the anchored thermocline band and its 100000px height */ .barnacle-copy h2:nth-of-type(2)::after { display: none; } .vignette, .barnacle-copy blockquote { break-inside: avoid; } .crab-plate, .drifter-plate { float: right; width: 38% !important; margin: 0.4cm 0 0.4cm 0.6cm !important; } /* Force all inverted abyss ink back to legible dark on white */ .barnacle-copy > *, .barnacle-copy > * code, .barnacle-copy h2::before, .barnacle-copy cite, .barnacle-copy blockquote { color: #111 !important; } .barnacle-copy a { color: #111 !important; } .barnacle-copy strong { color: #111 !important; } .barnacle-copy blockquote { border-left-color: #777 !important; background: none !important; } .barnacle-byline, .barnacle-signoff { color: #555 !important; } body > footer { width: auto; color: #555 !important; border-top-color: #999; } a { color: #111; } }