/* Seren O'Toole – Blue Paper studio, 2026
   Muted blue, warm paper, artworks blending into their setting.
   User-provided artwork imagery; no white product cards.
*/
:root { --paper:#f2efe8; --paper-light:#f7f4ec; --blue-paper:#dbe6e9; --blue-soft:#e3eaf0; --blue:#3e6698; --blue-dark:#345775; --ink:#394447; --muted:#697777; --line:#d4d6d0; --wide:1320px; }
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:var(--paper); color:var(--ink);font-family:'Avenir Next','Avenir','Gill Sans','Trebuchet MS',Arial,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img {display:block; max-width:100%;}
a {color:inherit;text-decoration:none}
button,input {font:inherit}
a:focus-visible,button:focus-visible {outline:2px solid var(--blue);outline-offset:4px}
.skip {position:absolute;top:-1000px;left:16px;background:var(--paper);padding:10px 18px;z-index:500}
.skip:focus {top:6px}
.wrap {width:min(calc(100% - 112px),var(--wide));margin-inline:auto}
h1,h2,h3,p,figure {margin-top:0} h1,h2,h3{font-weight:400}
p {line-height:1.8}
.overline {font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-dark);font-weight:600;margin:0 0 21px}
.site-header {background:var(--paper);position:relative;z-index:30;border-bottom:1px solid rgba(69,94,101,.14)}
.header-row {height:116px;display:flex;justify-content:space-between;align-items:center;gap:35px}
.brand {display:block;flex:none;width:226px}
.brand img {width:100%;height:auto;mix-blend-mode:multiply}
.nav {display:flex;align-items:center;gap:37px}
.nav a {font-size:13px;color:#5e6d70;padding:12px 0;white-space:nowrap;position:relative;letter-spacing:.025em}
.nav a:hover,.nav a.active {color:var(--blue-dark)}
.nav a.active:after {content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--blue)}
.nav-toggle {display:none}
/* The original light paper of photographed artwork now blends with the website's tone.  */
.paper-blend {mix-blend-mode:multiply}
/* Only the ink/image provides a transition: no white image holders or product cards. */
section {scroll-margin-top:20px}
.home-hero {background:linear-gradient(110deg,#dce5e8 0%,#dce7ed 56%,#dfe8e7 100%)}
.hero-inner {min-height:620px;display:grid;grid-template-columns:39% 61%;align-items:center;gap:0;padding:33px 0 38px}
.hero-copy {padding:20px 5% 25px 7%;position:relative;z-index:1}
.hero-copy h1 {font-size:clamp(49px,5.15vw,78px);letter-spacing:-.06em;line-height:1.085;font-weight:400;color:var(--blue-dark);margin:0 0 28px}
.hero-copy h1 em {font-family:Georgia,'Iowan Old Style',serif;font-size:.91em;letter-spacing:-.055em;font-weight:400}
.hero-note {font-size:15px;color:#455c66;max-width:335px;line-height:1.8;margin-bottom:27px}
.quiet-link {display:inline-flex;align-items:center;gap:30px;font-size:13px;font-weight:600;color:var(--blue-dark);padding-bottom:6px;border-bottom:1px solid rgba(52,87,117,.65);transition:gap .2s}
.quiet-link:hover {gap:40px}
.hero-art {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-width:0}
.hero-art img {height:536px;width:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply;transition:transform .35s ease}
.hero-art:hover img {transform:scale(1.016)}
.hero-art-tag {font-size:11px;color:#51676d;display:flex;justify-content:space-between;width:min(85%,520px);margin-top:5px;gap:12px;letter-spacing:.04em}
.home-intro {padding:96px 0 98px;display:grid;grid-template-columns:1fr 210px;gap:9%;align-items:end;border-bottom:1px solid var(--line)}
.home-intro p {font-family:Georgia,'Iowan Old Style',serif;font-size:clamp(23px,2.45vw,35px);font-weight:400;line-height:1.42;letter-spacing:-.024em;max-width:870px;color:#4c5b5b;margin:0}
.home-intro .quiet-link {justify-self:start;white-space:nowrap;margin-bottom:8px}
.section-head {display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
.section-head .overline {margin-bottom:6px}
.section-head h2 {font-family:Georgia,'Iowan Old Style',serif;color:#3e5357;font-size:clamp(29px,3vw,41px);line-height:1.2;letter-spacing:-.025em;margin:0}
.text-link {font-size:13px;color:var(--blue-dark);border-bottom:1px solid #8ba0aa;padding-bottom:5px;white-space:nowrap}
.text-link:hover {color:#25445b;border-color:#25445b}
.selected-work {padding:98px 0 115px}
.selected-grid {display:grid;grid-template-columns:1.15fr .91fr 1.05fr;gap:44px;align-items:start}
.selected-tile {display:block;min-width:0}
.selected-tile:nth-child(2) {padding-top:110px}
.selected-tile:nth-child(3) {padding-top:30px}
.work-figure {margin:0}
.work-figure img {height:480px;width:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s}
.selected-tile:nth-child(2) img {height:356px}
.selected-tile:hover img {transform:translateY(-4px)}
.work-figure figcaption {border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;padding-top:15px;font-size:12px;color:#52676d}
.work-figure figcaption span:last-child {font-size:11px;white-space:nowrap;color:var(--blue)}
.home-feature {background:var(--blue-paper);padding:94px 0}
.home-feature-grid {display:grid;grid-template-columns:1.45fr .72fr;align-items:center;gap:8%}
.home-feature-image img {width:100%;height:auto;max-height:590px;object-fit:contain}
.home-feature-copy h2 {font-family:Georgia,'Iowan Old Style',serif;font-size:clamp(36px,4vw,59px);line-height:1.1;letter-spacing:-.03em;color:#38546a;margin:0 0 25px}
.home-feature-copy p:not(.overline) {font-size:14px;color:#53676e;max-width:305px;margin-bottom:28px}
.home-two-ways {padding:105px 0 120px}
.two-ways-grid {display:grid;grid-template-columns:1fr 1fr;gap:48px}
.way-link {display:block;min-width:0}
.way-link>img {width:100%;height:425px;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s}
.way-link:nth-child(2)>img {object-fit:cover;mix-blend-mode:normal;}
.way-link:hover>img {transform:translateY(-3px)}
.way-label {border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:start;justify-content:space-between}
.way-label h3 {font-family:Georgia,'Iowan Old Style',serif;font-size:23px;letter-spacing:-.025em;margin:0 0 3px}
.way-label p {font-size:12px;color:var(--muted);margin:0}
.way-label>span {color:var(--blue);font-size:23px}
.home-closing {background:#e4e8e4;padding:45px 0}
.closing-inner {display:flex;justify-content:space-between;align-items:center;gap:40px}
.closing-inner p {margin:0;font-family:Georgia,serif;font-size:21px;max-width:700px;line-height:1.45}
/* General page layouts */
.page-intro {padding:78px 0 56px}
.page-intro h1 {font-family:Georgia,'Iowan Old Style',serif;font-weight:400;font-size:clamp(43px,4.7vw,63px);color:#3f5762;line-height:1.12;letter-spacing:-.038em;margin:0 0 24px}
.page-intro>p:last-child {max-width:720px;color:#657477;font-size:15px;margin:0}
.portfolio-feature {padding-bottom:120px}
.project-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:68px 56px}
.project-card {display:block;min-width:0}
.project-card img {height:470px;width:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}
.project-card img[src*='gallery-'], .project-card img[src*='sketchbook'], .project-card img[src*='printing-'] {mix-blend-mode:normal}
.project-card:hover img {transform:translateY(-4px)}
.project-label {margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.project-label strong {font-family:Georgia,serif;font-size:19px;font-weight:400}
.project-label span {font-size:12px;color:var(--muted)}
/* Product galleries should feel like art on paper, not generic sales cards */
.product-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:33px}
.product-card {min-width:0}
.product-image {height:370px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;overflow:hidden}
.product-image img {width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}
.product-image:hover img {transform:scale(1.027)}
.product-info {padding:17px 0 8px;border-top:1px solid var(--line)}
.product-name {font-family:Georgia,serif;font-size:15px;line-height:1.4;display:inline-block;color:#3a5055}
.product-name:hover {color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.product-info p {font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.5}
.shop-area {padding-bottom:105px}
.shop-controls {display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin-bottom:31px}
.shop-filters {display:flex;flex-wrap:wrap;gap:26px}
.shop-filter {background:none;border:0;font-size:13px;color:var(--muted);cursor:pointer;padding:5px 1px}
.shop-filter.selected {color:var(--blue-dark);border-bottom:1px solid var(--blue-dark)}
.shop-count {font-size:12px;color:var(--muted);white-space:nowrap}
.shop-products {row-gap:60px}
.shop-products .product-card[hidden] {display:none}
.shop-end {border-top:1px solid var(--line);padding:58px 0 30px;text-align:center;margin-top:95px}
.shop-end h2 {font-family:Georgia,serif;font-size:30px;color:#3b5660;font-weight:400;margin-bottom:15px}
.shop-end p {max-width:540px;margin:0 auto 25px;color:var(--muted);font-size:14px}
.btn {display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:46px;padding:10px 22px;font-size:12px;letter-spacing:.025em;border:1px solid var(--blue-dark);transition:background .2s}
.btn-dark {background:var(--blue-dark);color:#f8f7f1}
.btn-dark:hover {background:#244763}
.btn-outline {background:transparent;color:var(--blue-dark)}
.btn-outline:hover {background:#e8eef1}
.availability-note {font-size:12px;color:var(--muted);margin:30px 0}
/* Project & studio editorial */
.project-hero img {width:100%;height:620px;object-fit:contain;mix-blend-mode:multiply}
.project-hero img[src*='gallery-'],.project-hero img[src*='studio-'] {mix-blend-mode:normal}
.project-text-new {display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:70px 0 85px}
.project-text-new h2 {font-family:Georgia,serif;font-size:29px;color:#405863;line-height:1.25}
.project-text-new p {font-size:15px;color:#667678;line-height:1.9}
.project-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.art-zoom {width:100%;border:0;background:transparent;padding:0;cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.project-gallery .art-zoom {height:455px}
.project-gallery .art-zoom img {width:100%;height:100%;object-fit:contain}
.image-masonry {columns:3 245px;column-gap:30px}
.image-masonry .art-zoom {height:auto;margin-bottom:27px;break-inside:avoid}
.image-masonry .art-zoom img {height:auto;max-width:100%}
.project-end {display:flex;justify-content:space-between;gap:22px;border-top:1px solid var(--line);padding:35px 0 90px;margin-top:70px}
.commissioned {border-top:1px solid var(--line);padding-bottom:95px}
.commissioned article {display:grid;grid-template-columns:1fr 1fr;gap:5%;border-bottom:1px solid var(--line);padding:28px 0}
.commissioned h2 {font-family:Georgia,serif;font-size:24px}
.commissioned p {font-size:14px;color:var(--muted);grid-column:2}
.commission-gallery {padding-bottom:95px}
.commission-lead {max-width:1080px;margin:0 auto 80px}
.commission-lead img {width:100%;height:auto}
.image-credit {font-size:12px;color:var(--muted);margin-top:13px}
.commission-two {display:grid;grid-template-columns:1.15fr .85fr;gap:8%;align-items:center;margin-bottom:80px}
.commission-two img {width:100%;height:auto}
.commission-two h2 {font-family:Georgia,serif;color:#3c5865;font-size:clamp(30px,3.2vw,48px);line-height:1.17}
.commission-two p:not(.overline) {color:var(--muted);line-height:1.8}
.commission-list {border-top:1px solid var(--line)}
.commission-list article {display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:24px 0;border-bottom:1px solid var(--line)}
.commission-list h3 {font-family:Georgia,serif;font-size:20px}
.commission-list p {color:var(--muted);font-size:14px}
.editorial-hero {margin:0 auto 55px;text-align:center}
.editorial-hero img {max-width:100%;max-height:620px;margin:0 auto;object-fit:contain}
.editorial-intro {margin:0 auto 65px}
.editorial-intro p {font-size:15px;color:var(--muted);max-width:620px;line-height:1.9}
/* Artwork detail */
.art-detail {display:grid;grid-template-columns:1.3fr .7fr;gap:8%;align-items:start;padding:75px 0 110px}
.art-detail-image .art-zoom {height:650px}
.art-detail-image img {height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}
.art-detail-info {padding-top:42px}
.art-detail-info h1 {font-family:Georgia,serif;font-size:clamp(32px,3.3vw,46px);line-height:1.17;letter-spacing:-.03em;color:#405b67;margin:0 0 20px}
.art-detail-info #detail-subtitle {font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:31px}
.detail-explainer {font-size:14px;color:var(--muted);line-height:1.8;margin:32px 0}
.detail-small {font-size:11px;color:var(--muted)}
.back-link {display:block;margin-top:55px}
/* About, contact */
.about-layout {display:grid;grid-template-columns:1fr .88fr;gap:10%;align-items:start;padding:0 0 95px}
.about-photo img {max-height:720px;object-fit:contain;width:100%}
.about-copy h2 {font-family:Georgia,serif;font-weight:400;color:#405c67;font-size:clamp(24px,2.25vw,34px);line-height:1.43;letter-spacing:-.015em;margin:0 0 29px}
.about-copy p {color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 20px}
.about-copy .text-link {display:inline-block;margin-top:13px}
.details-section {display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid var(--line);padding:60px 0 100px}
.details-section h2 {font-family:Georgia,serif;font-size:25px;color:#405964;margin:0 0 22px}
.details-section p {font-size:13px;color:var(--muted);margin-bottom:14px}
.about-more {padding:15px 0 100px}
.about-shortcuts {border-top:1px solid var(--line)}
.about-shortcuts a {display:flex;justify-content:space-between;padding:20px 3px;border-bottom:1px solid var(--line);font-size:14px}
.about-shortcuts a:hover {color:var(--blue)}
.contact-new {display:grid;grid-template-columns:1.25fr .5fr;gap:12%;min-height:420px;border-top:1px solid var(--line);padding-top:62px}
.contact-new h2 {font-family:Georgia,serif;font-size:clamp(24px,2.5vw,37px);color:#405964;line-height:1.4;max-width:610px}
.contact-big {font-size:clamp(18px,2vw,28px);display:inline-block;text-decoration:underline;text-underline-offset:7px;overflow-wrap:anywhere;margin-top:30px;color:var(--blue-dark)}
.contact-new>div:nth-child(2) {font-size:13px;color:var(--muted)}
.contact-new>div:nth-child(2) p {margin-bottom:22px}
/* footer is powder-blue not cold gray */
.site-footer {background:#dce7e9;border-top:1px solid #cdd9dc}
.footer-upper {display:grid;grid-template-columns:1.8fr .7fr .7fr;gap:40px;padding:70px 0}
.footer-brand {font-family:Georgia,serif;font-size:25px;color:#355876}
.footer-upper p {font-size:13px;color:#63777b;margin:12px 0 0}
.footer-links {display:flex;flex-direction:column;gap:13px}
.footer-links a {font-size:13px;color:#486771}
.footer-links a:hover {color:var(--blue)}
.footer-bottom {border-top:1px solid #c5d5d6;display:flex;justify-content:space-between;padding:20px 0 29px;font-size:11px;color:#63777b}
.lightbox {display:none;position:fixed;inset:0;background:rgba(244,241,234,.985);z-index:200;align-items:center;justify-content:center;flex-direction:column;padding:70px 35px 30px}
.lightbox.open {display:flex}
.lightbox>img {max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;mix-blend-mode:multiply}
.lightbox-close {position:absolute;right:30px;top:10px;border:0;background:none;color:var(--blue-dark);font-size:38px;cursor:pointer}
.lightbox-caption {font-size:12px;color:var(--muted);margin:18px 0 0}
body.modal-open {overflow:hidden}
@media(max-width:1120px) {
 .wrap{width:calc(100% - 78px)} .nav{gap:22px} .hero-inner{grid-template-columns:40% 60%;min-height:570px}
 .hero-art img {height:485px} .selected-grid{gap:24px}.work-figure img {height:410px}
 .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .home-feature-grid{gap:5%}
}
@media(max-width:780px) {
 .wrap{width:calc(100% - 40px)}
 .header-row{height:92px} .brand{width:182px}
 .nav-toggle {display:flex;flex-direction:column;gap:5px;border:0;background:transparent;padding:14px 2px 14px 15px;cursor:pointer}
 .nav-toggle span{width:25px;height:1px;background:var(--blue-dark)}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);padding:18px 20px 25px;border-bottom:1px solid var(--line);box-shadow:0 16px 20px #26342c10;flex-direction:column;align-items:stretch;gap:0}
 .nav.open{display:flex}.nav a{padding:13px 5px}.nav a.active:after{display:none}
 .hero-inner{display:flex;flex-direction:column;min-height:0;padding:58px 0 36px;align-items:stretch}
 .hero-copy{padding:0 5px 20px}.hero-copy h1{font-size:clamp(43px,9vw,62px);margin-bottom:20px}
 .hero-copy h1 br{display:none}.hero-note{font-size:14px;max-width:500px;margin-bottom:16px}
 .hero-art img{height:440px;margin-top:17px}
 .hero-art-tag{width:100%}
 .home-intro{grid-template-columns:1fr;gap:25px;padding:65px 0}
 .home-intro p{font-size:24px}
 .selected-work{padding:69px 0 75px}.selected-grid{grid-template-columns:1fr 1fr;gap:36px 22px}
 .selected-tile:nth-child(2){padding-top:60px}.selected-tile:nth-child(3){padding-top:0}
 .work-figure img,.selected-tile:nth-child(2) img{height:330px}
 .home-feature{padding:65px 0}.home-feature-grid{grid-template-columns:1fr;gap:30px}
 .home-feature-copy h2 br{display:none}.home-feature-copy h2{font-size:38px}
 .home-two-ways{padding:70px 0 85px}.two-ways-grid{gap:21px}.way-link>img{height:260px}.way-label h3{font-size:19px}
 .closing-inner{display:block}.closing-inner .quiet-link{margin-top:20px}
 .page-intro{padding:58px 0 43px}.page-intro h1{font-size:45px}
 .project-grid{gap:41px 20px}.project-card img{height:320px}.project-label{display:block}.project-label span{display:block;margin-top:5px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
 .product-image{height:300px}
 .shop-controls{align-items:start;flex-direction:column;gap:10px}.shop-filters{gap:18px}
 .about-layout{grid-template-columns:1fr;gap:33px}.details-section{grid-template-columns:1fr;gap:30px}
 .contact-new{grid-template-columns:1fr;gap:26px;padding-bottom:72px}
 .project-hero img{height:435px}.project-text-new{grid-template-columns:1fr;gap:15px;padding:45px 0}
 .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.project-gallery .art-zoom{height:300px}
 .image-masonry{columns:2}.art-detail{grid-template-columns:1fr;gap:0;padding:42px 0 75px}
 .art-detail-image .art-zoom{height:445px}.art-detail-info{padding-top:29px}
 .commission-two{grid-template-columns:1fr;gap:24px}.commission-list article{display:block}.commission-lead{margin-bottom:45px}
 .footer-upper{grid-template-columns:1fr 1fr;gap:32px;padding:50px 0}.footer-upper>div:first-child{grid-column:1/-1}
}
@media(max-width:490px) {
 .wrap{width:calc(100% - 32px)}
 .hero-inner{padding:43px 0 30px}.hero-copy h1{font-size:42px}.hero-art img{height:335px}
 .hero-art-tag{font-size:9px}.section-head{align-items:start;gap:14px}.section-head h2{font-size:31px}.section-head>.text-link{font-size:11px;white-space:normal;text-align:right}
 .selected-grid{grid-template-columns:1fr 1fr;gap:28px 17px}.selected-tile:nth-child(2){padding-top:40px}.work-figure img,.selected-tile:nth-child(2) img{height:250px}.selected-tile:last-child{grid-column:1/-1}.selected-tile:last-child img{height:380px}
 .work-figure figcaption{font-size:11px;display:block}.work-figure figcaption span:last-child{display:block;margin-top:5px}
 .two-ways-grid{grid-template-columns:1fr;gap:43px}.way-link>img{height:315px}.project-grid{grid-template-columns:1fr}.project-card img{height:400px}
 .product-image{height:245px}.product-info{padding-top:12px}.product-name{font-size:13px}.product-info p{font-size:11px}
 .project-gallery .art-zoom{height:245px}.image-masonry{columns:2;column-gap:12px}.image-masonry .art-zoom{margin-bottom:12px}
 .project-end{display:block}.art-detail-image .art-zoom{height:365px}
 .footer-upper{gap:25px}.footer-links a{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}