/* ============================================================================= Daijiro Kabata — site VARIANT 3 (test_newsite3) Design challenge inspired by ishosei-shibou.com: warm, playful, ILLUSTRATED. Cream/peach pastel full-width bands, scattered organic blobs, wavy dividers, rounded-gothic type, soft rounded cards, flat SVG illustration hero (no photos). Same content/structure/data as variant 2; same JS hooks (.nav-links, .filterable…). ============================================================================= */ :root { /* warm pastel surfaces */ --bg: #fdf7ea; /* warm cream page */ --band-cream:#fdf6e4; --band-white:#fffdf8; --band-peach:#fbe7db; --band-mint: #e6f3ee; --band-sky: #e8f1f7; --band-deep: #20413f; /* deep teal-green for contact */ --ink: #2f2a24; /* headings */ --text: #4a443d; /* body */ --muted: #8a7f72; /* warm taupe (AA on cream) */ --hairline: #efe5d2; --hairline-2:#e3d6bf; /* playful accents (used as blobs + small accents) */ --teal: #34b3ab; --teal-ink: #1f857e; /* links / teal text — AA */ --teal-deep: #1c726c; --teal-tint: #d6efec; --teal-tint2:#bfe8e3; --coral: #f0987a; --coral-ink: #cf5a3c; /* coral text — AA */ /* extra crayon-palette swatches for varied section-number badges */ --leaf: #7cb867; /* picture-book leaf green */ --plum: #b07ab8; /* soft lavender / plum */ --pumpkin: #f0834b; /* warm pumpkin */ --sky: #6ec6d6; /* gentle sky blue-teal */ --sage: #9ec99f; --yellow: #f5c84d; --sky: #86b9dd; --gold-ink: #9a6a16; --radius: 22px; --radius-sm: 14px; /* matte / flat — borders define cards; shadows are only a whisper of separation */ --shadow: 0 2px 10px rgba(120,95,60,.07); --shadow-sm: 0 1px 4px rgba(120,95,60,.05); --shadow-pop:0 6px 20px rgba(120,95,60,.10); --maxw: 1120px; --nav-h: 66px; --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Quicksand", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif; --fs-base: 1.0625rem; } * , *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* NB: `overflow-x:clip`/`hidden` is NOT used on / to tame the decorative bleed. `clip` on the root does NOT propagate to the viewport (per CSS Overflow 3), and `hidden` on creates a scroll container that breaks the sticky header. Instead each full-width `.band` clips its own horizontal bleed (see `.band { overflow-x: clip }` below) — bands span the viewport, so clipping there == clipping at the screen edge, while the sticky header (which lives outside any band) keeps following the scroll. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--sans); font-size: var(--fs-base); line-height: 1.78; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* clip (NOT hidden) — clips edge bleed without creating a scroll container, so the sticky header still follows */ } /* the SVG carrying the crayon filter definitions is invisible, but inline rendering gives it a 1–2px baseline gap above the sticky header. Take it out of flow. */ .crayon-defs { position: absolute; width: 0; height: 0; pointer-events: none; } img { max-width: 100%; display: block; } a { color: var(--teal-ink); } a:hover { color: var(--teal-deep); } h1, h2, h3 { font-family: var(--round); color: var(--ink); font-weight: 700; line-height: 1.4; } :lang(ja) { line-height: 1.92; letter-spacing: .02em; } /* a11y */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 12px 0; font-size: .9rem; text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; } .lang-ja { display: none; } html[data-lang="ja"] .lang-ja { display: revert; } html[data-lang="ja"] .lang-en { display: none; } /* reading progress — a thick crayon stroke streaked across the top of the page. Slightly taller and irregular so it reads as drawn-on rather than a flat UI bar. */ .progress { position: fixed; inset: 0 0 auto 0; height: 7px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--coral), var(--pumpkin) 35%, var(--yellow) 60%, var(--teal)); filter: url(#crayon-fill); z-index: 120; will-change: transform; border-radius: 0 4px 4px 0; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { @keyframes _grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .progress { animation: _grow auto linear; animation-timeline: scroll(root); } } } /* ============================================================================= STICKY HEADER (rounded, playful) ============================================================================= */ .topbar { position: sticky; top: 0; z-index: 100; width: 100%; background: rgba(253,247,234,.86); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border-bottom: 2px solid var(--hairline); } .topbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); min-height: 60px; display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; } .brand { font-family: var(--round); font-weight: 700; font-size: 1.08rem; color: var(--ink); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .brand .brand-sub { color: var(--ink); font-weight: 700; font-size: .78em; opacity: .75; } .nav-links { display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { position: relative; font-family: var(--sans); color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; flex-shrink: 0; transition: color .18s; } /* hover: faint crayon underline so the cue stays in the hand-drawn voice */ .nav-links a:hover { color: var(--teal-ink); } .nav-links a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 4px; background: var(--teal-ink); border-radius: 3px; filter: url(#crayon-sm); opacity: 0; transform: scaleX(.4); transform-origin: center; transition: opacity .18s, transform .22s cubic-bezier(.22,1,.36,1); pointer-events: none; } .nav-links a:hover::after { opacity: .55; transform: scaleX(.85); } .nav-links a[aria-current] { color: var(--crayon-ink); } .nav-links a[aria-current]::after { opacity: 1; transform: scaleX(1); background: var(--teal-ink); } .nav-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--sans); font-size: .82rem; font-weight: 700; cursor: pointer; background: #fff; color: var(--ink); border: 2px solid var(--hairline-2); border-radius: 999px; padding: 6px 13px; line-height: 1; transition: all .18s; } .icon-btn:hover { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-deep); } .icon-btn svg { width: 15px; height: 15px; } .nav-menu-btn { display: none; } .lang-toggle { min-width: 66px; justify-content: center; letter-spacing: 0; } .lang-toggle span { letter-spacing: 0; } /* ============================================================================= ILLUSTRATED HERO ============================================================================= */ .hero3 { position: relative; width: 100%; overflow: hidden; background: var(--band-cream); min-height: clamp(400px, 56vh, 540px); display: flex; align-items: center; } /* flat geometric accents — solid matte fills, NO gradient, NO shadow */ .hero3-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero3-deco .d { position: absolute; aspect-ratio: 1; border-radius: 50%; } .hero3-deco .d1 { width: clamp(230px, 30vw, 390px); right: -6%; top: -24%; background: var(--teal-tint); } /* big pale-teal disc, bleeds off top-right */ .hero3-deco .d2 { width: clamp(120px, 14vw, 180px); right: 8%; bottom: -18%; background: #f7dccb; } /* pale peach disc, bleeds off bottom */ .hero3-deco .d3 { width: clamp(38px, 5vw, 60px); right: 25%; top: 28%; background: var(--yellow); } /* solid butter dot */ .hero3-deco .d4 { width: clamp(120px, 16vw, 200px); right: 4%; top: 34%; background: transparent; /* flat coral ring (outline only) */ border: clamp(9px, 1.3vw, 15px) solid var(--coral); opacity: .55; } .hero3-inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 5vw, 3rem); } .hero3-text { max-width: 600px; } .hero3 h1 { font-family: var(--round); color: var(--ink); font-size: clamp(2.25rem, 5.6vw, 3.75rem); margin: 0 0 .55rem; line-height: 1.16; letter-spacing: -.018em; } .hero3 h1 .post { font-size: .42em; font-weight: 700; color: var(--teal-deep); } .hero3 .hero-sub { font-family: var(--round); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; margin: .3rem 0 .1rem; color: var(--coral-ink); } .hero3 .hero-org { font-family: var(--sans); font-size: clamp(.92rem, 1.6vw, 1.02rem); color: var(--text); margin: .2rem 0 0; } .hero3 .hero-affil2 { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin: .2rem 0 0; } /* hero quicklinks: chunky hand-coloured "crayon fill" pucks — no outline, each pill gets a wavy organic bean shape, a saturated fill, plus two stacked grain washes (filter:#crayon-fill on ::before + a streaky ::after wash blended over) so the colour reads as waxy crayon coloured into a paper cell, not flat ink. */ .hero3 .hero-quicklinks { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; } .hero3 .hero-quicklinks a { position: relative; overflow: hidden; font-family: var(--sans); font-size: .88rem; font-weight: 800; text-decoration: none; color: #fff; padding: .55rem 1.15rem; border: 0; background: var(--teal); transition: transform .2s, filter .2s; } /* primary grain layer: punchy crayon dot/scuff texture INSIDE the fill */ .hero3 .hero-quicklinks a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255, 250, 240, .35); filter: url(#crayon-fill); mix-blend-mode: soft-light; opacity: .95; } /* secondary streak layer: darker waxy streaks running across the shape */ .hero3 .hero-quicklinks a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(0, 0, 0, .18); filter: url(#crayon-fill); mix-blend-mode: multiply; opacity: .6; } /* keep text above both grain layers */ .hero3 .hero-quicklinks a > *, .hero3 .hero-quicklinks a { /* the text node */ } .hero3 .hero-quicklinks a > * { position: relative; z-index: 2; } /* wavier bean shapes — ratios pushed to 70/30 / 65/35 so each puck looks asymmetrically squished, not symmetric */ .hero3 .hero-quicklinks a:nth-child(1) { background: var(--teal); border-radius: 65% 35% 58% 42% / 48% 62% 38% 52%; } .hero3 .hero-quicklinks a:nth-child(2) { background: var(--coral); border-radius: 38% 62% 42% 58% / 60% 38% 62% 40%; } .hero3 .hero-quicklinks a:nth-child(3) { background: var(--leaf); border-radius: 60% 40% 65% 35% / 38% 60% 40% 62%; } .hero3 .hero-quicklinks a:nth-child(4) { background: var(--yellow); color: #5a4410; border-radius: 42% 58% 38% 62% / 65% 35% 58% 42%; } .hero3 .hero-quicklinks a:nth-child(5) { background: var(--pumpkin); border-radius: 55% 45% 60% 40% / 42% 58% 40% 62%; } .hero3 .hero-quicklinks a:hover { transform: translateY(-2px) rotate(-1.2deg); filter: brightness(.94) saturate(1.08); } @media (max-width: 860px) { /* on narrow viewports the quicklinks were brushing the very bottom of the hero — keep a comfortable floor so the giraffe + buttons each have room */ /* keep the base min-height (240–440px) so the hero stays compact and the giraffe stays close to the header. just give the buttons real breathing space below — !important to beat the later non-media .hero3-inner rule. */ .hero3-inner { padding: clamp(1.8rem, 7vw, 2.6rem) clamp(1.2rem, 5vw, 1.6rem) clamp(3rem, 8vw, 4.5rem) !important; } .hero3-text { max-width: none; } /* keep only the edge-bleed discs on small screens so text stays clear */ .hero3-deco .d3, .hero3-deco .d4 { display: none; } .hero3-deco .d1 { right: -16%; top: -14%; opacity: .85; } .hero3-deco .d2 { right: -10%; bottom: -12%; } } /* ============================================================================= ORGANIC BLOBS (decorative) ============================================================================= */ .blob { position: absolute; z-index: 0; pointer-events: none; } .blob svg { width: 100%; height: 100%; display: block; } .blob-teal svg { fill: var(--teal-tint2); } .blob-peach svg { fill: #f9d4c2; } .blob-sage svg { fill: #cfe6cf; } .blob-yellow svg { fill: #fae6ad; } .blob-sky svg { fill: #cfe3f1; } /* ============================================================================= FULL-WIDTH BANDS + wavy feel ============================================================================= */ .band { position: relative; width: 100%; padding: clamp(3.4rem, 6.5vw, 5.5rem) 0; overflow-x: clip; /* clip decorative blob bleed at the screen edge w/o breaking sticky; overflow-y stays visible so the wavy divider shows */ } .band--1 { background: var(--band-cream); } .band--2 { background: var(--band-peach); } .band--3 { background: var(--band-mint); } .band--deep { background: var(--band-deep); color: #e7efed; } /* wavy divider at the TOP of each band: previous band's colour dripping DOWN into the current band, with wavy bottom edge. Sits at top:0 of the band itself (inside its own painting order — never covered by the next band). */ .band::before { content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 30px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V17 C1200,1 960,33 720,21 C470,9 240,-1 0,19 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V17 C1200,1 960,33 720,21 C470,9 240,-1 0,19 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; z-index: 1; pointer-events: none; display: block; } /* color = PREVIOUS band's colour, chosen via the adjacent-sibling selector */ .band--yellow + .band::before { background: #f8df97; } .band--1 + .band::before { background: var(--band-cream); } .band--2 + .band::before { background: var(--band-peach); } .band--3 + .band::before { background: var(--band-mint); } .band--deep + .band::before { background: var(--band-deep); } /* Hero → 01 boundary: no wave divider (flat transition). */ #about::before { display: none; } /* === Per-section wave variations === each band boundary picks a different silhouette so the dividers don't feel like a single repeating motif. */ .band:nth-of-type(5n+3)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V22 C1100,4 920,38 720,25 C460,12 250,2 0,22 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V22 C1100,4 920,38 720,25 C460,12 250,2 0,22 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; } .band:nth-of-type(5n+4)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V14 C1200,8 960,18 720,14 C480,10 240,20 0,12 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V14 C1200,8 960,18 720,14 C480,10 240,20 0,12 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; } .band:nth-of-type(5n+5)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V19 C1100,-2 720,33 360,21 C200,15 50,23 0,17 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V19 C1100,-2 720,33 360,21 C200,15 50,23 0,17 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; } .band:nth-of-type(5n+1)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V16 C1300,4 1080,28 880,16 C680,4 480,28 240,14 C120,8 40,20 0,16 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V16 C1300,4 1080,28 880,16 C680,4 480,28 240,14 C120,8 40,20 0,16 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; } /* footer wave: contact's deep colour dripping down into the yellow footer */ .site-footer { position: relative; } .site-footer::before { content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 30px; background: var(--band-deep); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V17 C1200,1 960,33 720,21 C470,9 240,-1 0,19 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V17 C1200,1 960,33 720,21 C470,9 240,-1 0,19 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; z-index: 1; display: block; } /* faint scattered organic blobs (decorative, behind content) — primary blob via .band::after. Bean-stretched border-radius (width ≠ height in the radius) gives them an elastic squish rather than a uniform round. */ .band::after { content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: .28; width: 260px; height: 180px; border-radius: 65% 35% 55% 45% / 45% 65% 35% 55%; } .band:nth-of-type(odd)::after { right: -64px; top: 12%; background: var(--teal-tint2); } .band:nth-of-type(even)::after { left: -72px; bottom: 10%; background: #f9d4c2; width: 240px; height: 200px; border-radius: 35% 65% 45% 55% / 60% 40% 55% 45%; } .band:nth-of-type(3n)::after { background: #d7ecd0; width: 280px; height: 170px; border-radius: 55% 45% 70% 30% / 40% 60% 35% 65%; } .band:nth-of-type(4n)::after { left: -72px; right: auto; top: 22%; bottom: auto; background: #fae6ad; width: 230px; height: 200px; border-radius: 45% 55% 35% 65% / 60% 40% 65% 35%; } .band--deep::after { opacity: .18; background: #5fb6b3; } /* Contact section: suppress the band's blob entirely */ #contact::after { content: none; } /* secondary blobs via .band-inner — appear inside the content column so each band gets at least 2-3 visible accents. z-index:-1 puts them behind the content while staying above the band background. */ /* Secondary blob — uses only ::before of band-inner (::after is now used as the downward wave divider). */ .band-inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: .22; width: 200px; height: 240px; border-radius: 35% 65% 45% 55% / 70% 30% 65% 35%; background: var(--teal-tint); left: -120px; top: 55%; } /* rotate the colour/position around so adjacent bands don't repeat */ .band:nth-of-type(even) .band-inner::before { background: #c5e7e0; left: auto; right: -120px; top: 38%; } .band:nth-of-type(3n) .band-inner::before { background: #f8df97; } .band:nth-of-type(4n) .band-inner::before { background: #f9d4c2; } /* .band-inner::after intentionally not used — the wave divider now lives on .band::before of the NEXT band, which keeps it in the correct paint order. */ /* a few sections read better with just the single primary blob — suppress the secondary blob there (the wave divider stays) */ #about .band-inner::before, #news .band-inner::before, #service .band-inner::before, #contact .band-inner::before { content: none; } /* Publications is content-dense and visually flat — give the secondary blob extra prominence. ::after stays as the downward wave divider. */ #publications .band-inner::before { width: 260px; height: 320px; border-radius: 45% 55% 30% 70% / 60% 40% 65% 35%; background: var(--teal-tint2); opacity: .24; left: -110px; top: 18%; } /* a third blob — moved from above-the-title to a lower-left accent so the topmost blob now lives further down on the left side of Publications */ #publications .sec-head { position: relative; } #publications .sec-head::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: .2; width: 200px; height: 240px; border-radius: 60% 40% 55% 45% / 35% 65% 40% 60%; background: #fae6ad; left: -8%; top: 40rem; } /* warm honey band (footer-colour family) for the About / Research Interests section */ .band--yellow { background: #f8df97; } .band--yellow::before { background: #f8df97; } .band--yellow .sec-num { background: var(--teal); } .band.is-empty, section.is-empty { display: none; } .band-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); } section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); } /* section header: flat round number badge + title (matte — no glow shadow) */ .sec-head { display: flex; align-items: center; gap: 1.05rem; margin: 0 0 2.6rem; } /* organic "bean" badge — irregular per-section so each section feels hand-drawn, not stamped. width/height stay equal so the digit sits centred. */ .sec-num { flex-shrink: 0; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 58% 42% 47% 53% / 53% 60% 40% 47%; font-family: var(--round); font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--teal); } /* rotate the radii per nth-of-type so adjacent badges have visibly different bean shapes */ .band:nth-of-type(2) .sec-num { border-radius: 47% 53% 60% 40% / 58% 42% 55% 45%; } .band:nth-of-type(3) .sec-num { border-radius: 62% 38% 45% 55% / 42% 60% 40% 58%; } .band:nth-of-type(4) .sec-num { border-radius: 40% 60% 55% 45% / 60% 45% 55% 40%; } .band:nth-of-type(5) .sec-num { border-radius: 55% 45% 38% 62% / 48% 58% 42% 52%; } .band:nth-of-type(6) .sec-num { border-radius: 43% 57% 60% 40% / 56% 38% 62% 44%; } .band:nth-of-type(7) .sec-num { border-radius: 60% 40% 50% 50% / 42% 55% 45% 58%; } .band:nth-of-type(8) .sec-num { border-radius: 48% 52% 42% 58% / 55% 45% 60% 40%; } .band:nth-of-type(9) .sec-num { border-radius: 52% 48% 60% 40% / 38% 62% 45% 55%; } .band:nth-of-type(10) .sec-num { border-radius: 38% 62% 47% 53% / 60% 40% 58% 42%; } /* spread the swatches across all bands so adjacent sections rarely share a colour. .band--deep (Contact) keeps the yellow-on-dark contrast separately. */ .band:nth-of-type(1) .sec-num { background: var(--teal); } .band:nth-of-type(2) .sec-num { background: var(--coral); } .band:nth-of-type(3) .sec-num { background: var(--leaf); } .band:nth-of-type(4) .sec-num { background: var(--plum); } .band:nth-of-type(5) .sec-num { background: var(--pumpkin); } .band:nth-of-type(6) .sec-num { background: var(--sky); } .band:nth-of-type(7) .sec-num { background: var(--coral); } .band:nth-of-type(8) .sec-num { background: var(--leaf); } .band:nth-of-type(9) .sec-num { background: var(--teal); } .band--deep .sec-num { background: var(--yellow); color: #5a4410; } .sec-title { font-family: var(--round); font-size: clamp(1.7rem, 3.8vw, 2.5rem); margin: 0; color: var(--ink); letter-spacing: -.012em; } .band--deep .sec-title { color: #fff; } .sec-title .count { font-family: var(--sans); font-size: .5em; font-weight: 700; color: var(--muted); } .band--deep .sec-title .count { color: #9fc0b8; } .lead { font-family: var(--sans); font-size: 1.1rem; max-width: 70ch; margin: 0 0 1.2rem; } .sec-toc { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1.8rem; } /* sub-section jump pills: same crayon-fill language as hero quicklinks — no outline, wavy bean shape, two stacked grain washes for crayon coloring feel */ .sec-toc a { position: relative; overflow: hidden; font-family: var(--sans); font-size: .88rem; font-weight: 800; text-decoration: none; color: #fff; padding: .55rem 1.15rem; border: 0; background: var(--teal); transition: transform .2s, filter .2s; } .sec-toc a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255, 250, 240, .35); filter: url(#crayon-fill); mix-blend-mode: soft-light; opacity: .95; } .sec-toc a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(0, 0, 0, .18); filter: url(#crayon-fill); mix-blend-mode: multiply; opacity: .6; } .sec-toc a > * { position: relative; z-index: 2; } /* per-pill fill colour + asymmetric bean shape — colours match each sub-block's .sub-head::after underline so the jump pill and the heading it lands on share a visual identity (Articles=crayon-ink, Books=coral-ink, Preprints=gold). */ .sec-toc a:nth-of-type(1) { background: var(--crayon-ink); border-radius: 65% 35% 58% 42% / 48% 62% 38% 52%; } .sec-toc a:nth-of-type(2) { background: var(--coral-ink); border-radius: 38% 62% 42% 58% / 60% 38% 62% 40%; } .sec-toc a:nth-of-type(3) { background: #c89412; border-radius: 60% 40% 65% 35% / 38% 60% 40% 62%; } .sec-toc a:nth-of-type(4) { background: var(--pumpkin); border-radius: 42% 58% 38% 62% / 65% 35% 58% 42%; } .sec-toc a:hover { transform: translateY(-2px) rotate(-1.2deg); filter: brightness(.94) saturate(1.08); } /* about grid */ .about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } /* Academic Degrees: indefinite organic "blob" frame (捉えようのない曲線の枠) */ .about-aside { background: #fff; border: 2.5px solid var(--teal-tint2); box-shadow: var(--shadow-sm); padding: 1.8rem 2.6rem; display: block; width: 100%; border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%; } .about-aside h3 { font-family: var(--hand); font-size: 1.2rem; font-weight: 700; color: var(--crayon-ink); letter-spacing: .005em; display: block; width: fit-content; margin: 0 auto .65rem; position: relative; padding-bottom: .4rem; } /* hand-drawn crayon underline — same SVG-filter pattern as .sub-head::after */ .about-aside h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--teal); border-radius: 4px; filter: url(#crayon-sm); opacity: .9; } /* narrow / portrait layout: center the aside and pivot each degree to one inline line */ @media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-aside { max-width: 32rem; margin-left: auto; margin-right: auto; text-align: center; } .about-aside .degree { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .3rem .65rem; white-space: normal; } } /* card surface used by lists inside bands (so content sits on white rounded cards) */ .card { background: #fff; border: 2px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.3rem, 3vw, 2rem); } .reading { max-width: 880px; } .legend { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: 0 0 1.4rem; } .legend sup { color: var(--coral-ink); font-weight: 700; } /* ============================================================================= PUBLICATIONS — refined sub-section heads in the site's hand-drawn voice ============================================================================= */ /* sub-block: no heavy card frame. Subtle vertical rhythm + a hand-drawn crayon underline under each heading do the dividing work. */ .sub-block { margin: 0 0 3.2rem; padding: 0; background: transparent; border: 0; box-shadow: none; position: relative; } .sub-block:last-child { margin-bottom: 0; } /* heading set in the marker face so it reads as the same family as the section title above. A short crayon-textured stroke sits under it as a hand-drawn underline — the same SVG filter as the rest of the frames. */ .sub-head { font-family: var(--hand); font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--crayon-ink); font-weight: 700; letter-spacing: .005em; margin: 0 0 1.25rem; padding: 0 0 .55rem; display: inline-flex; align-items: baseline; gap: .55rem; position: relative; scroll-margin-top: calc(var(--nav-h) + 1rem); } .sub-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--crayon-ink); border-radius: 4px; filter: url(#crayon-sm); opacity: .9; } .sub-block:nth-of-type(2) .sub-head::after { background: var(--coral-ink); } .sub-block:nth-of-type(3) .sub-head::after { background: #c89412; } /* count: bare number — no frame, no chip — to keep the heading clean. */ .sub-head .count { font-family: var(--round); font-size: .6em; font-weight: 700; color: var(--muted); padding: 0; background: transparent; border: 0; line-height: 1.2; } .year-head { font-family: var(--round); font-size: 1.05rem; font-weight: 700; color: var(--coral-ink); margin: 1.5rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px dotted var(--hairline-2); } .bib-list { list-style: none; margin: 0; padding: 0; } .bib { position: relative; padding: .6rem 0 .8rem 2.6rem; border-bottom: 2px dotted var(--hairline); } .bib:last-child { border-bottom: 0; } .bib::before { content: attr(data-num); position: absolute; left: 0; top: .65rem; width: 2rem; text-align: right; font-family: var(--sans); font-size: .78rem; font-weight: 700; color: #c7b9a4; } .bib[hidden], .talk[hidden], .rec[hidden], .book[hidden] { display: none; } .bib .authors { color: var(--text); } .bib .authors strong { color: var(--ink); font-weight: 700; } .bib .title { color: #2c2620; } .bib .venue { color: var(--text); font-style: italic; } .bib .yr-chip { font-family: var(--round); font-size: .92em; font-weight: 700; color: var(--text); margin-left: .15rem; } .bib .yr-chip::before { content: "("; } .bib .yr-chip::after { content: ")"; } .bib .roles { font-weight: 700; color: var(--coral-ink); margin-right: .15rem; cursor: help; } .bib .oa { display: inline-block; font-family: var(--sans); font-size: .62rem; font-weight: 800; letter-spacing: .04em; padding: .12rem .45rem; border-radius: 6px; margin-left: .35rem; background: var(--yellow); color: #6b5300; vertical-align: .1em; } .bib .btn, .book .btn, .project-links .btn { display: inline-block; font-family: var(--sans); font-size: .74rem; font-weight: 700; line-height: 1; text-decoration: none; color: var(--teal-deep); background: #fff; border: 2px solid var(--teal-tint2); border-radius: 999px; padding: .3rem .7rem; margin-left: .35rem; transition: all .15s; white-space: nowrap; } .bib .btn:hover, .book .btn:hover, .project-links .btn:hover { border-color: var(--teal); background: var(--teal); color: #fff; } .project-links .btn { margin-left: 0; } mark { background: #ffe39a; color: inherit; border-radius: 3px; padding: 0 .08em; } /* selected — playful card grid */ .selected-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.2rem; } /* ============================================================================= NEWS — sticky-note memos pinned to a corkboard. Each note has: marker-font date in the top-left, body text below, washi-tape strip across the top, a casual rotation and a soft drop shadow. Cleaner layout than the original: bigger padding, consistent max-width so a reading line is comfortable, date set in the hand font for instant scanning. ============================================================================= */ /* News home grid: columns scale with viewport (up to 4), JS caps visible rows at 2. Each column is at least max(280px, 25%) so width-limited screens never pack more than 4 columns. Items past row 2 get .news-item--rowclip from JS. */ .news-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(280px, 25%), 1fr)); gap: 2.4rem 2rem; align-items: start; } .news-list .news-item--rowclip { display: none; } .news-item { display: flex; justify-content: stretch; } .news-bubble { position: relative; padding: 1.5rem 1.7rem 1.4rem; width: 100%; /* fill the column — no awkward right gap */ background: #fef6c0; border-radius: 4px 8px 5px 7px / 6px 4px 8px 5px; box-shadow: 0 2px 1px rgba(0,0,0,.08), 0 10px 20px -6px rgba(60,40,15,.22), 0 22px 36px -12px rgba(60,40,15,.12); transition: transform .22s, box-shadow .22s; } /* per-note paper colour + slight rotation so the row feels hand-pinned */ .news-item:nth-child(1) .news-bubble { background: #fef6c0; transform: rotate(-1.4deg); } .news-item:nth-child(2) .news-bubble { background: #ffd7c2; transform: rotate( 1.2deg); } .news-item:nth-child(3) .news-bubble { background: #d6eecf; transform: rotate(-1.0deg); } .news-item:nth-child(4) .news-bubble { background: #ddeaff; transform: rotate( 1.5deg); } .news-item:nth-child(5) .news-bubble { background: #fef0bf; transform: rotate(-1.2deg); } .news-item:nth-child(6) .news-bubble { background: #ffd7c2; transform: rotate( .9deg); } /* washi-tape strip across the top of each note */ .news-bubble::before { content: ""; position: absolute; top: -10px; left: 24px; height: 20px; width: 72px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 6px, rgba(255,255,255,.22) 6px 12px); background-color: rgba(95, 182, 179, .6); box-shadow: 0 1px 2px rgba(0,0,0,.1); transform: rotate(-6deg); } .news-item:nth-child(even) .news-bubble::before { left: auto; right: 24px; transform: rotate(6deg); } .news-item:nth-child(2) .news-bubble::before { background-color: rgba(245, 200, 77, .65); } .news-item:nth-child(3) .news-bubble::before { background-color: rgba(176, 122, 184, .6); } .news-item:nth-child(4) .news-bubble::before { background-color: rgba(240, 152, 122, .65); } .news-item:nth-child(5) .news-bubble::before { background-color: rgba(124, 184, 103, .6); } .news-item:nth-child(6) .news-bubble::before { background-color: rgba(110, 198, 214, .65); } /* date set in the marker face so it reads as "written on" the note */ .news-date { display: inline-block; font-family: var(--hand); font-weight: 700; font-size: 1.05rem; line-height: 1; color: var(--crayon-ink); margin: 0 0 .7rem; letter-spacing: .01em; border-bottom: 3px solid currentColor; padding-bottom: .25rem; filter: url(#crayon-sm); /* crayon scuff on the underline */ } .news-text { margin: 0; font-family: var(--round); color: #2c2620; line-height: 1.65; font-size: 1rem; } .news-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(0,0,0,.4); text-underline-offset: 3px; transition: text-decoration-color .15s; } .news-link:hover { text-decoration-color: var(--crayon-ink); } /* hover lift: pretend the note unsticks slightly */ .news-item .news-bubble:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 2px 1px rgba(0,0,0,.08), 0 16px 26px -6px rgba(60,40,15,.26), 0 26px 40px -10px rgba(60,40,15,.14); } /* narrow viewports: smaller padding, milder rotation */ @media (max-width: 600px) { .news-bubble { padding: 1.15rem 1.3rem 1.1rem; } .news-date { font-size: .96rem; } .news-text { font-size: .96rem; line-height: 1.6; } .news-item:nth-child(odd) .news-bubble { transform: rotate(-.7deg); } .news-item:nth-child(even) .news-bubble { transform: rotate( .7deg); } } /* "View past news" button — same crayon-fill voice as the hero quicklinks so it reads as an extension of the same visual family. */ .past-news-row { margin: 2.4rem 0 0; text-align: center; } .past-news-btn { position: relative; overflow: hidden; display: inline-block; font-family: var(--sans); font-size: .95rem; font-weight: 800; text-decoration: none; color: #fff; padding: .7rem 1.6rem; border: 0; background: var(--coral); border-radius: 38% 62% 42% 58% / 60% 38% 62% 40%; transition: transform .2s, filter .2s; } .past-news-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255, 250, 240, .35); filter: url(#crayon-fill); mix-blend-mode: soft-light; opacity: .95; } .past-news-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(0, 0, 0, .18); filter: url(#crayon-fill); mix-blend-mode: multiply; opacity: .6; } .past-news-btn > * { position: relative; z-index: 2; } .past-news-btn:hover { transform: translateY(-2px) rotate(-1deg); filter: brightness(.94) saturate(1.08); } /* news-archive page: keep the back-link breadcrumb subtle and inline above the header */ .archive-crumbs { margin: 0 0 1rem; font-family: var(--sans); font-size: .9rem; } .archive-crumbs a { color: #cfe5e2; text-decoration: none; padding: .3rem .7rem; border-radius: 18px 14px 18px 14px / 14px 18px 14px 18px; } .archive-crumbs a:hover { background: rgba(255,255,255,.08); color: #fff; } /* "growing from the outer page edges" feel: odd cards reach in from the left (their left edge runs past the band padding, anchored to the page edge), even cards mirror from the right. Each silhouette is rounded MORE on the inner-facing side and flatter on the rooted side so the eye reads them as attached at one edge and stretching toward the centre. */ .selected-grid .bib { padding: 1.6rem 1.8rem; border: 2px solid var(--hairline); background: #fff; box-shadow: var(--shadow-sm); transition: transform .22s, box-shadow .22s; position: relative; } .selected-grid .bib::before { content: none; } .selected-grid .bib .title { font-weight: 700; } /* odd: rooted on the LEFT page edge — pull past the band's left padding, leave breathing space on the right; round the right side more aggressively */ .selected-grid .bib:nth-child(odd) { margin-left: clamp(-3rem, -5vw, -1rem); margin-right: clamp(2rem, 10vw, 7rem); border-radius: 14% 60% 56% 14% / 18% 62% 60% 22%; transform: rotate(-.6deg); transform-origin: left center; } /* even: rooted on the RIGHT page edge — mirror of odd */ .selected-grid .bib:nth-child(even) { margin-right: clamp(-3rem, -5vw, -1rem); margin-left: clamp(2rem, 10vw, 7rem); border-radius: 60% 14% 14% 56% / 62% 18% 22% 60%; transform: rotate(.6deg); transform-origin: right center; } /* per-card subtle radius variation so the silhouettes don't repeat exactly */ .selected-grid .bib:nth-child(1) { border-radius: 14% 62% 58% 14% / 18% 60% 62% 22%; } .selected-grid .bib:nth-child(3) { border-radius: 12% 60% 54% 16% / 20% 60% 58% 24%; } .selected-grid .bib:nth-child(5) { border-radius: 16% 58% 56% 12% / 18% 62% 60% 20%; } .selected-grid .bib:nth-child(7) { border-radius: 14% 62% 60% 14% / 22% 58% 62% 18%; } .selected-grid .bib:nth-child(2) { border-radius: 62% 14% 14% 58% / 60% 18% 22% 62%; } .selected-grid .bib:nth-child(4) { border-radius: 60% 16% 12% 54% / 62% 20% 24% 60%; } .selected-grid .bib:nth-child(6) { border-radius: 58% 12% 16% 60% / 60% 18% 20% 62%; } .selected-grid .bib:nth-child(8) { border-radius: 62% 14% 14% 60% / 58% 22% 18% 62%; } .selected-grid .bib:hover { transform: translateY(-3px) rotate(0); box-shadow: var(--shadow); } /* narrow viewports: pull the cards back into the content area, no rotation */ @media (max-width: 600px) { .selected-grid .bib:nth-child(odd), .selected-grid .bib:nth-child(even) { margin-left: 0; margin-right: 0; transform: none; border-radius: 22px 22px 22px 22px / 18px 26px 18px 26px; } } /* book card sitting inside the selected-grid: body + small cover laid out side-by-side, sized to balance the surrounding paper cards */ .selected-grid .bib.book-in-selected { display: flex; gap: 1.1rem; align-items: flex-start; } .selected-grid .book-in-selected .book-body { flex: 1; min-width: 0; } .selected-grid .book-in-selected .book-body p { margin: 0 0 .55rem; } .selected-grid .book-in-selected .book-note { font-size: .88rem; color: var(--text); } .selected-grid .book-in-selected .cover { flex-shrink: 0; width: 92px; height: auto; border-radius: 6px; box-shadow: var(--shadow-sm); align-self: flex-start; } .selected-grid .book-in-selected .links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; } .selected-grid .book-in-selected .links .btn { margin-left: 0; } @media (max-width: 480px) { .selected-grid .bib.book-in-selected { flex-direction: column; align-items: stretch; } .selected-grid .book-in-selected .cover { width: 84px; align-self: flex-start; order: -1; } } /* books */ .book-list { list-style: none; margin: 0; padding: 0; } .book { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.3rem 0; border-bottom: 2px dotted var(--hairline); } .book:last-child { border-bottom: 0; } .book .cover { flex-shrink: 0; width: 130px; border-radius: 10px; box-shadow: var(--shadow-sm); } .book .book-body { flex: 1; } .book .book-body p { margin: 0 0 .6rem; } .book .book-note { font-size: .92rem; } @media (max-width: 480px) { .book { flex-direction: column; } .book .cover { width: 110px; } } /* talks */ .talk-list { list-style: none; margin: 0; padding: 0; } .talk { position: relative; padding: .6rem 0 .7rem 2.6rem; border-bottom: 2px dotted var(--hairline); } .talk:last-child { border-bottom: 0; } .talk::before { content: attr(data-num); position: absolute; left: 0; top: .62rem; width: 2rem; text-align: right; font-family: var(--sans); font-size: .78rem; font-weight: 700; color: #c7b9a4; } .talk .t-title { color: var(--ink); font-weight: 700; } .talk .t-meta { color: var(--muted); font-size: .92rem; } .talk .invited { display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 700; background: var(--coral); color: #fff; border-radius: 999px; padding: .12rem .5rem; margin-left: .3rem; } /* records (grants/courses/awards/societies/degrees) */ .rec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; } .rec-list.single { grid-template-columns: 1fr; } @media (max-width: 760px) { .rec-list { grid-template-columns: 1fr; } } .rec { display: grid; grid-template-columns: 120px 1fr; gap: .2rem 1rem; padding: .85rem 0; border-bottom: 2px dotted var(--hairline); } .rec .rec-period { font-family: var(--round); font-size: .9rem; font-weight: 700; color: var(--teal-deep); } .band--deep .rec .rec-period { color: var(--yellow); } .rec .rec-title { color: var(--ink); font-weight: 700; } .band--deep .rec .rec-title { color: #fff; } .rec .rec-meta { color: var(--muted); font-size: .92rem; display: block; margin-top: .1rem; } @media (max-width: 560px) { .rec { grid-template-columns: 1fr; } .rec .rec-period { color: var(--muted); } } /* projects */ .project-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; } /* project card — picture-book / sketchbook page: • cream paper background (same family as the band) • crayon-textured outline (inherited from the global .project::after rule) • marker-font title in the hand-drawn voice • the thumbnail sits in a tilted white "polaroid" frame • description gets generous leading for readability */ .project { display: grid; column-gap: 1.7rem; row-gap: 1.1rem; background: #fffaf0; border: 2px solid var(--hairline); border-radius: 32px 24px 30px 26px / 24px 30px 24px 30px; box-shadow: 0 2px 1px rgba(0,0,0,.04), 0 10px 24px -8px rgba(60,40,15,.14); padding: 1.7rem 1.9rem 1.8rem; transition: transform .22s, box-shadow .22s; grid-template-columns: 220px 1fr; grid-template-areas: "title title" "thumb body"; } .project:hover { transform: translateY(-3px); box-shadow: 0 2px 1px rgba(0,0,0,.05), 0 16px 30px -8px rgba(60,40,15,.2); } .project-title { grid-area: title; font-family: var(--hand); font-size: clamp(1.3rem, 2.3vw, 1.65rem); color: var(--crayon-ink); margin: 0; line-height: 1.3; letter-spacing: .005em; padding-bottom: .5rem; border-bottom: 4px solid var(--crayon-ink); filter: none; /* keep the title sharp */ } /* the underline alone gets the crayon scuff via a pseudo-overlay */ .project-title { position: relative; } .project-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; background: var(--crayon-ink); filter: url(#crayon-sm); border-bottom: 0; } .project-title { border-bottom: 0; padding-bottom: .8rem; } /* polaroid-style thumbnail frame: white mat, tilted, soft drop shadow */ .project-thumb { grid-area: thumb; display: block; width: 100%; max-width: 232px; background: #fff; padding: 8px 8px 14px; border: 0 !important; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 10px 18px -6px rgba(60,40,15,.18); transform: rotate(-1.4deg); align-self: start; transition: transform .22s; } .project:nth-of-type(even) .project-thumb { transform: rotate(1.2deg); } .project-thumb:hover { transform: rotate(0); } .project-thumb img { width: 100%; height: auto; display: block; border-radius: 3px; } .project-body { grid-area: body; min-width: 0; } .project-body p { margin: 0 0 .8rem; font-family: var(--round); line-height: 1.7; color: #2c2620; } .project-cite { color: var(--muted); font-size: .95rem; } .project-links { display: flex; flex-wrap: wrap; gap: .55rem; margin: .5rem 0 0; } @media (max-width: 680px) { .project { grid-template-columns: 1fr; grid-template-areas: "title" "thumb" "body"; padding: 1.3rem 1.4rem 1.4rem; } .project-thumb { max-width: 280px; justify-self: center; } } /* contact (deep band) */ .contact-email { font-family: var(--round); font-size: 1.2rem; margin: 0 0 .3rem; color: #fff; } .contact-note { font-family: var(--sans); font-size: .88rem; color: #9fc0b8; margin: 0 0 1.3rem; } .contact-links { display: flex; flex-wrap: wrap; gap: .7rem; } .contact-links a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .92rem; font-weight: 700; text-decoration: none; color: #eaf3f0; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.3); border-radius: 999px; padding: .55rem 1.1rem; transition: all .16s; } .contact-links a:hover { background: var(--yellow); border-color: var(--yellow); color: #5a4410; transform: translateY(-2px); } .band--deep .lead { color: #cfe0db; } /* footer */ .site-footer { width: 100%; background: var(--yellow); color: #6b5410; text-align: center; font-family: var(--sans); font-size: .9rem; padding: 2.6rem 1rem 3rem; position: relative; } .site-footer .updated { color: #8a6d20; font-size: .82rem; } /* mobile sheet + to-top */ .toc-sheet { width: 100%; max-width: 100%; margin: auto auto 0; border: 0; border-radius: 24px 24px 0 0; padding: 0; box-shadow: var(--shadow-pop); background: var(--band-white); } .toc-sheet::backdrop { background: rgba(32,65,63,.4); backdrop-filter: blur(2px); } .toc-sheet .sheet-inner { padding: 1.2rem 1.2rem 1.8rem; } .toc-sheet .sheet-grab { width: 44px; height: 5px; background: var(--hairline-2); border-radius: 999px; margin: .7rem auto .4rem; } .toc-sheet h2 { font-size: 1.2rem; margin: .2rem 0 1rem; } .toc-sheet .sheet-links { display: grid; gap: 2px; } .toc-sheet .sheet-links a { font-family: var(--sans); font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--ink); padding: .8rem .7rem; border-radius: 12px; min-height: 44px; display: flex; align-items: center; } .toc-sheet .sheet-links a:hover, .toc-sheet .sheet-links a:active { background: var(--teal-tint); } .toc-close { float: right; border: 0; background: var(--hairline); color: var(--ink); border-radius: 999px; width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; } /* back-to-top: hand-coloured "crayon" puck. Bean-shaped, with a coral fill, a crayon-textured outline (::after) and a soft grain wash (::before) that makes the colour read as crayon stroke rather than a flat painted disc. */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 58% 42% 47% 53% / 53% 60% 40% 47%; background: var(--coral); color: #fff; border: 0; cursor: pointer; box-shadow: 0 6px 14px rgba(207, 90, 60, .28), 0 2px 4px rgba(207, 90, 60, .18); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s, background-color .2s; } /* crayon grain wash: a light translucent layer with high-frequency noise applied so the coral underneath shows through unevenly — the look of coloured-in crayon. */ .to-top::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255, 255, 255, .22); filter: url(#crayon-sm); mix-blend-mode: overlay; opacity: .9; } /* outline drawn separately so it picks up its own crayon scuff */ .to-top::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 3px solid var(--crayon-ink); filter: url(#crayon-sm); } .to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top:hover { background: var(--coral-ink); } .to-top svg { width: 22px; height: 22px; position: relative; z-index: 1; } /* keep arrow above grain wash */ /* responsive: collapse nav only when it would actually overflow brand+controls */ @media (max-width: 860px) { :root { --nav-h: 60px; } .nav-links { display: none; } .nav-menu-btn { display: inline-flex; } .nav-controls { margin-left: auto; } } /* mid widths (860–1180): keep the inline nav but shrink its breathing space so all 10 links fit alongside the brand */ @media (max-width: 1180px) and (min-width: 861px) { .nav-links a { padding: 6px 9px; font-size: .8rem; } .nav-links { gap: 1px; } .brand .brand-sub { font-size: .9em; opacity: .7; } /* keep PhD, MPH visible, just lighter */ } @media (max-width: 380px) { .nav-menu-btn span { display: none; } } /* print */ @media print { .topbar, .to-top, .progress, .nav-menu-btn, .toc-sheet, .blob, .hero3-deco { display: none !important; } body { background: #fff; color: #000; } .band, .band--deep { background: #fff !important; color: #000 !important; padding: 1rem 0; } .bib[hidden], .talk[hidden], .rec[hidden] { display: revert !important; } html[data-lang="ja"] .lang-en, html:not([data-lang="ja"]) .lang-ja { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================================= CRAYON THEME — child's-canvas overlay on the existing warm layout. Hand-drawn marker headings, wobbly crayon borders, gentle-yet-vivid colour, and the hero painting blended onto the paper. Appended last so it overrides. ============================================================================= */ :root { --paper: #fffdf6; /* warm sketchbook paper */ --bg: #fffdf6; --crayon-ink: #3a2d20; /* dark warm marker outline */ --hand: "Yusei Magic", "Yomogi", "Zen Maru Gothic", var(--round); /* gentle yet vivid crayon accents (a touch more saturated, still warm) */ --teal: #15b1a4; --teal-ink: #0f857b; --teal-deep: #0b6e65; --teal-tint2:#a9e4de; --coral: #f4754e; --coral-ink:#d44f29; --yellow: #f8c01f; --orange: #f3911c; --orange-ink:#cf6f06; } body { background: var(--paper); } /* --- hand-drawn marker display type --- */ .brand, .hero3 h1, .sec-title { font-family: var(--hand); letter-spacing: .01em; } .hero3 h1 { letter-spacing: 0; } /* --- HERO: name up on the paper canvas; the giraffes stand along the bottom, their necks running off the lower edge as if growing up from below the page --- */ /* hero height = rendered height of the giraffe image (aspect 1600:809), with a floor so it stays prominent on narrow viewports */ .hero3 { background: var(--paper); display: block; position: relative; overflow: hidden; min-height: max(240px, min(440px, calc(70vw * 809 / 1600))); } .hero3-inner { display: block; position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.2rem, 5vw, 3rem) 0; } .hero3-text { max-width: 600px; } /* image rendered at a fixed aspect; width ramps up on narrow viewports to keep the giraffes prominent. Bottom is pushed past the hero into the wave area so the illustration continues over the cream drip. */ .hero3-art { position: absolute; right: -8%; bottom: 0; width: clamp(680px, 85vw, 1120px); margin: 0; z-index: 1; pointer-events: none; } .hero3-art img { width: 100%; height: auto; display: block; } .hero3 h1 { color: var(--crayon-ink); font-size: clamp(1.95rem, 4.4vw, 3rem); line-height: 1.2; } /* marker face runs wide — keep it from wrapping the credentials */ .hero3 h1 .post { white-space: nowrap; font-size: .5em; } /* match the sub-title color to "PhD, MPH" so the two read as a pair */ .hero3 .hero-sub { color: var(--teal-deep); } /* highlight the university within the org line — same teal as the post-nominals */ .hero3 .hero-org .affil-uni { color: var(--teal-deep); font-weight: 700; } /* paper-coloured halo behind hero text so it stays legible where the giraffes overlap. Multiple stacked shadows of the same paper hue make a soft thick outline — gentler than a hard text-stroke. */ .hero3 .hero3-text h1, .hero3 .hero3-text .hero-sub, .hero3 .hero3-text .hero-org, .hero3 .hero3-text .hero-affil2 { text-shadow: 0 0 6px var(--paper), 0 0 6px var(--paper), 0 0 12px var(--paper), 0 0 18px var(--paper); } /* narrow viewports: switch the giraffe image from width-driven (which left a paper- coloured gap above whenever content + padding made .hero3 taller than the image's aspect-derived height) to HEIGHT-driven. With top:0 + bottom:0 + height:100%, the image fills the hero box vertically no matter how text wraps; width follows from the 1600:809 aspect ratio via width:auto, and the right-edge anchor (right:-10%) keeps the composition consistent with the >860px layout. Overflow on the left is clipped by .hero3 { overflow: hidden } — same "creatures bleed off the edge" motif used elsewhere on the site. */ @media (max-width: 860px) { .hero3-art { position: absolute; top: 0; bottom: 0; right: -10%; left: auto; width: auto; height: 100%; margin: 0; z-index: 1; pointer-events: none; } .hero3-art img { width: auto; height: 100%; max-width: none; display: block; } } /* --- CRAYON STROKES are border-only ::after frames, so the grain textures the LINE (waxy scuff + light gaps from the filter) without speckling the text/fill. The grain — not the wobble — is what reads as crayon/pencil. --- */ .selected-grid .bib, .project, .about-aside, .card, .contact-links a, .lang-toggle, .nav-menu-btn, .sec-num, .selected-grid .btn, .project .btn, .project-thumb, .book .cover { position: relative; border-color: transparent !important; } .selected-grid .bib::after, .project::after, .about-aside::after, .card::after, .contact-links a::after, .lang-toggle::after, .nav-menu-btn::after, .sec-num::after, .selected-grid .btn::after, .project .btn::after, .project-thumb::after, .book .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 3px solid var(--crayon-ink); filter: url(#crayon-sm); } /* weight + coarser grain scale up with the frame size */ .selected-grid .bib::after, .project::after, .about-aside::after, .card::after { border-width: 4px; filter: url(#crayon); } .book .cover::after { border-width: 3.4px; filter: url(#crayon); } .sec-num::after { border-width: 3.4px; } .contact-links a::after { border-color: rgba(255,253,246,.72); } /* light crayon on the deep band */ /* project thumbnails: no crayon border — let the image stand on its own */ .project-thumb::after { display: none; } /* flowers tucked under the Academic Degrees aside on wide layouts (right column of Research Interests). On narrow layouts the .about-grid collapses to one column, so we pivot the stack to a row and place the flowers beside the degrees card instead of below, to keep the section visually balanced. */ /* Academic Degrees aside: sit higher in the section, closer to the title row */ .about-aside-stack { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 0; } /* Research Interests bottom padding trim */ #about { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); } @media (max-width: 760px) { /* narrow viewports: degrees flow into a horizontal 2-column layout inside an asymmetric "bean" frame (豆型) — irregular border-radius gives an organic, hand-drawn silhouette rather than a clean oval. The downstream rules (.rec-list.single → display:block, .degree → flex-direction:column) win on source order, so we override them with !important inside this media block. */ .about-aside-stack { margin-top: 1rem; align-items: stretch; } .about-aside-stack .about-aside { width: 100% !important; max-width: 38rem !important; margin: 0 auto !important; /* circular bean (rounded sides, not flat) — high vertical radii curve the left/right edges, slight horizontal asymmetry keeps the silhouette organic */ border-radius: 55% 45% 60% 40% / 85% 70% 80% 65% !important; padding: 1.6rem 2.8rem !important; text-align: center; } .about-aside h3 { margin-bottom: 1rem !important; } .about-aside .rec-list.single { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .5rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .about-aside .degree { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; text-align: center !important; margin: 0 !important; padding: 0 .4rem !important; white-space: normal !important; } .about-aside .degree + .degree { margin-top: 0 !important; } } /* an arigator strolling in from the cut-off right edge of Presentations — tail disappears off the page, head pokes toward the section's centre */ #presentations::after { content: ""; position: absolute; right: -12%; left: auto; top: clamp(-10rem, -6vw, -6rem); bottom: auto; width: clamp(320px, 40vw, 600px); aspect-ratio: 1455 / 736; height: auto; background: url("arigator.png") no-repeat right top / contain; border-radius: 0; opacity: 1; pointer-events: none; z-index: 2; transform: rotate(-4deg); } /* a friendly worm climbing UP out of the Competitive Grants section: body sits inside #grants, head pokes above the wave divider into #teaching. Anchored on the left edge so it appears to emerge from off-canvas. z-index is above the wave (.band::before, z-index:1) so the worm is layered on top of the wave. */ #grants::after { content: ""; position: absolute; left: -10%; right: auto; top: clamp(-9rem, -10vw, -5rem); bottom: auto; width: clamp(140px, 16vw, 220px); aspect-ratio: 528 / 487; height: auto; background: url("worm.png") no-repeat left top / contain; border-radius: 0; opacity: 1; pointer-events: none; z-index: 3; transform: rotate(-8deg); } /* a hand-drawn giraffe standing on the bottom edge of the yellow footer — mirrored horizontally and pinned to the left side. */ .site-footer::after { content: ""; position: absolute; left: clamp(-12rem, -8vw, -4rem); bottom: 0; width: clamp(220px, 30vw, 420px); aspect-ratio: 800 / 404; background: url("giraffe-single.png") no-repeat right bottom / contain; pointer-events: none; z-index: 1; transform: scaleX(-1); } /* ============================================================================= Collapsible long lists: hide items past the first 10, with a hand-drawn "Show all" toggle button that matches the crayon visual language. ============================================================================= */ .is-collapsed { display: none !important; } .is-expanded .is-collapsed { display: revert !important; } .collapse-toggle { position: relative; display: block; margin: 1.5rem auto 0; font-family: var(--round); font-weight: 700; font-size: .9rem; color: var(--crayon-ink); background: #fffaf0; border: 0; padding: .55rem 1.4rem; cursor: pointer; border-radius: 22px 18px 22px 18px / 18px 22px 18px 22px; transition: color .18s, background-color .18s, transform .2s; } .collapse-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 2.6px solid var(--crayon-ink); filter: url(#crayon-sm); } .collapse-toggle:hover { color: var(--teal-ink); background: var(--teal-tint); transform: translateY(-1px); } .collapse-toggle:hover::after { border-color: var(--teal-ink); } /* wavy band dividers: gentle hand-drawn edge */ /* wave dividers: solid colour, no crayon scuff / blur */ .band::before, .site-footer::before { filter: none; } /* unify the DOI/View buttons with the rest of the crayon frames: clear border on the button itself, then a textured crayon outline drawn via ::after (no text distortion). */ .btn { position: relative; border-color: transparent !important; } .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 2.6px solid var(--crayon-ink); filter: url(#crayon-sm); } .btn:hover::after { border-color: var(--teal); } /* slightly richer ink for body headings so the marker type reads as "drawn" */ h1, h2, h3 { color: var(--crayon-ink); } .sec-title { color: var(--crayon-ink); } .band--deep .sec-title, .band--deep h3 { color: #fff; } /* --- Academic Degrees: compact stacked cards (title / institution / year) --- */ .about-aside .rec-list.single { display: block; margin: 0; padding: 0; list-style: none; } .about-aside .degree { display: flex; flex-direction: column; gap: 0; align-items: center; text-align: center; } .about-aside .degree + .degree { margin-top: .55rem; } .about-aside h3 { text-align: center; } .degree-title { font-family: var(--round); font-weight: 700; color: var(--ink); line-height: 1.25; } .degree-inst { color: var(--muted); font-size: .92rem; line-height: 1.25; } .degree-year { color: var(--teal-ink); font-weight: 700; font-size: .82rem; margin-top: .05rem; line-height: 1.2; } /* ============================================================================= 03-09 Section boundary clarity — taller wave + light saturation lift ============================================================================= */ #publications::before, #presentations::before, #projects::before, #teaching::before, #grants::before, #awards::before, #service::before { height: 40px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V22 C1200,4 960,38 720,26 C470,14 240,2 0,24 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V22 C1200,4 960,38 720,26 C470,14 240,2 0,24 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center top / 100% 100%; } @media (max-width: 600px) { #publications::before, #presentations::before, #projects::before, #teaching::before, #grants::before, #awards::before, #service::before { height: 28px; } } #publications, #presentations, #projects, #teaching, #grants, #awards, #service { filter: saturate(1.08); }