/* A useful home: short introduction, immediate activities, quiet discovery. */
.screen--experience,.screen--about {width:100%!important;max-width:none;}
.experience-home {width:min(1200px,100%);margin:0 auto;padding:118px clamp(24px,5vw,64px) 38px;}

/* Heading beside one of Rubi's pictures, so the home looks like hers. */
.experience-heading {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(28px,5vw,72px);margin-bottom:64px;}
.experience-heading .member-eyebrow {margin-bottom:13px;}
.experience-heading h1 {font-family:var(--font-serif);font-size:clamp(40px,4.8vw,64px);font-weight:400;letter-spacing:-.025em;line-height:1.08;max-width:12ch;}
.experience-heading__copy>p:last-child {font-family:var(--font-serif);font-size:23px;line-height:1.35;color:var(--ink-3);margin-top:14px;max-width:30ch;}
.experience-print {position:relative;display:block;justify-self:end;width:min(100%,440px);padding:10px 10px 12px;background:var(--bg-raised);box-shadow:0 1px 2px rgb(40 30 15 / .10),0 10px 26px -12px rgb(40 30 15 / .28);transform:rotate(1.4deg);transition:transform 260ms var(--ease-out);}
.experience-print img {display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:62% 50%;background:var(--line-soft);}
.experience-print__note {position:absolute;right:14px;bottom:-34px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-script);font-size:23px;line-height:1;color:var(--world-accent,var(--cta));transform:rotate(-3deg);}
.experience-print:focus-visible {outline:2px solid var(--world-accent,var(--cta));outline-offset:6px;}

/* Four activities, each a block of the colour study's own pigments: orange,
   azure, green and cobalt, flat on the paper. */
.experience-activities {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.experience-activity {--pigment:#146275;display:flex;flex-direction:column;min-width:0;padding:22px 22px 20px;border:1px solid var(--line-soft);background:color-mix(in srgb,var(--bg-raised) 55%,transparent);border-radius:4px;transition:border-color 180ms ease,background-color 180ms ease,transform 180ms var(--ease-out);}
.experience-activity--paint {--pigment:#e2601c;}
.experience-activity--journal {--pigment:#2a7cc7;}
.experience-activity--pomodoro {--pigment:#2e8b57;}
.experience-activity--sounds {--pigment:#1a4ca0;}
.experience-activity__top {display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:22px;}
.experience-activity__mark {display:block;width:46px;height:46px;flex:none;}
.experience-activity__chip {display:block;width:100%;height:100%;overflow:visible;fill:color-mix(in srgb,var(--pigment) 90%,var(--bg));transform:rotate(-2deg);transition:transform 320ms var(--ease-out);}
.experience-activity--journal .experience-activity__chip {transform:rotate(1.5deg);}
.experience-activity--pomodoro .experience-activity__chip {transform:rotate(-1deg);}
.experience-activity--sounds .experience-activity__chip {transform:rotate(2deg);}
.experience-activity__top small {font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);padding:3px 8px;border:1px solid var(--line-soft);border-radius:999px;white-space:nowrap;}
.experience-activity h2 {font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1.15;}
.experience-activity__body>p {font-family:var(--font-serif);font-size:19px;line-height:1.4;color:var(--ink-3);margin:8px 0 26px;}
.experience-activity__action {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;font-size:12.5px;font-weight:500;color:var(--world-accent,var(--cta));min-height:26px;}
.experience-activity__action svg {transition:transform 180ms var(--ease-out);}
.experience-activity:focus-visible {outline:2px solid var(--world-accent,var(--cta));outline-offset:4px;}

.experience-discover {border-top:1px solid var(--line-soft);margin-top:44px;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:28px;}
.experience-discover .member-eyebrow {margin-bottom:8px;}
.experience-discover h2 {font-family:var(--font-serif);font-size:27px;font-weight:400;line-height:1.2;}
.experience-discover nav {display:flex;flex-wrap:wrap;gap:8px 26px;}
.experience-discover a {display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:6px;}
.experience-home+.member-space {margin-top:0;}

/* About: the subtitle once tucked under hand lettering; give the text heading room. */
.screen--about .portfolio {padding-top:118px;}
.screen--about .portfolio-intro>p {margin-top:14px;color:var(--ink-3);}
.about-story {display:flex;justify-content:center;margin:24px 0;}

html:lang(th) .experience-heading h1 {font-size:clamp(32px,4vw,52px);max-width:14ch;}
html:lang(th) .experience-activity h2 {font-size:28px;}
html:lang(th) .experience-activity__body>p {font-size:17px;}
@media(min-width:900px){.desktop-create{display:none;}.desktop-nav{gap:22px;}}
@media(hover:hover) and (pointer:fine){
 .experience-activity:hover{border-color:color-mix(in srgb,var(--pigment) 55%,var(--line-strong));background:color-mix(in srgb,var(--pigment) 6%,var(--bg));transform:translateY(-2px);}
 .experience-activity:hover .experience-activity__chip{transform:rotate(-6deg) scale(1.06);}
 .experience-activity:hover .experience-activity__action svg{transform:translateX(3px);}
 .experience-print:hover{transform:rotate(.4deg) translateY(-3px);}
 .experience-discover a:hover{text-decoration-color:currentColor;}
}
@media(max-width:1050px){
 .experience-activities{grid-template-columns:repeat(2,minmax(0,1fr));}
 .experience-activity{padding:20px;}
 .experience-activity__top{margin-bottom:16px;}
 .experience-activity__body>p{margin-bottom:18px;}
 .experience-discover{align-items:flex-start;flex-direction:column;gap:12px;}
}
/* Phones: the picture becomes a strip, and the activities a quick list. */
@media(max-width:699px){
 .experience-home{padding-top:96px;padding-bottom:24px;}
 .experience-heading{grid-template-columns:1fr;gap:16px;margin-bottom:20px;}
 .experience-heading h1{font-size:clamp(34px,9.6vw,40px);max-width:13ch;}
 .experience-heading__copy>p:last-child{font-size:18px;margin-top:8px;}
 .experience-print{justify-self:stretch;width:auto;padding:5px 5px 6px;transform:rotate(-.8deg);}
 .experience-print img{aspect-ratio:16/5;object-position:58% 46%;}
 .experience-print__note{right:10px;bottom:10px;padding:5px 10px 6px;font-size:19px;background:var(--bg-raised);transform:rotate(-2deg);box-shadow:0 2px 8px -3px rgb(40 30 15 / .3);}
 .experience-activities{grid-template-columns:1fr;gap:8px;}
 .experience-activity{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:'mark title note action' 'mark desc desc action';column-gap:14px;align-items:center;padding:12px 14px 12px 10px;}
 .experience-activity__top,.experience-activity__body{display:contents;}
 .experience-activity__mark{grid-area:mark;width:40px;height:40px;}
 .experience-activity__top small{grid-area:note;justify-self:start;margin-left:-4px;font-size:10px;padding:2px 7px;}
 .experience-activity h2{grid-area:title;font-size:25px;line-height:1.1;}
 .experience-activity__body>p{grid-area:desc;font-size:16px;line-height:1.3;margin:2px 0 0;}
 .experience-activity__action{grid-area:action;margin:0;min-height:0;}
 .experience-activity__action>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
 .experience-discover{margin-top:30px;padding-top:22px;}
 .experience-discover h2{font-size:25px;}
 .screen--about .portfolio{padding-top:100px;}
 html:lang(th) .experience-activity h2{font-size:22px;}
 html:lang(th) .experience-activity__body>p{font-size:15px;}
}
@media(prefers-reduced-motion:reduce){.experience-activity,.experience-activity__chip,.experience-activity__action svg,.experience-print{transition:none;}}

/* Sign-in carries the chosen activity forward, in the same pigment. */
.auth-copy .auth-ticket {display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:10px 22px 10px 10px;text-align:left;border:1px solid var(--line-soft);border-radius:999px;background:color-mix(in srgb,var(--bg-raised) 60%,transparent);}
.auth-ticket .experience-activity__mark {width:38px;height:38px;}
.auth-ticket__title {display:block;font-family:var(--font-serif);font-size:20px;line-height:1.2;color:var(--ink);}
.auth-ticket__sub {display:block;font-family:var(--font-sans);font-size:12.5px;line-height:1.4;color:var(--ink-3);margin-top:2px;}