/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}


:root{--ink:#344a5b;--blue:#dceaf0;--deep:#7fa3b3;--beige:#eee4d6;--paper:#fbfcfc;--line:#cbd7dc}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}a{color:inherit}.header{height:100px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;z-index:20}.brand{text-decoration:none;font-family:Georgia,serif;letter-spacing:.12em;font-size:18px;line-height:1}.brand span{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.32em;margin-top:7px}.header nav{display:flex;gap:30px}.header nav a{text-decoration:none;font:10px Arial,sans-serif;letter-spacing:.16em;position:relative}.header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--deep);transition:.3s}.header nav a:hover:after{right:0}.menu-button{display:none}
.hero{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:140px 9vw 80px}.eyebrow{font:10px Arial,sans-serif;letter-spacing:.28em;margin:0 0 28px}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(48px,7vw,94px);font-weight:400;line-height:1.35;letter-spacing:.04em;margin:0;position:relative;z-index:2}.lead{line-height:2.2;letter-spacing:.12em;font-size:14px;margin:30px 0 38px;position:relative;z-index:2}.round-link{width:112px;height:112px;border:1px solid #9cb5c1;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:11px Georgia,serif;position:relative;z-index:2;transition:.3s}.round-link:hover{background:var(--ink);color:white;border-color:var(--ink);transform:translateY(-4px)}.hero-art{position:absolute;width:min(48vw,680px);aspect-ratio:1;right:-5vw;top:9vh;border-radius:48% 52% 44% 56%;background:var(--blue);transform:rotate(12deg);opacity:.9}.hero-art i,.hero-art b,.hero-art em{position:absolute;display:block;border-radius:50%}.hero-art i{width:46%;height:46%;background:var(--beige);left:-7%;bottom:4%}.hero-art b{width:30%;height:30%;border:1px solid white;right:18%;top:24%}.hero-art em{width:12%;height:12%;background:white;right:4%;bottom:22%}.scroll{position:absolute;right:6vw;bottom:35px;font:8px Arial,sans-serif;letter-spacing:.25em;writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}.scroll span{height:54px;width:1px;background:var(--ink)}
.section{padding:150px max(7vw,32px)}.section-heading{display:grid;grid-template-columns:40px auto 1fr;align-items:end;gap:18px;margin-bottom:95px}.section-heading p{font:10px Georgia,serif;margin:0 0 12px}.section-heading h2{font:400 clamp(54px,7vw,98px)/.8 Georgia,serif;letter-spacing:.05em;margin:0}.section-heading span{font-size:11px;letter-spacing:.2em;border-bottom:1px solid var(--line);padding-bottom:12px}.profile{background:white}.profile-body{display:grid;grid-template-columns:1fr 1.25fr;gap:12vw}.name p{font:10px Arial,sans-serif;letter-spacing:.18em}.name h3{font:400 34px "Yu Mincho",serif;letter-spacing:.12em}.name small{display:block;font:12px Georgia,serif;letter-spacing:.12em;margin-top:13px}.profile-copy{line-height:2.15;font-size:14px}.profile-copy .large{font:400 23px/2 "Yu Mincho",serif;letter-spacing:.05em;margin-top:0}.profile-copy p+p{margin-top:30px}
.works{background:#8facb8;color:white}.section-heading.light span{border-color:#b8cbd2}.works-intro{text-align:right;font:16px/2 "Yu Mincho",serif;letter-spacing:.08em;margin:-50px 0 70px}.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 5vw}.work-card{margin:0}.work-card:nth-child(even){margin-top:130px}.work-image{width:100%;aspect-ratio:4/3;background-image:url('./portfolio-showcase.png');background-repeat:no-repeat;background-size:205% 205%;filter:saturate(.75);transition:.6s ease}.work-card:hover .work-image{transform:scale(.985);filter:saturate(1)}.crop-a{background-position:0 0}.crop-b{background-position:50% 0}.crop-c{background-position:100% 0}.crop-d{background-position:0 100%}.crop-e{background-position:50% 100%}.crop-f{background-position:100% 100%}.work-card>div:last-child{display:grid;grid-template-columns:35px 1fr;column-gap:12px;margin-top:20px}.work-card span{font:11px Georgia,serif;grid-row:1/3}.work-card h3{font:400 22px Georgia,serif;letter-spacing:.05em;margin:0}.work-card p{font:9px Arial,sans-serif;letter-spacing:.18em;margin:7px 0 0}.note{text-align:right;font-size:10px;opacity:.8;margin-top:60px}
.skills{background:#f4f0ea}.skill-list{max-width:950px;margin-left:auto}.skill-list>div{display:grid;grid-template-columns:180px 1fr;border-top:1px solid #cfc7bb;padding:30px 0}.skill-list>div:last-child{border-bottom:1px solid #cfc7bb}.skill-list span{font:12px Georgia,serif;letter-spacing:.15em}.skill-list p{margin:0;font:18px/1.7 Georgia,serif;letter-spacing:.03em}.service{background:white}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}.service-grid article{background:white;padding:48px 38px;min-height:300px}.service-grid b{font:10px Georgia,serif;font-weight:400}.service-grid h3{font:400 25px Georgia,serif;margin:45px 0 25px}.service-grid p{font-size:13px;line-height:2}.process{text-align:center;font:10px Arial,sans-serif;letter-spacing:.2em;margin:65px 0 0}.process i{font-style:normal;color:#9cafb7;margin:0 28px}
.contact{background:#536b7a;color:white}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.contact-layout>div>h3{font:400 clamp(30px,4vw,52px)/1.55 "Yu Mincho",serif;margin:0 0 28px}.contact-layout>div>p{font-size:13px;line-height:2;max-width:420px}form{display:grid;gap:27px}label{font-size:12px;letter-spacing:.08em}label>span{font-size:9px;border:1px solid #a8bbc3;padding:3px 7px;margin-left:8px}input,textarea{display:block;width:100%;margin-top:12px;border:0;border-bottom:1px solid #91a6b0;background:transparent;padding:12px 4px;color:white;font:14px inherit;outline:none;resize:vertical}input::placeholder,textarea::placeholder{color:#adc0c8}input:focus,textarea:focus{border-color:white}form button,.thanks button{border:1px solid white;background:transparent;color:white;padding:19px 24px;font:12px inherit;letter-spacing:.15em;cursor:pointer;transition:.25s}form button:hover,.thanks button:hover{background:white;color:var(--ink)}form button i{float:right;font-style:normal}form small{font-size:9px;opacity:.72}.thanks{border:1px solid #91a6b0;padding:60px}.thanks span{font:10px Georgia,serif;letter-spacing:.2em}.thanks h3{font-size:24px!important;margin-top:25px!important}.thanks button{margin-top:25px;padding:12px 35px}
footer{min-height:300px;background:#edf2f3;padding:80px 7vw 35px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}footer>p{font:10px Arial,sans-serif;letter-spacing:.16em}footer>small{align-self:flex-end;font:8px Arial,sans-serif;letter-spacing:.12em}.back-top{position:absolute;right:7vw;top:70px;width:60px;height:60px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;text-decoration:none}
@media(max-width:800px){.header{height:80px;padding:0 22px;position:absolute}.menu-button{display:flex;width:42px;height:42px;border:0;background:transparent;flex-direction:column;justify-content:center;gap:7px;z-index:21}.menu-button i{display:block;width:25px;height:1px;background:var(--ink)}.header nav{position:fixed;inset:0;background:#eef4f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;visibility:hidden;transition:.3s}.header nav.open{opacity:1;visibility:visible}.header nav a{font-size:14px}.hero{padding:120px 24px 50px;justify-content:flex-end;min-height:800px}.hero-art{width:88vw;right:-28vw;top:10vh}h1{font-size:43px}.lead{font-size:12px}.round-link{width:92px;height:92px}.scroll{display:none}.section{padding:105px 24px}.section-heading{grid-template-columns:25px auto;gap:8px 12px;margin-bottom:65px}.section-heading h2{font-size:49px}.section-heading span{grid-column:2;border:0;padding:10px 0 0}.profile-body,.contact-layout{grid-template-columns:1fr;gap:45px}.profile-copy .large{font-size:19px}.works-intro{text-align:left;margin:-30px 0 50px;font-size:14px}.works-grid{grid-template-columns:1fr;gap:60px}.work-card:nth-child(even){margin-top:0}.work-card h3{font-size:20px}.skill-list>div{grid-template-columns:1fr;gap:14px}.skill-list p{font-size:15px}.service-grid{grid-template-columns:1fr}.service-grid article{min-height:0}.process{line-height:3}.process i{margin:0 8px}.thanks{padding:35px 24px}footer{min-height:260px;padding:55px 24px 28px}footer>small{align-self:flex-start;margin-top:60px}.back-top{right:24px;top:55px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Profile portrait */
.profile-body{grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:10vw;align-items:center}
.portrait-column{position:relative;padding:0 0 42px 32px}
.profile-photo{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--blue)}
.profile-photo:before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.55);z-index:1;pointer-events:none}
.profile-photo:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(21,35,44,.56));pointer-events:none}
.profile-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 48%;filter:saturate(.78) contrast(.96);transition:transform .8s ease}
.profile-photo:hover img{transform:scale(1.025)}
.portrait-column .name{position:absolute;left:0;bottom:0;background:rgba(251,252,252,.94);padding:22px 34px 17px;min-width:78%;box-shadow:0 16px 35px rgba(52,74,91,.08)}
.portrait-column .name h3{font-size:29px}
@media(max-width:800px){.profile-body{grid-template-columns:1fr;gap:55px}.portrait-column{padding-left:18px}.portrait-column .name{padding:18px 24px;min-width:82%}.portrait-column .name h3{font-size:25px}}

.portrait-column .name h3{font-size:clamp(36px,3.5vw,52px);font-family:Georgia,"Times New Roman",serif;letter-spacing:.06em;white-space:nowrap}
@media(max-width:800px){.portrait-column .name h3{font-size:36px}}

.work-image.actual{margin:0;background:#f5f2ed;display:grid;place-items:center;padding:clamp(14px,2.3vw,34px);overflow:hidden}
.work-image.actual img{width:100%;height:100%;display:block;object-fit:contain;filter:none;box-shadow:0 18px 45px rgba(35,52,62,.2);transition:transform .55s ease,box-shadow .55s ease}
.work-card:hover .work-image.actual{transform:none;filter:none}
.work-card:hover .work-image.actual img{transform:translateY(-6px);box-shadow:0 24px 54px rgba(35,52,62,.28)}
.work-2 .work-image.actual{aspect-ratio:4/5;padding:clamp(18px,3vw,46px)}
.work-2 .work-image.actual img{max-width:78%}
@media(max-width:800px){.work-image.actual{padding:14px}.work-2 .work-image.actual{aspect-ratio:4/5;padding:22px}.work-2 .work-image.actual img{max-width:84%}}

.work-image.actual.square,.work-2 .work-image.actual{aspect-ratio:1;padding:clamp(14px,2.3vw,34px)}
.work-image.actual.square img,.work-2 .work-image.actual img{max-width:100%}
.work-image.actual.portrait{aspect-ratio:4/5;padding:clamp(18px,3vw,44px)}
.work-image.actual.portrait img{max-width:82%}
.work-image.actual.landscape{aspect-ratio:4/3}
.work-image.actual.landscape-wide{aspect-ratio:16/10}
@media(max-width:800px){.work-image.actual.portrait{padding:22px}.work-image.actual.portrait img{max-width:88%}.work-image.actual.square,.work-2 .work-image.actual{padding:14px}}

.work-card.digital{width:106%;position:relative;z-index:2}
.work-card.digital .work-image.actual{box-shadow:0 24px 55px rgba(35,52,62,.18)}
.work-card.digital>div:last-child:before{content:"FEATURED";grid-column:2;font:8px Arial,sans-serif;letter-spacing:.22em;margin-bottom:8px;color:#e6f0f3}
.work-card.hand{width:88%;justify-self:end;opacity:.92}
@media(max-width:800px){.work-card.digital,.work-card.hand{width:100%;justify-self:stretch}.work-card.digital>div:last-child:before{margin-bottom:5px}}

/* Unified works gallery */
.work-card.digital,.work-card.hand{width:100%;opacity:1;justify-self:stretch}
.work-card.digital>div:last-child:before{display:none}
.work-card .work-image.actual,.work-card .work-image.actual.square,.work-card .work-image.actual.portrait,.work-card .work-image.actual.landscape,.work-card .work-image.actual.landscape-wide,.work-2 .work-image.actual{aspect-ratio:4/3;padding:clamp(18px,2.5vw,36px);background:#f7f4ef;border:1px solid rgba(255,255,255,.45);box-shadow:none}
.work-card .work-image.actual img,.work-card .work-image.actual.portrait img,.work-2 .work-image.actual img{width:100%;height:100%;max-width:100%;object-fit:contain;box-shadow:0 18px 42px rgba(35,52,62,.2)}
.work-card>div:last-child{border-top:1px solid rgba(255,255,255,.35);padding-top:18px;margin-top:0}
@media(max-width:800px){.work-card .work-image.actual,.work-card .work-image.actual.square,.work-card .work-image.actual.portrait,.work-card .work-image.actual.landscape,.work-card .work-image.actual.landscape-wide,.work-2 .work-image.actual{aspect-ratio:4/3;padding:14px}}

/* Orientation-aware portfolio frames */
.work-card .work-image.actual.square,.work-2 .work-image.actual{aspect-ratio:1/1;padding:clamp(18px,2.5vw,36px)}
.work-card .work-image.actual.portrait{aspect-ratio:4/5;padding:clamp(20px,3vw,44px)}
.work-card .work-image.actual.landscape{aspect-ratio:4/3;padding:clamp(18px,2.5vw,36px)}
.work-card .work-image.actual.landscape-wide{aspect-ratio:16/9;padding:clamp(16px,2vw,30px)}
@media(max-width:800px){.work-card .work-image.actual.square,.work-2 .work-image.actual{aspect-ratio:1/1;padding:14px}.work-card .work-image.actual.portrait{aspect-ratio:4/5;padding:20px}.work-card .work-image.actual.landscape{aspect-ratio:4/3;padding:14px}.work-card .work-image.actual.landscape-wide{aspect-ratio:16/9;padding:12px}}

/* Larger editorial profile */
.profile{padding-left:max(5vw,32px);padding-right:max(5vw,32px)}
.profile-body{grid-template-columns:minmax(390px,1.12fr) minmax(380px,.95fr);gap:6.5vw;align-items:center}
.portrait-column{padding-left:38px;padding-bottom:58px}
.profile-photo{aspect-ratio:3/4;box-shadow:0 28px 70px rgba(40,58,69,.13)}
.profile-photo img{object-position:50% 48%}
.portrait-column .name{min-width:88%;padding:25px 38px 22px;overflow:visible}
.portrait-column .name p{font-size:11px;letter-spacing:.22em;margin-bottom:10px}
.portrait-column .name h3{display:inline-block;font-family:"Brush Script MT","Segoe Script","Lucida Handwriting",cursive;font-size:clamp(54px,5.2vw,76px);font-weight:400;font-style:italic;line-height:.9;letter-spacing:-.025em;transform:rotate(-4deg);transform-origin:left center;text-shadow:0 8px 20px rgba(52,74,91,.1)}
.profile-copy{font-size:16px;line-height:2.25}
.profile-copy .large{font-size:clamp(24px,2vw,30px);line-height:1.9}
.profile-copy p+p{margin-top:36px}
@media(max-width:900px){.profile-body{grid-template-columns:1fr;gap:64px}.portrait-column{width:min(100%,580px);margin:auto;padding-left:24px}.portrait-column .name{padding:22px 28px 20px}.portrait-column .name h3{font-size:clamp(48px,12vw,66px)}.profile-copy{font-size:15px}.profile-copy .large{font-size:22px}}

/* Refined translucent name card */
.portrait-column .name{background:rgba(255,255,255,.86);backdrop-filter:blur(11px) saturate(.82);-webkit-backdrop-filter:blur(11px) saturate(.82);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 42px rgba(36,54,65,.1)}
.portrait-column .name h3{font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,4vw,58px);font-weight:400;font-style:normal;line-height:1;letter-spacing:.055em;transform:none;text-shadow:none}
@media(max-width:900px){.portrait-column .name{background:rgba(255,255,255,.88)}.portrait-column .name h3{font-size:clamp(38px,10vw,50px)}}

/* Blue-green gradient works backdrop */
.works{background:linear-gradient(168deg,#628da5 0%,#78a8b8 24%,#9bc7c8 48%,#d0e4df 73%,#f3f2ea 100%);color:white}
.works .work-card>div:last-child{color:var(--ink);border-top-color:rgba(52,74,91,.26)}
.works .work-card>div:last-child span,.works .work-card>div:last-child p{color:#415f70}
.works .note{color:var(--ink);opacity:.72}
@media(max-width:800px){.works{background:linear-gradient(175deg,#628da5 0%,#83afba 30%,#b8d5d2 61%,#f3f2ea 100%)}}

.works .work-1>div:last-child h3,.works .work-2>div:last-child h3{color:#18384a;font-weight:500}
.works .work-1>div:last-child p,.works .work-2>div:last-child p,.works .work-1>div:last-child span,.works .work-2>div:last-child span{color:#244b60;font-weight:600}

/* Decorative color fields for open spaces */
.works{position:relative;isolation:isolate;overflow:hidden}
.works:before,.works:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:0}
.works:before{width:54vw;height:54vw;left:-26vw;top:32%;background:radial-gradient(circle,rgba(205,185,224,.5) 0%,rgba(205,185,224,.18) 44%,transparent 72%)}
.works:after{width:58vw;height:58vw;right:-29vw;bottom:4%;background:radial-gradient(circle,rgba(247,199,172,.58) 0%,rgba(247,213,188,.18) 48%,transparent 73%)}
.works>*{position:relative;z-index:1}
.works .work-card:nth-child(4n+1) .work-image.actual{background:linear-gradient(145deg,#eef7f8 0%,#dcebef 100%)}
.works .work-card:nth-child(4n+2) .work-image.actual{background:linear-gradient(145deg,#faf4ed 0%,#eadfd2 100%)}
.works .work-card:nth-child(4n+3) .work-image.actual{background:linear-gradient(145deg,#f2eef7 0%,#ded4e8 100%)}
.works .work-card:nth-child(4n) .work-image.actual{background:linear-gradient(145deg,#edf6f1 0%,#d6e6dd 100%)}
.work-groups{display:grid;gap:clamp(100px,12vw,170px)}
.work-group{position:relative}
.work-group-heading{max-width:760px;margin:0 0 54px;padding:0 0 26px;border-bottom:1px solid rgba(255,255,255,.48)}
.work-group-heading small{font:10px Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#294c60}
.work-group-heading h3{margin:12px 0 10px;font:400 clamp(30px,3.4vw,48px)/1.25 Georgia,"Yu Mincho",serif;letter-spacing:.035em;color:#203f52}
.work-group-heading p{margin:0;font:15px/1.8 "Yu Mincho",serif;letter-spacing:.08em;color:#385c6e}
.work-group:nth-child(even) .work-group-heading{margin-left:auto;text-align:right}
.work-group.group-2 .work-group-heading{margin-left:0;text-align:left}
.work-group .works-grid{gap:70px 5vw}
.work-group .work-card:nth-child(even){margin-top:90px}
.group-1 .work-3{margin-top:130px}
@media(max-width:800px){.work-groups{gap:90px}.work-group-heading,.work-group:nth-child(even) .work-group-heading{margin:0 0 38px;text-align:left}.work-group-heading h3{font-size:29px}.work-group-heading p{font-size:13px}.work-group .work-card:nth-child(even),.group-1 .work-3{margin-top:0}}
@media(max-width:800px){.works:before{width:95vw;height:95vw;left:-55vw;top:35%}.works:after{width:110vw;height:110vw;right:-65vw;bottom:8%}}

/* Soft gradients placed specifically in the open masonry gaps */
.works{background:
  radial-gradient(circle at 86% 12%,rgba(239,222,204,.72) 0%,rgba(239,222,204,.2) 18%,transparent 38%),
  radial-gradient(circle at 10% 48%,rgba(213,198,229,.56) 0%,rgba(213,198,229,.18) 20%,transparent 42%),
  radial-gradient(circle at 82% 76%,rgba(199,229,220,.7) 0%,rgba(199,229,220,.18) 21%,transparent 43%),
  linear-gradient(160deg,#6f99aa 0%,#8eb9bf 27%,#b7d1cc 52%,#d8ded3 76%,#b6c8d4 100%)}
.works:before,.works:after{display:block;filter:blur(34px);opacity:.66}
.works:before{background:radial-gradient(circle,rgba(237,218,232,.72) 0%,rgba(220,211,234,.28) 44%,transparent 72%)}
.works:after{background:radial-gradient(circle,rgba(255,224,195,.72) 0%,rgba(231,224,207,.26) 46%,transparent 74%)}
.works-grid{position:relative;isolation:isolate}
.works-grid .work-card{position:relative;z-index:2}
.gallery-accent{position:absolute;z-index:1;display:block;pointer-events:none;border-radius:50%;aspect-ratio:1;opacity:.88;filter:blur(18px)}
.gallery-accent:after{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,.14) 44%,transparent 76%)}
.accent-1{left:-1%;top:12%;width:43%;background:radial-gradient(circle at 52% 48%,rgba(216,202,230,.78) 0%,rgba(203,216,233,.46) 38%,rgba(231,224,232,.2) 62%,transparent 80%)}
.accent-2{right:-3%;top:39%;width:49%;opacity:.96;filter:blur(16px);background:radial-gradient(circle at 48% 46%,rgba(239,207,220,.88) 0%,rgba(218,205,232,.68) 28%,rgba(205,231,225,.44) 50%,rgba(241,224,207,.2) 67%,transparent 82%)}
.accent-2:after{inset:21%;background:radial-gradient(circle at 42% 40%,rgba(255,243,232,.56) 0%,rgba(225,215,237,.28) 45%,transparent 74%)}
.accent-3{left:-3%;top:62.5%;width:49%;opacity:.98;filter:blur(16px);background:radial-gradient(circle at 48% 46%,rgba(222,196,226,.9) 0%,rgba(207,201,231,.7) 27%,rgba(244,211,198,.42) 49%,rgba(222,230,227,.2) 66%,transparent 82%)}
.accent-3:after{inset:21%;background:radial-gradient(circle at 58% 42%,rgba(255,242,233,.58) 0%,rgba(240,213,220,.28) 44%,transparent 73%)}
.accent-4{right:-1%;top:74.5%;width:44%;background:radial-gradient(circle at 47% 49%,rgba(241,218,195,.74) 0%,rgba(218,230,219,.42) 41%,rgba(235,222,216,.18) 64%,transparent 80%)}
@media(max-width:800px){.gallery-accent{display:none}}

/* Calming layered gradients for the hero circles */
.hero-art{background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.72) 0%,rgba(224,237,243,.78) 24%,transparent 48%),radial-gradient(circle at 76% 72%,rgba(224,211,237,.72) 0%,rgba(218,231,235,.38) 42%,transparent 68%),linear-gradient(145deg,#d9edf0 0%,#cce2e8 38%,#d8dfed 68%,#eadfec 100%);box-shadow:0 30px 85px rgba(107,145,158,.12);opacity:.94}
.hero-art i{background:radial-gradient(circle at 38% 34%,#faf5eb 0%,#eee2d1 42%,#e7d9d2 72%,#ddd6e4 100%);box-shadow:0 20px 55px rgba(136,118,139,.1)}
.hero-art b{border-color:rgba(255,255,255,.72);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),rgba(205,226,229,.16) 48%,rgba(218,204,231,.24) 100%);box-shadow:inset 0 0 28px rgba(255,255,255,.2),0 14px 38px rgba(100,139,151,.08)}
.hero-art em{background:radial-gradient(circle at 35% 30%,#fff 0%,#f4eee7 48%,#e4dbea 100%);box-shadow:0 12px 34px rgba(110,134,146,.12)}

/* Rebalanced skills typography after simplifying the lists */
.skill-list{max-width:1040px}
.skill-list>div{grid-template-columns:190px 1fr;padding:38px 0;align-items:center}
.skill-list span{font-size:14px;letter-spacing:.18em}
.skill-list p{font-size:clamp(20px,1.65vw,24px);line-height:1.65;letter-spacing:.035em}
@media(max-width:800px){.skill-list>div{grid-template-columns:1fr;gap:16px;padding:30px 0}.skill-list span{font-size:13px}.skill-list p{font-size:18px;line-height:1.75}}
.form-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* Featured movie work */
.video-work{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:center;gap:clamp(32px,6vw,90px);margin-top:clamp(90px,12vw,170px);padding:clamp(22px,3vw,42px);background:linear-gradient(135deg,rgba(248,244,238,.92),rgba(229,238,239,.84));border:1px solid rgba(255,255,255,.62);color:var(--ink);box-shadow:0 28px 70px rgba(42,70,82,.13)}
.video-frame{background:#17242b;padding:clamp(8px,1.2vw,15px);box-shadow:0 22px 48px rgba(32,48,57,.24)}
.video-frame video{display:block;width:100%;max-height:70vh;aspect-ratio:16/9;object-fit:contain;background:#10191e}
.video-caption span{font:10px Georgia,serif;letter-spacing:.2em;color:#446575}
.video-caption h3{font:400 clamp(30px,3vw,46px)/1.35 "Yu Mincho",serif;margin:24px 0 8px}
.video-caption p{font:10px Arial,sans-serif;letter-spacing:.2em;color:#526f7c;margin:0 0 30px}
.video-caption small{font-size:12px;line-height:1.9;color:#60747d}
@media(max-width:800px){.video-work{grid-template-columns:1fr;gap:28px;margin-top:80px;padding:16px}.video-caption{padding:5px 6px 12px}.video-caption h3{font-size:30px;margin-top:18px}}

/* Preserve the complete artwork for unusually tall and wide samples */
.work-7 .work-image.actual,.work-8 .work-image.actual{aspect-ratio:auto;height:auto;min-height:0}
.work-3 .work-image.actual img,.work-9 .work-image.actual img,.work-10 .work-image.actual img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none!important}

/* Editorial heading for the movie sample */
.video-section-title{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:clamp(95px,11vw,155px);color:var(--ink);text-align:left}
.video-section-title span{font:11px Georgia,serif;color:#456576}
.video-section-title h3{margin:0;font:400 clamp(42px,5.3vw,72px)/1 Georgia,"Times New Roman",serif;letter-spacing:.035em;white-space:nowrap}
.video-section-title i{display:block;width:100%;height:1px;margin-top:10px;background:linear-gradient(90deg,rgba(52,74,91,.58),rgba(52,74,91,.08))}
.video-section-title small{font:9px Arial,sans-serif;letter-spacing:.22em;color:#4d6b79}
.video-work{margin-top:clamp(30px,4vw,52px)}
@media(max-width:800px){.video-section-title{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:75px}.video-section-title h3{font-size:clamp(28px,8vw,42px)}.video-section-title i{grid-column:1}.video-section-title small{grid-column:1}.video-work{margin-top:28px}}

/* Final full-image safeguard: no crop or fixed frame on works 07 and 08 */
.works-grid .work-7,.works-grid .work-8{align-self:start}
.works-grid .work-3 .work-image.actual,.works-grid .work-9 .work-image.actual,.works-grid .work-10 .work-image.actual{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible!important}
.works-grid .work-3 .work-image.actual img,.works-grid .work-9 .work-image.actual img,.works-grid .work-10 .work-image.actual img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:none!important;min-height:0!important;object-fit:contain!important;object-position:center!important;transform:none!important}

/* Second movie sample */
.video-work.secondary{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);margin-top:clamp(34px,4.5vw,62px);background:linear-gradient(135deg,rgba(230,239,237,.88),rgba(244,237,230,.94))}
.video-work.secondary .video-caption{padding-left:clamp(4px,1.5vw,20px)}
@media(max-width:800px){.video-work.secondary{grid-template-columns:1fr;margin-top:28px}.video-work.secondary .video-frame{order:1}.video-work.secondary .video-caption{order:2;padding-left:6px}}
.video-work.tertiary{margin-top:clamp(34px,4.5vw,62px);background:linear-gradient(135deg,rgba(244,239,232,.94),rgba(226,237,240,.88))}
.video-caption h3 .title-sub{display:inline-block;margin-top:10px;font:400 .53em/1.3 "Yu Mincho",serif;letter-spacing:.08em;color:#4e6875}
@media(max-width:800px){.video-work.tertiary{margin-top:28px}}
.video-work.quaternary{margin-top:clamp(34px,4.5vw,62px);background:linear-gradient(135deg,rgba(230,238,236,.9),rgba(245,236,229,.94))}
.video-work.quintenary{margin-top:clamp(34px,4.5vw,62px);background:linear-gradient(135deg,rgba(245,239,233,.94),rgba(226,237,240,.9))}
.video-work.senary{margin-top:clamp(34px,4.5vw,62px);background:linear-gradient(135deg,rgba(228,239,238,.9),rgba(241,235,245,.93))}

/* Page index */
.portfolio-index{padding:clamp(74px,9vw,120px) max(7vw,32px);background:linear-gradient(135deg,#f7fafb 0%,#edf4f5 48%,#f5eee7 100%);color:var(--ink)}
.portfolio-index-heading{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:8px 24px;margin-bottom:48px}
.portfolio-index-heading span{font:10px Arial,sans-serif;letter-spacing:.28em}
.portfolio-index-heading h2{margin:0;font:400 clamp(44px,5vw,70px)/1 Georgia,serif;letter-spacing:.04em}
.portfolio-index-heading p{grid-column:2;margin:5px 0 0;font-size:13px;letter-spacing:.08em}
.portfolio-index-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(52,74,91,.25);border-left:1px solid rgba(52,74,91,.18)}
.portfolio-index-links a{min-height:150px;padding:24px 26px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;border-right:1px solid rgba(52,74,91,.18);border-bottom:1px solid rgba(52,74,91,.25);text-decoration:none;background:rgba(255,255,255,.34);transition:.3s ease}
.portfolio-index-links a:hover{background:rgba(255,255,255,.82);transform:translateY(-3px);box-shadow:0 16px 36px rgba(52,74,91,.1)}
.portfolio-index-links b{font:10px Georgia,serif;font-weight:400;margin-top:6px}
.portfolio-index-links span{font:400 clamp(22px,2.2vw,32px)/1.15 Georgia,serif;letter-spacing:.04em}
.portfolio-index-links small{display:block;margin-top:14px;font:11px "Yu Gothic",sans-serif;letter-spacing:.12em}
.portfolio-index-links i{font-style:normal;font-size:18px;transition:transform .3s}
.portfolio-index-links a:hover i{transform:translate(4px,4px)}
#works-samples,#logo-design,#video-samples,#skills,#service,#contact{scroll-margin-top:40px}
@media(max-width:800px){.portfolio-index{padding:72px 24px}.portfolio-index-heading{grid-template-columns:1fr;gap:10px;margin-bottom:34px}.portfolio-index-heading p{grid-column:1;font-size:12px;line-height:1.8}.portfolio-index-links{grid-template-columns:1fr 1fr}.portfolio-index-links a{min-height:130px;padding:20px 16px;gap:10px}.portfolio-index-links span{font-size:21px}.portfolio-index-links small{font-size:10px;line-height:1.5}}

.antialiased{-webkit-font-smoothing:antialiased}