/*
Theme Name: Story Persona
Theme URI: https://www.shabbirshowne.com/themes/story-persona
Author: Shabbir Showne
Author URI: https://www.shabbirshowne.com
Description: An editorial personal journal and portfolio design with an animated life-story timeline, education milestones, photography, blog layouts and a contact page.
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2026 Shabbir Showne. All rights reserved.
Text Domain: story-persona
Tags: blog, portfolio, photography, custom-logo, custom-menu, featured-images
Contact: contact@shabbirshowne.com
*/

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#f7f5ef;color:#282823;font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #822d42;outline-offset:5px}header{height:100px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d6cd;position:relative;z-index:20}.wordmark{font-family:'Playfair Display',serif;font-size:43px;font-weight:600;letter-spacing:-4px;line-height:1}.wordmark span{color:#77233b}nav{display:flex;align-items:center;gap:38px}nav a{font-size:14px;position:relative;padding:10px 0}nav a.active:after{content:'';position:absolute;height:2px;background:#74273a;bottom:3px;left:0;right:0}.nav-note,.eyebrow,.hero-bottom,.photo-caption,.vertical-note,.photo figcaption,.chapter>span{font-size:11px;letter-spacing:1.7px;font-weight:500}.nav-note{font-size:10px}.menu{display:none}.hero{position:relative;max-width:1600px;margin:auto;min-height:780px;padding:66px 6% 80px;display:grid;grid-template-columns:1.07fr 1fr}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 26px}.tiny-line{height:1px;width:28px;background:#74273a}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400}h1{font-size:clamp(58px,5.65vw,90px);letter-spacing:-3.8px;line-height:1.08;margin-bottom:28px}em{color:#74273a;font-weight:400}h1 em,h2 em{font-style:italic}.intro{max-width:365px;color:#696960;font-size:15px;line-height:1.85;margin-bottom:28px}.intro strong{color:#282823;font-weight:500}.button{background:#70253a;color:white;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;padding:14px 22px;font-size:13px;border:1px solid #70253a;border-radius:2px;transition:background .2s,transform .2s}.button:hover{background:#4f1728;transform:translateY(-2px)}.text-link{font-size:13px;margin-left:26px;border-bottom:1px solid #aaa99f;padding-bottom:4px}.photo-stage{height:570px;position:relative;perspective:1100px;transform-style:preserve-3d;--rx:0deg;--ry:0deg}.photo{position:absolute;margin:0;padding:11px 11px 0;background:#fffefa;box-shadow:0 24px 40px #28282024;transition:transform .4s ease-out;transform-style:preserve-3d}.photo img{display:block;width:100%;height:calc(100% - 32px);object-fit:cover;background:#cbcbbf}.photo figcaption{font-size:9px;letter-spacing:1px;padding-top:7px}.photo-main{width:67%;height:430px;left:20%;top:30px;transform:rotateY(calc(-9deg + var(--ry))) rotateX(var(--rx)) rotateZ(7deg)}.photo-small{width:43%;height:240px;left:0;top:270px;transform:translateZ(75px) rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(-10deg)}.orbit{position:absolute;inset:30px -10px 70px 0;border:1px solid #d6d0c3;border-radius:50%;transform:rotate(-25deg)}.top-caption{position:absolute;left:12%;top:0;font-size:9px}.handwritten{position:absolute;bottom:1px;left:40%;font-family:'Playfair Display',serif;font-size:30px;font-style:italic;color:#74273a;transform:rotate(-8deg)}.vertical-note{position:absolute;right:-15px;top:150px;writing-mode:vertical-rl;font-size:9px}.asterisk{position:absolute;right:1%;bottom:55px;font-size:80px;color:#74273a;line-height:1}.hero-bottom{position:absolute;bottom:20px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:9px;color:#727268;border-top:1px solid #dedbd2;padding-top:20px}.hero-bottom a{color:#292923}.hero-bottom a span{margin-left:15px}.story-strip{padding:90px 8%;display:grid;grid-template-columns:1fr 1fr;gap:9%;border-bottom:1px solid #d9d5cb}h2{font-size:clamp(34px,3.2vw,51px);line-height:1.2;letter-spacing:-1.4px;margin-bottom:24px}.story-strip>div:last-child{padding-top:40px;color:#68685f}.line-link{display:inline-block;border-bottom:1px solid #8a897e;padding:8px 0;font-size:13px;color:#292923}.line-link span{margin-left:50px}.curiosity{padding:95px 8%;display:grid;grid-template-columns:1fr 1fr;gap:9%;background:#edece4}.section-heading>p:last-child{font-size:14px;color:#77786c}.interests>div{display:grid;grid-template-columns:35px 1fr;border-bottom:1px solid #cccbbf;padding:23px 0}.interests>div:first-child{padding-top:0}.interests span{font-size:12px;color:#7e2940;padding-top:6px}.interests h3{font-size:27px;margin-bottom:8px}.interests p{grid-column:2;font-size:14px;color:#6d6e63;margin:0;max-width:300px}.notes,.blog-list{padding:90px 6%}.section-top{display:flex;justify-content:space-between;align-items:center;gap:25px}.sample-note{font-size:12px;color:#74736a}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.article-card{background:transparent;border:0;padding:0;text-align:left;color:inherit}.article-image{overflow:hidden;aspect-ratio:1.45;position:relative}.article-image img{height:100%;width:100%;object-fit:cover;transition:transform .6s}.article-card:hover img{transform:scale(1.06)}.article-card .meta{font-size:10px;letter-spacing:1.2px;margin:18px 0 10px;display:flex;justify-content:space-between;color:#74273a}.article-card h3{font-size:27px;line-height:1.3;margin-bottom:12px}.read-label{font-size:12px;color:#77766c}.closing{background:#70253a;color:#fbf6e9;padding:75px 8%;position:relative;overflow:hidden}.closing .eyebrow{color:#d9b6bf}.closing h2{font-size:60px}.closing em{color:#ecb9bd}.button.light{border:1px solid #ba8290;background:transparent}.closing-star{position:absolute;right:12%;top:35px;font-size:245px;color:#b56c7a;line-height:1.3}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 5%;font-size:11px}footer .wordmark{font-size:34px}footer span a{border-bottom:1px solid #a5a095}footer>a:last-child{font-size:9px;letter-spacing:1px}.view{display:none}.active-view{display:block;animation:page-in .65s ease both}.page-intro{padding:80px 8% 55px;border-bottom:1px solid #d7d3ca}.page-intro h1{font-size:clamp(55px,6vw,88px)}.page-intro>p:last-child{color:#727268}.story-detail{padding:75px 8%;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}.story-detail figure{margin:0;transform:rotate(-3deg);background:#fff;padding:14px;box-shadow:0 16px 35px #26201616}.story-detail img{width:100%;height:600px;object-fit:cover}.story-detail figcaption{font-size:12px;padding-top:10px}.story-detail p{color:#69685f}.chapter{border-top:1px solid #d7d3ca;margin-top:28px;padding-top:24px}.chapter>span{color:#74273a}.chapter h3{font-size:27px;margin:16px 0}.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.filters button{border:1px solid #d1cdc2;background:none;padding:8px 20px;border-radius:30px;font-size:13px;color:#5d5c52}.filters .selected{background:#70253a;color:#fff;border-color:#70253a}.contact-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;padding:90px 8%}.contact-layout h1{font-size:clamp(48px,5vw,75px)}.contact-layout>div>p{color:#727268}.contact-domain{font-family:'Playfair Display',serif;font-size:28px;color:#74273a;border-top:1px solid #d7d3ca;margin-top:45px;padding-top:25px}form{padding:35px;background:#eeece4}label{display:block;font-size:13px;margin-top:18px}input,textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid #bcb7aa;background:transparent;border-radius:0;resize:vertical;font-size:14px}form .sample-note{margin:20px 0}#form-status{font-size:14px;margin-top:18px}dialog{background:#f7f5ef;border:0;padding:55px;max-width:720px;width:90%;max-height:85vh;color:#282823}dialog::backdrop{background:#1c1717a6;backdrop-filter:blur(6px)}dialog h2{font-size:43px}.close-dialog{position:absolute;right:15px;top:10px;border:0;background:none;font-size:30px}#article-body p{line-height:1.9;color:#626157}.skip{position:absolute;top:-100px;z-index:100;background:#fff;padding:10px}.skip:focus{top:0}@keyframes page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.hero{min-height:860px}.photo-stage{height:640px}.photo-main{height:490px}.photo-small{top:320px;height:260px}}@media(max-width:1000px){.hero{min-height:730px;padding-top:55px}h1{font-size:61px}.photo-stage{height:500px}.photo-main{height:340px;top:55px}.photo-small{height:200px;top:265px}.intro{max-width:320px}.text-link{display:block;width:max-content;margin:20px 0}.nav-note{display:none}.hero-bottom>span:last-child{display:none}.closing-star{right:5%}.story-detail img{height:500px}.contact-layout{gap:5%;padding:65px 6%}.contact-layout h1{letter-spacing:-2px}}
@media(max-width:700px){header{height:78px;margin:0 6%}.wordmark{font-size:37px}.menu{display:block;border:0;background:transparent;font-size:13px;padding:12px 0 12px 20px}.menu span{margin-left:18px}nav{display:none;position:absolute;top:77px;left:-7%;right:-7%;background:#f7f5ef;padding:25px 8%;box-shadow:0 20px 25px #29221b13}nav.open{display:flex;flex-direction:column;align-items:stretch;gap:12px}nav a{font-size:20px;width:fit-content}.hero{display:flex;flex-direction:column;padding:40px 7% 80px;min-height:0}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:23px}h1{font-size:clamp(49px,12.5vw,78px);letter-spacing:-2.7px;line-height:1.1;margin-bottom:23px}.intro{font-size:14px;max-width:350px}.button{padding:13px 20px}.text-link{display:inline-block;margin:0 0 0 22px;font-size:12px}.photo-stage{height:440px;margin-top:45px;width:100%;max-width:460px;align-self:center}.photo-main{width:64%;height:320px;left:27%;top:20px}.photo-small{width:45%;height:200px;top:190px;left:2%}.top-caption{left:10%;font-size:8px;top:-8px}.vertical-note{right:-10px;font-size:8px;top:75px}.asterisk{font-size:58px;right:0;bottom:45px}.handwritten{font-size:25px;bottom:0;left:40%}.orbit{inset:15px 0 40px}.hero-bottom{font-size:8px;gap:25px;bottom:18px}.hero-bottom>span:first-child{max-width:170px}.hero-bottom a{white-space:nowrap;font-size:8px}.story-strip,.curiosity,.story-detail,.contact-layout{grid-template-columns:1fr;padding:60px 7%;gap:25px}.story-strip>div:last-child{padding-top:0}.story-strip p{font-size:15px}h2{font-size:36px}.interests h3{font-size:26px}.section-top{display:block}.section-top>.line-link{margin-bottom:15px}.notes,.blog-list{padding:60px 7%}.article-grid{grid-template-columns:1fr;gap:38px}.article-card h3{font-size:29px}.article-image{aspect-ratio:1.6}.closing{padding:60px 7%}.closing h2{font-size:43px}.closing-star{font-size:110px;right:-30px;top:100px;opacity:.5}footer{flex-wrap:wrap;padding:30px 7%;gap:20px}footer span:nth-child(3){order:4;width:100%;border-top:1px solid #d8d4ca;padding-top:20px}footer>a:last-child{margin-left:auto;font-size:8px}.page-intro{padding:50px 7% 35px}.page-intro h1{font-size:52px;letter-spacing:-2px}.story-detail img{height:400px}.story-detail figure{margin-bottom:20px}.contact-layout h1{font-size:49px}.contact-layout{padding-top:50px}form{padding:25px;margin-top:20px}dialog{padding:42px 24px}dialog h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.photo-main{transform:rotate(7deg)}.photo-small{transform:rotate(-10deg)}}

.hero{overflow:clip}