/* julien-jimenez.me : le carnet. Feuille unique (Fraunces, Rethink Sans, Caveat), papier creme, marge orange, notes vert sapin.
   Sections : tokens, base, composants (.btn .link-hand .hl .scribble .tape .polaroid .postit .kicker), en-tete et tiroir .drawer,
   accueil (.hero .bonjour .dogears .fiches .bigsheet .wall .spread .letter .figures .letters .jcards .faq .envelope), pied de page et .network-links,
   Journal : .crumbs .mag-head .mag-intro .mag-list, article : .progress>span, .article-head (__cat, .article-title, __lede, .article-meta),
   .article-cover, .article-body>.sheet>.article-layout (aside.toc + .prose[data-article]), .table-wrap, .checklist,
   .callout--conseil|--retenir|--erreur (.callout__label), .approach (__photo, __label, __body), .author-box (__photo, __name, __bio, __links),
   .article-faq.faq, .related (.related__title + .jcards), page 404 (.notfound .torn), animations et prefers-reduced-motion. */
:root{--bg:#FFFDF8;--surface:#FBF3E4;--ink:#2B2118;--muted:#6E6153;--line:#EADCC4;--primary:#D9480F;--secondary:#2F6F5E;--accent:#F2C14E;--primary-ink:#B23A09;--btn:#C4410C;--btn-hover:#A3350A;--white:#FFFFFF;--line-strong:#D8C5A4;--rule:rgba(234,220,196,.58);--hl:rgba(242,193,78,.52);--postit-yellow:#FCEDB9;--postit-green:#DCECE2;--postit-cream:#F5E5C9;--kraft:#EFDDBA;--steel:#8A8079;--font-display:"Fraunces","Iowan Old Style",Georgia,serif;--font-body:"Rethink Sans","Segoe UI",system-ui,-apple-system,sans-serif;--font-hand:"Caveat","Segoe Print","Bradley Hand",cursive;--fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:clamp(1.03rem,.98rem + .22vw,1.15rem);--fs-lead:clamp(1.14rem,1.02rem + .55vw,1.4rem);--fs-h3:clamp(1.2rem,1.1rem + .45vw,1.45rem);--fs-h2:clamp(2rem,1.3rem + 2.6vw,3.45rem);--fs-hand:clamp(1.32rem,1.2rem + .5vw,1.62rem);--sheet:1200px;--gutter:clamp(20px,4vw,40px);--mcol:220px;--cgap:56px;--read:680px;--space:clamp(72px,3rem + 5.4vw,120px);--header-h:72px;--radius-sketch:255px 15px 225px 15px / 15px 225px 15px 255px;--radius-card:14px 4px 12px 5px / 5px 12px 4px 14px;--shadow-paper:0 1px 0 rgba(43,33,24,.06),0 12px 24px -14px rgba(43,33,24,.28);--shadow-lift:0 1px 0 rgba(43,33,24,.06),0 26px 40px -20px rgba(43,33,24,.36);--ruled:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,var(--rule) 33px,var(--rule) 34px);--ease:cubic-bezier(.22,.8,.24,1);--ease-draw:cubic-bezier(.62,.04,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.68;caret-color:var(--primary);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
main,.site-footer{overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0}
strong{font-weight:650}
sup{font-size:.62em;line-height:0;vertical-align:.62em}
a{color:var(--primary-ink);text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:color .25s,text-decoration-color .25s}
a:hover{color:var(--ink);text-decoration-color:var(--primary)}
::selection{background:#FBE6A2;color:var(--ink)}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--primary);outline-offset:3px;border-radius:7px 3px 8px 3px;box-shadow:0 0 0 7px rgba(217,72,15,.16)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.35em;height:1.35em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ac{stroke:var(--primary)}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--ink);color:var(--white);font-weight:600;border-radius:var(--radius-sketch);text-decoration:none;transition:top .2s}
.skip:focus-visible{top:12px;color:var(--white)}
.sheet{width:100%;max-width:calc(var(--sheet) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.hand{font-family:var(--font-hand);font-weight:500;line-height:1.15}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:.78em 1.5em;background:var(--btn);color:var(--white);font:600 1rem/1.2 var(--font-body);letter-spacing:.01em;border:0;border-radius:var(--radius-sketch);box-shadow:0 2px 0 rgba(43,33,24,.16),0 12px 20px -12px rgba(196,65,12,.7);text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.btn:hover{color:var(--white);background:var(--btn-hover);transform:translateY(-2px) rotate(-.6deg);box-shadow:0 3px 0 rgba(43,33,24,.14),0 18px 26px -14px rgba(196,65,12,.7)}
.btn:active{transform:translateY(0)}
.btn .icon{width:1.2em;height:1.2em;transition:transform .35s var(--ease)}
.btn:hover .icon{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--ink)}
.btn--ghost:hover{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--ink),0 12px 20px -14px rgba(43,33,24,.5)}
.link-hand{position:relative;display:inline-flex;align-items:center;gap:.45em;padding:10px .1em 12px;color:var(--ink);font-weight:600;text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.6C28 3.4 62 3 118 5.6' fill='none' stroke='%23D9480F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 calc(100% - 3px) / 100% 9px;transition:background-size .45s var(--ease),color .25s}
.link-hand:hover{color:var(--primary-ink);background-size:108% 11px}
.link-hand .icon{width:1.15em;height:1.15em}
.hl{background:linear-gradient(100deg,transparent .2em,var(--hl) .35em,rgba(242,193,78,.62) 50%,var(--hl) calc(100% - .35em),transparent calc(100% - .2em)) no-repeat 0 82% / 100% 58%;border-radius:.25em .7em .3em .8em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em;margin:0 -.02em;transition:background-size 1.1s var(--ease-draw) .3s}
.scribble{position:relative;display:inline-block;white-space:nowrap}
.scribble__line{position:absolute;left:-3%;bottom:-.24em;width:106%;height:.42em;overflow:visible;pointer-events:none}
.scribble__line path{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tape{position:absolute;z-index:3;top:-15px;left:50%;width:118px;height:32px;transform:translateX(-50%) rotate(-3deg);background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%,rgba(255,255,255,.16) 70%,rgba(255,255,255,0)),rgba(242,193,78,.66);box-shadow:0 1px 2px rgba(43,33,24,.1);clip-path:polygon(3% 0,97% 4%,100% 20%,97% 38%,100% 58%,97% 78%,100% 100%,3% 96%,0 80%,3% 60%,0 40%,3% 20%);pointer-events:none}
.tape--tilt{transform:translateX(-50%) rotate(4deg)}
.tape--left{left:-26px;transform:rotate(-38deg);width:92px;top:-2px}
.tape--right{left:auto;right:-26px;transform:rotate(36deg);width:92px;top:-2px}
@media (max-width:599px){.tape--left{left:-8px;width:76px}
.tape--right{right:-8px;width:76px}
}
.polaroid{--rot:-3deg;position:relative;margin:0;background:var(--white);padding:14px 14px 16px;box-shadow:var(--shadow-paper);transform:rotate(var(--rot));transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.polaroid img{width:100%;background:#EFE5D3}
.polaroid figcaption{padding:14px 6px 4px;font-family:var(--font-hand);font-size:1.42rem;line-height:1.1;color:var(--ink);text-align:center}
.polaroid:hover{--rot:-1deg;box-shadow:var(--shadow-lift)}
.postit{--r:2deg;position:relative;background-color:var(--postit-yellow);background-image:linear-gradient(to bottom,rgba(43,33,24,.045),rgba(43,33,24,0) 22%);padding:22px 22px 26px;border-radius:2px 2px 22px 2px / 2px 2px 8px 2px;box-shadow:0 1px 1px rgba(43,33,24,.08),0 16px 18px -14px rgba(43,33,24,.38);transform:rotate(var(--r))}
.postit--green{background-color:var(--postit-green)}
.postit--cream{background-color:var(--postit-cream)}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:0 0 1rem;font-size:var(--fs-xs);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kicker__n{display:inline-grid;place-items:center;min-width:2.3rem;height:2.1rem;padding:0 .45rem;border:1.6px solid var(--primary);border-radius:var(--radius-sketch);font:600 .98rem/1 var(--font-display);letter-spacing:0;color:var(--primary-ink)}
.kicker__note{font:500 1.35rem/1 var(--font-hand);letter-spacing:0;text-transform:none;color:var(--secondary);transform:rotate(-2deg)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.94);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);transition:box-shadow .45s var(--ease)}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 14px 24px -22px rgba(43,33,24,.55)}
.site-header__in{max-width:calc(var(--sheet) + 2 * var(--gutter));height:var(--header-h);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:baseline;gap:.5em;min-height:44px;margin-right:auto;padding-top:6px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand__name{font:700 1.9rem/1 var(--font-hand);letter-spacing:.005em}
.brand__sub{font:italic 400 1.02rem/1 var(--font-display);color:var(--muted)}
.brand:hover .brand__sub{color:var(--primary-ink)}
.topnav{display:none}
.topnav ul{display:flex;gap:4px;list-style:none}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);font-weight:550;text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C22 2.6 40 6.4 58 4.2S86 3 98 4.6' fill='none' stroke='%23D9480F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px calc(100% - 8px) / 0 7px;transition:background-size .4s var(--ease),color .2s}
.topnav a:hover{color:var(--ink);background-size:calc(100% - 28px) 7px}
.bookmark{position:relative;align-self:flex-start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:92px;height:calc(var(--header-h) + 12px);margin:0 0 -12px 4px;padding:6px 8px 20px;border:0;background:var(--btn);color:var(--white);font:650 .82rem/1 var(--font-body);letter-spacing:.03em;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 14px),0 100%);filter:drop-shadow(0 4px 6px rgba(43,33,24,.2));transition:height .35s var(--ease),background .25s}
.bookmark::before{content:"";position:absolute;inset:4px 5px 20px;pointer-events:none;border:1px dashed rgba(255,255,255,.6);border-top:0}
.bookmark .icon{width:1.3rem;height:1.3rem}
.bookmark:hover{height:calc(var(--header-h) + 20px);background:var(--btn-hover)}
.bookmark:focus-visible{outline:none;box-shadow:none;background:var(--btn-hover)}
.bookmark:focus-visible::before{border:2.5px solid var(--accent)}
.bookmark[aria-expanded="true"]{background:var(--secondary)}
.drawer-backdrop{position:fixed;inset:0;z-index:70;background:rgba(43,33,24,.26);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.drawer-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(460px,100%);background-color:var(--bg);background-image:var(--ruled);box-shadow:-30px 0 60px -30px rgba(43,33,24,.5);transform-origin:100% 50%;transform:perspective(1600px) translateX(102%) rotateY(-24deg);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;transition:transform .7s var(--ease),visibility 0s linear .7s}
.drawer::before{content:"";position:absolute;top:0;bottom:0;left:46px;width:2px;background:var(--primary);opacity:.5}
.drawer::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(43,33,24,.14),rgba(43,33,24,0) 26%);opacity:1;transition:opacity .7s var(--ease)}
.drawer.is-open{transform:none;visibility:visible;transition:transform .7s var(--ease),visibility 0s}
.drawer.is-open::after{opacity:.25}
.drawer__in{position:relative;z-index:1;padding:22px 24px 36px 70px;min-height:100%;display:flex;flex-direction:column}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.drawer__title{font:italic 500 2rem/1 var(--font-display)}
.drawer__title .hand{display:block;margin-top:4px;font-size:1.35rem;font-style:normal;color:var(--secondary)}
.drawer__close{display:grid;place-items:center;width:48px;height:48px;border:1.6px solid var(--ink);border-radius:var(--radius-sketch);background:var(--white);color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),background .2s}
.drawer__close:hover{transform:rotate(-8deg);background:var(--surface)}
.toc-list{list-style:none}
.toc-list a{display:grid;grid-template-columns:2.1rem minmax(0,max-content) minmax(14px,1fr) auto;align-items:baseline;gap:.55rem;min-height:44px;padding:.42rem 0;color:var(--ink);text-decoration:none}
.toc-list a::after{content:"";grid-column:3;grid-row:1;align-self:end;height:2px;margin-bottom:.5em;background:radial-gradient(circle,var(--line-strong) 1px,transparent 1.4px) 0 0 / 7px 2px repeat-x}
.toc-list__n{grid-column:1;font:600 .95rem/1 var(--font-display);color:var(--primary-ink)}
.toc-list__t{grid-column:2;font:450 1.18rem/1.25 var(--font-display);transition:color .2s,transform .3s var(--ease)}
.toc-list__p{grid-column:4;font:500 1.28rem/1 var(--font-hand);color:var(--secondary)}
.toc-list a:hover .toc-list__t{color:var(--primary-ink);transform:translateX(4px)}
@media (max-width:479px){.drawer::before{left:34px}
.drawer__in{padding:18px 18px 30px 52px}
.toc-list a{gap:.45rem;grid-template-columns:1.8rem minmax(0,max-content) minmax(12px,1fr) auto}
.toc-list__t{font-size:1.08rem}
}
.drawer__foot{margin-top:auto;padding-top:26px;display:grid;gap:6px}
.drawer__foot a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.drawer__foot a:hover{color:var(--primary-ink)}
.page{position:relative;padding-block:var(--space)}
.page::before{content:"";position:absolute;top:0;height:2px;left:max(var(--gutter),calc((100% - var(--sheet)) / 2));right:max(var(--gutter),calc((100% - var(--sheet)) / 2));background:radial-gradient(circle,var(--line-strong) 1.1px,transparent 1.6px) 0 0 / 9px 2px repeat-x}
.page--surface{background-color:var(--surface)}
.page--ruled{background-image:var(--ruled);background-position:0 18px}
.folio{position:absolute;bottom:clamp(16px,2.4vw,30px);right:max(var(--gutter),calc((100% - var(--sheet)) / 2));font:500 1.4rem/1 var(--font-hand);color:var(--muted);transform:rotate(-3deg)}
.page-head{position:relative;margin-bottom:clamp(38px,4.5vw,60px)}
.page-head h2{font-size:var(--fs-h2);line-height:1.07;letter-spacing:-.02em;text-wrap:balance}
.page-head__icon{display:inline-block;width:.8em;height:.8em;margin-right:.1em;vertical-align:-.04em;stroke-width:1.7}
.page-head__note{margin:0 0 .5rem;font:500 var(--fs-hand)/1.1 var(--font-hand);color:var(--primary-ink);transform:rotate(-2deg);transform-origin:left center}
.page-head__intro{margin-top:1.2rem;max-width:36em;font-size:var(--fs-lead);line-height:1.55}
.page-head__more{margin-top:.9rem;max-width:38em;color:var(--muted)}
.margin-note{margin:0 0 1.4rem;padding-left:14px;border-left:2px solid var(--secondary)}
.margin-note__quote{font:500 1.75rem/1.1 var(--font-hand);color:var(--secondary)}
.margin-note__by{margin-top:.45rem;font-size:.8rem;line-height:1.4;color:var(--muted)}
.margin-note--hand{border-left:0;padding-left:0;font:500 1.5rem/1.15 var(--font-hand);color:var(--secondary);transform:rotate(-2deg)}
@media (min-width:1100px){.col-read{margin-left:calc(var(--mcol) + var(--cgap));max-width:var(--read)}
.page-head.col-read{max-width:calc(var(--read) + 140px)}
.col-read > .page-head__note{position:absolute;top:3.4rem;left:calc(-1 * (var(--mcol) + var(--cgap)));width:var(--mcol);text-align:right;transform:rotate(-4deg);transform-origin:right center}
.col-read > .page-head__note::after{content:"";display:block;width:46px;height:12px;margin:4px 0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M2 4c12 4 26 5 40 2m0 0-6-4m6 4-5 5' fill='none' stroke='%23B23A09' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
.note-anchor{position:relative}
.note-anchor > .margin-note{position:absolute;top:.2rem;left:calc(-1 * (var(--mcol) + var(--cgap)));width:calc(var(--mcol) - 8px);margin:0;padding:0 14px 0 0;border-left:0;border-right:2px solid var(--secondary);text-align:right}
.note-anchor > .margin-note--hand{top:38%;border-right:0;padding-right:0;transform:rotate(-4deg)}
.note-anchor > .margin-note--hand::after{content:"";display:block;width:58px;height:22px;margin:8px 0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 22'%3E%3Cpath d='M2 6c16 10 34 12 52 6m0 0-8-5m8 5-6 7' fill='none' stroke='%232F6F5E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
}
.hero{position:relative;overflow-x:clip;padding:clamp(36px,6vw,84px) 0 clamp(88px,9vw,130px);background-image:var(--ruled);background-position:0 10px}
.hero::before{content:"";position:absolute;top:0;bottom:0;width:2px;left:calc(max(var(--gutter),calc((100% - var(--sheet)) / 2)) - 2px);background:var(--primary);opacity:.55}
.hero::after{content:"";position:absolute;top:0;bottom:0;width:1px;left:calc(max(var(--gutter),calc((100% - var(--sheet)) / 2)) + 3px);background:var(--primary);opacity:.3}
.hero__grid{display:grid;gap:clamp(52px,6vw,72px);align-items:center}
.hero__text{position:relative;padding-left:clamp(20px,3.8vw,52px)}
.hero__top{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 20px;margin-bottom:20px}
.hero__date{display:inline-flex;align-items:center;gap:.4rem;font:600 1.6rem/1 var(--font-hand);color:var(--primary-ink);transform:rotate(-2deg)}
.hero__date .icon{width:1.2rem;height:1.2rem;color:var(--ink)}
.hero__aside{position:relative;padding-right:8px;margin-right:4%;font:500 1.42rem/1 var(--font-hand);color:var(--secondary);transform:rotate(3deg)}
.hero__arrow{position:absolute;top:85%;right:58%;width:62px;height:48px;overflow:visible}
.hero__arrow path{fill:none;stroke:var(--secondary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero__title{margin-top:30px;letter-spacing:-.02em}
.hero__name{display:block;font-weight:620;font-size:clamp(2.3rem,1.25rem + 4.2vw,4.25rem);line-height:1.02;font-variation-settings:"opsz" 144}
.hero__rest{display:block;margin-top:.3em;font-size:clamp(1.48rem,1.02rem + 1.6vw,2.28rem);font-weight:460;line-height:1.2;letter-spacing:-.012em;font-variation-settings:"opsz" 72}
.hero__rest .scribble{font-style:italic;font-weight:520}
.br-lg{display:none}
.hero__lead{margin-top:1.7rem;max-width:33em;font-size:var(--fs-lead);line-height:1.55}
.hero__sub{margin-top:1rem;max-width:36em;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:2rem}
.hero__tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:2.1rem;list-style:none;font-size:var(--fs-sm);color:var(--muted)}
.hero__tags li{display:inline-flex;align-items:center;gap:.55rem}
.hero__tags li::before{content:"";width:9px;height:9px;flex:none;border-radius:52% 48% 60% 40% / 45% 55% 45% 55%;background:var(--accent);box-shadow:0 0 0 2px rgba(242,193,78,.3)}
.hero__art{position:relative;padding:18px 0 92px;max-width:520px;width:100%;margin-inline:auto}
.polaroid--hero{--rot:-3deg;width:92%;margin-left:auto;padding-bottom:58px}
.polaroid--hero:hover{--rot:-1deg}
.hero__postit{--r:3.2deg;position:absolute;left:0;bottom:0;width:min(290px,74%);padding:20px 20px 18px}
.postit__quote{font:italic 500 1.08rem/1.42 var(--font-display)}
.postit__sign{margin-top:.5rem;font:600 1.35rem/1 var(--font-hand);color:var(--secondary);text-align:right}
@media (min-width:700px){.hero__art{max-width:560px}
}
@media (min-width:1000px){.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,4.4vw,64px)}
.hero__art{margin:0 clamp(-56px,calc((var(--sheet) - 100vw) / 2),0px) 0 0;max-width:none}
.br-lg{display:inline}
.hero__aside{margin-right:6%}
}
.bonjour{display:grid;gap:56px}
.bonjour__photo{position:relative;max-width:400px;width:100%;margin-inline:auto}
.polaroid--portrait{--rot:-4deg;width:88%;margin:0 auto}
.idcard{position:relative;margin-top:40px;background-color:var(--white);background-image:linear-gradient(to bottom,transparent 0 52px,rgba(217,72,15,.4) 52px 54px,transparent 54px);padding:16px 20px 12px;border-radius:var(--radius-card);box-shadow:var(--shadow-paper);transform:rotate(1.2deg)}
.idcard__title{display:flex;align-items:center;gap:.45rem;height:34px;margin-bottom:10px;font:600 1.5rem/1 var(--font-hand);color:var(--ink)}
.idcard__title .icon{color:var(--steel)}
.idcard dl{margin:0}
.idcard dl div{display:grid;grid-template-columns:6.4rem 1fr;gap:.8rem;padding:.42rem 0;border-bottom:1px dashed var(--line)}
.idcard dl div:last-child{border-bottom:0}
.idcard dt{font:600 1.22rem/1.25 var(--font-hand);color:var(--primary-ink)}
.idcard dd{margin:0;font-size:.93rem;line-height:1.45}
.flow{display:grid;gap:1.15rem;max-width:40em}
.flow__lead{font-size:var(--fs-lead);line-height:1.55}
.flow__aside{display:grid;grid-template-columns:26px 1fr;gap:.6rem;margin-top:.6rem;padding:1.1rem 1.2rem;background:var(--surface);border-radius:var(--radius-card);font-size:.98rem;color:var(--ink)}
.flow__aside .icon{width:24px;height:24px;color:var(--primary);margin-top:.1rem}
.page--bonjour .page-head h2{max-width:15em}
.nowrap{white-space:nowrap}
@media (max-width:899px){.bonjour{display:flex;flex-direction:column;gap:0}
.bonjour__photo,.bonjour__text{display:contents}
.bonjour .page-head{order:1}
.polaroid--portrait{order:2;width:min(330px,86%);margin:0 auto 48px}
.bonjour .flow{order:3}
.idcard{order:4;width:100%;max-width:400px;margin:44px auto 0}
}
@media (min-width:900px){.bonjour{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:start}
.bonjour__photo{margin:12px 0 0}
}
.dogears{position:relative;list-style:none;display:flex;flex-direction:column;gap:26px;padding:8px 0 12px}
.dogears::before{content:"";position:absolute;top:0;bottom:0;left:11px;width:2px;background:repeating-linear-gradient(to bottom,var(--line-strong) 0 8px,transparent 8px 15px)}
.dogear{--r:0deg;position:relative;margin-left:40px;background:var(--bg);padding:22px 26px 24px;border-radius:3px 0 3px 3px;box-shadow:var(--shadow-paper);transform:rotate(var(--r));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.dogear::before{content:"";position:absolute;top:0;right:0;width:32px;height:32px;background:linear-gradient(225deg,var(--surface) 0 50%,#E9D7B8 50% 100%);border-bottom-left-radius:6px;box-shadow:-3px 3px 5px -2px rgba(43,33,24,.2)}
.dogear::after{content:"";position:absolute;top:30px;left:-36px;width:14px;height:14px;border-radius:55% 45% 50% 50%;background:var(--primary);box-shadow:0 0 0 4px var(--surface)}
.dogear:nth-child(3n+2){--r:.8deg}
.dogear:nth-child(3n){--r:-.7deg}
.dogear:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--shadow-lift)}
.dogear__date{font:600 2.1rem/1 var(--font-hand);color:var(--primary-ink);margin-bottom:.45rem}
.dogear h3{font-size:var(--fs-h3);margin-bottom:.5rem;padding-right:26px}
.dogear p:last-child{font-size:.98rem;color:var(--ink)}
.dogear--now{background:var(--white)}
.dogear--now::after{background:var(--secondary)}
.dogear--now .dogear__date{color:var(--secondary)}
.dogears__end{margin:26px 0 0 40px;font:500 1.55rem/1.2 var(--font-hand);color:var(--secondary)}
@media (min-width:900px){.dogears{gap:0}
.dogears::before{left:50%;transform:translateX(-50%)}
.dogear{width:calc(50% - 52px);margin-left:0}
.dogear:nth-child(odd){align-self:flex-start}
.dogear:nth-child(even){align-self:flex-end}
.dogear + .dogear{margin-top:-70px}
.dogear:nth-child(odd)::after{left:auto;right:-59px}
.dogear:nth-child(even)::after{left:-59px}
.dogear:nth-child(odd)::before{right:auto;left:0;background:linear-gradient(135deg,var(--surface) 0 50%,#E9D7B8 50% 100%);border-bottom-left-radius:0;border-bottom-right-radius:6px;box-shadow:3px 3px 5px -2px rgba(43,33,24,.2)}
.dogear:nth-child(odd){border-radius:0 3px 3px 3px;padding-left:40px}
.dogear:nth-child(odd) h3{padding-right:0}
.dogears__end{margin:40px 0 0;text-align:center}
}
.fiches{list-style:none;display:grid;gap:clamp(34px,3vw,42px) clamp(24px,2.6vw,36px);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.fiche{--r:-.8deg;position:relative;display:flex;flex-direction:column;background-color:var(--white);padding:28px 26px 22px;border-radius:var(--radius-card);box-shadow:var(--shadow-paper);transform:rotate(var(--r));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fiche:nth-child(3n+2){--r:.7deg}
.fiche:nth-child(3n){--r:-.35deg}
.fiche:hover{transform:rotate(0) translateY(-5px);box-shadow:var(--shadow-lift)}
.fiche__staple{position:absolute;top:-7px;left:26px;width:56px;height:15px}
.fiche__n{position:absolute;top:16px;right:20px;font:500 1.25rem/1 var(--font-hand);color:var(--muted)}
.fiche__icon{width:42px;height:42px;color:var(--ink);stroke-width:1.6}
.fiche h3{margin:22px -26px .7rem;padding:16px 26px 0;border-top:2px solid rgba(217,72,15,.32);font-size:var(--fs-h3);line-height:1.22}
.fiche p{font-size:.97rem;line-height:1.6}
.fiche__why{margin-top:auto !important;padding-top:1rem;font:500 1.34rem/1.18 var(--font-hand) !important;color:var(--secondary)}
.fiche > p:nth-last-child(2){margin-bottom:1.1rem}
.fiche__why::before{content:"";display:block;height:2px;margin-bottom:.8rem;background:radial-gradient(circle,var(--line-strong) 1px,transparent 1.5px) 0 0 / 8px 2px repeat-x}
.fiche__why span{color:var(--primary-ink)}
@media (min-width:1000px){.fiches{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:599px){.fiche{padding-top:24px}
.fiche__icon{width:34px;height:34px}
.fiche h3{margin-top:16px;padding-top:14px}
}
.bigsheet{--bs-pad:clamp(22px,5vw,64px);position:relative;background-color:var(--bg);background-image:var(--ruled);background-position:0 22px;padding:clamp(44px,6vw,84px) var(--bs-pad) clamp(52px,6vw,92px);border-radius:6px;box-shadow:0 1px 0 rgba(43,33,24,.05),0 34px 64px -40px rgba(43,33,24,.45)}
.bigsheet::after{content:"";position:absolute;top:18px;right:18px;width:44px;height:44px;background:linear-gradient(225deg,var(--surface) 0 50%,#E9D7B8 50% 100%);border-bottom-left-radius:8px;box-shadow:-3px 3px 6px -2px rgba(43,33,24,.2);display:none}
.essay{font-size:clamp(1.06rem,1rem + .25vw,1.16rem);line-height:1.78}
.essay > * + *{margin-top:1.2em}
.essay__first::first-letter{float:left;margin:.1em .12em 0 0;font:600 3.7em/.8 var(--font-display);color:var(--primary)}
.polaroid--wide{--rot:1.4deg;margin:2.2em 0 2.4em !important;padding:12px 12px 10px}
.polaroid--wide:hover{--rot:.4deg}
.essay__last{font-family:var(--font-display);font-size:1.2em;line-height:1.5}
.essay .scribble{font-weight:600}
@media (min-width:1100px){.bigsheet::before{content:"";position:absolute;top:0;bottom:0;width:2px;left:calc(var(--bs-pad) + var(--mcol) + var(--cgap) / 2);background:var(--primary);opacity:.45}
.bigsheet .col-read{margin-left:calc(var(--mcol) + var(--cgap))}
.polaroid--wide{width:calc(100% + 40px);max-width:none}
}
.page--wall{background-color:var(--bg);background-image:radial-gradient(rgba(216,197,164,.6) 1.2px,transparent 1.7px);background-size:22px 22px}
.wall{list-style:none;display:grid;gap:clamp(24px,2.6vw,38px);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.wall .postit{min-height:236px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.wall .postit:hover{transform:rotate(0) translateY(-4px) scale(1.02);box-shadow:0 2px 2px rgba(43,33,24,.06),0 26px 30px -20px rgba(43,33,24,.42);z-index:2}
.wall .postit:nth-child(1){--r:-2.2deg}
.wall .postit:nth-child(2){--r:1.6deg;background-color:var(--postit-green)}
.wall .postit:nth-child(3){--r:-1deg;background-color:var(--postit-cream)}
.wall .postit:nth-child(4){--r:2.4deg}
.wall .postit:nth-child(5){--r:1.2deg;background-color:var(--postit-cream)}
.wall .postit:nth-child(6){--r:-1.9deg}
.wall .postit:nth-child(7){--r:2deg;background-color:var(--postit-green)}
.wall .postit:nth-child(8){--r:-1.4deg;background-color:var(--postit-yellow)}
.postit__n{margin-bottom:.55rem;font:600 1.4rem/1 var(--font-hand);color:var(--primary-ink)}
.wall .postit h3{font-size:1.16rem;line-height:1.28;margin-bottom:.6rem}
.wall .postit p:last-child{font-size:.95rem;line-height:1.55}
.strip{position:relative;margin:clamp(48px,5vw,72px) auto 0;max-width:780px;background:var(--white);padding:26px clamp(22px,4vw,44px) 20px;box-shadow:var(--shadow-paper);transform:rotate(-.6deg)}
.strip blockquote{margin:0}
.strip blockquote p{font:italic 420 clamp(1.12rem,1rem + .6vw,1.42rem)/1.5 var(--font-display)}
.strip blockquote [data-words]{color:var(--ink);font-weight:520}
.strip figcaption{margin-top:.5rem;text-align:right;font:600 1.4rem/1 var(--font-hand);color:var(--secondary)}
@media (min-width:1100px){.wall{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:539px){.wall .postit{min-height:0;width:93%;padding-bottom:24px}
.wall .postit:nth-child(even){margin-left:auto}
}
.spread{position:relative;display:grid;background:var(--bg);border-radius:8px;box-shadow:0 2px 0 rgba(43,33,24,.05),0 34px 60px -38px rgba(43,33,24,.46)}
.spread__page{position:relative;padding:clamp(28px,4.6vw,60px);background-image:var(--ruled);background-position:0 12px}
.spread__title{display:flex;align-items:center;gap:.65rem;margin-bottom:1.6rem;font-size:clamp(1.45rem,1.25rem + .8vw,1.85rem);font-style:italic;font-weight:500}
.spread__title .icon{width:1.25em;height:1.25em;color:var(--ink);stroke-width:1.7}
.changes{list-style:none;display:grid;gap:1.5rem}
.changes li{display:grid;gap:.25rem}
.changes__date{font:600 1.5rem/1.05 var(--font-hand);color:var(--primary-ink)}
.changes li p:last-child,.constants p{font-size:.98rem;line-height:1.6}
.changes strong,.constants strong{font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.constants{list-style:none;display:grid;gap:1.35rem}
.constants li{display:grid;grid-template-columns:30px 1fr;gap:.8rem;align-items:start}
.constants .icon{width:28px;height:28px;color:var(--secondary);stroke-width:2.4;margin-top:.05rem}
.spread__arrows{display:none}
.spread__down{width:40px;height:62px;margin:-14px auto;position:relative;z-index:2;overflow:visible}
.spread__down path,.spread__arrows path{fill:none;stroke:var(--secondary);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.spread__page--left{border-bottom:1.5px dashed var(--line-strong)}
.spread__note{margin-top:28px;text-align:center;font:500 1.45rem/1.2 var(--font-hand);color:var(--secondary)}
@media (min-width:900px){.spread{grid-template-columns:1fr 1fr}
.spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:76px;z-index:1;pointer-events:none;transform:translateX(-50%);background:linear-gradient(90deg,rgba(43,33,24,0),rgba(43,33,24,.05) 38%,rgba(43,33,24,.14) 50%,rgba(43,33,24,.05) 62%,rgba(43,33,24,0))}
.spread__page--left{border-bottom:0;border-radius:8px 0 0 8px;padding-right:clamp(40px,5vw,72px)}
.spread__page--right{padding-left:clamp(48px,5.4vw,80px)}
.changes li{grid-template-columns:8.4rem 1fr;gap:1rem;align-items:baseline}
.spread__down{display:none}
.spread__arrows{position:absolute;z-index:2;left:50%;top:24%;bottom:18%;display:flex;flex-direction:column;justify-content:space-between;width:112px;transform:translateX(-50%);pointer-events:none}
.spread__arrows svg{width:112px;height:44px;overflow:visible}
.spread__arrows svg:nth-child(2){transform:translateX(-8px)}
}
.letter{position:relative;max-width:800px;margin:0 auto;background-color:var(--surface);background-image:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.7),rgba(255,255,255,0) 60%);padding:clamp(34px,6vw,72px) clamp(22px,6.5vw,84px) clamp(30px,4vw,48px);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(216,197,164,.55),0 1px 0 rgba(43,33,24,.05),0 30px 54px -32px rgba(43,33,24,.42);transform:rotate(-.5deg)}
.letter::after{content:"";position:absolute;top:0;bottom:0;left:calc(clamp(22px,6.5vw,84px) - 14px);width:2px;background:rgba(217,72,15,.3);pointer-events:none}
.letter > p{margin-top:1rem;max-width:36em}
.letter__hello{margin-top:0 !important;padding-right:80px;font:600 clamp(2.05rem,1.6rem + 1.7vw,2.9rem)/1.05 var(--font-hand);color:var(--ink)}
.letter__tips{list-style:none;display:grid;gap:1.3rem;margin:1.8rem 0 1.6rem}
.letter__tips li{display:grid;grid-template-columns:2.9rem 1fr;gap:.9rem;align-items:start}
.letter__num{display:grid;place-items:center;width:2.6rem;height:2.6rem;font:700 1.85rem/1 var(--font-hand);color:var(--primary-ink);background:radial-gradient(ellipse at 48% 56%,rgba(242,193,78,.62) 0 52%,rgba(242,193,78,0) 70%)}
.letter__tips p{font-size:1rem;line-height:1.65}
.letter__tips strong{display:block;margin-bottom:.1rem;font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.letter__ps{font-style:italic;color:var(--muted)}
.letter__sign{margin-top:1.4rem !important;padding-right:4%;text-align:right;font:700 2.7rem/1 var(--font-hand);color:var(--secondary);transform:rotate(-5deg);transform-origin:right bottom;max-width:none !important}
.letter__stamp{position:absolute;top:22px;right:22px;display:grid;place-items:center;gap:2px;width:66px;height:78px;padding:6px;background:var(--white);outline:4px dotted var(--surface);outline-offset:-2px;box-shadow:0 2px 4px rgba(43,33,24,.14);transform:rotate(5deg);font:600 1.05rem/1 var(--font-hand);color:var(--primary-ink)}
.letter__stamp .icon{width:30px;height:30px;color:var(--ink)}
.letter__stamp::before{content:"";position:absolute;inset:7px;border:1.2px solid var(--primary);opacity:.55}
@media (min-width:700px){.letter__stamp{width:82px;height:96px;top:30px;right:34px}
.letter__stamp .icon{width:36px;height:36px}
.letter__hello{padding-right:110px}
}
.page--grid{background-color:var(--surface);background-image:linear-gradient(rgba(216,197,164,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(216,197,164,.3) 1px,transparent 1px);background-size:28px 28px;background-position:center top}
.figures{list-style:none;display:grid;gap:52px 26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.figure{text-align:center}
.figure__num{display:flex;flex-direction:column;align-items:center;font:620 clamp(2.7rem,1.9rem + 2.8vw,4.3rem)/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;font-variation-settings:"opsz" 144}
.figure__pre{margin-bottom:.55rem;font:600 1.4rem/1 var(--font-hand);letter-spacing:0;color:var(--secondary)}
.figure__unit{font-size:.44em;font-weight:520;letter-spacing:0}
.circled{position:relative;display:inline-flex;align-items:baseline;gap:.12em;padding:.26em .55em;white-space:nowrap}
.circled sup{align-self:flex-start;margin-top:.18em;font-size:.42em;line-height:1;vertical-align:0}
.circled__ring{position:absolute;inset:-4% -3%;width:106%;height:108%;overflow:visible;pointer-events:none}
.circled__ring path{fill:none;stroke:var(--primary);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.figure__label{max-width:15.5rem;margin:1.1rem auto 0;font-size:.98rem;line-height:1.5}
.figures__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-top:clamp(48px,5vw,70px);padding-top:22px;border-top:1.5px dashed var(--line-strong)}
.figures__note{font:600 1.7rem/1.1 var(--font-hand);color:var(--primary-ink);transform:rotate(-2deg)}
.figures__src{font-size:var(--fs-sm);color:var(--muted);max-width:34em}
@media (min-width:1000px){.figures{grid-template-columns:repeat(6,1fr);gap:64px 26px}
.figure{grid-column:span 2}
.figure:nth-child(4){grid-column:2 / span 2}
.figure:nth-child(2){margin-top:34px}
.figure:nth-child(5){margin-top:-10px}
}
.letters{display:grid;gap:clamp(44px,5vw,56px);align-items:start;padding-top:14px}
.pinned{position:relative;margin:0;background-color:var(--white);padding:clamp(34px,3.6vw,46px) clamp(22px,3vw,40px) 24px;border-radius:2px;box-shadow:var(--shadow-paper);transform:rotate(var(--r,-1deg));transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pinned:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--shadow-lift)}
.pinned--b{--r:1.3deg}
.pinned--c{--r:-.6deg}
.pinned__clip{position:absolute;top:-26px;left:34px;width:24px;height:62px;transform:rotate(-6deg)}
.pinned blockquote{margin:0}
.pinned blockquote p{font:400 clamp(1.04rem,.98rem + .3vw,1.18rem)/1.62 var(--font-display);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1lh - 1px),rgba(216,197,164,.5) calc(1lh - 1px),rgba(216,197,164,.5) 1lh);background-position:0 -.3em}
.pinned--a blockquote p{font-size:clamp(1.1rem,1rem + .5vw,1.34rem)}
.pinned figcaption{display:grid;gap:.1rem;margin-top:1.3rem;padding-top:1rem;border-top:1px dashed var(--line-strong)}
.pinned__name{font:600 1.5rem/1.1 var(--font-hand);color:var(--secondary)}
.pinned__role{font-size:.86rem;color:var(--muted)}
.letters__more{margin-top:clamp(36px,4vw,52px);text-align:center}
.letters__note{--r:-2deg;max-width:420px;justify-self:center;padding:20px 22px 14px}
.letters__note-text{font:500 1.42rem/1.18 var(--font-hand);color:var(--ink)}
.letters__note .link-hand{margin-top:.3rem}
@media (min-width:960px){.letters{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,4vw,60px)}
.pinned--a{grid-column:1;grid-row:1 / span 2;margin-top:30px}
.pinned--b{grid-column:2;grid-row:1}
.pinned--c{grid-column:2;grid-row:2 / span 2}
.letters__note{grid-column:1;grid-row:3;justify-self:start;margin-left:8%}
}
.jcards{list-style:none;display:grid;gap:clamp(34px,3.4vw,44px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.jcard{position:relative;filter:drop-shadow(0 1px 0 rgba(43,33,24,.06)) drop-shadow(0 14px 14px rgba(43,33,24,.13));transition:transform .5s var(--ease)}
.jcard:hover{transform:translateY(-6px) rotate(-.4deg)}
.jcard__in{position:relative;display:flex;flex-direction:column;height:100%;background:var(--bg);padding:16px 16px 46px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),96% calc(100% - 4px),91% calc(100% - 10px),86% calc(100% - 2px),80% calc(100% - 9px),74% calc(100% - 3px),68% calc(100% - 11px),62% calc(100% - 4px),56% calc(100% - 9px),50% calc(100% - 1px),44% calc(100% - 8px),38% calc(100% - 3px),32% calc(100% - 10px),26% calc(100% - 4px),20% calc(100% - 9px),14% calc(100% - 2px),8% calc(100% - 8px),3% calc(100% - 3px),0 calc(100% - 10px))}
.jcard__img{margin:0 0 18px;padding:8px 8px 22px;background:var(--white);box-shadow:0 1px 0 rgba(43,33,24,.05),0 8px 16px -10px rgba(43,33,24,.35);transform:rotate(-1.2deg);transition:transform .6s var(--ease)}
.jcard:nth-child(2) .jcard__img{transform:rotate(1deg)}
.jcard:hover .jcard__img{transform:rotate(0)}
.jcard__img img{aspect-ratio:3 / 2;object-fit:cover;width:100%}
.jcard__cat,.jcard__meta,.jcard__title,.jcard__lede,.jcard__link{margin-inline:8px}
.jcard__cat{font:600 1.5rem/1 var(--font-hand);color:var(--primary-ink)}
.jcard__title{margin-top:.45rem;font-size:clamp(1.18rem,1.1rem + .3vw,1.32rem);line-height:1.25}
.jcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;margin-top:.65rem;font-size:.84rem;color:var(--muted)}
.jcard__meta .icon{width:1.05rem;height:1.05rem}
.jcard__lede{margin-top:.75rem;font-size:.96rem;line-height:1.6}
.jcard__link{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.1rem;font-weight:600;font-size:.96rem;line-height:1.35;color:var(--primary-ink);text-decoration:none}
.jcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.jcard__link .icon{width:1.15rem;height:1.15rem;flex:none;transition:transform .35s var(--ease)}
.jcard:hover .jcard__link{color:var(--ink)}
.jcard:hover .jcard__link .icon{transform:translateX(4px)}
.journal__all{margin-top:clamp(40px,4vw,56px);text-align:center}
@media (min-width:1000px){.jcards{grid-template-columns:repeat(3,1fr)}
}
.faq{border-top:1.5px solid var(--ink)}
.faq__item{border-bottom:1.5px dashed var(--line-strong)}
.faq__item summary{display:grid;grid-template-columns:26px 1fr 30px;align-items:center;gap:14px;min-height:44px;padding:20px 2px;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);font-weight:500;line-height:1.32;transition:color .25s}
.faq__item summary:hover h3,.faq__item[open] summary h3{color:var(--primary-ink)}
.faq__doodle{width:26px;height:26px;color:var(--primary);transition:transform .5s var(--ease)}
.faq__item[open] .faq__doodle{transform:rotate(-20deg) scale(1.08)}
.faq__plus{position:relative;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:var(--radius-sketch)}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%) rotate(-3deg);transition:transform .35s var(--ease)}
.faq__plus::after{transform:translate(-50%,-50%) rotate(87deg)}
.faq__item[open] .faq__plus::after{transform:translate(-50%,-50%) rotate(-3deg) scaleX(0)}
.faq__a{padding:0 2px 24px 40px}
.faq__a p{max-width:37em;color:var(--ink)}
.faq__a p + p{margin-top:.8rem}
.js .faq__item[open] .faq__a{animation:faqOpen .45s var(--ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:none}
}
.contact{display:grid;gap:clamp(64px,7vw,80px);align-items:center}
.contact__text{display:grid;gap:1.1rem;max-width:34em}
.contact__text .page-head{margin-bottom:.4rem}
.contact__lead{font-size:var(--fs-lead);line-height:1.55}
.contact__tips{padding:1.1rem 1.3rem 1.2rem;background:var(--bg);border-radius:var(--radius-card);box-shadow:var(--shadow-paper);transform:rotate(-.6deg)}
.contact__tips-title{font:600 1.42rem/1.15 var(--font-hand);color:var(--secondary);margin-bottom:.5rem}
.contact__tips ul{list-style:none;display:grid;gap:.25rem}
.contact__tips li{display:flex;align-items:center;gap:.55rem}
.contact__tips .icon{width:1.2rem;height:1.2rem;color:var(--secondary);stroke-width:2.4}
.envelope{--env-h:clamp(150px,22vw,220px);position:relative;width:100%;max-width:620px;margin:70px auto 0}
.envelope__back{position:absolute;left:0;right:0;bottom:0;height:calc(var(--env-h) + 26px);background:#E7CFA3;border-radius:6px;box-shadow:0 30px 50px -30px rgba(43,33,24,.5)}
.envelope__flap{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:calc(var(--env-h) * .62);background:linear-gradient(to top,#E2C795,#EBD6AE);clip-path:polygon(0 100%,50% 0,100% 100%)}
.envelope__card{position:relative;z-index:2;width:90%;margin:0 auto;background-color:var(--white);background-image:linear-gradient(to bottom,transparent 0 8px,var(--primary) 8px 11px,transparent 11px),repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(234,220,196,.55) 33px,rgba(234,220,196,.55) 34px);padding:34px clamp(16px,3vw,34px) calc(var(--env-h) + 18px);border-radius:3px;box-shadow:0 1px 0 rgba(43,33,24,.05),0 14px 30px -18px rgba(43,33,24,.4);text-align:center}
.envelope__q{font:600 clamp(1.5rem,1.25rem + 1vw,2.05rem)/1.12 var(--font-hand);color:var(--secondary)}
.envelope__mail{margin-top:.9rem;font:600 clamp(1.08rem,.62rem + 2.3vw,2.02rem)/1.2 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.envelope__mail a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--primary);text-decoration-thickness:2px;text-underline-offset:.2em}
.envelope__mail a:hover{color:var(--primary-ink)}
.envelope__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:1.4rem}
.copy-status{min-height:1.6em;margin-top:.7rem;font:600 1.25rem/1.2 var(--font-hand);color:var(--secondary)}
.envelope__pocket{position:relative;z-index:3;height:var(--env-h);margin-top:calc(-1 * var(--env-h));background-color:#F3DFB9;background-image:linear-gradient(to top right,transparent calc(50% - 1px),rgba(43,33,24,.09) 50%,transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),rgba(43,33,24,.09) 50%,transparent calc(50% + 1px));clip-path:polygon(0 0,50% 44%,100% 0,100% 100%,0 100%);border-radius:0 0 6px 6px;pointer-events:none}
.envelope__to{position:absolute;left:7%;bottom:16%;font:600 clamp(1.15rem,1rem + .8vw,1.6rem)/1 var(--font-hand);color:var(--muted);transform:rotate(-3deg)}
.stamp{position:absolute;right:7%;bottom:14%;display:grid;place-items:center;width:50px;height:58px;background:var(--white);outline:3px dotted #F3DFB9;outline-offset:-2px;transform:rotate(4deg);box-shadow:0 1px 3px rgba(43,33,24,.2)}
.stamp .icon{width:28px;height:28px;color:var(--primary)}
@media (min-width:980px){.contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(56px,6vw,96px)}
.envelope{margin-top:110px}
}
.site-footer{position:relative;overflow:hidden;background:var(--bg);padding:clamp(64px,7vw,96px) 0 34px;border-top:1px solid var(--line)}
.site-footer::after{content:"";position:absolute;right:-70px;bottom:-80px;width:300px;height:300px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(150,100,52,0) 54%,rgba(150,100,52,.1) 56.5%,rgba(150,100,52,.17) 58.5%,rgba(150,100,52,.06) 62%,rgba(150,100,52,0) 66%),radial-gradient(circle at 46% 52%,rgba(150,100,52,.05),rgba(150,100,52,0) 58%);transform:rotate(-14deg) scaleX(1.06)}
.site-footer__grid{display:grid;gap:40px 48px;position:relative;z-index:1}
.brand--footer{display:flex;margin:0 0 .9rem;padding:0;min-height:0}
.site-footer__about > p:not(.brand){max-width:30em;font-size:var(--fs-sm);color:var(--muted)}
.site-footer__mail{display:flex;align-items:center;gap:.5rem;margin-top:1rem !important;color:var(--ink) !important}
.site-footer__mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.site-footer__h{margin-bottom:.55rem;font:600 1.5rem/1 var(--font-hand);color:var(--primary-ink)}
.site-footer__nav ul{list-style:none;display:grid}
.site-footer__nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);text-decoration:none;font-size:var(--fs-sm);transition:color .2s,transform .3s var(--ease)}
.site-footer__nav a:hover{color:var(--primary-ink);transform:translateX(3px)}
.site-footer__all{font-weight:600}
.network-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.network-links a{display:inline-flex;align-items:center;gap:.55rem;min-height:42px;padding:.3rem .95rem;background:var(--white);color:var(--ink);text-decoration:none;font-size:.9rem;border:1px dashed var(--line-strong);border-radius:var(--radius-sketch);transition:transform .3s var(--ease),border-color .2s,color .2s}
.network-links a::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--secondary)}
.network-links a:hover{color:var(--primary-ink);border-color:var(--primary);transform:rotate(-1deg) translateX(2px)}
.site-footer__legal{position:relative;z-index:1;display:grid;gap:14px;margin-top:48px;padding-top:24px;font-size:.84rem;color:var(--muted)}
.site-footer__legal::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:2px;background:radial-gradient(circle,var(--line-strong) 1.1px,transparent 1.6px) 0 0 / 9px 2px repeat-x}
.site-footer__legal p{max-width:62em}
.site-footer__legal .site-footer__copy{max-width:none}
.site-footer__legal a{color:var(--muted)}
.site-footer__copy{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;color:var(--ink)}
.site-footer__end{font:600 1.8rem/1 var(--font-hand);color:var(--secondary);transform:rotate(-3deg)}
.site-footer__nav--cols ul{grid-template-columns:1fr 1fr;column-gap:20px}
@media (min-width:720px){.site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){.site-footer__nav--cols ul{grid-template-columns:1fr}
}
@media (min-width:1100px){.site-footer__grid{grid-template-columns:1.45fr .9fr 1.15fr .95fr}
}
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;list-style:none}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem}
.crumbs li + li::before{content:"\203A";color:var(--primary);font-weight:600}
.crumbs a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);text-decoration-color:var(--line-strong)}
.crumbs a:hover{color:var(--primary-ink)}
.crumbs [aria-current]{color:var(--ink)}
.mag-head{position:relative;padding:clamp(28px,4vw,48px) 0 clamp(52px,6vw,84px);background-image:var(--ruled);background-position:0 14px}
.mag-head h1{margin-top:clamp(20px,3vw,36px);font-size:clamp(2.3rem,1.3rem + 4vw,4.3rem);line-height:1.04;letter-spacing:-.02em;font-variation-settings:"opsz" 144;text-wrap:balance}
.mag-head h1 .hand{display:block;margin-bottom:.3rem;font-size:.48em;color:var(--primary-ink);letter-spacing:0}
.mag-intro{display:grid;gap:1.05rem;margin-top:1.6rem;max-width:40em}
.mag-intro p:first-child{font-size:var(--fs-lead);line-height:1.55}
.mag-list{padding-block:clamp(56px,6vw,96px);background:var(--surface);position:relative}
.progress{position:fixed;top:0;left:0;right:0;z-index:60;height:4px;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transform-origin:0 50%;transform:scaleX(var(--p,0));border-radius:0 3px 3px 0}
.article-head{padding:clamp(26px,4vw,44px) 0 clamp(36px,4vw,52px);background-image:var(--ruled);background-position:0 14px}
.article-head__in{max-width:900px}
.article-head__cat{display:inline-flex;align-items:center;gap:.4rem;margin-top:clamp(22px,3vw,34px);font:600 1.7rem/1 var(--font-hand);color:var(--primary-ink);transform:rotate(-2deg)}
.article-title{margin-top:.7rem;font-size:clamp(2.05rem,1.25rem + 3.2vw,3.7rem);line-height:1.06;letter-spacing:-.02em;font-variation-settings:"opsz" 144;text-wrap:balance}
.article-head__lede{margin-top:1.3rem;max-width:38em;font-size:var(--fs-lead);line-height:1.55}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-top:1.6rem;font-size:.9rem;color:var(--muted)}
.article-meta > span,.article-meta > a{display:inline-flex;align-items:center;gap:.45rem}
.article-meta .icon{width:1.15rem;height:1.15rem}
.article-meta__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--white);box-shadow:0 0 0 1.5px var(--line-strong)}
.article-meta__author{color:var(--ink);font-weight:600;text-decoration:none}
.article-cover{--rot:-1deg;max-width:1040px;margin:0 auto;padding:12px 12px 12px}
.article-cover:hover{--rot:0deg}
.article-cover figcaption{font-size:1.3rem}
.article-body{padding:clamp(48px,6vw,88px) 0 var(--space)}
.article-layout{display:grid;gap:40px}
.toc{padding:18px 20px;background:var(--surface);border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--line)}
.toc__title{margin-bottom:.5rem;font:600 1.5rem/1 var(--font-hand);color:var(--secondary)}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc a{display:grid;grid-template-columns:1.7rem 1fr;gap:.35rem;padding:.4rem .3rem .4rem 0;min-height:40px;align-items:baseline;color:var(--muted);font-size:.9rem;line-height:1.38;text-decoration:none;border-radius:4px;transition:color .2s,background .3s}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font:600 .8rem/1.38 var(--font-display);color:var(--primary-ink)}
.toc a:hover{color:var(--ink)}
.toc a.is-active,.toc a[aria-current="true"]{color:var(--ink);font-weight:600;background:linear-gradient(100deg,transparent 0 1.7rem,rgba(242,193,78,.42) 1.7rem,rgba(242,193,78,.3) 96%,transparent)}
.prose{min-width:0;font-size:clamp(1.06rem,1rem + .25vw,1.16rem);line-height:1.78}
.prose > * + *{margin-top:1.15em}
.prose h2{position:relative;margin-top:2.5em;font-size:clamp(1.6rem,1.25rem + 1.3vw,2.2rem);line-height:1.14;letter-spacing:-.015em;scroll-margin-top:calc(var(--header-h) + 28px);text-wrap:balance}
.prose h2::before{content:"";display:block;width:54px;height:10px;margin-bottom:.7rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 10'%3E%3Cpath d='M2 6.4C16 3 34 3 52 5' fill='none' stroke='%23D9480F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain}
.prose h3{margin-top:1.9em;font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);line-height:1.25;scroll-margin-top:calc(var(--header-h) + 28px)}
.prose h2 + *,.prose h3 + *{margin-top:.7em}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:.55em}
.prose ul > li{position:relative;padding-left:1.6em}
.prose ul > li::before{content:"";position:absolute;left:.25em;top:.68em;width:.5em;height:.5em;border-radius:55% 45% 60% 40% / 45% 55% 45% 55%;background:var(--primary)}
.prose ol{counter-reset:item}
.prose ol > li{position:relative;padding-left:2.2em;counter-increment:item}
.prose ol > li::before{content:counter(item) ".";position:absolute;left:0;top:-.08em;font:700 1.5em/1.2 var(--font-hand);color:var(--primary-ink)}
.prose a{font-weight:550}
.prose blockquote{margin:2em 0;padding:.2em 0 .2em 1.4em;border-left:3px solid var(--primary);font:italic 420 1.24em/1.5 var(--font-display)}
.prose blockquote p + p{margin-top:.6em}
.prose blockquote cite,.prose blockquote footer{display:block;margin-top:.6rem;font:normal 600 1.15rem/1.2 var(--font-hand);color:var(--secondary)}
.table-wrap{margin:2em 0;overflow-x:auto;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-paper),inset 0 0 0 1px var(--line);-webkit-overflow-scrolling:touch}
.prose table{width:100%;min-width:540px;border-collapse:collapse;font-size:.94rem;line-height:1.5}
.prose caption{padding:.9rem 1rem .2rem;text-align:left;font:600 1.35rem/1.1 var(--font-hand);color:var(--secondary)}
.prose th{padding:.85rem 1rem;text-align:left;vertical-align:bottom;background:var(--surface);font-weight:650;border-bottom:1.5px solid var(--line-strong)}
.prose td{padding:.8rem 1rem;vertical-align:top;border-bottom:1px dashed var(--line)}
.prose tr:last-child td{border-bottom:0}
.checklist{display:grid;gap:.6em}
.prose .checklist > li{padding-left:2.2em}
.prose .checklist > li::before{left:0;top:.28em;width:1.25em;height:1.25em;background:var(--white);border:1.8px solid var(--ink);border-radius:4px 2px 5px 2px / 2px 5px 2px 4px}
.prose .checklist > li::after{content:"";position:absolute;left:.18em;top:.2em;width:1.2em;height:1.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.9c1.6 1.4 3 3 4.3 4.8 2.9-4.6 6.3-8.6 10.4-12' fill='none' stroke='%23D9480F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
.callout{position:relative;margin:2.2em 0 !important;padding:1.3rem 1.4rem 1.35rem;border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-paper);font-size:.98em}
.callout > * + *{margin-top:.6em}
.callout__label{display:flex;align-items:center;gap:.45rem;font:600 1.5rem/1 var(--font-hand)}
.callout__label .icon{width:1.4rem;height:1.4rem}
.callout--conseil{background:var(--postit-green);transform:rotate(-.35deg)}
.callout--conseil .callout__label{color:var(--secondary)}
.callout--retenir{background:var(--postit-yellow);transform:rotate(.3deg)}
.callout--retenir .callout__label{color:var(--primary-ink)}
.callout--erreur{background:#FCEBE1;box-shadow:var(--shadow-paper),inset 4px 0 0 var(--primary)}
.callout--erreur .callout__label{color:var(--primary-ink)}
.approach{position:relative;margin:2.6em 0 !important;padding:1.6rem 1.5rem 1.6rem;display:grid;grid-template-columns:76px 1fr;gap:1.1rem;align-items:start;background:var(--surface);border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-paper)}
.approach::after{content:"";position:absolute;top:-6px;right:22px;width:26px;height:44px;background:var(--btn);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.approach__photo{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:var(--shadow-paper)}
.approach__label{margin-bottom:.35rem;padding-right:36px;font:600 1.55rem/1.1 var(--font-hand);color:var(--primary-ink)}
.approach__body > * + *{margin-top:.7em}
.approach__body p{font-size:.98em}
.author-box{display:grid;gap:1.4rem;align-items:center;margin-top:clamp(48px,5vw,72px);padding:clamp(22px,3vw,34px);background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-paper)}
.author-box__photo{width:132px;margin:0;padding:8px 8px 26px;background:var(--white);box-shadow:var(--shadow-paper);transform:rotate(-3deg)}
.author-box__photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.author-box__name{font:600 1.7rem/1 var(--font-hand);color:var(--secondary)}
.author-box__bio{margin-top:.5rem;font-size:.98rem;line-height:1.62}
.author-box__links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:.8rem}
.related{margin-top:clamp(56px,6vw,88px)}
.related__title{margin-bottom:clamp(28px,3vw,40px);font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem)}
.related .jcards{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.article-faq{margin-top:2.6em}
.article-faq .faq__item summary h3{margin:0;font-size:1.12rem}
@media (min-width:640px){.author-box{grid-template-columns:132px 1fr}
}
@media (min-width:1100px){.article-layout{grid-template-columns:var(--mcol) minmax(0,var(--read)) minmax(0,1fr);column-gap:var(--cgap)}
.toc{position:sticky;top:calc(var(--header-h) + 28px);align-self:start;max-height:calc(100vh - var(--header-h) - 56px);overflow-y:auto}
.related .jcards{grid-template-columns:repeat(2,1fr)}
}
.page--notfound{padding-top:clamp(48px,6vw,96px)}
.notfound{display:grid;gap:56px;align-items:center}
.notfound h1{font-size:clamp(2.2rem,1.3rem + 3.8vw,4rem);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"opsz" 144;text-wrap:balance}
.notfound__text > * + *{margin-top:1.1rem}
.notfound__lead{font-size:var(--fs-lead);line-height:1.55;max-width:34em}
.notfound__links{list-style:none;display:grid;gap:12px;margin-top:1.4rem !important;max-width:34em}
.notfound__links a{display:grid;grid-template-columns:28px 1fr;gap:.8rem;align-items:start;padding:14px 18px;background:var(--white);color:var(--ink);text-decoration:none;border-radius:var(--radius-card);box-shadow:var(--shadow-paper);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.notfound__links a:hover{transform:translateX(4px) rotate(-.4deg);box-shadow:var(--shadow-lift)}
.notfound__links .icon{width:26px;height:26px;color:var(--primary);margin-top:.1rem}
.notfound__links strong{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--ink)}
.notfound__links a:hover strong{color:var(--primary-ink)}
.notfound__links span{font-size:.93rem;color:var(--muted)}
.notfound__links strong + *{display:block}
.notfound__note{font:600 1.55rem/1.2 var(--font-hand);color:var(--secondary);transform:rotate(-2deg)}
.torn{position:relative;display:grid;place-items:center;gap:6px;max-width:380px;margin:0 auto;padding:56px 30px 70px;background:var(--white);box-shadow:var(--shadow-paper);transform:rotate(3deg);clip-path:polygon(0 4%,6% 0,14% 3%,22% 0,30% 2%,38% 0,46% 3%,54% 0,62% 2%,70% 0,78% 3%,86% 0,94% 2%,100% 0,100% 100%,0 100%)}
.torn__num{position:relative;z-index:1;font:650 clamp(4.4rem,3rem + 6vw,7.4rem)/1 var(--font-display);letter-spacing:-.03em;font-variation-settings:"opsz" 144}
.torn__line{font:600 1.7rem/1 var(--font-hand);color:var(--primary-ink)}
.torn__ring{position:absolute;left:12%;top:16%;width:76%;height:48%;overflow:visible}
.torn__ring path{fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linecap:round}
@media (min-width:900px){.notfound{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
@media (min-width:760px){.topnav{display:block}
.site-header__in{gap:16px}
}
@media (max-width:380px){.brand__sub{display:none}
}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .dogear[data-reveal]{transform:translateY(26px) rotate(var(--r))}
.js .dogear[data-reveal].is-in{transform:rotate(var(--r));transition-delay:var(--d,0ms),var(--d,0ms)}
.js .dogear[data-reveal].is-in:hover{transform:rotate(0) translateY(-3px);transition-delay:0s}
.js .fiche[data-reveal]{transform:translateY(26px) rotate(calc(var(--r) * 3))}
.js .fiche[data-reveal].is-in{transform:rotate(var(--r))}
.js .fiche[data-reveal].is-in:hover{transform:rotate(0) translateY(-5px);transition-delay:0s}
.js .pinned[data-reveal]{transform:translateY(-24px) rotate(calc(var(--r,-1deg) * 2));transform-origin:40px 0}
.js .pinned[data-reveal].is-in{transform:rotate(var(--r,-1deg))}
.js .pinned[data-reveal].is-in:hover{transform:rotate(0) translateY(-3px);transition-delay:0s}
.js .jcard[data-reveal].is-in:hover{transform:translateY(-6px) rotate(-.4deg);transition-delay:0s}
.js .letter[data-reveal]{transform:translateY(30px) rotate(-1deg)}
.js .letter[data-reveal].is-in{transform:rotate(-.5deg)}
.js .strip[data-reveal]{transform:translateY(20px) rotate(-3deg)}
.js .strip[data-reveal].is-in{transform:rotate(-.6deg)}
.js .polaroid[data-reveal]{opacity:0;transform:translateY(26px) rotate(calc(var(--rot) - 7deg));transition:opacity .9s var(--ease),transform 1.3s var(--ease),box-shadow .9s var(--ease)}
.js .polaroid[data-reveal].is-in{opacity:1;transform:rotate(var(--rot))}
.js .postit[data-reveal="postit"]{opacity:0;transform:rotate(var(--r));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.js .postit[data-reveal="postit"].is-in{opacity:1;animation:stick .75s var(--ease) var(--d,0ms) both}
.js .postit[data-reveal="postit"].is-done{animation:none}
@keyframes stick{0%{opacity:0;transform:translateY(-18px) scale(1.14) rotate(calc(var(--r) + 6deg));box-shadow:0 30px 40px -18px rgba(43,33,24,.35)}
55%{opacity:1;transform:translateY(2px) scale(.98) rotate(calc(var(--r) - 1deg))}
100%{opacity:1;transform:rotate(var(--r))}
}
.js .envelope[data-reveal] .envelope__card{transform:translateY(70px);transition:transform 1.2s var(--ease) .35s}
.js .envelope[data-reveal].is-in .envelope__card{transform:none}
.js .draw path{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur,1.1s) var(--ease-draw) var(--dd,.15s)}
.js .draw.is-in path{stroke-dashoffset:0}
.js .hero .scribble__line{--dur:1.3s;--dd:.55s}
.js .hero__arrow{--dur:.9s;--dd:1.2s}
.js .circled__ring{--dur:1s;--dd:.1s}
.js .spread__arrows svg:nth-child(2){--dd:.45s}
.js .spread__arrows svg:nth-child(3){--dd:.75s}
.js .hl{background-size:0 58%}
.js .hl.is-in{background-size:100% 58%}
.js [data-words]:not(.is-split){opacity:0}
.js [data-words] .w{opacity:0;transition:opacity .55s ease calc(var(--i) * 55ms + 150ms)}
.js [data-words].is-in .w{opacity:1}
.article-main{min-width:0}
.mag-head,.article-head{position:relative;overflow-x:clip}
.mag-head::before,.article-head::before{content:"";position:absolute;top:0;bottom:0;width:2px;left:calc(max(var(--gutter),calc((100% - var(--sheet)) / 2)) - 14px);background:var(--primary);opacity:.45}
.prose > .intro::first-letter{float:left;margin:.1em .12em 0 0;font:600 3.6em/.8 var(--font-display);color:var(--primary)}
.side-note{font:500 1.48rem/1.16 var(--font-hand);color:var(--secondary);padding-left:16px;border-left:2px solid var(--secondary);transform:rotate(-1deg);transform-origin:left center}
.code-line{padding:.85rem 1rem;background:var(--white);border:1.5px dashed var(--line-strong);border-radius:var(--radius-card)}
.prose code{font:500 .8em/1.65 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}
.prose blockquote > p:first-child{text-wrap:pretty}
.article-head .crumbs,.mag-head .crumbs{position:relative;z-index:1}
.article-cover-wrap{position:relative;z-index:1;margin-top:clamp(-18px,-1vw,-8px)}
.article-cover img{aspect-ratio:3 / 2;object-fit:cover}
.toc nav{display:block}
.related .jcard__title{font-size:clamp(1.1rem,1.04rem + .25vw,1.22rem)}
@media (min-width:1380px){.prose{position:relative}
.prose > .side-note{position:absolute;right:calc(-1 * (var(--cgap) + 176px));width:176px;margin-top:.15em;padding:0;border-left:0;transform:rotate(-4deg);transform-origin:left top}
.prose > .side-note::before{content:"";display:block;width:52px;height:20px;margin:0 0 4px -4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 20'%3E%3Cpath d='M50 5C37 14 21 16 5 11m0 0 7-6m-7 6 6 6' fill='none' stroke='%232F6F5E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
}
@media (max-width:599px){.table-wrap{overflow:visible;background:none;box-shadow:none;border-radius:0}
.prose table{min-width:0;font-size:.95rem}
.prose caption{display:block;padding:0 0 .6rem}
.prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prose thead tr,.prose thead th{display:block;width:1px;padding:0}
.prose tbody,.prose tr,.prose td{display:block}
.prose tbody{display:grid;gap:14px}
.prose tbody tr{padding:.75rem 1rem .8rem;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-paper),inset 0 0 0 1px var(--line)}
.prose td{padding:.35rem 0;border-bottom:1px dashed var(--line)}
.prose tr td:last-child{border-bottom:0}
.prose td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.05rem;font:600 1.12rem/1.15 var(--font-hand);color:var(--secondary)}
.approach{grid-template-columns:58px 1fr;gap:.9rem 1rem;padding:1.4rem 1.15rem}
.approach > div{display:contents}
.approach__photo{width:58px;height:58px}
.approach__label{grid-column:2;align-self:center;margin:0}
.approach__body{grid-column:1 / -1}
}
.mag-head__grid{display:grid;gap:56px;align-items:start}
.mag-head__art{position:relative;width:100%;max-width:420px;margin:0 auto;padding:8px 0 0}
.mag-head__polaroid{--rot:2.4deg;padding-bottom:40px}
.mag-head__polaroid figcaption{text-align:right;padding-right:10px}
.mag-head__polaroid:hover{--rot:.8deg}
.mag-head__postit{--r:-3deg;position:relative;z-index:2;width:min(270px,82%);margin:-22px 0 0 -2%;padding:18px 20px 14px}
.mag-cats{list-style:none;display:grid}
.mag-cats a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 .8rem;min-height:44px;padding:.4rem 0;color:var(--ink);text-decoration:none;border-bottom:1px dashed rgba(43,33,24,.2)}
.mag-cats li:last-child a{border-bottom:0}
.mag-cats__cat{font:600 1.06rem/1.25 var(--font-display);transition:color .2s}
.mag-cats__date{font-size:.8rem;color:var(--muted)}
.mag-cats a:hover .mag-cats__cat{color:var(--primary-ink)}
.mag-list .page-head{margin-bottom:clamp(32px,4vw,52px)}
.mag-note{max-width:640px;margin:clamp(48px,5vw,72px) auto 0;padding:22px clamp(18px,3vw,30px);background:var(--bg);border-radius:var(--radius-card);box-shadow:var(--shadow-paper);transform:rotate(-.5deg);text-align:center}
.mag-note__title{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.45rem;font:600 1.6rem/1.1 var(--font-hand);color:var(--secondary)}
.mag-note a{overflow-wrap:anywhere}
@media (min-width:1000px){.mag-head__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(48px,6vw,88px)}
.mag-head__art{margin-top:clamp(48px,5vw,80px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important}
.js [data-reveal],.js [data-words],.js [data-words] .w{opacity:1 !important}
.js [data-reveal]:not(.polaroid):not(.postit):not(.dogear):not(.fiche):not(.pinned):not(.letter):not(.strip){transform:none !important}
.js .draw path{stroke-dashoffset:0 !important}
.js .hl{background-size:100% 58% !important}
.js .envelope .envelope__card{transform:none !important}
.drawer{transform:translateX(102%)}
.drawer.is-open{transform:none}
}
@media print{.site-header,.drawer,.drawer-backdrop,.progress,.folio{display:none !important}
.js [data-reveal],.js [data-words] .w{opacity:1 !important;transform:none !important}
}