/* Notebook — ruled paper, red margin, spiral, paper clip, sticky notes, highlighter. */
:root { --t-font-display: "Kalam", "Segoe Print", cursive; --t-font-body: "Nunito", system-ui, sans-serif; --t-max: 960px; --t-radius: 6px; --t-radius-sm: 4px; --t-size-1: 1.0625rem; --t-rule: color-mix(in srgb, var(--t-accent) 22%, transparent); --t-margin: #d9534f; }
body { background: var(--t-surface2); }
.t-page { background: var(--t-surface); background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--t-rule) 31px 32px), linear-gradient(90deg, transparent 0 56px, var(--t-margin) 56px 58px, transparent 58px); background-attachment: local; width: min(100%, 1040px); margin-inline: auto; box-shadow: 0 10px 40px -20px rgba(0,0,0,.35); position: relative; }
/* spiral holes */
.t-page::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 18px; width: 14px; background: radial-gradient(circle, var(--t-surface2) 5px, transparent 6px) 0 0 / 14px 40px repeat-y; opacity: .9; }
.t-layout, .t-hero__inner, .t-footer { padding-inline-start: 72px; }

/* hero */
.t-nb { grid-template-columns: 1fr; gap: 16px; padding-block: 40px 24px; }
@media (min-width: 760px) { .t-nb { grid-template-columns: auto minmax(0, 1fr); } .t-nb__notes { grid-column: 1 / -1; } }
.t-nb__clipwrap { position: relative; width: fit-content; transform: rotate(-3deg); margin-block-start: 10px; }
.t-nb__clip { position: absolute; top: -18px; inset-inline-start: 18px; width: 22px; height: 54px; border: 3px solid #8a8f98; border-radius: 11px; z-index: 2; box-shadow: inset 0 0 0 2px var(--t-surface); }
.t-nb .t-photo { width: clamp(120px, 18vw, 170px); border-radius: 3px; border: 8px solid #fff; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.t-nb__date { margin: 0; font-family: var(--t-font-display); color: var(--t-muted); }
.t-nb .t-name { font-family: var(--t-font-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; background: linear-gradient(transparent 50%, var(--t-surface2) 50%) no-repeat; display: inline; }
.t-nb .t-headline { font-weight: 700; font-size: var(--t-size-3); margin-block-start: 12px; }
.t-nb__line { margin: 4px 0 0; font-family: var(--t-font-display); font-size: var(--t-size-2); color: var(--t-accent-text); }
.t-nb .t-link { border-radius: 4px; border: 2px dashed var(--t-line); background: transparent; font-family: var(--t-font-display); }
.btn { --bs-btn-border-radius: 4px; --bs-btn-font-weight: 800; }
/* sticky notes */
.t-nb__notes { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.t-nb__note { width: 132px; aspect-ratio: 1; background: var(--t-surface2); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); display: grid; align-content: center; justify-items: center; text-align: center; padding: 10px; transform: rotate(-2deg); position: relative; }
.t-nb__note:nth-child(2) { transform: rotate(2deg); } .t-nb__note:nth-child(3) { transform: rotate(-1deg); }
.t-nb__note::before { content: ""; position: absolute; top: -8px; inset-inline-start: 50%; width: 46px; height: 16px; transform: translateX(-50%) rotate(-2deg); background: color-mix(in srgb, var(--t-accent2) 45%, transparent); }
.t-nb__note strong { font-family: var(--t-font-display); font-size: 2.2rem; line-height: 1; color: var(--t-accent-text); }
.t-nb__note span { font-family: var(--t-font-display); font-size: var(--t-size-0); color: var(--t-text); }

/* sections: handwritten titles with a highlighter stroke; content aligned to the rules */
.t-main { gap: 40px; }
.t-section__title { font-family: var(--t-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.1rem); display: inline; background: linear-gradient(transparent 45%, var(--t-surface2) 45%) no-repeat; padding-inline-end: 8px; }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-size: var(--t-size-2); line-height: 32px; }
.t-prose p, .t-item__text { line-height: 32px; margin: 0; }
.t-item__title { font-weight: 800; }
.t-timeline__when { font-family: var(--t-font-display); color: var(--t-accent-text); font-size: var(--t-size-1); }
.card { background: #fff; border: 1px solid var(--t-line); box-shadow: 3px 3px 0 var(--t-line); transform: rotate(-.6deg); }
.card:nth-child(even) { transform: rotate(.6deg); }
.t-card .t-item__title { font-family: var(--t-font-display); font-size: 1.25rem; }
.t-tags .badge { font-family: var(--t-font-display); background: var(--t-surface2); color: var(--t-text); }
/* stickers for certificates */
.t-section--certifications .t-list { display: flex; flex-wrap: wrap; gap: 12px; }
.t-section--certifications .t-list li { display: grid; gap: 2px; padding: 12px 16px 12px 44px; background: var(--t-surface2); border-radius: 10px; position: relative; border: 0; transform: rotate(-1.5deg); }
.t-section--certifications .t-list li:nth-child(even) { transform: rotate(1.5deg); }
.t-section--certifications .t-list li::before { content: "★"; position: absolute; inset-inline-start: 14px; top: 10px; font-size: 22px; color: var(--t-accent-text); }
.t-bars__track { height: 10px; border-radius: 5px; background: #fff; border: 1px solid var(--t-line); }
.t-bars__label { font-family: var(--t-font-display); font-size: var(--t-size-1); }
.t-quote { background: var(--t-surface2); border: 0; transform: rotate(-.5deg); }
.t-quote blockquote { font-family: var(--t-font-display); font-weight: 400; font-size: var(--t-size-3); }
.t-chip { font-family: var(--t-font-display); background: transparent; border: 2px solid var(--t-line); }
.t-footer { border-block-start: 2px dashed var(--t-line); }
@media (prefers-reduced-motion: reduce) { .card, .t-nb__note, .t-nb__clipwrap, .t-quote, .t-section--certifications .t-list li { transform: none; } }