/*
The "field journal in green" look: colours, type and sizes shared by every
page that takes it up (Sonia, 2026-09-28). The reference page is
directions/field-journal-green.html; its header lists every decision and
its CSS shows each part in use.
Owned by the home-page directions session: to change a value, ask that
session rather than editing here, so every page changes together. Link this
file before the page's own CSS. Every name starts with --j- so nothing
clashes with site.css or a page's own variables; map your page's variables
to these.
From a page in the folder root:
*/
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=DM+Sans:opsz,wght@9..40,400..700&family=IBM+Plex+Mono:wght@500&family=La+Belle+Aurore&family=Martian+Mono:wdth,wght@75..100,300..500&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Noto+Serif+Display:wdth,wght@62.5..100,300..700&family=Onest:wght@400;500;600&display=swap');
:root{
/* Colours. One continuous beige background, the field journal's paper:
NO white sheets, frames, boxes or shadows round sections, only a
hairline between them (Sonia, 2026-09-28: "the white frames are not
good - there should be one continuous background ... the beige one").
Text and frames use spotka.co/landa's greens exactly (read from the
live page, 2026-09-28) and the pen is the Spotka logo's red (Sonia: "the
colors were supposed to be red from spotka logo and greens from this
page, for text and frames"). */
--j-page:#ece5da; /* the one background of the whole page */
--j-sheet:#ece5da; /* no separate sheets any more: the same beige */
--j-note:#f8f5ee; /* a small paper note or card taped onto the page */
--j-card:#fffef9; /* a white card for a short aside (landa's card), e.g. "Who comes" */
--j-tape:rgba(250,247,238,.8); /* a strip of tape holding a picture or a card */
--j-tape-shadow:0 1px 1.5px rgba(58,50,35,.16);
--j-line:#d8ddd5; /* hairlines and frames: landa's line */
--j-soft:#e2ebe0; /* the join card and the few other quiet surfaces: fern mist (Sonia, 2026-10-01; was landa's mint #e5eee7, "quite cold") */
--j-chip:#cfe3d4; /* pills ... */
--j-chip-ink:#14512f; /* ... and their words; also words on --j-soft (7.9:1) */
--j-head:#143629; /* headlines and strong small words: landa's ink */
--j-body:#5c6a62; /* body text: landa's muted, a touch darker so it passes 4.5:1 on the paper (was #65736b, 4.43:1) */
--j-accent:#2d7951; /* labels, links, buttons, a headline's second line: landa's accent */
--j-pen:#e56a5d; /* the logo red, for pen marks only: never for words */
--j-pen-text:#e56a5d; /* handwritten notes: the logo red too */
--j-light:#83b087; /* landa's light green (the stroke under its headline) */
/* Type */
--j-disp:'Noto Serif Display',serif; /* headlines: font-stretch 66%, weight 600, lowercase, line-height .86 */
--j-text:'Onest',sans-serif; /* body */
--j-mono:'Martian Mono',monospace; /* labels: font-stretch 75%, 11.5px, uppercase */
--j-hand:'La Belle Aurore','Bad Script',cursive; /* handwritten notes, in --j-pen-text */
--j-app:'DM Sans',system-ui,sans-serif; /* inside drawings of the app, and on event cards */
--j-app-serif:'Newsreader',Georgia,serif; /* titles inside drawings of the app */
--j-app-mono:'IBM Plex Mono',ui-monospace,monospace;
/* Sizes: each is the smaller of a share of the width and a share of the
height (svh), so a big section can fit one screen on a computer. That is
not forced: a short section keeps its natural height (Sonia, 2026-09-28:
"not all the slides need to be viewport"). Headlines stay restrained: the
home headline is about 95px at 1440 x 900. */
--j-h1:clamp(40px,min(6.6vw,11svh),96px);
--j-h2:clamp(34px,min(4.2vw,7svh),62px);
--j-pad:clamp(16px,4.4vw,64px);
}
/* Paper (Sonia, 2026-10-01: "a is fine, apply to all pages"): the page's
beige is textured like cream paper. Soft raised bumps lit from the top
left with a fine tooth on top, drawn by the browser from SVG noise (no
picture file), grey, multiplied over a slightly lighter cream so the page
still averages the beige #ece5da. Every page that links this file gets it
on ; a section that paints its own solid beige hides it, so leave
section backgrounds transparent. The three papers tried:
directions/paper-textures.html (this is A). */
:root{
--j-paper-base:#f8f1e5;
--j-paper-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'400'%20height%3D'400'%3E%3Cfilter%20id%3D'p'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.25'%20numOctaves%3D'5'%20seed%3D'11'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeDiffuseLighting%20in%3D'n'%20surfaceScale%3D'1.6'%20diffuseConstant%3D'1'%20lighting-color%3D'%23fff'%20result%3D'l'%3E%3CfeDistantLight%20azimuth%3D'225'%20elevation%3D'60'%2F%3E%3C%2FfeDiffuseLighting%3E%3CfeColorMatrix%20in%3D'l'%20type%3D'matrix'%20values%3D'.33%20.33%20.33%200%200%20.33%20.33%20.33%200%200%20.33%20.33%20.33%200%200%200%200%200%200%201'%20result%3D'g0'%2F%3E%3CfeGaussianBlur%20in%3D'g0'%20stdDeviation%3D'1.2'%20result%3D'g1'%2F%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.1'%20numOctaves%3D'2'%20seed%3D'29'%20stitchTiles%3D'stitch'%20result%3D't'%2F%3E%3CfeColorMatrix%20in%3D't'%20type%3D'matrix'%20values%3D'.33%20.33%20.33%200%200%20.33%20.33%20.33%200%200%20.33%20.33%20.33%200%200%200%200%200%200%201'%20result%3D'tg'%2F%3E%3CfeComposite%20in%3D'tg'%20in2%3D'g1'%20operator%3D'arithmetic'%20k1%3D'0'%20k2%3D'0.45'%20k3%3D'0.55'%20k4%3D'0'%20result%3D'g'%2F%3E%3CfeComponentTransfer%20in%3D'g'%3E%3CfeFuncR%20type%3D'linear'%20slope%3D'0.4687'%20intercept%3D'0.6307'%2F%3E%3CfeFuncG%20type%3D'linear'%20slope%3D'0.4687'%20intercept%3D'0.6307'%2F%3E%3CfeFuncB%20type%3D'linear'%20slope%3D'0.4687'%20intercept%3D'0.6307'%2F%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'0'%20intercept%3D'1'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23p)'%2F%3E%3C%2Fsvg%3E");
}
html body{background-color:var(--j-paper-base);background-image:var(--j-paper-image);background-blend-mode:multiply;background-repeat:repeat;background-size:200px 200px}
/* Keyboard focus, every page: a green ring on whatever has focus. A part with
its own focus style (cards, the vote button) keeps it. */
:focus-visible{outline:2px solid var(--j-accent);outline-offset:2px}
/* The offer's mark (Sonia, 2026-10-01: the red ring "is overlapping and
doesnt look good"; she chose "A underline, apply to all pages"): a
hand-drawn logo-red stroke under the words, below the descenders, never
over a letter. Markup: free for a year
(the stroke is the path in directions/offer-marks.html, option A). */
.j-under{position:relative;white-space:nowrap}
.j-under>svg{position:absolute;left:-.08em;bottom:-.42em;width:calc(100% + .16em);height:.42em;overflow:visible;fill:none;stroke:var(--j-pen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.j-under>svg path{vector-effect:non-scaling-stroke}
/* The footer: one for every page (Sonia, 2026-10-02: "quiet line is nice",
with "questions? and email in the same line and size and font as spotka
logo on the opposite side"). Markup to copy, English and Polish:
directions/footer-snippet.html. Options it was chosen from:
directions/footers.html. Facts in it are checked (see the snippet). */
.j-foot{border-top:1px solid var(--j-line);padding:48px 0 calc(44px + var(--ask-fern-safe,68px));color:var(--j-body);font-family:var(--j-text);font-size:14px;line-height:1.55}
/* a page whose content is wider than 1180px sets --j-page-max and
--j-page-inset on :root, and the header and footer edges line up with
its text (Home: 1400px and clamp(8px,2.8vw,40px)) */
.j-foot-in{max-width:var(--j-page-max,1180px);margin:0 auto;padding:0 calc(var(--j-pad) + var(--j-page-inset,0px))}
.j-foot p{margin:0}
/* room between the logo row, the links and the fine print (Sonia,
2026-10-02: "make more space ... so it's not so squished") */
.j-foot-top{display:flex;justify-content:space-between;align-items:center;gap:18px 24px;flex-wrap:wrap}
.j-foot-brand{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--j-head);text-decoration:none}
.j-foot-brand img{width:30px;height:30px;border-radius:7px}
.j-foot-brand b,.j-foot-ask{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:26px;letter-spacing:-.01em;line-height:1.1;color:var(--j-head)}
/* the email is tapped on its own: a 44px target, padding cancelled by the
margin so nothing moves */
.j-foot-ask a{display:inline-block;padding:9px 0;margin:-9px 0;color:var(--j-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--j-light)}
.j-foot nav{margin-top:34px;display:flex;flex-wrap:wrap;gap:0 26px;font-family:var(--j-mono);font-stretch:75%;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.j-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--j-accent);text-decoration:none}
.j-foot nav a:hover,.j-foot-brand:hover b{text-decoration:underline;text-underline-offset:3px}
.j-foot .j-foot-legal{margin-top:26px;padding-top:22px;border-top:1px solid var(--j-line);font-size:12px;line-height:1.7}
.j-foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){
/* the last line clears the Ask Fern button: its own measure
(--ask-fern-safe, set by ask-fern.js from claude/ask-fern-phone-fixes)
once that ships, 112px until then */
.j-foot{padding:40px 0 calc(44px + var(--ask-fern-safe,68px))}
.j-foot-top{flex-direction:column;align-items:flex-start;gap:20px}
.j-foot-ask{font-size:24px}
.j-foot nav{margin-top:26px;gap:0 20px}
/* Privacy and Terms: 44px to tap on a phone, same look (padding cancelled by the margin) */
.j-foot-legal a{display:inline-block;padding-block:12px;margin-block:-12px}
.j-foot-ask a{padding-block:10px;margin-block:-10px}
}
/* The header: one for every page, Home's (Sonia's agreed top bar), shared
so every page has the same links, the same tap sizes and the phone menu.
Markup to copy: directions/header-snippet.html. The phone menu opens and
closes through journal-motion.js (already on every page). The language
switch lists ONLY languages the page really exists in, as links to that
version (ROLLOUT 6: a page never offers a language it doesn't have); an
English-only page has no switch. */
.j-top{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--j-page-max,1180px);margin:0 auto;padding:14px calc(var(--j-pad) + var(--j-page-inset,0px));font-family:var(--j-text);position:relative}
.j-top-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;flex:none;color:var(--j-head)}
.j-top-brand img{width:28px;height:28px;border-radius:7px}
.j-top-brand b{font-family:var(--j-disp);font-stretch:70%;font-weight:600;font-size:30px;line-height:1;letter-spacing:-.01em;padding:0 4px 4px}
.j-top-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px)}
.j-top :is(.j-menu,.j-market,.j-langs,.j-menu-btn){font-family:var(--j-mono);font-stretch:75%;font-weight:400;font-size:11.5px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase}
.j-menu{display:flex;gap:0 clamp(14px,2vw,26px)}
.j-menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--j-head);white-space:nowrap}
.j-menu a:hover,.j-menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.j-market{color:var(--j-accent);white-space:nowrap}
.j-langs{display:flex;align-items:center;padding:1px 6px;background:var(--j-page);border:1px solid var(--j-line);border-radius:999px;box-shadow:0 1px 2px rgba(20,54,41,.06)}
.j-langs a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box;color:var(--j-accent);text-decoration:none}
.j-langs a:hover{color:var(--j-head)}
.j-langs a[aria-current="true"]{color:var(--j-head);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.j-menu-btn{display:none;min-height:44px;min-width:44px;border:0;background:none;color:var(--j-head);cursor:pointer;padding:0 2px}
@media (max-width:899px){
.j-menu-btn{display:inline-flex;align-items:center;justify-content:flex-end}
.j-top-links{display:none}
.j-top.open .j-top-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;position:absolute;left:0;right:0;top:100%;background:var(--j-paper-base);background-image:var(--j-paper-image);background-blend-mode:multiply;background-size:200px 200px;z-index:20;padding:6px calc(var(--j-pad) + var(--j-page-inset,0px)) 20px;border-bottom:1px solid var(--j-line);box-shadow:0 18px 30px -24px rgba(20,54,41,.4)}
.j-top.open .j-menu{flex-direction:column}
.j-top.open .j-langs a{min-width:44px;min-height:44px}
}
/* The sticky bar with a join button (Sonia, 2026-10-02: "the nav bar should
be sticky. and there should be a button there to join instead of the
'First members ยท Warsaw'"). Markup:
holding one